@anchrd/intel 0.59.0

package/ui/src/feed/feed.tsx

@@ -0,0 +1,344 @@
+import { type FeedEvent, feedKindOf } from "@contract/feed.ts";
+import { useInfiniteQuery, useQueries } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+import { Check, Filter } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { cn } from "@/lib/utils.ts";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { RelativeTime } from "@/time/relative-time.tsx";
+import { initials, useSessionUser } from "@/user-name/user-name.ts";
+
+const PageSize = 30;
+
+// How many steps of the trail a card shows.
+//
+// ⚠️ The LAST ones, not the first, and that is the whole decision (#758). A path answers "where does
+// this sit", and the answer is at its end: `… / system / Kundenwissen` says where `Kunde A` lives,
+// `Agenten / Anton Anchrd / sys…` says where the tree begins, which every card shares. Cutting from
+// the front is what `truncate` does on its own, so this has to be decided here rather than left to
+// CSS.
+const TrailSteps = 2;
+
+/** The tail of a trail, with a leading ellipsis where something was cut. */
+export function shortTrail(titles: readonly string[]): string {
+  if (titles.length <= TrailSteps) return titles.join(" / ");
+  return `… / ${titles.slice(-TrailSteps).join(" / ")}`;
+}
+
+// Who to show. Only the first two reach the server; `people` is applied here because whether an
+// actor is a machine is Gate's answer and arrives with the names, not with the events.
+type Audience = "all" | "mine" | "people";
+
+/**
+ * What happened, newest first, one card per event.
+ *
+ * ⚠️ **The shape is the archive's** — a header with a rule that appears on scroll, then the
+ * scrolling area — because this is a page of the same kind and a second layout for it would be a
+ * second set of answers to "where does the title go". What differs is inside: the list is capped
+ * and centred rather than full width.
+ */
+export function Feed() {
+  const { data } = useIntelRouterContext();
+  const i18n = useI18n();
+  const me = useSessionUser();
+  const navigate = useNavigate();
+  const [audience, setAudience] = useState<Audience>("all");
+  const [scrolled, setScrolled] = useState(false);
+
+  // ⚠️ The audience belongs in the key. "Only mine" is a different question with a different
+  // answer, and sharing one cache entry would show the wrong list for a frame after the switch.
+  //
+  // ⚠️ `mine` reaches the server, `people` does not: the server has no idea which actor is a
+  // machine. Putting `people` in the key anyway would split the cache for a filter that changes
+  // nothing about the request — so it is deliberately absent from what travels.
+  const actor = audience === "mine" ? (me?.id ?? null) : null;
+  const feed = useInfiniteQuery({
+    queryKey: ["feed", actor],
+    queryFn: ({ pageParam }) =>
+      data.listFeed({
+        limit: PageSize,
+        ...(pageParam ? { before: pageParam } : {}),
+        ...(actor ? { actor } : {}),
+      }),
+    initialPageParam: null as string | null,
+    getNextPageParam: (last) => last.nextCursor,
+    // Asking with `actor: null` for "only mine" would be the whole feed, which is the opposite of
+    // what was asked for. Better to render nothing for the instant before the session arrives.
+    enabled: audience !== "mine" || me !== null,
+  });
+
+  const events = useMemo(() => feed.data?.pages.flatMap((page) => page.events) ?? [], [feed.data]);
+
+  // ⚠️ One resolve per PAGE, and PER page rather than over everything loaded so far. A page is
+  // thirty cards and often three people, so resolving a single id per card would open thirty
+  // requests for three names — that much is obvious. The half that is not: asking again for the
+  // GROWING union on every page walks straight into the contract's `max(100)` and takes the endless
+  // scroll down with a Zod error, on exactly the busy folder the feed is for.
+  //
+  // One query per page keeps every ask at most a page wide, and TanStack keeps the earlier answers
+  // rather than re-fetching them.
+  const nameQueries = useQueries({
+    queries: (feed.data?.pages ?? []).map((page) => {
+      const ids = [...new Set(page.events.map((entry) => entry.actorId))].sort();
+      return {
+        queryKey: ["feed-actor-names", ids],
+        // ⚠️ Never reached with an empty list: the contract refuses it (`min(1)`), and the refusal
+        // would surface as a broken page rather than as the empty answer it means.
+        enabled: ids.length > 0,
+        queryFn: () => data.resolveNames(ids),
+        staleTime: 5 * 60 * 1000,
+      };
+    }),
+  });
+  // ⚠️ Built on every render rather than memoised, and the first attempt at this is why it says
+  // so: keyed on `feed.data` the map was never rebuilt when the NAMES arrived, because the pages
+  // had not changed — every card showed "a user account" for good. A few dozen entries cost
+  // nothing to rebuild, and a dependency that has to be exactly right to be correct is a worse
+  // trade than the work it saves.
+  const people = new Map<string, { name: string; isMachine: boolean }>();
+  for (const query of nameQueries) {
+    for (const person of query.data?.items ?? []) {
+      people.set(person.id, { name: person.name, isMachine: person.isMachine });
+    }
+  }
+
+  // ⚠️ Filtering people out here can empty a whole page while older ones still hold cards, so the
+  // sentinel below has to keep asking rather than stopping at the first empty result.
+  const shown =
+    audience === "people"
+      ? events.filter((event) => people.get(event.actorId)?.isMachine !== true)
+      : events;
+
+  const sentinel = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    const element = sentinel.current;
+    if (!element) return;
+    const observer = new IntersectionObserver((entries) => {
+      // `hasNextPage` and `isFetchingNextPage` are read inside the callback rather than closed over
+      // at setup: the observer outlives several renders, and a stale `false` would end the scroll
+      // silently at whatever page happened to be loaded when it was created.
+      if (entries.some((entry) => entry.isIntersecting)) void feed.fetchNextPage();
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [feed.fetchNextPage]);
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      {/* The rule belongs to the scroll state, and the width is set from the start so that showing
+          it moves nothing (#741). */}
+      <div
+        data-slot="pane-header"
+        className={cn(
+          "flex items-start justify-between gap-4 border-b border-transparent px-6 py-4 transition-colors motion-reduce:transition-none",
+          scrolled && "border-border",
+        )}
+      >
+        <div>
+          <h1 className="text-lg font-medium text-foreground">{i18n.t("feed.title")}</h1>
+          <p className="mt-1 max-w-prose text-sm text-muted-foreground">
+            {i18n.t("feed.description")}
+          </p>
+        </div>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            aria-label={i18n.t("feed.filter")}
+            className="rounded-md p-1 text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            <Filter aria-hidden="true" className="size-4" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel>{i18n.t("feed.filter")}</DropdownMenuLabel>
+            {(["all", "mine", "people"] as const).map((option) => (
+              <DropdownMenuItem
+                key={option}
+                onSelect={() => setAudience(option)}
+                className="gap-2"
+                data-slot={`feed-audience-${option}`}
+                aria-current={audience === option}
+              >
+                <Check
+                  aria-hidden="true"
+                  className={cn("size-4", audience !== option && "invisible")}
+                />
+                {i18n.t(`feed.audience.${option}`)}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div
+        data-slot="pane-body"
+        onScroll={(event) => setScrolled(event.currentTarget.scrollTop > 0)}
+        className="min-h-0 flex-1 overflow-y-auto px-6 py-4"
+      >
+        <div className="mx-auto max-w-3xl">
+          {feed.isPending && (
+            <p className="text-sm text-muted-foreground">{i18n.t("common.loading")}</p>
+          )}
+          {feed.isError && (
+            <div role="alert" className="space-y-3 text-sm">
+              <p className="text-destructive">{i18n.t("feed.failed")}</p>
+              <button
+                type="button"
+                onClick={() => void feed.refetch()}
+                className="rounded-md border px-3 py-2 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                {i18n.t("common.retry")}
+              </button>
+            </div>
+          )}
+          {feed.data && shown.length === 0 && (
+            <div className="space-y-2 text-sm text-muted-foreground">
+              <p>{i18n.t("feed.empty")}</p>
+              {/* ⚠️ Two states look identical and are not, so the second one is said out loud. A
+                  feed showing only yourself is what sharing nothing with anybody looks like, and a
+                  reader who takes it for a fault will go looking for one that is not there. */}
+              <p>{i18n.t("feed.emptyWhy")}</p>
+              {/* ⚠️ The SECOND state the ticket names, and it is not an empty list: it is a gap
+                  inside a list that looks complete. Somebody whose read access to a folder was
+                  withdrawn loses their OWN older entries from it, and without this sentence the
+                  next reader goes looking for a fault that is not there — or loosens the filter
+                  and opens the authorization while "repairing" it. */}
+              <p>{i18n.t("feed.gapWhy")}</p>
+            </div>
+          )}
+          {shown.length > 0 && (
+            <ul className="flex flex-col gap-2">
+              {shown.map((event) => (
+                <FeedCard
+                  key={event.id}
+                  event={event}
+                  person={people.get(event.actorId) ?? null}
+                  isMe={event.actorId === me?.id}
+                  // ⚠️ Which surface the card leads to is decided by the ACTION, through
+                  // `feedKindOf`, and not by a field on the event. A flow does not open in the
+                  // knowledge tree — sending one there lands on a selection nothing matches, an
+                  // empty pane with no error, which is the worst of the three possible outcomes.
+                  open={(resourceId) =>
+                    void navigate({
+                      to: feedKindOf(event.action) === "flow" ? "/flows" : "/nodes",
+                      search: { select: resourceId },
+                    })
+                  }
+                />
+              ))}
+            </ul>
+          )}
+          {/* The end of the list, and what keeps it going. There is no button: the answer to "is
+              there more" is the cursor, and the observer above asks for it. */}
+          <div ref={sentinel} aria-hidden="true" className="h-8" />
+          {feed.isFetchingNextPage && (
+            <p className="py-2 text-center text-xs text-muted-foreground">
+              {i18n.t("common.loading")}
+            </p>
+          )}
+          {feed.data && !feed.hasNextPage && shown.length > 0 && (
+            <div className="space-y-1 py-2 text-center text-xs text-muted-foreground">
+              <p>{i18n.t("feed.end")}</p>
+              {/* The same sentence at the other end: this is where somebody notices that an older
+                  entry of their own is missing, and where the reason belongs. */}
+              <p>{i18n.t("feed.gapWhy")}</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FeedCard({
+  event,
+  person,
+  isMe,
+  open,
+}: {
+  event: FeedEvent;
+  person: { name: string; isMachine: boolean } | null;
+  isMe: boolean;
+  open(resourceId: string): void;
+}) {
+  const i18n = useI18n();
+  // ⚠️ Never the raw id. A person we cannot name is "a user account", which is the wording every
+  // other surface uses for the same gap (#258) — an id under a name is the question again in
+  // smaller type.
+  const who = isMe ? i18n.t("feed.you") : (person?.name ?? i18n.t("node.someUser"));
+  // What the button on this card says, and it is not always a version. A `node.save` records
+  // `{versionId, sequence}`, a `node.share` records `{principalType, verb}` — so a sharing card
+  // names the RIGHT that was granted. Both lead to the node: there is no route to a single version
+  // in this interface, and the access summary lives on the node itself (#742).
+  const sequence = typeof event.metadata.sequence === "number" ? event.metadata.sequence : null;
+  const verb = typeof event.metadata.verb === "string" ? event.metadata.verb : null;
+  const mark =
+    sequence !== null
+      ? i18n.t("feed.version", { sequence: String(sequence) })
+      : verb !== null
+        ? i18n.t(`node.verb.${verb}`)
+        : null;
+
+  return (
+    <li className="flex items-start gap-3 rounded-lg bg-muted/40 px-4 py-3">
+      <span
+        aria-hidden="true"
+        className={cn(
+          "grid size-8 shrink-0 place-items-center text-xs font-medium",
+          // A square for an agent, a circle for a person: the two are told apart before either
+          // name is read.
+          person?.isMachine
+            ? "rounded-md bg-accent text-accent-foreground"
+            : "rounded-full bg-secondary text-secondary-foreground",
+        )}
+      >
+        {initials(person?.name ?? who)}
+      </span>
+      <span className="grid min-w-0 flex-1 gap-1">
+        <span className="text-sm leading-snug">
+          {i18n.t(`feed.action.${event.action}`, { who, title: event.resourceTitle })}
+        </span>
+        {/* ⚠️ `min-w-0` is not decoration. A grid item defaults to `min-width: auto`, so without it
+            this row grows to whatever the path needs and pushes the button PAST the card's edge —
+            which is what a four-step path did on a phone. `truncate` below cannot save it either: it
+            shortens against the width it is given, and its parent was already too wide. */}
+        <span className="flex min-w-0 items-center justify-between gap-3">
+          <span
+            className="truncate text-xs text-muted-foreground"
+            // The whole path stays reachable where there is a pointer to rest.
+            title={event.path.map((step) => step.title).join(" / ")}
+          >
+            {shortTrail(event.path.map((step) => step.title))}
+          </span>
+          {/* ⚠️ A button, not a label. The whole point of the mark is getting there, and a span
+              carries no focus — so the keyboard requirement could not be met by a surface that had
+              nothing to focus at all.
+
+              ⚠️ It opens the NODE in both cases. There is no route to a single version here, and
+              the access summary lives on the node; the mark still says WHICH version or WHICH
+              right the card was about, which is the part the reader came for. */}
+          {mark !== null && (
+            <button
+              type="button"
+              onClick={() => open(event.resourceId)}
+              aria-label={i18n.t("feed.open", { title: event.resourceTitle, mark })}
+              className="shrink-0 rounded bg-muted px-2 py-0.5 font-mono text-[11px] text-muted-foreground outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {mark}
+            </button>
+          )}
+        </span>
+        {/* The shared component, not a second way of saying the same thing: it carries the exact
+            moment in a tooltip that is reachable by keyboard, and "19 hours ago" is not something
+            anybody translates back into a time of day. */}
+        <RelativeTime value={event.occurredAt} className="text-xs text-muted-foreground" />
+      </span>
+    </li>
+  );
+}