npm - @igstack/app-catalog-frontend-core - Versions diffs - 6.3.1-alpha-20261003051755 → 6.5.0 - Mend

@igstack/app-catalog-frontend-core 6.3.1-alpha-20261003051755 → 6.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/dist/esm/modules/appCatalog/ui/detail/FeedbackSection.js ADDED Viewed

@@ -0,0 +1,433 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
+import { X } from "lucide-react";
+import { useState, useEffect } from "react";
+import { useTRPC } from "../../../../api/infra/trpc.js";
+import { Button } from "../../../../ui/button.js";
+import { cn } from "../../../../lib/utils.js";
+import { formatRelativeTime } from "../../utils/formatRelativeTime.js";
+const FIELD_CLASSES = "placeholder:text-muted-foreground dark:bg-input/30 border-input w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50";
+function errorMessage(error) {
+  return error instanceof Error ? error.message : "Something went wrong";
+}
+const STATUS_LABELS = {
+  applied: {
+    text: "Applied",
+    className: "comment-chip-applied",
+    title: "This improved the entry — the catalog now carries what it said. Thank you."
+  },
+  acknowledged: {
+    text: "Seen",
+    className: "comment-chip-seen",
+    title: "A maintainer read this and left the entry as it was."
+  }
+};
+function StatusChip({ status }) {
+  const label = STATUS_LABELS[status];
+  return /* @__PURE__ */ jsx("span", { className: cn("comment-chip", label.className), title: label.title, children: label.text });
+}
+function ReviewerReply({ reply }) {
+  return /* @__PURE__ */ jsxs("div", { className: "border-primary/45 bg-muted/60 mt-1.5 rounded-r-lg border-l-2 px-2.5 py-1.5", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-medium", children: "Catalog team" }),
+    /* @__PURE__ */ jsx("p", { className: "mt-0.5 whitespace-pre-wrap", children: reply })
+  ] });
+}
+function isSubmitChord(event) {
+  return event.key === "Enter" && (event.metaKey || event.ctrlKey);
+}
+function draftKey(slug) {
+  return `ac.feedback.draft.${slug}`;
+}
+function readDraft(slug) {
+  try {
+    return sessionStorage.getItem(draftKey(slug)) ?? "";
+  } catch {
+    return "";
+  }
+}
+function writeDraft(slug, value) {
+  try {
+    if (value) sessionStorage.setItem(draftKey(slug), value);
+    else sessionStorage.removeItem(draftKey(slug));
+  } catch {
+  }
+}
+const MAX_ATTACHMENTS = 3;
+const UPLOAD_URL = "/api/feedback-attachments/upload";
+function attachmentsKey(slug) {
+  return `ac.feedback.images.${slug}`;
+}
+function readAttachments(slug) {
+  try {
+    const raw = sessionStorage.getItem(attachmentsKey(slug));
+    if (!raw) return [];
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter(
+      (entry) => typeof entry === "object" && entry !== null && typeof entry.id === "string" && typeof entry.name === "string"
+    );
+  } catch {
+    return [];
+  }
+}
+function writeAttachments(slug, images) {
+  try {
+    if (images.length > 0) {
+      sessionStorage.setItem(attachmentsKey(slug), JSON.stringify(images));
+    } else {
+      sessionStorage.removeItem(attachmentsKey(slug));
+    }
+  } catch {
+  }
+}
+function attachmentUrl(id) {
+  return `/api/feedback-attachments/${id}`;
+}
+function AttachmentStrip({ ids }) {
+  if (ids.length === 0) return null;
+  return /* @__PURE__ */ jsx("ul", { className: "mt-1.5 flex flex-wrap gap-1.5", children: ids.map((id) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: attachmentUrl(id),
+      target: "_blank",
+      rel: "noreferrer",
+      className: "border-border hover:border-ring block overflow-hidden rounded border transition-colors",
+      children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: attachmentUrl(id),
+          alt: "Attached screenshot",
+          loading: "lazy",
+          className: "h-16 w-24 object-cover"
+        }
+      )
+    }
+  ) }, id)) });
+}
+function FeedbackSection({
+  appSlug,
+  /**
+   * Asked to open by the card's band, which is where the affordance now lives —
+   * at the foot of this panel it was below the fold of a tab nobody opens unless
+   * they already know what is in it.
+   *
+   * A count of how many times it has asked, so a second ask re-opens the composer
+   * the first one closed on send. A boolean could not say "again".
+   */
+  openComposer = 0
+}) {
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const listOptions = trpc.feedback.list.queryOptions({ resourceSlug: appSlug });
+  const { data, isLoading, error } = useQuery(listOptions);
+  const [draft, setDraft] = useState(() => readDraft(appSlug));
+  const [images, setImages] = useState(
+    () => readAttachments(appSlug)
+  );
+  const [uploading, setUploading] = useState(false);
+  const [uploadError, setUploadError] = useState(null);
+  const [editingId, setEditingId] = useState(null);
+  const [editDraft, setEditDraft] = useState("");
+  const [composerOpen, setComposerOpen] = useState(
+    () => openComposer > 0 || !!readDraft(appSlug) || readAttachments(appSlug).length > 0
+  );
+  useEffect(() => {
+    if (openComposer > 0) setComposerOpen(true);
+  }, [openComposer]);
+  const updateDraft = (value) => {
+    setDraft(value);
+    writeDraft(appSlug, value);
+  };
+  const updateImages = (next) => {
+    setImages(next);
+    writeAttachments(appSlug, next);
+  };
+  const attach = async (picked) => {
+    const files = [...picked ?? []];
+    if (files.length === 0) return;
+    const room = MAX_ATTACHMENTS - images.length;
+    if (room <= 0) {
+      setUploadError(`Up to ${MAX_ATTACHMENTS} images`);
+      return;
+    }
+    setUploadError(null);
+    setUploading(true);
+    try {
+      const form = new FormData();
+      for (const file of files.slice(0, room)) form.append("image", file);
+      const response = await fetch(UPLOAD_URL, {
+        method: "POST",
+        body: form,
+        // The visitor cookie is the identity the upload is recorded against, and it
+        // is httpOnly — so it has to ride along explicitly.
+        credentials: "same-origin"
+      });
+      const payload = await response.json().catch(() => null);
+      const field = (key) => typeof payload === "object" && payload !== null ? payload[key] : void 0;
+      if (!response.ok) {
+        const reported = field("error");
+        setUploadError(
+          typeof reported === "string" ? reported : "Could not attach that image"
+        );
+        return;
+      }
+      const ids = field("ids");
+      if (!Array.isArray(ids)) {
+        setUploadError("Could not attach that image");
+        return;
+      }
+      updateImages([
+        ...images,
+        ...ids.map((id, index) => {
+          var _a;
+          return {
+            id: String(id),
+            name: ((_a = files[index]) == null ? void 0 : _a.name) ?? "image"
+          };
+        })
+      ]);
+      if (files.length > room) {
+        setUploadError(`Only the first ${room} were attached`);
+      }
+    } catch {
+      setUploadError("Could not attach that image");
+    } finally {
+      setUploading(false);
+    }
+  };
+  const refresh = () => queryClient.invalidateQueries({ queryKey: listOptions.queryKey });
+  const add = useMutation(
+    trpc.feedback.add.mutationOptions({
+      onSuccess: () => {
+        updateDraft("");
+        updateImages([]);
+        setUploadError(null);
+        setComposerOpen(false);
+        void refresh();
+      }
+    })
+  );
+  const edit = useMutation(
+    trpc.feedback.edit.mutationOptions({
+      onSuccess: () => {
+        setEditingId(null);
+        void refresh();
+      }
+    })
+  );
+  const dismiss = useMutation(
+    trpc.feedback.dismiss.mutationOptions({ onSuccess: () => void refresh() })
+  );
+  const send = () => add.mutate({
+    resourceSlug: appSlug,
+    body: draft.trim(),
+    ...images.length > 0 ? { attachmentIds: images.map((image) => image.id) } : {}
+  });
+  const saveEdit = (id) => {
+    const body = editDraft.trim();
+    if (body) edit.mutate({ id, body });
+  };
+  const failure = error ?? add.error ?? edit.error ?? dismiss.error;
+  const items = (data == null ? void 0 : data.items) ?? [];
+  const openCount = (data == null ? void 0 : data.openCount) ?? 0;
+  return /* @__PURE__ */ jsxs("div", { className: "mt-7", children: [
+    /* @__PURE__ */ jsxs("h3", { className: "section-label mb-1.5 flex items-center gap-2", children: [
+      "Notes & requests",
+      items.length > 0 && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground font-normal tracking-normal normal-case", children: [
+        "(",
+        items.length,
+        ")"
+      ] }),
+      openCount > 0 && /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: "feedback-open-count",
+          "aria-label": `${openCount} awaiting review`,
+          children: [
+            openCount,
+            " open"
+          ]
+        }
+      )
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "Loading…" }) : items.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "space-y-3", children: items.map((item) => {
+      const canEdit = item.isMine && !!item.canEditUntil && Date.parse(item.canEditUntil) > Date.now();
+      const canDismiss = item.isMine && item.status === null;
+      return /* @__PURE__ */ jsxs("li", { className: "text-xs", children: [
+        /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-foreground font-medium", children: item.authorName }),
+          /* @__PURE__ */ jsx("span", { children: formatRelativeTime(item.createdAt) }),
+          item.editedAt && /* @__PURE__ */ jsx("span", { children: "(edited)" }),
+          item.status && /* @__PURE__ */ jsx(StatusChip, { status: item.status }),
+          canEdit && editingId !== item.id && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "hover:text-foreground underline",
+              onClick: () => {
+                setEditingId(item.id);
+                setEditDraft(item.body ?? "");
+              },
+              children: "Edit"
+            }
+          ),
+          canDismiss && editingId !== item.id && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "hover:text-destructive underline",
+              onClick: () => dismiss.mutate({ id: item.id }),
+              children: "Dismiss"
+            }
+          )
+        ] }),
+        editingId === item.id ? /* @__PURE__ */ jsxs("div", { className: "mt-1 space-y-2", children: [
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              autoFocus: true,
+              rows: 3,
+              className: cn(FIELD_CLASSES),
+              value: editDraft,
+              onChange: (event) => setEditDraft(event.target.value),
+              onKeyDown: (event) => {
+                if (isSubmitChord(event)) {
+                  event.preventDefault();
+                  saveEdit(item.id);
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                disabled: !editDraft.trim() || edit.isPending,
+                onClick: () => saveEdit(item.id),
+                children: "Save"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                size: "sm",
+                variant: "ghost",
+                onClick: () => setEditingId(null),
+                children: "Cancel"
+              }
+            )
+          ] })
+        ] }) : item.body ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            "data-feedback-body": "",
+            className: "mt-0.5 whitespace-pre-wrap",
+            children: item.body
+          }
+        ) : item.attachmentIds.length > 0 ? (
+          // The screenshot IS the detail — saying "no detail given" over a
+          // picture of the problem would read as the catalog ignoring it.
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              "data-feedback-body": "",
+              className: "text-muted-foreground mt-0.5 italic",
+              children: "Screenshot only — no words added."
+            }
+          )
+        ) : (
+          // A bare flag: no words, still a signal. Say so rather than
+          // rendering an empty row someone has to interpret.
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              "data-feedback-body": "",
+              className: "text-muted-foreground mt-0.5 italic",
+              children: "Flagged as out of date — no detail given."
+            }
+          )
+        ),
+        /* @__PURE__ */ jsx(AttachmentStrip, { ids: item.attachmentIds }),
+        item.reviewerReply && /* @__PURE__ */ jsx(ReviewerReply, { reply: item.reviewerReply })
+      ] }, item.id);
+    }) }) : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "Nothing here yet." }),
+    composerOpen ? /* @__PURE__ */ jsxs("div", { className: "animate-in fade-in slide-in-from-top-2 mt-3 space-y-2 duration-200", children: [
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          autoFocus: true,
+          rows: 3,
+          className: cn(FIELD_CLASSES),
+          placeholder: "What should change?",
+          value: draft,
+          onChange: (event) => updateDraft(event.target.value),
+          onKeyDown: (event) => {
+            if (isSubmitChord(event)) {
+              event.preventDefault();
+              send();
+            }
+          }
+        }
+      ),
+      images.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-2", children: images.map((image) => /* @__PURE__ */ jsxs("li", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: attachmentUrl(image.id),
+            alt: image.name,
+            className: "border-border h-16 w-24 rounded border object-cover"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Remove ${image.name}`,
+            onClick: () => updateImages(images.filter((i) => i.id !== image.id)),
+            className: "bg-background/90 text-muted-foreground hover:text-foreground absolute -top-1.5 -right-1.5 rounded-full border p-0.5 leading-none",
+            children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+          }
+        )
+      ] }, image.id)) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            disabled: add.isPending || uploading,
+            onClick: send,
+            children: add.isPending ? "Sending…" : "Send"
+          }
+        ),
+        images.length < MAX_ATTACHMENTS && /* @__PURE__ */ jsxs("label", { className: "text-muted-foreground hover:text-foreground cursor-pointer text-xs underline decoration-dotted underline-offset-2", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "file",
+              accept: "image/*",
+              multiple: true,
+              className: "sr-only",
+              disabled: uploading,
+              onChange: (event) => {
+                void attach(event.target.files);
+                event.target.value = "";
+              }
+            }
+          ),
+          uploading ? "Attaching…" : "Attach a screenshot"
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: "Posted under a nickname. You can edit it for an hour, or withdraw it until someone answers." })
+      ] }),
+      uploadError && /* @__PURE__ */ jsx("p", { className: "text-destructive text-xs", children: uploadError })
+    ] }) : null,
+    failure && /* @__PURE__ */ jsx("p", { className: "text-destructive mt-2 text-xs", children: errorMessage(failure) })
+  ] });
+}
+export {
+  FeedbackSection
+};
+//# sourceMappingURL=FeedbackSection.js.map

package/dist/esm/modules/appCatalog/ui/detail/FeedbackSection.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FeedbackSection.js","sources":["../../../../../../src/modules/appCatalog/ui/detail/FeedbackSection.tsx"],"sourcesContent":["import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'\nimport { X } from 'lucide-react'\nimport { useEffect, useState } from 'react'\nimport { useTRPC } from '~/api/infra/trpc'\nimport { Button } from '~/ui/button'\nimport { cn } from '~/lib/utils'\nimport { formatRelativeTime } from '../../utils/formatRelativeTime'\n\n/**\n * Feedback on one app, from anyone browsing the catalog.\n *\n * Nobody has to log in, so the server attributes each item to a pseudonym derived from\n * an httpOnly cookie (\"Curious Ferret\"). That cookie is also the only thing that\n * authorises editing or withdrawing: editing closes after an hour, withdrawing stays\n * open for as long as nobody has reviewed it. `canEditUntil` arrives as an absolute\n * instant so a skewed client clock cannot show a control the server would refuse.\n */\n\n/** Same shape the input primitive uses, minus the fixed height. */\nconst FIELD_CLASSES =\n 'placeholder:text-muted-foreground dark:bg-input/30 border-input w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50'\n\nfunction errorMessage(error: unknown): string {\n return error instanceof Error ? error.message : 'Something went wrong'\n}\n\n/**\n * What a maintainer did with an item, as the reader sees it.\n *\n * `applied` is the point of the whole thing: feedback that improved the entry gets\n * public credit, so the next person can see that reporting changes the catalog. Nobody\n * sets these from the UI — the review tooling writes them.\n *\n * There is no chip for unreviewed. Open is the modal state, so a pill on every\n * unreviewed row would pay the most expensive encoding for the least informative fact;\n * absence carries it, and that leaves a chip meaning \"a maintainer acted here\". The\n * label is also just `Applied` — the gratitude belongs in the reply prose below it,\n * where it reads as a person rather than a system shouting thanks.\n */\nconst STATUS_LABELS = {\n applied: {\n text: 'Applied',\n className: 'comment-chip-applied',\n title:\n 'This improved the entry — the catalog now carries what it said. Thank you.',\n },\n acknowledged: {\n text: 'Seen',\n className: 'comment-chip-seen',\n title: 'A maintainer read this and left the entry as it was.',\n },\n} as const\n\nfunction StatusChip({ status }: { status: 'applied' | 'acknowledged' }) {\n const label = STATUS_LABELS[status]\n return (\n <span className={cn('comment-chip', label.className)} title={label.title}>\n {label.text}\n </span>\n )\n}\n\n/** The maintainers' answer, attributed to the team rather than a pseudonym. */\nfunction ReviewerReply({ reply }: { reply: string }) {\n return (\n <div className=\"border-primary/45 bg-muted/60 mt-1.5 rounded-r-lg border-l-2 px-2.5 py-1.5\">\n <span className=\"text-muted-foreground font-medium\">Catalog team</span>\n <p className=\"mt-0.5 whitespace-pre-wrap\">{reply}</p>\n </div>\n )\n}\n\n/** Cmd/Ctrl+Enter submits; plain Enter keeps making paragraphs. */\nfunction isSubmitChord(event: React.KeyboardEvent): boolean {\n return event.key === 'Enter' && (event.metaKey || event.ctrlKey)\n}\n\n/**\n * Where a half-typed draft lives while it is not submitted.\n *\n * The detail card mounts this section inside a tab panel, and a panel is unmounted\n * while its tab is not the active one — so component state alone loses whatever\n * someone had typed the moment they look at another tab, and again if they close the\n * card. Losing someone's words is the one failure this feature cannot afford: the\n * whole premise is that reporting costs almost nothing, and \"I typed it and it\n * vanished\" is how a person learns not to bother.\n *\n * Session rather than local storage: a draft is in-flight work, not a preference,\n * and it should not still be waiting weeks later in a browser nobody remembers using.\n * Keyed by slug so two entries do not share one draft.\n */\nfunction draftKey(slug: string): string {\n return `ac.feedback.draft.${slug}`\n}\n\nfunction readDraft(slug: string): string {\n try {\n return sessionStorage.getItem(draftKey(slug)) ?? ''\n } catch {\n // Storage can throw outright in a locked-down context; a lost draft is not\n // worth taking the section down over.\n return ''\n }\n}\n\nfunction writeDraft(slug: string, value: string): void {\n try {\n if (value) sessionStorage.setItem(draftKey(slug), value)\n else sessionStorage.removeItem(draftKey(slug))\n } catch {\n /* see readDraft */\n }\n}\n\n/** Mirrors the server's cap, which refuses anything above it regardless. */\nconst MAX_ATTACHMENTS = 3\n\nconst UPLOAD_URL = '/api/feedback-attachments/upload'\n\n/** One already-uploaded image waiting to be submitted with the words. */\ninterface PendingImage {\n id: string\n name: string\n}\n\n/**\n * Images are uploaded the moment they are picked, so the draft holds ids rather than\n * files — which is also why they have to persist alongside the text. A tab panel\n * unmounts whenever its tab is not the active one, and someone who attached three\n * screenshots and glanced at Overview should not come back to none.\n *\n * Dropping an id here does NOT delete the image; the server sweeps whatever is never\n * submitted. That keeps \"remove\" instant and offline-safe.\n */\nfunction attachmentsKey(slug: string): string {\n return `ac.feedback.images.${slug}`\n}\n\nfunction readAttachments(slug: string): PendingImage[] {\n try {\n const raw = sessionStorage.getItem(attachmentsKey(slug))\n if (!raw) return []\n const parsed: unknown = JSON.parse(raw)\n if (!Array.isArray(parsed)) return []\n return parsed.filter(\n (entry): entry is PendingImage =>\n typeof entry === 'object' &&\n entry !== null &&\n typeof (entry as PendingImage).id === 'string' &&\n typeof (entry as PendingImage).name === 'string',\n )\n } catch {\n // Unparseable or unreadable storage is the same as no attachments — see readDraft.\n return []\n }\n}\n\nfunction writeAttachments(slug: string, images: PendingImage[]): void {\n try {\n if (images.length > 0) {\n sessionStorage.setItem(attachmentsKey(slug), JSON.stringify(images))\n } else {\n sessionStorage.removeItem(attachmentsKey(slug))\n }\n } catch {\n /* see readDraft */\n }\n}\n\n/** The stored image, at whatever size the browser lays it out. */\nfunction attachmentUrl(id: string): string {\n return `/api/feedback-attachments/${id}`\n}\n\n/**\n * Images already submitted with a request. A thumbnail strip rather than inline\n * full-width: the words are the substance and a screenshot is the evidence, so it\n * should be glanceable and openable, not dominate the row.\n */\nfunction AttachmentStrip({ ids }: { ids: string[] }) {\n if (ids.length === 0) return null\n return (\n <ul className=\"mt-1.5 flex flex-wrap gap-1.5\">\n {ids.map((id) => (\n <li key={id}>\n <a\n href={attachmentUrl(id)}\n target=\"_blank\"\n rel=\"noreferrer\"\n className=\"border-border hover:border-ring block overflow-hidden rounded border transition-colors\"\n >\n <img\n src={attachmentUrl(id)}\n alt=\"Attached screenshot\"\n loading=\"lazy\"\n className=\"h-16 w-24 object-cover\"\n />\n </a>\n </li>\n ))}\n </ul>\n )\n}\n\nexport function FeedbackSection({\n appSlug,\n /**\n * Asked to open by the card's band, which is where the affordance now lives —\n * at the foot of this panel it was below the fold of a tab nobody opens unless\n * they already know what is in it.\n *\n * A count of how many times it has asked, so a second ask re-opens the composer\n * the first one closed on send. A boolean could not say \"again\".\n */\n openComposer = 0,\n}: {\n appSlug: string\n openComposer?: number\n}) {\n const trpc = useTRPC()\n const queryClient = useQueryClient()\n const listOptions = trpc.feedback.list.queryOptions({ resourceSlug: appSlug })\n const { data, isLoading, error } = useQuery(listOptions)\n\n // Seeded from storage so a draft survives the tab panel unmounting under it.\n const [draft, setDraft] = useState(() => readDraft(appSlug))\n const [images, setImages] = useState<PendingImage[]>(() =>\n readAttachments(appSlug),\n )\n const [uploading, setUploading] = useState(false)\n const [uploadError, setUploadError] = useState<string | null>(null)\n const [editingId, setEditingId] = useState<string | null>(null)\n const [editDraft, setEditDraft] = useState('')\n /**\n * The composer stays behind the invitation until someone accepts it — which is also\n * what earns the caret: focus follows the click, never the mount. A recovered draft\n * reopens it, otherwise the text would be held but invisible.\n */\n const [composerOpen, setComposerOpen] = useState(\n () =>\n openComposer > 0 ||\n !!readDraft(appSlug) ||\n readAttachments(appSlug).length > 0,\n )\n\n // The band asked for the composer while this panel was unmounted, so honour it on\n // arrival. The request is NOT cleared from here: doing so removed the tab from the\n // strip (it only exists when there is something in it), which bounced the active\n // tab back to the first one — the composer was deleting the tab it had opened.\n useEffect(() => {\n if (openComposer > 0) setComposerOpen(true)\n }, [openComposer])\n\n const updateDraft = (value: string) => {\n setDraft(value)\n writeDraft(appSlug, value)\n }\n\n const updateImages = (next: PendingImage[]) => {\n setImages(next)\n writeAttachments(appSlug, next)\n }\n\n /**\n * Upload on pick, not on send.\n *\n * It costs a round trip before anyone has committed to posting, and it buys the two\n * things that matter: the person sees whether their screenshot actually arrived\n * while they can still do something about it, and Send stays a single fast request\n * that cannot half-fail with three images in flight.\n */\n const attach = async (picked: FileList | null) => {\n const files = [...(picked ?? [])]\n if (files.length === 0) return\n\n const room = MAX_ATTACHMENTS - images.length\n if (room <= 0) {\n setUploadError(`Up to ${MAX_ATTACHMENTS} images`)\n return\n }\n\n setUploadError(null)\n setUploading(true)\n try {\n const form = new FormData()\n for (const file of files.slice(0, room)) form.append('image', file)\n\n const response = await fetch(UPLOAD_URL, {\n method: 'POST',\n body: form,\n // The visitor cookie is the identity the upload is recorded against, and it\n // is httpOnly — so it has to ride along explicitly.\n credentials: 'same-origin',\n })\n // Unknown rather than a declared shape: this is a JSON body off the wire, and\n // the error path exists precisely for responses that are not what we expect.\n const payload: unknown = await response.json().catch(() => null)\n const field = (key: string): unknown =>\n typeof payload === 'object' && payload !== null\n ? (payload as Record<string, unknown>)[key]\n : undefined\n\n if (!response.ok) {\n const reported = field('error')\n setUploadError(\n typeof reported === 'string'\n ? reported\n : 'Could not attach that image',\n )\n return\n }\n\n const ids = field('ids')\n if (!Array.isArray(ids)) {\n setUploadError('Could not attach that image')\n return\n }\n updateImages([\n ...images,\n ...ids.map((id, index) => ({\n id: String(id),\n name: files[index]?.name ?? 'image',\n })),\n ])\n if (files.length > room) {\n setUploadError(`Only the first ${room} were attached`)\n }\n } catch {\n setUploadError('Could not attach that image')\n } finally {\n setUploading(false)\n }\n }\n\n const refresh = () =>\n queryClient.invalidateQueries({ queryKey: listOptions.queryKey })\n\n const add = useMutation(\n trpc.feedback.add.mutationOptions({\n onSuccess: () => {\n // Sent: the draft is no longer in flight, so it should not come back.\n updateDraft('')\n updateImages([])\n setUploadError(null)\n setComposerOpen(false)\n void refresh()\n },\n }),\n )\n const edit = useMutation(\n trpc.feedback.edit.mutationOptions({\n onSuccess: () => {\n setEditingId(null)\n void refresh()\n },\n }),\n )\n const dismiss = useMutation(\n trpc.feedback.dismiss.mutationOptions({ onSuccess: () => void refresh() }),\n )\n\n /** Every field is optional, so this submits whatever there is — including nothing. */\n const send = () =>\n add.mutate({\n resourceSlug: appSlug,\n body: draft.trim(),\n ...(images.length > 0\n ? { attachmentIds: images.map((image) => image.id) }\n : {}),\n })\n\n const saveEdit = (id: string) => {\n const body = editDraft.trim()\n if (body) edit.mutate({ id, body })\n }\n\n // One line for every failed action: three mutations and one query, one place to look.\n const failure = error ?? add.error ?? edit.error ?? dismiss.error\n const items = data?.items ?? []\n const openCount = data?.openCount ?? 0\n\n return (\n <div className=\"mt-7\">\n <h3 className=\"section-label mb-1.5 flex items-center gap-2\">\n Notes & requests\n {items.length > 0 && (\n <span className=\"text-muted-foreground font-normal tracking-normal normal-case\">\n ({items.length})\n </span>\n )}\n {openCount > 0 && (\n <span\n className=\"feedback-open-count\"\n aria-label={`${openCount} awaiting review`}\n >\n {openCount} open\n </span>\n )}\n </h3>\n\n {isLoading ? (\n <p className=\"text-muted-foreground text-xs\">Loading…</p>\n ) : items.length > 0 ? (\n <ul className=\"space-y-3\">\n {items.map((item) => {\n const canEdit =\n item.isMine &&\n !!item.canEditUntil &&\n Date.parse(item.canEditUntil) > Date.now()\n // Withdrawing stays available for as long as nobody has reviewed it.\n const canDismiss = item.isMine && item.status === null\n\n return (\n <li key={item.id} className=\"text-xs\">\n <div className=\"text-muted-foreground flex items-center gap-2\">\n <span className=\"text-foreground font-medium\">\n {item.authorName}\n </span>\n <span>{formatRelativeTime(item.createdAt)}</span>\n {item.editedAt && <span>(edited)</span>}\n {item.status && <StatusChip status={item.status} />}\n {canEdit && editingId !== item.id && (\n <button\n type=\"button\"\n className=\"hover:text-foreground underline\"\n onClick={() => {\n setEditingId(item.id)\n setEditDraft(item.body ?? '')\n }}\n >\n Edit\n </button>\n )}\n {canDismiss && editingId !== item.id && (\n <button\n type=\"button\"\n className=\"hover:text-destructive underline\"\n onClick={() => dismiss.mutate({ id: item.id })}\n >\n Dismiss\n </button>\n )}\n </div>\n\n {editingId === item.id ? (\n <div className=\"mt-1 space-y-2\">\n <textarea\n autoFocus\n rows={3}\n className={cn(FIELD_CLASSES)}\n value={editDraft}\n onChange={(event) => setEditDraft(event.target.value)}\n onKeyDown={(event) => {\n if (isSubmitChord(event)) {\n event.preventDefault()\n saveEdit(item.id)\n }\n }}\n />\n <div className=\"flex gap-2\">\n <Button\n type=\"button\"\n size=\"sm\"\n disabled={!editDraft.trim() || edit.isPending}\n onClick={() => saveEdit(item.id)}\n >\n Save\n </Button>\n <Button\n type=\"button\"\n size=\"sm\"\n variant=\"ghost\"\n onClick={() => setEditingId(null)}\n >\n Cancel\n </Button>\n </div>\n </div>\n ) : item.body ? (\n <p\n data-feedback-body=\"\"\n className=\"mt-0.5 whitespace-pre-wrap\"\n >\n {item.body}\n </p>\n ) : item.attachmentIds.length > 0 ? (\n // The screenshot IS the detail — saying \"no detail given\" over a\n // picture of the problem would read as the catalog ignoring it.\n <p\n data-feedback-body=\"\"\n className=\"text-muted-foreground mt-0.5 italic\"\n >\n Screenshot only — no words added.\n </p>\n ) : (\n // A bare flag: no words, still a signal. Say so rather than\n // rendering an empty row someone has to interpret.\n <p\n data-feedback-body=\"\"\n className=\"text-muted-foreground mt-0.5 italic\"\n >\n Flagged as out of date — no detail given.\n </p>\n )}\n\n <AttachmentStrip ids={item.attachmentIds} />\n\n {item.reviewerReply && (\n <ReviewerReply reply={item.reviewerReply} />\n )}\n </li>\n )\n })}\n </ul>\n ) : (\n <p className=\"text-muted-foreground text-xs\">Nothing here yet.</p>\n )}\n\n {composerOpen ? (\n <div className=\"animate-in fade-in slide-in-from-top-2 mt-3 space-y-2 duration-200\">\n <textarea\n autoFocus\n rows={3}\n className={cn(FIELD_CLASSES)}\n placeholder=\"What should change?\"\n value={draft}\n onChange={(event) => updateDraft(event.target.value)}\n onKeyDown={(event) => {\n if (isSubmitChord(event)) {\n event.preventDefault()\n send()\n }\n }}\n />\n {images.length > 0 && (\n <ul className=\"flex flex-wrap gap-2\">\n {images.map((image) => (\n <li key={image.id} className=\"relative\">\n <img\n src={attachmentUrl(image.id)}\n alt={image.name}\n className=\"border-border h-16 w-24 rounded border object-cover\"\n />\n <button\n type=\"button\"\n aria-label={`Remove ${image.name}`}\n onClick={() =>\n updateImages(images.filter((i) => i.id !== image.id))\n }\n className=\"bg-background/90 text-muted-foreground hover:text-foreground absolute -top-1.5 -right-1.5 rounded-full border p-0.5 leading-none\"\n >\n <X className=\"size-3\" />\n </button>\n </li>\n ))}\n </ul>\n )}\n\n <div className=\"flex flex-wrap items-center gap-3\">\n <Button\n type=\"button\"\n size=\"sm\"\n disabled={add.isPending || uploading}\n onClick={send}\n >\n {add.isPending ? 'Sending…' : 'Send'}\n </Button>\n\n {images.length < MAX_ATTACHMENTS && (\n <label className=\"text-muted-foreground hover:text-foreground cursor-pointer text-xs underline decoration-dotted underline-offset-2\">\n <input\n type=\"file\"\n accept=\"image/*\"\n multiple\n className=\"sr-only\"\n disabled={uploading}\n onChange={(event) => {\n void attach(event.target.files)\n // Cleared so picking the SAME file again still fires a change.\n event.target.value = ''\n }}\n />\n {uploading ? 'Attaching…' : 'Attach a screenshot'}\n </label>\n )}\n\n <span className=\"text-muted-foreground text-xs\">\n Posted under a nickname. You can edit it for an hour, or withdraw\n it until someone answers.\n </span>\n </div>\n\n {uploadError && (\n <p className=\"text-destructive text-xs\">{uploadError}</p>\n )}\n </div>\n ) : null}\n\n {/* Outside the composer: a failed list query leaves nothing to collapse into. */}\n {failure && (\n <p className=\"text-destructive mt-2 text-xs\">{errorMessage(failure)}</p>\n )}\n </div>\n )\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/modules/appCatalog/ui/pages/AppCatalogPage.js CHANGED Viewed

@@ -114,7 +114,24 @@ function AppCatalogPage({
         {
           app: selectedApp,
           subResource: selectedSub,
-          onClose: () => void navigate({ to: "/" }),
+          onClose: () => void navigate({
+            to: "/",
+            /**
+             * Drop the card's own params, keep the catalog's.
+             *
+             * `navigate({ to: '/' })` alone preserves the whole search object, so
+             * closing a card left `?tab=notes` (and `?sub=`, `?qj=`) behind on the
+             * catalog, where they mean nothing — and a link copied afterwards
+             * carried them. Clearing the lot instead would throw away the
+             * visitor's filters, which belong to the catalog and outlive any card.
+             */
+            search: (prev) => ({
+              ...prev,
+              tab: void 0,
+              sub: void 0,
+              qj: void 0
+            })
+          }),
           onAppClick: handleAppClick,
           onBackToParent: handleBackToParent
         }

package/dist/esm/modules/appCatalog/ui/pages/AppCatalogPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppCatalogPage.js","sources":["../../../../../../src/modules/appCatalog/ui/pages/AppCatalogPage.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { useNavigate, useSearch } from '@tanstack/react-router'\nimport { Suspense, lazy, useCallback, useEffect, useMemo } from 'react'\nimport { useAppCatalogContext } from '../../context/AppCatalogContext'\nimport { useAppCatalogFilters } from '../context/AppCatalogFiltersContext'\nimport { AppCatalogGrid } from '../catalog/AppCatalogGrid'\nimport { AttributionFooter } from '../catalog/AttributionFooter'\n\n// The detail card (and the markdown stack it renders) loads on first open, not\n// with the catalog grid every visitor sees first (#120).\nconst AppDetailPanel = lazy(() =>\n import('../catalog/AppDetailPanel').then((m) => ({\n default: m.AppDetailPanel,\n })),\n)\n\nexport function AppCatalogPage({\n selectedSlug,\n selectedSubSlug: subPageSlug,\n}: { selectedSlug?: string; selectedSubSlug?: string } = {}) {\n const { resources, isLoadingApps } = useAppCatalogContext()\n const { state: filterState, actions } = useAppCatalogFilters()\n const navigate = useNavigate()\n\n // Selected app comes from the route path (/app/<slug>); undefined = nothing open\n const selectedAppSlug = selectedSlug\n\n // Search value from context (module-scoped, see AppCatalogFiltersContext)\n const search = useSearch({ strict: false })\n\n // Two distinct states, deliberately on different parts of the URL:\n // - `?sub=<slug>` the parent's detail, singled out to one child\n // - `/app/<slug>/sub/<child>` that child's OWN page, with its access chain\n // Clicking a matched sub-resource in the search results reaches the first;\n // clicking its name in the parent's table reaches the second.\n const highlightSubSlug = search.sub\n\n const handleSubClick = useCallback(\n (parentSlug: string, subSlug: string) => {\n void navigate({\n to: '/app/$slug',\n params: { slug: parentSlug },\n search: (prev) => ({ ...prev, sub: subSlug }),\n })\n },\n [navigate],\n )\n\n const handleBackToParent = useCallback(() => {\n // Leave the sub-resource's page for its parent's detail, keeping `?sub=` so\n // the row the user came from stays singled out — going \"back\" shouldn't\n // dump them into all forty-seven siblings.\n if (selectedAppSlug) {\n void navigate({\n to: '/app/$slug',\n params: { slug: selectedAppSlug },\n search: (prev) => ({ ...prev, sub: subPageSlug }),\n })\n }\n }, [navigate, selectedAppSlug, subPageSlug])\n\n const searchValue = filterState.searchValue\n const setSearchValue = actions.setSearchValue\n\n // Get root resources for display (children surface through search)\n const rootResources = useMemo(\n () => resources.filter((r) => !r.parentSlug),\n [resources],\n )\n\n // Dev-only skew warning: data arrived (resources > 0) but nothing is top-level\n // (rootResources === 0). That fingerprints a frontend/backend-core version skew\n // or a stale service worker — NOT a normal empty search/filter (those still have\n // rootResources). Guarded to dev so prod users never see it.\n useEffect(() => {\n if (\n import.meta.env.DEV &&\n !isLoadingApps &&\n resources.length > 0 &&\n rootResources.length === 0\n ) {\n console.warn(\n `[app-catalog] Loaded ${resources.length} resources but 0 are top-level — ` +\n `likely a frontend/backend-core version skew or a stale service worker. ` +\n `Check the version footer (be X / fe Y) and hard-reload.`,\n )\n }\n }, [isLoadingApps, resources.length, rootResources.length])\n\n // #22: alias → canonical redirect. When an app is renamed its old slug is\n // kept in `aliases[]`. If the URL slug matches no canonical slug but does\n // match some app's alias, redirect (replace) to that app's canonical slug so\n // old bookmarks resolve instead of showing a blank catalog. Guard on a real\n // canonical miss so we never fight the normal detail-open path. Note: this is\n // a client-side SPA redirect (replace), not an HTTP 301 — see #22.\n useEffect(() => {\n if (!selectedAppSlug \|\| resources.length === 0) return\n const canonical = resources.some((r) => r.slug === selectedAppSlug)\n if (canonical) return\n const aliased = resources.find((r) => r.aliases?.includes(selectedAppSlug))\n if (aliased) {\n void navigate({\n to: '/app/$slug',\n params: { slug: aliased.slug },\n search: (prev) => prev,\n replace: true,\n })\n }\n }, [selectedAppSlug, resources, navigate])\n\n const handleAppClick = (app: Resource) => {\n void navigate({\n to: '/app/$slug',\n params: { slug: app.slug },\n search: (prev) => prev,\n })\n }\n\n const handleLaunch = (app: Resource) => {\n if (app.appUrl) window.open(app.appUrl, '_blank', 'noopener,noreferrer')\n }\n\n // The app whose detail card is open over the catalog backdrop.\n const selectedApp = useMemo(\n () =>\n selectedAppSlug\n ? (resources.find((r) => r.slug === selectedAppSlug) ?? null)\n : null,\n [selectedAppSlug, resources],\n )\n\n // …and the sub-resource whose OWN page is open (`/app/<slug>/sub/<child>`).\n // `?sub=` deliberately does NOT land here: that state stays on the parent's\n // detail with the child singled out in its table.\n const selectedSub = useMemo(() => {\n if (!subPageSlug \|\| !selectedApp) return null\n return (\n resources.find(\n (r) => r.slug === subPageSlug && r.parentSlug === selectedApp.slug,\n ) ?? null\n )\n }, [subPageSlug, selectedApp, resources])\n\n if (isLoadingApps) {\n return <div className=\"py-6 text-muted-foreground\">Loading…</div>\n }\n\n // The catalog is one persistent shell (#38): the discovery spine or, while\n // typing, the in-place results list — both handled inside AppCatalogGrid, so\n // searching never swaps containers and the hero never moves. It owns vertical\n // scroll (MainLayout is h-screen/overflow-hidden), and `scrollbar-gutter:\n // stable` reserves the track so a shorter results list doesn't shift the hero\n // sideways when the scrollbar disappears.\n return (\n // `pb-24` lives here, on whatever ends up last — the footer when the app\n // configures one, the final card row otherwise — so nothing sits flush\n // against the bottom edge or under the floating support bubble.\n <div className=\"flex-1 min-h-0 overflow-y-auto [scrollbar-gutter:stable] pb-24\">\n <AppCatalogGrid\n apps={rootResources.filter(\n (a) => filterState.showDeprecated \|\| !a.deprecated,\n )}\n // All resources incl. children — so search matches sub-resources\n // (e.g. a cloud account) and surfaces their parent.\n allResources={resources}\n searchValue={searchValue}\n onSearchChange={setSearchValue}\n onAppClick={handleAppClick}\n onSubClick={handleSubClick}\n onLaunch={handleLaunch}\n detailOpen={selectedApp !== null}\n selectedSubSlug={highlightSubSlug}\n />\n {/* Outside the grid's 1000px column so its rule spans the full width. /}\n <AttributionFooter />\n {/ #38 item B: the detail as a card over the catalog backdrop. */}\n {selectedApp && (\n <Suspense fallback={null}>\n <AppDetailPanel\n app={selectedApp}\n subResource={selectedSub}\n onClose={() => void navigate({ to: '/' })}\n onAppClick={handleAppClick}\n onBackToParent={handleBackToParent}\n />\n </Suspense>\n )}\n </div>\n )\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"AppCatalogPage.js","sources":["../../../../../../src/modules/appCatalog/ui/pages/AppCatalogPage.tsx"],"sourcesContent":["import type { Resource } from '@igstack/app-catalog-backend-core'\nimport { useNavigate, useSearch } from '@tanstack/react-router'\nimport { Suspense, lazy, useCallback, useEffect, useMemo } from 'react'\nimport { useAppCatalogContext } from '../../context/AppCatalogContext'\nimport { useAppCatalogFilters } from '../context/AppCatalogFiltersContext'\nimport { AppCatalogGrid } from '../catalog/AppCatalogGrid'\nimport { AttributionFooter } from '../catalog/AttributionFooter'\n\n// The detail card (and the markdown stack it renders) loads on first open, not\n// with the catalog grid every visitor sees first (#120).\nconst AppDetailPanel = lazy(() =>\n import('../catalog/AppDetailPanel').then((m) => ({\n default: m.AppDetailPanel,\n })),\n)\n\nexport function AppCatalogPage({\n selectedSlug,\n selectedSubSlug: subPageSlug,\n}: { selectedSlug?: string; selectedSubSlug?: string } = {}) {\n const { resources, isLoadingApps } = useAppCatalogContext()\n const { state: filterState, actions } = useAppCatalogFilters()\n const navigate = useNavigate()\n\n // Selected app comes from the route path (/app/<slug>); undefined = nothing open\n const selectedAppSlug = selectedSlug\n\n // Search value from context (module-scoped, see AppCatalogFiltersContext)\n const search = useSearch({ strict: false })\n\n // Two distinct states, deliberately on different parts of the URL:\n // - `?sub=<slug>` the parent's detail, singled out to one child\n // - `/app/<slug>/sub/<child>` that child's OWN page, with its access chain\n // Clicking a matched sub-resource in the search results reaches the first;\n // clicking its name in the parent's table reaches the second.\n const highlightSubSlug = search.sub\n\n const handleSubClick = useCallback(\n (parentSlug: string, subSlug: string) => {\n void navigate({\n to: '/app/$slug',\n params: { slug: parentSlug },\n search: (prev) => ({ ...prev, sub: subSlug }),\n })\n },\n [navigate],\n )\n\n const handleBackToParent = useCallback(() => {\n // Leave the sub-resource's page for its parent's detail, keeping `?sub=` so\n // the row the user came from stays singled out — going \"back\" shouldn't\n // dump them into all forty-seven siblings.\n if (selectedAppSlug) {\n void navigate({\n to: '/app/$slug',\n params: { slug: selectedAppSlug },\n search: (prev) => ({ ...prev, sub: subPageSlug }),\n })\n }\n }, [navigate, selectedAppSlug, subPageSlug])\n\n const searchValue = filterState.searchValue\n const setSearchValue = actions.setSearchValue\n\n // Get root resources for display (children surface through search)\n const rootResources = useMemo(\n () => resources.filter((r) => !r.parentSlug),\n [resources],\n )\n\n // Dev-only skew warning: data arrived (resources > 0) but nothing is top-level\n // (rootResources === 0). That fingerprints a frontend/backend-core version skew\n // or a stale service worker — NOT a normal empty search/filter (those still have\n // rootResources). Guarded to dev so prod users never see it.\n useEffect(() => {\n if (\n import.meta.env.DEV &&\n !isLoadingApps &&\n resources.length > 0 &&\n rootResources.length === 0\n ) {\n console.warn(\n `[app-catalog] Loaded ${resources.length} resources but 0 are top-level — ` +\n `likely a frontend/backend-core version skew or a stale service worker. ` +\n `Check the version footer (be X / fe Y) and hard-reload.`,\n )\n }\n }, [isLoadingApps, resources.length, rootResources.length])\n\n // #22: alias → canonical redirect. When an app is renamed its old slug is\n // kept in `aliases[]`. If the URL slug matches no canonical slug but does\n // match some app's alias, redirect (replace) to that app's canonical slug so\n // old bookmarks resolve instead of showing a blank catalog. Guard on a real\n // canonical miss so we never fight the normal detail-open path. Note: this is\n // a client-side SPA redirect (replace), not an HTTP 301 — see #22.\n useEffect(() => {\n if (!selectedAppSlug \|\| resources.length === 0) return\n const canonical = resources.some((r) => r.slug === selectedAppSlug)\n if (canonical) return\n const aliased = resources.find((r) => r.aliases?.includes(selectedAppSlug))\n if (aliased) {\n void navigate({\n to: '/app/$slug',\n params: { slug: aliased.slug },\n search: (prev) => prev,\n replace: true,\n })\n }\n }, [selectedAppSlug, resources, navigate])\n\n const handleAppClick = (app: Resource) => {\n void navigate({\n to: '/app/$slug',\n params: { slug: app.slug },\n search: (prev) => prev,\n })\n }\n\n const handleLaunch = (app: Resource) => {\n if (app.appUrl) window.open(app.appUrl, '_blank', 'noopener,noreferrer')\n }\n\n // The app whose detail card is open over the catalog backdrop.\n const selectedApp = useMemo(\n () =>\n selectedAppSlug\n ? (resources.find((r) => r.slug === selectedAppSlug) ?? null)\n : null,\n [selectedAppSlug, resources],\n )\n\n // …and the sub-resource whose OWN page is open (`/app/<slug>/sub/<child>`).\n // `?sub=` deliberately does NOT land here: that state stays on the parent's\n // detail with the child singled out in its table.\n const selectedSub = useMemo(() => {\n if (!subPageSlug \|\| !selectedApp) return null\n return (\n resources.find(\n (r) => r.slug === subPageSlug && r.parentSlug === selectedApp.slug,\n ) ?? null\n )\n }, [subPageSlug, selectedApp, resources])\n\n if (isLoadingApps) {\n return <div className=\"py-6 text-muted-foreground\">Loading…</div>\n }\n\n // The catalog is one persistent shell (#38): the discovery spine or, while\n // typing, the in-place results list — both handled inside AppCatalogGrid, so\n // searching never swaps containers and the hero never moves. It owns vertical\n // scroll (MainLayout is h-screen/overflow-hidden), and `scrollbar-gutter:\n // stable` reserves the track so a shorter results list doesn't shift the hero\n // sideways when the scrollbar disappears.\n return (\n // `pb-24` lives here, on whatever ends up last — the footer when the app\n // configures one, the final card row otherwise — so nothing sits flush\n // against the bottom edge or under the floating support bubble.\n <div className=\"flex-1 min-h-0 overflow-y-auto [scrollbar-gutter:stable] pb-24\">\n <AppCatalogGrid\n apps={rootResources.filter(\n (a) => filterState.showDeprecated \|\| !a.deprecated,\n )}\n // All resources incl. children — so search matches sub-resources\n // (e.g. a cloud account) and surfaces their parent.\n allResources={resources}\n searchValue={searchValue}\n onSearchChange={setSearchValue}\n onAppClick={handleAppClick}\n onSubClick={handleSubClick}\n onLaunch={handleLaunch}\n detailOpen={selectedApp !== null}\n selectedSubSlug={highlightSubSlug}\n />\n {/* Outside the grid's 1000px column so its rule spans the full width. /}\n <AttributionFooter />\n {/ #38 item B: the detail as a card over the catalog backdrop. /}\n {selectedApp && (\n <Suspense fallback={null}>\n <AppDetailPanel\n app={selectedApp}\n subResource={selectedSub}\n onClose={() =>\n void navigate({\n to: '/',\n /\n Drop the card's own params, keep the catalog's.\n \n `navigate({ to: '/' })` alone preserves the whole search object, so\n * closing a card left `?tab=notes` (and `?sub=`, `?qj=`) behind on the\n * catalog, where they mean nothing — and a link copied afterwards\n * carried them. Clearing the lot instead would throw away the\n * visitor's filters, which belong to the catalog and outlive any card.\n */\n search: (prev) => ({\n ...prev,\n tab: undefined,\n sub: undefined,\n qj: undefined,\n }),\n })\n }\n onAppClick={handleAppClick}\n onBackToParent={handleBackToParent}\n />\n </Suspense>\n )}\n </div>\n )\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/modules/appCatalog/utils/accessTabLabel.d.ts ADDED Viewed

@@ -0,0 +1,30 @@
+import { ApprovalMethod, Resource } from '@igstack/app-catalog-backend-core';
+/**
+ * What the detail card's access tab says about itself.
+ *
+ * `route` names how you get in — the tab reads `Access — <route>` — and `chip`
+ * is the one number worth carrying next to it.
+ */
+export interface AccessTabLabel {
+    route: string;
+    chip?: string;
+}
+/** Shown when nothing in the entry records a way in. */
+export declare const ROUTE_UNDOCUMENTED = "not documented";
+/** Shown when the resource needs no request at all. */
+export declare const ROUTE_FREE = "Free";
+/** A request with no named channel behind it. */
+export declare const ROUTE_REQUEST = "request";
+/**
+ * Names the access route for a resource's tab.
+ *
+ * The point is that the tab answers "can I get in?" BEFORE it is opened. That
+ * is what lets every entry carry the same four tabs: an access tab holding one
+ * sentence saying the route is unknown is a dead end when you have to click to
+ * find out, and merely a fact you already read when the label says it.
+ *
+ * A named channel beats the step count, because the channel is the thing people
+ * recognise — most entries route through one or two of them, and "two steps"
+ * describes effort rather than destination. The count rides in `chip` instead.
+ */
+export declare function accessTabLabel(resource: Resource, approvalMethods: ApprovalMethod[]): AccessTabLabel;

package/dist/esm/modules/appCatalog/utils/accessTabLabel.js ADDED Viewed

@@ -0,0 +1,34 @@
+const ROUTE_UNDOCUMENTED = "not documented";
+const ROUTE_FREE = "Free";
+const ROUTE_REQUEST = "request";
+function accessTabLabel(resource, approvalMethods) {
+  var _a, _b;
+  const request = resource.accessRequest;
+  const hasContactsOnly = (((_a = resource.approverSlugs) == null ? void 0 : _a.length) ?? 0) > 0 || Boolean(resource.accessComments);
+  if (!request) {
+    return hasContactsOnly ? { route: ROUTE_REQUEST, chip: void 0 } : { route: ROUTE_UNDOCUMENTED };
+  }
+  const method = approvalMethods.find(
+    (m) => m.slug === request.approvalMethodSlug
+  );
+  const hasWrittenSteps = Boolean(request.requestPrompt || request.comments);
+  const isTwoStep = Boolean(hasWrittenSteps && request.postApprovalInstructions);
+  const roleCount = ((_b = request.roles) == null ? void 0 : _b.length) ?? 0;
+  const chip = isTwoStep ? "2 steps" : roleCount > 0 ? `${roleCount} role${roleCount === 1 ? "" : "s"}` : void 0;
+  if ((method == null ? void 0 : method.type) === "noAccessRequired") return { route: ROUTE_FREE, chip };
+  const cannotNameRoute = !method || method.type === "custom";
+  if ((method == null ? void 0 : method.type) === "unknown" || cannotNameRoute && !hasWrittenSteps) {
+    return { route: ROUTE_UNDOCUMENTED, chip };
+  }
+  if (!cannotNameRoute) {
+    return { route: method.shortName ?? method.displayName, chip };
+  }
+  return { route: isTwoStep ? "2 steps" : ROUTE_REQUEST, chip };
+}
+export {
+  ROUTE_FREE,
+  ROUTE_REQUEST,
+  ROUTE_UNDOCUMENTED,
+  accessTabLabel
+};
+//# sourceMappingURL=accessTabLabel.js.map