Typing and Density settings

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);