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>
 		</>

src/pages/settings/components/Applications/Applications.tsx

@@ -263,7 +263,7 @@ const ApplicationSettings = () => {
 						'filter',
 					],
 					description:
-						'Applications contain a name, base url, url, icon and filter. Currently the icon must be the mdi icon name. URLs can contain either http(s):// or not. Base URLs should start with /, otherwise they will cause errors.',
+						'Applications contain a name, base url, url, icon and filter. URLs can contain either http(s):// or not. Base URLs should start with /, otherwise they will cause errors.',
 				}}
 				searchValue={searchValue}
 				setSearchValue={setSearchValue}

src/pages/settings/components/Shared/SettingsHeader.tsx

@@ -33,9 +33,9 @@ function SettingsHeader({
 	openModal: () => void;
 	title: string;
 	tooltip: any;
-	searchValue: string;
+	searchValue: string | undefined;
 	setSearchValue: (searchValue: string) => void;
-	searchPlaceholder: string;
+	searchPlaceholder: string | undefined;
 }) {
 	const { isMobile, theme, modalStyle } = useCommonHooks();
 	return (
@@ -123,7 +123,7 @@ function SettingsHeader({
 					className={textInputClasses.settingsItem}
 					classNames={textInputClasses}
 					autoFocus={!isMobile}
-					placeholder={searchPlaceholder || 'Search...'}
+					placeholder={searchPlaceholder ?? 'Search...'}
 					value={searchValue}
 					onInput={(event: any) => {
 						setSearchValue(event.target.value);

src/pages/settings/components/Theming/ThemePlaylistCard.tsx

@@ -221,7 +221,7 @@ function ThemePlaylistCard({
 			)}
 			<Button
 				w={'275px'}
-				h={'310px'}
+				h={'320px'}
 				style={{
 					backgroundSize: 'cover',
 					backgroundColor: theme.searchColor,
@@ -234,7 +234,7 @@ function ThemePlaylistCard({
 				}}
 			>
 				{hover && <Overlay opacity={0.5} zIndex={1} />}
-				<Stack h={'100%'} w={'100%'} align='center'>
+				<Stack h={'100%'} w={'100%'} align='center' mt={12}>
 					{cardPlaylist.name !== 'Time of Day' ? (
 						<>
 							<Text

src/pages/settings/components/Theming/ThemePlaylistModal.tsx

@@ -3,17 +3,16 @@ import {
 	Divider,
 	Group,
 	Modal,
-	Select,
 	SimpleGrid,
-	Stack,
 	Text,
 	TextInput,
 } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { useEffect, useState } from 'react';
-import { modalClasses, selectClasses, textInputClasses } from 'styles';
+import { modalClasses, textInputClasses } from 'styles';
 import type { Theme } from 'types';
 import ThemeMiniCard from './ThemeMiniCard';
+import TimeOfDay from './TimeOfDay';
 
 function ThemePlaylistModal({
 	opened,
@@ -35,12 +34,12 @@ function ThemePlaylistModal({
 	const { theme, isMobile, modalStyle } = useCommonHooks();
 	const [themeList, setThemeList] = useState<any>('[]');
 	useEffect(() => {
-		if (selectedPlaylist.themeList) {
+		if (selectedPlaylist?.themeList) {
 			setThemeList(JSON.parse(selectedPlaylist?.themeList));
 		}
 	}, [selectedPlaylist]);
 
-	if (selectedPlaylist.name === undefined) {
+	if (selectedPlaylist?.name === undefined) {
 		setSelectedPlaylist({
 			name: 'New Playlist',
 			themeList: '[]',
@@ -69,8 +68,8 @@ function ThemePlaylistModal({
 						<TextInput
 							className={textInputClasses.default}
 							classNames={textInputClasses}
-							value={selectedPlaylist.name}
-							disabled={selectedPlaylist.name === 'Time of Day'}
+							value={selectedPlaylist?.name}
+							disabled={selectedPlaylist?.name === 'Time of Day'}
 							onChange={(e) =>
 								setSelectedPlaylist({ ...selectedPlaylist, name: e.target.value })
 							}
@@ -89,194 +88,71 @@ function ThemePlaylistModal({
 					<Modal.CloseButton />
 				</Modal.Header>
 				<Modal.Body pt={8}>
-					{selectedPlaylist.name === 'Time of Day' ? (
-						<Stack>
-							<Group>
-								<Text w={'100px'}>00:00-05:59</Text>
-								<Select
-									labelProps={{ display: 'none' }}
-									placeholder='Select Theme'
-									defaultValue={themeList['0']}
-									data={allThemes?.map((theme: Theme) => {
-										return {
-											value: `${theme.id}`,
-											label: theme.name,
-										};
-									})}
-									classNames={{
-										input: selectClasses.menuSelectInput,
-										label: selectClasses.menuSelectLabel,
-										options: selectClasses.menuSelectOptions,
-										option: selectClasses.menuSelectOption,
-									}}
-									onChange={(data) => {
-										const newThemeList = themeList;
-										newThemeList['0'] = data;
-										createPlaylist({
-											method: 'PATCH',
-											endpoint: 'api/themePlaylists',
-											body: {
-												id: selectedPlaylist.id,
-												name: selectedPlaylist.name,
-												themeList: JSON.stringify(newThemeList),
-											},
-										});
-									}}
-								/>
-							</Group>
-							<Group w={'100%'}>
-								<Text w={'100px'}>06:00-11:59</Text>
-								<Select
-									labelProps={{ display: 'none' }}
-									placeholder='Select Theme'
-									defaultValue={themeList['1']}
-									data={allThemes?.map((theme: Theme) => {
-										return {
-											value: `${theme.id}`,
-											label: theme.name,
-										};
-									})}
-									classNames={{
-										input: selectClasses.menuSelectInput,
-										label: selectClasses.menuSelectLabel,
-										options: selectClasses.menuSelectOptions,
-										option: selectClasses.menuSelectOption,
-									}}
-									onChange={(data) => {
-										const newThemeList = themeList;
-										newThemeList['1'] = data;
-										createPlaylist({
-											method: 'PATCH',
-											endpoint: 'api/themePlaylists',
-											body: {
-												id: selectedPlaylist.id,
-												name: selectedPlaylist.name,
-												themeList: JSON.stringify(newThemeList),
-											},
-										});
-									}}
-								/>
-							</Group>
-							<Group w={'100%'}>
-								<Text w={'100px'}>12:00-17:59</Text>
-								<Select
-									labelProps={{ display: 'none' }}
-									placeholder='Select Theme'
-									defaultValue={themeList['2']}
-									data={allThemes?.map((theme: Theme) => {
-										return {
-											value: `${theme.id}`,
-											label: theme.name,
-										};
-									})}
-									classNames={{
-										input: selectClasses.menuSelectInput,
-										label: selectClasses.menuSelectLabel,
-										options: selectClasses.menuSelectOptions,
-										option: selectClasses.menuSelectOption,
-									}}
-									onChange={(data) => {
-										const newThemeList = themeList;
-										newThemeList['2'] = data;
-										createPlaylist({
-											method: 'PATCH',
-											endpoint: 'api/themePlaylists',
-											body: {
-												id: selectedPlaylist.id,
-												name: selectedPlaylist.name,
-												themeList: JSON.stringify(newThemeList),
-											},
-										});
-									}}
-								/>
-							</Group>
-							<Group w={'100%'}>
-								<Text w={'100px'}>18:00-23:59</Text>
-								<Select
-									labelProps={{ display: 'none' }}
-									placeholder='Select Theme'
-									defaultValue={themeList['3']}
-									data={allThemes?.map((theme: Theme) => {
-										return {
-											value: `${theme.id}`,
-											label: theme.name,
-										};
-									})}
-									classNames={{
-										input: selectClasses.menuSelectInput,
-										label: selectClasses.menuSelectLabel,
-										options: selectClasses.menuSelectOptions,
-										option: selectClasses.menuSelectOption,
-									}}
-									onChange={(data) => {
-										const newThemeList = themeList;
-										newThemeList['3'] = data;
-										createPlaylist({
-											method: 'PATCH',
-											endpoint: 'api/themePlaylists',
-											body: {
-												id: selectedPlaylist.id,
-												name: selectedPlaylist.name,
-												themeList: JSON.stringify(newThemeList),
-											},
-										});
-									}}
-								/>
-							</Group>
-						</Stack>
+					{selectedPlaylist?.name === 'Time of Day' ? (
+						<TimeOfDay
+							createPlaylist={createPlaylist}
+							themeList={themeList}
+							allThemes={allThemes}
+							selectedPlaylist={selectedPlaylist}
+						/>
 					) : (
-						<SimpleGrid cols={3}>
-							{selectedPlaylist.name !== 'Time of Day' &&
-								allThemes?.map((miniTheme: Theme) => {
-									const newThemeList = themeList;
-									return (
-										<Group
-											key={miniTheme.id}
-											style={{
-												cursor: 'pointer',
-												filter:
-													newThemeList && !newThemeList?.includes(miniTheme.id)
-														? 'saturate(0)'
-														: undefined,
-											}}
-											onClick={() => {
-												const newSelectedPlaylist = { ...selectedPlaylist };
-												if (themeList?.includes(miniTheme.id)) {
-													newThemeList.splice(themeList.indexOf(miniTheme.id), 1);
-												} else {
-													newThemeList.push(miniTheme.id);
-												}
-												newSelectedPlaylist.themeList = JSON.stringify(newThemeList);
-												setSelectedPlaylist(newSelectedPlaylist);
-											}}
-										>
-											<ThemeMiniCard allThemes={allThemes} item={Number(miniTheme.id)} />
-										</Group>
-									);
-								})}
-						</SimpleGrid>
+						<>
+							<SimpleGrid cols={3}>
+								{selectedPlaylist?.name !== 'Time of Day' &&
+									allThemes?.map((miniTheme: Theme) => {
+										const newThemeList = themeList;
+										return (
+											<Group
+												key={miniTheme.id}
+												style={{
+													cursor: 'pointer',
+													filter:
+														newThemeList && !newThemeList?.includes(miniTheme.id)
+															? 'saturate(0)'
+															: undefined,
+												}}
+												onClick={() => {
+													const newSelectedPlaylist = { ...selectedPlaylist };
+													if (themeList?.includes(miniTheme.id)) {
+														newThemeList.splice(themeList.indexOf(miniTheme.id), 1);
+													} else {
+														newThemeList.push(miniTheme.id);
+													}
+													newSelectedPlaylist.themeList = JSON.stringify(newThemeList);
+													setSelectedPlaylist(newSelectedPlaylist);
+												}}
+											>
+												<ThemeMiniCard
+													allThemes={allThemes}
+													item={Number(miniTheme.id)}
+												/>
+											</Group>
+										);
+									})}
+							</SimpleGrid>
+							<Divider color='black' my='sm' />
+							<Group>
+								<Button
+									color={'green'}
+									styles={{ label: { color: 'black' } }}
+									onClick={handleSavePlaylist}
+								>
+									Save
+								</Button>
+								<Button
+									color={'red'}
+									styles={{ label: { color: 'black' } }}
+									onClick={() => {
+										handleClose();
+										setThemeList('[]');
+										setSelectedPlaylist({});
+									}}
+								>
+									Cancel
+								</Button>
+							</Group>
+						</>
 					)}
-					<Divider color='black' my='sm' />
-					<Group>
-						<Button
-							color={'green'}
-							styles={{ label: { color: 'black' } }}
-							onClick={handleSavePlaylist}
-						>
-							Save
-						</Button>
-						<Button
-							color={'red'}
-							styles={{ label: { color: 'black' } }}
-							onClick={() => {
-								handleClose();
-								setThemeList('[]');
-								setSelectedPlaylist({});
-							}}
-						>
-							Cancel
-						</Button>
-					</Group>
 				</Modal.Body>
 			</Modal.Content>
 		</Modal.Root>

src/pages/settings/components/Theming/ThemePlaylists.tsx

@@ -20,7 +20,7 @@ function ThemePlaylists() {
 	});
 	const { mutateAsync } = useMutationAPI();
 	const [opened, { open, close }] = useDisclosure(false);
-	const [selectedPlaylist, setSelectedPlaylist] = useState<any>({});
+	const [selectedPlaylist, setSelectedPlaylist] = useState<ThemePlaylist | undefined>();
 	const { currentThemePlaylist, theme, isMobile } = useCommonHooks();
 	const [searchValue, setSearchValue] = useState('');
 	const [debouncedSearch] = useDebouncedValue(searchValue, 500);
@@ -31,15 +31,15 @@ function ThemePlaylists() {
 	};
 
 	const handleClose = () => {
-		setSelectedPlaylist({});
+		setSelectedPlaylist(undefined);
 		close();
 	};
 
 	const handleSavePlaylist = () => {
 		mutateAsync({
-			method: selectedPlaylist.id === undefined ? 'POST' : 'PATCH',
+			method: selectedPlaylist?.id === undefined ? 'POST' : 'PATCH',
 			endpoint: themePlaylistsEndpoint,
-			body: selectedPlaylist,
+			body: selectedPlaylist ?? {},
 		});
 		close();
 	};

src/pages/settings/components/Theming/ThemeSelect.tsx

@@ -0,0 +1,99 @@
+import { Group, Select, Text } from '@mantine/core';
+import type { Theme } from 'types';
+
+function ThemeSelect({
+	allThemes,
+	createPlaylist,
+	themeList,
+	selectedPlaylist,
+	index,
+	timeIndex,
+}: {
+	allThemes: Theme[];
+	createPlaylist: any;
+	themeList: any;
+	selectedPlaylist: any;
+	index: string;
+	timeIndex: string;
+}) {
+	const theme = allThemes.find((theme: Theme) => `${theme.id}` === themeList[index]);
+
+	return (
+		<Group>
+			<Text w={'100px'}>{timeIndex}</Text>
+			<Select
+				labelProps={{ display: 'none' }}
+				comboboxProps={{ withinPortal: false }}
+				placeholder='Select Theme'
+				defaultValue={themeList[index]}
+				data={allThemes?.map((theme: Theme) => {
+					return {
+						value: `${theme.id}`,
+						label: theme.name,
+					};
+				})}
+				onChange={(data) => {
+					const newThemeList = themeList;
+					newThemeList[index] = data;
+					createPlaylist({
+						method: 'PATCH',
+						endpoint: 'api/themePlaylists',
+						body: {
+							id: selectedPlaylist?.id,
+							name: selectedPlaylist?.name,
+							themeList: JSON.stringify(newThemeList),
+						},
+					});
+				}}
+				styles={{
+					option: {
+						padding: 4,
+					},
+					input: {
+						textAlign: 'center',
+						height: '60px',
+						color: theme?.primaryColor,
+						background: `linear-gradient(${theme?.backgroundColor}33, ${theme?.backgroundColor}33), no-repeat center url(/backgrounds/${theme?.backgroundImage})`,
+						backgroundSize: 'cover',
+						backgroundColor: theme?.backgroundColor,
+						border: `solid ${theme?.borderColor}`,
+						borderRadius: '8px',
+					},
+				}}
+				renderOption={({ option }: any) => {
+					const theme = allThemes?.find((theme: Theme) => `${theme.id}` === option.value);
+					return (
+						<Group
+							gap={0}
+							align='center'
+							justify='center'
+							w={'100%'}
+							h={'60px'}
+							style={{
+								background: `linear-gradient(${theme?.backgroundColor}33, ${theme?.backgroundColor}33), no-repeat center url(/backgrounds/${theme?.backgroundImage})`,
+								backgroundSize: 'cover',
+								backgroundColor: theme?.backgroundColor,
+								border: `solid ${theme?.borderColor}`,
+								borderRadius: '8px',
+							}}
+						>
+							<Text
+								bg={theme?.backgroundColor}
+								c={theme?.primaryColor}
+								size='md'
+								style={{
+									padding: 4,
+									borderRadius: '8px',
+								}}
+							>
+								{allThemes.find((theme: Theme) => `${theme.id}` === option.value)?.name}
+							</Text>
+						</Group>
+					);
+				}}
+			/>
+		</Group>
+	);
+}
+
+export default ThemeSelect;

src/pages/settings/components/Theming/TimeOfDay.tsx

@@ -0,0 +1,49 @@
+import { Stack } from '@mantine/core';
+import type { Theme } from 'types';
+import ThemeSelect from './ThemeSelect';
+
+function TimeOfDay({
+	createPlaylist,
+	themeList,
+	allThemes,
+	selectedPlaylist,
+}: { createPlaylist: any; themeList: any; allThemes: Theme[]; selectedPlaylist: any }) {
+	return (
+		<Stack>
+			<ThemeSelect
+				allThemes={allThemes}
+				createPlaylist={createPlaylist}
+				themeList={themeList}
+				selectedPlaylist={selectedPlaylist}
+				index='0'
+				timeIndex='00:00 - 05:59'
+			/>
+			<ThemeSelect
+				allThemes={allThemes}
+				createPlaylist={createPlaylist}
+				themeList={themeList}
+				selectedPlaylist={selectedPlaylist}
+				index='1'
+				timeIndex='06:00 - 11:59'
+			/>
+			<ThemeSelect
+				allThemes={allThemes}
+				createPlaylist={createPlaylist}
+				themeList={themeList}
+				selectedPlaylist={selectedPlaylist}
+				index='2'
+				timeIndex='12:00 - 17:59'
+			/>
+			<ThemeSelect
+				allThemes={allThemes}
+				createPlaylist={createPlaylist}
+				themeList={themeList}
+				selectedPlaylist={selectedPlaylist}
+				index='3'
+				timeIndex='18:00 - 23:59'
+			/>
+		</Stack>
+	);
+}
+
+export default TimeOfDay;

src/pages/settings/components/WoL/DebouncedWolClient.tsx

@@ -27,8 +27,8 @@ function DebouncedWolClient({
 	const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
 	const { mutateAsync } = useMutationAPI();
 
-	const [client, setClient] = useState<any>(wolClient);
-	const [update, setUpdate] = useState({});
+	const [client, setClient] = useState<WolClient>(wolClient);
+	const [update, setUpdate] = useState<any>({});
 	const [debounced] = useDebouncedValue(update, 1000);
 	const handleClose = () => {
 		setIsOpen(false);