Bugfixes & UI updates

src/pages/homepage/components/Applications.tsx

@@ -14,7 +14,7 @@ function Applications({ contentType }: any) {
 	}, [isFetching]);
 	return (
 		<>
-			{applications.length > 0 && (
+			{applications.length > 0 && contentType.length > 0 && (
 				<Stack id='apps' style={{ gap: 0 }}>
 					<Text className={texts.sectionTitle} classNames={texts}>
 						Applications

src/pages/homepage/components/Bookmarks.tsx

@@ -22,40 +22,43 @@ function Links({ contentType }: any) {
 	}, [linksIsFetched, groupsIsFetched]);
 	return (
 		<>
-			{groupsIsFetched && linksIsFetched && categories?.length > 0 && (
-				<Stack id='links' style={{ gap: 0 }}>
-					<Text className={texts.sectionTitle} classNames={texts}>
-						Bookmarks
-					</Text>
-					<Stack
-						style={{
-							display: 'grid',
-							flexWrap: 'nowrap',
-							gridColumnGap: '20px',
-							gridRowGap: '0px',
-							gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
-							gridTemplateRows: 'auto',
-						}}
-					>
-						{categories.map((category: any) => {
-							if (
-								contentType.includes(category.filterName) ||
-								contentType.includes('All')
-							) {
-								return (
-									<LinkGroups
-										key={category.id}
-										category={category.categoryName}
-										links={bookmarks.filter(
-											(bookmark: any) => bookmark.category === category.categoryName,
-										)}
-									/>
-								);
-							}
-						})}
+			{groupsIsFetched &&
+				linksIsFetched &&
+				categories?.length > 0 &&
+				contentType.length > 0 && (
+					<Stack id='links' style={{ gap: 0 }}>
+						<Text className={texts.sectionTitle} classNames={texts}>
+							Bookmarks
+						</Text>
+						<Stack
+							style={{
+								display: 'grid',
+								flexWrap: 'nowrap',
+								gridColumnGap: '20px',
+								gridRowGap: '0px',
+								gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr',
+								gridTemplateRows: 'auto',
+							}}
+						>
+							{categories.map((category: any) => {
+								if (
+									contentType.includes(category.filterName) ||
+									contentType.includes('All')
+								) {
+									return (
+										<LinkGroups
+											key={category.id}
+											category={category.categoryName}
+											links={bookmarks.filter(
+												(bookmark: any) => bookmark.category === category.categoryName,
+											)}
+										/>
+									);
+								}
+							})}
+						</Stack>
 					</Stack>
-				</Stack>
-			)}
+				)}
 		</>
 	);
 }

src/pages/homepage/components/Search.tsx

@@ -1,15 +1,18 @@
-import { Stack, TextInput } from '@mantine/core';
+import { Divider, Group, Modal, Stack, Text, TextInput } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { useAtom } from 'jotai';
 import { useState } from 'react';
+import { appTheme } from '../../../contexts/theme';
 import { useQueryAPI } from '../../../hooks';
-import { textInputClasses } from '../../../styles';
+import { modalClasses, textInputClasses } from '../../../styles';
 
 export default function Search() {
 	const { data: providers } = useQueryAPI({ endpoint: 'api/providers' });
-
+	const [opened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const [providerLabel, setProviderLabel] = useState('Google Search');
 	const [providerURL, setProviderURL] = useState('https://www.google.com/search?q=');
 	const [value, setValue] = useState('');
-
+	const [theme, setTheme] = useAtom(appTheme);
 	const handleKeyPress = (item: any) => {
 		let option = '';
 		let subtext = '';
@@ -22,7 +25,9 @@ export default function Search() {
 			subtext = item.target.value;
 		}
 		if (item.key === 'Enter') {
-			if (item.target.value.startsWith('/')) {
+			if (providerLabel === 'Show help') {
+				openModal();
+			} else if (item.target.value.startsWith('/')) {
 				open(`${providerURL}${subtext}`, '_self');
 			} else if (validURL(item.target.value)) {
 				if (containsProtocol(item.target.value)) window.location = item.target.value;
@@ -72,7 +77,9 @@ export default function Search() {
 				data-active={value !== ''}
 				onChange={(item: any) => {
 					setValue(item.currentTarget.value);
-					if (item.target.value.startsWith('/')) {
+					if (item.target.value === '/?') {
+						setProviderLabel('Show help');
+					} else if (item.target.value.startsWith('/')) {
 						const provider = providers?.find(
 							(p: any) => p.prefix === item.target.value.split(' ')[0],
 						);
@@ -89,6 +96,48 @@ export default function Search() {
 					}
 				}}
 			/>
+			<Modal.Root
+				size={'50%'}
+				className={modalClasses.helpModal}
+				classNames={modalClasses}
+				opened={opened}
+				onClose={() => {
+					closeModal();
+					setValue('');
+					setProviderLabel('Google Search');
+					setProviderURL('https://www.google.com/search?q=');
+				}}
+				style={{
+					'--color-text-pri': theme.primaryColor,
+					'--color-text-acc': theme.accentColor,
+					'--color-background': theme.backgroundColor,
+					'--color-border': theme.borderColor,
+					'--color-search-background': theme.searchColor,
+					'--image-background': `url(${theme.backgroundImage})`,
+				}}
+				closeOnEscape
+				closeOnClickOutside
+			>
+				<Modal.Overlay />
+				<Modal.Content>
+					<Modal.Header>
+						<Modal.Title>Help info</Modal.Title>
+						<Modal.CloseButton />
+					</Modal.Header>
+					<Modal.Body pb={'2rem'}>
+						<Stack gap={0} w={'100%'} align='center'>
+							<h3 style={{ padding: 0, margin: 0 }}>Search Providers</h3>
+							<Divider py={8} w={'65%'} color={theme.accentColor} />
+							{providers?.map((provider: any) => (
+								<Group key={provider.prefix} gap={0} w={'50%'} justify='space-between'>
+									<Text>{provider.prefix}</Text>
+									<Text>{provider.name}</Text>
+								</Group>
+							))}
+						</Stack>
+					</Modal.Body>
+				</Modal.Content>
+			</Modal.Root>
 		</Stack>
 	);
 }