Typing and Density settings

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

@@ -9,7 +9,7 @@ function Applications({ contentType }: { contentType: [string] }) {
 	const { data: apps, isFetching: isAppsFetching } = useQueryAPI({
 		endpoint: 'api/apps',
 	});
-	const { isMobile, appSort } = useCommonHooks();
+	const { isMobile, appSort, appDensity } = useCommonHooks();
 	const [applicationData, setApplicationData] = useState<Application[]>([]);
 
 	useEffect(() => {
@@ -49,7 +49,9 @@ function Applications({ contentType }: { contentType: [string] }) {
 							display: 'grid',
 							gridColumnGap: '5px',
 							gridRowGap: '5px',
-							gridTemplateColumns: isMobile ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr 1fr 1fr',
+							gridTemplateColumns: isMobile
+								? '1fr 1fr 1fr'
+								: `repeat(${appDensity}, 1fr)`,
 							gridTemplateRows: '64px',
 						}}
 					>

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

@@ -12,7 +12,7 @@ function Links({ contentType }: { contentType: [string] }) {
 	const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({
 		endpoint: 'api/categories',
 	});
-	const { isMobile, bookmarkSort } = useCommonHooks();
+	const { isMobile, bookmarkSort, bookmarkDensity } = useCommonHooks();
 	const [bookmarkData, setBookmarkData] = useState<Bookmark[]>([]);
 	const [groups, setGroups] = useState<BookmarkGroup[]>([]);
 
@@ -62,7 +62,9 @@ function Links({ contentType }: { contentType: [string] }) {
 								flexWrap: 'nowrap',
 								gridColumnGap: '20px',
 								gridRowGap: '0px',
-								gridTemplateColumns: isMobile ? '1fr 1fr' : '1fr 1fr 1fr 1fr 1fr',
+								gridTemplateColumns: isMobile
+									? '1fr 1fr'
+									: `repeat(${bookmarkDensity}, 1fr)`,
 								gridTemplateRows: 'auto',
 							}}
 						>

src/pages/homepage/components/Search/Search.tsx

@@ -12,7 +12,13 @@ import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
 import { FiEdit, FiTrash } from 'react-icons/fi';
 import { actionIconClasses, selectClasses } from 'styles';
-import type { Application, CurrentWeather, ExtendedForecast, Provider } from 'types';
+import type {
+	Application,
+	CurrentWeather,
+	ExtendedForecast,
+	Provider,
+	SearchHistoryItem,
+} from 'types';
 
 export default function Search({
 	current,
@@ -38,8 +44,8 @@ export default function Search({
 	const { data: history, isFetched: historyIsFetched } = useQueryAPI({
 		endpoint: 'api/searchHistory',
 	});
-	const [searchHistory, setSearchHistory] = useState<any>([]);
-	const [filteredHistory, setFilteredHistory] = useState<any>([]);
+	const [searchHistory, setSearchHistory] = useState<SearchHistoryItem[]>([]);
+	const [filteredHistory, setFilteredHistory] = useState<SearchHistoryItem[]>([]);
 	const { mutateAsync } = useMutationAPI();
 	const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
 		useDisclosure(false);
@@ -169,7 +175,7 @@ export default function Search({
 							? `${searchHistory[listIndex].prefix} ${searchHistory[listIndex].searchTerm}`
 							: '',
 					);
-					setValue(searchHistory.length > 0 ? searchHistory[listIndex].id : 0);
+					setValue(searchHistory[listIndex].id ?? 0);
 				}
 			} else if (searchValue !== '') {
 				if (item.code === 'ArrowUp') {
@@ -193,7 +199,7 @@ export default function Search({
 					setSearchValue(
 						`${filteredHistory[listIndex].prefix} ${filteredHistory[listIndex].searchTerm}`,
 					);
-					setValue(filteredHistory[listIndex].id);
+					setValue(filteredHistory[listIndex].id ?? 0);
 				}
 			}
 		}

src/pages/homepage/components/SettingsButton.tsx

@@ -6,13 +6,15 @@ import {
 	MultiSelect,
 	Overlay,
 	Select,
+	Slider,
 	Stack,
 	Text,
 	Tooltip,
 } from '@mantine/core';
+import { useQueryClient } from '@tanstack/react-query';
 import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
 import { useEffect, useState } from 'react';
-import { FaDice } from 'react-icons/fa';
+import { FaDice, FaSync } from 'react-icons/fa';
 import { FiMenu, FiPower, FiSettings, FiShuffle } from 'react-icons/fi';
 import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
@@ -22,6 +24,7 @@ import {
 	menuClasses,
 	multiSelectClasses,
 	selectClasses,
+	sliderClasses,
 	stackClasses,
 } from 'styles';
 import type { AppCategory, Theme, ThemePlaylist, WolClient } from 'types';
@@ -55,10 +58,14 @@ function SettingsButton() {
 		setAppFilter,
 		appSort,
 		setAppSort,
+		appDensity,
+		setAppDensity,
 		bookmarkSort,
 		setBookmarkSort,
 		bookmarkFilter,
 		setBookmarkFilter,
+		bookmarkDensity,
+		setBookmarkDensity,
 		isMobile,
 		currentThemePlaylist,
 		setCurrentThemePlaylist,
@@ -71,6 +78,23 @@ function SettingsButton() {
 		});
 	};
 
+	const marks = [
+		{ value: 1, label: '1' },
+		{ value: 2, label: '2' },
+		{ value: 3, label: '3' },
+		{ value: 4, label: '4' },
+		{ value: 5, label: '5' },
+		{ value: 6, label: '6' },
+		{ value: 7, label: '7' },
+		{ value: 8, label: '8' },
+	];
+
+	const queryClient = useQueryClient();
+
+	const handleRefresh = () => {
+		queryClient.refetchQueries();
+	};
+
 	useEffect(() => {
 		if (data) {
 			const list: [any] = data.map((category: AppCategory) => {
@@ -97,7 +121,7 @@ function SettingsButton() {
 			{overlayOpened && <Overlay pos={'fixed'} />}
 			<Menu
 				classNames={menuClasses}
-				width={isMobile ? '98%' : '500px'}
+				width={isMobile ? '98%' : 'auto'}
 				withinPortal={false}
 				withArrow
 				shadow='md'
@@ -119,25 +143,14 @@ function SettingsButton() {
 								: theme.backgroundColor,
 					}}
 				>
-					<Stack gap={0} display={'flex'} pb={'1rem'} pt={'2rem'} align='center'>
-						<Tooltip label='Settings' color={theme.primaryColor} withArrow>
-							<FiSettings
-								size={20}
-								onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}
-								style={{
-									cursor: 'pointer',
-									position: 'absolute',
-									top: '.5rem',
-									right: '.5rem',
-								}}
-							/>
-						</Tooltip>
-						<Group w={'100%'} justify='center'>
+					<Group p={'1rem'} gap={24}>
+						<Stack display={'flex'} align='center'>
 							<Stack
 								gap={0}
 								align='center'
 								className={stackClasses.menuStack}
 								classNames={stackClasses}
+								style={{ aspectRatio: '1/1' }}
 							>
 								<Menu.Label>Wake on LAN</Menu.Label>
 								<Button
@@ -186,6 +199,7 @@ function SettingsButton() {
 								align='center'
 								className={stackClasses.menuStack}
 								classNames={stackClasses}
+								style={{ aspectRatio: '1/1' }}
 							>
 								<Menu.Label pb={'.25rem'}>Themes</Menu.Label>
 								<Group mt={'-1rem'} mb={'-.75rem'} w={'95%'} justify='space-between'>
@@ -281,118 +295,188 @@ function SettingsButton() {
 									onLoad={(option: any) => setCurrentThemePlaylist(option)}
 								/>
 							</Stack>
-						</Group>
-						<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>Filters</Menu.Label>
-							<Group justify='space-between' px={'.5rem'}>
-								<MultiSelect
-									label='Apps'
-									data={
-										categories.toSorted((a: any, b: any) =>
-											a.label.localeCompare(b.label),
-										) ?? []
-									}
-									placeholder={
-										appFilter.length > 0
-											? appFilter.length === 1
-												? appFilter[0]
-												: `${appFilter.length} apps selected`
-											: 'No apps selected'
-									}
-									defaultValue={appFilter}
-									onChange={(data: any) => {
-										setAppFilter(data);
-									}}
-									classNames={multiSelectClasses}
-									comboboxProps={{ withinPortal: false }}
-								/>
-								<MultiSelect
-									label='Bookmarks'
-									data={
-										categories.toSorted((a: any, b: any) =>
-											a.label.localeCompare(b.label),
-										) ?? []
-									}
-									placeholder={
-										bookmarkFilter.length > 0
-											? bookmarkFilter.length === 1
-												? bookmarkFilter[0]
-												: `${bookmarkFilter.length} bookmarks selected`
-											: 'No bookmarks selected'
-									}
-									defaultValue={bookmarkFilter}
-									onChange={(data: any) => {
-										setBookmarkFilter(data);
-									}}
-									classNames={multiSelectClasses}
-									comboboxProps={{ withinPortal: false }}
-								/>
-							</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,
+						<Stack display={'flex'} align='center'>
+							<Stack
+								gap={0}
+								align='center'
+								className={stackClasses.menuStack}
+								classNames={stackClasses}
+								pos={'relative'}
+							>
+								<Text
+									style={{
+										fontSize: 12,
+										paddingLeft: 8,
+										paddingRight: 8,
+										paddingTop: 2,
+										paddingBottom: 2,
+										borderRadius: 8,
+										position: 'absolute',
+										left: '-20px',
+										top: '-8px',
+										backgroundColor: theme.primaryColor,
+										color: theme.backgroundColor,
 									}}
-									comboboxProps={{ withinPortal: false }}
-									onChange={(_value, option: any) => {
-										setAppSort(option.value);
+								>
+									Apps
+								</Text>
+								<Stack m={0} p={0} gap={0} w={'90%'}>
+									<Text fz={14} mt={16}>
+										Density
+									</Text>
+									<Slider
+										className={sliderClasses.default}
+										classNames={sliderClasses}
+										restrictToMarks
+										value={appDensity}
+										onChange={(value) => setAppDensity(value)}
+										min={1}
+										max={8}
+										marks={marks}
+									/>
+								</Stack>
+								<Group justify='space-between' px={'.5rem'}>
+									<MultiSelect
+										label='Filter'
+										data={
+											categories.toSorted((a: any, b: any) =>
+												a.label.localeCompare(b.label),
+											) ?? []
+										}
+										placeholder={
+											appFilter.length > 0
+												? appFilter.length === 1
+													? appFilter[0]
+													: `${appFilter.length} apps selected`
+												: 'No apps selected'
+										}
+										defaultValue={appFilter}
+										onChange={(data: any) => {
+											setAppFilter(data);
+										}}
+										classNames={multiSelectClasses}
+										comboboxProps={{ withinPortal: false }}
+									/>
+									<Select
+										label={'Sorting'}
+										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);
+										}}
+									/>
+								</Group>
+							</Stack>
+							<Stack
+								gap={0}
+								align='center'
+								className={stackClasses.menuStack}
+								classNames={stackClasses}
+								pos={'relative'}
+							>
+								<Text
+									style={{
+										fontSize: 12,
+										paddingLeft: 8,
+										paddingRight: 8,
+										paddingTop: 2,
+										paddingBottom: 2,
+										borderRadius: 8,
+										position: 'absolute',
+										left: '-20px',
+										top: '-8px',
+										backgroundColor: theme.primaryColor,
+										color: theme.backgroundColor,
 									}}
-								/>
-								<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>
+								>
+									Bookmarks
+								</Text>
+								<Stack m={0} p={0} gap={0} w={'90%'}>
+									<Text fz={14} mt={16}>
+										Density
+									</Text>
+									<Slider
+										className={sliderClasses.default}
+										classNames={sliderClasses}
+										restrictToMarks
+										value={bookmarkDensity}
+										onChange={(value) => setBookmarkDensity(value)}
+										min={1}
+										max={8}
+										marks={marks}
+									/>
+								</Stack>
+								<Group justify='space-between' px={'.5rem'}>
+									<MultiSelect
+										label='Filter'
+										data={
+											categories.toSorted((a: any, b: any) =>
+												a.label.localeCompare(b.label),
+											) ?? []
+										}
+										placeholder={
+											bookmarkFilter.length > 0
+												? bookmarkFilter.length === 1
+													? bookmarkFilter[0]
+													: `${bookmarkFilter.length} bookmarks selected`
+												: 'No bookmarks selected'
+										}
+										defaultValue={bookmarkFilter}
+										onChange={(data: any) => {
+											setBookmarkFilter(data);
+										}}
+										classNames={multiSelectClasses}
+										comboboxProps={{ withinPortal: false }}
+									/>
+									<Select
+										label={'Sorting'}
+										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>
-					</Stack>
+					</Group>
+					<Group w={'100%'} align='center' justify='center'>
+						<Button
+							leftSection={<FiSettings />}
+							onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}
+							className={buttonClasses.settingsMenuButton}
+							classNames={buttonClasses}
+						>
+							Settings
+						</Button>
+						<Button
+							leftSection={<FaSync />}
+							onClick={handleRefresh}
+							className={buttonClasses.settingsMenuButton}
+							classNames={buttonClasses}
+						>
+							Refresh
+						</Button>
+					</Group>
 				</Menu.Dropdown>
 			</Menu>
 		</>