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

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

@@ -19,6 +19,8 @@ import { OnboardingCard } from '../components/OnboardingCard'
 import { useAppCatalogFilters } from '../context/AppCatalogFiltersContext'
 import { FilterBar } from '../filters/FilterBar'
 import { AppCatalogGrid } from '../grid/AppCatalogGrid'
+import { LauncherHome } from '../launcher/LauncherHome'
+import { LauncherDetailPanel } from '../launcher/LauncherDetailPanel'
 
 export function AppCatalogPage({
   selectedSlug,
@@ -153,32 +155,37 @@ export function AppCatalogPage({
     searchValue: deferredSearchValue,
   })
 
-  // Auto-open details when only 1 result. Carry the *current* search value into
-  // the URL (`q`) as part of this navigation so the search input and focus
-  // survive the route change (#10). We must inject `searchValue` explicitly
-  // rather than rely on `(prev) => prev`: this child effect runs before the
-  // provider's async state→URL sync effect, so at nav time the URL does not yet
-  // hold `q` and the query would otherwise be lost on remount.
+  // Auto-open details when only 1 result — ONLY in the legacy grid path
+  // (recent/tag filters active). In the launcher (#38) typing shows the
+  // search-morph results list; auto-navigating to /app/<slug> on a single
+  // match would yank the user out of the launcher into the old grid+panel
+  // (reported bug: searching "biom" jumped straight to an app-detail page).
+  // The morph already renders the single match as a keyboard-selectable row —
+  // the user presses ↵ or clicks to open it.
+  const legacyGridActive =
+    filterState.recentMode || Object.keys(filterState.tagFilters).length > 0
   useEffect(() => {
-    if (filteredApps.length === 1 && filteredApps[0] && !selectedAppSlug) {
+    if (
+      legacyGridActive &&
+      filteredApps.length === 1 &&
+      filteredApps[0] &&
+      !selectedAppSlug
+    ) {
       void navigate({
         to: '/app/$slug',
         params: { slug: filteredApps[0].slug },
-        search: (prev) => ({
-          ...prev,
-          q: searchValue === '' ? undefined : searchValue,
-        }),
+        search: (prev) => prev,
         replace: true,
       })
     }
-  }, [filteredApps, selectedAppSlug, navigate, searchValue])
+  }, [legacyGridActive, filteredApps, selectedAppSlug, navigate])
 
   // #22: alias → canonical redirect. When an app is renamed its old slug is
   // kept in `aliases[]`. If the URL slug matches no canonical slug but does
   // match some app's alias, redirect (replace) to that app's canonical slug so
   // old bookmarks resolve instead of showing a blank catalog. Guard on a real
   // canonical miss so we never fight the normal detail-open path. Note: this is
-  // a client-side SPA redirect (replace), not an HTTP 301 — see #22.
+  // a client-side SPA redirect (replace), not an HTTP 301 — see ig-umbrella#22.
   useEffect(() => {
     if (!selectedAppSlug || resources.length === 0) return
     const canonical = resources.some((r) => r.slug === selectedAppSlug)
@@ -202,6 +209,27 @@ export function AppCatalogPage({
     })
   }
 
+  const handleLaunch = (app: Resource) => {
+    if (app.appUrl) window.open(app.appUrl, '_blank', 'noopener,noreferrer')
+  }
+
+  // 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.
+  const showLauncherHome =
+    !filterState.recentMode && Object.keys(filterState.tagFilters).length === 0
+
+  // The app whose detail slide-over is open over the launcher backdrop.
+  const launcherSelectedApp = useMemo(
+    () =>
+      selectedAppSlug
+        ? (resources.find((r) => r.slug === selectedAppSlug) ?? null)
+        : null,
+    [selectedAppSlug, resources],
+  )
+
   const handleClearFilters = () => {
     setSearchValue('')
     actions.clearAllFilters()
@@ -224,6 +252,40 @@ export function AppCatalogPage({
   // Use first tag definition for grouping
   const groupingDefinition = tagsDefinitions[0]
 
+  // Adaptive-home launcher view (#38): the discovery spine or the search-morph
+  // results list (handled inside LauncherHome). Owns vertical scroll —
+  // MainLayout is h-screen/overflow-hidden, so the launcher must scroll
+  // internally to reveal the full Browse-all list as the user scrolls.
+  if (showLauncherHome) {
+    return (
+      <div className="flex-1 min-h-0 overflow-y-auto">
+        <LauncherHome
+          apps={rootResources.filter(
+            (a) => filterState.showDeprecated || !a.deprecated,
+          )}
+          // All resources incl. children — so search matches sub-resources
+          // (e.g. an AWS account) and surfaces their parent, preserving the
+          // existing cross-sub-resource search behavior.
+          allResources={resources}
+          searchValue={searchValue}
+          onSearchChange={setSearchValue}
+          onAppClick={handleAppClick}
+          onLaunch={handleLaunch}
+          totalCount={totalAppsCount}
+        />
+        {/* #38 item B: app detail as a slide-over over the launcher backdrop,
+            instead of dropping into the old grid + split-pane. */}
+        {launcherSelectedApp && (
+          <LauncherDetailPanel
+            app={launcherSelectedApp}
+            onClose={() => void navigate({ to: '/' })}
+            onAppClick={handleAppClick}
+          />
+        )}
+      </div>
+    )
+  }
+
   return (
     <div className="flex flex-col flex-1 min-h-0">
       <div className="shrink-0">

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
- * `[Example Portal](/app/example-portal)` (#25). The detail panel renders
+ * `[Signatera Portal](/app/signatera-portal)` (#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/modules/appCatalog/utils/resolveHelpers.ts

@@ -25,5 +25,36 @@ export function getRootResources(resources: Resource[]): Resource[] {
   return resources.filter((r) => !r.parentSlug)
 }
 
+/** The immediate parent of a resource (undefined for a root or if missing). */
+export function getParentResource(
+  resources: Resource[],
+  resource: Pick<Resource, 'parentSlug'>,
+): Resource | undefined {
+  if (!resource.parentSlug) return undefined
+  return resources.find((r) => r.slug === resource.parentSlug)
+}
+
+/**
+ * The prerequisite chain for a resource: its ancestors that carry an access
+ * policy, ordered ROOT → nearest parent. Used to surface the two-step access
+ * pattern ("get <parent> access first, then this resource"), which the domain
+ * model computes from the tree but users can't see otherwise (#38 item D).
+ * Guards against cycles.
+ */
+export function getAccessPrerequisiteChain(
+  resources: Resource[],
+  resource: Pick<Resource, 'parentSlug'>,
+): Resource[] {
+  const chain: Resource[] = []
+  const seen = new Set<string>()
+  let current = getParentResource(resources, resource)
+  while (current && !seen.has(current.slug)) {
+    seen.add(current.slug)
+    if (current.accessRequest) chain.unshift(current)
+    current = getParentResource(resources, current)
+  }
+  return chain
+}
+
 /** @deprecated Use getChildResources instead */
 export const getSubResourcesForApp = getChildResources

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

@@ -1,23 +1,26 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, stripSearchParams } from '@tanstack/react-router'
 import { z } from 'zod'
 import { appCatalogRouteLoader } from '~/modules/appCatalog/routeLoader'
 import { AppCatalogLayout } from '~/modules/appCatalog/ui/layout/AppCatalogLayout'
 import { AppCatalogPage } from '~/modules/appCatalog/ui/pages/AppCatalogPage'
 
 // Preserve the URL-synced filter params (see AppCatalogFiltersContext) on this
-// route so they aren't stripped on navigation — the search query `q` in
-// particular must survive auto-navigation to an app's detail page (#10).
+// route so they aren't stripped on navigation. `q` (the search text) is the
+// exception: as of #27 it lives in sessionStorage, not the URL. It stays
+// declared here so an incoming legacy `?q=` still validates, but the
+// `stripSearchParams` middleware removes it so shared app links stay clean.
 const searchSchema = z.object({
-  q: z.string().optional(),
   filterTag: z.string().optional(),
   recent: z.string().optional(),
   filters: z.string().optional(),
   deprecated: z.string().optional(),
+  q: z.string().optional(),
 })
 
 export const Route = createFileRoute('/_layout/app/$slug')({
   component: RouteComponent,
   validateSearch: searchSchema,
+  search: { middlewares: [stripSearchParams(['q'])] },
   async loader() {
     const appCatalogLoader = await appCatalogRouteLoader()
     return { appCatalogLoader }

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

@@ -1,9 +1,11 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, stripSearchParams } from '@tanstack/react-router'
 import { z } from 'zod'
 import { catalogRouteLoader } from '~/modules/appCatalog/catalogRouteLoader'
 import { AppCatalogLayout } from '~/modules/appCatalog/ui/layout/AppCatalogLayout'
 import { AppCatalogPage } from '~/modules/appCatalog/ui/pages/AppCatalogPage'
 
+// #27: `q` kept declared for legacy links but stripped from the URL (search
+// text lives in sessionStorage now).
 const searchSchema = z.object({
   app: z.string().optional(),
   q: z.string().optional(),
@@ -12,6 +14,7 @@ const searchSchema = z.object({
 export const Route = createFileRoute('/_layout/catalog/apps/')({
   component: RouteComponent,
   validateSearch: searchSchema,
+  search: { middlewares: [stripSearchParams(['q'])] },
   async loader(ctx) {
     await catalogRouteLoader(ctx)
   },

package/src/routes/_layout/index.tsx

@@ -1,9 +1,12 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, stripSearchParams } from '@tanstack/react-router'
 import { z } from 'zod'
 import { appCatalogRouteLoader } from '~/modules/appCatalog/routeLoader'
 import { AppCatalogLayout } from '~/modules/appCatalog/ui/layout/AppCatalogLayout'
 import { AppCatalogPage } from '~/modules/appCatalog/ui/pages/AppCatalogPage'
 
+// #27: `q` (search text) no longer belongs in the URL — it lives in
+// sessionStorage now. Keep it declared so incoming `?q=` validates, but the
+// `stripSearchParams` middleware removes it so shared/bookmarked links stay clean.
 const searchSchema = z.object({
   filterTag: z.string().optional(),
   q: z.string().optional(),
@@ -12,6 +15,7 @@ const searchSchema = z.object({
 export const Route = createFileRoute('/_layout/')({
   component: RouteComponent,
   validateSearch: searchSchema,
+  search: { middlewares: [stripSearchParams(['q'])] },
   async loader() {
     const appCatalogLoader = await appCatalogRouteLoader()
     return {

package/src/routes/_layout/service-desks.tsx

@@ -1,9 +1,11 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute, stripSearchParams } from '@tanstack/react-router'
 import { z } from 'zod'
 import { appCatalogRouteLoader } from '~/modules/appCatalog/routeLoader'
 import { AppCatalogLayout } from '~/modules/appCatalog/ui/layout/AppCatalogLayout'
 import { ServiceDesksPage } from '~/modules/appCatalog/ui/pages/ServiceDesksPage'
 
+// #27: `q` kept declared for legacy links but stripped from the URL (search
+// text lives in sessionStorage now).
 const searchSchema = z.object({
   q: z.string().optional(),
 })
@@ -11,6 +13,7 @@ const searchSchema = z.object({
 export const Route = createFileRoute('/_layout/service-desks')({
   component: RouteComponent,
   validateSearch: searchSchema,
+  search: { middlewares: [stripSearchParams(['q'])] },
   async loader() {
     const appCatalogLoader = await appCatalogRouteLoader()
     return { appCatalogLoader }

package/src/types/uiSettings.ts

@@ -13,4 +13,19 @@ export interface UiSettings {
   frontendBuildId?: string
   /** PWA auto-update configuration (idle timeout, check interval, debug) */
   pwaAutoUpdate?: PwaAutoUpdateOptions
+  /**
+   * Optional attribution shown as a subtle footer line on the home view.
+   * Kept generic here (no hard-coded names/links) so the OSS core stays
+   * vendor-neutral; the consuming app supplies its own author + repo links.
+   */
+  attribution?: {
+    /** e.g. "Made by <name>" — rendered verbatim. */
+    madeBy?: string
+    /** Labeled links; `kind` lets the UI hint open-source vs proprietary. */
+    links?: {
+      label: string
+      url: string
+      kind?: 'oss' | 'proprietary'
+    }[]
+  }
 }

package/src/ui/components/header/Header.tsx

@@ -142,7 +142,9 @@ export function Header({ middle }: HeaderProps) {
           <div className="flex items-center gap-2">
             <AppCatalogLogo className="h-16 w-16" />
             <div className="flex flex-col">
-              <span className="text-lg font-bold">App Catalog</span>
+              <span className="font-serif text-lg font-semibold">
+                App Catalog
+              </span>
               {appCatalogContextMaybe?.versions && (
                 <VersionDisplay versions={appCatalogContextMaybe.versions} />
               )}