adding theming to client and bug fixes

2026-03-13 20:15:35 +01:00 · 2025-12-09 10:36:41 +01:00
parent f748d6ec3f
commit 6c16dd146a
6 changed files with 190 additions and 5 deletions
--- a/packages/web/src/app/api/theme/route.ts
+++ b/packages/web/src/app/api/theme/route.ts
@@ -0,0 +1,30 @@
+import { getTheme, saveTheme } from "@rahoot/web/server/theme"
+import { NextResponse } from "next/server"
+
+export const runtime = "nodejs"
+export const dynamic = "force-dynamic"
+
+export async function GET() {
+  try {
+    const theme = getTheme()
+    return NextResponse.json({ theme })
+  } catch (error) {
+    console.error("Failed to load theme", error)
+    return NextResponse.json({ error: "Failed to load theme" }, { status: 500 })
+  }
+}
+
+export async function POST(request: Request) {
+  try {
+    const body = await request.json()
+    const theme = saveTheme({
+      brandName: body.brandName,
+      backgroundUrl: body.backgroundUrl,
+    })
+    return NextResponse.json({ theme })
+  } catch (error) {
+    console.error("Failed to save theme", error)
+    const message = error instanceof Error ? error.message : "Failed to save theme"
+    return NextResponse.json({ error: message }, { status: 400 })
+  }
+}
--- a/packages/web/src/app/layout.tsx
+++ b/packages/web/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import Toaster from "@rahoot/web/components/Toaster"
 import BrandingHelmet from "@rahoot/web/components/BrandingHelmet"
+import ThemeHydrator from "@rahoot/web/components/ThemeHydrator"
 import { SocketProvider } from "@rahoot/web/contexts/socketProvider"
 import type { Metadata } from "next"
 import { Montserrat } from "next/font/google"
@@ -21,6 +22,7 @@ const RootLayout = ({ children }: PropsWithChildren) => (
    <body className={`${montserrat.variable} bg-secondary antialiased`}>
      <SocketProvider>
        <BrandingHelmet />
+        <ThemeHydrator />
        <main className="text-base-[8px] flex flex-col">{children}</main>
        <Toaster />
      </SocketProvider>
--- a/packages/web/src/components/ThemeHydrator.tsx
+++ b/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
--- a/packages/web/src/components/game/create/ThemeEditor.tsx
+++ b/packages/web/src/components/game/create/ThemeEditor.tsx
@@ -26,6 +26,9 @@ const ThemeEditor = ({ onBack }: Props) => {
  const [loading, setLoading] = useState(false)
  const [uploading, setUploading] = useState(false)
  const [uploadError, setUploadError] = useState<string | null>(null)
+  const [savingTheme, setSavingTheme] = useState(false)
+  const [saveError, setSaveError] = useState<string | null>(null)
+  const [initializing, setInitializing] = useState(true)

  const previewUrl = useMemo(
    () => backgroundUrl || customUrl || background.src,
@@ -35,17 +38,36 @@ const ThemeEditor = ({ onBack }: Props) => {
  const load = async () => {
    setLoading(true)
    try {
-      const res = await fetch("/api/media", { cache: "no-store" })
-      const data = await res.json()
-      if (!res.ok) throw new Error(data.error || "Failed to load media")
-      const onlyImages = (data.media || []).filter(
+      const [mediaRes, themeRes] = await Promise.all([
+        fetch("/api/media", { cache: "no-store" }),
+        fetch("/api/theme", { cache: "no-store" }),
+      ])
+
+      const mediaData = await mediaRes.json()
+      const themeData = await themeRes.json()
+
+      if (!mediaRes.ok) throw new Error(mediaData.error || "Failed to load media")
+      if (!themeRes.ok) throw new Error(themeData.error || "Failed to load theme")
+
+      const onlyImages = (mediaData.media || []).filter(
        (item: MediaItem) => item.mime?.startsWith("image/"),
      )
      setItems(onlyImages)
+
+      if (themeData.theme) {
+        if (typeof themeData.theme.backgroundUrl === "string") {
+          setBackground(themeData.theme.backgroundUrl || null)
+          setCustomUrl(themeData.theme.backgroundUrl || "")
+        }
+        if (typeof themeData.theme.brandName === "string") {
+          setBrandName(themeData.theme.brandName)
+        }
+      }
    } catch (error) {
      console.error(error)
    } finally {
      setLoading(false)
+      setInitializing(false)
    }
  }

@@ -53,9 +75,29 @@ const ThemeEditor = ({ onBack }: Props) => {
    load()
  }, [])

+  const persistTheme = async (next: { backgroundUrl?: string | null; brandName?: string }) => {
+    setSavingTheme(true)
+    setSaveError(null)
+    try {
+      const res = await fetch("/api/theme", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(next),
+      })
+      const data = await res.json()
+      if (!res.ok) throw new Error(data.error || "Failed to save theme")
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to save theme"
+      setSaveError(message)
+    } finally {
+      setSavingTheme(false)
+    }
+  }
+
  const handleSet = (url: string) => {
    if (!url) return
    setBackground(url)
+    persistTheme({ backgroundUrl: url })
  }

  const handleApplyCustom = () => {
@@ -94,6 +136,7 @@ const ThemeEditor = ({ onBack }: Props) => {
  const handleReset = () => {
    reset()
    setCustomUrl("")
+    persistTheme({ backgroundUrl: null, brandName: "Rahoot" })
  }

  return (
@@ -121,7 +164,10 @@ const ThemeEditor = ({ onBack }: Props) => {
            </span>
            <input
              value={brandName}
-              onChange={(e) => setBrandName(e.target.value)}
+              onChange={(e) => {
+                setBrandName(e.target.value)
+                persistTheme({ brandName: e.target.value })
+              }}
              className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
              placeholder="e.g., Kwalitaria Pub Quiz"
            />
@@ -196,6 +242,14 @@ const ThemeEditor = ({ onBack }: Props) => {
          {uploadError && (
            <p className="mt-1 text-xs font-semibold text-red-600">{uploadError}</p>
          )}
+          {saveError && (
+            <p className="mt-1 text-xs font-semibold text-red-600">{saveError}</p>
+          )}
+          {(savingTheme || initializing) && !uploading && (
+            <p className="mt-1 text-xs text-gray-500">
+              {initializing ? "Loading theme…" : "Saving theme…"}
+            </p>
+          )}
        </div>

          <div className="grid gap-3 sm:grid-cols-2">
--- a/packages/web/src/server/theme.ts
+++ b/packages/web/src/server/theme.ts
@@ -0,0 +1,29 @@
+import Config from "@rahoot/socket/services/config"
+
+export type ThemeSettings = {
+  brandName: string
+  backgroundUrl: string | null
+}
+
+export const getTheme = (): ThemeSettings => {
+  const theme = Config.theme()
+  return {
+    brandName: theme.brandName || "Rahoot",
+    backgroundUrl:
+      typeof theme.backgroundUrl === "string" && theme.backgroundUrl.length > 0
+        ? theme.backgroundUrl
+        : null,
+  }
+}
+
+export const saveTheme = (payload: Partial<ThemeSettings>): ThemeSettings => {
+  const current = getTheme()
+  const merged = {
+    brandName: payload.brandName ?? current.brandName,
+    backgroundUrl:
+      payload.backgroundUrl === undefined
+        ? current.backgroundUrl
+        : payload.backgroundUrl,
+  }
+  return Config.saveTheme(merged)
+}