Working empty version

src/pages/homepage/Homepage.tsx

@@ -13,9 +13,13 @@ import { useLocalStorage } from '@mantine/hooks';
 export default function Homepage({ theme }: any) {
 	const { data, isFetching } = useQueryAPI({ endpoint: 'api/messages' });
 	const [displayedGreeting, setDisplayedGreeting] = useState('');
-	const [contentType, setContentType] = useLocalStorage<any>({
-		key: 'contenttype',
-		defaultValue: 'All',
+	const [appFilter, setAppFilter] = useLocalStorage<[any]>({
+		key: 'appFilter',
+		defaultValue: ['All'],
+	});
+	const [bookmarkFilter, setBookmarkFilter] = useLocalStorage<[any]>({
+		key: 'bookmarkFilter',
+		defaultValue: ['All'],
 	});
 	function date() {
 		const currentDate = new Date();
@@ -33,18 +37,18 @@ export default function Homepage({ theme }: any) {
 		const greet = Math.floor(currentTime.getHours() / 6);
 		const easterEggChance = Math.floor(Math.random() * 100);
 		let timeBased: any = [];
-		let easterEggs: any = [];
+		let customGreetings: any = [];
 		for (const l of list) {
-			if (l.easteregg === 'N') {
+			if (l.customGreeting === 0) {
 				timeBased = timeBased.concat(l);
 			} else {
-				easterEggs = easterEggs.concat(l);
+				customGreetings = customGreetings.concat(l);
 			}
 		}
-		if (easterEggChance > 10 || easterEggs.length === 0) {
+		if (easterEggChance > 10 || customGreetings.length === 0) {
 			return timeBased[greet].message;
 		}
-		return easterEggs[Math.floor(Math.random() * easterEggs.length)].message;
+		return customGreetings[Math.floor(Math.random() * customGreetings.length)].message;
 	}
 
 	useEffect(() => {
@@ -57,12 +61,14 @@ export default function Homepage({ theme }: any) {
 		<Stack gap={0} className={stackClasses.containerStack} justify='center'>
 			<Search />
 			<Header date={date()} greet={displayedGreeting} />
-			<Applications contentType={contentType} />
-			<Bookmarks contentType={contentType} />
+			<Applications contentType={appFilter} />
+			<Bookmarks contentType={bookmarkFilter} />
 			<SettingsButton
 				theme={theme}
-				contentType={contentType}
-				setContentType={setContentType}
+				setAppFilter={setAppFilter}
+				appFilter={appFilter}
+				setBookmarkFilter={setBookmarkFilter}
+				bookmarkFilter={bookmarkFilter}
 			/>
 		</Stack>
 	);

src/pages/homepage/components/Applications.tsx

@@ -13,38 +13,45 @@ function Applications({ contentType }: any) {
 		}
 	}, [isFetching]);
 	return (
-		<Stack id='apps' style={{ gap: 0 }}>
-			<Text className={texts.sectionTitle} classNames={texts}>
-				Applications
-			</Text>
-			<Stack
-				style={{
-					background: 'var(--color-background)',
-					gap: '.25rem',
-					backgroundSize: 'cover',
-					borderBottom: '0px solid',
-					display: 'grid',
-					gridColumnGap: '5px',
-					gridRowGap: '5px',
-					gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr',
-					gridTemplateRows: '64px',
-					paddingBottom: 'var(--module-spacing)',
-				}}
-			>
-				{applications?.map((item: any) => {
-					if (item.category === contentType || contentType === 'All')
-						return (
-							<AppItem
-								key={item.name}
-								name={item.name}
-								url={item.url}
-								icon={item.icon}
-								category={item.category}
-							/>
-						);
-				})}
-			</Stack>
-		</Stack>
+		<>
+			{applications.length > 0 && (
+				<Stack id='apps' style={{ gap: 0 }}>
+					<Text className={texts.sectionTitle} classNames={texts}>
+						Applications
+					</Text>
+					<Stack
+						style={{
+							background: 'var(--color-background)',
+							gap: '.25rem',
+							backgroundSize: 'cover',
+							borderBottom: '0px solid',
+							display: 'grid',
+							gridColumnGap: '5px',
+							gridRowGap: '5px',
+							gridTemplateColumns: '1fr 1fr 1fr 1fr 1fr 1fr',
+							gridTemplateRows: '64px',
+							paddingBottom: 'var(--module-spacing)',
+						}}
+					>
+						{applications?.map((application: any) => {
+							if (
+								contentType.includes(application.filterName) ||
+								contentType.includes('All')
+							)
+								return (
+									<AppItem
+										key={application.name}
+										name={application.name}
+										url={application.url}
+										icon={application.icon}
+										category={application.category}
+									/>
+								);
+						})}
+					</Stack>
+				</Stack>
+			)}
+		</>
 	);
 }
 

src/pages/homepage/components/Bookmarks.tsx

@@ -20,7 +20,6 @@ function Links({ contentType }: any) {
 			setCategories(groupData);
 		}
 	}, [linksIsFetched, groupsIsFetched]);
-
 	return (
 		<>
 			{groupsIsFetched && linksIsFetched && categories?.length > 0 && (
@@ -39,13 +38,16 @@ function Links({ contentType }: any) {
 						}}
 					>
 						{categories.map((category: any) => {
-							if (category.column_filter === contentType || contentType === 'All') {
+							if (
+								contentType.includes(category.filterName) ||
+								contentType.includes('All')
+							) {
 								return (
 									<LinkGroups
 										key={category.id}
-										category={category.category_name}
+										category={category.categoryName}
 										links={bookmarks.filter(
-											(bookmark: any) => bookmark.category === category.category_index,
+											(bookmark: any) => bookmark.category === category.categoryName,
 										)}
 									/>
 								);

src/pages/homepage/components/MessageInfo.jsx

@@ -22,7 +22,7 @@ function MessageInfo() {
 							group={index + 1}
 							index={greeting.index}
 							greeting={greeting.message}
-							easterEgg={greeting.easteregg}
+							easterEgg={greeting.customGreeting}
 						/>
 					))}
 				</div>

src/pages/homepage/components/Search.tsx

@@ -63,6 +63,7 @@ export default function Search() {
 			}}
 		>
 			<TextInput
+				autoFocus
 				className={textInputClasses.search}
 				classNames={textInputClasses}
 				spellCheck='true'

src/pages/homepage/components/SettingsButton.tsx

@@ -1,4 +1,4 @@
-import { Button, Menu, NavLink, Select } from '@mantine/core';
+import { Button, Menu, MultiSelect, NavLink } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { FiMenu, FiMonitor } from 'react-icons/fi';
 import { useQueryAPI } from '../../../hooks/useAPI';
@@ -7,7 +7,13 @@ import menu from '../../../styles/Menu.module.css';
 import navLink from '../../../styles/NavLink.module.css';
 import selectClasses from '../../../styles/Select.module.css';
 
-function SettingsButton({ contentType, setContentType, theme }: any) {
+function SettingsButton({
+	appFilter,
+	setAppFilter,
+	bookmarkFilter,
+	setBookmarkFilter,
+	theme,
+}: any) {
 	const { data, isFetched } = useQueryAPI({ endpoint: 'api/appCategories' });
 	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
 
@@ -15,7 +21,7 @@ function SettingsButton({ contentType, setContentType, theme }: any) {
 		if (data) {
 			const list: [any] =
 				data.map((category: any) => {
-					return { value: category.category, label: category.category };
+					return { value: category.filterName, label: category.filterName };
 				}) || [];
 			list.unshift({ value: 'All', label: 'All' });
 			setCategories(list);
@@ -57,13 +63,24 @@ function SettingsButton({ contentType, setContentType, theme }: any) {
 						classNames={navLink}
 					/>
 				</NavLink>
-				<Select
-					label='Homepage Filter'
+				<MultiSelect
+					label='App Filter'
 					data={categories ?? []}
-					defaultValue={contentType}
+					defaultValue={appFilter}
 					withCheckIcon={false}
 					onChange={(data: any) => {
-						setContentType(data);
+						setAppFilter(data);
+					}}
+					classNames={selectClasses}
+					comboboxProps={{ withinPortal: false }}
+				/>
+				<MultiSelect
+					label='Bookmark Filter'
+					data={categories ?? []}
+					defaultValue={bookmarkFilter}
+					withCheckIcon={false}
+					onChange={(data: any) => {
+						setBookmarkFilter(data);
 					}}
 					classNames={selectClasses}
 					comboboxProps={{ withinPortal: false }}