Updates to personalization

src/pages/homepage/components/SettingsButton/SettingsButton.tsx

@@ -16,8 +16,11 @@ function SettingsButton() {
 	const { data: wolClientData, isFetched: wolClientDataIsFetched } = useQueryAPI({
 		endpoint: 'api/wolClients',
 	});
+	const { data: wolEnabledData, isFetched: wolEnabledDataIsFetched } = useQueryAPI({
+		endpoint: 'api/wolEnabled',
+	});
 	const [wolClients, setWolClients] = useState<WolClient[]>([]);
-
+	const [enabled, setEnabled] = useState<number>(0);
 	const { mutateAsync } = useMutationAPI();
 	const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
 	const [selectedClient, setSelectedClient] = useState<WolClient>(wolClientData?.[0]);
@@ -67,6 +70,11 @@ function SettingsButton() {
 		}
 	}, [wolClientData, wolClientDataIsFetched]);
 
+	useEffect(() => {
+		if (wolEnabledData && wolEnabledDataIsFetched) {
+			setEnabled(wolEnabledData[0].enableWol);
+		}
+	}, [wolEnabledData, wolEnabledDataIsFetched]);
 	return (
 		<Menu
 			classNames={menuClasses}
@@ -100,21 +108,23 @@ function SettingsButton() {
 							width: isMobile ? '100%' : undefined,
 						}}
 					>
-						<Box
-							pos={'relative'}
-							style={{ filter: wolClients.length === 0 ? 'grayscale(1)' : undefined }}
-						>
-							{wolClients.length === 0 && (
-								<Overlay opacity={0.75} style={{ borderRadius: '10px' }} />
-							)}
-							<WakeOnLan
-								wolClients={wolClients}
-								selectedClient={selectedClient}
-								setSelectedClient={setSelectedClient}
-								handleWakeRequest={handleWakeRequest}
-							/>
-						</Box>
-						<ThemingCard />
+						{enabled === 1 && (
+							<Box
+								pos={'relative'}
+								style={{ filter: wolClients.length === 0 ? 'grayscale(1)' : undefined }}
+							>
+								{wolClients.length === 0 && (
+									<Overlay opacity={0.75} style={{ borderRadius: '10px' }} />
+								)}
+								<WakeOnLan
+									wolClients={wolClients}
+									selectedClient={selectedClient}
+									setSelectedClient={setSelectedClient}
+									handleWakeRequest={handleWakeRequest}
+								/>
+							</Box>
+						)}
+						<ThemingCard wolEnabled={enabled} />
 					</Stack>
 					<Stack>
 						<SettingsCard

src/pages/homepage/components/SettingsButton/SettingsCard.tsx

@@ -41,6 +41,7 @@ function SettingsCard({
 			className={stackClasses.menuStack}
 			classNames={stackClasses}
 			pos={'relative'}
+			h={150}
 		>
 			<Text
 				style={{

src/pages/homepage/components/SettingsButton/ThemingCard.tsx

@@ -22,7 +22,7 @@ import {
 } from 'styles';
 import type { Theme, ThemePlaylist } from 'types';
 
-function ThemingCard() {
+function ThemingCard({ wolEnabled }: { wolEnabled: number }) {
 	const { data: themePlaylistData } = useQueryAPI({
 		endpoint: 'api/themePlaylists',
 	});
@@ -69,19 +69,35 @@ function ThemingCard() {
 	return (
 		<Stack
 			gap={0}
-			justify='space-between'
+			justify={wolEnabled === 0 ? undefined : 'space-between'}
 			className={stackClasses.menuStack}
 			classNames={stackClasses}
 			pos={'relative'}
-			style={{ aspectRatio: isMobile ? undefined : '1/1' }}
+			style={{
+				aspectRatio: isMobile || wolEnabled === 0 ? undefined : '1/1',
+				height: wolEnabled === 0 ? '316px' : '150px',
+				width: '150px',
+			}}
 		>
 			<Menu.Label pb={'2rem'}>Themes</Menu.Label>
-			<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} h={'100%'} gap={0}>
-				<Stack gap={0}>
+			<Group
+				mt={'-1.5rem'}
+				mb={'-.25rem'}
+				w={'95%'}
+				h={wolEnabled === 0 ? undefined : '100%'}
+				gap={0}
+			>
+				<Stack gap={0} h={'fit-content'} w={'73%'}>
 					<Text className={textClasses.currentTheme} classNames={textClasses}>
 						Current theme:
 					</Text>
-					<Text className={textClasses.themeName} classNames={textClasses}>
+					<Text
+						w={'100%'}
+						ml={4}
+						mt={wolEnabled === 0 ? '1rem' : undefined}
+						className={textClasses.themeName}
+						classNames={textClasses}
+					>
 						{text}
 					</Text>
 				</Stack>

src/pages/homepage/components/SettingsButton/WakeOnLanCard.tsx

@@ -22,7 +22,11 @@ function WakeOnLan({
 			pos={'relative'}
 			className={stackClasses.menuStack}
 			classNames={stackClasses}
-			style={{ aspectRatio: isMobile ? undefined : '1/1' }}
+			style={{
+				aspectRatio: isMobile ? undefined : '1/1',
+				height: '150px',
+				alignItems: 'center',
+			}}
 		>
 			<Menu.Label>Wake on LAN</Menu.Label>
 			<Button