adding theming to client and bug fixes

packages/web/src/components/ThemeHydrator.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { useEffect } from "react"
+import { useThemeStore } from "@rahoot/web/stores/theme"
+
+const ThemeHydrator = () => {
+  const { setBackground, setBrandName } = useThemeStore()
+
+  useEffect(() => {
+    const load = async () => {
+      try {
+        const res = await fetch("/api/theme", { cache: "no-store" })
+        const data = await res.json()
+        if (res.ok && data.theme) {
+          if (typeof data.theme.backgroundUrl === "string") {
+            setBackground(data.theme.backgroundUrl || null)
+          }
+          if (typeof data.theme.brandName === "string") {
+            setBrandName(data.theme.brandName)
+          }
+        }
+      } catch (error) {
+        console.error("Failed to hydrate theme", error)
+      }
+    }
+    load()
+  }, [setBackground, setBrandName])
+
+  return null
+}
+
+export default ThemeHydrator