Rework theme provider to provide the actual Theme object throughtout the app, in addition to the name

Split name out of the Theme struct to simplify custom theme saving/reading

client/app/components/ActivityGrid.tsx

@@ -4,15 +4,31 @@ import Popup from "./Popup"
 import { useState } from "react"
 import { useTheme } from "~/hooks/useTheme"
 import ActivityOptsSelector from "./ActivityOptsSelector"
-import { themes } from "~/styles/themes.css"
+import type { Theme } from "~/styles/themes.css"
 
+
+function getPrimaryColor(theme: Theme): string {
+    const value = theme.primary;
+    const rgbMatch = value.match(/^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/);
+    if (rgbMatch) {
+        const [, r, g, b] = rgbMatch.map(Number);
+        return (
+            '#' +
+            [r, g, b]
+                .map((n) => n.toString(16).padStart(2, '0'))
+                .join('')
+        );
+    }
+
+    return value;
+}
 interface Props {
-    step?: string 
-    range?: number 
-    month?: number 
-    year?: number 
-    artistId?: number 
-    albumId?: number 
+    step?: string
+    range?: number
+    month?: number
+    year?: number
+    artistId?: number
+    albumId?: number
     trackId?: number
     configurable?: boolean
     autoAdjust?: boolean
@@ -49,9 +65,9 @@ export default function ActivityGrid({
     });
 
 
-    const { theme } = useTheme();
-    const currentTheme = themes.find(t => t.name === theme);
-    const color = currentTheme?.primary || '#f5a97f';
+    const { theme, themeName } = useTheme();
+    const color = getPrimaryColor(theme);
+
 
     if (isPending) { 
         return (
@@ -108,7 +124,7 @@ export default function ActivityGrid({
         }
 
         v = Math.min(v, t)
-        if (theme === "pearl") {
+        if (themeName === "pearl") {
             // special case for the only light theme lol
             // could be generalized by pragmatically comparing the
             // lightness of the bg vs the primary but eh

client/app/components/themeSwitcher/ThemeOption.tsx

@@ -1,19 +1,20 @@
-import type { Theme } from "~/providers/ThemeProvider";
+import type { Theme } from "~/styles/themes.css";
 
 interface Props {
     theme: Theme
+    themeName: string
     setTheme: Function
 }
 
-export default function ThemeOption({ theme, setTheme }: Props) {
+export default function ThemeOption({ theme, themeName, setTheme }: Props) {
 
     const capitalizeFirstLetter = (s: string) => {
         return s.charAt(0).toUpperCase() + s.slice(1);
     }
 
     return (
-        <div onClick={() => setTheme(theme.name)} className="rounded-md p-3 sm:p-5 hover:cursor-pointer flex gap-4 items-center border-2" style={{background: theme.bg, color: theme.fg, borderColor: theme.bgSecondary}}>
-            <div className="text-xs sm:text-sm">{capitalizeFirstLetter(theme.name)}</div>
+        <div onClick={() => setTheme(themeName)} className="rounded-md p-3 sm:p-5 hover:cursor-pointer flex gap-4 items-center border-2" style={{background: theme.bg, color: theme.fg, borderColor: theme.bgSecondary}}>
+            <div className="text-xs sm:text-sm">{capitalizeFirstLetter(themeName)}</div>
             <div className="w-[50px] h-[30px] rounded-md" style={{background: theme.bgSecondary}}></div>
             <div className="w-[50px] h-[30px] rounded-md" style={{background: theme.fgSecondary}}></div>
             <div className="w-[50px] h-[30px] rounded-md" style={{background: theme.primary}}></div>

client/app/components/themeSwitcher/ThemeSwitcher.tsx

@@ -6,7 +6,7 @@ import ThemeOption from './ThemeOption';
 import { AsyncButton } from '../AsyncButton';
 
 export function ThemeSwitcher() {
-    const { theme, setTheme } = useTheme();
+    const { theme, themeName, setTheme } = useTheme();
         const initialTheme = {
             bg: "#1e1816",
             bgSecondary: "#2f2623",
@@ -30,30 +30,22 @@ export function ThemeSwitcher() {
         const handleCustomTheme = () => {
             console.log(custom)
             try {
-                const theme = JSON.parse(custom)
-                theme.name = "custom"
-                setCustomTheme(theme)
-                delete theme.name
-                setCustom(JSON.stringify(theme, null, "  "))
-                console.log(theme)
+                const themeData = JSON.parse(custom)
+                setCustomTheme(themeData)
+                setCustom(JSON.stringify(themeData, null, "  "))
+                console.log(themeData)
             } catch(err) {
                 console.log(err)
             }
         }
 
-    useEffect(() => {
-        if (theme) {
-            setTheme(theme)
-        }
-    }, [theme]);
-
     return (
         <div className='flex flex-col gap-10'>
             <div>
                 <h2>Select Theme</h2>
                 <div className="grid grid-cols-2 items-center gap-2">
-                    {themes.map((t) => (
-                        <ThemeOption setTheme={setTheme} key={t.name} theme={t} />
+                    {Object.entries(themes).map(([name, themeData]) => (
+                        <ThemeOption setTheme={setTheme} key={name} theme={themeData} themeName={name} />
                     ))}
                 </div>
             </div>