fix(panel): active tab/route highlight (pickTab + sidebar footer exact match) (#520)

* feat(panel): add pickTab helper for validated URL tab params

* fix(panel): validate kanban view + KB tab params via pickTab

The bare `as T || default` cast only guarded null — a typo/invalid value
(?view=deev, ?tab=foo) passed through as an out-of-set TabValue, blanking the
active tab highlight and the content pane. pickTab validates against the
known set and falls back to the default on null/empty/invalid.

* fix(panel): highlight active sidebar footer link (exact match)

SidebarFooter had no isActive branch (SidebarNav does), so footer links
never highlighted. Added with EXACT match (pathname === href) — not
startsWith — so /settings does not also highlight on /settings/ai-providers.
Main nav keeps startsWith (longer hrefs need prefix matching); the two
intentionally differ.

---------

Co-authored-by: Renn F <rennf93@users.noreply.github.com>
This commit is contained in:
Renzo F
2026-07-15 04:33:13 +02:00
committed by GitHub
co-authored by Renn F
parent ba9c9d69d8
commit 0d42232d9d
6 changed files with 87 additions and 6 deletions
+7 -1
View File
@@ -119,18 +119,24 @@ export function SidebarFooter({
collapsed?: boolean;
onNavigate?: () => void;
}) {
const pathname = usePathname();
// No Separator here: both wrappers (desktop aside + mobile Sheet) already
// draw a border-t, and a second line reads as a rendering glitch.
return (
<div className="space-y-1">
{footerItems.map((item) => {
// Exact match: /settings must not also highlight on /settings/ai-providers.
const isActive = pathname === item.href;
const link = (
<Link
prefetch={false}
href={item.href}
onClick={onNavigate}
className={cn(
"flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground transition-colors",
"flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
isActive
? "bg-primary text-primary-foreground"
: "text-muted-foreground hover:bg-muted hover:text-foreground",
collapsed && "justify-center px-2",
)}
>