Split Apps sidebar item: label links to /apps, chevron toggles sub-nav

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { NavLink, useLocation, useNavigate } from "react-router-dom";
+import { NavLink, useLocation } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import {
   Home,
@@ -24,7 +24,6 @@ export default function Sidebar() {
   const [sidebarExpanded, setSidebarExpanded] = useState(true);
   const { logout } = useAuth();
   const location = useLocation();
-  const navigate = useNavigate();
   const { data: user } = useQuery({ queryKey: ["me"], queryFn: getMe });
 
   const isAppsRoute = location.pathname.startsWith("/apps");
@@ -97,36 +96,44 @@ export default function Sidebar() {
 
         {/* Apps — expandable */}
         <div>
-          <button
+          {sidebarExpanded ? (
-            onClick={() => {
+            <div
-              if (!sidebarExpanded) {
+              className={cn(
-                navigate("/apps");
+                "flex items-center rounded-lg transition-colors",
-                return;
+                isAppsRoute
-              }
+                  ? "bg-primary/10 text-primary"
-              setAppsOpen((o) => !o);
+                  : "text-muted hover:bg-muted/20 hover:text-foreground"
-            }}
+              )}
-            className={cn(
+            >
-              "w-full flex items-center rounded-lg transition-colors",
+              <NavLink
-              sidebarExpanded ? "px-3 py-2 gap-3" : "justify-center py-3",
+                to="/apps"
-              isAppsRoute
+                end
-                ? "bg-primary/10 text-primary"
+                className="flex items-center gap-3 px-3 py-2 flex-1 min-w-0"
-                : "text-muted hover:bg-muted/20 hover:text-foreground"
+              >
-            )}
+                <Grid2X2 className="h-5 w-5 shrink-0" />
-          >
+                <span className="text-sm font-medium whitespace-nowrap">Apps</span>
-            <Grid2X2 className="h-5 w-5 shrink-0" />
+              </NavLink>
-            {sidebarExpanded && (
+              <button
-              <>
+                onClick={() => setAppsOpen((o) => !o)}
-                <span className="text-sm font-medium whitespace-nowrap flex-1 text-left">
+                className="px-2 py-2 rounded-r-lg"
-                  Apps
+                aria-label={appsOpen ? "Collapse apps" : "Expand apps"}
-                </span>
+              >
                 {appsOpen ? (
                   <ChevronDown className="h-4 w-4 shrink-0" />
                 ) : (
                   <ChevronRight className="h-4 w-4 shrink-0" />
                 )}
-              </>
+              </button>
-            )}
+            </div>
-          </button>
+          ) : (
+            <NavLink
+              to="/apps"
+              end
+              className={({ isActive }) => navItemClass(isActive)}
+            >
+              <Grid2X2 className="h-5 w-5 shrink-0" />
+            </NavLink>
+          )}
 
           {/* Apps sub-items — only when sidebar is expanded and appsOpen */}
           {sidebarExpanded && appsOpen && (