@anchrd/intel-ui 0.8.6 → 0.8.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.8.6",
+  "version": "0.8.8",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {

package/src/app/user-footer/user-footer.tsx

@@ -1,6 +1,6 @@
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
-import { ChevronsUpDown, LogOut, User, Wrench } from "lucide-react";
+import { Archive as ArchiveIcon, ChevronsUpDown, LogOut, User, Wrench } from "lucide-react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -76,6 +76,12 @@ export function UserFooter() {
               <Wrench aria-hidden="true" />
               {i18n.t("nav.tools")}
             </DropdownMenuItem>
+            {/* The archive lives here rather than in the tree: it is not a place things are IN,
+                it is where they went when they left the tree (#113). */}
+            <DropdownMenuItem onSelect={() => void navigate({ to: "/archive" })}>
+              <ArchiveIcon aria-hidden="true" />
+              {i18n.t("archive.title")}
+            </DropdownMenuItem>
             <DropdownMenuSeparator />
             <DropdownMenuItem
               disabled={logout.isPending}

package/src/archive/archive.tsx

@@ -0,0 +1,154 @@
+import type { Flow, KnowledgeNode } from "@anchrd/intel-contract";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { ArchiveRestore } from "lucide-react";
+import { kindIcons } from "@/kind-icon.ts";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+// One archived thing, whichever side of the tree it came from. The two records stay apart
+// everywhere else (ADR-0004); here they are one list because "what did I throw away" is one
+// question, and an archive split in two would make somebody ask it twice.
+interface ArchivedEntry {
+  id: string;
+  title: string;
+  kind: KnowledgeNode["kind"] | "flow";
+  archivedAt: string;
+  updatedAt: string;
+  restore(): Promise<unknown>;
+}
+
+export function Archive() {
+  const { data, i18n } = useIntelRouterContext();
+  const queryClient = useQueryClient();
+
+  const archived = useQuery({
+    queryKey: ["archive"],
+    queryFn: async (): Promise<ArchivedEntry[]> => {
+      const [knowledge, flows] = await Promise.all([
+        data.listKnowledge({ archivedOnly: true }),
+        data.listFlows({ archivedOnly: true }),
+      ]);
+      const entries: ArchivedEntry[] = [
+        ...knowledge.items.flatMap((node) =>
+          node.archivedAt
+            ? [
+                {
+                  id: node.id,
+                  title: node.title,
+                  kind: node.kind,
+                  archivedAt: node.archivedAt,
+                  updatedAt: node.updatedAt,
+                  restore: () =>
+                    data.archiveKnowledge({
+                      nodeId: node.id,
+                      baseUpdatedAt: node.updatedAt,
+                      archived: false,
+                      idempotencyKey: crypto.randomUUID(),
+                    }),
+                } satisfies ArchivedEntry,
+              ]
+            : [],
+        ),
+        ...flows.items.flatMap((flow: Flow) =>
+          flow.archivedAt
+            ? [
+                {
+                  id: flow.id,
+                  title: flow.title,
+                  kind: "flow" as const,
+                  archivedAt: flow.archivedAt,
+                  updatedAt: flow.updatedAt,
+                  restore: () =>
+                    data.archiveFlow({
+                      flowId: flow.id,
+                      baseUpdatedAt: flow.updatedAt,
+                      archived: false,
+                      idempotencyKey: crypto.randomUUID(),
+                    }),
+                } satisfies ArchivedEntry,
+              ]
+            : [],
+        ),
+      ];
+      // Newest first, across both kinds: the thing somebody is looking for is almost always the
+      // thing they just archived.
+      return entries.sort((a, b) => b.archivedAt.localeCompare(a.archivedAt));
+    },
+  });
+
+  // ⚠️ `baseUpdatedAt` from the row that is on screen, exactly as archiving used it. Restoring is
+  // a change like any other and takes the same conflict route — without it, two people tidying up
+  // at once would silently overwrite each other.
+  const restore = useMutation({
+    mutationFn: async (entry: ArchivedEntry) => await entry.restore(),
+    onSuccess: async () => {
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["archive"] }),
+        // The tree gets it back, so every level has to be asked again — the entry may sit
+        // anywhere, and the archive does not know where.
+        queryClient.invalidateQueries({ queryKey: ["tree"] }),
+        queryClient.invalidateQueries({ queryKey: ["knowledge-graph"] }),
+        queryClient.invalidateQueries({ queryKey: ["flows"] }),
+      ]);
+    },
+  });
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="border-b px-6 py-4">
+        <h1 className="text-lg font-medium text-foreground">{i18n.t("archive.title")}</h1>
+        <p className="mt-1 max-w-prose text-sm text-muted-foreground">
+          {i18n.t("archive.description")}
+        </p>
+      </div>
+      <div className="min-h-0 flex-1 overflow-y-auto px-6 py-4">
+        {archived.isError ? (
+          <p role="alert" className="text-sm text-destructive">
+            {i18n.t("archive.failed")}
+          </p>
+        ) : null}
+        {restore.isError ? (
+          <p role="alert" className="mb-4 text-sm text-destructive">
+            {i18n.t("archive.restoreFailed")}
+          </p>
+        ) : null}
+        {archived.data?.length === 0 ? (
+          <p className="text-sm text-muted-foreground">{i18n.t("archive.empty")}</p>
+        ) : null}
+        <ul className="grid gap-1">
+          {(archived.data ?? []).map((entry) => (
+            <li
+              key={`${entry.kind}-${entry.id}`}
+              className="flex items-center gap-3 rounded-md border px-3 py-2"
+            >
+              {(() => {
+                // The same map the tree and the folder table draw from — a second one here would
+                // drift the first time a kind is added.
+                const Icon = kindIcons[entry.kind];
+                return (
+                  <Icon aria-hidden="true" className="size-4 shrink-0 text-muted-foreground" />
+                );
+              })()}
+              <span className="sr-only">{i18n.t(`knowledge.kind.${entry.kind}`)}</span>
+              <span className="grid min-w-0 flex-1 leading-tight">
+                <span className="truncate text-sm font-medium">{entry.title}</span>
+                <span className="truncate text-xs text-muted-foreground">
+                  {i18n.t("archive.archivedAt", { when: entry.archivedAt.slice(0, 10) })}
+                </span>
+              </span>
+              <button
+                type="button"
+                disabled={restore.isPending}
+                onClick={() => restore.mutate(entry)}
+                aria-label={i18n.t("archive.restore", { title: entry.title })}
+                className="inline-flex h-8 shrink-0 items-center gap-2 rounded-md border px-3 text-sm font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-60"
+              >
+                <ArchiveRestore aria-hidden="true" className="size-4" />
+                {i18n.t("archive.restoreAction")}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

package/src/data/intel-data-provider/intel-data-provider.ts

@@ -165,6 +165,7 @@ export function createIntelDataProvider(
     // Same rule as `parentId`: only the asked-for case is sent. The default is the server's, and a
     // provider that spells it out anyway would have to be changed whenever the server's is.
     if (query.includeArchived) params.set("includeArchived", "true");
+    if (query.archivedOnly) params.set("archivedOnly", "true");
     const search = params.toString();
     return await request(`/flows${search ? `?${search}` : ""}`, FlowList);
   }
@@ -175,6 +176,10 @@ export function createIntelDataProvider(
     const query = ListKnowledgeNodesInput.parse(input);
     const params = new URLSearchParams({ includeArchived: String(query.includeArchived) });
     if (query.parentId !== null) params.set("parentId", query.parentId);
+    // Only the asked-for case travels: `archivedOnly` overrides the folder on the server, so
+    // sending it as `false` on every tree read would be noise on the one request it never applies
+    // to (#113).
+    if (query.archivedOnly) params.set("archivedOnly", "true");
     return await request(`/knowledge?${params}`, KnowledgeNodeList);
   }
 

package/src/data/sign-in/sign-in.ts

@@ -65,3 +65,33 @@ export function createBrowserSignIn(loginPath: (returnTo?: string) => string): S
     loginPath,
   });
 }
+
+/**
+ * What to do with a 401, across all of them at once (#130).
+ *
+ * ⚠️ The reason this is a guard and not a call to `attempt()` at each 401: a first load without a
+ * session fires several requests together — session, tree, flows — and every one of them answers
+ * 401. The first starts the redirect; the rest arrive while the browser is still on this page,
+ * find the marker the first one just wrote, and read it as "we already tried, this is a loop". It
+ * is not — it is this very sign-in, still in flight.
+ *
+ * Without `leaving`, the interface refuses itself before it can leave, and nobody reaches the
+ * login at all. That is worse than the loop this whole mechanism exists to prevent: a loop still
+ * eventually shows a login, a self-refusal never does.
+ */
+export function createSignInGuard(signIn: SignIn, onRefused: () => void): () => void {
+  let leaving = false;
+  // Latches for its own reason: once the surface has turned down a freshly issued credential,
+  // later 401s say nothing new, and repainting for each would flicker the screen once per request
+  // the page had in flight.
+  let refused = false;
+  return () => {
+    if (leaving || refused) return;
+    if (signIn.attempt()) {
+      leaving = true;
+      return;
+    }
+    refused = true;
+    onRefused();
+  };
+}

package/src/i18n/en.json

@@ -73,6 +73,14 @@
   "resource.rename": "Rename",
   "resource.renameTitle": "Rename {title}",
   "resource.archive": "Archive",
+  "archive.title": "Archive",
+  "archive.description": "Everything you archived, newest first. Restoring puts an entry back where it was filed.",
+  "archive.restore": "Restore {title}",
+  "archive.restoreAction": "Restore",
+  "archive.empty": "Nothing is archived.",
+  "archive.failed": "The archive could not be read. Check your access and try again.",
+  "archive.restoreFailed": "It was not restored. Somebody else may have changed it — reload and try again.",
+  "archive.archivedAt": "Archived {when}",
   "resource.conflict": "It was not changed: somebody else changed this entry first. Reload it and try again.",
   "resource.forbidden": "It was not changed: you may not change this entry.",
   "resource.failed": "The change was not saved. Reload the latest version and try again.",

package/src/main.tsx

@@ -6,7 +6,7 @@ import {
   createIntelDataProvider,
   loginPath,
 } from "@/data/intel-data-provider/intel-data-provider.ts";
-import { createBrowserSignIn } from "@/data/sign-in/sign-in.ts";
+import { createBrowserSignIn, createSignInGuard } from "@/data/sign-in/sign-in.ts";
 import { createI18n } from "@/i18n/i18n.ts";
 import { createIntelRouter } from "@/router/router.tsx";
 import { SignInRefused } from "@/sign-in-refused/sign-in-refused.tsx";
@@ -23,18 +23,15 @@ const signIn = createBrowserSignIn(loginPath);
 const mounted = createRoot(root);
 const queryClient = new QueryClient();
 
-// ⚠️ The shell is painted from a function because a refused sign-in has to replace it, and that
-// refusal arrives from inside a fetch rather than from React. `refused` latches: once the surface
-// has turned down a freshly issued credential, later 401s say nothing new, and re-painting for each
-// one would flicker the screen as many times as the page had requests in flight (#118).
+// The shell is painted from a function because a refused sign-in has to replace it, and that
+// refusal arrives from inside a fetch rather than from React.
 let refused = false;
 
 const data = createIntelDataProvider({
-  onUnauthorized: () => {
-    if (signIn.attempt() || refused) return;
+  onUnauthorized: createSignInGuard(signIn, () => {
     refused = true;
     paint();
-  },
+  }),
 });
 const router = createIntelRouter({ data, i18n });
 

package/src/router/router.tsx

@@ -27,13 +27,25 @@ const flowsRoute = createRoute({
   validateSearch: selectionSearch,
   component: lazyRouteComponent(() => import("@/flows/flows.tsx"), "Flows"),
 });
+const archiveRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/archive",
+  validateSearch: selectionSearch,
+  component: lazyRouteComponent(() => import("@/archive/archive.tsx"), "Archive"),
+});
 const toolsRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: "/tools",
   validateSearch: selectionSearch,
   component: lazyRouteComponent(() => import("@/tools/tools.tsx"), "Tools"),
 });
-const routeTree = rootRoute.addChildren([redirectRoute, knowledgeRoute, flowsRoute, toolsRoute]);
+const routeTree = rootRoute.addChildren([
+  redirectRoute,
+  knowledgeRoute,
+  flowsRoute,
+  toolsRoute,
+  archiveRoute,
+]);
 
 export function createIntelRouter(context: RouterContext) {
   return createRouter({ routeTree, context });