@allbluecn/web-app 0.10.3 → 0.11.1

package/src/components/workspace/kb/workspace-kb-card.tsx

@@ -0,0 +1,594 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import * as React from "react";
+import { Link, useRouter } from "@tanstack/react-router";
+import { useServerFn } from "@tanstack/react-start";
+import { toast } from "sonner";
+import {
+  BookOpenText, CornerUpRight, FileSymlink, GripVertical, LayoutGrid, Link as LinkIcon, Link2, Pencil, Plus, SquareArrowOutUpRight, Trash2, Unlink,
+} from "lucide-react";
+import { DragDropProvider, useDroppable, type DragEndEvent, type DragMoveEvent } from "@dnd-kit/react";
+import { useSortable } from "@dnd-kit/react/sortable";
+import { Feedback } from "@dnd-kit/dom";
+import { OptimisticSortingPlugin } from "@dnd-kit/dom/sortable";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import {
+  AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent,
+  AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import {
+  Tooltip, TooltipContent, TooltipTrigger,
+} from "@/components/ui/tooltip";
+import {
+  setWorkspaceKbsFn,
+  renameQuickDocFn,
+  removeQuickDocFn,
+  reorderQuickDocsFn,
+} from "@/server/serverFns/workspace-kb";
+import {
+  generalDocHref,
+  LABEL_COLORS,
+  QUICK_DOC_COLUMNS,
+  type KbBrief, type QuickDocRow, type WorkspaceKbCardData,
+} from "@/server/serverFns/workspace-kb-utils";
+import { WorkspaceKbManageDialog } from "./workspace-kb-manage-dialog";
+import { WorkspaceQuickDocDialog } from "./workspace-quick-doc-dialog";
+import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name";
+import { m } from "@/paraglide/messages.js";
+import { t } from "@/lib/i18n/resolver";
+
+interface DropPreview {
+  colIdx: number;
+  insertAt: number;
+}
+
+/** 计算指针在某列内的插入位置（与各行中点比较） */
+function computeInsertIndex(colEl: HTMLElement, clientY: number): number {
+  const rows = Array.from(colEl.querySelectorAll<HTMLElement>("[data-quick-doc-row]"));
+  for (let i = 0; i < rows.length; i++) {
+    const rect = rows[i].getBoundingClientRect();
+    if (clientY < rect.top + rect.height / 2) return i;
+  }
+  return rows.length;
+}
+
+/** 拖动中的插入位置指示线 */
+function DropIndicator() {
+  return <div className="h-0.5 shrink-0 rounded-full bg-primary" data-drop-indicator />;
+}
+
+
+interface QuickDocRowItemProps {
+  row: QuickDocRow;
+  index: number;
+  onRename: (id: string, title: string) => void;
+  onDelete: (row: QuickDocRow) => void;
+}
+
+/** 行链接目标（行内 Link 与「新标签打开」按钮共用）；stale 行返回 null */
+function docLinkTarget(row: QuickDocRow): { to: string; params: Record<string, string> } | null {
+  if (row.source === "doc" && row.kbId && row.docId) {
+    return { to: "/knowledge/$kbId/doc/$docId", params: { kbId: row.kbId, docId: row.docId } };
+  }
+  if (row.source === "general" && row.group && row.externalId) {
+    return { to: generalDocHref(row.group, row.externalId), params: {} };
+  }
+  return null;
+}
+
+/** 判断行是否有外部直接跳转 URL（非内部路由） */
+function hasExternalUrl(row: QuickDocRow): boolean {
+  return row.source === "general" && !!row.url;
+}
+
+function QuickDocIcon({ row }: { row: QuickDocRow }) {
+  if (row.icon) {
+    return <LucideIconByName name={row.icon} size={14} className="shrink-0 text-muted-foreground" />;
+  }
+  if (row.faviconUrl) {
+    return (
+      <img
+        src={row.faviconUrl}
+        alt=""
+        className="size-3.5 shrink-0 rounded-sm"
+        onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = "none"; }}
+      />
+    );
+  }
+  if (row.source === "general" && row.group === "bookmark") {
+    return <LinkIcon className="size-3.5 shrink-0 text-muted-foreground" />;
+  }
+  return <BookOpenText className="size-3.5 shrink-0 text-muted-foreground" />;
+}
+
+const QuickDocRowItem = React.memo(function QuickDocRowItem({ row, index, onRename, onDelete }: QuickDocRowItemProps) {
+  const { handleRef, ref, isDragging } = useSortable({
+    id: row.id,
+    index,
+    group: "workspace-kb-card",
+    // move 模式：拖拽中仅对原元素做 transform，禁止 dnd-kit 插入 placeholder/移动
+    // React 管理的 DOM 节点（否则 React commit 时 removeChild 崩溃，拖入空列必现）
+    plugins: (defaults) => [
+      // 禁用乐观排序插件：它会在拖动中用 insertAdjacentElement 直接移动
+      // React 管理的行节点（与 React commit 竞争导致 removeChild 崩溃），
+      // 排序完全由 onDragEnd 的 setState 驱动（受控模式）
+      ...defaults.filter((plugin) => plugin !== OptimisticSortingPlugin),
+      // move 模式不插入 placeholder；禁用 drop 动画避免松手时视觉跳动
+      Feedback.configure({ feedback: "move", dropAnimation: null }),
+    ],
+  });
+  const [editing, setEditing] = React.useState(false);
+  const [draft, setDraft] = React.useState(row.displayTitle);
+  // 编辑退出后的短暂窗口内拦截 click，防止 blur 提交编辑后事件落在 Link 上导致跳转
+  const skipClickRef = React.useRef(false);
+
+  const startEdit = (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDraft(row.displayTitle);
+    setEditing(true);
+  };
+
+  const commit = () => {
+    const next = draft.trim();
+    setEditing(false);
+    skipClickRef.current = true;
+    window.setTimeout(() => {
+      skipClickRef.current = false;
+    }, 200);
+    if (!next) return;
+    if (next !== row.displayTitle) {
+      onRename(row.id, next);
+    }
+  };
+
+  const titleBlock = editing ? (
+    <Input
+      autoFocus
+      value={draft}
+      onChange={(e) => setDraft(e.target.value)}
+      onBlur={commit}
+      onKeyDown={(e) => {
+        if (e.key === "Enter") commit();
+        if (e.key === "Escape") setEditing(false);
+      }}
+      onClick={(e) => e.stopPropagation()}
+      className="h-6 w-full text-sm"
+      aria-label={m.workspace_kb_renameAriaLabel()}
+    />
+  ) : (
+    <span className="min-w-0 truncate text-sm">{row.displayTitle}</span>
+  );
+
+  const linkTarget = docLinkTarget(row);
+  // 标签同色系更浅背景（color-mix 透明度混合，深浅色主题自适应）
+  const labelColor = row.label ? LABEL_COLORS[row.label] : null;
+
+  return (
+    <div
+      ref={ref}
+      data-quick-doc-row
+      onMouseDownCapture={(e) => {
+        // 编辑中点击行内任意位置：阻止焦点转移（Input 保持焦点，不触发 blur 提交与跳转）
+        if (editing && (e.target as HTMLElement).tagName !== "INPUT") {
+          e.preventDefault();
+        }
+      }}
+      onClickCapture={(e) => {
+        if (skipClickRef.current) {
+          e.stopPropagation();
+          e.preventDefault();
+        }
+      }}
+      style={labelColor ? { backgroundColor: `color-mix(in srgb, ${labelColor.backgroundColor} var(--kb-row-mix), transparent)` } : undefined}
+      className={`group/row flex items-center gap-1.5 rounded-md border px-2 py-2 transition-colors ${isDragging ? "border-primary/40 opacity-40" : `border-transparent hover:border-border ${labelColor ? "" : "bg-muted/40 hover:bg-muted/70"}`}`}
+    >
+      <button
+        ref={handleRef}
+        type="button"
+        className="cursor-grab shrink-0 text-muted-foreground/40 opacity-0 transition-opacity group-hover/row:opacity-100"
+        aria-label={m.workspace_kb_dragHandleAriaLabel()}
+      >
+        <GripVertical className="size-3.5" />
+      </button>
+      <QuickDocIcon row={row} />
+      {row.stale ? (
+        <div className="min-w-0 flex-1 truncate" aria-disabled>
+          {titleBlock}
+        </div>
+      ) : linkTarget ? (
+        // 编辑态不渲染 Link，避免 Input 在 Link 内部导致的点击跳转问题
+        // editing=false 时 Link 重新挂载，后续点击正常触发导航
+        editing ? (
+          <span className="min-w-0 flex-1 truncate text-sm">{titleBlock}</span>
+        ) : hasExternalUrl(row) ? (
+          // 有外部 URL：直接用 <a> 跳转，不走 SPA 路由
+          <a
+            href={row.url!}
+            target="_blank"
+            rel="noreferrer"
+            className="min-w-0 flex-1 truncate text-sm"
+          >
+            {titleBlock}
+          </a>
+        ) : (
+          <Link
+            to={linkTarget.to}
+            params={linkTarget.params}
+            className="min-w-0 flex-1 truncate text-sm"
+          >
+            {titleBlock}
+          </Link>
+        )
+      ) : (
+        <span className="min-w-0 flex-1 truncate text-sm">{titleBlock}</span>
+      )}
+      <div className={`flex shrink-0 items-center ${editing ? "" : "relative"}`}>
+        <div className={`flex items-center gap-1 ${editing ? "hidden" : "transition-opacity group-hover/row:opacity-0 group-hover/row:pointer-events-none"}`}>
+          {row.label && (
+            <Badge
+              variant="outline"
+              className="h-4 shrink-0 px-1 py-0 text-[10px] leading-none"
+              style={LABEL_COLORS[row.label]}
+            >
+              {t(`workspace_kb_label_${row.label}`)}
+            </Badge>
+          )}
+          {row.stale && (
+            <Badge variant="secondary" className="h-4 shrink-0 px-1 py-0 text-[10px] leading-none">
+              {m.workspace_kb_stale()}
+            </Badge>
+          )}
+        </div>
+        <div className={`items-center gap-0.5 pl-1 ${editing ? "flex" : "absolute inset-y-0 right-0 hidden opacity-0 transition-opacity group-hover/row:opacity-100 group-hover/row:pointer-events-auto group-hover/row:flex"}`}>
+          {linkTarget && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="ghost" size="sm" className="size-5 p-0" asChild>
+                  <Link to={linkTarget.to} params={linkTarget.params} target="_blank" rel="noreferrer">
+                    <SquareArrowOutUpRight className="size-3" />
+                  </Link>
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">{m.workspace_kb_openInNewTab()}</TooltipContent>
+            </Tooltip>
+          )}
+          <Button
+            variant="ghost"
+            size="sm"
+            className="size-5 p-0"
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={startEdit}
+            aria-label={m.workspace_kb_renameAriaLabel()}
+          >
+            <Pencil className="size-3" />
+          </Button>
+          <Button variant="ghost" size="sm" className="size-5 p-0 hover:text-destructive" onClick={() => onDelete(row)} aria-label={m.workspace_kb_deleteAriaLabel()}>
+            <Trash2 className="size-3" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+interface DroppableColumnProps {
+  colIdx: number;
+  children: React.ReactNode;
+  isDragging: boolean;
+}
+
+function DroppableColumn({ colIdx, children, isDragging }: DroppableColumnProps) {
+  const { ref, isDropTarget } = useDroppable({
+    id: `col-${colIdx}`,
+    data: { type: "quick-doc-column", colIdx },
+  });
+  
+  return (
+    <div
+      ref={ref}
+      className={`flex min-h-10 flex-col gap-1 rounded-md transition-colors ${isDropTarget ? "border border-dashed border-primary/50 bg-primary/10" : isDragging ? "border border-dashed border-primary/20 bg-primary/5" : "border border-transparent"}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface WorkspaceKbCardProps {
+  workspaceId: string;
+  data: WorkspaceKbCardData;
+}
+
+export function WorkspaceKbCard({ workspaceId, data }: WorkspaceKbCardProps) {
+  const router = useRouter();
+  const setKbs = useServerFn(setWorkspaceKbsFn);
+  const renameDoc = useServerFn(renameQuickDocFn);
+  const removeDoc = useServerFn(removeQuickDocFn);
+  const reorderDocs = useServerFn(reorderQuickDocsFn);
+
+  const [kbs, setLocalKbs] = React.useState<KbBrief[]>(data.kbs);
+  const [quickDocs, setLocalQuickDocs] = React.useState<QuickDocRow[]>(data.quickDocs);
+  const [manageOpen, setManageOpen] = React.useState(false);
+  const [addOpen, setAddOpen] = React.useState(false);
+  const [pendingDelete, setPendingDelete] = React.useState<QuickDocRow | null>(null);
+  const [isDragging, setIsDragging] = React.useState(false);
+
+  React.useEffect(() => setLocalKbs(data.kbs), [data.kbs]);
+  React.useEffect(() => setLocalQuickDocs(data.quickDocs), [data.quickDocs]);
+
+  const rollback = React.useCallback((err: unknown) => {
+    toast.error((err as Error)?.message || m.workspace_kb_opFailed());
+    void router.invalidate();
+  }, [router]);
+
+  const handleRename = React.useCallback((id: string, title: string) => {
+    setLocalQuickDocs((rows) => rows.map((r) => (r.id === id ? { ...r, displayTitle: title } : r)));
+    renameDoc({ data: { quickDocId: id, displayTitle: title } }).catch((err: unknown) => {
+      rollback(err);
+    });
+  }, [renameDoc, rollback]);
+
+  const handleDelete = React.useCallback((row: QuickDocRow) => {
+    const prev = quickDocs;
+    setPendingDelete(null);
+    setLocalQuickDocs((rows) => rows.filter((r) => r.id !== row.id));
+    removeDoc({ data: { quickDocId: row.id } }).catch((err: unknown) => {
+      setLocalQuickDocs(prev);
+      rollback(err);
+    });
+  }, [quickDocs, removeDoc, rollback]);
+
+  const handleDragStart = () => setIsDragging(true);
+  const gridRef = React.useRef<HTMLDivElement | null>(null);
+  const [dropPreview, setDropPreview] = React.useState<DropPreview | null>(null);
+  const dropPreviewRef = React.useRef<DropPreview | null>(null);
+
+  const computeDropPreview = (clientX: number, clientY: number): DropPreview | null => {
+    const gridEl = gridRef.current;
+    if (!gridEl) return null;
+    const gridRect = gridEl.getBoundingClientRect();
+    if (
+      clientX < gridRect.left || clientX > gridRect.right ||
+      clientY < gridRect.top - 24 || clientY > gridRect.bottom + 24
+    ) {
+      return null;
+    }
+    const colWidth = gridRect.width / QUICK_DOC_COLUMNS;
+    const colIdx = Math.min(QUICK_DOC_COLUMNS - 1, Math.max(0, Math.floor((clientX - gridRect.left) / colWidth)));
+    const colEl = gridEl.children[colIdx] as HTMLElement | undefined;
+    const insertAt = colEl ? computeInsertIndex(colEl, clientY) : 0;
+    return { colIdx, insertAt };
+  };
+
+  const handleDragMove = (event: DragMoveEvent) => {
+    const { x, y } = event.operation.position.current;
+    const preview = computeDropPreview(x, y);
+    const prev = dropPreviewRef.current;
+    if (preview?.colIdx !== prev?.colIdx || preview?.insertAt !== prev?.insertAt) {
+      dropPreviewRef.current = preview;
+      setDropPreview(preview);
+    }
+  };
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    setIsDragging(false);
+    const preview = dropPreviewRef.current;
+    dropPreviewRef.current = null;
+    setDropPreview(null);
+    if (event.canceled || !preview) return;
+    const source = event.operation.source;
+    if (!source) return;
+    const dragged = quickDocs.find((r) => r.id === source.id);
+    if (!dragged) return;
+
+    // 看板式精确插入：从原列移除，按指示线位置插入目标列
+    const fromCol = Math.min(Math.max(dragged.columnIndex, 0), QUICK_DOC_COLUMNS - 1);
+    const nextColumns: QuickDocRow[][] = columns.map((col) => [...col]);
+    nextColumns[fromCol] = nextColumns[fromCol].filter((r) => r.id !== dragged.id);
+    let insertAt = preview.insertAt;
+    if (preview.colIdx === fromCol) {
+      const origIdx = columns[fromCol].findIndex((r) => r.id === dragged.id);
+      if (origIdx >= 0 && origIdx < insertAt) insertAt -= 1;
+    }
+    insertAt = Math.min(insertAt, nextColumns[preview.colIdx].length);
+    nextColumns[preview.colIdx].splice(insertAt, 0, dragged);
+
+    // 重建全量布局（列归属 + 列内顺序），一次落库；本地 state 同步重写
+    // columnIndex/sortOrder（否则分组 useMemo 仍按旧列归组，UI 不动）
+    const next = nextColumns.flatMap((col, colIdx) =>
+      col.map((row, i) => ({ ...row, columnIndex: colIdx, sortOrder: i })),
+    );
+    // 守卫必须同时比较 id 序列与列归属：跨列移动可能不改变扁平顺序
+    // （如从 col0 移到相邻空 col1，id 序列不变但列归属变了）
+    if (
+      next.length === quickDocs.length &&
+      next.every((r, i) => r.id === quickDocs[i]?.id && r.columnIndex === quickDocs[i]?.columnIndex)
+    ) {
+      return;
+    }
+    const items = next.map(({ id, columnIndex, sortOrder }) => ({ id, columnIndex, sortOrder }));
+    setLocalQuickDocs(next);
+    // 延迟到 dnd-kit 拖拽清理完成后再提交服务端（避免同帧 DOM 操作与 React 重渲染冲突）
+    window.setTimeout(() => {
+      reorderDocs({ data: { workspaceId, items } }).catch((err: unknown) => rollback(err));
+    }, 0);
+  };
+
+  const hasLinkedKb = kbs.length > 0;
+
+  const goToKbButton =
+    kbs.length === 0 ? (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="ghost" size="icon" className="size-7" disabled>
+            <FileSymlink className="size-3.5" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="top">{m.workspace_kb_goToKb()}</TooltipContent>
+      </Tooltip>
+    ) : kbs.length === 1 ? (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="ghost" size="icon" className="size-7" asChild>
+            <Link to="/knowledge/$kbId" params={{ kbId: kbs[0].id }}>
+              <CornerUpRight className="size-3.5" />
+            </Link>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="top">
+          {m.workspace_kb_goToKb()} <span className="font-medium">{kbs[0].name}</span>
+        </TooltipContent>
+      </Tooltip>
+    ) : (
+      <DropdownMenu>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="size-7">
+                <CornerUpRight className="size-3.5" />
+              </Button>
+            </DropdownMenuTrigger>
+          </TooltipTrigger>
+          <TooltipContent side="top">{m.workspace_kb_goToKb()}</TooltipContent>
+        </Tooltip>
+        <DropdownMenuContent align="end">
+          {kbs.map((kb) => (
+            <DropdownMenuItem key={kb.id} asChild>
+              <Link to="/knowledge/$kbId" params={{ kbId: kb.id }}>
+                <LucideIconByName name={kb.icon} size={14} className="shrink-0" />
+                <span className="truncate">{kb.name}</span>
+              </Link>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+
+  const isEmpty = quickDocs.length === 0;
+
+  // 看板分列：按持久化的 columnIndex 分组（quickDocs 已按 列→列内顺序 排好）
+  const columns: QuickDocRow[][] = React.useMemo(() => {
+    const result = Array.from({ length: QUICK_DOC_COLUMNS }, () => [] as QuickDocRow[]);
+    quickDocs.forEach((row) => {
+      const c = Math.min(Math.max(row.columnIndex, 0), QUICK_DOC_COLUMNS - 1);
+      result[c].push(row);
+    });
+    return result;
+  }, [quickDocs]);
+
+  return (
+    <div className="mb-6 rounded-lg border bg-card p-4">
+      <div className="mb-3 flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <LayoutGrid className="size-4 text-muted-foreground" />
+          <h2 className="text-base font-semibold">{m.workspace_home_kbTitle()}</h2>
+        </div>
+        <div className="flex items-center gap-1">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-7"
+                onClick={() => setManageOpen(true)}
+              >
+                {hasLinkedKb ? <Link2 className="size-3.5" /> : <Unlink className="size-3.5" />}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="top">
+              {hasLinkedKb ? m.workspace_kb_linked() : m.workspace_kb_linkButton()}
+            </TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon" className="size-7" aria-label={m.workspace_kb_addQuickDoc()} onClick={() => setAddOpen(true)}>
+                <Plus className="size-3.5" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="top">{m.workspace_kb_addQuickDoc()}</TooltipContent>
+          </Tooltip>
+          {goToKbButton}
+        </div>
+      </div>
+
+      {quickDocs.length > 0 && (
+        <DragDropProvider onDragStart={handleDragStart} onDragMove={handleDragMove} onDragEnd={handleDragEnd}>
+          <div ref={gridRef} className="grid min-h-30 grid-cols-5 items-stretch gap-1.5">
+            {columns.map((col, colIdx) => {
+              const flatBefore = columns.slice(0, colIdx).reduce((sum, c) => sum + c.length, 0);
+              return (
+                <DroppableColumn key={colIdx} colIdx={colIdx} isDragging={isDragging}>
+                  {col.map((row, i) => (
+                    <React.Fragment key={row.id}>
+                      {isDragging && dropPreview?.colIdx === colIdx && dropPreview.insertAt === i && (
+                        <DropIndicator />
+                      )}
+                      <QuickDocRowItem
+                        row={row}
+                        index={flatBefore + i}
+                        onRename={handleRename}
+                        onDelete={setPendingDelete}
+                      />
+                    </React.Fragment>
+                  ))}
+                  {isDragging && dropPreview?.colIdx === colIdx && dropPreview.insertAt >= col.length && (
+                    <DropIndicator />
+                  )}
+                </DroppableColumn>
+              );
+            })}
+          </div>
+        </DragDropProvider>
+      )}
+
+      {isEmpty && (
+        <p className="py-4 text-center text-sm text-muted-foreground">{m.workspace_kb_empty()}</p>
+      )}
+
+      <WorkspaceKbManageDialog
+        workspaceId={workspaceId}
+        open={manageOpen}
+        onOpenChange={setManageOpen}
+        onUpdate={setLocalKbs}
+      />
+      <WorkspaceQuickDocDialog
+        workspaceId={workspaceId}
+        open={addOpen}
+        onOpenChange={setAddOpen}
+        onAdded={() => void router.invalidate()}
+      />
+      <AlertDialog open={pendingDelete !== null} onOpenChange={(o) => !o && setPendingDelete(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{m.workspace_kb_deleteConfirmTitle()}</AlertDialogTitle>
+            <AlertDialogDescription>{m.workspace_kb_deleteConfirmDesc()}</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setPendingDelete(null)}>{m.workspace_kb_cancel()}</AlertDialogCancel>
+            <AlertDialogAction onClick={() => pendingDelete && handleDelete(pendingDelete)}>
+              {m.workspace_kb_confirm()}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  );
+}