@igstack/app-catalog-frontend-core 0.3.1-alpha-20260405015231 → 0.3.1-alpha-20260724172703

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

@@ -1,6 +1,6 @@
 import type {
-  AppForCatalog,
   GroupingTagDefinition,
+  Resource,
 } from '@igstack/app-catalog-backend-core'
 import type { ColumnDef } from '@tanstack/react-table'
 import {
@@ -39,13 +39,13 @@ import { useKeyboardNavigation } from '../hooks/useKeyboardNavigation'
 import { highlightText } from '../../utils/searchApps'
 import { TierVariantsSection } from '../components/TierVariantsSection'
 import { SubResourcesSection } from '../components/SubResourcesSection'
-import { getSubResourcesForApp } from '../../utils/resolveHelpers'
+import { getChildResources } from '../../utils/resolveHelpers'
 
 export interface AppCatalogGridProps {
-  apps: AppForCatalog[]
+  apps: Resource[]
   selectedAppSlug?: string
   groupingDefinition?: GroupingTagDefinition
-  onAppClick?: (app: AppForCatalog) => void
+  onAppClick?: (app: Resource) => void
   /** Whether search is active (affects group sorting) */
   hasSearch?: boolean
   /** Search query for highlighting matches */
@@ -91,13 +91,7 @@ function HighlightedText({
   )
 }
 
-function AppIcon({
-  app,
-  className,
-}: {
-  app: AppForCatalog
-  className?: string
-}) {
+function AppIcon({ app, className }: { app: Resource; className?: string }) {
   const [imageError, setImageError] = React.useState(false)
 
   // Use iconName from backend if available
@@ -127,7 +121,7 @@ function AppIcon({
   )
 }
 
-function AppScreenshot({ app }: { app: AppForCatalog }) {
+function AppScreenshot({ app }: { app: Resource }) {
   const [imageError, setImageError] = React.useState(false)
   const [isLoadingImage, setIsLoadingImage] = React.useState(true)
 
@@ -172,11 +166,11 @@ function AppScreenshot({ app }: { app: AppForCatalog }) {
   )
 }
 
-function TiersAndSubResourcesPanel({ app }: { app: AppForCatalog }) {
-  const { subResources } = useAppCatalogContext()
+function TiersAndSubResourcesPanel({ app }: { app: Resource }) {
+  const { resources } = useAppCatalogContext()
   const appSubResources = React.useMemo(
-    () => getSubResourcesForApp(subResources ?? [], app.slug),
-    [subResources, app.slug],
+    () => getChildResources(resources, app.slug),
+    [resources, app.slug],
   )
 
   return (
@@ -200,13 +194,13 @@ function AppDetails({
   onAppClick,
   onClosePanel,
 }: {
-  app: AppForCatalog
-  onAppClick?: (app: AppForCatalog) => void
+  app: Resource
+  onAppClick?: (app: Resource) => void
   onClosePanel: () => void
 }) {
   const [isGalleryOpen, setIsGalleryOpen] = React.useState(false)
   const [galleryInitialIndex, setGalleryInitialIndex] = React.useState(0)
-  const { approvalMethods, apps } = useAppCatalogContext()
+  const { approvalMethods, resources: allResources } = useAppCatalogContext()
   const { recordClick } = useAppClickHistory()
   const updateApp = useUpdateApp()
   const [draftSource, setDraftSource] = React.useState<string | null>(null)
@@ -258,7 +252,7 @@ function AppDetails({
 
   // Find replacement app if deprecated
   const replacementApp = app.deprecated?.replacementSlug
-    ? apps.find((a) => a.slug === app.deprecated?.replacementSlug)
+    ? allResources.find((a) => a.slug === app.deprecated?.replacementSlug)
     : null
 
   return (
@@ -621,11 +615,11 @@ function AppDetails({
 
 interface GroupedApps {
   groupName: string
-  apps: AppForCatalog[]
+  apps: Resource[]
 }
 
 function groupApps(
-  apps: AppForCatalog[],
+  apps: Resource[],
   groupingDef?: GroupingTagDefinition,
   hasSearch?: boolean,
 ): GroupedApps[] {
@@ -642,8 +636,8 @@ function groupApps(
     return [{ groupName: 'All Apps', apps: sortedApps }]
   }
 
-  const grouped = new Map<string, AppForCatalog[]>()
-  const ungrouped: AppForCatalog[] = []
+  const grouped = new Map<string, Resource[]>()
+  const ungrouped: Resource[] = []
 
   for (const app of apps) {
     const matchingTag = app.tags?.find((tag) =>
@@ -720,11 +714,11 @@ export function AppCatalogGrid({
     onAppClick,
   })
 
-  // Build a map of appSlug -> matched sub-resource displayName for search annotation
-  const { subResources: allSubResources } = useAppCatalogContext()
+  // 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>()
-    if (!searchQuery?.trim() || !allSubResources?.length) return map
+    if (!searchQuery?.trim() || allResources2.length === 0) return map
     const queryTerms = searchQuery
       .trim()
       .toLowerCase()
@@ -733,22 +727,25 @@ export function AppCatalogGrid({
     const allTermsMatch = (text: string): boolean =>
       queryTerms.every((term) => text.includes(term))
 
-    for (const sr of allSubResources) {
-      if (map.has(sr.appSlug)) continue
-      const nameMatch = allTermsMatch(sr.displayName.toLowerCase())
-      const aliasMatch = sr.aliases.some((a) => allTermsMatch(a.toLowerCase()))
-      const descMatch = sr.description
-        ? allTermsMatch(sr.description.toLowerCase())
+    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()),
+      )
+      const descMatch = r.description
+        ? allTermsMatch(r.description.toLowerCase())
         : false
       if (nameMatch || aliasMatch || descMatch) {
-        map.set(sr.appSlug, sr.displayName)
+        map.set(r.parentSlug, r.displayName)
       }
     }
     return map
-  }, [searchQuery, allSubResources])
+  }, [searchQuery, allResources2])
 
   // Define columns
-  const columns = React.useMemo<ColumnDef<AppForCatalog>[]>(
+  const columns = React.useMemo<ColumnDef<Resource>[]>(
     () => [
       {
         id: 'application',
@@ -856,7 +853,7 @@ export function AppCatalogGrid({
     }
   }, [selectedAppSlug, rowRefs])
 
-  const handleAppClick = (app: AppForCatalog) => {
+  const handleAppClick = (app: Resource) => {
     onAppClick?.(app)
   }
 

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

@@ -1,4 +1,4 @@
-import type { AppForCatalog } from '@igstack/app-catalog-backend-core'
+import type { Resource } from '@igstack/app-catalog-backend-core'
 import type { ColumnDef } from '@tanstack/react-table'
 import {
   flexRender,
@@ -17,11 +17,11 @@ import {
 import { getAppUrl } from './appCatalogUtils'
 
 export interface AppCatalogTableProps {
-  apps: AppForCatalog[]
+  apps: Resource[]
 }
 
 export function AppCatalogTable({ apps }: AppCatalogTableProps) {
-  const columns = useMemo<ColumnDef<AppForCatalog>[]>(
+  const columns = useMemo<ColumnDef<Resource>[]>(
     () => [
       {
         slug: 'name',

package/src/modules/appCatalog/ui/grid/appCatalogUtils.ts

@@ -1,5 +1,5 @@
-import type { AppForCatalog } from '@igstack/app-catalog-backend-core'
+import type { Resource } from '@igstack/app-catalog-backend-core'
 
-export function getAppUrl(app: AppForCatalog): string {
+export function getAppUrl(app: Resource): string {
   return app.appUrl || '#'
 }

package/src/modules/appCatalog/ui/hooks/useKeyboardNavigation.ts

@@ -1,10 +1,10 @@
-import type { AppForCatalog } from '@igstack/app-catalog-backend-core'
+import type { Resource } from '@igstack/app-catalog-backend-core'
 import React from 'react'
 
 export interface UseKeyboardNavigationProps {
-  apps: AppForCatalog[]
+  apps: Resource[]
   selectedAppSlug?: string
-  onAppClick?: (app: AppForCatalog) => void
+  onAppClick?: (app: Resource) => void
 }
 
 export function useKeyboardNavigation({

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

@@ -1,4 +1,4 @@
-import type { AppForCatalog } from '@igstack/app-catalog-backend-core'
+import type { Resource } from '@igstack/app-catalog-backend-core'
 import { X } from 'lucide-react'
 import { useDeferredValue, useEffect, useMemo, useState } from 'react'
 import { Button } from '~/ui/button'
@@ -14,15 +14,14 @@ import { useAppCatalogContext } from '../../context/AppCatalogContext'
 import { useAppClickHistory } from '../../hooks/useAppClickHistory'
 import { useAppCounts } from '../../hooks/useAppCounts'
 import { useUrlSyncedState } from '../../hooks/useUrlSyncedState'
-import { searchApps } from '../../utils/searchApps'
+import { searchResources } from '../../utils/searchApps'
 import { OnboardingCard } from '../components/OnboardingCard'
 import { useAppCatalogFilters } from '../context/AppCatalogFiltersContext'
 import { FilterBar } from '../filters/FilterBar'
 import { AppCatalogGrid } from '../grid/AppCatalogGrid'
 
 export function AppCatalogPage() {
-  const { apps, isLoadingApps, tagsDefinitions, subResources } =
-    useAppCatalogContext()
+  const { resources, isLoadingApps, tagsDefinitions } = useAppCatalogContext()
   const { state: filterState, actions } = useAppCatalogFilters()
   const { getTopApps } = useAppClickHistory()
 
@@ -49,8 +48,14 @@ export function AppCatalogPage() {
     void getTopApps(10).then(setTopAppSlugs)
   }, [getTopApps])
 
+  // Get root resources for filtering (children handled internally by searchResources)
+  const rootResources = useMemo(
+    () => resources.filter((r) => !r.parentSlug),
+    [resources],
+  )
+
   const filteredApps = useMemo(() => {
-    let result = apps
+    let result = rootResources
 
     // Step 1: Filter deprecated apps (if not showing them)
     if (!filterState.showDeprecated) {
@@ -76,22 +81,27 @@ export function AppCatalogPage() {
     }
 
     // Step 3: Apply search (using deferred value)
-    result = searchApps(result, deferredSearchValue, subResources)
+    // Pass all resources so children contribute to parent scoring
+    const childResources = resources.filter((r) => r.parentSlug)
+    result = searchResources(
+      [...result, ...childResources],
+      deferredSearchValue,
+    )
 
     return result
   }, [
-    apps,
+    rootResources,
+    resources,
     deferredSearchValue,
     filterState.recentMode,
     filterState.tagFilters,
     filterState.showDeprecated,
     topAppSlugs,
-    subResources,
   ])
 
   // Calculate counts for FilterBar
   const { allCount, recentCount, deprecatedCount } = useAppCounts({
-    apps,
+    apps: rootResources,
     topAppSlugs,
     searchValue: deferredSearchValue,
   })
@@ -103,7 +113,7 @@ export function AppCatalogPage() {
     }
   }, [filteredApps, setSelectedAppSlug])
 
-  const handleAppClick = (app: AppForCatalog) => {
+  const handleAppClick = (app: Resource) => {
     setSelectedAppSlug(app.slug)
   }
 
@@ -115,12 +125,12 @@ export function AppCatalogPage() {
 
   // Calculate total apps count (respecting showDeprecated setting)
   const totalAppsCount = useMemo(() => {
-    let count = apps.length
+    let count = rootResources.length
     if (!filterState.showDeprecated) {
-      count = apps.filter((app) => !app.deprecated).length
+      count = rootResources.filter((app) => !app.deprecated).length
     }
     return count
-  }, [apps, filterState.showDeprecated])
+  }, [rootResources, filterState.showDeprecated])
 
   if (isLoadingApps) {
     return <div className="py-6 text-muted-foreground">Loading…</div>
@@ -140,7 +150,7 @@ export function AppCatalogPage() {
           totalCount={allCount}
           recentCount={recentCount}
           deprecatedCount={deprecatedCount}
-          apps={apps}
+          apps={rootResources}
         />
       </div>
 

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

@@ -1,8 +1,4 @@
-import type {
-  Group,
-  Person,
-  SubResource,
-} from '@igstack/app-catalog-backend-core'
+import type { Group, Person, Resource } from '@igstack/app-catalog-backend-core'
 
 export function getPersonBySlug(
   persons: Person[],
@@ -18,9 +14,16 @@ export function getGroupBySlug(
   return groups.find((g) => g.slug === slug)
 }
 
-export function getSubResourcesForApp(
-  subResources: SubResource[],
-  appSlug: string,
-): SubResource[] {
-  return subResources.filter((sr) => sr.appSlug === appSlug)
+export function getChildResources(
+  resources: Resource[],
+  parentSlug: string,
+): Resource[] {
+  return resources.filter((r) => r.parentSlug === parentSlug)
 }
+
+export function getRootResources(resources: Resource[]): Resource[] {
+  return resources.filter((r) => !r.parentSlug)
+}
+
+/** @deprecated Use getChildResources instead */
+export const getSubResourcesForApp = getChildResources

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

@@ -1,7 +1,4 @@
-import type {
-  AppForCatalog,
-  SubResource,
-} from '@igstack/app-catalog-backend-core'
+import type { Resource } from '@igstack/app-catalog-backend-core'
 
 export interface SearchMatch {
   /** Field where the match occurred */
@@ -19,12 +16,15 @@ export interface SearchMatch {
 }
 
 export interface SearchResult {
-  app: AppForCatalog
+  app: Resource
   match: SearchMatch
 }
 
 /**
- * Search and sort apps by relevance with highlighting support.
+ * Search and sort resources by relevance with highlighting support.
+ * Only root resources (no parentSlug) are scored and returned.
+ * Child resources (with parentSlug) contribute to their parent's score.
+ *
  * Priority order:
  * 0. Exact match in abbreviation
  * 1. Exact match in displayName
@@ -41,19 +41,21 @@ export interface SearchResult {
  * 12. Teams
  * 13. Description
  *
- * @param apps - Array of apps to search
+ * @param resources - Array of all resources (root + children)
  * @param searchQuery - Search query string
- * @returns Filtered and sorted array of apps with search results
+ * @returns Filtered and sorted array of root resources
  */
-export function searchApps(
-  apps: AppForCatalog[],
+export function searchResources(
+  resources: Resource[],
   searchQuery: string,
-  subResources?: SubResource[],
-): AppForCatalog[] {
+): Resource[] {
   const normalizedQuery = searchQuery.trim().toLowerCase()
 
+  // Separate root resources from children
+  const rootResources = resources.filter((r) => !r.parentSlug)
+
   if (normalizedQuery === '') {
-    return apps
+    return rootResources
   }
 
   // Split query into terms for multi-word matching (AND logic)
@@ -63,18 +65,18 @@ export function searchApps(
   const allTermsMatch = (text: string): boolean =>
     queryTerms.every((term) => text.includes(term))
 
-  // Build sub-resource lookup: appSlug -> SubResource[]
-  const subResourcesByApp = new Map<string, SubResource[]>()
-  if (subResources) {
-    for (const sr of subResources) {
-      const list = subResourcesByApp.get(sr.appSlug) ?? []
-      list.push(sr)
-      subResourcesByApp.set(sr.appSlug, list)
+  // Build children lookup: parentSlug -> Resource[]
+  const childrenByParent = new Map<string, Resource[]>()
+  for (const r of resources) {
+    if (r.parentSlug) {
+      const list = childrenByParent.get(r.parentSlug) ?? []
+      list.push(r)
+      childrenByParent.set(r.parentSlug, list)
     }
   }
 
-  // Filter and score apps
-  const scoredApps = apps
+  // Filter and score root resources
+  const scoredApps = rootResources
     .map((app): SearchResult | null => {
       const name = app.displayName.toLowerCase()
       const abbreviation = app.abbreviation?.toLowerCase() || ''
@@ -143,15 +145,15 @@ export function searchApps(
         return { app, match: { field: 'description', type: 'contains' } }
       }
 
-      // Check sub-resources (name, aliases, description) — supports multi-word queries
-      const appSubResources = subResourcesByApp.get(app.slug)
-      if (appSubResources) {
-        const subMatch = appSubResources.some(
-          (sr) =>
-            allTermsMatch(sr.displayName.toLowerCase()) ||
-            sr.aliases.some((a) => allTermsMatch(a.toLowerCase())) ||
-            (sr.description
-              ? allTermsMatch(sr.description.toLowerCase())
+      // Check child resources (name, aliases, description) — supports multi-word queries
+      const children = childrenByParent.get(app.slug)
+      if (children) {
+        const subMatch = children.some(
+          (r) =>
+            allTermsMatch(r.displayName.toLowerCase()) ||
+            (r.aliases ?? []).some((a) => allTermsMatch(a.toLowerCase())) ||
+            (r.description
+              ? allTermsMatch(r.description.toLowerCase())
               : false),
         )
         if (subMatch) {
@@ -259,3 +261,6 @@ export function highlightText(
 
   return segments
 }
+
+/** @deprecated Use searchResources instead */
+export const searchApps = searchResources