feat(ticket): add section icons, theme-aware system timeline, and nested sidebar active routes

src/components/app-sidebar.tsx

@@ -33,6 +33,11 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useAppStore } from '@/store/app.store';
 
+function isRouteActive(pathname: string, path?: string) {
+  if (!path) return false;
+  return pathname === path || pathname.startsWith(`${path}/`);
+}
+
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const pathname = usePathname();
   const { hasPermission } = usePermissions();
@@ -85,16 +90,23 @@ function SidebarNavItem({
   item: MenuItem;
   pathname: string;
 }) {
-  const isActive = item.path ? pathname === item.path : false;
+  const isActive = isRouteActive(pathname, item.path);
   const isChildActive =
-    item.children?.some((child) => child.path === pathname) ?? false;
+    item.children?.some((child) => isRouteActive(pathname, child.path)) ??
+    false;
   const hasChildren = Boolean(item.children?.length);
+  const [open, setOpen] = React.useState(isChildActive);
+
+  React.useEffect(() => {
+    if (isChildActive) setOpen(true);
+  }, [isChildActive]);
 
   if (hasChildren) {
     return (
       <Collapsible
         asChild
-        defaultOpen={isChildActive}
+        open={open}
+        onOpenChange={setOpen}
         className="group/collapsible"
       >
         <SidebarMenuItem>
@@ -112,7 +124,7 @@ function SidebarNavItem({
                   {child.path ? (
                     <SidebarMenuSubButton
                       asChild
-                      isActive={pathname === child.path}
+                      isActive={isRouteActive(pathname, child.path)}
                     >
                       <Link href={child.path}>
                         <child.icon />