feat(documents): FolderTreeSidebar (collapsed-by-default tree)

Persistent left rail with "All documents" + "Root" pseudo-rows above
the tree. Each tree row has a chevron toggle (expand/collapse) and a
clickable label (select). Renders unlimited depth without blowing out
the page — children only mount when their parent is expanded.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/components/documents/folder-tree-sidebar.tsx

@@ -0,0 +1,161 @@
+'use client';
+
+import { useState } from 'react';
+import { ChevronRight, Folder, FolderOpen, Inbox } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import { useDocumentFolders, type FolderNode } from '@/hooks/use-document-folders';
+
+interface FolderTreeSidebarProps {
+  /** Currently-selected folder id, or `null` for root, or `undefined`
+   *  for "All documents" (no folder filter). */
+  selectedFolderId: string | null | undefined;
+  onSelect: (folderId: string | null | undefined) => void;
+  /** Slot below the tree for a "New folder" affordance from the parent. */
+  footer?: React.ReactNode;
+}
+
+/**
+ * Collapsed-by-default tree. Each row shows a chevron that toggles its
+ * children; clicking the row label selects the folder. The "All
+ * documents" + "Root" pseudo-rows at the top let reps filter to the
+ * full set or to docs without a folder.
+ *
+ * Designed for unlimited depth — only the top level renders by default
+ * so deep trees don't blow out the page; reps drill in by expanding.
+ */
+export function FolderTreeSidebar({
+  selectedFolderId,
+  onSelect,
+  footer,
+}: FolderTreeSidebarProps) {
+  const { data: tree = [], isLoading } = useDocumentFolders();
+
+  return (
+    <aside className="w-full sm:w-60 shrink-0 border-r bg-muted/40 p-2">
+      <div className="mb-2 px-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+        Folders
+      </div>
+      <div className="space-y-0.5">
+        <PseudoRow
+          label="All documents"
+          icon={Inbox}
+          active={selectedFolderId === undefined}
+          onClick={() => onSelect(undefined)}
+        />
+        <PseudoRow
+          label="Root (no folder)"
+          icon={Folder}
+          active={selectedFolderId === null}
+          onClick={() => onSelect(null)}
+        />
+      </div>
+      <div className="mt-3 space-y-0.5">
+        {isLoading ? (
+          <p className="px-2 text-xs text-muted-foreground">Loading…</p>
+        ) : tree.length === 0 ? (
+          <p className="px-2 text-xs text-muted-foreground">No folders yet.</p>
+        ) : (
+          tree.map((node) => (
+            <FolderRow
+              key={node.id}
+              node={node}
+              depth={0}
+              selectedFolderId={selectedFolderId}
+              onSelect={onSelect}
+            />
+          ))
+        )}
+      </div>
+      {footer ? <div className="mt-4 border-t pt-3">{footer}</div> : null}
+    </aside>
+  );
+}
+
+function PseudoRow({
+  label,
+  icon: Icon,
+  active,
+  onClick,
+}: {
+  label: string;
+  icon: typeof Inbox;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className={cn('w-full justify-start font-normal', active && 'bg-accent text-foreground')}
+      onClick={onClick}
+    >
+      <Icon className="mr-2 h-4 w-4" />
+      {label}
+    </Button>
+  );
+}
+
+function FolderRow({
+  node,
+  depth,
+  selectedFolderId,
+  onSelect,
+}: {
+  node: FolderNode;
+  depth: number;
+  selectedFolderId: string | null | undefined;
+  onSelect: (folderId: string | null) => void;
+}) {
+  const [open, setOpen] = useState(false);
+  const hasChildren = node.children.length > 0;
+  const isActive = selectedFolderId === node.id;
+
+  return (
+    <>
+      <div
+        className={cn(
+          'group flex items-center gap-0.5 rounded-md px-1 py-0.5 text-sm',
+          isActive && 'bg-accent text-foreground',
+        )}
+        style={{ paddingLeft: `${depth * 12 + 4}px` }}
+      >
+        <button
+          type="button"
+          aria-label={open ? 'Collapse' : 'Expand'}
+          onClick={() => setOpen((o) => !o)}
+          className={cn(
+            'flex h-5 w-5 items-center justify-center text-muted-foreground hover:text-foreground',
+            !hasChildren && 'invisible',
+          )}
+        >
+          <ChevronRight className={cn('h-3.5 w-3.5 transition-transform', open && 'rotate-90')} />
+        </button>
+        <button
+          type="button"
+          onClick={() => onSelect(node.id)}
+          className="flex flex-1 items-center gap-1.5 truncate text-left"
+        >
+          {open && hasChildren ? (
+            <FolderOpen className="h-4 w-4 shrink-0" />
+          ) : (
+            <Folder className="h-4 w-4 shrink-0" />
+          )}
+          <span className="truncate">{node.name}</span>
+        </button>
+      </div>
+      {open
+        ? node.children.map((child) => (
+            <FolderRow
+              key={child.id}
+              node={child}
+              depth={depth + 1}
+              selectedFolderId={selectedFolderId}
+              onSelect={onSelect}
+            />
+          ))
+        : null}
+    </>
+  );
+}