@anchrd/intel-ui 0.5.0 → 0.7.0

package/src/entry-picker/entry-picker.tsx

@@ -0,0 +1,166 @@
+import type { KnowledgeNode, KnowledgeNodeKind } from "@anchrd/intel-contract";
+import { useQuery } from "@tanstack/react-query";
+import { ChevronRight, Folder, Search } from "lucide-react";
+import { useMemo, useState } from "react";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+/**
+ * One picker for everything a node can name: search by name, or click down through the tree from
+ * the top-level folders.
+ *
+ * ⚠️ Both halves read ONE source — the authorized flat graph the editor already loads. Not because
+ * a search endpoint would be hard, but because `searchKnowledge` answers a different question: it
+ * searches PASSAGES and hands back citations. Someone looking for a document by name would get
+ * results ranked by what is written inside it, which is the wrong list in a picker. Filtering names
+ * here is also instant, and it cannot disagree with the tree about what exists.
+ *
+ * ⚠️ What the caller may not see is absent from the graph, so it is absent here — and an empty
+ * result never says which of the two it is (#17, #19).
+ */
+export function EntryPicker({
+  kind,
+  value,
+  onSelect,
+  label,
+}: {
+  // Which kind of node may be chosen. `null` offers every kind — what the Flow step uses.
+  kind: KnowledgeNodeKind | null;
+  value: string;
+  onSelect(nodeId: string): void;
+  label: string;
+}) {
+  const { data, i18n } = useIntelRouterContext();
+  const [query, setQuery] = useState("");
+  const [openFolder, setOpenFolder] = useState<string | null>(null);
+  const graph = useQuery({
+    queryKey: ["knowledge-graph"],
+    queryFn: () => data.getKnowledgeGraph(),
+  });
+
+  const nodes = useMemo(() => graph.data?.nodes ?? [], [graph.data]);
+  const eligible = useMemo(
+    () => nodes.filter((node) => kind === null || node.kind === kind),
+    [nodes, kind],
+  );
+
+  // Searching looks at every eligible node wherever it sits; browsing looks at one level. The two
+  // are the same list seen two ways, which is why a result can be picked from either.
+  const searching = query.trim().length > 0;
+  const shown = useMemo(() => {
+    if (searching) {
+      const needle = query.trim().toLowerCase();
+      return eligible.filter((node) => node.title.toLowerCase().includes(needle)).slice(0, 50);
+    }
+    return nodes.filter((node) => node.parentId === openFolder);
+  }, [searching, query, eligible, nodes, openFolder]);
+
+  // The way back up, as the chain of folders that leads to the open one.
+  const trail = useMemo(() => {
+    const chain: KnowledgeNode[] = [];
+    let current = openFolder;
+    while (current !== null) {
+      const folder = nodes.find((node) => node.id === current);
+      if (!folder) break;
+      chain.unshift(folder);
+      current = folder.parentId;
+    }
+    return chain;
+  }, [openFolder, nodes]);
+
+  const chosen = nodes.find((node) => node.id === value) ?? null;
+
+  return (
+    <div className="mt-4">
+      <span className="block text-sm font-medium">{label}</span>
+      {chosen ? (
+        <p className="mt-1 truncate text-sm text-muted-foreground">{chosen.title}</p>
+      ) : (
+        <p className="mt-1 text-sm text-muted-foreground">{i18n.t("flows.linkEmpty")}</p>
+      )}
+
+      <div className="mt-2 rounded-lg border">
+        <label className="flex items-center gap-2 border-b px-2 py-1.5">
+          <Search aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" />
+          <span className="sr-only">{i18n.t("picker.search")}</span>
+          <input
+            type="search"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            placeholder={i18n.t("picker.search")}
+            className="w-full bg-transparent text-sm outline-none"
+          />
+        </label>
+
+        {/* The trail is hidden while searching: a result can come from anywhere, so "where you are"
+            would be a claim about a place the list is no longer showing. */}
+        {!searching && trail.length > 0 ? (
+          <div className="flex flex-wrap items-center gap-1 border-b px-2 py-1 text-xs">
+            <button
+              type="button"
+              onClick={() => setOpenFolder(null)}
+              className="rounded px-1 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {i18n.t("picker.top")}
+            </button>
+            {trail.map((folder) => (
+              <span key={folder.id} className="flex items-center gap-1">
+                <ChevronRight aria-hidden="true" className="size-3 text-muted-foreground" />
+                <button
+                  type="button"
+                  onClick={() => setOpenFolder(folder.id)}
+                  className="rounded px-1 outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  {folder.title}
+                </button>
+              </span>
+            ))}
+          </div>
+        ) : null}
+
+        <ul className="max-h-56 overflow-y-auto py-1">
+          {shown.map((node) => {
+            // A folder is two things while browsing: somewhere to go, and — when folders are what
+            // is being picked — something to choose. It gets both, side by side, rather than one
+            // control that has to guess which was meant.
+            const canOpen = node.kind === "folder" && !searching;
+            const canPick = kind === null || node.kind === kind;
+            return (
+              <li key={node.id} className="flex items-center gap-1 px-1">
+                {canPick ? (
+                  <button
+                    type="button"
+                    onClick={() => onSelect(node.id)}
+                    aria-current={node.id === value}
+                    className={`min-w-0 flex-1 truncate rounded px-2 py-1.5 text-left text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring ${
+                      node.id === value ? "bg-muted font-medium" : ""
+                    }`}
+                  >
+                    {node.title}
+                    <span className="sr-only"> — {i18n.t(`knowledge.kind.${node.kind}`)}</span>
+                  </button>
+                ) : (
+                  <span className="min-w-0 flex-1 truncate px-2 py-1.5 text-sm text-muted-foreground">
+                    {node.title}
+                  </span>
+                )}
+                {canOpen ? (
+                  <button
+                    type="button"
+                    onClick={() => setOpenFolder(node.id)}
+                    aria-label={i18n.t("picker.open", { title: node.title })}
+                    className="inline-flex size-7 shrink-0 items-center justify-center rounded outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+                  >
+                    <Folder aria-hidden="true" className="size-4" />
+                  </button>
+                ) : null}
+              </li>
+            );
+          })}
+          {shown.length === 0 ? (
+            <li className="px-3 py-2 text-sm text-muted-foreground">{i18n.t("picker.nothing")}</li>
+          ) : null}
+        </ul>
+      </div>
+    </div>
+  );
+}