mlogclub
766 lines
24 KiB
TypeScript
766 lines
24 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
DndContext,
|
|
KeyboardSensor,
|
|
MouseSensor,
|
|
TouchSensor,
|
|
closestCenter,
|
|
useDroppable,
|
|
useSensor,
|
|
useSensors,
|
|
type DragEndEvent,
|
|
} from "@dnd-kit/core";
|
|
import {
|
|
SortableContext,
|
|
sortableKeyboardCoordinates,
|
|
useSortable,
|
|
verticalListSortingStrategy,
|
|
} from "@dnd-kit/sortable";
|
|
import { CSS } from "@dnd-kit/utilities";
|
|
import {
|
|
ChevronDownIcon,
|
|
ChevronRightIcon,
|
|
FolderIcon,
|
|
FolderPlusIcon,
|
|
LayersIcon,
|
|
MoreHorizontalIcon,
|
|
PencilIcon,
|
|
PlusIcon,
|
|
Trash2Icon,
|
|
} from "lucide-react";
|
|
import type { CSSProperties, ReactNode } from "react";
|
|
import { useCallback, useEffect, useMemo, useRef, useState, type PointerEvent } from "react";
|
|
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,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Field, FieldContent, FieldLabel } from "@/components/ui/field";
|
|
import { Input } from "@/components/ui/input";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import {
|
|
createKnowledgeDirectory,
|
|
deleteKnowledgeDirectory,
|
|
fetchKnowledgeDirectories,
|
|
updateKnowledgeDirectory,
|
|
updateKnowledgeDirectorySort,
|
|
type KnowledgeDirectory,
|
|
} from "@/lib/api/admin";
|
|
import { useI18n } from "@/i18n/provider";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
findDirectoryParentId,
|
|
moveDirectoryToParent,
|
|
moveDirectoryWithinParent,
|
|
} from "./knowledge-directory-sort";
|
|
|
|
type KnowledgeDirectoryPanelProps = {
|
|
knowledgeBaseId: number;
|
|
selectedDirectoryId: number | null;
|
|
onSelectDirectory: (directoryId: number | null) => void;
|
|
onChanged?: () => void;
|
|
};
|
|
|
|
type DirectoryDialogState = {
|
|
open: boolean;
|
|
id: number | null;
|
|
parentId: number;
|
|
name: string;
|
|
remark: string;
|
|
};
|
|
|
|
type DirectoryOption = { value: string; label: string };
|
|
|
|
const DIRECTORY_PANEL_WIDTH_STORAGE_KEY = "knowledge-directory-panel-width";
|
|
const DIRECTORY_PANEL_MIN_WIDTH = 180;
|
|
const DIRECTORY_PANEL_MAX_WIDTH = 360;
|
|
const DIRECTORY_PANEL_DEFAULT_WIDTH = 224;
|
|
const ROOT_DIRECTORY_DROP_ID = "knowledge-directory-root";
|
|
|
|
function rootDirectoryOptions(items: KnowledgeDirectory[]): DirectoryOption[] {
|
|
return items.map((item) => ({ value: String(item.id), label: item.name }));
|
|
}
|
|
|
|
function collectExpandedIds(items: KnowledgeDirectory[]) {
|
|
const ids = new Set<number>();
|
|
const walk = (nodes: KnowledgeDirectory[]) => {
|
|
for (const node of nodes) {
|
|
ids.add(node.id);
|
|
walk(node.children || []);
|
|
}
|
|
};
|
|
walk(items);
|
|
return ids;
|
|
}
|
|
|
|
export function KnowledgeDirectoryPanel({
|
|
knowledgeBaseId,
|
|
selectedDirectoryId,
|
|
onSelectDirectory,
|
|
onChanged,
|
|
}: KnowledgeDirectoryPanelProps) {
|
|
const t = useI18n();
|
|
const directoryNameInputRef = useRef<HTMLInputElement>(null);
|
|
const directoryNameFocusTimerRef = useRef<number | null>(null);
|
|
const [panelWidth, setPanelWidth] = useState(() => {
|
|
if (typeof window === "undefined") {
|
|
return DIRECTORY_PANEL_DEFAULT_WIDTH;
|
|
}
|
|
const saved = Number(localStorage.getItem(DIRECTORY_PANEL_WIDTH_STORAGE_KEY));
|
|
if (!Number.isFinite(saved)) {
|
|
return DIRECTORY_PANEL_DEFAULT_WIDTH;
|
|
}
|
|
return Math.min(DIRECTORY_PANEL_MAX_WIDTH, Math.max(DIRECTORY_PANEL_MIN_WIDTH, saved));
|
|
});
|
|
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 [sorting, setSorting] = useState(false);
|
|
const [dialog, setDialog] = useState<DirectoryDialogState>({
|
|
open: false,
|
|
id: null,
|
|
parentId: 0,
|
|
name: "",
|
|
remark: "",
|
|
});
|
|
const parentOptions = useMemo(
|
|
() => [
|
|
{ value: "0", label: t("knowledge.rootDirectory") },
|
|
...rootDirectoryOptions(directories).filter((item) => item.value !== String(dialog.id ?? "")),
|
|
],
|
|
[directories, dialog.id, t],
|
|
);
|
|
const sensors = useSensors(
|
|
useSensor(MouseSensor, {
|
|
activationConstraint: { distance: 8 },
|
|
}),
|
|
useSensor(TouchSensor, {
|
|
activationConstraint: { delay: 150, tolerance: 8 },
|
|
}),
|
|
useSensor(KeyboardSensor, {
|
|
coordinateGetter: sortableKeyboardCoordinates,
|
|
}),
|
|
);
|
|
|
|
const loadDirectories = useCallback(async () => {
|
|
setLoading(true);
|
|
try {
|
|
const data = await fetchKnowledgeDirectories(knowledgeBaseId);
|
|
setDirectories(data);
|
|
setExpandedIds(collectExpandedIds(data));
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : t("knowledge.loadDirectoriesFailed"));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [knowledgeBaseId, t]);
|
|
|
|
useEffect(() => {
|
|
void loadDirectories();
|
|
}, [loadDirectories]);
|
|
|
|
useEffect(() => {
|
|
localStorage.setItem(DIRECTORY_PANEL_WIDTH_STORAGE_KEY, String(panelWidth));
|
|
}, [panelWidth]);
|
|
|
|
useEffect(() => {
|
|
if (!dialog.open) {
|
|
return;
|
|
}
|
|
const frame = requestAnimationFrame(() => {
|
|
directoryNameFocusTimerRef.current = window.setTimeout(() => {
|
|
const input =
|
|
directoryNameInputRef.current ??
|
|
document.querySelector<HTMLInputElement>("[data-knowledge-directory-name-input='true']");
|
|
input?.focus({ preventScroll: true });
|
|
input?.select();
|
|
}, 80);
|
|
});
|
|
return () => {
|
|
cancelAnimationFrame(frame);
|
|
if (directoryNameFocusTimerRef.current !== null) {
|
|
window.clearTimeout(directoryNameFocusTimerRef.current);
|
|
directoryNameFocusTimerRef.current = null;
|
|
}
|
|
};
|
|
}, [dialog.open]);
|
|
|
|
function handleResizePointerDown(event: PointerEvent<HTMLDivElement>) {
|
|
event.preventDefault();
|
|
const startX = event.clientX;
|
|
const startWidth = panelWidth;
|
|
|
|
function handlePointerMove(moveEvent: globalThis.PointerEvent) {
|
|
const nextWidth = startWidth + moveEvent.clientX - startX;
|
|
setPanelWidth(
|
|
Math.min(DIRECTORY_PANEL_MAX_WIDTH, Math.max(DIRECTORY_PANEL_MIN_WIDTH, nextWidth)),
|
|
);
|
|
}
|
|
|
|
function handlePointerUp() {
|
|
window.removeEventListener("pointermove", handlePointerMove);
|
|
window.removeEventListener("pointerup", handlePointerUp);
|
|
document.body.style.cursor = "";
|
|
document.body.style.userSelect = "";
|
|
}
|
|
|
|
document.body.style.cursor = "col-resize";
|
|
document.body.style.userSelect = "none";
|
|
window.addEventListener("pointermove", handlePointerMove);
|
|
window.addEventListener("pointerup", handlePointerUp);
|
|
}
|
|
|
|
function toggleDirectory(id: number) {
|
|
setExpandedIds((current) => {
|
|
const next = new Set(current);
|
|
if (next.has(id)) {
|
|
next.delete(id);
|
|
} else {
|
|
next.add(id);
|
|
}
|
|
return next;
|
|
});
|
|
}
|
|
|
|
function openCreate(parentId = 0) {
|
|
setDialog({ open: true, id: null, parentId, name: "", remark: "" });
|
|
}
|
|
|
|
function openEdit(item: KnowledgeDirectory) {
|
|
setDialog({
|
|
open: true,
|
|
id: item.id,
|
|
parentId: item.parentId,
|
|
name: item.name,
|
|
remark: item.remark || "",
|
|
});
|
|
}
|
|
|
|
async function handleSubmit() {
|
|
const name = dialog.name.trim();
|
|
if (!name) {
|
|
toast.error(t("knowledge.directoryNameRequired"));
|
|
return;
|
|
}
|
|
setSaving(true);
|
|
try {
|
|
if (dialog.id) {
|
|
await updateKnowledgeDirectory({
|
|
id: dialog.id,
|
|
knowledgeBaseId,
|
|
parentId: dialog.parentId,
|
|
name,
|
|
remark: dialog.remark.trim(),
|
|
});
|
|
toast.success(t("knowledge.directoryUpdated", { name }));
|
|
} else {
|
|
await createKnowledgeDirectory({
|
|
knowledgeBaseId,
|
|
parentId: dialog.parentId,
|
|
name,
|
|
remark: dialog.remark.trim(),
|
|
});
|
|
toast.success(t("knowledge.directoryCreated", { name }));
|
|
}
|
|
setDialog((current) => ({ ...current, open: false }));
|
|
await loadDirectories();
|
|
onChanged?.();
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : t("knowledge.directorySaveFailed"));
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
async function handleDelete(item: KnowledgeDirectory) {
|
|
setSaving(true);
|
|
try {
|
|
await deleteKnowledgeDirectory(item.id);
|
|
if (selectedDirectoryId === item.id) {
|
|
onSelectDirectory(null);
|
|
}
|
|
toast.success(t("knowledge.directoryDeleted", { name: item.name }));
|
|
await loadDirectories();
|
|
onChanged?.();
|
|
} catch (error) {
|
|
toast.error(error instanceof Error ? error.message : t("knowledge.directoryDeleteFailed"));
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}
|
|
|
|
async function handleDirectoryDragEnd(event: DragEndEvent) {
|
|
const { active, over } = event;
|
|
if (!over || active.id === over.id || sorting) {
|
|
return;
|
|
}
|
|
const activeId = Number(active.id);
|
|
if (!Number.isFinite(activeId)) {
|
|
return;
|
|
}
|
|
if (over.id === ROOT_DIRECTORY_DROP_ID) {
|
|
await handleDirectoryMoveToParent(activeId, 0);
|
|
return;
|
|
}
|
|
const overId = Number(over.id);
|
|
if (!Number.isFinite(overId)) {
|
|
return;
|
|
}
|
|
|
|
const activeParentId = findDirectoryParentId(directories, activeId);
|
|
const overParentId = findDirectoryParentId(directories, overId);
|
|
if (activeParentId === null || overParentId === null) {
|
|
return;
|
|
}
|
|
if (activeParentId !== overParentId) {
|
|
await handleDirectoryMoveToParent(activeId, overId);
|
|
return;
|
|
}
|
|
if (activeParentId === 0 && overParentId === 0 && event.delta.x > 24) {
|
|
await handleDirectoryMoveToParent(activeId, overId);
|
|
return;
|
|
}
|
|
|
|
const previousDirectories = directories;
|
|
const moved = moveDirectoryWithinParent(previousDirectories, activeParentId, activeId, overId);
|
|
if (!moved.changed) {
|
|
return;
|
|
}
|
|
|
|
setDirectories(moved.items);
|
|
setSorting(true);
|
|
try {
|
|
await updateKnowledgeDirectorySort({
|
|
knowledgeBaseId,
|
|
parentId: moved.parentId,
|
|
ids: moved.orderedIds,
|
|
});
|
|
toast.success(t("knowledge.directorySortUpdated"));
|
|
await loadDirectories();
|
|
onChanged?.();
|
|
} catch (error) {
|
|
setDirectories(previousDirectories);
|
|
toast.error(error instanceof Error ? error.message : t("knowledge.directorySortUpdateFailed"));
|
|
} finally {
|
|
setSorting(false);
|
|
}
|
|
}
|
|
|
|
async function handleDirectoryMoveToParent(activeId: number, targetParentId: number) {
|
|
const previousDirectories = directories;
|
|
const moved = moveDirectoryToParent(previousDirectories, activeId, targetParentId);
|
|
if (!moved.changed || !moved.item) {
|
|
return;
|
|
}
|
|
|
|
setDirectories(moved.items);
|
|
if (moved.parentId > 0) {
|
|
setExpandedIds((current) => new Set(current).add(moved.parentId));
|
|
}
|
|
setSorting(true);
|
|
try {
|
|
await updateKnowledgeDirectory({
|
|
id: moved.item.id,
|
|
knowledgeBaseId,
|
|
parentId: moved.parentId,
|
|
name: moved.item.name,
|
|
remark: moved.item.remark || "",
|
|
});
|
|
await updateKnowledgeDirectorySort({
|
|
knowledgeBaseId,
|
|
parentId: moved.parentId,
|
|
ids: moved.orderedIds,
|
|
});
|
|
toast.success(t("knowledge.directoryMoved"));
|
|
await loadDirectories();
|
|
onChanged?.();
|
|
} catch (error) {
|
|
setDirectories(previousDirectories);
|
|
toast.error(error instanceof Error ? error.message : t("knowledge.directoryMoveFailed"));
|
|
} finally {
|
|
setSorting(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className="relative flex h-full min-h-0 shrink-0 flex-col border-r bg-muted/20"
|
|
style={{ width: panelWidth }}
|
|
>
|
|
<div className="flex h-[49px] items-center justify-between border-b bg-background px-3">
|
|
<div className="text-sm font-medium">{t("knowledge.directory")}</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-7"
|
|
disabled={loading || saving}
|
|
onClick={() => openCreate(0)}
|
|
aria-label={t("knowledge.createDirectory")}
|
|
>
|
|
<FolderPlusIcon className="size-4" />
|
|
</Button>
|
|
</div>
|
|
<ScrollArea className="min-h-0 flex-1 overflow-hidden">
|
|
<div className="py-1">
|
|
<DirectoryStaticRow
|
|
icon={<LayersIcon className="size-4 text-muted-foreground" />}
|
|
label={t("knowledge.allContent")}
|
|
selected={selectedDirectoryId === null}
|
|
onClick={() => onSelectDirectory(null)}
|
|
/>
|
|
<DndContext
|
|
sensors={sensors}
|
|
collisionDetection={closestCenter}
|
|
onDragEnd={(event) => void handleDirectoryDragEnd(event)}
|
|
>
|
|
<RootDirectoryRow
|
|
selected={selectedDirectoryId === 0}
|
|
onClick={() => onSelectDirectory(0)}
|
|
t={t}
|
|
/>
|
|
<SortableContext
|
|
items={directories.map((item) => item.id)}
|
|
strategy={verticalListSortingStrategy}
|
|
>
|
|
{directories.map((item) => (
|
|
<DirectoryNode
|
|
key={item.id}
|
|
item={item}
|
|
depth={0}
|
|
expandedIds={expandedIds}
|
|
selectedDirectoryId={selectedDirectoryId}
|
|
contextMenuDirectoryId={contextMenuDirectoryId}
|
|
saving={saving || sorting}
|
|
onToggle={toggleDirectory}
|
|
onSelect={onSelectDirectory}
|
|
onContextMenuOpenChange={(directoryId, open) =>
|
|
setContextMenuDirectoryId(open ? directoryId : null)
|
|
}
|
|
onCreate={openCreate}
|
|
onEdit={openEdit}
|
|
onDelete={(directory) => void handleDelete(directory)}
|
|
t={t}
|
|
/>
|
|
))}
|
|
</SortableContext>
|
|
</DndContext>
|
|
</div>
|
|
</ScrollArea>
|
|
<div
|
|
className="absolute top-0 right-[-3px] z-10 h-full w-1.5 cursor-col-resize transition-colors hover:bg-primary/30"
|
|
onPointerDown={handleResizePointerDown}
|
|
role="separator"
|
|
aria-orientation="vertical"
|
|
aria-label={t("knowledge.resizeDirectoryPanel")}
|
|
/>
|
|
</div>
|
|
<ProjectDialog
|
|
open={dialog.open}
|
|
onOpenChange={(open) => setDialog((current) => ({ ...current, open }))}
|
|
title={dialog.id ? t("knowledge.editDirectory") : t("knowledge.createDirectory")}
|
|
size="sm"
|
|
footer={
|
|
<>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={() => setDialog((current) => ({ ...current, open: false }))}
|
|
disabled={saving}
|
|
>
|
|
{t("knowledge.cancel")}
|
|
</Button>
|
|
<Button type="button" onClick={() => void handleSubmit()} disabled={saving}>
|
|
{saving ? t("knowledge.saving") : t("knowledge.save")}
|
|
</Button>
|
|
</>
|
|
}
|
|
>
|
|
<div className="space-y-4">
|
|
<Field>
|
|
<FieldLabel>{t("knowledge.parentDirectory")}</FieldLabel>
|
|
<FieldContent>
|
|
<OptionCombobox
|
|
value={String(dialog.parentId)}
|
|
onChange={(value) =>
|
|
setDialog((current) => ({ ...current, parentId: Number(value ?? 0) }))
|
|
}
|
|
options={parentOptions}
|
|
placeholder={t("knowledge.selectDirectory")}
|
|
searchPlaceholder={t("knowledge.searchDirectory")}
|
|
emptyText={t("knowledge.emptyDirectory")}
|
|
/>
|
|
</FieldContent>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel>{t("knowledge.directoryName")}</FieldLabel>
|
|
<FieldContent>
|
|
<Input
|
|
ref={directoryNameInputRef}
|
|
autoFocus
|
|
data-knowledge-directory-name-input="true"
|
|
value={dialog.name}
|
|
onChange={(event) =>
|
|
setDialog((current) => ({ ...current, name: event.target.value }))
|
|
}
|
|
placeholder={t("knowledge.directoryNamePlaceholder")}
|
|
/>
|
|
</FieldContent>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel>{t("knowledge.remark")}</FieldLabel>
|
|
<FieldContent>
|
|
<Textarea
|
|
value={dialog.remark}
|
|
onChange={(event) =>
|
|
setDialog((current) => ({ ...current, remark: event.target.value }))
|
|
}
|
|
rows={3}
|
|
placeholder={t("knowledge.remarkPlaceholder")}
|
|
/>
|
|
</FieldContent>
|
|
</Field>
|
|
</div>
|
|
</ProjectDialog>
|
|
</>
|
|
);
|
|
}
|
|
|
|
type DirectoryStaticRowProps = {
|
|
icon: ReactNode;
|
|
label: string;
|
|
selected: boolean;
|
|
draggingOver?: boolean;
|
|
onClick: () => void;
|
|
};
|
|
|
|
function DirectoryStaticRow({ icon, label, selected, draggingOver, onClick }: DirectoryStaticRowProps) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
className={cn(
|
|
"flex w-full items-center gap-1 px-2 py-1.5 text-left text-sm hover:bg-accent",
|
|
selected && "bg-accent text-accent-foreground",
|
|
draggingOver && "bg-primary/10 text-accent-foreground",
|
|
)}
|
|
onClick={onClick}
|
|
>
|
|
<span className="size-5" />
|
|
{icon}
|
|
<span className="min-w-0 flex-1 truncate">{label}</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
type RootDirectoryRowProps = {
|
|
selected: boolean;
|
|
onClick: () => void;
|
|
t: TFunction;
|
|
};
|
|
|
|
function RootDirectoryRow({ selected, onClick, t }: RootDirectoryRowProps) {
|
|
const { isOver, setNodeRef } = useDroppable({
|
|
id: ROOT_DIRECTORY_DROP_ID,
|
|
});
|
|
|
|
return (
|
|
<div ref={setNodeRef}>
|
|
<DirectoryStaticRow
|
|
icon={<FolderIcon className="size-4 text-muted-foreground" />}
|
|
label={t("knowledge.rootContent")}
|
|
selected={selected}
|
|
draggingOver={isOver}
|
|
onClick={onClick}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
type DirectoryNodeProps = {
|
|
item: KnowledgeDirectory;
|
|
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;
|
|
t: TFunction;
|
|
};
|
|
|
|
type TFunction = (key: string, values?: Record<string, string | number>) => string;
|
|
|
|
function DirectoryNode({
|
|
item,
|
|
depth,
|
|
expandedIds,
|
|
selectedDirectoryId,
|
|
contextMenuDirectoryId,
|
|
saving,
|
|
onToggle,
|
|
onSelect,
|
|
onContextMenuOpenChange,
|
|
onCreate,
|
|
onEdit,
|
|
onDelete,
|
|
t,
|
|
}: DirectoryNodeProps) {
|
|
const {
|
|
attributes,
|
|
listeners,
|
|
setNodeRef,
|
|
transform,
|
|
transition,
|
|
isDragging,
|
|
} = useSortable({
|
|
id: item.id,
|
|
disabled: saving,
|
|
});
|
|
const expanded = expandedIds.has(item.id);
|
|
const hasChildren = (item.children || []).length > 0;
|
|
const active = selectedDirectoryId === item.id || contextMenuDirectoryId === item.id;
|
|
const style: CSSProperties = {
|
|
transform: CSS.Transform.toString(transform),
|
|
transition,
|
|
};
|
|
|
|
return (
|
|
<div ref={setNodeRef} style={style}>
|
|
<ContextMenu onOpenChange={(open) => onContextMenuOpenChange(item.id, open)}>
|
|
<ContextMenuTrigger className="block">
|
|
<div
|
|
className={cn(
|
|
"group flex cursor-pointer items-center gap-1 px-2 py-1.5 text-sm hover:bg-accent",
|
|
active && "bg-accent text-accent-foreground",
|
|
isDragging && "bg-muted/60 shadow-sm opacity-80",
|
|
)}
|
|
style={{ paddingLeft: 8 + depth * 16 }}
|
|
onClick={() => onSelect(item.id)}
|
|
{...attributes}
|
|
{...listeners}
|
|
>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-5 shrink-0"
|
|
disabled={!hasChildren}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
onToggle(item.id);
|
|
}}
|
|
aria-label={expanded ? t("knowledge.collapseDirectory") : t("knowledge.expandDirectory")}
|
|
>
|
|
{expanded ? <ChevronDownIcon className="size-3.5" /> : <ChevronRightIcon className="size-3.5" />}
|
|
</Button>
|
|
<FolderIcon className="size-4 shrink-0 text-muted-foreground" />
|
|
<span className="min-w-0 flex-1 truncate text-left">
|
|
{item.name}
|
|
</span>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger
|
|
onClick={(event) => event.stopPropagation()}
|
|
render={
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="size-6 opacity-0 group-hover:opacity-100"
|
|
disabled={saving}
|
|
/>
|
|
}
|
|
aria-label={t("knowledge.moreActions", { name: item.name })}
|
|
>
|
|
<MoreHorizontalIcon className="size-3.5" />
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end" className="w-40 min-w-40">
|
|
{item.parentId === 0 ? (
|
|
<DropdownMenuItem onClick={() => onCreate(item.id)}>
|
|
<PlusIcon className="mr-2 size-3.5" />
|
|
{t("knowledge.createSubDirectory")}
|
|
</DropdownMenuItem>
|
|
) : null}
|
|
<DropdownMenuItem onClick={() => onEdit(item)}>
|
|
<PencilIcon className="mr-2 size-3.5" />
|
|
{t("knowledge.edit")}
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() => onDelete(item)}
|
|
className="text-destructive focus:text-destructive"
|
|
>
|
|
<Trash2Icon className="mr-2 size-3.5" />
|
|
{t("knowledge.delete")}
|
|
</DropdownMenuItem>
|
|
</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
|
|
? (
|
|
<SortableContext
|
|
items={(item.children || []).map((child) => child.id)}
|
|
strategy={verticalListSortingStrategy}
|
|
>
|
|
{(item.children || []).map((child) => (
|
|
<DirectoryNode
|
|
key={child.id}
|
|
item={child}
|
|
depth={depth + 1}
|
|
expandedIds={expandedIds}
|
|
selectedDirectoryId={selectedDirectoryId}
|
|
contextMenuDirectoryId={contextMenuDirectoryId}
|
|
saving={saving}
|
|
onToggle={onToggle}
|
|
onSelect={onSelect}
|
|
onContextMenuOpenChange={onContextMenuOpenChange}
|
|
onCreate={onCreate}
|
|
onEdit={onEdit}
|
|
onDelete={onDelete}
|
|
t={t}
|
|
/>
|
|
))}
|
|
</SortableContext>
|
|
)
|
|
: null}
|
|
</div>
|
|
);
|
|
}
|