@anchrd/intel-ui 0.2.1 → 0.4.0

package/src/knowledge/knowledge.tsx

@@ -5,28 +5,22 @@ import type {
   ResourceRole,
 } from "@anchrd/intel-contract";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useNavigate, useRouterState } from "@tanstack/react-router";
 import {
   Archive,
-  ChevronDown,
-  ChevronRight,
   Download,
-  FileText,
-  Folder,
-  FolderPlus,
   History,
   Link2,
   Network,
   Paperclip,
-  Plus,
-  Search,
   Share2,
   Trash2,
 } from "lucide-react";
-import { lazy, Suspense, useMemo, useState } from "react";
-import { Button, Collection, Tree, TreeItem, TreeItemContent } from "react-aria-components";
-import type { KnowledgeTreeNode } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import { lazy, Suspense, useState } from "react";
+import { HeaderActions } from "@/app/header-actions/header-actions.tsx";
 import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
+import { selectedFrom } from "@/router/selection-search.ts";
 
 const KnowledgeEditor = lazy(async () => ({
   default: (await import("@/knowledge-editor/knowledge-editor.tsx")).KnowledgeEditor,
@@ -35,65 +29,30 @@ const KnowledgeGraphView = lazy(async () => ({
   default: (await import("@/knowledge-graph/knowledge-graph.tsx")).KnowledgeGraphView,
 }));
 
-function findNode(nodes: KnowledgeTreeNode[], id: string | null): KnowledgeTreeNode | null {
-  if (!id) return null;
-  for (const node of nodes) {
-    if (node.id === id) return node;
-    const child = findNode(node.children, id);
-    if (child) return child;
-  }
-  return null;
-}
-
-function flattenTree(nodes: KnowledgeTreeNode[]): KnowledgeTreeNode[] {
-  return nodes.flatMap((node) => [node, ...flattenTree(node.children)]);
-}
-
-async function fileBase64(file: File): Promise<string> {
-  if (file.size > 15_000_000) throw new Error("Attachment exceeds the 15 MB upload limit");
-  return await new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.onerror = () => reject(reader.error ?? new Error("Attachment could not be read"));
-    reader.onload = () => {
-      const result = reader.result;
-      if (typeof result !== "string" || !result.includes(",")) {
-        reject(new Error("Attachment could not be encoded"));
-        return;
-      }
-      resolve(result.slice(result.indexOf(",") + 1));
-    };
-    reader.readAsDataURL(file);
-  });
-}
-
 export function Knowledge() {
   const { data, i18n } = useIntelRouterContext();
   const queryClient = useQueryClient();
-  const tree = useQuery({ queryKey: ["knowledge-tree"], queryFn: () => data.loadKnowledgeTree() });
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [creating, setCreating] = useState<"document" | "folder" | null>(null);
+  const navigate = useNavigate();
+  // The tree in the sidebar and the header search both name what to open through `?select=`, so this
+  // screen has no selection of its own to keep in step with them.
+  const selectedId = useRouterState({ select: (state) => selectedFrom(state.location.search) });
   const [sharing, setSharing] = useState(false);
   const [linksOpen, setLinksOpen] = useState(false);
   const [graphOpen, setGraphOpen] = useState(false);
   const [versionsOpen, setVersionsOpen] = useState(false);
-  const [searchText, setSearchText] = useState("");
-  const [searchQuery, setSearchQuery] = useState("");
-  const selected = useMemo(() => findNode(tree.data ?? [], selectedId), [selectedId, tree.data]);
   const graph = useQuery({
     queryKey: ["knowledge-graph"],
     queryFn: () => data.getKnowledgeGraph(),
-    enabled: graphOpen,
+    // The link dialog needs candidates to link to, and the graph is the one authorized list of
+    // nodes the UI can ask for without walking the whole tree again.
+    enabled: graphOpen || linksOpen,
   });
   const document = useQuery({
     queryKey: ["knowledge", selectedId],
     queryFn: () => data.getKnowledge(selectedId ?? ""),
-    enabled: Boolean(selectedId && selected?.kind !== "folder"),
-  });
-  const search = useQuery({
-    queryKey: ["knowledge-search", searchQuery],
-    queryFn: () => data.searchKnowledge({ query: searchQuery, limit: 12 }),
-    enabled: searchQuery.length > 0,
+    enabled: Boolean(selectedId),
   });
+  const selected = document.data?.node ?? null;
   const archive = useMutation({
     mutationFn: (node: KnowledgeNode) =>
       data.archiveKnowledge({
@@ -102,9 +61,11 @@ export function Knowledge() {
         archived: true,
         idempotencyKey: crypto.randomUUID(),
       }),
-    onSuccess: async () => {
-      setSelectedId(null);
-      await queryClient.invalidateQueries({ queryKey: ["knowledge-tree"] });
+    onSuccess: async (node) => {
+      // The row leaves the tree, so the level it sat in is what has to be re-read — and the screen
+      // has nothing left to show.
+      await queryClient.invalidateQueries({ queryKey: ["tree", node.parentId] });
+      await navigate({ to: "/knowledge", search: {} });
     },
   });
   const setContextPolicy = useMutation({
@@ -115,337 +76,146 @@ export function Knowledge() {
         contextPolicy,
         idempotencyKey: crypto.randomUUID(),
       }),
-    onSuccess: async () => {
-      await queryClient.invalidateQueries({ queryKey: ["knowledge-tree"] });
-    },
-  });
-  const upload = useMutation({
-    mutationFn: async (file: File) => {
-      const contentBase64 = await fileBase64(file);
-      const node = await data.createKnowledge({
-        parentId: selected?.kind === "folder" ? selected.id : (selected?.parentId ?? null),
-        kind: "attachment",
-        title: file.name,
-        description: null,
-        contextPolicy: "relevant",
-        idempotencyKey: crypto.randomUUID(),
-      });
-      try {
-        const saved = await data.saveKnowledgeAttachment({
-          nodeId: node.id,
-          baseVersionId: null,
-          contentBase64,
-          mediaType: file.type || "application/octet-stream",
-          idempotencyKey: crypto.randomUUID(),
-        });
-        return saved.node;
-      } catch (error) {
-        const current = await data.getKnowledge(node.id).catch(() => null);
-        if (current?.version === null && current.node.updatedAt === node.updatedAt) {
-          await data
-            .archiveKnowledge({
-              nodeId: node.id,
-              baseUpdatedAt: current.node.updatedAt,
-              archived: true,
-              idempotencyKey: crypto.randomUUID(),
-            })
-            .catch(() => undefined);
-        }
-        throw error;
-      }
-    },
     onSuccess: async (node) => {
-      setSelectedId(node.id);
-      await queryClient.invalidateQueries({ queryKey: ["knowledge-tree"] });
+      await queryClient.invalidateQueries({ queryKey: ["knowledge", node.id] });
     },
   });
 
-  const renderTreeItem = (node: KnowledgeTreeNode) => (
-    <TreeItem
-      id={node.id}
-      textValue={node.title}
-      className="rounded-md outline-none data-[focused]:ring-2 data-[focused]:ring-ring data-[selected]:bg-accent data-[selected]:text-accent-foreground"
-    >
-      <TreeItemContent>
-        {({ hasChildItems, isExpanded }) => (
-          <div className="flex min-w-0 items-center gap-2 px-2 py-1.5 text-sm">
-            {hasChildItems ? (
-              <Button
-                slot="chevron"
-                className="rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              >
-                {isExpanded ? (
-                  <ChevronDown aria-hidden="true" className="size-3.5" />
-                ) : (
-                  <ChevronRight aria-hidden="true" className="size-3.5" />
-                )}
-              </Button>
-            ) : (
-              <span className="size-3.5" />
-            )}
-            {node.kind === "folder" ? (
-              <Folder aria-hidden="true" className="size-4 shrink-0" />
-            ) : (
-              <FileText aria-hidden="true" className="size-4 shrink-0" />
-            )}
-            <span className="truncate">{node.title}</span>
-          </div>
-        )}
-      </TreeItemContent>
-      <Collection items={node.children}>{renderTreeItem}</Collection>
-    </TreeItem>
-  );
-
   return (
-    <div className="flex h-screen min-h-0 flex-col">
-      <header className="flex items-center justify-between gap-6 border-b px-8 py-5">
-        <div>
-          <h1 className="text-xl font-semibold tracking-tight">{i18n.t("knowledge.title")}</h1>
-          <p className="mt-1 text-sm text-muted-foreground">{i18n.t("knowledge.description")}</p>
-        </div>
-        <div className="flex items-center gap-2">
-          <button
-            type="button"
-            onClick={() => setGraphOpen(true)}
-            className="inline-flex items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            <Network aria-hidden="true" className="size-4" />
-            {i18n.t("knowledge.graph")}
-          </button>
-          <button
-            type="button"
-            onClick={() => setCreating("folder")}
-            className="inline-flex items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            <FolderPlus aria-hidden="true" className="size-4" />
-            {i18n.t("knowledge.newFolder")}
-          </button>
-          <label className="inline-flex cursor-pointer items-center gap-2 rounded-md border bg-background px-3 py-2 text-sm outline-none hover:bg-muted focus-within:ring-2 focus-within:ring-ring">
-            <Paperclip aria-hidden="true" className="size-4" />
-            {upload.isPending ? i18n.t("knowledge.uploading") : i18n.t("knowledge.upload")}
-            <input
-              type="file"
-              className="sr-only"
-              disabled={upload.isPending}
-              onChange={(event) => {
-                const file = event.target.files?.[0];
-                if (file) upload.mutate(file);
-                event.currentTarget.value = "";
-              }}
-            />
-          </label>
-          <button
-            type="button"
-            onClick={() => setCreating("document")}
-            className="inline-flex items-center gap-2 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            <Plus aria-hidden="true" className="size-4" />
-            {i18n.t("knowledge.new")}
-          </button>
-        </div>
-      </header>
-      {upload.isError && (
-        <p role="alert" className="border-b px-8 py-3 text-sm text-destructive">
-          {i18n.t("knowledge.uploadFailed")}
-        </p>
-      )}
+    <div className="flex h-full min-h-0 flex-col">
+      {/* The screen owns the one action that belongs to Knowledge as a whole. Creating things is
+          the tree's, in the sidebar, at the place a new thing is meant to go. */}
+      <HeaderActions>
+        <button
+          type="button"
+          onClick={() => setGraphOpen(true)}
+          className="inline-flex h-8 items-center gap-2 rounded-md border bg-background px-2.5 text-sm outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <Network aria-hidden="true" className="size-4" />
+          {i18n.t("knowledge.graph")}
+        </button>
+      </HeaderActions>
       {archive.isError || setContextPolicy.isError ? (
         <p role="alert" className="border-b px-8 py-3 text-sm text-destructive">
           {i18n.t("knowledge.operationFailed")}
         </p>
       ) : null}
-      <div className="flex min-h-0 flex-1">
-        <aside className="flex w-80 min-w-72 flex-col border-r bg-muted/20">
-          <form
-            className="border-b p-3"
-            onSubmit={(event) => {
-              event.preventDefault();
-              setSearchQuery(searchText.trim());
-            }}
-          >
-            <label className="relative block">
-              <span className="sr-only">{i18n.t("knowledge.search")}</span>
-              <Search
-                aria-hidden="true"
-                className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
-              />
-              <input
-                type="search"
-                value={searchText}
-                onChange={(event) => setSearchText(event.target.value)}
-                placeholder={i18n.t("knowledge.search")}
-                className="w-full rounded-md border bg-background py-2 pl-9 pr-3 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              />
-            </label>
-          </form>
-          <div className="min-h-0 flex-1 overflow-y-auto p-3">
-            {searchQuery ? (
-              <div className="space-y-1">
-                {search.data?.items.map((citation) => (
+      <section className="relative flex min-h-0 min-w-0 flex-1 flex-col bg-card">
+        {!selectedId ? (
+          <div className="grid flex-1 place-items-center p-8 text-center text-sm text-muted-foreground">
+            {i18n.t("knowledge.select")}
+          </div>
+        ) : document.isPending ? (
+          <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+        ) : document.isError || !selected ? (
+          <div role="alert" className="grid flex-1 place-items-center p-8 text-center text-sm">
+            <div className="space-y-3">
+              <p className="text-destructive">{i18n.t("knowledge.loadFailed")}</p>
+              <button
+                type="button"
+                onClick={() => void document.refetch()}
+                className="rounded-md border px-3 py-2 text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                {i18n.t("common.retry")}
+              </button>
+            </div>
+          </div>
+        ) : (
+          <>
+            <div className="flex items-start justify-between gap-5 border-b px-6 py-4">
+              <div className="min-w-0">
+                <h2 className="truncate text-lg font-semibold">{selected.title}</h2>
+                {selected.description && (
+                  <p className="mt-1 text-sm text-muted-foreground">{selected.description}</p>
+                )}
+              </div>
+              <div className="flex shrink-0 items-center gap-1">
+                <select
+                  value={selected.contextPolicy}
+                  disabled={setContextPolicy.isPending}
+                  onChange={(event) =>
+                    setContextPolicy.mutate({
+                      node: selected,
+                      contextPolicy: event.target.value as ContextPolicy,
+                    })
+                  }
+                  aria-label={i18n.t("knowledge.contextPolicy")}
+                  className="mr-2 rounded-md border bg-background px-2 py-1.5 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+                >
+                  <option value="pinned">{i18n.t("knowledge.context.pinned")}</option>
+                  <option value="relevant">{i18n.t("knowledge.context.relevant")}</option>
+                  <option value="explicit">{i18n.t("knowledge.context.explicit")}</option>
+                </select>
+                <button
+                  type="button"
+                  onClick={() => setLinksOpen(true)}
+                  aria-label={i18n.t("knowledge.links")}
+                  className="rounded-md p-2 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  <Link2 aria-hidden="true" className="size-4" />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => setSharing(true)}
+                  aria-label={i18n.t("knowledge.share")}
+                  className="rounded-md p-2 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  <Share2 aria-hidden="true" className="size-4" />
+                </button>
+                {selected.kind !== "folder" && (
                   <button
-                    key={`${citation.nodeId}:${citation.versionId}`}
                     type="button"
-                    onClick={() => setSelectedId(citation.nodeId)}
-                    className="w-full rounded-md p-2 text-left outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+                    onClick={() => setVersionsOpen((value) => !value)}
+                    aria-label={i18n.t("knowledge.versions")}
+                    className="rounded-md p-2 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
                   >
-                    <span className="block truncate text-sm font-medium">{citation.title}</span>
-                    <span className="mt-1 line-clamp-2 text-xs text-muted-foreground">
-                      {citation.passage}
-                    </span>
+                    <History aria-hidden="true" className="size-4" />
                   </button>
-                ))}
-                {search.data?.items.length === 0 && (
-                  <p className="p-2 text-sm text-muted-foreground">
-                    {i18n.t("knowledge.noResults")}
-                  </p>
                 )}
                 <button
                   type="button"
-                  onClick={() => {
-                    setSearchQuery("");
-                    setSearchText("");
-                  }}
-                  className="mt-3 text-xs text-muted-foreground underline outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                  onClick={() => archive.mutate(selected)}
+                  aria-label={i18n.t("knowledge.archive")}
+                  className="rounded-md p-2 text-destructive outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
                 >
-                  {i18n.t("knowledge.clearSearch")}
+                  <Archive aria-hidden="true" className="size-4" />
                 </button>
               </div>
-            ) : tree.isPending ? (
-              <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
-            ) : (
-              <Tree
-                aria-label={i18n.t("knowledge.tree")}
-                items={tree.data ?? []}
-                selectionMode="single"
-                selectedKeys={selectedId ? [selectedId] : []}
-                onSelectionChange={(keys) => {
-                  if (keys === "all") return;
-                  const key = [...keys][0];
-                  setSelectedId(key === undefined ? null : String(key));
-                }}
-                className="outline-none"
-                renderEmptyState={() => (
-                  <p className="p-2 text-sm text-muted-foreground">{i18n.t("knowledge.empty")}</p>
-                )}
-              >
-                {renderTreeItem}
-              </Tree>
-            )}
-          </div>
-        </aside>
-        <section className="relative flex min-w-0 flex-1 flex-col bg-card">
-          {!selected && (
-            <div className="grid flex-1 place-items-center p-8 text-center text-sm text-muted-foreground">
-              {i18n.t("knowledge.select")}
             </div>
-          )}
-          {selected && (
-            <>
-              <div className="flex items-start justify-between gap-5 border-b px-6 py-4">
-                <div className="min-w-0">
-                  <h2 className="truncate text-lg font-semibold">{selected.title}</h2>
-                  {selected.description && (
-                    <p className="mt-1 text-sm text-muted-foreground">{selected.description}</p>
-                  )}
-                </div>
-                <div className="flex shrink-0 items-center gap-1">
-                  <select
-                    value={selected.contextPolicy}
-                    disabled={setContextPolicy.isPending}
-                    onChange={(event) =>
-                      setContextPolicy.mutate({
-                        node: selected,
-                        contextPolicy: event.target.value as ContextPolicy,
-                      })
-                    }
-                    aria-label={i18n.t("knowledge.contextPolicy")}
-                    className="mr-2 rounded-md border bg-background px-2 py-1.5 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
-                  >
-                    <option value="pinned">{i18n.t("knowledge.context.pinned")}</option>
-                    <option value="relevant">{i18n.t("knowledge.context.relevant")}</option>
-                    <option value="explicit">{i18n.t("knowledge.context.explicit")}</option>
-                  </select>
-                  <button
-                    type="button"
-                    onClick={() => setLinksOpen(true)}
-                    aria-label={i18n.t("knowledge.links")}
-                    className="rounded-md p-2 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-                  >
-                    <Link2 aria-hidden="true" className="size-4" />
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => setSharing(true)}
-                    aria-label={i18n.t("knowledge.share")}
-                    className="rounded-md p-2 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-                  >
-                    <Share2 aria-hidden="true" className="size-4" />
-                  </button>
-                  {selected.kind !== "folder" && (
-                    <button
-                      type="button"
-                      onClick={() => setVersionsOpen((value) => !value)}
-                      aria-label={i18n.t("knowledge.versions")}
-                      className="rounded-md p-2 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-                    >
-                      <History aria-hidden="true" className="size-4" />
-                    </button>
-                  )}
-                  <button
-                    type="button"
-                    onClick={() => archive.mutate(selected)}
-                    aria-label={i18n.t("knowledge.archive")}
-                    className="rounded-md p-2 text-destructive outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-                  >
-                    <Archive aria-hidden="true" className="size-4" />
-                  </button>
-                </div>
+            {selected.kind === "folder" ? (
+              <div className="grid flex-1 place-items-center p-8 text-sm text-muted-foreground">
+                {i18n.t("knowledge.folderHelp")}
               </div>
-              {selected.kind === "folder" ? (
-                <div className="grid flex-1 place-items-center p-8 text-sm text-muted-foreground">
-                  {i18n.t("knowledge.folderHelp")}
-                </div>
-              ) : selected.kind === "attachment" && document.data ? (
-                <AttachmentPanel node={selected} />
-              ) : document.isPending ? (
-                <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
-              ) : document.data ? (
-                <Suspense
-                  fallback={
-                    <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
-                  }
-                >
-                  <KnowledgeEditor
-                    key={document.data.node.id}
-                    data={data}
-                    document={document.data}
-                    i18n={i18n}
-                    onSaved={(saved) => {
-                      queryClient.setQueryData(["knowledge", selected.id], saved);
-                      void queryClient.invalidateQueries({ queryKey: ["knowledge-tree"] });
-                    }}
-                  />
-                </Suspense>
-              ) : null}
-              {versionsOpen && selected.kind !== "folder" && (
-                <VersionHistory nodeId={selected.id} close={() => setVersionsOpen(false)} />
-              )}
-            </>
-          )}
-        </section>
-      </div>
-      {creating && (
-        <CreateKnowledge
-          kind={creating}
-          parentId={selected?.kind === "folder" ? selected.id : (selected?.parentId ?? null)}
-          close={() => setCreating(null)}
-        />
-      )}
+            ) : selected.kind === "attachment" ? (
+              <AttachmentPanel node={selected} />
+            ) : document.data ? (
+              <Suspense
+                fallback={
+                  <p className="p-6 text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+                }
+              >
+                <KnowledgeEditor
+                  key={document.data.node.id}
+                  data={data}
+                  document={document.data}
+                  i18n={i18n}
+                  onSaved={(saved) => {
+                    queryClient.setQueryData(["knowledge", selected.id], saved);
+                  }}
+                />
+              </Suspense>
+            ) : null}
+            {versionsOpen && selected.kind !== "folder" && (
+              <VersionHistory nodeId={selected.id} close={() => setVersionsOpen(false)} />
+            )}
+          </>
+        )}
+      </section>
       {sharing && selected && <ShareKnowledge node={selected} close={() => setSharing(false)} />}
       {linksOpen && selected && (
         <KnowledgeLinks
           node={selected}
-          nodes={flattenTree(tree.data ?? [])}
+          nodes={graph.data?.nodes ?? []}
           close={() => setLinksOpen(false)}
         />
       )}
@@ -472,8 +242,8 @@ export function Knowledge() {
             i18n={i18n}
             close={() => setGraphOpen(false)}
             select={(nodeId) => {
-              setSelectedId(nodeId);
               setGraphOpen(false);
+              void navigate({ to: "/knowledge", search: { select: nodeId } });
             }}
           />
         </Suspense>
@@ -657,66 +427,6 @@ function KnowledgeLinks({
   );
 }
 
-function CreateKnowledge({
-  kind,
-  parentId,
-  close,
-}: {
-  kind: "document" | "folder";
-  parentId: string | null;
-  close(): void;
-}) {
-  const { data, i18n } = useIntelRouterContext();
-  const queryClient = useQueryClient();
-  const [title, setTitle] = useState("");
-  const mutation = useMutation({
-    mutationFn: () =>
-      data.createKnowledge({
-        parentId,
-        kind,
-        title,
-        description: null,
-        contextPolicy: "relevant",
-        idempotencyKey: crypto.randomUUID(),
-      }),
-    onSuccess: async () => {
-      await queryClient.invalidateQueries({ queryKey: ["knowledge-tree"] });
-      close();
-    },
-  });
-  return (
-    <Modal
-      title={kind === "folder" ? i18n.t("knowledge.newFolder") : i18n.t("knowledge.new")}
-      close={close}
-    >
-      <form
-        onSubmit={(event) => {
-          event.preventDefault();
-          mutation.mutate();
-        }}
-        className="space-y-4"
-      >
-        <label className="block text-sm font-medium">
-          {i18n.t("common.title")}
-          <input
-            required
-            value={title}
-            onChange={(event) => setTitle(event.target.value)}
-            className="mt-2 w-full rounded-md border bg-background px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          />
-        </label>
-        <button
-          type="submit"
-          disabled={mutation.isPending}
-          className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
-        >
-          {i18n.t("common.create")}
-        </button>
-      </form>
-    </Modal>
-  );
-}
-
 function ShareKnowledge({ node, close }: { node: KnowledgeNode; close(): void }) {
   const { data, i18n } = useIntelRouterContext();
   const [email, setEmail] = useState("");