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,41 +100,62 @@ export function FolderActionsMenu({ selectedFolderId, onAfterDelete }: FolderAct
             New folder {isFolderSelected ? 'inside this' : 'at root'}
           </DropdownMenuItem>
           {isFolderSelected ? (
-            <>
+            <TooltipProvider>
-              <DropdownMenuItem
+              <Tooltip>
-                onClick={() => {
+                <TooltipTrigger asChild>
-                  setName(currentName);
+                  <span>
-                  setRenameOpen(true);
+                    <DropdownMenuItem
-                }}
+                      disabled={isSystem}
-              >
+                      onClick={() => {
-                <Pencil className="mr-2 h-4 w-4" />
+                        if (isSystem) return;
-                Rename
+                        setName(currentName);
-              </DropdownMenuItem>
+                        setRenameOpen(true);
-              <ConfirmationDialog
+                      }}
-                trigger={
+                    >
-                  <DropdownMenuItem
+                      <Pencil className="mr-2 h-4 w-4" />
-                    onSelect={(e) => e.preventDefault()}
+                      Rename
-                    className="text-destructive"
+                    </DropdownMenuItem>
-                  >
+                  </span>
-                    <Trash2 className="mr-2 h-4 w-4" />
+                </TooltipTrigger>
-                    Delete
+                {isSystem ? (
-                  </DropdownMenuItem>
+                  <TooltipContent>System folders can&apos;t be renamed.</TooltipContent>
-                }
+                ) : null}
-                title="Delete folder?"
+              </Tooltip>
-                description="Subfolders and documents inside will move up to the parent. The folder itself is removed."
+              <Tooltip>
-                confirmLabel="Delete folder"
+                <TooltipTrigger asChild>
-                loading={deleteMutation.isPending}
+                  <span>
-                onConfirm={async () => {
+                    <ConfirmationDialog
-                  try {
+                      trigger={
-                    await deleteMutation.mutateAsync(selectedFolderId as string);
+                        <DropdownMenuItem
-                    toast.success('Folder deleted; contents moved to parent.');
+                          disabled={isSystem}
-                    onAfterDelete?.();
+                          onSelect={(e) => e.preventDefault()}
-                  } catch (err) {
+                          className="text-destructive"
-                    toastError(err);
+                        >
-                  }
+                          <Trash2 className="mr-2 h-4 w-4" />
-                }}
+                          Delete
-              />
+                        </DropdownMenuItem>
-            </>
+                      }
+                      title="Delete folder?"
+                      description="Subfolders and documents inside will move up to the parent. The folder itself is removed."
+                      confirmLabel="Delete folder"
+                      loading={deleteMutation.isPending}
+                      onConfirm={async () => {
+                        try {
+                          await deleteMutation.mutateAsync(selectedFolderId as string);
+                          toast.success('Folder deleted; contents moved to parent.');
+                          onAfterDelete?.();
+                        } catch (err) {
+                          toastError(err);
+                        }
+                      }}
+                    />
+                  </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