From b719291bdc514135c34fcd5697118bfd646a006f Mon Sep 17 00:00:00 2001
From: Schalli <kschaller@ctl.de>
Date: Wed, 1 Jul 2026 13:30:33 +0200
Subject: [PATCH] fix(accent-color): restore color on reload + apply sidebar
 vars
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

header.tsx: accentColor was missing from setUser call on mount —
applyAccentColor(undefined) fired on every reload, removing --primary.

auth-store: also set --sidebar-accent (15% opacity) and
--sidebar-accent-foreground so active sidebar items match accent.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/web/src/components/layout/header.tsx |  1 +
 apps/web/src/lib/stores/auth-store.ts     | 22 +++++++++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/layout/header.tsx b/apps/web/src/components/layout/header.tsx
index aced141..df6ab11 100644
--- a/apps/web/src/components/layout/header.tsx
+++ b/apps/web/src/components/layout/header.tsx
@@ -32,6 +32,7 @@ export function Header() {
             role: u.role,
             tenantId: u.tenantId,
             hasAvatar: u.hasAvatar,
+            accentColor: u.accentColor,
           });
         }
       });
diff --git a/apps/web/src/lib/stores/auth-store.ts b/apps/web/src/lib/stores/auth-store.ts
index 6fedba7..dbb2f55 100644
--- a/apps/web/src/lib/stores/auth-store.ts
+++ b/apps/web/src/lib/stores/auth-store.ts
@@ -7,6 +7,7 @@ export interface AuthUser {
   role: 'SUPER_ADMIN' | 'ADMIN' | 'USER';
   tenantId: string;
   hasAvatar?: boolean;
+  accentColor?: string | null;
 }
 
 interface AuthState {
@@ -17,6 +18,22 @@ interface AuthState {
   bumpAvatarVersion: () => void;
 }
 
+function applyAccentColor(color: string | null | undefined) {
+  if (typeof document === 'undefined') return;
+  if (color) {
+    document.documentElement.style.setProperty('--primary', color);
+    document.documentElement.style.setProperty('--ring', color);
+    // Sidebar active state: accent color with 15% opacity (#rrggbbaa, 0x26 ≈ 15%)
+    document.documentElement.style.setProperty('--sidebar-accent', `${color}26`);
+    document.documentElement.style.setProperty('--sidebar-accent-foreground', color);
+  } else {
+    document.documentElement.style.removeProperty('--primary');
+    document.documentElement.style.removeProperty('--ring');
+    document.documentElement.style.removeProperty('--sidebar-accent');
+    document.documentElement.style.removeProperty('--sidebar-accent-foreground');
+  }
+}
+
 /**
  * Zustand store for client-side auth state.
  * No persist middleware -- user state comes from API, not localStorage.
@@ -25,7 +42,10 @@ interface AuthState {
 export const useAuthStore = create<AuthState>()((set) => ({
   user: null,
   avatarVersion: 0,
-  setUser: (user) => set({ user }),
+  setUser: (user) => {
+    applyAccentColor(user.accentColor);
+    set({ user });
+  },
   clearUser: () => set({ user: null }),
   bumpAvatarVersion: () => set((s) => ({ avatarVersion: s.avatarVersion + 1 })),
 }));