@@ -139,10 +139,21 @@ function Board() {
);
}
-export function KanbanBoard({ initialCategories }: { initialCategories: CategoryDTO[] }) {
+export function KanbanBoard({
+ initialCategories,
+ projectId,
+ title = "Home",
+}: {
+ initialCategories: CategoryDTO[];
+ // Undefined renders the caller's Home board; set it to scope the whole
+ // board -- creating/reordering categories, and everything nested under
+ // them -- to that Project instead.
+ projectId?: string;
+ title?: string;
+}) {
return (
-
-
+
+
);
}
diff --git a/components/nav/projects-nav-section.tsx b/components/nav/projects-nav-section.tsx
new file mode 100644
index 0000000..6572b00
--- /dev/null
+++ b/components/nav/projects-nav-section.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ChevronDown, ChevronRight, FolderKanban } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useProjects } from "@/components/projects/projects-context";
+
+const STORAGE_KEY = "organize:projects-expanded";
+
+/**
+ * The "Projects" nav entry: a link to /projects (the list + create page)
+ * plus, underneath it, a live list of the user's projects that expands
+ * and contracts independently of the link itself -- clicking the label
+ * navigates, clicking the chevron just toggles the list.
+ */
+export function ProjectsNavSection({ collapsed }: { collapsed: boolean }) {
+ const pathname = usePathname();
+ const { projects } = useProjects();
+ // Defaults to expanded on both server and first client render (same
+ // reasoning as SideNavProvider's `collapsed`) to avoid a hydration
+ // mismatch; the persisted value applies right after mount.
+ const [expanded, setExpanded] = useState(true);
+
+ useEffect(() => {
+ const stored = localStorage.getItem(STORAGE_KEY);
+ if (stored !== null) setExpanded(stored === "true");
+ }, []);
+
+ function toggleExpanded() {
+ setExpanded((prev) => {
+ const next = !prev;
+ localStorage.setItem(STORAGE_KEY, String(next));
+ return next;
+ });
+ }
+
+ const isListActive = pathname === "/projects";
+
+ const link = (
+
+
+ {!collapsed && Projects}
+
+ );
+
+ // No room for an expandable sub-list in the icon rail -- just a link,
+ // matching how every other collapsed nav item behaves.
+ if (collapsed) {
+ return (
+
+
+ Projects
+
+ );
+ }
+
+ return (
+
+
+ {link}
+
+
+
+ {expanded && projects.length > 0 && (
+
+ {projects.map((project) => {
+ const isActive = pathname === `/projects/${project.id}`;
+ return (
+
+ {project.title}
+
+ );
+ })}
+
+ )}
+