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

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

@@ -0,0 +1,765 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { hostOf, TAG_VALUE_MAX } from "@igstack/app-catalog-shared-core";
+import { useQueryClient, useQuery, useMutation } from "@tanstack/react-query";
+import { Link } from "@tanstack/react-router";
+import { X, Loader2, CheckCircle2, AlertTriangle, Archive, AlertCircle, Camera, ImageOff } from "lucide-react";
+import { useId, useState, useRef, useEffect } from "react";
+import { useTRPC } from "../../../api/infra/trpc.js";
+import { cn } from "../../../lib/utils.js";
+import { useAppCatalogContext } from "../../appCatalog/context/AppCatalogContext.js";
+import { MarkdownText } from "../../appCatalog/ui/components/MarkdownText.js";
+import { useAuth } from "../../auth/AuthContext.js";
+import "../../../ui/button.js";
+import { useDismissable } from "../../dismiss/DismissStack.js";
+import { Dialog, DialogContent, DialogTitle } from "../../../ui/dialog.js";
+import { formatCardDate } from "./CardScreenshot.js";
+import { screenshotUrl } from "./FeedRow.js";
+import { personName, FIELD_BAD, FIELD_BOX, OwnerPicker } from "./OwnerPicker.js";
+import { TagPicker } from "./TagPicker.js";
+const PREVIEW_DELAY_MS = 400;
+const NAME_MAX = 80;
+const SUMMARY_MAX = 160;
+const DESCRIPTION_MAX = 5e3;
+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";
+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";
+const LABEL = "text-[13px] font-bold";
+const HINT = "text-[12.5px] text-muted-foreground";
+function FieldError({ id, children }) {
+  return /* @__PURE__ */ jsxs(
+    "p",
+    {
+      id,
+      role: "alert",
+      className: "flex items-center gap-1.5 text-[12.5px] font-bold text-destructive",
+      children: [
+        /* @__PURE__ */ jsx(AlertCircle, { "aria-hidden": "true", className: "size-3.5 shrink-0" }),
+        children
+      ]
+    }
+  );
+}
+function ToolFormDialog({
+  mode,
+  initial,
+  prefillName,
+  onDone,
+  onClose,
+  onOpenCard
+}) {
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const { user } = useAuth();
+  const { persons, resources } = useAppCatalogContext();
+  const list = useQuery(trpc.communityTools.list.queryOptions());
+  const formId = useId();
+  const ids = {
+    url: `${formId}-url`,
+    name: `${formId}-name`,
+    summary: `${formId}-summary`,
+    owners: `${formId}-owners`,
+    tags: `${formId}-tags`,
+    description: `${formId}-description`
+  };
+  const errorId = (field) => `${field}-error`;
+  const [url, setUrl] = useState((initial == null ? void 0 : initial.url) ?? "");
+  const [name, setName] = useState((initial == null ? void 0 : initial.name) ?? prefillName ?? "");
+  const [nameTouched, setNameTouched] = useState(mode === "edit");
+  const nameTouchedRef = useRef(nameTouched);
+  const [summary, setSummary] = useState((initial == null ? void 0 : initial.summary) ?? "");
+  const [descriptionMd, setDescriptionMd] = useState(
+    (initial == null ? void 0 : initial.descriptionMd) ?? ""
+  );
+  const [owners, setOwners] = useState(() => {
+    var _a;
+    if (initial) return initial.owners;
+    const email = (_a = user == null ? void 0 : user.email) == null ? void 0 : _a.toLowerCase();
+    const me = email ? persons.find(
+      (p) => {
+        var _a2;
+        return ((_a2 = p.email) == null ? void 0 : _a2.toLowerCase()) === email || p.slug.toLowerCase() === email;
+      }
+    ) : void 0;
+    return me ? [{ slug: me.slug, name: personName(me) }] : [];
+  });
+  const [tags, setTags] = useState((initial == null ? void 0 : initial.tags) ?? []);
+  const [tab, setTab] = useState("write");
+  const [errors, setErrors] = useState({});
+  const [archiving, setArchiving] = useState(false);
+  const [checked, setChecked] = useState((initial == null ? void 0 : initial.url) ?? "");
+  const [preview, setPreview] = useState(null);
+  const [addAnywayFor, setAddAnywayFor] = useState(null);
+  const previewMutation = useMutation(
+    trpc.communityTools.preview.mutationOptions()
+  );
+  const { mutateAsync: readSite } = previewMutation;
+  useEffect(() => {
+    const address2 = url.trim();
+    let stale = false;
+    const timer = setTimeout(() => {
+      setChecked(address2);
+      if (!needsPreviewFor(address2, mode, initial == null ? void 0 : initial.url)) return;
+      readSite({ url: address2 }).then(
+        (data) => {
+          if (stale) return;
+          setPreview({ url: address2, data });
+          if (data.title && !nameTouchedRef.current) setName(data.title);
+        },
+        () => {
+          if (!stale) setPreview({ url: address2, data: null });
+        }
+      );
+    }, PREVIEW_DELAY_MS);
+    return () => {
+      stale = true;
+      clearTimeout(timer);
+    };
+  }, [url, mode, initial == null ? void 0 : initial.url, readSite]);
+  const address = url.trim();
+  const validAddress = hostOf(address) !== null;
+  const showBadAddress = checked !== "" && checked === address && !validAddress;
+  const reading = needsPreviewFor(address, mode, initial == null ? void 0 : initial.url) && (checked !== address || (preview == null ? void 0 : preview.url) !== address);
+  const current = (preview == null ? void 0 : preview.url) === address ? preview.data : null;
+  const duplicate = (current == null ? void 0 : current.duplicate) && current.duplicate.slug !== (initial == null ? void 0 : initial.slug) ? current.duplicate : null;
+  const officialApp = (current == null ? void 0 : current.officialApp) ?? null;
+  const blockedByDuplicate = (officialApp !== null || duplicate !== null) && addAnywayFor !== address;
+  const showDetails = mode === "edit" || validAddress && !reading && !blockedByDuplicate || !validAddress && name.trim() !== "" && !showBadAddress;
+  const invalidate = () => queryClient.invalidateQueries({
+    queryKey: trpc.communityTools.pathKey()
+  });
+  const add = useMutation(
+    trpc.communityTools.add.mutationOptions({ onSuccess: invalidate })
+  );
+  const edit = useMutation(
+    trpc.communityTools.edit.mutationOptions({ onSuccess: invalidate })
+  );
+  const archive = useMutation(
+    trpc.communityTools.archive.mutationOptions({ onSuccess: invalidate })
+  );
+  const save = mode === "add" ? add : edit;
+  const busy = save.isPending || archive.isPending;
+  const urlRef = useRef(null);
+  const submit = (e) => {
+    var _a;
+    e.preventDefault();
+    if (busy || !validAddress) return;
+    const found = {};
+    if (!name.trim()) found.name = "Give it the name colleagues call it.";
+    if (owners.length === 0) {
+      found.owners = "Add at least one person to ask about it.";
+    }
+    setErrors(found);
+    const first = ["name", "owners"].find((f) => found[f]);
+    if (first) {
+      (_a = document.getElementById(ids[first])) == null ? void 0 : _a.focus();
+      return;
+    }
+    const input = {
+      url: address,
+      name: name.trim(),
+      summary: summary.trim(),
+      descriptionMd,
+      ownerSlugs: owners.flatMap((o) => o.slug ? [o.slug] : []),
+      ownerNames: owners.flatMap((o) => o.slug ? [] : [o.name]),
+      tags
+    };
+    if (mode === "add") {
+      add.mutate(input, { onSuccess: (tool) => onDone(tool.slug) });
+    } else if (initial) {
+      edit.mutate(
+        { ...input, slug: initial.slug },
+        { onSuccess: (tool) => onDone(tool.slug) }
+      );
+    }
+  };
+  const contentRef = useRef(null);
+  useDismissable(contentRef, () => {
+    if (!busy) onClose();
+  });
+  const officialApps = resources.filter((r) => !r.parentSlug);
+  const knownTopics = [
+    ...new Set(
+      (list.data ?? []).flatMap(
+        (t) => t.tags.filter((g) => g.kind === "topic").map((g) => g.value)
+      )
+    )
+  ].sort();
+  const title = mode === "add" ? "Add a tool" : "Edit tool";
+  const serverError = save.error ?? archive.error;
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open: true,
+      onOpenChange: (open) => {
+        if (!open && !busy) onClose();
+      },
+      children: /* @__PURE__ */ jsx(
+        DialogContent,
+        {
+          ref: contentRef,
+          "data-testid": mode === "add" ? "add-tool-dialog" : "edit-tool-dialog",
+          "aria-describedby": void 0,
+          showCloseButton: false,
+          className: "top-[6vh] max-h-[88vh] translate-y-0 gap-0 overflow-y-auto p-0 sm:max-w-[680px]",
+          onOpenAutoFocus: (e) => {
+            var _a;
+            e.preventDefault();
+            (_a = urlRef.current) == null ? void 0 : _a.focus();
+          },
+          onInteractOutside: (e) => e.preventDefault(),
+          onEscapeKeyDown: (e) => {
+            const target = e.target;
+            if (target == null ? void 0 : target.closest('[aria-expanded="true"]')) e.preventDefault();
+          },
+          children: /* @__PURE__ */ jsxs("form", { onSubmit: submit, noValidate: true, "aria-busy": busy || void 0, children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-5 pt-4", children: [
+              /* @__PURE__ */ jsx(DialogTitle, { className: "font-serif text-[19px] leading-tight font-semibold", children: title }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Close",
+                  disabled: busy,
+                  onClick: onClose,
+                  className: "rounded-full p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-50",
+                  children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3.5 px-5 pt-4 pb-1.5", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+                /* @__PURE__ */ jsx("label", { htmlFor: ids.url, className: LABEL, children: "Site address" }),
+                /* @__PURE__ */ jsxs("div", { className: cn(FIELD_BOX, showBadAddress && FIELD_BAD), children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ref: urlRef,
+                      id: ids.url,
+                      type: "url",
+                      inputMode: "url",
+                      autoComplete: "off",
+                      placeholder: "Paste the link to the tool",
+                      value: url,
+                      disabled: busy,
+                      "aria-invalid": showBadAddress || void 0,
+                      "aria-describedby": showBadAddress ? errorId(ids.url) : `${ids.url}-hint`,
+                      onChange: (e) => setUrl(e.target.value),
+                      className: "h-10 min-w-0 flex-1 bg-transparent font-mono text-[13px] outline-none placeholder:font-sans placeholder:text-muted-foreground"
+                    }
+                  ),
+                  validAddress && reading && /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      "data-testid": "reading-site",
+                      className: "inline-flex shrink-0 items-center gap-1.5 text-[12.5px] font-semibold text-muted-foreground",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          Loader2,
+                          {
+                            "aria-hidden": "true",
+                            className: "size-3.5 animate-spin"
+                          }
+                        ),
+                        "Reading the site…"
+                      ]
+                    }
+                  ),
+                  validAddress && !reading && ((current == null ? void 0 : current.title) || (current == null ? void 0 : current.screenshotDataUrl)) && /* @__PURE__ */ jsxs("span", { className: "inline-flex shrink-0 items-center gap-1.5 text-[12.5px] font-semibold text-green-700 dark:text-green-400", children: [
+                    /* @__PURE__ */ jsx(CheckCircle2, { "aria-hidden": "true", className: "size-3.5" }),
+                    "Found"
+                  ] })
+                ] }),
+                showBadAddress ? /* @__PURE__ */ jsx(FieldError, { id: errorId(ids.url), children: "That is not a web address. Paste the full link, starting with https://" }) : !validAddress && !showDetails && !blockedByDuplicate && /* @__PURE__ */ jsx("p", { id: `${ids.url}-hint`, className: HINT, children: "Paste it first. The name and screenshot fill in from the site." })
+              ] }),
+              validAddress && reading && /* @__PURE__ */ jsx(ReadingSkeleton, {}),
+              blockedByDuplicate && officialApp && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-testid": "official-app-warning",
+                  role: "alert",
+                  className: "flex gap-2.5 rounded-[10px] bg-amber-50 px-3.5 py-3 text-[13.5px] text-amber-900 dark:bg-amber-950 dark:text-amber-200",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      AlertTriangle,
+                      {
+                        "aria-hidden": "true",
+                        className: "mt-px size-[18px] shrink-0"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsxs("b", { children: [
+                        "This is already in the catalog as ",
+                        officialApp.name,
+                        "."
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "mt-2.5 flex items-center gap-3.5", children: [
+                        /* @__PURE__ */ jsxs(
+                          Link,
+                          {
+                            to: "/app/$slug",
+                            params: { slug: officialApp.slug },
+                            className: GHOST_BUTTON,
+                            children: [
+                              "Open ",
+                              officialApp.name
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: "font-bold underline underline-offset-2",
+                            onClick: () => setAddAnywayFor(address),
+                            children: "Add anyway"
+                          }
+                        )
+                      ] })
+                    ] })
+                  ]
+                }
+              ),
+              blockedByDuplicate && !officialApp && duplicate && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-testid": "duplicate-warning",
+                  role: "alert",
+                  className: "flex gap-2.5 rounded-[10px] bg-amber-50 px-3.5 py-3 text-[13.5px] text-amber-900 dark:bg-amber-950 dark:text-amber-200",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      AlertTriangle,
+                      {
+                        "aria-hidden": "true",
+                        className: "mt-px size-[18px] shrink-0"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("b", { children: "This site is already here." }),
+                      " “",
+                      duplicate.name,
+                      "” uses the same address.",
+                      /* @__PURE__ */ jsxs("div", { className: "mt-2.5 flex items-center gap-3.5", children: [
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: GHOST_BUTTON,
+                            onClick: () => onOpenCard == null ? void 0 : onOpenCard(duplicate.slug),
+                            children: "Open that card"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: "font-bold underline underline-offset-2",
+                            onClick: () => setAddAnywayFor(address),
+                            children: "Add anyway"
+                          }
+                        )
+                      ] })
+                    ] })
+                  ]
+                }
+              ),
+              showDetails && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_190px] items-start gap-4", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-3.5", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+                      /* @__PURE__ */ jsx("label", { htmlFor: ids.name, className: LABEL, children: "Name" }),
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: cn(
+                            FIELD_BOX,
+                            !nameTouched && (current == null ? void 0 : current.title) && name === current.title && "bg-amber-50/70 dark:bg-amber-950/40",
+                            errors.name && FIELD_BAD
+                          ),
+                          children: /* @__PURE__ */ jsx(
+                            "input",
+                            {
+                              id: ids.name,
+                              type: "text",
+                              maxLength: NAME_MAX,
+                              value: name,
+                              disabled: busy,
+                              "aria-invalid": !!errors.name || void 0,
+                              "aria-describedby": errors.name ? errorId(ids.name) : `${ids.name}-hint`,
+                              onChange: (e) => {
+                                setName(e.target.value);
+                                setNameTouched(true);
+                                nameTouchedRef.current = true;
+                                setErrors((prev) => ({ ...prev, name: void 0 }));
+                              },
+                              className: "h-10 min-w-0 flex-1 bg-transparent outline-none"
+                            }
+                          )
+                        }
+                      ),
+                      errors.name ? /* @__PURE__ */ jsx(FieldError, { id: errorId(ids.name), children: errors.name }) : (current == null ? void 0 : current.title) && !nameTouched && /* @__PURE__ */ jsx("p", { id: `${ids.name}-hint`, className: HINT, children: "From the page title. Change it if colleagues call it something else." })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+                      /* @__PURE__ */ jsx("label", { htmlFor: ids.owners, className: LABEL, children: "Owners" }),
+                      /* @__PURE__ */ jsx(
+                        OwnerPicker,
+                        {
+                          id: ids.owners,
+                          persons,
+                          value: owners,
+                          disabled: busy,
+                          invalid: !!errors.owners,
+                          describedBy: errors.owners ? errorId(ids.owners) : `${ids.owners}-hint`,
+                          onChange: (next) => {
+                            setOwners(next);
+                            setErrors((prev) => ({ ...prev, owners: void 0 }));
+                          }
+                        }
+                      ),
+                      errors.owners ? /* @__PURE__ */ jsx(FieldError, { id: errorId(ids.owners), children: errors.owners }) : /* @__PURE__ */ jsx("p", { id: `${ids.owners}-hint`, className: HINT, children: "Who to ask about it. You are added by default." })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    ShotPreview,
+                    {
+                      preview: current,
+                      initial: address === (initial == null ? void 0 : initial.url) ? initial : void 0,
+                      validAddress
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+                  /* @__PURE__ */ jsxs("label", { htmlFor: ids.summary, className: LABEL, children: [
+                    "Summary",
+                    " ",
+                    /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "(optional)" })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: FIELD_BOX, children: /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      id: ids.summary,
+                      type: "text",
+                      maxLength: SUMMARY_MAX,
+                      value: summary,
+                      disabled: busy,
+                      "aria-describedby": `${ids.summary}-hint`,
+                      onChange: (e) => setSummary(e.target.value),
+                      className: "h-10 min-w-0 flex-1 bg-transparent outline-none"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("p", { id: `${ids.summary}-hint`, className: HINT, children: "One line under the name, in the list and on the card." })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+                  /* @__PURE__ */ jsxs("label", { htmlFor: ids.tags, className: LABEL, children: [
+                    "Tags",
+                    " ",
+                    /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "(optional)" })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    TagPicker,
+                    {
+                      id: ids.tags,
+                      apps: officialApps,
+                      knownTopics,
+                      value: tags,
+                      disabled: busy,
+                      describedBy: errors.tags ? errorId(ids.tags) : `${ids.tags}-hint`,
+                      onChange: (next) => {
+                        setTags(next);
+                        setErrors((prev) => ({ ...prev, tags: void 0 }));
+                      },
+                      onTooLong: () => setErrors((prev) => ({
+                        ...prev,
+                        tags: `A topic is at most ${TAG_VALUE_MAX} characters.`
+                      }))
+                    }
+                  ),
+                  errors.tags ? /* @__PURE__ */ jsx(FieldError, { id: errorId(ids.tags), children: errors.tags }) : /* @__PURE__ */ jsx("p", { id: `${ids.tags}-hint`, className: HINT, children: "The app it is for, or a topic word. Press Enter to add a new topic." })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+                  /* @__PURE__ */ jsx("label", { htmlFor: ids.description, className: LABEL, children: "How to use" }),
+                  /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-[10px] border border-border bg-card", children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        role: "tablist",
+                        "aria-label": "Write or preview",
+                        className: "flex items-center gap-0.5 border-b border-border bg-muted p-1",
+                        children: [
+                          ["write", "preview"].map((t) => /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              role: "tab",
+                              "aria-selected": tab === t,
+                              onClick: () => setTab(t),
+                              className: cn(
+                                "rounded-[7px] px-3 py-1 text-[12.5px] font-bold text-muted-foreground",
+                                tab === t && "bg-card text-foreground shadow-sm"
+                              ),
+                              children: t === "write" ? "Write" : "Preview"
+                            },
+                            t
+                          )),
+                          /* @__PURE__ */ jsx("span", { className: "ml-auto pr-2 text-[11.5px] text-muted-foreground", children: "Markdown" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "textarea",
+                      {
+                        id: ids.description,
+                        rows: 6,
+                        maxLength: DESCRIPTION_MAX,
+                        value: descriptionMd,
+                        disabled: busy,
+                        hidden: tab !== "write",
+                        "aria-describedby": `${ids.description}-hint`,
+                        onChange: (e) => setDescriptionMd(e.target.value),
+                        className: "block w-full resize-y bg-transparent px-3 py-2.5 font-mono text-[12.5px] leading-relaxed outline-none"
+                      }
+                    ),
+                    tab === "preview" && /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        "data-testid": "description-preview",
+                        role: "tabpanel",
+                        className: "prose prose-sm dark:prose-invert min-h-24 max-w-none px-3.5 py-2.5",
+                        children: descriptionMd.trim() ? /* @__PURE__ */ jsx(MarkdownText, { children: descriptionMd }) : /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "Nothing written yet." })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx("p", { id: `${ids.description}-hint`, className: HINT, children: "Short steps work best. This is the text people read on the card." })
+                ] })
+              ] })
+            ] }),
+            serverError && /* @__PURE__ */ jsxs(
+              "p",
+              {
+                role: "alert",
+                className: "mx-5 mt-2 rounded-[10px] bg-destructive/10 px-3 py-2 text-[13px] font-semibold text-destructive",
+                children: [
+                  archive.error ? "Could not archive it: " : "Could not save it: ",
+                  serverError.message
+                ]
+              }
+            ),
+            archiving && initial ? /* @__PURE__ */ jsx("div", { className: "mt-2 border-t border-border px-5 pt-3 pb-4", children: /* @__PURE__ */ jsx(
+              ArchiveConfirm,
+              {
+                busy: archive.isPending,
+                onCancel: () => setArchiving(false),
+                onArchive: (reason) => archive.mutate(
+                  { slug: initial.slug, reason },
+                  { onSuccess: () => onDone(initial.slug) }
+                )
+              }
+            ) }) : /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-end gap-2.5 border-t border-border px-5 pt-3 pb-4", children: [
+              mode === "edit" && (initial == null ? void 0 : initial.lifecycle.state) !== "archived" && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  disabled: busy,
+                  onClick: () => setArchiving(true),
+                  className: "inline-flex items-center gap-1.5 text-[13px] font-bold text-destructive hover:underline disabled:opacity-50",
+                  children: [
+                    /* @__PURE__ */ jsx(Archive, { "aria-hidden": "true", className: "size-3.5" }),
+                    "Archive this tool"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-[12.5px] text-muted-foreground",
+                    mode === "add" ? "mr-auto" : "ml-auto"
+                  ),
+                  children: mode === "add" ? "Goes live now and joins the review list." : "Changes show on the card right away."
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  disabled: busy,
+                  onClick: onClose,
+                  className: GHOST_BUTTON,
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "submit",
+                  disabled: !validAddress || reading || busy,
+                  "aria-busy": save.isPending || void 0,
+                  className: PRIMARY_BUTTON,
+                  children: [
+                    save.isPending && /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "size-4 animate-spin" }),
+                    mode === "add" ? save.isPending ? "Publishing…" : "Publish" : save.isPending ? "Saving…" : "Save changes"
+                  ]
+                }
+              )
+            ] })
+          ] })
+        }
+      )
+    }
+  );
+}
+function needsPreviewFor(address, mode, initialUrl) {
+  return hostOf(address) !== null && (mode === "add" || address !== initialUrl);
+}
+function ReadingSkeleton() {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "grid grid-cols-[minmax(0,1fr)_190px] items-start gap-4",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3.5", children: ["55%", "40%"].map((w, i) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: LABEL, children: i === 0 ? "Name" : "Owners" }),
+          /* @__PURE__ */ jsx("span", { className: cn(FIELD_BOX, "pointer-events-none"), children: /* @__PURE__ */ jsx(
+            "i",
+            {
+              className: "block h-3 animate-pulse rounded-md bg-muted",
+              style: { width: w }
+            }
+          ) })
+        ] }, w)) }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-[22px] flex aspect-[16/11] flex-col items-center justify-center gap-1.5 rounded-[10px] border border-border bg-muted text-xs font-semibold text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Camera, { "aria-hidden": "true", className: "size-5 animate-pulse" }),
+          "Taking a screenshot…"
+        ] })
+      ]
+    }
+  );
+}
+function ShotPreview({
+  preview,
+  initial,
+  validAddress
+}) {
+  const box = "relative mt-[22px] flex aspect-[16/11] flex-col items-center justify-center gap-1.5 overflow-hidden rounded-[10px] border border-border bg-muted px-3 text-center text-xs font-semibold text-muted-foreground";
+  const caption = "absolute bottom-1.5 left-1.5 inline-flex items-center gap-1 rounded-md bg-white/90 px-[7px] py-0.5 text-[11px] font-bold text-muted-foreground dark:bg-black/70";
+  if (preview == null ? void 0 : preview.screenshotDataUrl) {
+    return /* @__PURE__ */ jsxs("div", { "data-testid": "shot-preview", className: box, children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: preview.screenshotDataUrl,
+          alt: "Screenshot preview of the site",
+          className: "absolute inset-0 size-full object-cover object-left-top"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: caption, children: [
+        /* @__PURE__ */ jsx(Camera, { "aria-hidden": "true", className: "size-3" }),
+        "Captured just now"
+      ] })
+    ] });
+  }
+  if (initial == null ? void 0 : initial.screenshotId) {
+    return /* @__PURE__ */ jsxs("div", { "data-testid": "shot-preview", className: box, children: [
+      /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: screenshotUrl(initial.screenshotId, 640),
+          alt: `Screenshot of ${initial.name}`,
+          className: "absolute inset-0 size-full object-cover object-left-top"
+        }
+      ),
+      initial.capturedAt && /* @__PURE__ */ jsxs("span", { className: caption, children: [
+        /* @__PURE__ */ jsx(Camera, { "aria-hidden": "true", className: "size-3" }),
+        "Captured ",
+        formatCardDate(initial.capturedAt)
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-testid": "shot-preview", "data-state": "none", className: box, children: [
+    /* @__PURE__ */ jsx(ImageOff, { "aria-hidden": "true", className: "size-5" }),
+    preview && !preview.captureAllowed ? "This site's address is outside the hosts we take screenshots of, so it will be listed without a picture." : validAddress ? "No preview. The site may need a login, or it did not load." : "The screenshot shows here once the address is in."
+  ] });
+}
+function ArchiveConfirm({
+  busy,
+  onArchive,
+  onCancel
+}) {
+  const id = useId();
+  const inputRef = useRef(null);
+  const [reason, setReason] = useState("");
+  const [missing, setMissing] = useState(false);
+  useEffect(() => {
+    var _a;
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+  }, []);
+  const confirm = () => {
+    var _a;
+    if (!reason.trim()) {
+      setMissing(true);
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+      return;
+    }
+    onArchive(reason.trim());
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-testid": "archive-confirm", className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, className: LABEL, children: "Why archive it?" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+      /* @__PURE__ */ jsx("div", { className: cn(FIELD_BOX, "flex-1", missing && FIELD_BAD), children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          id,
+          type: "text",
+          maxLength: 500,
+          value: reason,
+          disabled: busy,
+          "aria-invalid": missing || void 0,
+          "aria-describedby": missing ? `${id}-error` : `${id}-hint`,
+          onChange: (e) => {
+            setReason(e.target.value);
+            setMissing(false);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              confirm();
+            }
+          },
+          className: "h-10 min-w-0 flex-1 bg-transparent outline-none"
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled: busy,
+          onClick: onCancel,
+          className: GHOST_BUTTON,
+          children: "Keep it"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: busy,
+          "aria-busy": busy || void 0,
+          onClick: confirm,
+          className: cn(PRIMARY_BUTTON, "bg-destructive text-white"),
+          children: [
+            busy && /* @__PURE__ */ jsx(Loader2, { "aria-hidden": "true", className: "size-4 animate-spin" }),
+            busy ? "Archiving…" : "Archive"
+          ]
+        }
+      )
+    ] }),
+    missing ? /* @__PURE__ */ jsx(FieldError, { id: `${id}-error`, children: "Say why, so colleagues know what happened to it." }) : /* @__PURE__ */ jsx("p", { id: `${id}-hint`, className: HINT, children: "Colleagues read this on the card. It stays reachable by its link." })
+  ] });
+}
+export {
+  ArchiveConfirm,
+  GHOST_BUTTON,
+  PRIMARY_BUTTON,
+  ToolFormDialog
+};
+//# sourceMappingURL=ToolFormDialog.js.map