From dc8219eacb5a71b19a569d175bbe54630d86b636 Mon Sep 17 00:00:00 2001
From: Cyrus Gray <144336577+graycyrus@users.noreply.github.com>
Date: Wed, 24 Jun 2026 21:50:11 +0530
Subject: [PATCH] fix(sidebar): make the active nav tab visible in light theme
(#4053)
---
app/src/components/layout/shell/SidebarNav.test.tsx | 12 ++++++++++++
app/src/components/layout/shell/SidebarNav.tsx | 7 ++++++-
2 files changed, 18 insertions(+), 1 deletion(-)
diff --git a/app/src/components/layout/shell/SidebarNav.test.tsx b/app/src/components/layout/shell/SidebarNav.test.tsx
index bdcf96294..ba0eb5c7f 100644
--- a/app/src/components/layout/shell/SidebarNav.test.tsx
+++ b/app/src/components/layout/shell/SidebarNav.test.tsx
@@ -35,6 +35,18 @@ describe('SidebarNav active matching', () => {
expect(tabButton('Chat')).toHaveAttribute('aria-current', 'page');
});
+ it('gives the active tab a visible brand-accent fill (not the white sidebar background)', () => {
+ renderWithProviders(, { initialEntries: ['/chat'] });
+
+ const active = tabButton('Chat');
+ // Light-theme active state must contrast against the white sidebar.
+ expect(active.className).toContain('bg-primary-50');
+ expect(active.className).not.toContain('bg-white');
+
+ // Inactive tabs carry no active fill.
+ expect(tabButton('Human').className).not.toContain('bg-primary-50');
+ });
+
it('clears an active provider selection when clicking the already-active nav item', () => {
const { store } = renderWithProviders(, {
initialEntries: ['/connections'],
diff --git a/app/src/components/layout/shell/SidebarNav.tsx b/app/src/components/layout/shell/SidebarNav.tsx
index 1e42e38d1..3754dc30a 100644
--- a/app/src/components/layout/shell/SidebarNav.tsx
+++ b/app/src/components/layout/shell/SidebarNav.tsx
@@ -73,9 +73,14 @@ export default function SidebarNav() {
onClick={() => handleClick(tab, active)}
title={tab.label}
aria-current={active ? 'page' : undefined}
+ // Light theme: the previous `bg-white` active state matched the
+ // white sidebar background, so the selected tab was nearly
+ // invisible. Use the ocean-brand accent (tinted fill + blue text +
+ // subtle ring) so the current tab clearly stands out. Dark theme
+ // already had enough contrast via `neutral-800`, so it's unchanged.
className={`group flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-[13px] transition-colors cursor-pointer ${
active
- ? 'bg-white dark:bg-neutral-800 text-stone-900 dark:text-neutral-100 font-semibold shadow-sm'
+ ? 'bg-primary-50 text-primary-700 ring-1 ring-primary-200 dark:bg-neutral-800 dark:text-neutral-100 dark:ring-0 font-semibold shadow-sm'
: 'text-stone-500 dark:text-neutral-400 hover:bg-stone-200/70 dark:hover:bg-neutral-800/60 hover:text-stone-700 dark:hover:text-neutral-200'
}`}>