bug fixing

packages/web/src/app/layout.tsx

@@ -6,15 +6,19 @@ import type { Metadata } from "next"
 import { Montserrat } from "next/font/google"
 import { PropsWithChildren } from "react"
 import "./globals.css"
+import { getTheme } from "@rahoot/web/server/theme"
 
 const montserrat = Montserrat({
   variable: "--font-montserrat",
   subsets: ["latin"],
 })
 
-export const metadata: Metadata = {
-  title: "Rahoot !",
+export async function generateMetadata(): Promise<Metadata> {
+  const theme = getTheme()
+  return {
+    title: theme.brandName || "Rahoot",
     icons: "/icon.svg",
+  }
 }
 
 const RootLayout = ({ children }: PropsWithChildren) => (

packages/web/src/components/game/GameWrapper.tsx

@@ -37,7 +37,7 @@ const GameWrapper = ({
   const { isConnected } = useSocket()
   const { player } = usePlayerStore()
   const { questionStates, setQuestionStates } = useQuestionStore()
-  const { backgroundUrl } = useThemeStore()
+  const { backgroundUrl, brandName, setBackground, setBrandName } = useThemeStore()
   const [isDisabled, setIsDisabled] = useState(false)
   const next = statusName ? MANAGER_SKIP_BTN[statusName] : null
 
@@ -52,6 +52,27 @@ const GameWrapper = ({
     setIsDisabled(false)
   }, [statusName])
 
+  useEffect(() => {
+    const loadTheme = 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 load theme", error)
+      }
+    }
+
+    loadTheme()
+  }, [setBackground, setBrandName])
+
   const handleNext = () => {
     setIsDisabled(true)
     onNext?.()
@@ -88,6 +109,12 @@ const GameWrapper = ({
               </div>
             )}
 
+            <div className="flex flex-1 items-center justify-center">
+              <span className="rounded-md bg-white/90 px-3 py-1 text-sm font-semibold text-gray-800 shadow">
+                {brandName}
+              </span>
+            </div>
+
             {manager && next && (
               <Button
                 className={clsx("self-end bg-white px-4 text-black!", {