got started on new look. pivoting to api implementations now

src/features/theme/context.ts

@@ -0,0 +1,80 @@
+import { ContextProviderProps, createContextProvider } from "@solid-primitives/context";
+import { action, createAsyncStore, query, useAction } from "@solidjs/router";
+import { createStore } from "solid-js/store";
+import { useSession } from "vinxi/http";
+
+
+export enum ColorScheme {
+    Auto = 'light dark',
+    Light = 'light',
+    Dark = 'dark',
+}
+
+export interface State {
+    colorScheme: ColorScheme;
+    hue: number;
+}
+
+const getSession = async () => {
+    'use server';
+
+    return useSession<State>({
+        password: process.env.SESSION_SECRET!,
+    });
+};
+
+export const getState = query(async () => {
+    'use server';
+
+    const session = await getSession();
+
+    if (Object.getOwnPropertyNames(session.data).length === 0) {
+        await session.update({
+            colorScheme: ColorScheme.Auto,
+            hue: 0,
+        })
+    }
+
+    return session.data;
+}, 'color-scheme');
+
+const setState = action(async (state: State) => {
+    'use server';
+
+    const session = await getSession();
+    await session.update(prev => ({ ...prev, ...state }));
+}, 'color-scheme');
+
+interface ThemeContextType {
+    readonly theme: State;
+    setColorScheme(colorScheme: ColorScheme): void;
+    setHue(colorScheme: number): void;
+}
+
+const [ThemeContextProvider, useTheme] = createContextProvider<ThemeContextType, ContextProviderProps>((props) => {
+    const updateState = useAction(setState);
+    const state = createAsyncStore(() => getState());
+
+    return {
+        get theme() {
+            return state.latest ?? { colorScheme: null };
+        },
+
+        setColorScheme(colorScheme) {
+            updateState({ colorScheme, hue: state.latest!.hue });
+        },
+        setHue(hue) {
+            updateState({ hue, colorScheme: state.latest!.colorScheme });
+        },
+    };
+}, {
+    theme: {
+        colorScheme: ColorScheme.Auto,
+        hue: 180,
+    },
+
+    setColorScheme(colorScheme) { },
+    setHue(hue) { },
+});
+
+export { ThemeContextProvider, useTheme };

src/features/theme/index.ts

@@ -0,0 +1,4 @@
+
+
+export { ThemeContextProvider, useTheme } from './context';
+export { ColorSchemePicker } from './picker';

src/features/theme/picker.module.css

@@ -0,0 +1,9 @@
+.picker {
+    grid-template-columns: auto 1fr;
+}
+
+.hue {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+}

src/features/theme/picker.tsx

@@ -0,0 +1,43 @@
+import { WiMoonAltFirstQuarter, WiMoonAltFull, WiMoonAltNew } from "solid-icons/wi";
+import { Component, createEffect, For, Match, on, Setter, Switch } from "solid-js";
+import { ColorScheme, useTheme } from "./context";
+import css from './picker.module.css';
+import { Select } from "~/components/select";
+
+const colorSchemes: Record<ColorScheme, keyof typeof ColorScheme> = Object.fromEntries(Object.entries(ColorScheme).map(([k, v]) => [v, k])) as any;
+
+export const ColorSchemePicker: Component = (props) => {
+    const themeContext = useTheme();
+
+    const setScheme: Setter<ColorScheme> = (next) => {
+
+        if (typeof next === 'function') {
+            next = next();
+        }
+
+        themeContext.setColorScheme(next);
+    };
+
+    createEffect(on(() => themeContext.theme.colorScheme, (colorScheme) => {
+        console.log(colorScheme);
+    }));
+
+    return <>
+        <label aria-label="Color scheme picker">
+            <Select id="color-scheme-picker" class={css.picker} value={themeContext.theme.colorScheme} setValue={setScheme} values={colorSchemes}>{
+                (k, v) => <>
+                    <Switch>
+                        <Match when={k === ColorScheme.Auto}><WiMoonAltFirstQuarter /></Match>
+                        <Match when={k === ColorScheme.Light}><WiMoonAltNew /></Match>
+                        <Match when={k === ColorScheme.Dark}><WiMoonAltFull /></Match>
+                    </Switch>
+                    {v}
+                </>
+            }</Select>
+        </label>
+
+        {/* <label class={css.hue} aria-label="Hue slider">
+            <input type="range" min="0" max="360" value={theme.hue} onInput={e => setHue(e.target.valueAsNumber)} />
+        </label> */}
+    </>;
+};