@anchrd/intel-ui 0.4.0 → 0.6.0

package/src/knowledge/knowledge.tsx

@@ -1,33 +1,20 @@
-import type {
-  ContextPolicy,
-  KnowledgeLinkRelation,
-  KnowledgeNode,
-  ResourceRole,
-} from "@anchrd/intel-contract";
+import type { KnowledgeNode } from "@anchrd/intel-contract";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
-import {
-  Archive,
-  Download,
-  History,
-  Link2,
-  Network,
-  Paperclip,
-  Share2,
-  Trash2,
-} from "lucide-react";
+import { Download, History, Paperclip } from "lucide-react";
 import { lazy, Suspense, useState } from "react";
-import { HeaderActions } from "@/app/header-actions/header-actions.tsx";
-import { Modal } from "@/modal/modal.tsx";
+import { ActionSlot } from "@/app/action-slot/action-slot.tsx";
+import { ViewToggle } from "@/app/view-toggle/view-toggle.tsx";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { GraphPane } from "@/graph-pane/graph-pane.tsx";
+import { KnowledgeTablePanel } from "@/knowledge-table/knowledge-table.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
-import { selectedFrom } from "@/router/selection-search.ts";
+import { graphViewFrom, selectedFrom } from "@/router/selection-search.ts";
+import { TitleRow } from "@/title-row/title-row.tsx";
 
 const KnowledgeEditor = lazy(async () => ({
   default: (await import("@/knowledge-editor/knowledge-editor.tsx")).KnowledgeEditor,
 }));
-const KnowledgeGraphView = lazy(async () => ({
-  default: (await import("@/knowledge-graph/knowledge-graph.tsx")).KnowledgeGraphView,
-}));
 
 export function Knowledge() {
   const { data, i18n } = useIntelRouterContext();
@@ -35,73 +22,56 @@ export function Knowledge() {
   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 graph = useQuery({
-    queryKey: ["knowledge-graph"],
-    queryFn: () => data.getKnowledgeGraph(),
-    // 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 selection = useRouterState({
+    select: (state) => ({
+      id: selectedFrom(state.location.search),
+      graph: graphViewFrom(state.location.search),
+    }),
   });
+  const selectedId = selection.id;
+  const [versionsOpen, setVersionsOpen] = useState(false);
   const document = useQuery({
     queryKey: ["knowledge", selectedId],
     queryFn: () => data.getKnowledge(selectedId ?? ""),
     enabled: Boolean(selectedId),
   });
   const selected = document.data?.node ?? null;
-  const archive = useMutation({
-    mutationFn: (node: KnowledgeNode) =>
-      data.archiveKnowledge({
-        nodeId: node.id,
-        baseUpdatedAt: node.updatedAt,
-        archived: true,
-        idempotencyKey: crypto.randomUUID(),
-      }),
-    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: {} });
-    },
+  // A folder shows its contents as a graph, and so does the root of the tree (#19). A document has
+  // nothing to draw — which is why the switch is not offered on one rather than offered and empty.
+  const graphable = selectedId === null || selected?.kind === "folder";
+  const relations = useQuery({
+    queryKey: ["relation-graph", "folder", selectedId],
+    queryFn: () => data.getRelationGraph({ of: "folder", folderId: selectedId }),
+    enabled: graphable && selection.graph,
   });
-  const setContextPolicy = useMutation({
-    mutationFn: ({ node, contextPolicy }: { node: KnowledgeNode; contextPolicy: ContextPolicy }) =>
-      data.updateKnowledge({
-        nodeId: node.id,
-        baseUpdatedAt: node.updatedAt,
-        contextPolicy,
-        idempotencyKey: crypto.randomUUID(),
-      }),
-    onSuccess: async (node) => {
-      await queryClient.invalidateQueries({ queryKey: ["knowledge", node.id] });
-    },
-  });
-
   return (
     <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>
+          the tree's, in the sidebar, at the place a new thing is meant to go.
+
+          ⚠️ Mounted only where there is a graph to switch to. A switch on a document would point at
+          nothing, and the header is where that gets noticed first (#19). */}
+      {graphable ? (
+        <ActionSlot>
+          <ViewToggle />
+        </ActionSlot>
       ) : null}
       <section className="relative flex min-h-0 min-w-0 flex-1 flex-col bg-card">
-        {!selectedId ? (
+        {/* ⚠️ Only the root draws its graph on its own. A folder's graph hangs *under* the folder's
+            title line rather than in place of it (#58): the line is the one place its menu lives,
+            and a folder that could only be renamed while the graph happened to be switched off
+            would be a folder one cannot rename. */}
+        {selectedId === null && selection.graph ? (
+          <GraphPane
+            query={relations}
+            select={(node) =>
+              void navigate({
+                to: node.kind === "flow" ? "/flows" : "/knowledge",
+                search: { select: node.id },
+              })
+            }
+          />
+        ) : !selectedId ? (
           <div className="grid flex-1 place-items-center p-8 text-center text-sm text-muted-foreground">
             {i18n.t("knowledge.select")}
           </div>
@@ -122,72 +92,56 @@ export function Knowledge() {
           </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
-                    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>
-            </div>
-            {selected.kind === "folder" ? (
+            {/* The document's own line: its name, and beside it only what acts on this one
+                document. What the four loose icons used to do is now one menu (#24) — and since #58
+                this line is the only place that menu appears at all, for every kind including a
+                folder, whose whole screen is this line.
+                ⚠️ The order of the right-hand group is `TitleRow`'s (#53), not this screen's: the
+                version button is handed over as a child and lands before the menu whatever else
+                shows up later.
+                ⚠️ The view switch is deliberately NOT here: it changes how the current area is
+                shown, not the document, and it stays beside the breadcrumb where the area is
+                named. */}
+            <TitleRow
+              title={selected.title}
+              description={selected.description}
+              target={{ type: "knowledge", node: selected }}
+            >
+              {selected.kind !== "folder" && (
+                <TooltipProvider delayDuration={300}>
+                  <Tooltip>
+                    <TooltipTrigger
+                      type="button"
+                      onClick={() => setVersionsOpen((value) => !value)}
+                      aria-label={i18n.t("knowledge.versions")}
+                      aria-expanded={versionsOpen}
+                      className="inline-flex size-8 items-center justify-center rounded-md border bg-background outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+                    >
+                      <History aria-hidden="true" className="size-4" />
+                    </TooltipTrigger>
+                    <TooltipContent>{i18n.t("knowledge.versions")}</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              )}
+            </TitleRow>
+            {graphable && selection.graph ? (
+              <GraphPane
+                query={relations}
+                select={(node) =>
+                  void navigate({
+                    to: node.kind === "flow" ? "/flows" : "/knowledge",
+                    search: { select: node.id },
+                  })
+                }
+              />
+            ) : 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" ? (
               <AttachmentPanel node={selected} />
+            ) : selected.kind === "table" ? (
+              <KnowledgeTablePanel node={selected} />
             ) : document.data ? (
               <Suspense
                 fallback={
@@ -211,43 +165,6 @@ export function Knowledge() {
           </>
         )}
       </section>
-      {sharing && selected && <ShareKnowledge node={selected} close={() => setSharing(false)} />}
-      {linksOpen && selected && (
-        <KnowledgeLinks
-          node={selected}
-          nodes={graph.data?.nodes ?? []}
-          close={() => setLinksOpen(false)}
-        />
-      )}
-      {graphOpen && !graph.data && (
-        <Modal title={i18n.t("knowledge.graph")} close={() => setGraphOpen(false)}>
-          <p role={graph.isError ? "alert" : undefined} className="text-sm text-muted-foreground">
-            {graph.isError ? i18n.t("knowledge.graphFailed") : i18n.t("common.loading")}
-          </p>
-          {graph.isError && (
-            <button
-              type="button"
-              onClick={() => void graph.refetch()}
-              className="mt-4 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>
-          )}
-        </Modal>
-      )}
-      {graphOpen && graph.data && (
-        <Suspense fallback={null}>
-          <KnowledgeGraphView
-            data={graph.data}
-            i18n={i18n}
-            close={() => setGraphOpen(false)}
-            select={(nodeId) => {
-              setGraphOpen(false);
-              void navigate({ to: "/knowledge", search: { select: nodeId } });
-            }}
-          />
-        </Suspense>
-      )}
     </div>
   );
 }
@@ -292,199 +209,6 @@ function AttachmentPanel({ node }: { node: KnowledgeNode }) {
   );
 }
 
-function KnowledgeLinks({
-  node,
-  nodes,
-  close,
-}: {
-  node: KnowledgeNode;
-  nodes: KnowledgeNode[];
-  close(): void;
-}) {
-  const { data, i18n } = useIntelRouterContext();
-  const queryClient = useQueryClient();
-  const [targetNodeId, setTargetNodeId] = useState("");
-  const [relation, setRelation] = useState<KnowledgeLinkRelation>("related");
-  const links = useQuery({
-    queryKey: ["knowledge-links", node.id],
-    queryFn: () => data.listKnowledgeLinks(node.id),
-  });
-  const create = useMutation({
-    mutationFn: () =>
-      data.createKnowledgeLink({
-        sourceNodeId: node.id,
-        targetNodeId,
-        relation,
-        label: null,
-        idempotencyKey: crypto.randomUUID(),
-      }),
-    onSuccess: async () => {
-      setTargetNodeId("");
-      await Promise.all([
-        queryClient.invalidateQueries({ queryKey: ["knowledge-links", node.id] }),
-        queryClient.invalidateQueries({ queryKey: ["knowledge-graph"] }),
-      ]);
-    },
-  });
-  const remove = useMutation({
-    mutationFn: (linkId: string) =>
-      data.deleteKnowledgeLink({
-        sourceNodeId: node.id,
-        linkId,
-        idempotencyKey: crypto.randomUUID(),
-      }),
-    onSuccess: async () => {
-      await Promise.all([
-        queryClient.invalidateQueries({ queryKey: ["knowledge-links", node.id] }),
-        queryClient.invalidateQueries({ queryKey: ["knowledge-graph"] }),
-      ]);
-    },
-  });
-  const titles = new Map(nodes.map((candidate) => [candidate.id, candidate.title]));
-
-  return (
-    <Modal title={i18n.t("knowledge.links")} close={close}>
-      <ul className="mb-5 max-h-48 space-y-2 overflow-y-auto">
-        {links.data?.items.map((link) => {
-          const outgoing = link.sourceNodeId === node.id;
-          const otherId = outgoing ? link.targetNodeId : link.sourceNodeId;
-          return (
-            <li
-              key={link.id}
-              className="flex items-center justify-between gap-3 rounded-md border p-3"
-            >
-              <div className="min-w-0 text-sm">
-                <span className="block truncate font-medium">{titles.get(otherId) ?? otherId}</span>
-                <span className="text-xs text-muted-foreground">
-                  {outgoing ? "→" : "←"} {link.label ?? link.relation.replaceAll("_", " ")}
-                </span>
-              </div>
-              {outgoing && (
-                <button
-                  type="button"
-                  onClick={() => remove.mutate(link.id)}
-                  aria-label={i18n.t("knowledge.deleteLink")}
-                  className="rounded-md p-2 text-destructive outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-                >
-                  <Trash2 aria-hidden="true" className="size-4" />
-                </button>
-              )}
-            </li>
-          );
-        })}
-        {links.data?.items.length === 0 && (
-          <li className="text-sm text-muted-foreground">{i18n.t("knowledge.noLinks")}</li>
-        )}
-      </ul>
-      <form
-        className="space-y-4 border-t pt-5"
-        onSubmit={(event) => {
-          event.preventDefault();
-          create.mutate();
-        }}
-      >
-        <label className="block text-sm font-medium">
-          {i18n.t("knowledge.linkTarget")}
-          <select
-            required
-            value={targetNodeId}
-            onChange={(event) => setTargetNodeId(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"
-          >
-            <option value="">{i18n.t("knowledge.selectLinkTarget")}</option>
-            {nodes
-              .filter((candidate) => candidate.id !== node.id)
-              .map((candidate) => (
-                <option key={candidate.id} value={candidate.id}>
-                  {candidate.title}
-                </option>
-              ))}
-          </select>
-        </label>
-        <label className="block text-sm font-medium">
-          {i18n.t("knowledge.relation")}
-          <select
-            value={relation}
-            onChange={(event) => setRelation(event.target.value as KnowledgeLinkRelation)}
-            className="mt-2 w-full rounded-md border bg-background px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            {(["related", "references", "depends_on", "implements"] as const).map((value) => (
-              <option key={value} value={value}>
-                {i18n.t(`knowledge.relation.${value}`)}
-              </option>
-            ))}
-          </select>
-        </label>
-        <button
-          type="submit"
-          disabled={!targetNodeId || create.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("knowledge.createLink")}
-        </button>
-      </form>
-    </Modal>
-  );
-}
-
-function ShareKnowledge({ node, close }: { node: KnowledgeNode; close(): void }) {
-  const { data, i18n } = useIntelRouterContext();
-  const [email, setEmail] = useState("");
-  const [role, setRole] = useState<ResourceRole>("viewer");
-  const mutation = useMutation({
-    mutationFn: () =>
-      data.shareKnowledge({
-        resourceId: node.id,
-        principal: { type: "email", email },
-        role,
-        expiresAt: null,
-        idempotencyKey: crypto.randomUUID(),
-      }),
-    onSuccess: close,
-  });
-  return (
-    <Modal title={i18n.t("knowledge.share")} close={close}>
-      <form
-        onSubmit={(event) => {
-          event.preventDefault();
-          mutation.mutate();
-        }}
-        className="space-y-4"
-      >
-        <label className="block text-sm font-medium">
-          {i18n.t("knowledge.email")}
-          <input
-            type="email"
-            required
-            value={email}
-            onChange={(event) => setEmail(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>
-        <label className="block text-sm font-medium">
-          {i18n.t("knowledge.role")}
-          <select
-            value={role}
-            onChange={(event) => setRole(event.target.value as ResourceRole)}
-            className="mt-2 w-full rounded-md border bg-background px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            <option value="viewer">{i18n.t("knowledge.viewer")}</option>
-            <option value="editor">{i18n.t("knowledge.editor")}</option>
-            <option value="manager">{i18n.t("knowledge.manager")}</option>
-          </select>
-        </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("knowledge.shareAction")}
-        </button>
-      </form>
-    </Modal>
-  );
-}
-
 function VersionHistory({ nodeId, close }: { nodeId: string; close(): void }) {
   const { data, i18n } = useIntelRouterContext();
   const versions = useQuery({