@igstack/app-catalog-frontend-core 0.16.0 → 0.17.1-alpha-20260821043201

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

@@ -53,6 +53,7 @@ import { markdownToPlainText } from '../../utils/markdownToPlainText'
 import { formatRelativeTime } from '../../utils/formatRelativeTime'
 import { TierVariantsSection } from '../components/TierVariantsSection'
 import { SubResourcesSection } from '../components/SubResourcesSection'
+import { SubResourceDetailPanel } from '../components/SubResourceDetailPanel'
 import { getChildResources } from '../../utils/resolveHelpers'
 
 export interface AppCatalogGridProps {
@@ -70,6 +71,12 @@ export interface AppCatalogGridProps {
   onClearFilters?: () => void
   /** Called when the user closes the detail panel (Esc or X) — e.g. to navigate back to the catalog URL */
   onClosePanel?: () => void
+  /** Currently selected subresource slug */
+  selectedSubSlug?: string
+  /** Called when user clicks a sub-row */
+  onSubClick?: (parentSlug: string, subSlug: string) => void
+  /** Called when user clicks Back in sub detail */
+  onBackToParent?: () => void
 }
 
 function getIconUrl(iconName: string): string {
@@ -540,10 +547,20 @@ export function AppDetails({
             {app.freshness?.lastCheckedAt && (
               <span
                 className="inline-flex items-center gap-1 text-xs text-muted-foreground"
-                title={app.freshness.lastCheckedAt}
+                title={
+                  app.freshness.lastContentChangeAt
+                    ? `Content last changed ${app.freshness.lastContentChangeAt} · last checked ${app.freshness.lastCheckedAt}`
+                    : `Last checked ${app.freshness.lastCheckedAt}`
+                }
               >
                 <Clock className="size-3" />
-                Updated {formatRelativeTime(app.freshness.lastCheckedAt)}
+                {/* "Updated" means the content changed, not that a check ran -
+                    entries predating the field have none, so fall back. */}
+                Updated{' '}
+                {formatRelativeTime(
+                  app.freshness.lastContentChangeAt ??
+                    app.freshness.lastCheckedAt,
+                )}
                 {app.freshness.isStale && (
                   <span className="italic opacity-75">
                     {' '}
@@ -773,16 +790,21 @@ export function AppCatalogGrid({
   totalAppsCount,
   onClearFilters,
   onClosePanel,
+  selectedSubSlug,
+  onSubClick,
+  onBackToParent,
 }: AppCatalogGridProps) {
   // Full, unfiltered resource set — the detail panel must resolve the open app
   // from this, not only from the filtered `apps`. Navigating to /app/<slug>
   // (e.g. a deprecated app's "View replacement" link, or any deep link) should
   // render that app like typing the URL in the browser, regardless of the
-  // active search/filters (#12).
-  const { resources: allResourcesForDetail } = useAppCatalogContext()
+  // active search/filters (#12). Also provides approvalMethods for sub-resource panel.
+  const { resources: allResources2, approvalMethods } = useAppCatalogContext()
+
   const selectedApp = selectedAppSlug
     ? (apps.find((a) => a.slug === selectedAppSlug) ??
-      allResourcesForDetail.find((a) => a.slug === selectedAppSlug))
+      allResources2.find((a) => a.slug === selectedAppSlug && !a.parentSlug) ??
+      null)
     : null
 
   const groupedApps = groupApps(apps, groupingDefinition, hasSearch)
@@ -803,10 +825,8 @@ export function AppCatalogGrid({
   // 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(() => {
-    const map = new Map<string, string>()
+  const matchedSubResourcesMap = React.useMemo(() => {
+    const map = new Map<string, Resource[]>()
     if (!searchQuery?.trim() || allResources2.length === 0) return map
     const queryTerms = searchQuery
       .trim()
@@ -818,7 +838,6 @@ export function AppCatalogGrid({
 
     for (const r of allResources2) {
       if (!r.parentSlug) continue
-      if (map.has(r.parentSlug)) continue
       const nameMatch = allTermsMatch(r.displayName.toLowerCase())
       const aliasMatch = (r.aliases ?? []).some((a) =>
         allTermsMatch(a.toLowerCase()),
@@ -827,12 +846,23 @@ export function AppCatalogGrid({
         ? allTermsMatch(r.description.toLowerCase())
         : false
       if (nameMatch || aliasMatch || descMatch) {
-        map.set(r.parentSlug, r.displayName)
+        if (!map.has(r.parentSlug)) {
+          map.set(r.parentSlug, [])
+        }
+        map.get(r.parentSlug)!.push(r)
       }
     }
     return map
   }, [searchQuery, allResources2])
 
+  // Track expanded parent slugs for sub-resource rows; reset when search changes
+  const [expandedParentSlugs, setExpandedParentSlugs] = React.useState<
+    Set<string>
+  >(() => new Set())
+  React.useEffect(() => {
+    setExpandedParentSlugs(new Set())
+  }, [searchQuery])
+
   // Define columns
   const columns = React.useMemo<ColumnDef<Resource>[]>(
     () => [
@@ -899,12 +929,55 @@ export function AppCatalogGrid({
                 searchQuery={searchQuery}
               />
             </span>
-            {matchedSubResourceMap.get(row.original.slug) && (
-              <div className="text-xs text-primary mt-0.5">
-                Matched sub-resource:{' '}
-                {matchedSubResourceMap.get(row.original.slug)}
-              </div>
-            )}
+            {/* matched subs: expandable indented rows */}
+            {(matchedSubResourcesMap.get(row.original.slug)?.length ?? 0) > 0 &&
+              (() => {
+                const matchedSubs = matchedSubResourcesMap.get(
+                  row.original.slug,
+                )!
+                const COLLAPSED_LIMIT = 5
+                const isExpanded = expandedParentSlugs.has(row.original.slug)
+                const visibleSubs = isExpanded
+                  ? matchedSubs
+                  : matchedSubs.slice(0, COLLAPSED_LIMIT)
+                const hiddenCount = matchedSubs.length - COLLAPSED_LIMIT
+                return (
+                  <div className="mt-1 space-y-0.5">
+                    {visibleSubs.map((sub) => (
+                      <button
+                        key={sub.slug}
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          onSubClick?.(row.original.slug, sub.slug)
+                        }}
+                        className={cn(
+                          'flex items-center gap-1.5 text-xs pl-3 border-l-2 w-full text-left py-0.5 rounded-sm hover:bg-accent/50 transition-colors',
+                          selectedSubSlug === sub.slug
+                            ? 'border-primary text-primary font-medium'
+                            : 'border-muted-foreground/30 text-muted-foreground hover:text-foreground',
+                        )}
+                      >
+                        <span>{sub.displayName}</span>
+                      </button>
+                    ))}
+                    {!isExpanded && hiddenCount > 0 && (
+                      <button
+                        type="button"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          setExpandedParentSlugs(
+                            (prev) => new Set([...prev, row.original.slug]),
+                          )
+                        }}
+                        className="text-xs pl-3 border-l-2 border-muted-foreground/30 text-muted-foreground hover:text-primary w-full text-left py-0.5"
+                      >
+                        ... {hiddenCount} more
+                      </button>
+                    )}
+                  </div>
+                )
+              })()}
           </div>
         ),
       },
@@ -937,7 +1010,15 @@ export function AppCatalogGrid({
         },
       },
     ],
-    [searchQuery, matchedSubResourceMap, recordLaunch],
+    [
+      searchQuery,
+      matchedSubResourcesMap,
+      expandedParentSlugs,
+      selectedSubSlug,
+      onSubClick,
+      setExpandedParentSlugs,
+      recordLaunch,
+    ],
   )
 
   // Create a single table instance with all apps
@@ -1113,24 +1194,47 @@ export function AppCatalogGrid({
             className="overflow-hidden"
           >
             <div className="h-full overflow-y-auto border-l bg-background pl-4">
-              {selectedApp ? (
-                <div className="relative">
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="absolute top-4 right-4 z-10 hover:bg-accent"
-                    onClick={handleClosePanel}
-                    aria-label="Close details panel"
-                  >
-                    <X className="h-5 w-5" />
-                  </Button>
-                  <AppDetails
-                    app={selectedApp}
-                    onAppClick={onAppClick}
-                    onClosePanel={handleClosePanel}
-                  />
-                </div>
-              ) : null}
+              {/* selectedApp is non-null here; isPanelOpen guards this block */}
+              <div className="relative">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="absolute top-4 right-4 z-10 hover:bg-accent"
+                  onClick={handleClosePanel}
+                  aria-label="Close details panel"
+                >
+                  <X className="h-5 w-5" />
+                </Button>
+                {/* eslint-disable-next-line @typescript-eslint/no-unnecessary-condition */}
+                {selectedApp &&
+                  (() => {
+                    const app = selectedApp
+                    const selectedSub = selectedSubSlug
+                      ? allResources2.find(
+                          (r) =>
+                            r.slug === selectedSubSlug &&
+                            r.parentSlug === app.slug,
+                        )
+                      : null
+                    if (selectedSub != null) {
+                      return (
+                        <SubResourceDetailPanel
+                          subResource={selectedSub}
+                          parent={app}
+                          approvalMethods={approvalMethods}
+                          onBack={onBackToParent ?? (() => undefined)}
+                        />
+                      )
+                    }
+                    return (
+                      <AppDetails
+                        app={selectedApp}
+                        onAppClick={onAppClick}
+                        onClosePanel={handleClosePanel}
+                      />
+                    )
+                  })()}
+              </div>
             </div>
           </ResizablePanel>
         </>

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

@@ -370,21 +370,25 @@ export function LauncherHome({
     [topSlugs, bySlug],
   )
 
-  // New this week: apps whose sources were checked in the last 7 days, as a
+  // New this week: apps whose content actually changed in the last 7 days, as a
   // proxy for "recently added/updated" (frontend Resource has no createdAt yet;
-  // see #38). Falls back to empty (section hidden) when no freshness data.
+  // see #38). A bare re-check is not an update, so prefer the content-change
+  // date, falling back to the check date only for entries that predate it.
+  // Falls back to empty (section hidden) when no freshness data.
   const fresh = useMemo(() => {
     const weekAgo = Date.now() - 7 * 24 * 60 * 60 * 1000
+    const updatedAt = (a: Resource) =>
+      a.freshness?.lastContentChangeAt ?? a.freshness?.lastCheckedAt ?? null
     return apps
       .filter((a) => {
-        const t = a.freshness?.lastCheckedAt
+        const t = updatedAt(a)
         return t ? new Date(t).getTime() >= weekAgo : false
       })
-      .sort((a, b) => {
-        const ta = new Date(a.freshness?.lastCheckedAt ?? 0).getTime()
-        const tb = new Date(b.freshness?.lastCheckedAt ?? 0).getTime()
-        return tb - ta
-      })
+      .sort(
+        (a, b) =>
+          new Date(updatedAt(b) ?? 0).getTime() -
+          new Date(updatedAt(a) ?? 0).getTime(),
+      )
       .slice(0, 6)
   }, [apps])
 

package/src/modules/appCatalog/ui/pages/AppCatalogPage.tsx

@@ -1,7 +1,13 @@
 import type { Resource } from '@igstack/app-catalog-backend-core'
-import { useNavigate } from '@tanstack/react-router'
+import { useNavigate, useSearch } from '@tanstack/react-router'
 import { X } from 'lucide-react'
-import { useDeferredValue, useEffect, useMemo, useState } from 'react'
+import {
+  useCallback,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
 import { Button } from '~/ui/button'
 import {
   Empty,
@@ -34,6 +40,35 @@ export function AppCatalogPage({
   const selectedAppSlug = selectedSlug
 
   // Search value from context (URL-synced in AppCatalogFiltersContext)
+  const search = useSearch({ strict: false })
+  const selectedSubSlug = search.sub
+
+  const handleSubClick = useCallback(
+    (parentSlug: string, subSlug: string) => {
+      void navigate({
+        to: '/app/$slug',
+        params: { slug: parentSlug },
+        search: (prev) => ({ ...prev, sub: subSlug }),
+      })
+    },
+    [navigate],
+  )
+
+  const handleBackToParent = useCallback(() => {
+    // Return to parent app detail, clearing the sub-resource selection.
+    // selectedAppSlug is the parent slug (set by the /app/$slug route).
+    if (selectedAppSlug) {
+      void navigate({
+        to: '/app/$slug',
+        params: { slug: selectedAppSlug },
+        search: (prev) => {
+          const { sub: _sub, ...rest } = prev as Record<string, string>
+          return rest
+        },
+      })
+    }
+  }, [navigate, selectedAppSlug])
+
   const searchValue = filterState.searchValue
   const setSearchValue = actions.setSearchValue
 
@@ -214,12 +249,15 @@ export function AppCatalogPage({
   }
 
   // Adaptive-home launcher (#38): shown whenever no structural filter
-  // (recentMode / tagFilters) is active. A selected app no longer forces the
-  // old grid — instead the launcher stays as the backdrop and the app detail
-  // renders in a slide-over panel (#38 item B). The legacy grid+split-pane is
-  // reserved for the recent/tag filter views.
+  // (recentMode / tagFilters / active search) is active. A selected app no longer
+  // forces the old grid — instead the launcher stays as the backdrop and the app
+  // detail renders in a slide-over panel (#38 item B). The legacy grid+split-pane
+  // is used for recent/tag filter views AND for active search (so expandable
+  // sub-resource rows and query highlighting in AppCatalogGrid are visible).
   const showLauncherHome =
-    !filterState.recentMode && Object.keys(filterState.tagFilters).length === 0
+    !filterState.recentMode &&
+    Object.keys(filterState.tagFilters).length === 0 &&
+    !deferredSearchValue.trim()
 
   // The app whose detail slide-over is open over the launcher backdrop.
   const launcherSelectedApp = useMemo(
@@ -346,11 +384,14 @@ export function AppCatalogPage({
           <AppCatalogGrid
             apps={filteredApps}
             selectedAppSlug={selectedAppSlug}
+            selectedSubSlug={selectedSubSlug}
             groupingDefinition={groupingDefinition}
             onAppClick={handleAppClick}
             onClosePanel={() => void navigate({ to: '/' })}
+            onSubClick={handleSubClick}
+            onBackToParent={handleBackToParent}
             hasSearch={!!deferredSearchValue}
-            searchQuery={deferredSearchValue}
+            searchQuery={searchValue}
             totalAppsCount={totalAppsCount}
             onClearFilters={handleClearFilters}
           />

package/src/modules/appCatalog/ui/pages/ServiceDesksPage.tsx

@@ -62,31 +62,59 @@ export function ServiceDesksPage() {
                 const url = desk.config.url
                 const description = desk.config.description
                 return (
-                  <TableRow key={desk.slug}>
+                  <TableRow
+                    key={desk.slug}
+                    className={
+                      url ? 'cursor-pointer hover:bg-muted/50' : undefined
+                    }
+                    onClick={
+                      url
+                        ? () =>
+                            window.open(url, '_blank', 'noopener,noreferrer')
+                        : undefined
+                    }
+                  >
                     <TableCell className="font-medium align-top">
-                      <span data-testid="service-desk-name">
-                        {desk.displayName}
-                      </span>
+                      {url ? (
+                        <a
+                          href={url}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="hover:text-primary hover:underline"
+                          data-testid="service-desk-name"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          {desk.displayName}
+                        </a>
+                      ) : (
+                        <span data-testid="service-desk-name">
+                          {desk.displayName}
+                        </span>
+                      )}
                       {description && (
                         <span className="block text-xs font-normal text-muted-foreground">
                           {description}
                         </span>
                       )}
-                    </TableCell>
-                    <TableCell>
-                      {url ? (
+                      {url && (
                         <a
                           href={url}
                           target="_blank"
                           rel="noopener noreferrer"
-                          className="inline-flex items-center gap-1 text-primary hover:underline break-all"
+                          className="mt-0.5 inline-flex items-center gap-1 text-xs text-primary/70 hover:text-primary hover:underline"
                           title={url}
+                          onClick={(e) => e.stopPropagation()}
                         >
                           {url.replace(/^https?:\/\//, '')}
                           <ExternalLink className="size-3 shrink-0" />
                         </a>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-muted-foreground text-xs">
+                      {url ? (
+                        <ExternalLink className="size-4 text-primary/50" />
                       ) : (
-                        <span className="text-muted-foreground">—</span>
+                        <span>—</span>
                       )}
                     </TableCell>
                   </TableRow>

package/src/modules/appCatalog/utils/markdownToPlainText.ts

@@ -2,7 +2,7 @@
  * Reduce a short markdown string to its visible plain text.
  *
  * Descriptions may contain markdown — notably cross-reference links like
- * `[Signatera Portal](/app/signatera-portal)` (#25). The detail panel renders
+ * `[Team Chat](/app/team-chat)` (#25). The detail panel renders
  * those as interactive links via {@link MarkdownText}, but in compact / clamped
  * surfaces (grid list preview, table row, filter combobox, sub-resources) an
  * interactive link would break `line-clamp` and can't be reliably highlighted

package/src/routes/_layout/app.$slug.tsx

@@ -15,6 +15,7 @@ const searchSchema = z.object({
   filters: z.string().optional(),
   deprecated: z.string().optional(),
   q: z.string().optional(),
+  sub: z.string().optional(),
 })
 
 export const Route = createFileRoute('/_layout/app/$slug')({

package/src/routes/_layout/catalog.apps.index.tsx

@@ -9,6 +9,7 @@ import { AppCatalogPage } from '~/modules/appCatalog/ui/pages/AppCatalogPage'
 const searchSchema = z.object({
   app: z.string().optional(),
   q: z.string().optional(),
+  sub: z.string().optional(),
 })
 
 export const Route = createFileRoute('/_layout/catalog/apps/')({