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

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

@@ -1,6 +1,6 @@
 import type { Resource } from '@igstack/app-catalog-backend-core'
 import { X } from 'lucide-react'
-import { useEffect, useRef } from 'react'
+import { useEffect, useLayoutEffect, useRef } from 'react'
 import { useAppCatalogContext } from '../../context/AppCatalogContext'
 import { SubResourceDetailPanel } from '../components/SubResourceDetailPanel'
 import { AppDetails } from '../detail/AppDetails'
@@ -38,6 +38,47 @@ export function AppDetailPanel({
   const { approvalMethods } = useAppCatalogContext()
   const dialogRef = useRef<HTMLDivElement>(null)
 
+  /**
+   * 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 dialog on mount so Esc hotkeys fire immediately, even when
   // the card was opened by a mouse click (which leaves focus on the grid row).
   //
@@ -75,7 +116,10 @@ export function AppDetailPanel({
         aria-modal="true"
         aria-label={`${subResource?.displayName ?? app.displayName} details`}
         tabIndex={-1}
-        className="relative w-full max-w-[min(1120px,94vw)] my-auto rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200 outline-none"
+        // 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.
+        className="relative w-full max-w-[min(1120px,94vw)] rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200 outline-none"
       >
         <button
           type="button"

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

@@ -0,0 +1,169 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { useEffect, useState } from 'react'
+import { useTRPC } from '~/api/infra/trpc'
+import { Button } from '~/ui/button'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/ui/dialog'
+import { cn } from '~/lib/utils'
+
+/**
+ * Asking for something that is not in the catalog yet.
+ *
+ * The search box is where people discover the gap — they type a tool's name, get
+ * nothing, and until now had nowhere to go. A zero-result search is the single most
+ * informative moment in the catalog: someone has told us exactly what they expected to
+ * find. Throwing that away and showing only "No results" wastes it.
+ *
+ * This is a catalog-level ask rather than feedback on an entry: `feedback.add` with a
+ * `subject` and NO `resourceSlug`. The server already distinguishes the two that way,
+ * and the tracker lists both.
+ */
+
+/** Same shape the input primitive uses, minus the fixed height. */
+const FIELD_CLASSES =
+  'placeholder:text-muted-foreground dark:bg-input/30 border-input w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50'
+
+const MAX_SUBJECT = 120
+
+interface RequestAppDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** What they searched for. Pre-fills the name, because they just typed it. */
+  initialSubject?: string
+}
+
+/**
+ * Mounts nothing until it is opened, which is what keeps `useTRPC()` out of the
+ * closed path. The catalog grid is rendered bare in several tests with no
+ * TRPCProvider, and a hook cannot be called conditionally — so the gate has to be a
+ * component boundary rather than an `if` inside one.
+ */
+export function RequestAppDialog(props: RequestAppDialogProps) {
+  if (!props.open) return null
+  return <RequestAppDialogBody {...props} />
+}
+
+function RequestAppDialogBody({
+  open,
+  onOpenChange,
+  initialSubject = '',
+}: RequestAppDialogProps) {
+  const trpc = useTRPC()
+  const queryClient = useQueryClient()
+  const [subject, setSubject] = useState(initialSubject)
+  const [body, setBody] = useState('')
+  const [sent, setSent] = useState(false)
+
+  // Re-seed when opened for a different search. Keyed on the dialog opening rather
+  // than on every keystroke, so it never overwrites something half-typed.
+  useEffect(() => {
+    if (open) {
+      setSubject(initialSubject)
+      setBody('')
+      setSent(false)
+    }
+  }, [open, initialSubject])
+
+  const add = useMutation(
+    trpc.feedback.add.mutationOptions({
+      onSuccess: () => {
+        setSent(true)
+        // The tracker counts this, so its badge has to notice.
+        void queryClient.invalidateQueries({
+          queryKey: trpc.feedback.mine.queryKey(),
+        })
+      },
+    }),
+  )
+
+  const trimmed = subject.trim()
+  const send = () => {
+    if (!trimmed) return
+    add.mutate({
+      subject: trimmed.slice(0, MAX_SUBJECT),
+      ...(body.trim() ? { body: body.trim() } : {}),
+    })
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[480px]">
+        <DialogHeader>
+          <DialogTitle>
+            {sent ? 'Thanks — that is logged' : 'Ask for an app to be added'}
+          </DialogTitle>
+        </DialogHeader>
+
+        {sent ? (
+          <div className="space-y-3">
+            <p className="text-muted-foreground text-sm">
+              A maintainer will look at it. You can see what happened to it
+              under your own requests.
+            </p>
+            <Button type="button" size="sm" onClick={() => onOpenChange(false)}>
+              Close
+            </Button>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            <div className="space-y-1.5">
+              <label htmlFor="request-app-name" className="text-sm font-medium">
+                What are you looking for?
+              </label>
+              <input
+                id="request-app-name"
+                autoFocus
+                className={cn(FIELD_CLASSES)}
+                placeholder="Name of the tool, or what it does"
+                maxLength={MAX_SUBJECT}
+                value={subject}
+                onChange={(event) => setSubject(event.target.value)}
+              />
+            </div>
+
+            <div className="space-y-1.5">
+              <label
+                htmlFor="request-app-detail"
+                className="text-sm font-medium"
+              >
+                Anything that would help us find it{' '}
+                <span className="text-muted-foreground font-normal">
+                  (optional)
+                </span>
+              </label>
+              <textarea
+                id="request-app-detail"
+                rows={3}
+                className={cn(FIELD_CLASSES)}
+                placeholder="A link, the team that owns it, what you needed it for"
+                value={body}
+                onChange={(event) => setBody(event.target.value)}
+              />
+            </div>
+
+            <div className="flex flex-wrap items-center gap-3">
+              <Button
+                type="button"
+                size="sm"
+                disabled={!trimmed || add.isPending}
+                onClick={send}
+              >
+                {add.isPending ? 'Sending…' : 'Send request'}
+              </Button>
+              <span className="text-muted-foreground text-xs">
+                Sent under a nickname. No login needed.
+              </span>
+            </div>
+
+            {add.error && (
+              <p className="text-destructive text-xs">
+                {add.error instanceof Error
+                  ? add.error.message
+                  : 'Something went wrong'}
+              </p>
+            )}
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -31,6 +31,9 @@ export function AccessPrerequisiteChain({
 
   return (
     <div
+      // Part of the access story, so it carries the same anchor the instructions
+      // do — a reader (and a test) wants the whole chain, not half of it.
+      data-access-section=""
       className="mt-6 rounded-lg border-[1.5px] border-primary/40 bg-primary/[0.03] p-4"
       role="note"
       aria-label="Access requires prerequisite steps"

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

@@ -235,10 +235,15 @@ const UNDOCUMENTED_WITHOUT_CONTACT =
  */
 function AccessBox({ children }: { children: ReactNode }) {
   return (
-    <div className="mt-6 rounded-lg border-[1.5px] border-primary/40 bg-primary/[0.03] p-4 space-y-4">
-      <h3 className="text-sm font-semibold text-foreground">
-        How to get access
-      </h3>
+    // No frame and no heading. Both existed to mark this out as THE thing on a long
+    // scrolling card; now it is its own tab, so the tab's label already says what
+    // this is and the panel edge already bounds it. A box inside a box, under a
+    // heading that repeats the tab you just clicked, is two statements of the same
+    // fact and ink the reader has to look past.
+    // A stable anchor for tests, because neither of the old handles survives: the
+    // heading is gone, and a sub-resource page has no tab panel to read either.
+    // Text and structure both move; this does not.
+    <div data-access-section="" className="space-y-4">
       {children}
     </div>
   )

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

@@ -104,7 +104,10 @@ export function SubResourceDetailPanel({
 
       {/* Two-step access section */}
       {hasAnyAccess && (
-        <div className="mt-6 space-y-6">
+        // The whole two-step region carries the anchor: the step labels naming
+        // the parent live out here, not inside the nested AccessRequestSections,
+        // so anchoring only those dropped the parent from the chain.
+        <div data-access-section="" className="mt-6 space-y-6">
           <h3 className="text-sm font-medium">How to get access</h3>
 
           {hasTwoStepAccess ? (