General fixes. Still far from good or working

packages/ui/src/theme.tsx

@@ -1,31 +1,31 @@
-"use client";
+'use client';
 
-import * as React from "react";
-import { DesktopIcon, MoonIcon, SunIcon } from "@radix-ui/react-icons";
-import * as z from "zod/v4";
+import * as React from 'react';
+import { DesktopIcon, MoonIcon, SunIcon } from '@radix-ui/react-icons';
+import * as z from 'zod/v4';
 
-import { Button } from "./button";
+import { Button } from './button';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "./dropdown-menu";
+} from './dropdown-menu';
 
-const ThemeModeSchema = z.enum(["light", "dark", "auto"]);
+const ThemeModeSchema = z.enum(['light', 'dark', 'auto']);
 
-const themeKey = "theme-mode";
+const themeKey = 'theme-mode';
 
 export type ThemeMode = z.output<typeof ThemeModeSchema>;
-export type ResolvedTheme = Exclude<ThemeMode, "auto">;
+export type ResolvedTheme = Exclude<ThemeMode, 'auto'>;
 
 const getStoredThemeMode = (): ThemeMode => {
-  if (typeof window === "undefined") return "auto";
+  if (typeof window === 'undefined') return 'auto';
   try {
     const storedTheme = localStorage.getItem(themeKey);
     return ThemeModeSchema.parse(storedTheme);
   } catch {
-    return "auto";
+    return 'auto';
   }
 };
 
@@ -39,35 +39,35 @@ const setStoredThemeMode = (theme: ThemeMode) => {
 };
 
 const getSystemTheme = () => {
-  if (typeof window === "undefined") return "light";
-  return window.matchMedia("(prefers-color-scheme: dark)").matches
-    ? "dark"
-    : "light";
+  if (typeof window === 'undefined') return 'light';
+  return window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? 'dark'
+    : 'light';
 };
 
 const updateThemeClass = (themeMode: ThemeMode) => {
   const root = document.documentElement;
-  root.classList.remove("light", "dark", "auto");
-  const newTheme = themeMode === "auto" ? getSystemTheme() : themeMode;
+  root.classList.remove('light', 'dark', 'auto');
+  const newTheme = themeMode === 'auto' ? getSystemTheme() : themeMode;
   root.classList.add(newTheme);
 
-  if (themeMode === "auto") {
-    root.classList.add("auto");
+  if (themeMode === 'auto') {
+    root.classList.add('auto');
   }
 };
 
 const setupPreferredListener = () => {
-  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-  const handler = () => updateThemeClass("auto");
-  mediaQuery.addEventListener("change", handler);
-  return () => mediaQuery.removeEventListener("change", handler);
+  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  const handler = () => updateThemeClass('auto');
+  mediaQuery.addEventListener('change', handler);
+  return () => mediaQuery.removeEventListener('change', handler);
 };
 
 const getNextTheme = (current: ThemeMode): ThemeMode => {
   const themes: ThemeMode[] =
-    getSystemTheme() === "dark"
-      ? ["auto", "light", "dark"]
-      : ["auto", "dark", "light"];
+    getSystemTheme() === 'dark'
+      ? ['auto', 'light', 'dark']
+      : ['auto', 'dark', 'light'];
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   return themes[(themes.indexOf(current) + 1) % themes.length]!;
 };
@@ -75,19 +75,19 @@ const getNextTheme = (current: ThemeMode): ThemeMode => {
 export const themeDetectorScript = (function () {
   function themeFn() {
     const isValidTheme = (theme: string): theme is ThemeMode => {
-      const validThemes = ["light", "dark", "auto"] as const;
+      const validThemes = ['light', 'dark', 'auto'] as const;
       return validThemes.includes(theme as ThemeMode);
     };
 
-    const storedTheme = localStorage.getItem("theme-mode") ?? "auto";
-    const validTheme = isValidTheme(storedTheme) ? storedTheme : "auto";
+    const storedTheme = localStorage.getItem('theme-mode') ?? 'auto';
+    const validTheme = isValidTheme(storedTheme) ? storedTheme : 'auto';
 
-    if (validTheme === "auto") {
-      const autoTheme = window.matchMedia("(prefers-color-scheme: dark)")
+    if (validTheme === 'auto') {
+      const autoTheme = window.matchMedia('(prefers-color-scheme: dark)')
         .matches
-        ? "dark"
-        : "light";
-      document.documentElement.classList.add(autoTheme, "auto");
+        ? 'dark'
+        : 'light';
+      document.documentElement.classList.add(autoTheme, 'auto');
     } else {
       document.documentElement.classList.add(validTheme);
     }
@@ -109,11 +109,11 @@ export function ThemeProvider({ children }: React.PropsWithChildren) {
   const [themeMode, setThemeMode] = React.useState(getStoredThemeMode);
 
   React.useEffect(() => {
-    if (themeMode !== "auto") return;
+    if (themeMode !== 'auto') return;
     return setupPreferredListener();
   }, [themeMode]);
 
-  const resolvedTheme = themeMode === "auto" ? getSystemTheme() : themeMode;
+  const resolvedTheme = themeMode === 'auto' ? getSystemTheme() : themeMode;
 
   const setTheme = (newTheme: ThemeMode) => {
     setThemeMode(newTheme);
@@ -146,7 +146,7 @@ export function ThemeProvider({ children }: React.PropsWithChildren) {
 export function useTheme() {
   const context = React.use(ThemeContext);
   if (!context) {
-    throw new Error("useTheme must be used within a ThemeProvider");
+    throw new Error('useTheme must be used within a ThemeProvider');
   }
   return context;
 }
@@ -169,13 +169,13 @@ export function ThemeToggle() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme("light")}>
+        <DropdownMenuItem onClick={() => setTheme('light')}>
           Light
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>
           Dark
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("auto")}>
+        <DropdownMenuItem onClick={() => setTheme('auto')}>
           System
         </DropdownMenuItem>
       </DropdownMenuContent>