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,
|
role: u.role,
|
||||||
tenantId: u.tenantId,
|
tenantId: u.tenantId,
|
||||||
hasAvatar: u.hasAvatar,
|
hasAvatar: u.hasAvatar,
|
||||||
|
accentColor: u.accentColor,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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 })),
|
||||||
}));
|
}));
|
||||||
|
|||||||
Reference in New Issue
Block a user