@igstack/app-catalog-frontend-core 0.0.1

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

@@ -0,0 +1,89 @@
+import type { AppForCatalog } from '@igstack/app-catalog-backend-core'
+import type { ColumnDef } from '@tanstack/react-table'
+import {
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from '@tanstack/react-table'
+import { useMemo } from 'react'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '~/ui/table'
+import { getAppUrl } from './appCatalogUtils'
+
+export interface AppCatalogTableProps {
+  apps: Array<AppForCatalog>
+}
+
+export function AppCatalogTable({ apps }: AppCatalogTableProps) {
+  const columns = useMemo<Array<ColumnDef<AppForCatalog>>>(
+    () => [
+      {
+        slug: 'name',
+        header: 'App Name',
+        cell: ({ row }) => row.original.displayName,
+      },
+      {
+        slug: 'url',
+        header: 'URL',
+        cell: ({ row }) => getAppUrl(row.original),
+      },
+      {
+        slug: 'description',
+        header: 'Description',
+        cell: ({ row }) => (
+          <div className="max-w-md line-clamp-2">
+            {row.original.description}
+          </div>
+        ),
+      },
+    ],
+    [],
+  )
+
+  const table = useReactTable({
+    data: apps,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+  })
+
+  return (
+    <div className="w-full overflow-hidden rounded-md border border-border">
+      <Table>
+        <TableHeader className="bg-muted/30 text-muted-foreground">
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHead key={header.id} className="px-3">
+                  {header.isPlaceholder
+                    ? null
+                    : flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+
+        <TableBody>
+          {table.getRowModel().rows.map((row) => (
+            <TableRow key={row.id}>
+              {row.getVisibleCells().map((cell) => (
+                <TableCell key={cell.id} className="px-3 align-top">
+                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}

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

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

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

@@ -0,0 +1,54 @@
+import type { AppForCatalog } from '@igstack/app-catalog-backend-core'
+import React from 'react'
+
+export interface UseKeyboardNavigationProps {
+  apps: Array<AppForCatalog>
+  selectedAppSlug?: string
+  onAppClick?: (app: AppForCatalog) => void
+}
+
+export function useKeyboardNavigation({
+  apps,
+  selectedAppSlug,
+  onAppClick,
+}: UseKeyboardNavigationProps) {
+  const rowRefs = React.useRef<Map<string, HTMLTableRowElement>>(new Map())
+
+  // Keyboard navigation (ArrowUp/ArrowDown)
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return
+
+      // Prevent default scrolling behavior
+      event.preventDefault()
+
+      const currentIndex = selectedAppSlug
+        ? apps.findIndex((app) => app.slug === selectedAppSlug)
+        : -1
+
+      let nextIndex: number
+      if (event.key === 'ArrowDown') {
+        nextIndex =
+          currentIndex === -1 ? 0 : Math.min(currentIndex + 1, apps.length - 1)
+      } else {
+        nextIndex = currentIndex === -1 ? 0 : Math.max(currentIndex - 1, 0)
+      }
+
+      const nextApp = apps[nextIndex]
+      if (nextApp && nextApp.slug !== selectedAppSlug) {
+        onAppClick?.(nextApp)
+
+        // Scroll the newly selected row into view
+        const rowElement = rowRefs.current.get(nextApp.slug)
+        if (rowElement) {
+          rowElement.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        }
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [apps, selectedAppSlug, onAppClick])
+
+  return { rowRefs }
+}

package/src/modules/appCatalog/ui/layout/AppCatalogLayout.tsx

@@ -0,0 +1,57 @@
+import type { TRPCRouter } from '@igstack/app-catalog-backend-core'
+import type { QueryClient } from '@tanstack/react-query'
+import type { TRPCClient } from '@trpc/client'
+import { HomeIcon } from 'lucide-react'
+import { AppCatalogProvider } from '~/modules/appCatalog/context/AppCatalogContext'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbSeparator,
+} from '~/ui/breadcrumb'
+import { MainLayout } from '~/ui/layout/MainLayout'
+import { TopLevelProviders } from '~/ui/layout/TopLevelProviders'
+import { Link } from '~/ui/link'
+
+export interface AppCatalogLayoutProps {
+  children: React.ReactNode
+  queryClient: QueryClient
+  trpcClient: TRPCClient<TRPCRouter>
+}
+
+export function AppCatalogLayout({
+  children,
+  queryClient,
+  trpcClient,
+}: AppCatalogLayoutProps) {
+  return (
+    <TopLevelProviders queryClient={queryClient} trpcClient={trpcClient}>
+      <AppCatalogProvider>
+        <MainLayout>
+          <Breadcrumb className="pb-4">
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink asChild>
+                  <Link to={'/'} className="flex items-center gap-1">
+                    <HomeIcon className="size-4" />
+                    <span className="sr-only">Home</span>
+                  </Link>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+              <BreadcrumbSeparator />
+              <BreadcrumbItem>
+                <BreadcrumbLink asChild>
+                  <Link to="/catalog/apps">App Catalog</Link>
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <div className="flex flex-1 w-full justify-center min-h-0">
+            {children}
+          </div>
+        </MainLayout>
+      </AppCatalogProvider>
+    </TopLevelProviders>
+  )
+}

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

@@ -0,0 +1,142 @@
+import { useNavigate, useRouter, useSearch } from '@tanstack/react-router'
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import type { AppForCatalog } from '@igstack/app-catalog-backend-core'
+import { useAppCatalogContext } from '../../context/AppCatalogContext'
+import { AppCatalogGrid } from '../grid/AppCatalogGrid'
+
+import { Input } from '~/ui/input'
+
+export function AppCatalogPage() {
+  const navigate = useNavigate()
+  const router = useRouter()
+  const search = useSearch({ strict: false })
+  const { apps, isLoadingApps, tagsDefinitions } = useAppCatalogContext()
+  const [searchValue, setSearchValue] = useState('')
+
+  // Local state for app selection (source of truth)
+  const [selectedAppSlug, setSelectedAppSlug] = useState<string | undefined>()
+
+  const filterTag = search.filterTag
+
+  // Initialize from URL on mount (once only)
+  const isInitializedRef = useRef(false)
+  useEffect(() => {
+    if (!isInitializedRef.current) {
+      if (search.app) {
+        setSelectedAppSlug(search.app)
+      }
+      if (search.q) {
+        setSearchValue(search.q)
+      }
+      isInitializedRef.current = true
+    }
+  }, [search.app, search.q])
+
+  // Sync app selection state to URL (async side effect)
+  useEffect(() => {
+    // Don't sync until after initialization
+    if (!isInitializedRef.current) return
+    if (selectedAppSlug === search.app) return // Already in sync
+
+    const currentPath = router.state.location.pathname
+    navigate({
+      to: currentPath,
+      search: { ...search, app: selectedAppSlug },
+      replace: true, // Use replace to avoid polluting history
+    })
+  }, [selectedAppSlug, navigate, router.state.location.pathname, search])
+
+  // Sync search value state to URL (async side effect)
+  useEffect(() => {
+    // Don't sync until after initialization
+    if (!isInitializedRef.current) return
+
+    const normalizedSearchValue = searchValue.trim()
+    const urlSearchValue = search.q || ''
+
+    if (normalizedSearchValue === urlSearchValue) return // Already in sync
+
+    const currentPath = router.state.location.pathname
+    navigate({
+      to: currentPath,
+      search: {
+        ...search,
+        q: normalizedSearchValue || undefined, // Remove param if empty
+      },
+      replace: true, // Use replace to avoid polluting history
+    })
+  }, [searchValue, navigate, router.state.location.pathname, search])
+
+  const filteredApps = useMemo(() => {
+    const normalizedSearchValue = searchValue.trim().toLowerCase()
+
+    return apps
+      .filter((app) => {
+        if (normalizedSearchValue === '') {
+          return true
+        }
+        const name = app.displayName.toLowerCase() || ''
+        const slug = app.slug.toLowerCase() || ''
+        const description = app.description?.toLowerCase() || ''
+        const tags = app.tags?.join(' ').toLowerCase() || ''
+
+        return (
+          name.includes(normalizedSearchValue) ||
+          slug.includes(normalizedSearchValue) ||
+          description.includes(normalizedSearchValue) ||
+          tags.includes(normalizedSearchValue)
+        )
+      })
+      .filter((app) => {
+        return (
+          filterTag === undefined ||
+          app.tags?.some((tag) => tag.toLowerCase() === filterTag.toLowerCase())
+        )
+      })
+  }, [apps, searchValue, filterTag])
+
+  const handleAppClick = (app: AppForCatalog) => {
+    setSelectedAppSlug(app.slug)
+  }
+
+  if (isLoadingApps) {
+    return <div className="py-6 text-muted-foreground">Loading…</div>
+  }
+
+  // Use first tag definition for grouping
+  const groupingDefinition = tagsDefinitions[0]
+
+  return (
+    <div className="flex flex-col flex-1 min-h-0">
+      <div className="pb-4 shrink-0">
+        <div className="flex items-start justify-between gap-4 pb-4">
+          <div>
+            <div className="font-medium text-2xl">App Catalog</div>
+            <div className="text-sm text-muted-foreground">
+              {filteredApps.length} apps available
+            </div>
+          </div>
+        </div>
+
+        <div className="w-full">
+          <Input
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.target.value)}
+            placeholder="Search apps by name, description, or tags…"
+            aria-label="Search apps"
+          />
+        </div>
+      </div>
+
+      <div className="flex-1 min-h-0">
+        <AppCatalogGrid
+          apps={filteredApps}
+          selectedAppSlug={selectedAppSlug}
+          groupingDefinition={groupingDefinition}
+          onAppClick={handleAppClick}
+        />
+      </div>
+    </div>
+  )
+}