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:
@@ -32,6 +32,7 @@ export function Header() {
|
||||
role: u.role,
|
||||
tenantId: u.tenantId,
|
||||
hasAvatar: u.hasAvatar,
|
||||
accentColor: u.accentColor,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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 })),
|
||||
}));
|
||||
|
||||
Reference in New Issue
Block a user