Bugfixes and updates

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

@@ -0,0 +1,72 @@
+import { Button, type ComboboxItem, Menu, Select, Stack } from '@mantine/core';
+import { FiPower } from 'react-icons/fi';
+import { buttonClasses, selectClasses, stackClasses } from 'styles';
+import type { WolClient } from 'types';
+
+function WakeOnLan({
+	wolClients,
+	selectedClient,
+	handleWakeRequest,
+}: {
+	wolClients: WolClient[];
+	selectedClient: WolClient | null;
+	handleWakeRequest: () => void;
+}) {
+	return (
+		<Stack
+			gap={0}
+			align='center'
+			className={stackClasses.menuStack}
+			classNames={stackClasses}
+			style={{ aspectRatio: '1/1' }}
+		>
+			<Menu.Label>Wake on LAN</Menu.Label>
+			<Button
+				classNames={buttonClasses}
+				className={buttonClasses.wakeButton}
+				disabled={!wolClients?.length || selectedClient === null}
+				onClick={() => {
+					handleWakeRequest();
+				}}
+			>
+				<Stack gap={0} align='center'>
+					<FiPower size={32} />
+				</Stack>
+			</Button>
+			<Select
+				labelProps={{ display: 'none' }}
+				placeholder='Pick a host...'
+				defaultValue={wolClients?.[0]?.hostname}
+				data={
+					wolClients
+						?.map((wolClient: WolClient) => {
+							return {
+								value: wolClient.hostname,
+								label: `${wolClient.hostname} (${wolClient.macAddress})`,
+								hostname: wolClient.hostname,
+								macAddress: wolClient.macAddress,
+							};
+						})
+						.toSorted((a: ComboboxItem, b: ComboboxItem) =>
+							a.label.localeCompare(b.label),
+						) ?? []
+				}
+				w='92%'
+				classNames={{
+					root: selectClasses.menuSelectRoot,
+					input: selectClasses.menuSelectInput,
+					label: selectClasses.menuSelectLabel,
+					options: selectClasses.menuSelectOptions,
+					option: selectClasses.menuSelectOption,
+				}}
+				comboboxProps={{
+					withinPortal: false,
+					position: 'top',
+					width: 'fit-content',
+				}}
+			/>
+		</Stack>
+	);
+}
+
+export default WakeOnLan;