fix(sidebar): prevent parent nav items from highlighting on child routes (#1110)

## Summary

- Fixed a bug where parent nav items (e.g. "Cloud Agent" at `/cloud`, or
"Organization" at `/organizations/:id`) appeared highlighted when
navigating to child routes like "Sessions" (`/cloud/sessions`). The
`SidebarMenuList` component used `pathname.startsWith(item.url + '/')`
for active state, which caused any parent route prefix to match.
- The fix introduces an `allUrls` prop on `SidebarMenuList` so the
more-specific-route check has visibility into **all** sidebar items
across all sections — not just the current group. Both
`PersonalAppSidebar` and `OrganizationAppSidebar` now compute and pass
the full URL list. When a more specific sibling URL matches the current
pathname, the less-specific parent item is no longer marked active.
- The `allUrls` prop is optional and falls back to section-local items,
so existing call sites without it still work correctly.

## Verification

- [x] `pnpm typecheck` — passed with no errors
- [x] `pnpm run format:changed` — prettier applied, no remaining
formatting issues
- [x] Manual review confirming cross-section cases are handled (e.g.
`/organizations/:id` vs `/organizations/:id/cloud/sessions`)

## Visual Changes

N/A

## Reviewer Notes

- Three files changed: `SidebarMenuList.tsx` (active state logic),
`PersonalAppSidebar.tsx` and `OrganizationAppSidebar.tsx` (pass
`allUrls` prop).
- The `hasMoreSpecificMatch` check is short-circuited behind
`matchesPrefix` so it only runs when the item already prefix-matched,
keeping the common case efficient.
- The `allUrls` array is memoized in both sidebar components.

---

Built for [Evgeny
Shurakov](https://kilo-code.slack.com/archives/C09M96CFZQX/p1773650401612769?thread_ts=1773650249.099499&cid=C09M96CFZQX)
by [Kilo for Slack](https://kilo.ai/features/slack-integration)

Author: eshurakov

src/app/(app)/components/OrganizationAppSidebar.tsx

@@ -246,6 +246,11 @@ export default function OrganizationAppSidebar({
       : []),
   ];
 
+  const allUrls = useMemo(
+    () => [...dashboardItems, ...cloudItems, ...accountItems].map(i => i.url),
+    [dashboardItems, cloudItems, accountItems]
+  );
+
   // Determine if we should show the OrganizationSwitcher
   // Hide it when an admin user is viewing an organization they're not a member of
   const shouldShowOrganizationSwitcher = !user?.is_admin || currentOrg;
@@ -266,9 +271,13 @@ export default function OrganizationAppSidebar({
       </SidebarHeader>
 
       <SidebarContent>
-        <SidebarMenuList label="Dashboard" items={dashboardItems} />
-        {cloudItems.length > 0 && <SidebarMenuList label="Cloud" items={cloudItems} />}
-        {accountItems.length > 0 && <SidebarMenuList label="Account" items={accountItems} />}
+        <SidebarMenuList label="Dashboard" items={dashboardItems} allUrls={allUrls} />
+        {cloudItems.length > 0 && (
+          <SidebarMenuList label="Cloud" items={cloudItems} allUrls={allUrls} />
+        )}
+        {accountItems.length > 0 && (
+          <SidebarMenuList label="Account" items={accountItems} allUrls={allUrls} />
+        )}
       </SidebarContent>
 
       <SidebarUserFooter user={user} isLoading={isLoading} />

src/app/(app)/components/PersonalAppSidebar.tsx

@@ -25,6 +25,7 @@ import {
   Webhook,
   Factory,
 } from 'lucide-react';
+import { useMemo } from 'react';
 import HeaderLogo from '@/components/HeaderLogo';
 import OrganizationSwitcher from './OrganizationSwitcher';
 import SidebarMenuList from './SidebarMenuList';
@@ -202,6 +203,11 @@ export default function PersonalAppSidebar(props: React.ComponentProps<typeof Si
     },
   ];
 
+  const allUrls = useMemo(
+    () => [...dashboardItems, ...cloudItems, ...accountItems, ...startItems].map(i => i.url),
+    [dashboardItems, cloudItems, accountItems, startItems]
+  );
+
   return (
     <Sidebar {...props}>
       <SidebarHeader className="p-4">
@@ -216,10 +222,12 @@ export default function PersonalAppSidebar(props: React.ComponentProps<typeof Si
       </SidebarHeader>
 
       <SidebarContent>
-        <SidebarMenuList label="Dashboard" items={dashboardItems} />
-        {cloudItems.length > 0 && <SidebarMenuList label="Cloud" items={cloudItems} />}
-        <SidebarMenuList label="Account" items={accountItems} />
-        <SidebarMenuList label="Start" items={startItems} />
+        <SidebarMenuList label="Dashboard" items={dashboardItems} allUrls={allUrls} />
+        {cloudItems.length > 0 && (
+          <SidebarMenuList label="Cloud" items={cloudItems} allUrls={allUrls} />
+        )}
+        <SidebarMenuList label="Account" items={accountItems} allUrls={allUrls} />
+        <SidebarMenuList label="Start" items={startItems} allUrls={allUrls} />
       </SidebarContent>
 
       <SidebarUserFooter user={user} isLoading={isLoading} />

src/app/(app)/components/SidebarMenuList.tsx

@@ -21,18 +21,33 @@ type MenuItem = {
 type SidebarMenuListProps = {
   items: MenuItem[];
   label?: string;
+  allUrls?: string[];
 };
 
-export default function SidebarMenuList({ items, label = 'Dashboard' }: SidebarMenuListProps) {
+export default function SidebarMenuList({
+  items,
+  label = 'Dashboard',
+  allUrls,
+}: SidebarMenuListProps) {
   const pathname = usePathname();
+  const urlsToCheck = allUrls ?? items.map(i => i.url);
 
   return (
     <SidebarGroup>
       <SidebarGroupLabel className="text-muted-foreground font-medium">{label}</SidebarGroupLabel>
       <SidebarGroupContent>
         <SidebarMenu>
           {items.map(item => {
-            const isActive = pathname === item.url || pathname.startsWith(item.url + '/');
+            const matchesPrefix = pathname === item.url || pathname.startsWith(item.url + '/');
+            const hasMoreSpecificMatch =
+              matchesPrefix &&
+              urlsToCheck.some(
+                url =>
+                  url !== item.url &&
+                  url.length > item.url.length &&
+                  (pathname === url || pathname.startsWith(url + '/'))
+              );
+            const isActive = matchesPrefix && !hasMoreSpecificMatch;
             return (
               <SidebarMenuItem key={item.title}>
                 <SidebarMenuButton asChild>