@igstack/app-catalog-frontend-core 6.9.0 → 6.10.1

package/dist/esm/modules/appCatalog/ui/detail/AppDetails.js

@@ -1,11 +1,10 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useSearch } from "@tanstack/react-router";
-import { ExternalLink, Trash2, Plus, CalendarPlus, Clock } from "lucide-react";
+import { ExternalLink, Trash2, Plus } from "lucide-react";
 import React__default from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { Badge } from "../../../../ui/badge.js";
 import { Button } from "../../../../ui/button.js";
-import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "../../../../ui/accordion.js";
 import { AccessRequestSection } from "../components/AccessRequestSection.js";
 import { AccessPrerequisiteChain } from "../components/AccessPrerequisiteChain.js";
 import { hasQuickJumps, QuickJumpBar } from "../components/QuickJumpBar.js";
@@ -13,6 +12,7 @@ import { useAppCatalogFilters } from "../context/AppCatalogFiltersContext.js";
 import { PersonBadge } from "../components/PersonBadge.js";
 import { useUser } from "../../../auth/AuthContext.js";
 import "@tanstack/react-query";
+import "../../../auth/AuthModalContext.js";
 import { InlineEditableField } from "../components/InlineEditableField.js";
 import { MarkdownText } from "../components/MarkdownText.js";
 import { ScreenshotGallery } from "../components/ScreenshotGallery.js";
@@ -24,19 +24,29 @@ import { formatRelativeTime } from "../../utils/formatRelativeTime.js";
 import { TierVariantsSection } from "../components/TierVariantsSection.js";
 import { SubResourcesSection } from "../components/SubResourcesSection.js";
 import { getChildResources } from "../../utils/resolveHelpers.js";
-import { FeedbackSection } from "./FeedbackSection.js";
+import { CommunitySection } from "./CommunitySection.js";
+import { usePendingCount } from "./usePendingCount.js";
 import { displayUrl } from "../../utils/displayUrl.js";
 import { accessTabLabel } from "../../utils/accessTabLabel.js";
 import { AppDoor } from "./AppDoor.js";
 import { DetailTabs } from "./DetailTabs.js";
-import { ResourceDetailAccessActions } from "../../../extensions/features/resourceDetail.js";
+import { ResourceDetailCardSource, ResourceDetailAccessActions } from "../../../extensions/features/resourceDetail.js";
 const TAB = {
   overview: "overview",
   access: "access",
   resources: "resources",
   documentation: "documentation",
-  notes: "notes"
+  behind: "behind"
 };
+function Group({
+  title,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: "behind-group", children: [
+    /* @__PURE__ */ jsx("h2", { className: "behind-group__title", children: title }),
+    children
+  ] });
+}
 function Section({
   title,
   hint,
@@ -79,10 +89,9 @@ function AppDetails({
   app,
   onAppClick
 }) {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e, _f, _g;
   const [isGalleryOpen, setIsGalleryOpen] = React__default.useState(false);
   const [galleryInitialIndex, setGalleryInitialIndex] = React__default.useState(0);
-  const [composeRequests, setComposeRequests] = React__default.useState(0);
   const { approvalMethods, resources: allResources } = useAppCatalogContext();
   const { recordClick } = useAppClickHistory();
   const updateApp = useUpdateApp();
@@ -90,10 +99,33 @@ function AppDetails({
   const user = useUser();
   const isAdmin = (user == null ? void 0 : user.isAdmin) ?? false;
   const { state: filterState } = useAppCatalogFilters();
+  const behindCount = usePendingCount(app.slug, app.claims);
+  const lastChecked = (_a = app.freshness) == null ? void 0 : _a.lastCheckedAt;
+  const dateParts = [];
+  if (lastChecked) {
+    const suffix = ((_b = app.freshness) == null ? void 0 : _b.isStale) ? " (may be out of date)" : "";
+    dateParts.push(`Last checked ${formatRelativeTime(lastChecked)}${suffix}`);
+  }
+  if (app.createdAt) {
+    const addedLabel = dateParts.length > 0 ? "added" : "Added";
+    dateParts.push(`${addedLabel} ${formatRelativeTime(app.createdAt)}`);
+  }
+  const datesLine = dateParts.join(" · ");
+  const datesTitle = [
+    ((_c = app.freshness) == null ? void 0 : _c.lastContentChangeAt) && `Content last changed ${app.freshness.lastContentChangeAt}`,
+    lastChecked && `Last checked ${lastChecked}`,
+    app.createdAt && `Added ${app.createdAt}`
+  ].filter(Boolean).join(" · ");
+  const knowMoreRef = React__default.useRef(null);
+  const [shareAsk, setShareAsk] = React__default.useState(0);
+  React__default.useEffect(() => {
+    var _a2;
+    if (shareAsk) (_a2 = knowMoreRef.current) == null ? void 0 : _a2.focus();
+  }, [shareAsk]);
   const search = useSearch({ strict: false });
   const subSlug = search.sub;
   const displayTags = (app.tags ?? []).filter((tag) => !tag.includes(":"));
-  const sourceUrls = ((_a = app.sources) == null ? void 0 : _a.map((s) => typeof s === "string" ? s : s.url)) ?? [];
+  const sourceUrls = ((_d = app.sources) == null ? void 0 : _d.map((s) => typeof s === "string" ? s : s.url)) ?? [];
   const displaySources = draftSource !== null ? [...sourceUrls, draftSource] : sourceUrls;
   const pulseByUrl = React__default.useMemo(() => {
     const byUrl = /* @__PURE__ */ new Map();
@@ -140,13 +172,14 @@ function AppDetails({
     setGalleryInitialIndex(index);
     setIsGalleryOpen(true);
   };
-  const replacementApp = ((_b = app.deprecated) == null ? void 0 : _b.replacementSlug) ? allResources.find((a) => {
+  const replacementApp = ((_e = app.deprecated) == null ? void 0 : _e.replacementSlug) ? allResources.find((a) => {
     var _a2;
     return a.slug === ((_a2 = app.deprecated) == null ? void 0 : _a2.replacementSlug);
   }) : null;
   const access = accessTabLabel(app, approvalMethods);
-  const hasResourcesTab = children.length > 0 || (((_c = app.tiers) == null ? void 0 : _c.length) ?? 0) > 0;
+  const hasResourcesTab = children.length > 0 || (((_f = app.tiers) == null ? void 0 : _f.length) ?? 0) > 0;
   const resourcesLabel = children.length ? app.childrenLabel ?? "Resources" : "Environments";
+  const hasDocumentationTab = (((_g = app.links) == null ? void 0 : _g.length) ?? 0) > 0 || !!app.background;
   const tabs = [
     {
       id: TAB.overview,
@@ -216,31 +249,154 @@ function AppDetails({
         }
       }
     ] : [],
+    ...hasDocumentationTab ? [
+      {
+        id: TAB.documentation,
+        label: "Documentation",
+        render: () => {
+          var _a2;
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            app.links && app.links.length > 0 && /* @__PURE__ */ jsx(Section, { title: "Documentation", first: true, children: /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: app.links.map((link) => /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: link.url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: "flex items-center gap-1 text-xs text-muted-foreground hover:text-primary truncate",
+                children: [
+                  /* @__PURE__ */ jsx(ExternalLink, { className: "size-3 shrink-0" }),
+                  link.title || displayUrl(link.url)
+                ]
+              },
+              link.url
+            )) }) }),
+            app.background && /* @__PURE__ */ jsx(Section, { title: "Background", first: !((_a2 = app.links) == null ? void 0 : _a2.length), children: /* @__PURE__ */ jsx(MarkdownText, { className: "prose prose-sm text-muted-foreground max-w-none text-sm [&_p]:mt-0 [&_p]:mb-2 [&_p:last-child]:mb-0", children: app.background }) })
+          ] });
+        }
+      }
+    ] : [],
     {
-      id: TAB.documentation,
-      label: "Documentation",
+      id: TAB.behind,
+      label: "Behind this card",
+      chip: behindCount ? String(behindCount) : void 0,
+      ariaLabel: behindCount ? `Behind this card, ${behindCount} waiting for review` : void 0,
       render: () => {
-        var _a2, _b2;
-        return /* @__PURE__ */ jsxs(Fragment, { children: [
-          app.links && app.links.length > 0 && /* @__PURE__ */ jsx(Section, { title: "Documentation", first: true, children: /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: app.links.map((link) => /* @__PURE__ */ jsxs(
-            "a",
+        var _a2;
+        return /* @__PURE__ */ jsxs("div", { className: "behind-panel", children: [
+          /* @__PURE__ */ jsx(
+            CommunitySection,
             {
-              href: link.url,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "flex items-center gap-1 text-xs text-muted-foreground hover:text-primary truncate",
-              children: [
-                /* @__PURE__ */ jsx(ExternalLink, { className: "size-3 shrink-0" }),
-                link.title || displayUrl(link.url)
-              ]
-            },
-            link.url
-          )) }) }),
-          app.background && /* @__PURE__ */ jsx(Section, { title: "Background", children: /* @__PURE__ */ jsx(MarkdownText, { className: "prose prose-sm text-muted-foreground max-w-none text-sm [&_p]:mt-0 [&_p]:mb-2 [&_p:last-child]:mb-0", children: app.background }) }),
-          /* @__PURE__ */ jsx(Section, { title: "Sources", first: !app.background, children: isAdmin ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: displaySources.map((url, index) => {
-              const isDraft = draftSource !== null && index === sourceUrls.length;
-              return /* @__PURE__ */ jsxs(
+              ref: knowMoreRef,
+              appSlug: app.slug,
+              appName: app.displayName,
+              claims: app.claims
+            }
+          ),
+          (isAdmin || sourceUrls.length > 0 || app.createdAt || ((_a2 = app.freshness) == null ? void 0 : _a2.lastCheckedAt)) && /* @__PURE__ */ jsxs(Group, { title: "Kept up to date from", children: [
+            isAdmin ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: displaySources.map((url, index) => {
+                const isDraft = draftSource !== null && index === sourceUrls.length;
+                return /* @__PURE__ */ jsxs(
+                  "li",
+                  {
+                    className: "group flex items-center gap-2 text-xs",
+                    children: [
+                      /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground shrink-0 tabular-nums", children: [
+                        index + 1,
+                        "."
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        InlineEditableField,
+                        {
+                          value: url,
+                          initialEditMode: isDraft,
+                          onCancel: isDraft ? () => setDraftSource(null) : void 0,
+                          onSave: (newUrl) => {
+                            if (isDraft) {
+                              setDraftSource(null);
+                              if (newUrl) {
+                                updateApp.mutate({
+                                  id: app.id,
+                                  data: { sources: [...sourceUrls, newUrl] }
+                                });
+                              }
+                            } else {
+                              const next = [...sourceUrls];
+                              next[index] = newUrl;
+                              updateApp.mutate({
+                                id: app.id,
+                                data: { sources: next.filter(Boolean) }
+                              });
+                            }
+                          },
+                          placeholder: "https://...",
+                          viewClassName: "flex-1 min-w-0",
+                          renderView: (val) => val ? /* @__PURE__ */ jsxs(
+                            "a",
+                            {
+                              href: val,
+                              target: "_blank",
+                              rel: "noopener noreferrer",
+                              className: "hover:text-primary inline-flex items-center gap-1 truncate",
+                              children: [
+                                displayUrl(val),
+                                /* @__PURE__ */ jsx(ExternalLink, { className: "size-3 shrink-0" })
+                              ]
+                            }
+                          ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" })
+                        }
+                      ),
+                      !isDraft && pulseByUrl.has(url) && /* @__PURE__ */ jsx(
+                        SourcePulse,
+                        {
+                          pulse: pulseByUrl.get(url),
+                          className: "ml-auto"
+                        }
+                      ),
+                      !isDraft && /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          type: "button",
+                          variant: "ghost",
+                          size: "icon-sm",
+                          "aria-label": "Remove source",
+                          className: "shrink-0 text-muted-foreground hover:text-destructive",
+                          onClick: () => {
+                            const next = sourceUrls.filter(
+                              (_, i) => i !== index
+                            );
+                            updateApp.mutate({
+                              id: app.id,
+                              data: { sources: next }
+                            });
+                          },
+                          children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
+                        }
+                      )
+                    ]
+                  },
+                  isDraft ? "draft" : `${index}-${url}`
+                );
+              }) }),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "sm",
+                  className: "mt-2 gap-1 text-muted-foreground",
+                  onClick: () => setDraftSource(""),
+                  children: [
+                    /* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
+                    "Add source"
+                  ]
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: sourceUrls.map((url, index) => (
+              // `group` so hovering anywhere on the row fades that source's
+              // track in — the mark sits in a right-hand column, and row
+              // hover is what ties the two ends of a wide row together.
+              /* @__PURE__ */ jsxs(
                 "li",
                 {
                   className: "group flex items-center gap-2 text-xs",
@@ -249,191 +405,52 @@ function AppDetails({
                       index + 1,
                       "."
                     ] }),
-                    /* @__PURE__ */ jsx(
-                      InlineEditableField,
+                    url ? /* @__PURE__ */ jsxs(
+                      "a",
                       {
-                        value: url,
-                        initialEditMode: isDraft,
-                        onCancel: isDraft ? () => setDraftSource(null) : void 0,
-                        onSave: (newUrl) => {
-                          if (isDraft) {
-                            setDraftSource(null);
-                            if (newUrl) {
-                              updateApp.mutate({
-                                id: app.id,
-                                data: { sources: [...sourceUrls, newUrl] }
-                              });
-                            }
-                          } else {
-                            const next = [...sourceUrls];
-                            next[index] = newUrl;
-                            updateApp.mutate({
-                              id: app.id,
-                              data: { sources: next.filter(Boolean) }
-                            });
-                          }
-                        },
-                        placeholder: "https://...",
-                        viewClassName: "flex-1 min-w-0",
-                        renderView: (val) => val ? /* @__PURE__ */ jsxs(
-                          "a",
-                          {
-                            href: val,
-                            target: "_blank",
-                            rel: "noopener noreferrer",
-                            className: "hover:text-primary inline-flex items-center gap-1 truncate",
-                            children: [
-                              displayUrl(val),
-                              /* @__PURE__ */ jsx(ExternalLink, { className: "size-3 shrink-0" })
-                            ]
-                          }
-                        ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" })
+                        href: url,
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        className: "hover:text-primary inline-flex min-w-0 items-center gap-1 truncate",
+                        children: [
+                          displayUrl(url),
+                          /* @__PURE__ */ jsx(ExternalLink, { className: "size-3 shrink-0" })
+                        ]
                       }
-                    ),
-                    !isDraft && pulseByUrl.has(url) && /* @__PURE__ */ jsx(
+                    ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" }),
+                    pulseByUrl.has(url) && /* @__PURE__ */ jsx(
                       SourcePulse,
                       {
                         pulse: pulseByUrl.get(url),
                         className: "ml-auto"
                       }
-                    ),
-                    !isDraft && /* @__PURE__ */ jsx(
-                      Button,
-                      {
-                        type: "button",
-                        variant: "ghost",
-                        size: "icon-sm",
-                        "aria-label": "Remove source",
-                        className: "shrink-0 text-muted-foreground hover:text-destructive",
-                        onClick: () => {
-                          const next = sourceUrls.filter(
-                            (_, i) => i !== index
-                          );
-                          updateApp.mutate({
-                            id: app.id,
-                            data: { sources: next }
-                          });
-                        },
-                        children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" })
-                      }
                     )
                   ]
                 },
-                isDraft ? "draft" : `${index}-${url}`
-              );
-            }) }),
-            /* @__PURE__ */ jsxs(
-              Button,
-              {
-                type: "button",
-                variant: "ghost",
-                size: "sm",
-                className: "mt-2 gap-1 text-muted-foreground",
-                onClick: () => setDraftSource(""),
-                children: [
-                  /* @__PURE__ */ jsx(Plus, { className: "size-3.5" }),
-                  "Add source"
-                ]
-              }
-            )
-          ] }) : /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: sourceUrls.map((url, index) => (
-            // `group` so hovering anywhere on the row fades that source's
-            // track in — the mark sits in a right-hand column, and row
-            // hover is what ties the two ends of a wide row together.
-            /* @__PURE__ */ jsxs(
-              "li",
-              {
-                className: "group flex items-center gap-2 text-xs",
-                children: [
-                  /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground shrink-0 tabular-nums", children: [
-                    index + 1,
-                    "."
-                  ] }),
-                  url ? /* @__PURE__ */ jsxs(
-                    "a",
-                    {
-                      href: url,
-                      target: "_blank",
-                      rel: "noopener noreferrer",
-                      className: "hover:text-primary inline-flex min-w-0 items-center gap-1 truncate",
-                      children: [
-                        displayUrl(url),
-                        /* @__PURE__ */ jsx(ExternalLink, { className: "size-3 shrink-0" })
-                      ]
-                    }
-                  ) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "—" }),
-                  pulseByUrl.has(url) && /* @__PURE__ */ jsx(
-                    SourcePulse,
-                    {
-                      pulse: pulseByUrl.get(url),
-                      className: "ml-auto"
-                    }
-                  )
-                ]
-              },
-              index
-            )
-          )) }) }),
-          (app.createdAt || ((_a2 = app.freshness) == null ? void 0 : _a2.lastCheckedAt)) && /* @__PURE__ */ jsx(Section, { title: "Dates", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-x-5 gap-y-1", children: [
-            app.createdAt && /* @__PURE__ */ jsxs(
-              "span",
-              {
-                className: "inline-flex items-center gap-1 text-xs text-muted-foreground",
-                title: app.createdAt,
-                children: [
-                  /* @__PURE__ */ jsx(CalendarPlus, { className: "size-3" }),
-                  "Added ",
-                  formatRelativeTime(app.createdAt)
-                ]
-              }
-            ),
-            ((_b2 = app.freshness) == null ? void 0 : _b2.lastCheckedAt) && /* @__PURE__ */ jsxs(
-              "span",
-              {
-                className: "inline-flex items-center gap-1 text-xs text-muted-foreground",
-                title: app.freshness.lastContentChangeAt ? `Content last changed ${app.freshness.lastContentChangeAt} · last checked ${app.freshness.lastCheckedAt}` : `Last checked ${app.freshness.lastCheckedAt}`,
-                children: [
-                  /* @__PURE__ */ jsx(Clock, { className: "size-3" }),
-                  "Updated",
-                  " ",
-                  formatRelativeTime(
-                    app.freshness.lastContentChangeAt ?? app.freshness.lastCheckedAt
-                  ),
-                  app.freshness.isStale && /* @__PURE__ */ jsxs("span", { className: "italic opacity-75", children: [
-                    " ",
-                    "· may be out of date"
-                  ] })
-                ]
-              }
-            )
-          ] }) }),
-          (app.aiPrompt || app.aiMemory) && /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "mt-7", children: /* @__PURE__ */ jsxs(
-            AccordionItem,
+                index
+              )
+            )) }),
+            datesLine && /* @__PURE__ */ jsx("p", { className: "behind-dates", title: datesTitle, children: datesLine })
+          ] }),
+          (app.aiPrompt || app.aiMemory) && /* @__PURE__ */ jsxs(Group, { title: "How the AI maintains this card", children: [
+            app.aiPrompt && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("p", { className: "behind-ai__label", children: "Prompt" }),
+              /* @__PURE__ */ jsx("p", { className: "behind-ai", children: app.aiPrompt })
+            ] }),
+            app.aiMemory && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("p", { className: "behind-ai__label", children: "Memory" }),
+              /* @__PURE__ */ jsx("p", { className: "behind-ai", children: app.aiMemory })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "behind-card-source", children: /* @__PURE__ */ jsx(
+            ResourceDetailCardSource,
             {
-              value: "technical-info",
-              className: "border rounded-lg px-4",
-              children: [
-                /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-sm hover:no-underline py-3", children: "Technical information" }),
-                /* @__PURE__ */ jsxs(AccordionContent, { className: "pb-3 space-y-3", children: [
-                  app.aiPrompt && /* @__PURE__ */ jsxs("div", { children: [
-                    /* @__PURE__ */ jsx("h4", { className: "section-label mb-1", children: "AI Prompt" }),
-                    /* @__PURE__ */ jsx("p", { className: "text-xs whitespace-pre-wrap", children: app.aiPrompt })
-                  ] }),
-                  app.aiMemory && /* @__PURE__ */ jsxs("div", { children: [
-                    /* @__PURE__ */ jsx("h4", { className: "section-label mb-1", children: "AI Memory" }),
-                    /* @__PURE__ */ jsx("p", { className: "text-xs whitespace-pre-wrap", children: app.aiMemory })
-                  ] })
-                ] })
-              ]
+              appSlug: app.slug,
+              appName: app.displayName
             }
           ) })
         ] });
       }
-    },
-    {
-      id: TAB.notes,
-      label: "Notes & requests",
-      render: () => /* @__PURE__ */ jsx(FeedbackSection, { appSlug: app.slug, openComposer: composeRequests })
     }
   ];
   const band = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -446,19 +463,7 @@ function AppDetails({
           children: app.deprecated.type === "discouraged" ? "Discouraged" : "Deprecated"
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "ml-auto mr-10 flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx(ResourceDetailAccessActions, { ...accessActionsCtx }),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            size: "sm",
-            variant: "outline",
-            onClick: () => setComposeRequests((n) => n + 1),
-            children: "✎ Suggest a change"
-          }
-        )
-      ] })
+      /* @__PURE__ */ jsx("div", { className: "ml-auto mr-10 flex items-center gap-2", children: /* @__PURE__ */ jsx(ResourceDetailAccessActions, { ...accessActionsCtx }) })
     ] }),
     app.nicknames && app.nicknames.length > 0 && /* @__PURE__ */ jsxs("p", { className: "mt-2.5 text-xs text-muted-foreground", children: [
       "Also known as ",
@@ -534,8 +539,22 @@ function AppDetails({
         band,
         bandClassName: "-mx-6 -mt-5 px-6 pt-5 sm:-mx-8 sm:-mt-7 sm:px-8 sm:pt-7",
         forcedTab: subSlug && hasResourcesTab ? TAB.resources : void 0,
-        requestTab: composeRequests > 0 ? TAB.notes : void 0,
-        requestNonce: composeRequests
+        trailing: (select) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "detail-share",
+            "aria-label": "Share what you know",
+            onClick: () => {
+              select(TAB.behind);
+              setShareAsk((n) => n + 1);
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "max-sm:sr-only", children: "Share what you know" }),
+              /* @__PURE__ */ jsx(Plus, { className: "size-4 sm:hidden", "aria-hidden": "true" })
+            ]
+          }
+        )
       }
     ) }),
     /* @__PURE__ */ jsx(