simplify mode management

website/src/lib/components/ModeSwitch.svelte

@@ -2,45 +2,30 @@
 	import * as Popover from '$lib/components/ui/popover';
 	import { Button } from '$lib/components/ui/button';
 	import { Moon, Sun } from 'lucide-svelte';
-	import { resetMode, setMode, systemPrefersMode } from 'mode-watcher';
-	import { settings } from '$lib/db';
+	import { mode, resetMode, setMode, systemPrefersMode } from 'mode-watcher';
 	import { _ } from 'svelte-i18n';
 
-	const { mode } = settings;
-
-	$: if ($mode === 'system') {
-		resetMode();
-	} else {
-		setMode($mode);
-	}
-
 	export let size = '20';
 	let open = false;
+
+	$: selectedMode = $mode ?? $systemPrefersMode ?? 'light';
 </script>
 
 <Popover.Root bind:open>
 	<Popover.Trigger {...$$restProps}>
-		{#if $mode === 'system'}
-			{#if $systemPrefersMode === 'light'}
-				<Sun {size} class="mr-1" />
-			{:else if $systemPrefersMode === 'dark'}
-				<Moon {size} class="mr-1" />
-			{:else}
-				<Sun {size} class="mr-1" />
-			{/if}
-		{:else if $mode === 'light'}
+		{#if selectedMode === 'light'}
 			<Sun {size} class="mr-1" />
-		{:else if $mode === 'dark'}
+		{:else}
 			<Moon {size} class="mr-1" />
 		{/if}
 	</Popover.Trigger>
 	<Popover.Content class=" w-fit flex flex-col p-2">
-		{#each ['light', 'dark', 'system'] as m}
+		{#each ['light', 'dark'] as m}
 			<Button
 				variant="ghost"
 				class="h-8 justify-start"
 				on:click={() => {
-					$mode = m;
+					setMode(m);
 					open = false;
 				}}>{$_(`menu.${m}`)}</Button
 			>