feat: add context menu functionality to DirectoryNode for enhanced user interaction

web/app/dashboard/knowledge/_components/knowledge-directory-panel.tsx

@@ -18,6 +18,12 @@ import { toast } from "sonner";
 import { OptionCombobox } from "@/components/option-combobox";
 import { ProjectDialog } from "@/components/project-dialog";
 import { Button } from "@/components/ui/button";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -80,6 +86,7 @@ export function KnowledgeDirectoryPanel({
   const t = useI18n();
   const [directories, setDirectories] = useState<KnowledgeDirectory[]>([]);
   const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set());
+  const [contextMenuDirectoryId, setContextMenuDirectoryId] = useState<number | null>(null);
   const [loading, setLoading] = useState(false);
   const [saving, setSaving] = useState(false);
   const [dialog, setDialog] = useState<DirectoryDialogState>({
@@ -230,9 +237,13 @@ export function KnowledgeDirectoryPanel({
                 depth={0}
                 expandedIds={expandedIds}
                 selectedDirectoryId={selectedDirectoryId}
+                contextMenuDirectoryId={contextMenuDirectoryId}
                 saving={saving}
                 onToggle={toggleDirectory}
                 onSelect={onSelectDirectory}
+                onContextMenuOpenChange={(directoryId, open) =>
+                  setContextMenuDirectoryId(open ? directoryId : null)
+                }
                 onCreate={openCreate}
                 onEdit={openEdit}
                 onDelete={(directory) => void handleDelete(directory)}
@@ -339,9 +350,11 @@ type DirectoryNodeProps = {
   depth: number;
   expandedIds: Set<number>;
   selectedDirectoryId: number | null;
+  contextMenuDirectoryId: number | null;
   saving: boolean;
   onToggle: (id: number) => void;
   onSelect: (id: number) => void;
+  onContextMenuOpenChange: (id: number, open: boolean) => void;
   onCreate: (parentId: number) => void;
   onEdit: (item: KnowledgeDirectory) => void;
   onDelete: (item: KnowledgeDirectory) => void;
@@ -355,9 +368,11 @@ function DirectoryNode({
   depth,
   expandedIds,
   selectedDirectoryId,
+  contextMenuDirectoryId,
   saving,
   onToggle,
   onSelect,
+  onContextMenuOpenChange,
   onCreate,
   onEdit,
   onDelete,
@@ -365,13 +380,16 @@ function DirectoryNode({
 }: DirectoryNodeProps) {
   const expanded = expandedIds.has(item.id);
   const hasChildren = (item.children || []).length > 0;
+  const active = selectedDirectoryId === item.id || contextMenuDirectoryId === item.id;
 
   return (
     <div>
+      <ContextMenu onOpenChange={(open) => onContextMenuOpenChange(item.id, open)}>
+        <ContextMenuTrigger className="block">
           <div
             className={cn(
               "group flex items-center gap-1 px-2 py-1.5 text-sm hover:bg-accent",
-          selectedDirectoryId === item.id && "bg-accent text-accent-foreground",
+              active && "bg-accent text-accent-foreground",
             )}
             style={{ paddingLeft: 8 + depth * 16 }}
           >
@@ -428,6 +446,27 @@ function DirectoryNode({
               </DropdownMenuContent>
             </DropdownMenu>
           </div>
+        </ContextMenuTrigger>
+        <ContextMenuContent className="w-40">
+          {item.parentId === 0 ? (
+            <ContextMenuItem onClick={() => onCreate(item.id)}>
+              <PlusIcon className="mr-2 size-3.5" />
+              {t("knowledge.createSubDirectory")}
+            </ContextMenuItem>
+          ) : null}
+          <ContextMenuItem onClick={() => onEdit(item)}>
+            <PencilIcon className="mr-2 size-3.5" />
+            {t("knowledge.edit")}
+          </ContextMenuItem>
+          <ContextMenuItem
+            onClick={() => onDelete(item)}
+            variant="destructive"
+          >
+            <Trash2Icon className="mr-2 size-3.5" />
+            {t("knowledge.delete")}
+          </ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>
       {expanded
         ? (item.children || []).map((child) => (
             <DirectoryNode
@@ -436,9 +475,11 @@ function DirectoryNode({
               depth={depth + 1}
               expandedIds={expandedIds}
               selectedDirectoryId={selectedDirectoryId}
+              contextMenuDirectoryId={contextMenuDirectoryId}
               saving={saving}
               onToggle={onToggle}
               onSelect={onSelect}
+              onContextMenuOpenChange={onContextMenuOpenChange}
               onCreate={onCreate}
               onEdit={onEdit}
               onDelete={onDelete}