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