refactor colorpicker component

src/app.tsx

@@ -2,7 +2,7 @@ import { MetaProvider } from "@solidjs/meta";
 import { Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
 import { Suspense } from "solid-js";
-import { ThemeProvider } from "./components/colorschemepicker";
+import { ThemeProvider } from "./features/theme";
 import { I18nProvider } from "./features/i18n";
 import "./app.css";
 

src/components/colorschemepicker.spec.tsx

@@ -1,15 +0,0 @@
-import { describe, it, expect } from 'bun:test';
-import { render } from "@solidjs/testing-library"
-import { ColorSchemePicker } from "./colorschemepicker";
-
-// describe('<ColorSchemePicker />', () => {
-//     it('should render', async () => {
-//         const { getByLabelText } = render(() => <ColorSchemePicker />);
-
-//         const kaas = getByLabelText('Color scheme picker');
-
-//         console.log(kaas);
-
-//         expect(true).toBe(true);
-//     });
-// });

src/features/theme/context.tsx

@@ -1,10 +1,8 @@
-import { Component, createContext, createEffect, createResource, Match, ParentComponent, Show, Suspense, Switch, useContext } from "solid-js";
 import { action, query, useAction } from "@solidjs/router";
-import { useSession } from "vinxi/http";
+import { createContext, createEffect, createResource, ParentComponent, Show, Suspense, useContext } from "solid-js";
 import { createStore } from "solid-js/store";
-import { Dropdown } from "./dropdown";
+import { useSession } from "vinxi/http";
-import { WiMoonAltFull, WiMoonAltNew, WiMoonAltFirstQuarter } from "solid-icons/wi";
+
-import css from './colorschemepicker.module.css';
 
 export enum ColorScheme {
     Auto = 'light dark',
@@ -12,8 +10,6 @@ export enum ColorScheme {
     Dark = 'dark',
 }
 
-const colorSchemes: Record<ColorScheme, keyof typeof ColorScheme> = Object.fromEntries(Object.entries(ColorScheme).map(([k, v]) => [v, k] as const)) as any;
-
 export interface State {
     colorScheme: ColorScheme;
     hue: number;
@@ -50,7 +46,7 @@ interface ThemeContextType {
 
 const ThemeContext = createContext<ThemeContextType>();
 
-const useStore = () => useContext(ThemeContext)!;
+export const useStore = () => useContext(ThemeContext)!;
 
 export const useTheme = () => {
     const ctx = useContext(ThemeContext);
@@ -84,26 +80,3 @@ export const ThemeProvider: ParentComponent = (props) => {
         }}</Show>
     </Suspense>;
 };
-
-export const ColorSchemePicker: Component = (props) => {
-    const { theme, setColorScheme, setHue } = useStore();
-
-    return <>
-        <label aria-label="Color scheme picker">
-            <Dropdown id="color-scheme-picker" class={css.picker} value={theme.colorScheme} setValue={(next) => setColorScheme(next())} 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}
-                </>
-            }</Dropdown>
-        </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>
-    </>;
-};

src/features/theme/index.ts

@@ -0,0 +1,2 @@
+export { useTheme, getState, ThemeProvider, ColorScheme } from './context';
+export { ColorSchemePicker } from './picker';

src/features/theme/picker.tsx

@@ -0,0 +1,41 @@
+import { WiMoonAltFirstQuarter, WiMoonAltFull, WiMoonAltNew } from "solid-icons/wi";
+import { Component, createEffect, createSignal, Match, Switch } from "solid-js";
+import { Select } from "~/components/select";
+import { ColorScheme, useStore } from "./context";
+import css from './picker.module.css';
+
+const colorSchemes: Record<ColorScheme, keyof typeof ColorScheme> = Object.fromEntries(Object.entries(ColorScheme).map(([k, v]) => [v, k] as const)) as any;
+
+export const ColorSchemePicker: Component = (props) => {
+    const { theme, setColorScheme, setHue } = useStore();
+    const [scheme, setScheme] = createSignal<ColorScheme>(theme.colorScheme);
+
+    createEffect(() => {
+        const next = scheme();
+
+        if (!next) {
+            return;
+        }
+
+        setColorScheme(next);
+    });
+
+    return <>
+        <label aria-label="Color scheme picker">
+            <Select id="color-scheme-picker" class={css.picker} value={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>
+    </>;
+};

src/routes/(editor).tsx

@@ -4,12 +4,12 @@ import { FilesProvider } from "~/features/file";
 import { Menu, MenuProvider } from "~/features/menu";
 import { A, RouteDefinition, useBeforeLeave } from "@solidjs/router";
 import { CommandPalette, CommandPaletteApi, createCommand, Modifier } from "~/features/command";
-import { ColorScheme, ColorSchemePicker, getState, useTheme } from "~/components/colorschemepicker";
 import { getRequestEvent } from "solid-js/web";
 import { HttpHeader } from "@solidjs/start";
 import { FaSolidPalette } from "solid-icons/fa";
-import css from "./editor.module.css";
 import { LocalePicker } from "~/features/i18n";
+import { ColorScheme, ColorSchemePicker, getState, useTheme } from "~/features/theme";
+import css from "./editor.module.css";
 
 const event = getRequestEvent();