@igstack/app-catalog-frontend-core 0.10.1 → 0.12.0

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

@@ -1,6 +1,7 @@
-import { Check, Copy, User } from 'lucide-react'
+import { Check, Copy, Mail, User } from 'lucide-react'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { Badge } from '~/ui/badge'
+import { Popover, PopoverContent, PopoverTrigger } from '~/ui/popover'
 import { useAppCatalogContext } from '~/modules/appCatalog'
 import { getPersonBySlug } from '~/modules/appCatalog/utils/resolveHelpers'
 
@@ -8,6 +9,12 @@ interface PersonBadgeProps {
   slug: string
 }
 
+/**
+ * Person chip. Clicking it opens a small popover exposing BOTH the full name
+ * and the email, each with its own copy button — so the user picks what to copy
+ * (previously a single button copied only the email). Email also links to
+ * mailto:. Falls back to just the name (no popover) when no email is known.
+ */
 export function PersonBadge({ slug }: PersonBadgeProps) {
   const { persons } = useAppCatalogContext()
   const person = getPersonBySlug(persons, slug)
@@ -15,55 +22,121 @@ export function PersonBadge({ slug }: PersonBadgeProps) {
   const displayName = person
     ? `${person.firstName} ${person.lastName}`.trim() || slug
     : slug
-
   const email = person?.email
 
+  // No email → nothing to pick between; render a plain, non-interactive chip.
+  if (!email) {
+    return (
+      <Badge
+        variant="outline"
+        className="font-normal inline-flex items-center gap-1"
+        title={displayName}
+      >
+        <User className="size-3" />
+        {displayName}
+      </Badge>
+    )
+  }
+
   return (
-    <Badge
-      variant="outline"
-      className="font-normal inline-flex items-center gap-1"
-      title={email ? `${displayName} (${email})` : displayName}
-    >
-      <User className="size-3" />
-      {displayName}
-      {email && <CopyEmailButton email={email} />}
-    </Badge>
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          className="inline-flex"
+          title={`${displayName} · ${email}`}
+        >
+          <Badge
+            variant="outline"
+            className="font-normal inline-flex items-center gap-1 cursor-pointer hover:border-primary transition-colors"
+          >
+            <User className="size-3" />
+            {displayName}
+            <Copy className="size-3 opacity-50" />
+          </Badge>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className="w-64 p-2">
+        <CopyRow
+          icon={<User className="size-3.5" />}
+          label="Name"
+          value={displayName}
+        />
+        <CopyRow
+          icon={<Mail className="size-3.5" />}
+          label="Email"
+          value={email}
+          href={`mailto:${email}`}
+        />
+      </PopoverContent>
+    </Popover>
   )
 }
 
-function CopyEmailButton({ email }: { email: string }) {
+/** One copyable field (label + value + copy button), value optionally a link. */
+function CopyRow({
+  icon,
+  label,
+  value,
+  href,
+}: {
+  icon: React.ReactNode
+  label: string
+  value: string
+  href?: string
+}) {
   const [copied, setCopied] = useState(false)
   const timeoutRef = useRef<NodeJS.Timeout | null>(null)
 
-  useEffect(() => {
-    return () => {
+  useEffect(
+    () => () => {
       if (timeoutRef.current) clearTimeout(timeoutRef.current)
-    }
-  }, [])
+    },
+    [],
+  )
 
   const handleCopy = useCallback(
     (e: React.MouseEvent) => {
       e.stopPropagation()
-      navigator.clipboard.writeText(email)
+      void navigator.clipboard.writeText(value)
       setCopied(true)
       if (timeoutRef.current) clearTimeout(timeoutRef.current)
       timeoutRef.current = setTimeout(() => setCopied(false), 2000)
     },
-    [email],
+    [value],
   )
 
   return (
-    <button
-      onClick={handleCopy}
-      className="ml-0.5 hover:text-primary transition-colors"
-      title={copied ? 'Copied!' : `Copy ${email}`}
-      type="button"
-    >
-      {copied ? (
-        <Check className="size-3 text-green-600" />
-      ) : (
-        <Copy className="size-3" />
-      )}
-    </button>
+    <div className="flex items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted">
+      <span className="text-muted-foreground shrink-0">{icon}</span>
+      <span className="min-w-0 flex-1">
+        <span className="block text-[10px] uppercase tracking-wide text-muted-foreground">
+          {label}
+        </span>
+        {href ? (
+          <a
+            href={href}
+            className="block truncate text-[13px] text-primary hover:underline"
+          >
+            {value}
+          </a>
+        ) : (
+          <span className="block truncate text-[13px]">{value}</span>
+        )}
+      </span>
+      <button
+        type="button"
+        onClick={handleCopy}
+        className="shrink-0 rounded p-1 text-muted-foreground hover:text-primary hover:bg-background transition-colors"
+        title={copied ? 'Copied!' : `Copy ${label.toLowerCase()}`}
+        aria-label={`Copy ${label.toLowerCase()}`}
+      >
+        {copied ? (
+          <Check className="size-3.5 text-green-600" />
+        ) : (
+          <Copy className="size-3.5" />
+        )}
+      </button>
+    </div>
   )
 }

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

@@ -25,6 +25,14 @@ import { markdownToPlainText } from '~/modules/appCatalog/utils/markdownToPlainT
 
 interface SubResourcesSectionProps {
   subResources: Resource[]
+  /**
+   * Initial filter text (#38 item C). When the user reached this app by
+   * searching a term that matched a sub-resource, seed the sub-resource filter
+   * with that term so the matched child is revealed instead of buried in a
+   * long list (e.g. searching "biom" → open AWS Console → the biomarker
+   * account is pre-filtered). Only applied when it actually matches a child.
+   */
+  initialSearch?: string
 }
 
 function getTierBadgeVariant(
@@ -90,9 +98,22 @@ function CopyAccountIdButton({ accountId }: { accountId: string }) {
 
 export function SubResourcesSection({
   subResources,
+  initialSearch,
 }: SubResourcesSectionProps) {
   const { groups } = useAppCatalogContext()
-  const [search, setSearch] = useState('')
+  // Seed the filter with the incoming query ONLY if it matches a child, so we
+  // reveal the matched sub-resource without hiding everything on a non-match.
+  const seededSearch = useMemo(() => {
+    const q = initialSearch?.trim().toLowerCase()
+    if (!q) return ''
+    const hit = subResources.some(
+      (sr) =>
+        sr.displayName.toLowerCase().includes(q) ||
+        (sr.aliases ?? []).some((a) => a.toLowerCase().includes(q)),
+    )
+    return hit ? initialSearch!.trim() : ''
+  }, [initialSearch, subResources])
+  const [search, setSearch] = useState(seededSearch)
   const [tierFilter, setTierFilter] = useState<string>('all')
 
   const uniqueTiers = useMemo(() => {

package/src/modules/appCatalog/ui/context/AppCatalogFiltersContext.tsx

@@ -2,6 +2,10 @@ import type { ReactNode } from 'react'
 import { createContext, use, useMemo } from 'react'
 import { useAppCatalogContext } from '../../context/AppCatalogContext'
 import { useUrlSyncedState } from '../../hooks/useUrlSyncedState'
+import {
+  SEARCH_STORAGE_KEY,
+  useSessionSyncedState,
+} from '../../hooks/useSessionSyncedState'
 import {
   decodeFiltersParam,
   encodeFiltersParam,
@@ -100,11 +104,13 @@ export function AppCatalogFiltersProvider({
     encode: encodeFiltersParam,
   })
 
-  // Search value is synced to URL (key `q`) so it survives navigation —
-  // e.g. auto-opening an app's detail page when the query narrows to one match
-  // (the filters provider is mounted per-route and remounts on navigation).
-  const [searchValue, setSearchValue] = useUrlSyncedState<string>({
-    key: 'q',
+  // Search value persists in sessionStorage (not the URL) so it survives the
+  // per-route remount of this provider — e.g. auto-opening an app's detail page
+  // when the query narrows to one match (#10) — WITHOUT leaking `?q=` into every
+  // shared/bookmarked app link (#27). The synchronous store read/write also
+  // removes the effect-ordering race the URL sync had (#10).
+  const [searchValue, setSearchValue] = useSessionSyncedState<string>({
+    key: SEARCH_STORAGE_KEY,
     defaultValue: '',
     decode: (value) => value,
     encode: (value) => (value === '' ? undefined : value),

package/src/modules/appCatalog/ui/grid/AppCatalogGrid.tsx

@@ -8,7 +8,7 @@ import {
   getCoreRowModel,
   useReactTable,
 } from '@tanstack/react-table'
-import { AppWindow, ExternalLink, Plus, Trash2, X } from 'lucide-react'
+import { AppWindow, Clock, ExternalLink, Plus, Trash2, X } from 'lucide-react'
 import React, { useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { cn } from '~/lib/utils'
@@ -29,6 +29,9 @@ import {
   TableRow,
 } from '~/ui/table'
 import { AccessRequestSection } from '../components/AccessRequestSection'
+import { AccessPrerequisiteChain } from '../components/AccessPrerequisiteChain'
+import { useAppCatalogFilters } from '../context/AppCatalogFiltersContext'
+import { PersonBadge } from '../components/PersonBadge'
 import { useUser } from '~/modules/auth'
 import { InlineEditableField } from '../components/InlineEditableField'
 import { MarkdownText } from '../components/MarkdownText'
@@ -173,6 +176,10 @@ function AppScreenshot({ app }: { app: Resource }) {
 
 function TiersAndSubResourcesPanel({ app }: { app: Resource }) {
   const { resources } = useAppCatalogContext()
+  // #38 item C: the active catalog search term. When the user reached this app
+  // by searching something that matched a child, seed the sub-resource filter
+  // with it so the matched child is revealed.
+  const { state: filterState } = useAppCatalogFilters()
   const appSubResources = React.useMemo(
     () => getChildResources(resources, app.slug),
     [resources, app.slug],
@@ -187,14 +194,17 @@ function TiersAndSubResourcesPanel({ app }: { app: Resource }) {
       )}
       {appSubResources.length > 0 && (
         <div className="mt-6">
-          <SubResourcesSection subResources={appSubResources} />
+          <SubResourcesSection
+            subResources={appSubResources}
+            initialSearch={filterState.searchValue}
+          />
         </div>
       )}
     </>
   )
 }
 
-function AppDetails({
+export function AppDetails({
   app,
   onAppClick,
   onClosePanel,
@@ -269,7 +279,7 @@ function AppDetails({
             <AppIcon app={app} className="size-16" />
             <div className="-mx-3 flex-1 min-w-0">
               <div className="flex items-center gap-2 px-3">
-                <div className="text-2xl font-semibold min-w-0">
+                <div className="font-serif text-2xl font-semibold min-w-0">
                   {app.abbreviation
                     ? `${app.displayName} (${app.abbreviation})`
                     : app.displayName}
@@ -333,15 +343,36 @@ function AppDetails({
                     target="_blank"
                     rel="noopener noreferrer"
                     onClick={() => recordClick(app.slug)}
-                    className="inline-flex items-center gap-1 rounded-md py-1 text-sm text-blue-600 hover:bg-accent/30 hover:underline dark:text-blue-400 transition-all"
+                    className="inline-flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1 text-xs text-muted-foreground hover:border-primary hover:text-primary transition-all"
+                    title="Open app in new tab (secondary — see access info below)"
                   >
                     {app.appUrl.replace(/https?:\/\//g, '')}
-                    <ExternalLink className="size-3.5 shrink-0 opacity-40 transition-opacity" />
+                    <ExternalLink className="size-3 shrink-0 opacity-60" />
                   </a>
                 ) : (
                   <span className="text-muted-foreground">—</span>
                 )}
               </div>
+              {/* Freshness date near the header (this is the same signal that
+                  drives "New this week"), so the date is visible in the card
+                  itself, not only in the muted footer. */}
+              {app.freshness?.lastCheckedAt && (
+                <div className="mt-1 px-3">
+                  <span
+                    className="inline-flex items-center gap-1 text-xs text-muted-foreground"
+                    title={app.freshness.lastCheckedAt}
+                  >
+                    <Clock className="size-3" />
+                    Updated {formatRelativeTime(app.freshness.lastCheckedAt)}
+                    {app.freshness.isStale && (
+                      <span className="italic opacity-75">
+                        {' '}
+                        · may be out of date
+                      </span>
+                    )}
+                  </span>
+                </div>
+              )}
             </div>
           </div>
         </div>
@@ -387,6 +418,13 @@ function AppDetails({
             )
           })()}
 
+        {/* Two-step access (#38 D): for a nested resource, show the parent-first
+            prerequisite chain before this resource's own access instructions. */}
+        <AccessPrerequisiteChain resource={app} onOpenParent={onAppClick} />
+
+        {/* Access Request Section — hero of the detail, shown before description */}
+        <AccessRequestSection app={app} approvalMethods={approvalMethods} />
+
         {/* Description */}
         <div className="mt-6">
           <h3 className="mb-2 text-sm font-medium">Description</h3>
@@ -429,8 +467,17 @@ function AppDetails({
           </div>
         )}
 
-        {/* Access Request Section */}
-        <AccessRequestSection app={app} approvalMethods={approvalMethods} />
+        {/* Owner — who is responsible for this resource. Distinct from the
+            access approver (who decides access requests); see domain model. */}
+        {app.ownerPersonSlug && (
+          <div className="mt-6">
+            <h3 className="mb-1 text-sm font-medium">Owner</h3>
+            <p className="mb-2 text-xs text-muted-foreground">
+              Who is responsible for this resource
+            </p>
+            <PersonBadge slug={app.ownerPersonSlug} />
+          </div>
+        )}
 
         {/* Tier Variants and Sub-Resources */}
         <TiersAndSubResourcesPanel app={app} />
@@ -606,18 +653,7 @@ function AppDetails({
           )}
         </div>
 
-        {/* Freshness: muted "last checked" line, rarely-needed metadata. The
-            backend owns the semantic (freshness.isStale); we only render. */}
-        {app.freshness?.lastCheckedAt && (
-          <p className="mt-4 text-xs text-muted-foreground">
-            <span title={app.freshness.lastCheckedAt}>
-              Last checked {formatRelativeTime(app.freshness.lastCheckedAt)}
-            </span>
-            {app.freshness.isStale && (
-              <span className="italic opacity-75"> · may be out of date</span>
-            )}
-          </p>
-        )}
+        {/* Freshness now shown near the header (see "Updated …" above). */}
       </div>
 
       {/* Screenshot Gallery Dialog */}
@@ -742,6 +778,9 @@ export function AppCatalogGrid({
     onAppClick,
   })
 
+  // Launch history for the secondary "open in new tab" action on each row.
+  const { recordClick: recordLaunch } = useAppClickHistory()
+
   // Build a map of parentSlug -> matched child resource displayName for search annotation
   const { resources: allResources2 } = useAppCatalogContext()
   const matchedSubResourceMap = React.useMemo(() => {
@@ -847,8 +886,36 @@ export function AppCatalogGrid({
           </div>
         ),
       },
+      {
+        // Secondary "launch" action (#31): the primary row click opens the
+        // detail panel (how to get access); this quiet ↗ button is the fast
+        // "I just want the URL" jump. stopPropagation so it doesn't also open
+        // the panel. Only shown when the resource has a URL.
+        id: 'launch',
+        header: '',
+        cell: ({ row }) =>
+          row.original.appUrl ? (
+            <a
+              href={row.original.appUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              aria-label={`Open ${row.original.displayName} in a new tab`}
+              title={`Open ${row.original.displayName}`}
+              onClick={(e) => {
+                e.stopPropagation()
+                recordLaunch(row.original.slug)
+              }}
+              className="inline-flex size-8 items-center justify-center rounded-full border text-muted-foreground opacity-0 transition-opacity hover:border-primary hover:text-primary group-hover:opacity-100 focus-visible:opacity-100"
+            >
+              <ExternalLink className="size-4" />
+            </a>
+          ) : null,
+        meta: {
+          className: 'w-[56px] text-right',
+        },
+      },
     ],
-    [searchQuery, matchedSubResourceMap],
+    [searchQuery, matchedSubResourceMap, recordLaunch],
   )
 
   // Create a single table instance with all apps
@@ -937,7 +1004,7 @@ export function AppCatalogGrid({
                       className="px-4 py-6 sticky top-[49px] bg-muted/90 backdrop-blur z-10"
                     >
                       <div className="flex items-center justify-center">
-                        <span className="font-bold text-lg tracking-widest uppercase leading-loose text-muted-foreground">
+                        <span className="font-serif font-semibold text-lg tracking-widest uppercase leading-loose text-muted-foreground">
                           {group.groupName}
                         </span>
                       </div>
@@ -963,7 +1030,7 @@ export function AppCatalogGrid({
                         }}
                         onClick={() => handleAppClick(row.original)}
                         className={cn(
-                          'border-b cursor-pointer transition-colors',
+                          'group border-b cursor-pointer transition-colors',
                           selectedApp?.id === row.original.id
                             ? 'bg-blue-100 dark:bg-blue-950 hover:bg-blue-200 dark:hover:bg-blue-900'
                             : 'hover:bg-muted/30',

package/src/modules/appCatalog/ui/launcher/AttributionFooter.tsx

@@ -0,0 +1,43 @@
+import { ExternalLink, Github } from 'lucide-react'
+import { useUiSettings } from '~/context/UiSettingsContext'
+
+/**
+ * Subtle attribution line for the home view (author + repo links). Content is
+ * supplied by the consuming app via `UiSettings.attribution` — the OSS core
+ * hard-codes nothing company-specific. Renders nothing when unset.
+ *
+ * `kind: 'oss'` links get a GitHub mark; everything else gets a generic
+ * external-link icon (proprietary repos, etc.).
+ */
+export function AttributionFooter() {
+  const { attribution } = useUiSettings()
+  if (!attribution || (!attribution.madeBy && !attribution.links?.length)) {
+    return null
+  }
+
+  return (
+    <footer className="mt-16 border-t border-border/60 pt-5 text-center text-[12.5px] text-muted-foreground">
+      {attribution.madeBy && <span>{attribution.madeBy}</span>}
+      {attribution.links && attribution.links.length > 0 && (
+        <div className="mt-1.5 flex flex-wrap items-center justify-center gap-x-4 gap-y-1">
+          {attribution.links.map((link) => (
+            <a
+              key={link.url}
+              href={link.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center gap-1 hover:text-primary transition-colors"
+            >
+              {link.kind === 'oss' ? (
+                <Github className="size-3.5" />
+              ) : (
+                <ExternalLink className="size-3.5" />
+              )}
+              {link.label}
+            </a>
+          ))}
+        </div>
+      )}
+    </footer>
+  )
+}

package/src/modules/appCatalog/ui/launcher/LauncherDetailPanel.tsx

@@ -0,0 +1,52 @@
+import type { Resource } from '@igstack/app-catalog-backend-core'
+import { AppDetails } from '../grid/AppCatalogGrid'
+
+/**
+ * Centered detail card for the launcher (#38, item B). Renders the rich
+ * AppDetails (access-hero, sub-resources, tiers) as a large centered modal card
+ * over the launcher backdrop, instead of the old grid + resizable split-pane.
+ *
+ * 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).
+ */
+export function LauncherDetailPanel({
+  app,
+  onClose,
+  onAppClick,
+}: {
+  app: Resource
+  onClose: () => void
+  onAppClick?: (app: Resource) => void
+}) {
+  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
+        role="dialog"
+        aria-modal="true"
+        aria-label={`${app.displayName} details`}
+        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"
+      >
+        <div className="max-h-[85vh] overflow-y-auto px-6 py-5 sm:px-8 sm:py-7">
+          <AppDetails
+            app={app}
+            onAppClick={onAppClick}
+            onClosePanel={onClose}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}