[taskboard] fix active navigation state

components/app-shell.tsx

@@ -1,4 +1,7 @@
+"use client";
+
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 import { Network, NotebookTabs, PanelsTopLeft, ScrollText, Send, Settings2, ShieldEllipsis, UsersRound } from "lucide-react";
 
 import { cn } from "@/lib/utils";
@@ -16,12 +19,12 @@ const navItems = [
 ];
 
 export function AppShell({
-  pathname,
   children,
 }: {
-  pathname: string;
   children: React.ReactNode;
 }) {
+  const pathname = usePathname();
+
   return (
     <div className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(34,211,238,0.18),_transparent_30%),radial-gradient(circle_at_top_right,_rgba(245,158,11,0.14),_transparent_28%),linear-gradient(180deg,#07111f_0%,#091321_44%,#0f172a_100%)] text-foreground">
       <header className="border-b border-white/10 bg-slate-950/60 backdrop-blur-xl">
@@ -44,7 +47,8 @@ export function AppShell({
         <nav className="space-y-2 lg:sticky lg:top-8 lg:self-start">
           {navItems.map((item) => {
             const Icon = item.icon;
-            const isActive = pathname === item.href;
+            const isActive =
+              pathname === item.href || (item.href !== "/tasks" && pathname.startsWith(`${item.href}/`));
             return (
               <Link
                 className={cn(