feat: Implement organization-based SSO login with an AsyncCombobox and add logo variant branding options.

web/studio/src/context/BrandingContext.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { cmsApi, Organization, getImageUrl } from '@/lib/api';
+import { useAuth } from './AuthContext';
+import { usePathname } from 'next/navigation';
+
+interface BrandingContextType {
+    branding: Organization | null;
+    loading: boolean;
+    refreshBranding: () => Promise<void>;
+}
+
+const BrandingContext = createContext<BrandingContextType>({
+    branding: null,
+    loading: true,
+    refreshBranding: async () => { },
+});
+
+export const useBranding = () => useContext(BrandingContext);
+
+export const BrandingProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const { user } = useAuth();
+    const [branding, setBranding] = useState<Organization | null>(null);
+    const [loading, setLoading] = useState(true);
+
+    const pathname = usePathname();
+
+    const loadBranding = async () => {
+        if (!user?.organization_id) {
+            setLoading(false);
+            return;
+        }
+        try {
+            const data = await cmsApi.getBranding(user.organization_id);
+            // Translate BrandingResponse to Organization shape (partial)
+            const orgData = {
+                id: user.organization_id,
+                name: data.platform_name || 'OpenCCB',
+                logo_url: data.logo_url,
+                favicon_url: data.favicon_url,
+                platform_name: data.platform_name,
+                logo_variant: data.logo_variant,
+                primary_color: data.primary_color,
+                secondary_color: data.secondary_color,
+            } as any;
+
+            setBranding(orgData);
+            console.log('Branding loaded in Studio:', orgData);
+        } catch (error) {
+            console.error('Failed to load branding', error);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        loadBranding();
+    }, [user?.organization_id]);
+
+    useEffect(() => {
+        if (!branding) return;
+        console.log('Applying branding in Studio for path:', pathname);
+
+        // Apply CSS variables
+        if (branding.primary_color) {
+            document.documentElement.style.setProperty('--primary-color', branding.primary_color);
+        }
+        if (branding.secondary_color) {
+            document.documentElement.style.setProperty('--secondary-color', branding.secondary_color);
+        }
+
+        // Update Title
+        if (branding.platform_name) {
+            document.title = `${branding.platform_name} | Studio`;
+        }
+
+        // Update Favicon
+        if (branding.favicon_url) {
+            const faviconUrl = getImageUrl(branding.favicon_url);
+            const link: HTMLLinkElement | null = document.querySelector("link[rel*='icon']");
+            if (link) {
+                link.href = faviconUrl;
+            } else {
+                const newLink = document.createElement("link");
+                newLink.rel = "shortcut icon";
+                newLink.href = faviconUrl;
+                document.head.appendChild(newLink);
+            }
+        }
+    }, [branding, pathname]);
+
+    return (
+        <BrandingContext.Provider value={{ branding, loading, refreshBranding: loadBranding }}>
+            {children}
+        </BrandingContext.Provider>
+    );
+};

web/studio/src/context/ThemeContext.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'dark' | 'light';
+
+interface ThemeContextType {
+    theme: Theme;
+    toggleTheme: () => void;
+    setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType>({
+    theme: 'dark',
+    toggleTheme: () => { },
+    setTheme: () => { },
+});
+
+export const useTheme = () => useContext(ThemeContext);
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+    const [theme, setThemeState] = useState<Theme>('dark');
+    const [mounted, setMounted] = useState(false);
+
+    useEffect(() => {
+        const savedTheme = localStorage.getItem('theme') as Theme | null;
+        if (savedTheme) {
+            setThemeState(savedTheme);
+        }
+        setMounted(true);
+    }, []);
+
+    useEffect(() => {
+        if (!mounted) return;
+
+        const root = window.document.documentElement;
+        root.classList.remove('light', 'dark');
+        root.classList.add(theme);
+        localStorage.setItem('theme', theme);
+    }, [theme, mounted]);
+
+    const toggleTheme = () => {
+        setThemeState(prev => (prev === 'dark' ? 'light' : 'dark'));
+    };
+
+    const setTheme = (newTheme: Theme) => {
+        setThemeState(newTheme);
+    };
+
+    return (
+        <ThemeContext.Provider value={{ theme, toggleTheme, setTheme }}>
+            {children}
+        </ThemeContext.Provider>
+    );
+};