@igstack/app-catalog-frontend-core 6.10.3 → 6.11.0

package/dist/esm/modules/communityTools/ui/ToolCard.js

@@ -0,0 +1,467 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
+import { ArrowLeft, ArrowRight, Pencil, Eye, Check, Archive } from "lucide-react";
+import { useState, useRef, useEffect, useId } from "react";
+import { useTRPC } from "../../../api/infra/trpc.js";
+import { DIALOG_ROUND_BUTTON, DetailDialogShell } from "../../appCatalog/ui/catalog/DetailDialogShell.js";
+import { MarkdownText } from "../../appCatalog/ui/components/MarkdownText.js";
+import { CommentsFeed } from "../../appCatalog/ui/detail/CommentsFeed.js";
+import { CommentsHelp } from "../../appCatalog/ui/detail/CommentsHelp.js";
+import { CommunityInput } from "../../appCatalog/ui/detail/CommunityInput.js";
+import { cn } from "../../../lib/utils.js";
+import { useAuth } from "../../auth/AuthContext.js";
+import "../../../ui/button.js";
+import { Skeleton } from "../../../ui/skeleton.js";
+import { formatCardDate, CardScreenshot } from "./CardScreenshot.js";
+import { CardTitleBlock } from "./CardTitleBlock.js";
+import { PersonAvatar } from "./FeedRow.js";
+import { useTimeUp } from "../useTimeUp.js";
+import { PinButton } from "./PinButton.js";
+import { TagChip, tagLabel, tagKey } from "./TagRow.js";
+import { GHOST_BUTTON, ArchiveConfirm, ToolFormDialog } from "./ToolFormDialog.js";
+const KBD = "rounded-[5px] border border-b-2 border-border bg-card px-1.5 py-px text-[11px] font-semibold text-muted-foreground";
+const SECTION = "mt-6 border-t border-border pt-[22px]";
+const LABEL = "text-[11.5px] font-bold tracking-wider text-muted-foreground uppercase";
+const NO_CLAIMS = [];
+const DAY_MS = 24 * 60 * 60 * 1e3;
+const CAPTURE_POLL_MS = 5e3;
+const CAPTURE_WAIT_MS = 2 * 60 * 1e3;
+function isTyping(target) {
+  return target.isContentEditable || target.closest("input, textarea, select") !== null;
+}
+function ToolCard({
+  slug,
+  siblings,
+  onClose,
+  onNavigate,
+  pinned,
+  pinBusy,
+  onTogglePin,
+  appNames,
+  onChooseTag
+}) {
+  var _a, _b;
+  const { user } = useAuth();
+  const isAdmin = (user == null ? void 0 : user.isAdmin) === true;
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const list = useQuery(trpc.communityTools.list.queryOptions());
+  const fromList = (_a = list.data) == null ? void 0 : _a.find((t) => t.slug === slug);
+  const gaveUpOnCapture = useTimeUp(slug, CAPTURE_WAIT_MS);
+  const get = useQuery({
+    ...trpc.communityTools.get.queryOptions({ slug }),
+    placeholderData: fromList,
+    // Until the first visit lands, keep asking, so the screenshot replaces
+    // the placeholder without a reload.
+    refetchInterval: (query) => {
+      var _a2;
+      return ((_a2 = query.state.data) == null ? void 0 : _a2.capturePending) && !gaveUpOnCapture ? CAPTURE_POLL_MS : false;
+    }
+  });
+  const tool = get.data;
+  const [counts, setCounts] = useState(null);
+  const { mutate: recordView } = useMutation(
+    trpc.communityTools.recordView.mutationOptions({
+      onSuccess: (c, { slug: viewed }) => {
+        setCounts({ slug: viewed, ...c });
+      }
+    })
+  );
+  const recordedForRef = useRef(null);
+  useEffect(() => {
+    if (recordedForRef.current === slug) return;
+    recordedForRef.current = slug;
+    recordView({ slug });
+  }, [slug, recordView]);
+  const views = (counts == null ? void 0 : counts.slug) === slug ? counts : tool;
+  const [editing, setEditing] = useState(false);
+  const [archiving, setArchiving] = useState(false);
+  const refreshTools = () => queryClient.invalidateQueries({
+    queryKey: trpc.communityTools.pathKey()
+  });
+  const approve = useMutation(
+    trpc.communityTools.approve.mutationOptions({ onSuccess: refreshTools })
+  );
+  const archive = useMutation(
+    trpc.communityTools.archive.mutationOptions({
+      onSuccess: () => {
+        setArchiving(false);
+        return refreshTools();
+      }
+    })
+  );
+  const adminError = approve.error ?? archive.error;
+  const commentsRef = useRef(null);
+  const commentsHeadingId = useId();
+  const commentTarget = { communityToolSlug: slug };
+  const comments = useQuery(trpc.feedback.list.queryOptions(commentTarget));
+  const commentCount = ((_b = comments.data) == null ? void 0 : _b.items.length) ?? 0;
+  const index = siblings.indexOf(slug);
+  const prev = index > 0 ? siblings[index - 1] : void 0;
+  const next = index >= 0 ? siblings[index + 1] : void 0;
+  const nameOf = (s) => {
+    var _a2, _b2;
+    return ((_b2 = (_a2 = list.data) == null ? void 0 : _a2.find((t) => t.slug === s)) == null ? void 0 : _b2.name) ?? s;
+  };
+  const onKeyDown = (e) => {
+    const target = e.target;
+    if (!e.currentTarget.contains(target)) return;
+    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+    if (isTyping(target)) return;
+    if (e.key === "ArrowLeft" && prev) {
+      e.preventDefault();
+      onNavigate(prev);
+    } else if (e.key === "ArrowRight" && next) {
+      e.preventDefault();
+      onNavigate(next);
+    } else if (e.key === "Enter" && tool) {
+      if (target.closest("a, button")) return;
+      e.preventDefault();
+      window.open(tool.url, "_blank", "noopener,noreferrer");
+    }
+  };
+  const controls = index >= 0 && siblings.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-[13px] font-semibold text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": prev ? `Previous tool: ${nameOf(prev)}` : "Previous tool",
+          disabled: !prev,
+          onClick: () => prev && onNavigate(prev),
+          className: cn(DIALOG_ROUND_BUTTON, "disabled:opacity-40"),
+          children: /* @__PURE__ */ jsx(ArrowLeft, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { "data-testid": "card-position", children: [
+        index + 1,
+        " of ",
+        siblings.length
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": next ? `Next tool: ${nameOf(next)}` : "Next tool",
+          disabled: !next,
+          onClick: () => next && onNavigate(next),
+          className: cn(DIALOG_ROUND_BUTTON, "disabled:opacity-40"),
+          children: /* @__PURE__ */ jsx(ArrowRight, { className: "size-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("i", { "aria-hidden": "true", className: "mx-1 h-5 w-px bg-border" })
+  ] });
+  return /* @__PURE__ */ jsx(
+    DetailDialogShell,
+    {
+      label: `${(tool == null ? void 0 : tool.name) ?? "Community tool"} details`,
+      shownKey: slug,
+      maxWidthClass: "max-w-[min(920px,94vw)]",
+      focusSelector: '[data-testid="card-title-block"]',
+      controls,
+      testId: "tool-card",
+      onClose,
+      onKeyDown,
+      children: tool ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "border-b border-border pb-[22px]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-end justify-between gap-4 pr-44", children: [
+            /* @__PURE__ */ jsx(CardTitleBlock, { tool }),
+            /* @__PURE__ */ jsxs("div", { className: "-mr-40 flex shrink-0 items-center gap-2", children: [
+              tool.canEdit && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "data-testid": "card-edit-button",
+                  onClick: () => setEditing(true),
+                  className: cn(GHOST_BUTTON, "h-10 px-3.5 text-[13.5px]"),
+                  children: [
+                    /* @__PURE__ */ jsx(Pencil, { "aria-hidden": "true", className: "size-4" }),
+                    "Edit"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                PinButton,
+                {
+                  labelled: true,
+                  pinned,
+                  busy: pinBusy,
+                  name: tool.name,
+                  onToggle: () => onTogglePin(tool)
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                tool.lifecycle.state === "archived" && "opacity-60"
+              ),
+              children: [
+                tool.summary && /* @__PURE__ */ jsx("p", { className: "mt-3.5 text-[15px] text-foreground/80", children: tool.summary }),
+                tool.tags.length > 0 && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "data-testid": "card-tags",
+                    className: "mt-2.5 flex flex-wrap gap-1.5",
+                    children: tool.tags.map((tag) => /* @__PURE__ */ jsx(
+                      TagChip,
+                      {
+                        label: tagLabel(tag, appNames),
+                        onClick: () => onChooseTag(tagKey(tag))
+                      },
+                      tagKey(tag)
+                    ))
+                  }
+                ),
+                views && /* @__PURE__ */ jsxs(
+                  "p",
+                  {
+                    "data-testid": "card-views",
+                    className: "mt-2.5 flex gap-[18px] text-[13px] font-semibold text-muted-foreground",
+                    children: [
+                      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx(Eye, { "aria-hidden": "true", className: "size-[15px]" }),
+                        /* @__PURE__ */ jsx("b", { className: "text-foreground", children: views.views30d.toLocaleString("en-US") }),
+                        " ",
+                        "opens this month"
+                      ] }),
+                      /* @__PURE__ */ jsxs("span", { children: [
+                        /* @__PURE__ */ jsx("b", { className: "text-foreground", children: views.viewsAll.toLocaleString("en-US") }),
+                        " ",
+                        "all time"
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "p",
+                  {
+                    "data-testid": "card-people",
+                    className: "mt-2.5 flex flex-wrap items-center gap-x-[18px] gap-y-1.5 text-[13px] font-semibold text-muted-foreground",
+                    children: [
+                      tool.owners.length > 0 && /* @__PURE__ */ jsxs("span", { className: "inline-flex flex-wrap items-center gap-x-3 gap-y-1.5", children: [
+                        /* @__PURE__ */ jsx("span", { className: LABEL, children: "Owners" }),
+                        tool.owners.map((owner) => /* @__PURE__ */ jsxs(
+                          "span",
+                          {
+                            className: "inline-flex items-center gap-1.5 text-foreground",
+                            children: [
+                              /* @__PURE__ */ jsx(PersonAvatar, { name: owner.name }),
+                              /* @__PURE__ */ jsx("span", { "data-testid": "card-owner", children: owner.name })
+                            ]
+                          },
+                          owner.slug ?? `named:${owner.name}`
+                        ))
+                      ] }),
+                      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx("span", { className: LABEL, children: "Added by" }),
+                        /* @__PURE__ */ jsx("span", { className: "text-foreground", children: tool.addedBy.name }),
+                        /* @__PURE__ */ jsx("span", { className: "font-normal", children: formatCardDate(tool.createdAt) })
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            LifecycleNote,
+            {
+              tool,
+              onTellOwner: () => {
+                var _a2;
+                return (_a2 = commentsRef.current) == null ? void 0 : _a2.focus();
+              }
+            }
+          ),
+          isAdmin && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-testid": "card-admin",
+              className: "mt-3.5 flex flex-col gap-2.5 rounded-[10px] border border-dashed border-border px-3 py-2.5",
+              children: [
+                archiving ? /* @__PURE__ */ jsx(
+                  ArchiveConfirm,
+                  {
+                    busy: archive.isPending,
+                    onCancel: () => setArchiving(false),
+                    onArchive: (reason) => archive.mutate({ slug, reason })
+                  }
+                ) : /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2.5", children: [
+                  /* @__PURE__ */ jsx("span", { className: "mr-auto text-[12.5px] font-bold tracking-wider text-muted-foreground uppercase", children: "Admin" }),
+                  !tool.reviewed && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      disabled: approve.isPending,
+                      "aria-busy": approve.isPending || void 0,
+                      onClick: () => approve.mutate({ slug }),
+                      className: GHOST_BUTTON,
+                      children: [
+                        /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-4" }),
+                        approve.isPending ? "Approving…" : "Approve"
+                      ]
+                    }
+                  ),
+                  tool.lifecycle.state !== "archived" && /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setArchiving(true),
+                      className: GHOST_BUTTON,
+                      children: [
+                        /* @__PURE__ */ jsx(Archive, { "aria-hidden": "true", className: "size-4" }),
+                        "Archive"
+                      ]
+                    }
+                  )
+                ] }),
+                adminError && /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    role: "alert",
+                    className: "text-[13px] font-semibold text-destructive",
+                    children: adminError.message
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          CardScreenshot,
+          {
+            tool,
+            capturing: tool.capturePending && !gaveUpOnCapture
+          }
+        ),
+        tool.descriptionMd.trim() && /* @__PURE__ */ jsxs(
+          "section",
+          {
+            "data-testid": "card-how-to-use",
+            className: cn(SECTION, "text-[14.5px]"),
+            children: [
+              /* @__PURE__ */ jsx("h3", { className: "mb-2 font-serif text-[17px] font-semibold", children: "How to use" }),
+              /* @__PURE__ */ jsx("div", { className: "prose prose-sm dark:prose-invert max-w-[68ch]", children: /* @__PURE__ */ jsx(MarkdownText, { children: tool.descriptionMd }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("section", { "data-testid": "card-comments", className: SECTION, children: [
+          /* @__PURE__ */ jsxs("div", { className: "comments-head", children: [
+            /* @__PURE__ */ jsx("h2", { id: commentsHeadingId, className: "behind-group__title", children: "Comments" }),
+            commentCount > 0 && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-testid": "card-comment-count",
+                className: "rounded-full bg-muted px-2 text-xs leading-5 font-bold text-muted-foreground",
+                children: commentCount
+              }
+            ),
+            /* @__PURE__ */ jsx(CommentsHelp, { appName: tool.name })
+          ] }),
+          /* @__PURE__ */ jsx(
+            CommentsFeed,
+            {
+              target: commentTarget,
+              claims: NO_CLAIMS,
+              labelledBy: commentsHeadingId
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "mt-3.5", children: /* @__PURE__ */ jsx(
+            CommunityInput,
+            {
+              ref: commentsRef,
+              target: commentTarget,
+              appName: tool.name
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "mt-[22px] flex flex-wrap items-center gap-x-4 gap-y-1.5 text-[12.5px] font-semibold text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("kbd", { className: KBD, children: "Esc" }),
+            " close"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("kbd", { className: KBD, children: "←" }),
+            /* @__PURE__ */ jsx("kbd", { className: KBD, children: "→" }),
+            " previous / next tool"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("kbd", { className: KBD, children: "Enter" }),
+            " open site",
+            /* @__PURE__ */ jsx("span", { className: "font-normal", children: "(in the comment box, Enter sends)" })
+          ] })
+        ] }),
+        editing && /* @__PURE__ */ jsx(
+          ToolFormDialog,
+          {
+            mode: "edit",
+            initial: tool,
+            onClose: () => setEditing(false),
+            onDone: () => setEditing(false)
+          }
+        )
+      ] }) : get.isError ? /* @__PURE__ */ jsx("p", { className: "py-10 text-center text-muted-foreground", children: "This tool is not listed any more." }) : /* @__PURE__ */ jsxs("div", { "aria-busy": "true", className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-[72px] w-2/3 rounded-[14px]" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/2" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "aspect-[16/10] w-full rounded-[14px]" })
+      ] })
+    }
+  );
+}
+function LifecycleNote({
+  tool,
+  onTellOwner
+}) {
+  const { lifecycle } = tool;
+  const [now] = useState(Date.now);
+  if (lifecycle.state === "not-working") {
+    const since = new Date(now - lifecycle.days * DAY_MS).toISOString();
+    return /* @__PURE__ */ jsxs(
+      "p",
+      {
+        "data-testid": "lifecycle-note",
+        className: "mt-3 rounded-[10px] bg-amber-50 px-3 py-[9px] text-[13.5px] text-amber-900 dark:bg-amber-950 dark:text-amber-200",
+        children: [
+          "The daily check has not reached this site since",
+          " ",
+          formatCardDate(since).replace(/ \d{4}$/, ""),
+          ". It may be down or moved.",
+          " ",
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onTellOwner,
+              className: "font-bold underline underline-offset-2",
+              children: "Tell the owner"
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (lifecycle.state === "archived") {
+    const on = formatCardDate(lifecycle.at);
+    return /* @__PURE__ */ jsxs(
+      "p",
+      {
+        "data-testid": "lifecycle-note",
+        className: "mt-3 rounded-[10px] bg-muted px-3 py-[9px] text-[13.5px] text-muted-foreground",
+        children: [
+          lifecycle.byName ? `Archived by ${lifecycle.byName} on ${on}${lifecycle.reason ? `: ${lifecycle.reason}` : ""}.` : `Archived automatically on ${on} after 30 days not working.`,
+          " ",
+          "Kept here so old links still land somewhere."
+        ]
+      }
+    );
+  }
+  return null;
+}
+export {
+  ToolCard
+};
+//# sourceMappingURL=ToolCard.js.map

package/dist/esm/modules/communityTools/ui/ToolCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolCard.js","sources":["../../../../../src/modules/communityTools/ui/ToolCard.tsx"],"sourcesContent":["import type { Claim } from '@igstack/app-catalog-backend-core'\nimport type { CommunityTool } from '@igstack/app-catalog-shared-core'\nimport { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'\nimport {\n  Archive,\n  ArrowLeft,\n  ArrowRight,\n  Check,\n  Eye,\n  Pencil,\n} from 'lucide-react'\nimport { useEffect, useId, useRef, useState } from 'react'\nimport { useTRPC } from '~/api/infra/trpc'\nimport {\n  DIALOG_ROUND_BUTTON,\n  DetailDialogShell,\n} from '~/modules/appCatalog/ui/catalog/DetailDialogShell'\nimport { MarkdownText } from '~/modules/appCatalog/ui/components/MarkdownText'\nimport { CommentsFeed } from '~/modules/appCatalog/ui/detail/CommentsFeed'\nimport { CommentsHelp } from '~/modules/appCatalog/ui/detail/CommentsHelp'\nimport { CommunityInput } from '~/modules/appCatalog/ui/detail/CommunityInput'\nimport type { CommunityInputHandle } from '~/modules/appCatalog/ui/detail/CommunityInput'\nimport { cn } from '~/lib/utils'\nimport { useAuth } from '~/modules/auth'\nimport { Skeleton } from '~/ui/skeleton'\nimport { CardScreenshot, formatCardDate } from './CardScreenshot'\nimport { CardTitleBlock } from './CardTitleBlock'\nimport { PersonAvatar } from './FeedRow'\nimport { useTimeUp } from '../useTimeUp'\nimport { PinButton } from './PinButton'\nimport { TagChip, tagKey, tagLabel } from './TagRow'\nimport { ArchiveConfirm, GHOST_BUTTON, ToolFormDialog } from './ToolFormDialog'\n\nconst KBD =\n  'rounded-[5px] border border-b-2 border-border bg-card px-1.5 py-px text-[11px] font-semibold text-muted-foreground'\n\nconst SECTION = 'mt-6 border-t border-border pt-[22px]'\n\nconst LABEL =\n  'text-[11.5px] font-bold tracking-wider text-muted-foreground uppercase'\n\nconst NO_CLAIMS: Claim[] = []\n\nconst DAY_MS = 24 * 60 * 60 * 1000\n\n/** How often a card whose first screenshot is on its way asks again. */\nconst CAPTURE_POLL_MS = 5000\n\n/** How long one open card waits for a first screenshot before it stops asking. */\nconst CAPTURE_WAIT_MS = 2 * 60 * 1000\n\nexport interface ToolCardProps {\n  slug: string\n  /** The list the card was opened from, in its order: ←/→ step through it. */\n  siblings: string[]\n  onClose: () => void\n  onNavigate: (slug: string) => void\n  pinned: boolean\n  /** Its pin is being saved. */\n  pinBusy?: boolean\n  onTogglePin: (tool: CommunityTool) => void\n  /** Display names of official apps by slug, for app tags. */\n  appNames: Record<string, string>\n  /** A tag chip on the card: close it and filter the feed to that tag. */\n  onChooseTag: (tag: string) => void\n}\n\n/** Typing belongs to the field: the card's keys stay out of it. */\nfunction isTyping(target: HTMLElement): boolean {\n  return (\n    target.isContentEditable ||\n    target.closest('input, textarea, select') !== null\n  )\n}\n\n/**\n * A community tool over the Community page, in the official card's shell: no\n * tabs, one scroll. Title and screenshot to recognise it, how to use it, who\n * to ask, and the comments.\n */\nexport function ToolCard({\n  slug,\n  siblings,\n  onClose,\n  onNavigate,\n  pinned,\n  pinBusy,\n  onTogglePin,\n  appNames,\n  onChooseTag,\n}: ToolCardProps) {\n  const { user } = useAuth()\n  const isAdmin = user?.isAdmin === true\n  const trpc = useTRPC()\n  const queryClient = useQueryClient()\n  // The feed already holds every tool, so the card paints at once from it\n  // and the tool's own query only refreshes it.\n  const list = useQuery(trpc.communityTools.list.queryOptions())\n  const fromList = list.data?.find((t) => t.slug === slug)\n  // Whatever the server says, an open card stops waiting after a while: a\n  // capture that never reports back must not keep it asking forever.\n  const gaveUpOnCapture = useTimeUp(slug, CAPTURE_WAIT_MS)\n  const get = useQuery({\n    ...trpc.communityTools.get.queryOptions({ slug }),\n    placeholderData: fromList,\n    // Until the first visit lands, keep asking, so the screenshot replaces\n    // the placeholder without a reload.\n    refetchInterval: (query) =>\n      query.state.data?.capturePending && !gaveUpOnCapture\n        ? CAPTURE_POLL_MS\n        : false,\n  })\n  const tool = get.data\n\n  // One view per open. The ref keeps StrictMode's second effect from counting\n  // twice; stepping to another tool is another open.\n  const [counts, setCounts] = useState<{\n    slug: string\n    views30d: number\n    viewsAll: number\n  } | null>(null)\n  // The hook's own onSuccess, not one passed to `mutate`: StrictMode's\n  // remount detaches the observer a `mutate` callback hangs on, so that one\n  // never fires and the count stayed one short.\n  const { mutate: recordView } = useMutation(\n    trpc.communityTools.recordView.mutationOptions({\n      onSuccess: (c, { slug: viewed }) => {\n        setCounts({ slug: viewed, ...c })\n      },\n    }),\n  )\n  const recordedForRef = useRef<string | null>(null)\n  useEffect(() => {\n    if (recordedForRef.current === slug) return\n    recordedForRef.current = slug\n    recordView({ slug })\n  }, [slug, recordView])\n  const views = counts?.slug === slug ? counts : tool\n\n  const [editing, setEditing] = useState(false)\n  const [archiving, setArchiving] = useState(false)\n  const refreshTools = () =>\n    queryClient.invalidateQueries({\n      queryKey: trpc.communityTools.pathKey(),\n    })\n  const approve = useMutation(\n    trpc.communityTools.approve.mutationOptions({ onSuccess: refreshTools }),\n  )\n  const archive = useMutation(\n    trpc.communityTools.archive.mutationOptions({\n      onSuccess: () => {\n        setArchiving(false)\n        return refreshTools()\n      },\n    }),\n  )\n  const adminError = approve.error ?? archive.error\n\n  const commentsRef = useRef<CommunityInputHandle>(null)\n  const commentsHeadingId = useId()\n  const commentTarget = { communityToolSlug: slug }\n  const comments = useQuery(trpc.feedback.list.queryOptions(commentTarget))\n  const commentCount = comments.data?.items.length ?? 0\n\n  const index = siblings.indexOf(slug)\n  const prev = index > 0 ? siblings[index - 1] : undefined\n  const next = index >= 0 ? siblings[index + 1] : undefined\n  const nameOf = (s: string) => list.data?.find((t) => t.slug === s)?.name ?? s\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    // React bubbles through portals: keys in the screenshot viewer are not ours.\n    const target = e.target as HTMLElement\n    if (!e.currentTarget.contains(target)) return\n    if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return\n    if (isTyping(target)) return\n    if (e.key === 'ArrowLeft' && prev) {\n      e.preventDefault()\n      onNavigate(prev)\n    } else if (e.key === 'ArrowRight' && next) {\n      e.preventDefault()\n      onNavigate(next)\n    } else if (e.key === 'Enter' && tool) {\n      // A link or button answers Enter itself; the title block is the link\n      // that opens the site.\n      if (target.closest('a, button')) return\n      e.preventDefault()\n      window.open(tool.url, '_blank', 'noopener,noreferrer')\n    }\n  }\n\n  const controls = index >= 0 && siblings.length > 1 && (\n    <>\n      <span className=\"flex items-center gap-1 text-[13px] font-semibold text-muted-foreground\">\n        <button\n          type=\"button\"\n          aria-label={prev ? `Previous tool: ${nameOf(prev)}` : 'Previous tool'}\n          disabled={!prev}\n          onClick={() => prev && onNavigate(prev)}\n          className={cn(DIALOG_ROUND_BUTTON, 'disabled:opacity-40')}\n        >\n          <ArrowLeft className=\"size-4\" />\n        </button>\n        <span data-testid=\"card-position\">\n          {index + 1} of {siblings.length}\n        </span>\n        <button\n          type=\"button\"\n          aria-label={next ? `Next tool: ${nameOf(next)}` : 'Next tool'}\n          disabled={!next}\n          onClick={() => next && onNavigate(next)}\n          className={cn(DIALOG_ROUND_BUTTON, 'disabled:opacity-40')}\n        >\n          <ArrowRight className=\"size-4\" />\n        </button>\n      </span>\n      <i aria-hidden=\"true\" className=\"mx-1 h-5 w-px bg-border\" />\n    </>\n  )\n\n  return (\n    <DetailDialogShell\n      label={`${tool?.name ?? 'Community tool'} details`}\n      shownKey={slug}\n      maxWidthClass=\"max-w-[min(920px,94vw)]\"\n      focusSelector='[data-testid=\"card-title-block\"]'\n      controls={controls}\n      testId=\"tool-card\"\n      onClose={onClose}\n      onKeyDown={onKeyDown}\n    >\n      {tool ? (\n        <>\n          <div className=\"border-b border-border pb-[22px]\">\n            <div className=\"flex items-end justify-between gap-4 pr-44\">\n              <CardTitleBlock tool={tool} />\n              <div className=\"-mr-40 flex shrink-0 items-center gap-2\">\n                {tool.canEdit && (\n                  <button\n                    type=\"button\"\n                    data-testid=\"card-edit-button\"\n                    onClick={() => setEditing(true)}\n                    className={cn(GHOST_BUTTON, 'h-10 px-3.5 text-[13.5px]')}\n                  >\n                    <Pencil aria-hidden=\"true\" className=\"size-4\" />\n                    Edit\n                  </button>\n                )}\n                <PinButton\n                  labelled\n                  pinned={pinned}\n                  busy={pinBusy}\n                  name={tool.name}\n                  onToggle={() => onTogglePin(tool)}\n                />\n              </div>\n            </div>\n            <div\n              className={cn(\n                tool.lifecycle.state === 'archived' && 'opacity-60',\n              )}\n            >\n              {tool.summary && (\n                <p className=\"mt-3.5 text-[15px] text-foreground/80\">\n                  {tool.summary}\n                </p>\n              )}\n              {tool.tags.length > 0 && (\n                <div\n                  data-testid=\"card-tags\"\n                  className=\"mt-2.5 flex flex-wrap gap-1.5\"\n                >\n                  {tool.tags.map((tag) => (\n                    <TagChip\n                      key={tagKey(tag)}\n                      label={tagLabel(tag, appNames)}\n                      onClick={() => onChooseTag(tagKey(tag))}\n                    />\n                  ))}\n                </div>\n              )}\n              {views && (\n                <p\n                  data-testid=\"card-views\"\n                  className=\"mt-2.5 flex gap-[18px] text-[13px] font-semibold text-muted-foreground\"\n                >\n                  <span className=\"inline-flex items-center gap-1.5\">\n                    <Eye aria-hidden=\"true\" className=\"size-[15px]\" />\n                    <b className=\"text-foreground\">\n                      {views.views30d.toLocaleString('en-US')}\n                    </b>{' '}\n                    opens this month\n                  </span>\n                  <span>\n                    <b className=\"text-foreground\">\n                      {views.viewsAll.toLocaleString('en-US')}\n                    </b>{' '}\n                    all time\n                  </span>\n                </p>\n              )}\n              {/* Who to ask, up here with the facts: below the screenshot\n                  it fell under the fold. */}\n              <p\n                data-testid=\"card-people\"\n                className=\"mt-2.5 flex flex-wrap items-center gap-x-[18px] gap-y-1.5 text-[13px] font-semibold text-muted-foreground\"\n              >\n                {tool.owners.length > 0 && (\n                  <span className=\"inline-flex flex-wrap items-center gap-x-3 gap-y-1.5\">\n                    <span className={LABEL}>Owners</span>\n                    {tool.owners.map((owner) => (\n                      <span\n                        key={owner.slug ?? `named:${owner.name}`}\n                        className=\"inline-flex items-center gap-1.5 text-foreground\"\n                      >\n                        <PersonAvatar name={owner.name} />\n                        <span data-testid=\"card-owner\">{owner.name}</span>\n                      </span>\n                    ))}\n                  </span>\n                )}\n                <span className=\"inline-flex items-center gap-1.5\">\n                  <span className={LABEL}>Added by</span>\n                  <span className=\"text-foreground\">{tool.addedBy.name}</span>\n                  <span className=\"font-normal\">\n                    {formatCardDate(tool.createdAt)}\n                  </span>\n                </span>\n              </p>\n            </div>\n            <LifecycleNote\n              tool={tool}\n              onTellOwner={() => commentsRef.current?.focus()}\n            />\n            {isAdmin && (\n              <div\n                data-testid=\"card-admin\"\n                className=\"mt-3.5 flex flex-col gap-2.5 rounded-[10px] border border-dashed border-border px-3 py-2.5\"\n              >\n                {archiving ? (\n                  <ArchiveConfirm\n                    busy={archive.isPending}\n                    onCancel={() => setArchiving(false)}\n                    onArchive={(reason) => archive.mutate({ slug, reason })}\n                  />\n                ) : (\n                  <div className=\"flex flex-wrap items-center gap-2.5\">\n                    <span className=\"mr-auto text-[12.5px] font-bold tracking-wider text-muted-foreground uppercase\">\n                      Admin\n                    </span>\n                    {!tool.reviewed && (\n                      <button\n                        type=\"button\"\n                        disabled={approve.isPending}\n                        aria-busy={approve.isPending || undefined}\n                        onClick={() => approve.mutate({ slug })}\n                        className={GHOST_BUTTON}\n                      >\n                        <Check aria-hidden=\"true\" className=\"size-4\" />\n                        {approve.isPending ? 'Approving…' : 'Approve'}\n                      </button>\n                    )}\n                    {tool.lifecycle.state !== 'archived' && (\n                      <button\n                        type=\"button\"\n                        onClick={() => setArchiving(true)}\n                        className={GHOST_BUTTON}\n                      >\n                        <Archive aria-hidden=\"true\" className=\"size-4\" />\n                        Archive\n                      </button>\n                    )}\n                  </div>\n                )}\n                {adminError && (\n                  <p\n                    role=\"alert\"\n                    className=\"text-[13px] font-semibold text-destructive\"\n                  >\n                    {adminError.message}\n                  </p>\n                )}\n              </div>\n            )}\n          </div>\n\n          <CardScreenshot\n            tool={tool}\n            capturing={tool.capturePending && !gaveUpOnCapture}\n          />\n\n          {tool.descriptionMd.trim() && (\n            <section\n              data-testid=\"card-how-to-use\"\n              className={cn(SECTION, 'text-[14.5px]')}\n            >\n              <h3 className=\"mb-2 font-serif text-[17px] font-semibold\">\n                How to use\n              </h3>\n              <div className=\"prose prose-sm dark:prose-invert max-w-[68ch]\">\n                <MarkdownText>{tool.descriptionMd}</MarkdownText>\n              </div>\n            </section>\n          )}\n\n          {/* The card's own order: what was said first, the input last. The\n              official card's CommunitySection puts the input on top. */}\n          <section data-testid=\"card-comments\" className={SECTION}>\n            <div className=\"comments-head\">\n              <h2 id={commentsHeadingId} className=\"behind-group__title\">\n                Comments\n              </h2>\n              {commentCount > 0 && (\n                <span\n                  data-testid=\"card-comment-count\"\n                  className=\"rounded-full bg-muted px-2 text-xs leading-5 font-bold text-muted-foreground\"\n                >\n                  {commentCount}\n                </span>\n              )}\n              <CommentsHelp appName={tool.name} />\n            </div>\n            <CommentsFeed\n              target={commentTarget}\n              claims={NO_CLAIMS}\n              labelledBy={commentsHeadingId}\n            />\n            <div className=\"mt-3.5\">\n              <CommunityInput\n                ref={commentsRef}\n                target={commentTarget}\n                appName={tool.name}\n              />\n            </div>\n          </section>\n\n          <p className=\"mt-[22px] flex flex-wrap items-center gap-x-4 gap-y-1.5 text-[12.5px] font-semibold text-muted-foreground\">\n            <span className=\"inline-flex items-center gap-1.5\">\n              <kbd className={KBD}>Esc</kbd> close\n            </span>\n            <span className=\"inline-flex items-center gap-1.5\">\n              <kbd className={KBD}>←</kbd>\n              <kbd className={KBD}>→</kbd> previous / next tool\n            </span>\n            <span className=\"inline-flex items-center gap-1.5\">\n              <kbd className={KBD}>Enter</kbd> open site\n              <span className=\"font-normal\">\n                (in the comment box, Enter sends)\n              </span>\n            </span>\n          </p>\n          {editing && (\n            <ToolFormDialog\n              mode=\"edit\"\n              initial={tool}\n              onClose={() => setEditing(false)}\n              onDone={() => setEditing(false)}\n            />\n          )}\n        </>\n      ) : get.isError ? (\n        <p className=\"py-10 text-center text-muted-foreground\">\n          This tool is not listed any more.\n        </p>\n      ) : (\n        <div aria-busy=\"true\" className=\"flex flex-col gap-4\">\n          <Skeleton className=\"h-[72px] w-2/3 rounded-[14px]\" />\n          <Skeleton className=\"h-4 w-1/2\" />\n          <Skeleton className=\"aspect-[16/10] w-full rounded-[14px]\" />\n        </div>\n      )}\n    </DetailDialogShell>\n  )\n}\n\n/** Why a tool that is not active is shown the way it is. */\nfunction LifecycleNote({\n  tool,\n  onTellOwner,\n}: {\n  tool: CommunityTool\n  onTellOwner: () => void\n}) {\n  const { lifecycle } = tool\n  const [now] = useState(Date.now)\n  if (lifecycle.state === 'not-working') {\n    const since = new Date(now - lifecycle.days * DAY_MS).toISOString()\n    return (\n      <p\n        data-testid=\"lifecycle-note\"\n        className=\"mt-3 rounded-[10px] bg-amber-50 px-3 py-[9px] text-[13.5px] text-amber-900 dark:bg-amber-950 dark:text-amber-200\"\n      >\n        The daily check has not reached this site since{' '}\n        {formatCardDate(since).replace(/ \\d{4}$/, '')}. It may be down or moved.{' '}\n        <button\n          type=\"button\"\n          onClick={onTellOwner}\n          className=\"font-bold underline underline-offset-2\"\n        >\n          Tell the owner\n        </button>\n      </p>\n    )\n  }\n  if (lifecycle.state === 'archived') {\n    const on = formatCardDate(lifecycle.at)\n    return (\n      <p\n        data-testid=\"lifecycle-note\"\n        className=\"mt-3 rounded-[10px] bg-muted px-3 py-[9px] text-[13.5px] text-muted-foreground\"\n      >\n        {lifecycle.byName\n          ? `Archived by ${lifecycle.byName} on ${on}${lifecycle.reason ? `: ${lifecycle.reason}` : ''}.`\n          : `Archived automatically on ${on} after 30 days not working.`}{' '}\n        Kept here so old links still land somewhere.\n      </p>\n    )\n  }\n  return null\n}\n"],"names":["_a","_b"],"mappings":"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"}

package/dist/esm/modules/communityTools/ui/ToolFormDialog.d.ts

@@ -0,0 +1,32 @@
+import { CommunityTool } from '@igstack/app-catalog-shared-core';
+export declare const GHOST_BUTTON = "inline-flex h-[34px] items-center gap-[7px] rounded-[10px] border border-border bg-card px-[11px] text-[13px] font-bold whitespace-nowrap hover:border-primary/40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:opacity-50";
+export declare const PRIMARY_BUTTON = "inline-flex h-[34px] items-center gap-2 rounded-[10px] bg-primary px-4 text-[13.5px] font-extrabold whitespace-nowrap text-primary-foreground shadow-sm focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring disabled:cursor-not-allowed disabled:opacity-50";
+export interface ToolFormDialogProps {
+    mode: 'add' | 'edit';
+    /** The tool being edited. */
+    initial?: CommunityTool;
+    /** What the visitor searched for: a first guess at the name. */
+    prefillName?: string;
+    /** Published, saved or archived. */
+    onDone: (slug: string) => void;
+    onClose: () => void;
+    /** The address is already listed, and they chose to look at that card. */
+    onOpenCard?: (slug: string) => void;
+}
+/**
+ * Add a tool, or edit one: the same form. The address comes first; once it
+ * sits still the backend reads the page, the title fills the name and a
+ * screenshot preview shows. A host already listed is caught before anything
+ * else is asked. Publish makes the tool live at once and puts it in the
+ * review list.
+ */
+export declare function ToolFormDialog({ mode, initial, prefillName, onDone, onClose, onOpenCard, }: ToolFormDialogProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Archiving asks why, in one step: the reason is what colleagues read on the
+ * card, and what the review list records.
+ */
+export declare function ArchiveConfirm({ busy, onArchive, onCancel, }: {
+    busy: boolean;
+    onArchive: (reason: string) => void;
+    onCancel: () => void;
+}): import("react/jsx-runtime").JSX.Element;