Add tenant branding & theming system with admin UI

Tenant admins can now customize their workspace appearance: page/nav backgrounds (solid, gradient, or image), column/card colors, borders, text, opacity with glass blur, card corner radius, and accent colors. Light and dark mode are configured separately. Theme CSS is injected server-side via transformPageChunk to prevent FOUC. Includes avatar components, account page updates, and pre-existing type error fixes (Buffer, async onMount, InputJsonValue). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-26 21:56:39 -05:00
parent 029b467eae
commit 3a11ed01e9
30 changed files with 1709 additions and 60 deletions
@@ -2,6 +2,7 @@ import type { Handle } from '@sveltejs/kit';
 import { resolveTenant, seedSystemTemplates } from '$lib/server/tenant.js';
 import { validateSession, sessionCookieName } from '$lib/server/auth.js';
 import { logger } from '$lib/server/logger.js';
+import { generateTenantCSS } from '$lib/server/theme-css.js';

 // One-time seed on startup
 seedSystemTemplates().catch((e) => logger.error({ err: e }, 'Failed to seed system templates'));
@@ -30,7 +31,8 @@ export const handle: Handle = async ({ event, resolve }) => {
 				email: session.user.email,
 				name: session.user.name,
 				globalRole: session.user.globalRole,
-				tenantRole: session.user.tenantRole
+				tenantRole: session.user.tenantRole,
+				avatarUrl: session.user.avatarUrl
 			};

 			// Ensure user belongs to current tenant (unless site admin)
@@ -56,7 +58,14 @@ export const handle: Handle = async ({ event, resolve }) => {
 	// 3. Read theme preference
 	event.locals.theme = event.cookies.get('theme') || undefined;

-	const response = await resolve(event);
+	// 4. Generate tenant theme CSS for injection
+	const tenantCSS = generateTenantCSS(tenant?.theme);
+
+	const response = await resolve(event, {
+		transformPageChunk: tenantCSS
+			? ({ html }) => html.replace('<head>', `<head>${tenantCSS}`)
+			: undefined
+	});

 	logger.info({
 		method: event.request.method,