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

package/src/modules/appCatalog/ui/catalog/AppDetailPanel.tsx

@@ -1,16 +1,15 @@
 import type { Resource } from '@igstack/app-catalog-backend-core'
-import { Maximize2, Minimize2, X } from 'lucide-react'
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { useMemo } from 'react'
 import { useAppCatalogContext } from '../../context/AppCatalogContext'
 import {
   ResourceDetailAccessActions,
   ResourceDetailProvider,
 } from '~/modules/extensions'
 import { useOptionalUser } from '~/modules/auth'
-import { useDismissStack, useDismissable } from '~/modules/dismiss/DismissStack'
 import { getChildResources } from '../../utils/resolveHelpers'
 import { SubResourceDetailPanel } from '../components/SubResourceDetailPanel'
 import { AppDetails } from '../detail/AppDetails'
+import { DetailDialogShell } from './DetailDialogShell'
 
 /**
  * Centered detail card over the catalog (#38, item B). Renders the rich
@@ -22,10 +21,8 @@ import { AppDetails } from '../detail/AppDetails'
  * sub-resource's own detail, with its two-step access chain and a back link to
  * the parent.
  *
- * Escape handling: this component does NOT globally bind Escape. Escape-to-close
- * is owned by AppDetails' own key handling (which first closes an open
- * screenshot gallery, then closes the card), so pressing Esc inside the gallery
- * returns to the card — not all the way to the home page (#38 Esc-stacking bug).
+ * The overlay itself — scrim, centring, Widen, Close, Escape — is
+ * `DetailDialogShell`, shared with the community tool card.
  */
 export function AppDetailPanel({
   app,
@@ -56,179 +53,39 @@ export function AppDetailPanel({
     }),
     [subResource, app, allResources, user],
   )
-  const dialogRef = useRef<HTMLDivElement>(null)
-  // Not persisted: every open starts at the normal width. The toggle is for the
-  // one card being read, and the default stays readable for the next one.
-  const [isWide, setIsWide] = useState(false)
-
-  /**
-   * Centre the card ONCE when it opens, then hold that position.
-   *
-   * `my-auto` centred it on every render, so each panel height change pushed both
-   * edges and half the delta became upward movement of everything above it —
-   * including the tab strip, which moved 113px and took the control the user had
-   * just clicked with it (CLS 0.19, "needs improvement").
-   *
-   * Top-anchoring fixed the shift but looked wrong: a short card sat high on the
-   * page. So pin the centred offset instead. The card still opens centred, and
-   * anything that grows it afterwards extends downward only — which is what a
-   * reader expects when they open a tab with more in it.
-   *
-   * Only on open and on resize. Deliberately NOT on content change: reacting to
-   * content is precisely the bug.
-   */
-  useLayoutEffect(() => {
-    const card = dialogRef.current
-    const scroller = card?.parentElement
-    if (!card || !scroller) return
-
-    const pinCentre = () => {
-      card.style.marginTop = '0px'
-      const style = getComputedStyle(scroller)
-      const usable =
-        scroller.clientHeight -
-        parseFloat(style.paddingTop) -
-        parseFloat(style.paddingBottom)
-      const slack = usable - card.offsetHeight
-      // Negative slack means the card is already taller than the viewport; leave it
-      // at the top and let the overlay scroll, rather than pushing its head off.
-      card.style.marginTop = `${Math.max(0, Math.round(slack / 2))}px`
-    }
-
-    pinCentre()
-    window.addEventListener('resize', pinCentre)
-    return () => window.removeEventListener('resize', pinCentre)
-    // Keyed on the opened entry: a different card is a new open, and should
-    // re-centre for its own height.
-  }, [app.slug, subResource?.slug])
-
-  // Focus the card on mount so Esc hotkeys fire immediately, even when
-  // the card was opened by a mouse click (which leaves focus on the grid row).
-  //
-  // The door link rather than the dialog itself when the app has one: Enter on
-  // a search result opens the card, so a second Enter is the browser's own link
-  // activation and takes the reader into the app. No door: the dialog.
-  //
-  // Unless something inside already took the caret — the Quick Jump field does,
-  // and it has the better claim: a child's effect runs before its parent's, so
-  // without this guard the card would take focus straight back off it.
-  //
-  // Runs again whenever the card navigates to another resource, keyed the same
-  // way the body below is: that navigation destroys whatever was focused (the
-  // "View replacement" button, a prerequisite's parent), and without this the
-  // caret would land on <body> — where the next Tab walks the catalog grid
-  // behind the scrim, since the card has no focus trap.
   const shownSlug = subResource?.slug ?? app.slug
-  const stack = useDismissStack()
-  useEffect(() => {
-    const dialog = dialogRef.current
-    if (!dialog || dialog.contains(document.activeElement)) return
-    // Only while the card is on top. A layer opened OVER it — a deployment's
-    // dialog on a nested route — owns the caret, and on a cold deep link that
-    // layer mounts before the card does, so without this check the card took
-    // focus back off the dialog's first field the moment the catalog arrived.
-    const top = stack.topElement()
-    if (top && top !== dialog) return
-    const target = dialog.querySelector<HTMLElement>('.app-door') ?? dialog
-    target.focus()
-  }, [shownSlug, stack])
-
-  // Escape closes the card. Registered here rather than in AppDetails because
-  // this is the layer's element, and because the sub-resource view renders a
-  // different body in place of AppDetails — which left that view with no
-  // Escape at all while the registration lived in the body.
-  useDismissable(dialogRef, onClose)
 
   return (
-    <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 sm:p-6 md:p-10">
-      {/* scrim */}
-      <button
-        type="button"
-        aria-label="Close details panel"
-        onClick={onClose}
-        className="fixed inset-0 -z-10 bg-black/40 backdrop-blur-[2px] animate-in fade-in"
-      />
-      {/* centered card — wide enough for data tables (sub-resources have 5
-          columns incl. "Access Contacts"/"AWS Account" that wrapped at 760px);
-          prose inside AppDetails is width-capped separately so it stays
-          readable. Caps at 94vw so it never touches the edges. */}
-      <div
-        ref={dialogRef}
-        role="dialog"
-        aria-modal="true"
-        aria-label={`${subResource?.displayName ?? app.displayName} details`}
-        tabIndex={-1}
-        // Centred on open, then held — see the pin effect above. `my-auto` is
-        // deliberately absent: it re-centres on EVERY height change, which is the
-        // layout-shift bug.
-        // `overflow-hidden` belongs on the rounded box: the scrolling child
-        // below carries the band's tint to its own square corners and paints
-        // them over this radius, so the card's top corners read as cut off.
-        // Widening drops the cap only. The pinned top margin is left alone, so
-        // the card's top edge stays put and restoring gives back the same layout.
-        className={`relative w-full ${isWide ? 'max-w-none' : 'max-w-[min(1120px,94vw)]'} overflow-hidden rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200 outline-none`}
-      >
-        <div className="absolute top-3 right-3 z-10 flex gap-1">
-          <button
-            type="button"
-            aria-label={isWide ? 'Restore width' : 'Widen card'}
-            title={isWide ? 'Restore width' : 'Widen card'}
-            onClick={() => setIsWide((wide) => !wide)}
-            className="rounded-full p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
-          >
-            {isWide ? (
-              <Minimize2 className="size-4" />
-            ) : (
-              <Maximize2 className="size-4" />
-            )}
-          </button>
-          <button
-            type="button"
-            aria-label="Close"
-            onClick={onClose}
-            className="rounded-full p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
-          >
-            <X className="size-4" />
-          </button>
-        </div>
-        {/* Keyed by the resource on screen, so the body remounts when the card
-            navigates from one app to another ("View replacement", an access
-            prerequisite's parent) instead of updating in place. Everything
-            per-app inside it is component state with no reset of its own — the
-            roles table's expansion, the icon/screenshot error flags, a draft
-            source edit — and it used to arrive at the next app still carrying
-            the previous one's, plus the previous scroll offset.
-
-            The key is here and not on the outer dialog on purpose: that one
-            would restart the open animation and re-run the mount-focus effect
-            on every in-card navigation. */}
-        <div
-          key={shownSlug}
-          className="max-h-[85vh] overflow-y-auto px-6 py-5 sm:px-8 sm:py-7"
-        >
-          {/* Inside the key, so anything a plugin provides here is scoped to
+    <DetailDialogShell
+      label={`${subResource?.displayName ?? app.displayName} details`}
+      shownKey={shownSlug}
+      // Wide enough for data tables (sub-resources have 5 columns incl.
+      // "Access Contacts"/"AWS Account" that wrapped at 760px); prose inside
+      // AppDetails is width-capped separately so it stays readable. Caps at
+      // 94vw so it never touches the edges.
+      maxWidthClass="max-w-[min(1120px,94vw)]"
+      focusSelector=".app-door"
+      onClose={onClose}
+    >
+      {/* Inside the key, so anything a plugin provides here is scoped to
               the resource on screen and is discarded when the card navigates.
               Renders its children untouched when no plugin contributes. */}
-          <ResourceDetailProvider
-            resource={subResource ?? app}
-            parent={subResource ? app : undefined}
-          >
-            {subResource ? (
-              <SubResourceDetailPanel
-                subResource={subResource}
-                parent={app}
-                approvalMethods={approvalMethods}
-                onBack={onBackToParent ?? onClose}
-                actions={
-                  <ResourceDetailAccessActions {...subResourceActionsCtx} />
-                }
-              />
-            ) : (
-              <AppDetails app={app} onAppClick={onAppClick} />
-            )}
-          </ResourceDetailProvider>
-        </div>
-      </div>
-    </div>
+      <ResourceDetailProvider
+        resource={subResource ?? app}
+        parent={subResource ? app : undefined}
+      >
+        {subResource ? (
+          <SubResourceDetailPanel
+            subResource={subResource}
+            parent={app}
+            approvalMethods={approvalMethods}
+            onBack={onBackToParent ?? onClose}
+            actions={<ResourceDetailAccessActions {...subResourceActionsCtx} />}
+          />
+        ) : (
+          <AppDetails app={app} onAppClick={onAppClick} />
+        )}
+      </ResourceDetailProvider>
+    </DetailDialogShell>
   )
 }

package/src/modules/appCatalog/ui/catalog/DetailDialogShell.tsx

@@ -0,0 +1,199 @@
+import { Maximize2, Minimize2, X } from 'lucide-react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { useDismissStack, useDismissable } from '~/modules/dismiss/DismissStack'
+
+const ROUND_BUTTON =
+  'rounded-full p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors'
+
+/**
+ * The overlay a detail card lives in: dimmed page, a card centred once on
+ * open, Widen and Close at its top right, and a body that scrolls inside it.
+ * The official app card and the community tool card both sit in it.
+ */
+export function DetailDialogShell({
+  label,
+  shownKey,
+  maxWidthClass,
+  focusSelector,
+  controls,
+  testId,
+  onClose,
+  onKeyDown,
+  children,
+}: {
+  /** The dialog's accessible name. */
+  label: string
+  /**
+   * What the card shows. A new value is a new open: the card re-centres for
+   * its own height, takes the caret back, and the body remounts.
+   */
+  shownKey: string
+  /** The width cap while not widened, e.g. `max-w-[min(1120px,94vw)]`. */
+  maxWidthClass: string
+  /** What takes the caret on open, when it exists; otherwise the dialog. */
+  focusSelector?: string
+  /** Extra header buttons, placed before Widen. */
+  controls?: React.ReactNode
+  testId?: string
+  onClose: () => void
+  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>
+  children: React.ReactNode
+}) {
+  const dialogRef = useRef<HTMLDivElement>(null)
+  // Not persisted: every open starts at the normal width. The toggle is for the
+  // one card being read, and the default stays readable for the next one.
+  const [isWide, setIsWide] = useState(false)
+
+  /**
+   * Centre the card ONCE when it opens, then hold that position.
+   *
+   * `my-auto` centred it on every render, so each panel height change pushed both
+   * edges and half the delta became upward movement of everything above it —
+   * including the tab strip, which moved 113px and took the control the user had
+   * just clicked with it (CLS 0.19, "needs improvement").
+   *
+   * Top-anchoring fixed the shift but looked wrong: a short card sat high on the
+   * page. So pin the centred offset instead. The card still opens centred, and
+   * anything that grows it afterwards extends downward only — which is what a
+   * reader expects when they open a tab with more in it.
+   *
+   * Only on open and on resize. Deliberately NOT on content change: reacting to
+   * content is precisely the bug.
+   */
+  useLayoutEffect(() => {
+    const card = dialogRef.current
+    const scroller = card?.parentElement
+    if (!card || !scroller) return
+
+    const pinCentre = () => {
+      card.style.marginTop = '0px'
+      const style = getComputedStyle(scroller)
+      const usable =
+        scroller.clientHeight -
+        parseFloat(style.paddingTop) -
+        parseFloat(style.paddingBottom)
+      const slack = usable - card.offsetHeight
+      // Negative slack means the card is already taller than the viewport; leave it
+      // at the top and let the overlay scroll, rather than pushing its head off.
+      card.style.marginTop = `${Math.max(0, Math.round(slack / 2))}px`
+    }
+
+    pinCentre()
+    window.addEventListener('resize', pinCentre)
+    return () => window.removeEventListener('resize', pinCentre)
+    // Keyed on the opened entry: a different card is a new open, and should
+    // re-centre for its own height.
+  }, [shownKey])
+
+  // Focus the card on mount so Esc hotkeys fire immediately, even when
+  // the card was opened by a mouse click (which leaves focus on the grid row).
+  //
+  // The door link rather than the dialog itself when the card has one: Enter on
+  // a search result opens the card, so a second Enter is the browser's own link
+  // activation and takes the reader into the app. No door: the dialog.
+  //
+  // Unless something inside already took the caret — the Quick Jump field does,
+  // and it has the better claim: a child's effect runs before its parent's, so
+  // without this guard the card would take focus straight back off it.
+  //
+  // Runs again whenever the card navigates to another entry, keyed the same
+  // way the body below is: that navigation destroys whatever was focused (the
+  // "View replacement" button, a prerequisite's parent), and without this the
+  // caret would land on <body> — where the next Tab walks the page behind the
+  // scrim, since the card has no focus trap.
+  const stack = useDismissStack()
+  useEffect(() => {
+    const dialog = dialogRef.current
+    if (!dialog || dialog.contains(document.activeElement)) return
+    // Only while the card is on top. A layer opened OVER it — a deployment's
+    // dialog on a nested route — owns the caret, and on a cold deep link that
+    // layer mounts before the card does, so without this check the card took
+    // focus back off the dialog's first field the moment the catalog arrived.
+    const top = stack.topElement()
+    if (top && top !== dialog) return
+    const target =
+      (focusSelector && dialog.querySelector<HTMLElement>(focusSelector)) ||
+      dialog
+    target.focus()
+  }, [shownKey, stack, focusSelector])
+
+  // Escape closes the card. Registered on the layer's own element, so a layer
+  // opened over it (the screenshot viewer) gets Escape first.
+  useDismissable(dialogRef, onClose)
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto p-4 sm:p-6 md:p-10">
+      {/* scrim */}
+      <button
+        type="button"
+        aria-label="Close details panel"
+        onClick={onClose}
+        className="fixed inset-0 -z-10 bg-black/40 backdrop-blur-[2px] animate-in fade-in"
+      />
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-label={label}
+        tabIndex={-1}
+        data-testid={testId}
+        onKeyDown={onKeyDown}
+        // Centred on open, then held — see the pin effect above. `my-auto` is
+        // deliberately absent: it re-centres on EVERY height change, which is the
+        // layout-shift bug.
+        // `overflow-hidden` belongs on the rounded box: the scrolling child
+        // below carries the band's tint to its own square corners and paints
+        // them over this radius, so the card's top corners read as cut off.
+        // Widening drops the cap only. The pinned top margin is left alone, so
+        // the card's top edge stays put and restoring gives back the same layout.
+        className={`relative w-full ${isWide ? 'max-w-none' : maxWidthClass} overflow-hidden rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200 outline-none`}
+      >
+        {/* On a backdrop of its own: the body scrolls under these buttons. */}
+        <div className="absolute top-3 right-3 z-10 flex items-center gap-1 rounded-full bg-background/90 p-0.5 backdrop-blur-sm">
+          {controls}
+          <button
+            type="button"
+            aria-label={isWide ? 'Restore width' : 'Widen card'}
+            title={isWide ? 'Restore width' : 'Widen card'}
+            onClick={() => setIsWide((wide) => !wide)}
+            className={ROUND_BUTTON}
+          >
+            {isWide ? (
+              <Minimize2 className="size-4" />
+            ) : (
+              <Maximize2 className="size-4" />
+            )}
+          </button>
+          <button
+            type="button"
+            aria-label="Close"
+            onClick={onClose}
+            className={ROUND_BUTTON}
+          >
+            <X className="size-4" />
+          </button>
+        </div>
+        {/* Keyed by the entry on screen, so the body remounts when the card
+            navigates from one entry to another instead of updating in place.
+            Everything per-entry inside it is component state with no reset of
+            its own — the roles table's expansion, the icon/screenshot error
+            flags, a draft source edit — and it used to arrive at the next
+            entry still carrying the previous one's, plus the previous scroll
+            offset.
+
+            The key is here and not on the outer dialog on purpose: that one
+            would restart the open animation and re-run the mount-focus effect
+            on every in-card navigation. */}
+        <div
+          key={shownKey}
+          className="max-h-[85vh] overflow-y-auto px-6 py-5 sm:px-8 sm:py-7"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/** The round header button style, for a card's own `controls`. */
+export const DIALOG_ROUND_BUTTON = ROUND_BUTTON

package/src/modules/appCatalog/ui/components/ScreenshotGallery.tsx

@@ -9,7 +9,8 @@ import { Dialog, DialogContent, DialogTitle } from '~/ui/dialog'
 import { VisuallyHidden } from '~/ui/visually-hidden'
 
 export interface ScreenshotGalleryProps {
-  app: Resource
+  /** Names the images; an entry, or anything else with a display name. */
+  app: Pick<Resource, 'displayName' | 'abbreviation'>
   screenshotIds: string[]
   initialIndex?: number
   open: boolean

package/src/modules/appCatalog/ui/components/SectionTabs.tsx

@@ -0,0 +1,81 @@
+import { Link, useRouterState } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { useTRPC } from '~/api/infra/trpc'
+import { cn } from '~/lib/utils'
+
+/**
+ * The header's section tabs: one captioned link per section, so each is
+ * deep-linkable. The active tab is derived from the pathname rather than an
+ * exact-match Link, because Catalog must stay active on the app-detail routes
+ * (`/app/<slug>`, #23) and on `/catalog/apps`, which renders the same page.
+ * Community tools is hidden until the server says the feature is on.
+ */
+export function SectionTabs() {
+  const pathname = useRouterState({ select: (s) => s.location.pathname })
+  const trpc = useTRPC()
+  const { data: communityConfig } = useQuery(
+    trpc.communityTools.config.queryOptions(),
+  )
+
+  const tabs = [
+    {
+      to: '/',
+      title: 'Catalog',
+      caption: 'Official company apps',
+      active:
+        pathname === '/' ||
+        pathname.startsWith('/app/') ||
+        pathname.startsWith('/catalog/'),
+    },
+    ...(communityConfig?.enabled
+      ? [
+          {
+            to: '/community',
+            title: 'Community tools',
+            caption: 'Built by colleagues',
+            active: pathname.startsWith('/community'),
+          } as const,
+        ]
+      : []),
+    {
+      to: '/service-desks',
+      title: 'Service Desks',
+      caption: 'Where to file a ticket',
+      active: pathname.startsWith('/service-desks'),
+    },
+  ] as const
+
+  return (
+    <div
+      role="tablist"
+      aria-label="Sections"
+      data-testid="section-tabs"
+      className="flex items-stretch gap-2"
+    >
+      {tabs.map((tab) => (
+        <Link
+          key={tab.to}
+          to={tab.to}
+          aria-current={tab.active ? 'page' : undefined}
+          className={cn(
+            'flex flex-col items-start rounded-sm border-b-2 px-3.5 py-1.5 transition-colors',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring',
+            tab.active
+              ? 'border-primary text-foreground'
+              : 'border-transparent text-foreground/90 hover:text-primary',
+          )}
+        >
+          <span className="text-base font-semibold">{tab.title}</span>
+          <span
+            className={cn(
+              'text-xs',
+              tab.active ? 'text-muted-foreground' : 'text-foreground/80',
+            )}
+          >
+            {tab.caption}
+          </span>
+        </Link>
+      ))}
+    </div>
+  )
+}

package/src/modules/appCatalog/ui/detail/AppDetails.tsx

@@ -2,7 +2,7 @@ import type {
   Resource,
   SourceReference,
 } from '@igstack/app-catalog-backend-core'
-import { useSearch } from '@tanstack/react-router'
+import { Link, useSearch } from '@tanstack/react-router'
 import { ExternalLink, Plus, Trash2 } from 'lucide-react'
 import React from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
@@ -32,6 +32,7 @@ import {
 import { CommunitySection } from './CommunitySection'
 import type { CommunitySectionHandle } from './CommunitySection'
 import { usePendingCount } from './usePendingCount'
+import { useCommunityToolCount } from './useCommunityToolCount'
 import { displayUrl } from '~/modules/appCatalog/utils/displayUrl'
 import { accessTabLabel } from '~/modules/appCatalog/utils/accessTabLabel'
 import { AppDoor } from './AppDoor'
@@ -151,6 +152,7 @@ export function AppDetails({
   const { state: filterState } = useAppCatalogFilters()
   // Agrees with the Pending badges in the feed: composed by the same rules.
   const behindCount = usePendingCount(app.slug, app.claims)
+  const communityCount = useCommunityToolCount(app.slug)
 
   // "Last checked 10 hours ago · added 7 months ago" under the sources.
   const lastChecked = app.freshness?.lastCheckedAt
@@ -458,7 +460,7 @@ export function AppDetails({
         <div className="behind-panel">
           <CommunitySection
             ref={knowMoreRef}
-            appSlug={app.slug}
+            target={{ resourceSlug: app.slug }}
             appName={app.displayName}
             claims={app.claims}
           />
@@ -679,6 +681,19 @@ export function AppDetails({
         </p>
       )}
 
+      {communityCount > 0 && (
+        <p className="mt-2.5 text-xs">
+          <Link
+            to="/community"
+            search={{ tag: `app:${app.slug}` }}
+            data-testid="app-community-tools"
+            className="text-muted-foreground hover:text-primary hover:underline"
+          >
+            Community tools for {app.displayName} · {communityCount}
+          </Link>
+        </p>
+      )}
+
       {isAdmin && (
         <div className="mt-3 flex flex-wrap items-center gap-x-6 gap-y-1">
           <span className="inline-flex items-center gap-2">

package/src/modules/appCatalog/ui/detail/CommentsFeed.tsx

@@ -9,6 +9,7 @@ import { cn } from '~/lib/utils'
 import { Button } from '~/ui/button'
 import { formatRelativeTime } from '../../utils/formatRelativeTime'
 import { attachmentUrl } from './communityDraft'
+import type { CommentTarget } from './communityDraft'
 import { formatCommunityError } from './communityError'
 import { composeComments } from './composeComments'
 import type { CommentEntry } from './composeComments'
@@ -84,18 +85,18 @@ function Meta({ entry, edited }: { entry: CommentEntry; edited: boolean }) {
  * instant so a skewed client clock cannot show a control the server would refuse.
  */
 export function CommentsFeed({
-  appSlug,
+  target,
   claims,
   labelledBy,
 }: {
-  appSlug: string
+  target: CommentTarget
   claims: Claim[]
   /** Id of the heading that names the list. */
   labelledBy: string
 }) {
   const trpc = useTRPC()
   const queryClient = useQueryClient()
-  const listOptions = trpc.feedback.list.queryOptions({ resourceSlug: appSlug })
+  const listOptions = trpc.feedback.list.queryOptions(target)
   const { data, error, isPending } = useQuery(listOptions)
   const [editingId, setEditingId] = React.useState<string | null>(null)
   const [editDraft, setEditDraft] = React.useState('')
@@ -233,7 +234,11 @@ export function CommentsFeed({
           {entries.map((entry) => (
             <li key={entry.key} className="comment">
               <Meta entry={entry} edited={!!entry.note?.editedAt} />
-              {entry.note ? (
+              {entry.note?.isSystem ? (
+                <p className="comment__text is-system" data-system-line="">
+                  {entry.text}
+                </p>
+              ) : entry.note ? (
                 noteBody(entry.note)
               ) : (
                 <p className="comment__text">{entry.text}</p>

package/src/modules/appCatalog/ui/detail/CommentsHelp.tsx

@@ -11,7 +11,8 @@ export function CommentsHelp({
   appSlug,
   appName,
 }: {
-  appSlug: string
+  /** Set for an official entry; a deployment's note speaks to entries only. */
+  appSlug?: string
   appName: string
 }) {
   const [open, setOpen] = React.useState(false)
@@ -88,8 +89,10 @@ export function CommentsHelp({
           <li>Attach a screenshot — paste it, drop it or use the paperclip.</li>
         </ul>
         <p className="comments-help__note">
-          <ResourceDetailFeedbackNote appSlug={appSlug} appName={appName} />
-          {!hasPluginNote && (
+          {appSlug && (
+            <ResourceDetailFeedbackNote appSlug={appSlug} appName={appName} />
+          )}
+          {!(appSlug && hasPluginNote) && (
             <>
               Every note is reviewed. Facts that check out update the card and
               are marked Used as source.