@anchrd/intel-ui 0.23.0 → 0.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.23.0",
+  "version": "0.28.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {
@@ -33,7 +33,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@anchrd/intel-contract": "^0.16.0",
+    "@anchrd/intel-contract": "^0.17.0",
     "@blocknote/core": "^0.52.1",
     "@blocknote/react": "^0.52.1",
     "@blocknote/shadcn": "^0.52.1",

package/src/access-summary/access-summary.tsx

@@ -0,0 +1,282 @@
+import type { ResourceGrant } from "@anchrd/intel-contract/share";
+import { useQuery } from "@tanstack/react-query";
+import { useId, useState } from "react";
+import { createPortal } from "react-dom";
+import { AppLogo } from "@/branding/branding.tsx";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { useUserName } from "@/user-name/user-name.ts";
+
+type Principal = ResourceGrant["principal"];
+
+type GrantGroup = {
+  key: string;
+  principal: Principal;
+  grants: ResourceGrant[];
+  owner: boolean;
+};
+
+function principalKey(principal: Principal): string {
+  if (principal.type === "organization") return "organization";
+  if (principal.type === "email") return `email:${principal.email.toLowerCase()}`;
+  return `user:${principal.id}`;
+}
+
+function groupGrants(grants: ResourceGrant[], ownerIds: string[] = []): GrantGroup[] {
+  const grouped = new Map<string, GrantGroup>();
+  for (const ownerId of ownerIds) {
+    grouped.set(`user:${ownerId}`, {
+      key: `user:${ownerId}`,
+      principal: { type: "user", id: ownerId },
+      grants: [],
+      owner: true,
+    });
+  }
+  for (const grant of grants) {
+    const key = principalKey(grant.principal);
+    const group = grouped.get(key);
+    if (group) group.grants.push(grant);
+    else grouped.set(key, { key, principal: grant.principal, grants: [grant], owner: false });
+  }
+  return [...grouped.values()];
+}
+
+function initials(value: string): string {
+  const parts = value
+    .replace(/@.*$/, "")
+    .split(/[\s._+-]+/)
+    .filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return (parts[0]?.slice(0, 2) ?? "?").toUpperCase();
+  return `${parts[0]?.[0] ?? ""}${parts.at(-1)?.[0] ?? ""}`.toUpperCase();
+}
+
+function usePrincipalLabel(principal: Principal): string {
+  const i18n = useI18n();
+  const userName = useUserName(principal.type === "user" ? principal.id : null);
+  if (principal.type === "organization") return i18n.t("node.organization");
+  if (principal.type === "email") return principal.email;
+  return userName ?? i18n.t("node.someUser");
+}
+
+const circleTones = [
+  "bg-muted text-muted-foreground",
+  "bg-accent text-accent-foreground",
+  "bg-secondary text-secondary-foreground",
+] as const;
+
+function AccessCircle({
+  group,
+  position,
+  count,
+  expanded,
+  controls,
+  activate,
+}: {
+  group: GrantGroup;
+  position: number;
+  count: number;
+  expanded: boolean;
+  controls: string;
+  activate(element: HTMLButtonElement): void;
+}) {
+  const i18n = useI18n();
+  const label = usePrincipalLabel(group.principal);
+  const circle = (
+    <button
+      type="button"
+      aria-label={position === 0 ? `${i18n.t("node.accessDetails", { count })}: ${label}` : label}
+      aria-expanded={expanded}
+      aria-controls={controls}
+      data-organization-access={group.principal.type === "organization" ? "" : undefined}
+      onClick={(event) => activate(event.currentTarget)}
+      className={`relative flex size-7 items-center justify-center rounded-full text-xs font-medium ring-2 ring-background outline-none transition hover:z-10 hover:scale-105 focus-visible:z-10 focus-visible:ring-ring ${circleTones[position % circleTones.length]}`}
+    >
+      {group.principal.type === "organization" ? (
+        <AppLogo className="size-4 rounded-none bg-transparent text-current [&_svg]:size-3" />
+      ) : (
+        initials(label)
+      )}
+    </button>
+  );
+  return (
+    <TooltipProvider delayDuration={300}>
+      <Tooltip>
+        <TooltipTrigger asChild>{circle}</TooltipTrigger>
+        <TooltipContent>
+          {group.principal.type === "organization" ? i18n.t("node.organizationAccess") : label}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+function AccessDetail({
+  group,
+  onRevoke,
+}: {
+  group: GrantGroup;
+  onRevoke?(grantId: string): void;
+}) {
+  const i18n = useI18n();
+  const label = usePrincipalLabel(group.principal);
+  return (
+    <li className="flex items-start justify-between gap-3 text-sm">
+      <span className="min-w-0">
+        <span className="block truncate font-medium">{label}</span>
+        <span className="text-xs text-muted-foreground">
+          {[
+            ...(group.owner ? [i18n.t("node.owner")] : []),
+            ...group.grants.map((grant) => i18n.t(`node.verb.${grant.verb}`)),
+          ].join(", ")}
+        </span>
+      </span>
+      {onRevoke ? (
+        <span className="flex flex-wrap justify-end gap-1">
+          {group.grants.map((grant) => (
+            <button
+              key={grant.id}
+              type="button"
+              onClick={() => onRevoke(grant.id)}
+              aria-label={i18n.t("node.revokeVerbFor", {
+                verb: i18n.t(`node.verb.${grant.verb}`),
+                recipient: label,
+              })}
+              className="rounded px-2 py-1 text-xs text-destructive outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {i18n.t("node.revokeVerb", { verb: i18n.t(`node.verb.${grant.verb}`) })}
+            </button>
+          ))}
+        </span>
+      ) : null}
+    </li>
+  );
+}
+
+export function AccessSummary({
+  grants,
+  ownerId,
+  ownerIds,
+  onRevoke,
+}: {
+  grants: ResourceGrant[];
+  ownerId?: string;
+  ownerIds?: string[];
+  onRevoke?(grantId: string): void;
+}) {
+  const i18n = useI18n();
+  const groups = groupGrants(grants, ownerIds ?? (ownerId ? [ownerId] : []));
+  const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState({ top: 8, left: 8 });
+  const detailsId = useId();
+  const organizationDescriptionId = useId();
+  if (groups.length === 0) return null;
+  const visible = groups.slice(0, 3);
+  const overflow = groups.length - visible.length;
+  const toggle = (element: HTMLButtonElement) => {
+    setOpen((current) => {
+      if (!current) {
+        const rect = element.getBoundingClientRect();
+        const panelHeight = Math.min(320, window.innerHeight - 16);
+        const below = window.innerHeight - rect.bottom;
+        setPosition({
+          top: below >= panelHeight ? rect.bottom + 4 : Math.max(8, rect.top - panelHeight - 4),
+          left: Math.max(8, Math.min(rect.left, window.innerWidth - 328)),
+        });
+      }
+      return !current;
+    });
+  };
+
+  return (
+    <div className="relative flex w-fit items-center -space-x-2" data-access-summary="">
+      {visible.map((group, position) => (
+        <AccessCircle
+          key={group.key}
+          group={group}
+          position={position}
+          count={groups.length}
+          expanded={open}
+          controls={detailsId}
+          activate={toggle}
+        />
+      ))}
+      {overflow > 0 ? (
+        <button
+          type="button"
+          aria-label={i18n.t("node.accessDetails", { count: groups.length })}
+          aria-expanded={open}
+          aria-controls={detailsId}
+          onClick={(event) => toggle(event.currentTarget)}
+          className="relative flex size-7 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground ring-2 ring-background outline-none transition hover:z-10 hover:scale-105 focus-visible:z-10 focus-visible:ring-ring"
+        >
+          +{overflow}
+        </button>
+      ) : null}
+      {groups.some((group) => group.principal.type === "organization") ? (
+        <span id={organizationDescriptionId} className="sr-only">
+          {i18n.t("node.organizationAccess")}
+        </span>
+      ) : null}
+      {open
+        ? createPortal(
+            <div
+              id={detailsId}
+              data-access-details=""
+              className="fixed z-50 max-h-[calc(100dvh-1rem)] w-80 overflow-y-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-md"
+              style={position}
+            >
+              <ul className="space-y-3">
+                {groups.map((group) => (
+                  <AccessDetail key={group.key} group={group} {...(onRevoke ? { onRevoke } : {})} />
+                ))}
+              </ul>
+            </div>,
+            document.querySelector('[role="dialog"]') ?? document.body,
+          )
+        : null}
+    </div>
+  );
+}
+
+/**
+ * The compact access view for a resource the reader can manage.
+ *
+ * `node_grant_list` is itself authorized: a reader who may see the node but may not inspect its
+ * grants gets no names here. Treating that refusal as an empty summary is deliberate; rendering an
+ * error or retry would disclose that there are grants to ask about (#484).
+ */
+export function ResourceAccessSummary({
+  resourceId,
+  ownerId,
+}: {
+  resourceId: string;
+  ownerId: string;
+}) {
+  const { data } = useIntelRouterContext();
+  const grants = useQuery({
+    queryKey: ["effective-node-grants", resourceId],
+    queryFn: () => data.listEffectiveAccess(resourceId),
+    retry: false,
+    // Time cannot change this answer locally. Share mutations invalidate the whole effective prefix
+    // because changing one folder also changes every descendant summary already on screen.
+    staleTime: Number.POSITIVE_INFINITY,
+  });
+  if (!grants.data) return null;
+  return (
+    <AccessSummary
+      grants={grants.data.items}
+      ownerIds={
+        grants.data.ownerIds.includes(ownerId)
+          ? grants.data.ownerIds
+          : [ownerId, ...grants.data.ownerIds]
+      }
+    />
+  );
+}

package/src/app/app-tree/app-tree.tsx

@@ -85,6 +85,16 @@ function levelKey(level: Level): readonly unknown[] {
   return level.type === "flow" ? ["flow-calls", level.id] : treeLevelKey(level.id);
 }
 
+// What a drag carries: the row, and the LEVEL it was picked up from.
+//
+// ⚠️ The two are not the same, and that is the whole of #446. Since #429 the root level also shows
+// rows whose own record names a folder this reader may never see — a shared document reaches the
+// root only through the share. Asking `parentOf` again during the move answers with that invisible
+// folder, and then the root offers "move to the top" to a row already at the top, while the level
+// it actually left is never cleaned up. The level is known where the row is rendered; carrying it
+// is cheaper than deriving it wrongly.
+type Carried = { entry: TreeEntry; level: string | null };
+
 // What a row puts on the clipboard for anybody outside the tree. Its own media type rather than
 // `text/plain`, so a drop target that means "move this row" and one that means "make a node for
 // this" cannot be confused by the same payload.
@@ -99,8 +109,8 @@ export function AppTree() {
   const [creating, setCreating] = useState<Creating | null>(null);
   const [uploadTo, setUploadTo] = useState<string | null>(null);
   const uploadInput = useRef<HTMLInputElement>(null);
-  const [dragged, setDragged] = useState<TreeEntry | null>(null);
-  const draggedRef = useRef<TreeEntry | null>(null);
+  const [dragged, setDragged] = useState<Carried | null>(null);
+  const draggedRef = useRef<Carried | null>(null);
   // Which target the pointer is over: `undefined` for none, `null` for the root strip, an id for a
   // folder row. Three answers, because "the root" and "nothing" are not the same drop.
   const [over, setOver] = useState<string | null | undefined>(undefined);
@@ -273,14 +283,15 @@ export function AppTree() {
   // What a drop on this target would do. `undefined` means nothing is being dragged, so the target
   // is not a target at all.
   function verdictFor(
-    carried: TreeEntry | null,
+    carried: Carried | null,
     targetId: string | null,
     targetAncestors: ReadonlySet<string>,
   ) {
     if (!carried) return undefined;
     return moveVerdict({
-      draggedId: carried.id,
-      draggedParentId: parentOf(carried),
+      draggedId: carried.entry.id,
+      draggedParentId: parentOf(carried.entry),
+      draggedLevel: carried.level,
       targetId,
       targetAncestors,
     });
@@ -313,7 +324,7 @@ export function AppTree() {
           setDragged(null);
           draggedRef.current = null;
           if (carried && verdictFor(carried, target.id, ancestors) === "ok") {
-            move.start(carried, target);
+            move.start(carried.entry, carried.level, target);
           }
         },
       },
@@ -436,7 +447,7 @@ export function AppTree() {
     // default cursor while a drag is in progress, which is the answer "not here" without a word.
     const drop =
       isFolder && !derived ? dropHandlers({ id: entry.id, title: entry.title }, ancestors) : null;
-    const isDragged = dragged?.id === entry.id;
+    const isDragged = dragged?.entry.id === entry.id;
     // While a drag is in progress every row says which of the three it is: the row being carried,
     // a folder that would take it, or something that would not. Silence on the last two is what
     // turns a drag into a guess that only the drop answers.
@@ -465,10 +476,41 @@ export function AppTree() {
             row carries the fill and `flex-1` on the label pushes the actions to the end *inside* it.
             The button keeps its own hover and active fill switched off rather than doubled, so the
             row shows one surface instead of two overlapping ones. */}
+        {/* biome-ignore lint/a11y/noStaticElementInteractions: Native drag is the pointer shortcut;
+            the nested button and move dialog remain the keyboard path. */}
         <div
+          draggable={!derived}
+          onDragStart={(event) => {
+            // ⚠️ `draggable={!derived}` is not enough on its own: `dragstart` bubbles, so a drag
+            // begun on a descendant of a derived row would still land here — and carry a level
+            // (`["tree", <flow-id>]`) that nothing ever wrote. That is the very class of key #446
+            // is about, so the handler refuses it rather than trusting the attribute.
+            if (derived) return;
+            // Native drag initiation on form controls is not interoperable: Safari can leave a
+            // draggable button looking grabbable without ever starting the drag. The row owns the
+            // gesture while its button remains the keyboard-reachable navigation control (#483).
+            event.dataTransfer.effectAllowed = "copyMove";
+            event.dataTransfer.setData("text/plain", entry.id);
+            event.dataTransfer.setData(
+              TreeEntryMediaType,
+              JSON.stringify({ id: entry.id, kind: entry.kind, title: entry.title }),
+            );
+            // The level travels with the row, read from the level this row was rendered into —
+            // never from its own record, which for a shared row names a folder the reader cannot
+            // see (#446).
+            const carried: Carried = { entry, level: parent.id };
+            draggedRef.current = carried;
+            setDragged(carried);
+          }}
+          onDragEnd={() => {
+            draggedRef.current = null;
+            setDragged(null);
+            setOver(undefined);
+          }}
+          {...(drop?.props ?? {})}
           className={`group/row flex items-center gap-0.5 rounded-md pr-1 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground ${
             isActive ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground" : ""
-          }`}
+          } ${derived ? "" : "cursor-grab active:cursor-grabbing"}`}
         >
           {expandable ? (
             <button
@@ -508,37 +550,14 @@ export function AppTree() {
             // 2px left of one with an arrow, and nothing said why.
             <span aria-hidden="true" className={TREE_GUTTER} />
           )}
-          {/* The row's own control is what is grabbed and what is dropped on: a real button, so the
-              gesture rides on something that is already focusable and named rather than on a bare
-              div that assistive technology would have to be told about twice. */}
+          {/* Navigation stays a real button. The enclosing row carries the native drag gesture;
+              putting `draggable` on this form control is precisely the Safari failure from #483. */}
           <SidebarMenuButton
             isActive={isActive}
-            draggable={!derived}
-            onDragStart={(event) => {
-              // ⚠️ Two formats, one gesture. `text/plain` is what a drop inside the tree reads —
-              // that is a MOVE, and it only ever needed the id. The flow canvas needs the kind as
-              // well, to know which node to make, and resolving an id there would mean a second
-              // read of something the drag already knows. `effectAllowed` says both are allowed;
-              // each drop target picks the one it means (#75).
-              event.dataTransfer.effectAllowed = "copyMove";
-              event.dataTransfer.setData("text/plain", entry.id);
-              event.dataTransfer.setData(
-                TreeEntryMediaType,
-                JSON.stringify({ id: entry.id, kind: entry.kind, title: entry.title }),
-              );
-              draggedRef.current = entry;
-              setDragged(entry);
-            }}
-            onDragEnd={() => {
-              draggedRef.current = null;
-              setDragged(null);
-              setOver(undefined);
-            }}
-            {...(drop?.props ?? {})}
             data-drop={
               dragged === null ? undefined : isDragged ? "dragged" : (drop?.verdict ?? "none")
             }
-            className={`min-w-0 flex-1 hover:bg-transparent data-[active=true]:bg-transparent ${derived ? "" : "cursor-grab active:cursor-grabbing"} ${isDragged ? "opacity-50" : ""} ${highlight}`}
+            className={`min-w-0 flex-1 hover:bg-transparent data-[active=true]:bg-transparent ${isDragged ? "opacity-50" : ""} ${highlight}`}
             onClick={() => void navigate({ to: area, search: { select: entry.id } })}
           >
             <Icon aria-hidden="true" className="size-4 shrink-0" />
@@ -588,7 +607,17 @@ export function AppTree() {
         <button
           type="button"
           {...rootDrop.props}
-          onClick={() => move.start(dragged, { id: null, title: i18n.t("tree.move.root") })}
+          onClick={() => {
+            // The strip is drawn for every verdict — greyed out when it would refuse — so the click
+            // has to read it too. Without this, a click on the grey strip performs exactly the write
+            // the drop path refuses, and `initial` being set skips the picker where the verdict is
+            // otherwise enforced.
+            if (rootDrop.verdict !== "ok") return;
+            move.start(dragged.entry, dragged.level, {
+              id: null,
+              title: i18n.t("tree.move.root"),
+            });
+          }}
           data-drop={rootDrop.verdict}
           className={`mb-1 flex w-full items-center gap-1 rounded-md border border-dashed px-2 py-1.5 text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring ${
             rootDrop.verdict === "ok"