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

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