fix(accent-color): restore color on reload + apply sidebar vars

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>
This commit is contained in:
2026-07-01 13:30:33 +02:00
parent 42daa87e5e
commit b719291bdc
2 changed files with 22 additions and 1 deletions
@@ -32,6 +32,7 @@ export function Header() {
role: u.role, role: u.role,
tenantId: u.tenantId, tenantId: u.tenantId,
hasAvatar: u.hasAvatar, hasAvatar: u.hasAvatar,
accentColor: u.accentColor,
}); });
} }
}); });
+21 -1
View File
@@ -7,6 +7,7 @@ export interface AuthUser {
role: 'SUPER_ADMIN' | 'ADMIN' | 'USER'; role: 'SUPER_ADMIN' | 'ADMIN' | 'USER';
tenantId: string; tenantId: string;
hasAvatar?: boolean; hasAvatar?: boolean;
accentColor?: string | null;
} }
interface AuthState { interface AuthState {
@@ -17,6 +18,22 @@ interface AuthState {
bumpAvatarVersion: () => void; 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. * Zustand store for client-side auth state.
* No persist middleware -- user state comes from API, not localStorage. * No persist middleware -- user state comes from API, not localStorage.
@@ -25,7 +42,10 @@ interface AuthState {
export const useAuthStore = create<AuthState>()((set) => ({ export const useAuthStore = create<AuthState>()((set) => ({
user: null, user: null,
avatarVersion: 0, avatarVersion: 0,
setUser: (user) => set({ user }), setUser: (user) => {
applyAccentColor(user.accentColor);
set({ user });
},
clearUser: () => set({ user: null }), clearUser: () => set({ user: null }),
bumpAvatarVersion: () => set((s) => ({ avatarVersion: s.avatarVersion + 1 })), bumpAvatarVersion: () => set((s) => ({ avatarVersion: s.avatarVersion + 1 })),
})); }));