App and sorting updates

src/pages/homepage/components/Applications/Applications.tsx

@@ -9,17 +9,31 @@ function Applications({ contentType }: any) {
 	const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
 		endpoint: 'api/apps',
 	});
-	const { isMobile } = useCommonHooks();
+	const { isMobile, appSort } = useCommonHooks();
 	const [applicationData, setApplicationData] = useState<Application[]>([]);
 
 	useEffect(() => {
 		if (apps && !isAppsFetching) {
 			setApplicationData(
-				apps.sort((a: Application, b: Application) => (a.name > b.name ? 1 : -1)),
+				apps
+					.filter((a: Application) => a.enabled === 1)
+					.sort((a: any, b: any) => {
+						switch (appSort) {
+							case 'A>Z':
+								return a.name > b.name ? 1 : -1;
+							case 'Z>A':
+								return a.name < b.name ? 1 : -1;
+							case 'Newest':
+								return a.id < b.id ? 1 : -1;
+							case 'Oldest':
+								return a.id > b.id ? 1 : -1;
+							case 'Custom':
+								return a.index > b.index ? 1 : -1;
+						}
+					}),
 			);
 		}
-	}, [apps, isAppsFetching]);
-
+	}, [apps, isAppsFetching, appSort]);
 	return (
 		<>
 			{applicationData.length > 0 && contentType.length > 0 && (
@@ -39,11 +53,13 @@ function Applications({ contentType }: any) {
 							gridTemplateRows: '64px',
 						}}
 					>
-						{applicationData?.map((application: any) => {
-							if (
-								contentType.includes(application.filterName) ||
-								contentType.includes('All')
+						{applicationData
+							?.filter(
+								(application: Application) =>
+									contentType.includes(application.filterName) ||
+									contentType.includes('All'),
 							)
+							.map((application: any) => {
 								return (
 									<AppItem
 										key={application.name}
@@ -53,7 +69,7 @@ function Applications({ contentType }: any) {
 										category={application.category}
 									/>
 								);
-						})}
+							})}
 					</Stack>
 				</Stack>
 			)}

src/pages/homepage/components/Bookmarks/Bookmarks.tsx

@@ -12,7 +12,7 @@ function Links({ contentType }: any) {
 	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
 		endpoint: 'api/categories',
 	});
-	const { isMobile } = useCommonHooks();
+	const { isMobile, bookmarkSort } = useCommonHooks();
 	const [bookmarkData, setBookmarkData] = useState<Bookmark[]>([]);
 	const [groups, setGroups] = useState<BookmarkGroup[]>([]);
 
@@ -28,12 +28,23 @@ function Links({ contentType }: any) {
 				return category;
 			});
 			setGroups(
-				groupList.sort((a: BookmarkGroup, b: BookmarkGroup) =>
-					a.categoryIndex > b.categoryIndex ? 1 : -1,
-				),
+				groupList.sort((a: any, b: any) => {
+					switch (bookmarkSort) {
+						case 'A>Z':
+							return a.categoryName > b.categoryName ? 1 : -1;
+						case 'Z>A':
+							return a.categoryName < b.categoryName ? 1 : -1;
+						case 'Newest':
+							return a.id < b.id ? 1 : -1;
+						case 'Oldest':
+							return a.id > b.id ? 1 : -1;
+						case 'Custom':
+							return a.index > b.index ? 1 : -1;
+					}
+				}),
 			);
 		}
-	}, [groupData, groupsIsFetched]);
+	}, [groupData, groupsIsFetched, bookmarkSort]);
 
 	return (
 		<>
@@ -55,11 +66,14 @@ function Links({ contentType }: any) {
 								gridTemplateRows: 'auto',
 							}}
 						>
-							{groups.map((category: BookmarkGroup) => {
-								if (
-									contentType.includes(category.filterName) ||
-									contentType.includes('All')
-								) {
+							{groups
+								?.filter(
+									(category: BookmarkGroup) =>
+										contentType.includes(category.filterName) ||
+										contentType.includes('All'),
+								)
+
+								.map((category: BookmarkGroup) => {
 									return (
 										<LinkGroups
 											key={category.categoryName}
@@ -70,8 +84,7 @@ function Links({ contentType }: any) {
 											)}
 										/>
 									);
-								}
-							})}
+								})}
 						</Stack>
 					</Stack>
 				)}

src/pages/homepage/components/SettingsButton.tsx

@@ -53,6 +53,10 @@ function SettingsButton() {
 		theme,
 		appFilter,
 		setAppFilter,
+		appSort,
+		setAppSort,
+		bookmarkSort,
+		setBookmarkSort,
 		bookmarkFilter,
 		setBookmarkFilter,
 		isMobile,
@@ -330,6 +334,57 @@ function SettingsButton() {
 								/>
 							</Group>
 						</Stack>
+						<Menu.Divider
+							w={'85%'}
+							m={'.75rem'}
+							style={{ borderColor: theme.accentColor }}
+						/>
+						<Stack
+							gap={0}
+							align='center'
+							w={'85%'}
+							h={'100px'}
+							className={stackClasses.menuStack}
+							classNames={stackClasses}
+						>
+							<Menu.Label>Sorting</Menu.Label>
+							<Group justify='space-between' px={'.5rem'}>
+								<Select
+									label={'Apps'}
+									placeholder='Sort Applications...'
+									value={appSort}
+									data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
+									w={'45%'}
+									classNames={{
+										input: selectClasses.menuSelectInput,
+										label: selectClasses.menuSelectLabel,
+										options: selectClasses.menuSelectOptions,
+										option: selectClasses.menuSelectOption,
+									}}
+									comboboxProps={{ withinPortal: false }}
+									onChange={(_value, option: any) => {
+										setAppSort(option.value);
+									}}
+								/>
+								<Select
+									label={'Bookmarks'}
+									placeholder='Sort Bookmarks...'
+									value={bookmarkSort}
+									data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
+									w={'45%'}
+									classNames={{
+										input: selectClasses.menuSelectInput,
+										label: selectClasses.menuSelectLabel,
+										options: selectClasses.menuSelectOptions,
+										option: selectClasses.menuSelectOption,
+									}}
+									comboboxProps={{ withinPortal: false }}
+									onChange={(_value, option: any) => {
+										setBookmarkSort(option.value);
+									}}
+								/>
+							</Group>
+						</Stack>
 					</Stack>
 				</Menu.Dropdown>
 			</Menu>