feat(documents): folder tree + actions UI for system-managed folders

FolderTreeSidebar shows a lock marker on system_managed rows and renders
archived entity folders muted. FolderActionsMenu disables Rename /
Move / Delete with a tooltip explanation when a system folder is
selected; the server-side guard (Task 4) is the authoritative
rejection — the UI is the friendly first line.

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

src/components/documents/folder-actions-menu.tsx

@@ -21,14 +21,30 @@ import {
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { ConfirmationDialog } from '@/components/shared/confirmation-dialog';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { toastError } from '@/lib/api/toast-error';
 import {
   useCreateFolder,
   useDeleteFolder,
   useRenameFolder,
   useDocumentFolders,
+  type FolderNode,
 } from '@/hooks/use-document-folders';
 
+function findInTree(nodes: FolderNode[], id: string): FolderNode | null {
+  for (const node of nodes) {
+    if (node.id === id) return node;
+    const found = findInTree(node.children, id);
+    if (found) return found;
+  }
+  return null;
+}
+
 interface FolderActionsMenuProps {
   /** The folder these actions apply to. `null` means root → only the
    *  Create-new-folder action is available. */
@@ -61,6 +77,9 @@ export function FolderActionsMenu({ selectedFolderId, onAfterDelete }: FolderAct
     return find(tree) ?? '';
   })();
 
+  const selectedNode = isFolderSelected ? findInTree(tree, selectedFolderId as string) : null;
+  const isSystem = selectedNode?.systemManaged ?? false;
+
   return (
     <>
       <DropdownMenu>
@@ -81,9 +100,14 @@ export function FolderActionsMenu({ selectedFolderId, onAfterDelete }: FolderAct
             New folder {isFolderSelected ? 'inside this' : 'at root'}
           </DropdownMenuItem>
           {isFolderSelected ? (
-            <>
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span>
                     <DropdownMenuItem
+                      disabled={isSystem}
                       onClick={() => {
+                        if (isSystem) return;
                         setName(currentName);
                         setRenameOpen(true);
                       }}
@@ -91,9 +115,19 @@ export function FolderActionsMenu({ selectedFolderId, onAfterDelete }: FolderAct
                       <Pencil className="mr-2 h-4 w-4" />
                       Rename
                     </DropdownMenuItem>
+                  </span>
+                </TooltipTrigger>
+                {isSystem ? (
+                  <TooltipContent>System folders can&apos;t be renamed.</TooltipContent>
+                ) : null}
+              </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span>
                     <ConfirmationDialog
                       trigger={
                         <DropdownMenuItem
+                          disabled={isSystem}
                           onSelect={(e) => e.preventDefault()}
                           className="text-destructive"
                         >
@@ -115,7 +149,13 @@ export function FolderActionsMenu({ selectedFolderId, onAfterDelete }: FolderAct
                         }
                       }}
                     />
-            </>
+                  </span>
+                </TooltipTrigger>
+                {isSystem ? (
+                  <TooltipContent>System folders can&apos;t be deleted.</TooltipContent>
+                ) : null}
+              </Tooltip>
+            </TooltipProvider>
           ) : null}
         </DropdownMenuContent>
       </DropdownMenu>

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { ChevronRight, Folder, FolderOpen, Inbox } from 'lucide-react';
+import { ChevronRight, Folder, FolderOpen, Inbox, Lock } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
@@ -135,7 +135,10 @@ function FolderRow({
         <button
           type="button"
           onClick={() => onSelect(node.id)}
-          className="flex flex-1 items-center gap-1.5 truncate text-left"
+          className={cn(
+            'flex flex-1 items-center gap-1.5 truncate text-left',
+            node.archivedAt != null && 'text-muted-foreground',
+          )}
         >
           {open && hasChildren ? (
             <FolderOpen className="h-4 w-4 shrink-0" />
@@ -143,6 +146,9 @@ function FolderRow({
             <Folder className="h-4 w-4 shrink-0" />
           )}
           <span className="truncate">{node.name}</span>
+          {node.systemManaged ? (
+            <Lock className="ml-1 h-3 w-3 shrink-0 text-muted-foreground" aria-label="System folder" />
+          ) : null}
         </button>
       </div>
       {open