PWA improvements

src/components/colorschemepicker.tsx

@@ -1,47 +1,66 @@
-import { Accessor, Component, createEffect, createSignal, For, Setter } from "solid-js";
+import { Component, createEffect, createMemo, createResource, For, Setter } from "solid-js";
 import css from './colorschemepicker.module.css';
 import { CgDarkMode } from "solid-icons/cg";
+import { action, cache, useAction } from "@solidjs/router";
+import { useSession } from "vinxi/http";
 
 export enum ColorScheme {
     Auto = 'light dark',
     Light = 'light',
     Dark = 'dark',
 }
+type ColorSchemeKey = keyof typeof ColorScheme;
 
-const colorSchemeEntries = [
-    [ColorScheme.Auto, 'Auto'],
-    [ColorScheme.Light, 'Light'],
-    [ColorScheme.Dark, 'Dark'],
-] as const;
+const colorSchemeKeys: readonly ColorSchemeKey[] = ['Auto', 'Light', 'Dark'] as const;
 
 interface ColorSchemePickerProps {
-    value?: Setter<ColorScheme> | [Accessor<ColorScheme>, Setter<ColorScheme>];
+    value?: Setter<ColorScheme>;
 }
 
+const getSession = async () => {
+    'use server';
+
+    return useSession<{ colorScheme: ColorSchemeKey }>({
+        password: process.env.SESSION_SECRET!,
+    });
+};
+
+export const getColorScheme = cache(async () => {
+    'use server';
+
+    const session = await getSession();
+
+    return session.data.colorScheme;
+}, 'color-scheme');
+
+const setColorScheme = action(async (colorScheme: ColorSchemeKey) => {
+    'use server';
+
+    const session = await getSession();
+    await session.update({ colorScheme });
+}, 'color-scheme');
+
 export const ColorSchemePicker: Component<ColorSchemePickerProps> = (props) => {
-    const [value, setValue] = createSignal<ColorScheme>(ColorScheme.Auto);
+    const [value, { mutate }] = createResource<ColorSchemeKey>(() => getColorScheme(), { initialValue: 'Auto' });
+    const updateStore = useAction(setColorScheme);
 
     createEffect(() => {
-        const currentValue = value();
-        const setter = props.value instanceof Array ? props.value[1] : props.value;
-
-        if (!setter) {
-            return;
-        }
-
-        setter(currentValue);
+        props.value?.(ColorScheme[value()]);
     });
 
     return <label class={css.picker}>
         <CgDarkMode />
 
-        <select name="color-scheme-picker" value={value()} onInput={(e) => {
+        <select name="color-scheme-picker" onInput={(e) => {
             if (e.target.value !== value()) {
-                setValue(e.target.value as any);
+                const nextValue = (e.target.value ?? 'Auto') as ColorSchemeKey;
+
+                mutate(nextValue);
+                updateStore(nextValue);
             }
         }}>
-            <For each={colorSchemeEntries}>{
-                ([value, label]) => <option value={value}>{label}</option>
+            <For each={colorSchemeKeys}>{
+                (v) => <option value={v} selected={v === value()}>{v}</option>
             }</For>
         </select>
     </label>;