scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-09-11 22:51:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 123

feat(ui): add the theme toggle to the public model hub navbar

Browse source 
The model hub table already renders correctly in dark mode: every one of
its files went onto semantic tokens in the earlier palette migration. What
was missing is a way to get there. The navbar hid the whole account block
behind `!isPublicPage`, and the theme toggle lived inside that block, so
`/ui/model_hub_table` had no control at all and anyone landing on it was
stuck in light.

Split the block so the toggle always renders and only the notifications
bell and account menu stay gated on being signed in.
This commit is contained in:
Yuneng Jiang 2026-08-22 16:34:16 -07:00
parent aae36f4bd4
commit 4cb466a8dc
No known key found for this signature in database
2 changed files with 19 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
ui/litellm-dashboard/src/components/navbar.test.tsx
View file

@ -272,6 +272,13 @@ describe("Navbar", () => {
expect(screen.queryByRole("button", { name: /^notifications$/i })).not.toBeInTheDocument();
});
it("should keep the theme toggle on public pages", () => {
const publicPageProps = { ...defaultProps, isPublicPage: true };
renderWithProviders(<Navbar {...publicPageProps} />);
expect(screen.getByRole("button", { name: /^theme$/i })).toBeInTheDocument();
});
it("should handle hide new feature indicators toggle", async () => {
const user = userEvent.setup();

22
ui/litellm-dashboard/src/components/navbar.tsx
View file

@ -162,17 +162,19 @@ const Navbar: React.FC<NavbarProps> = ({
</div>
)}
{!isPublicPage && (
<div className="flex shrink-0 items-center border-l border-border pl-4">
<div className="flex items-center gap-0.5 rounded-lg bg-muted px-1 py-0 transition-colors hover:bg-accent">
<ThemeToggle />
<span className="mx-0.5 h-6 w-px shrink-0 bg-border" aria-hidden />
<NotificationsBell />
<span className="mx-0.5 h-6 w-px shrink-0 bg-border" aria-hidden />
<UserDropdown onLogout={handleLogout} />
</div>
<div className="flex shrink-0 items-center border-l border-border pl-4">
<div className="flex items-center gap-0.5 rounded-lg bg-muted px-1 py-0 transition-colors hover:bg-accent">
<ThemeToggle />
{!isPublicPage && (
<>
<span className="mx-0.5 h-6 w-px shrink-0 bg-border" aria-hidden />
<NotificationsBell />
<span className="mx-0.5 h-6 w-px shrink-0 bg-border" aria-hidden />
<UserDropdown onLogout={handleLogout} />
</>
)}
</div>
)}
</div>
</div>
</div>
</div>