@igstack/app-catalog-frontend-core 0.4.0 → 0.6.0

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

@@ -1,4 +1,5 @@
 import type { Resource } from '@igstack/app-catalog-backend-core'
+import { useNavigate } from '@tanstack/react-router'
 import { X } from 'lucide-react'
 import { useDeferredValue, useEffect, useMemo, useState } from 'react'
 import { Button } from '~/ui/button'
@@ -13,25 +14,22 @@ import {
 import { useAppCatalogContext } from '../../context/AppCatalogContext'
 import { useAppClickHistory } from '../../hooks/useAppClickHistory'
 import { useAppCounts } from '../../hooks/useAppCounts'
-import { useUrlSyncedState } from '../../hooks/useUrlSyncedState'
 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() {
+export function AppCatalogPage({
+  selectedSlug,
+}: { selectedSlug?: string } = {}) {
   const { resources, isLoadingApps, tagsDefinitions } = useAppCatalogContext()
   const { state: filterState, actions } = useAppCatalogFilters()
   const { getTopApps } = useAppClickHistory()
+  const navigate = useNavigate()
 
-  // URL-synced state
-  const [selectedAppSlug, setSelectedAppSlug] = useUrlSyncedState<
-    string | undefined
-  >({
-    key: 'app',
-    defaultValue: undefined,
-  })
+  // Selected app comes from the route path (/app/<slug>); undefined = nothing open
+  const selectedAppSlug = selectedSlug
 
   // Search value from context (URL-synced in AppCatalogFiltersContext)
   const searchValue = filterState.searchValue
@@ -108,19 +106,23 @@ export function AppCatalogPage() {
 
   // Auto-open details when only 1 result
   useEffect(() => {
-    if (filteredApps.length === 1 && filteredApps[0]) {
-      setSelectedAppSlug(filteredApps[0].slug)
+    if (filteredApps.length === 1 && filteredApps[0] && !selectedAppSlug) {
+      void navigate({
+        to: '/app/$slug',
+        params: { slug: filteredApps[0].slug },
+        replace: true,
+      })
     }
-  }, [filteredApps, setSelectedAppSlug])
+  }, [filteredApps, selectedAppSlug, navigate])
 
   const handleAppClick = (app: Resource) => {
-    setSelectedAppSlug(app.slug)
+    void navigate({ to: '/app/$slug', params: { slug: app.slug } })
   }
 
   const handleClearFilters = () => {
     setSearchValue('')
     actions.clearAllFilters()
-    setSelectedAppSlug(undefined)
+    void navigate({ to: '/' })
   }
 
   // Calculate total apps count (respecting showDeprecated setting)
@@ -174,7 +176,7 @@ export function AppCatalogPage() {
                   variant="outline"
                   onClick={() => {
                     setSearchValue('')
-                    setSelectedAppSlug(undefined)
+                    void navigate({ to: '/' })
                   }}
                   className="gap-2"
                 >
@@ -190,6 +192,7 @@ export function AppCatalogPage() {
             selectedAppSlug={selectedAppSlug}
             groupingDefinition={groupingDefinition}
             onAppClick={handleAppClick}
+            onClosePanel={() => void navigate({ to: '/' })}
             hasSearch={!!deferredSearchValue}
             searchQuery={deferredSearchValue}
             totalAppsCount={totalAppsCount}

package/src/routeTree.gen.ts

@@ -13,6 +13,7 @@ import { Route as LayoutRouteImport } from './routes/_layout'
 import { Route as LayoutIndexRouteImport } from './routes/_layout/index'
 import { Route as AuthCallbackRouteImport } from './routes/auth.callback'
 import { Route as LayoutLoginRouteImport } from './routes/_layout/login'
+import { Route as LayoutAppSlugRouteImport } from './routes/_layout/app.$slug'
 import { Route as LayoutCatalogAppsIndexRouteImport } from './routes/_layout/catalog.apps.index'
 
 const LayoutRoute = LayoutRouteImport.update({
@@ -34,6 +35,11 @@ const LayoutLoginRoute = LayoutLoginRouteImport.update({
   path: '/login',
   getParentRoute: () => LayoutRoute,
 } as any)
+const LayoutAppSlugRoute = LayoutAppSlugRouteImport.update({
+  id: '/app/$slug',
+  path: '/app/$slug',
+  getParentRoute: () => LayoutRoute,
+} as any)
 const LayoutCatalogAppsIndexRoute = LayoutCatalogAppsIndexRouteImport.update({
   id: '/catalog/apps/',
   path: '/catalog/apps/',
@@ -44,12 +50,14 @@ export interface FileRoutesByFullPath {
   '/': typeof LayoutIndexRoute
   '/login': typeof LayoutLoginRoute
   '/auth/callback': typeof AuthCallbackRoute
+  '/app/$slug': typeof LayoutAppSlugRoute
   '/catalog/apps/': typeof LayoutCatalogAppsIndexRoute
 }
 export interface FileRoutesByTo {
   '/login': typeof LayoutLoginRoute
   '/auth/callback': typeof AuthCallbackRoute
   '/': typeof LayoutIndexRoute
+  '/app/$slug': typeof LayoutAppSlugRoute
   '/catalog/apps': typeof LayoutCatalogAppsIndexRoute
 }
 export interface FileRoutesById {
@@ -58,19 +66,21 @@ export interface FileRoutesById {
   '/_layout/login': typeof LayoutLoginRoute
   '/auth/callback': typeof AuthCallbackRoute
   '/_layout/': typeof LayoutIndexRoute
+  '/_layout/app/$slug': typeof LayoutAppSlugRoute
   '/_layout/catalog/apps/': typeof LayoutCatalogAppsIndexRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
-  fullPaths: '/' | '/login' | '/auth/callback' | '/catalog/apps/'
+  fullPaths: '/' | '/login' | '/auth/callback' | '/app/$slug' | '/catalog/apps/'
   fileRoutesByTo: FileRoutesByTo
-  to: '/login' | '/auth/callback' | '/' | '/catalog/apps'
+  to: '/login' | '/auth/callback' | '/' | '/app/$slug' | '/catalog/apps'
   id:
     | '__root__'
     | '/_layout'
     | '/_layout/login'
     | '/auth/callback'
     | '/_layout/'
+    | '/_layout/app/$slug'
     | '/_layout/catalog/apps/'
   fileRoutesById: FileRoutesById
 }
@@ -109,6 +119,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LayoutLoginRouteImport
       parentRoute: typeof LayoutRoute
     }
+    '/_layout/app/$slug': {
+      id: '/_layout/app/$slug'
+      path: '/app/$slug'
+      fullPath: '/app/$slug'
+      preLoaderRoute: typeof LayoutAppSlugRouteImport
+      parentRoute: typeof LayoutRoute
+    }
     '/_layout/catalog/apps/': {
       id: '/_layout/catalog/apps/'
       path: '/catalog/apps'
@@ -122,12 +139,14 @@ declare module '@tanstack/react-router' {
 interface LayoutRouteChildren {
   LayoutLoginRoute: typeof LayoutLoginRoute
   LayoutIndexRoute: typeof LayoutIndexRoute
+  LayoutAppSlugRoute: typeof LayoutAppSlugRoute
   LayoutCatalogAppsIndexRoute: typeof LayoutCatalogAppsIndexRoute
 }
 
 const LayoutRouteChildren: LayoutRouteChildren = {
   LayoutLoginRoute: LayoutLoginRoute,
   LayoutIndexRoute: LayoutIndexRoute,
+  LayoutAppSlugRoute: LayoutAppSlugRoute,
   LayoutCatalogAppsIndexRoute: LayoutCatalogAppsIndexRoute,
 }
 

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

@@ -0,0 +1,23 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { appCatalogRouteLoader } from '~/modules/appCatalog/routeLoader'
+import { AppCatalogLayout } from '~/modules/appCatalog/ui/layout/AppCatalogLayout'
+import { AppCatalogPage } from '~/modules/appCatalog/ui/pages/AppCatalogPage'
+
+export const Route = createFileRoute('/_layout/app/$slug')({
+  component: RouteComponent,
+  async loader() {
+    const appCatalogLoader = await appCatalogRouteLoader()
+    return { appCatalogLoader }
+  },
+})
+
+function RouteComponent() {
+  const { queryClient, trpcClient } = Route.useRouteContext()
+  const { slug } = Route.useParams()
+
+  return (
+    <AppCatalogLayout queryClient={queryClient} trpcClient={trpcClient}>
+      <AppCatalogPage selectedSlug={slug} />
+    </AppCatalogLayout>
+  )
+}

package/src/routes/_layout/index.tsx

@@ -5,7 +5,6 @@ import { AppCatalogLayout } from '~/modules/appCatalog/ui/layout/AppCatalogLayou
 import { AppCatalogPage } from '~/modules/appCatalog/ui/pages/AppCatalogPage'
 
 const searchSchema = z.object({
-  app: z.string().optional(),
   filterTag: z.string().optional(),
 })
 

package/dist/esm/modules/appCatalog/ui/components/AppDetailModal.d.ts

@@ -1,7 +0,0 @@
-import { Resource } from '@igstack/app-catalog-backend-core';
-export interface AppDetailModalProps {
-    app: Resource;
-    isOpen: boolean;
-    onClose: () => void;
-}
-export declare function AppDetailModal({ app, isOpen, onClose }: AppDetailModalProps): import("react/jsx-runtime").JSX.Element | null;

package/src/__tests__/modules/appCatalog/ScreenshotPreview.test.tsx

@@ -1,63 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-import '@testing-library/jest-dom/vitest'
-
-import type { Resource } from '@igstack/app-catalog-backend-core'
-import { AppDetailModal } from '~/modules/appCatalog/ui/components/AppDetailModal'
-import { AppCatalogContext } from '~/modules/appCatalog/context/AppCatalogContext'
-import type { AppCatalogContextIface } from '~/modules/appCatalog/context/AppCatalogContext'
-
-// Minimal context value — ScreenshotPreview doesn't use context directly,
-// but AccessSection (sibling in AppDetailModal) does.
-const minimalContext: AppCatalogContextIface = {
-  resources: [],
-  isLoadingApps: false,
-  tagsDefinitions: [],
-  approvalMethods: [],
-  persons: [],
-  groups: [],
-}
-
-function renderWithContext(app: Resource) {
-  return render(
-    <AppCatalogContext value={minimalContext}>
-      <AppDetailModal app={app} isOpen={true} onClose={() => {}} />
-    </AppCatalogContext>,
-  )
-}
-
-function makeApp(screenshotIds: string[]): Resource {
-  return {
-    id: 'app-1',
-    slug: 'test-app',
-    displayName: 'Test App',
-    screenshotIds,
-  }
-}
-
-// Task 2.2 — unit test for thumbnail size parameter
-// Requirements: 1.1, 1.3
-describe('ScreenshotPreview thumbnail URLs', () => {
-  it('appends ?size=600 to each thumbnail src', () => {
-    const ids = ['abc123', 'def456', 'ghi789']
-    renderWithContext(makeApp(ids))
-
-    const imgs = screen.getAllByRole('img', { name: /screenshot/i })
-    for (const [i, id] of ids.entries()) {
-      expect(imgs[i]).toHaveAttribute('src', `/api/screenshots/${id}?size=600`)
-    }
-  })
-
-  it('renders one thumbnail per screenshot ID', () => {
-    const ids = ['id-1', 'id-2', 'id-3']
-    renderWithContext(makeApp(ids))
-
-    const imgs = screen.getAllByRole('img', { name: /screenshot/i })
-    expect(imgs).toHaveLength(ids.length)
-  })
-
-  it('shows placeholder when screenshotIds is empty', () => {
-    renderWithContext(makeApp([]))
-    expect(screen.getByText(/no screenshots available/i)).toBeInTheDocument()
-  })
-})

package/src/__tests__/modules/gallery/EscapeDismissal.integration.test.tsx

@@ -1,118 +0,0 @@
-import { act, fireEvent, render, screen, waitFor } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
-import '@testing-library/jest-dom/vitest'
-
-import type { Resource } from '@igstack/app-catalog-backend-core'
-import { AppDetailModal } from '~/modules/appCatalog/ui/components/AppDetailModal'
-import { AppCatalogContext } from '~/modules/appCatalog/context/AppCatalogContext'
-import type { AppCatalogContextIface } from '~/modules/appCatalog/context/AppCatalogContext'
-
-// Task 3.3 — integration test for full Escape dismissal chain
-// Requirements: 6.7
-// Chain: Fullscreen_View → Gallery_Dialog → App_Card
-// Each Escape press dismisses only the innermost active layer.
-
-const minimalContext: AppCatalogContextIface = {
-  resources: [],
-  isLoadingApps: false,
-  tagsDefinitions: [],
-  approvalMethods: [],
-  persons: [],
-  groups: [],
-}
-
-function makeApp(): Resource {
-  return {
-    id: 'app-1',
-    slug: 'test-app',
-    displayName: 'Test App',
-    screenshotIds: ['screenshot-1', 'screenshot-2'],
-  }
-}
-
-function pressEscape() {
-  fireEvent.keyDown(document, {
-    key: 'Escape',
-    bubbles: true,
-    cancelable: true,
-  })
-}
-
-describe('Escape key — layered dismissal chain (integration)', () => {
-  it('Escape dismisses layers one at a time: Fullscreen → Gallery → App Card', async () => {
-    const onClose = vi.fn()
-    const app = makeApp()
-
-    render(
-      <AppCatalogContext value={minimalContext}>
-        <AppDetailModal app={app} isOpen={true} onClose={onClose} />
-      </AppCatalogContext>,
-    )
-
-    // App card is open — modal content should be visible
-    expect(screen.getByText('Test App')).toBeInTheDocument()
-
-    // Step 1: Open the gallery by clicking a thumbnail
-    const thumbnail = screen.getAllByRole('button', {
-      name: /screenshot 1/i,
-    })[0]
-    await act(async () => {
-      fireEvent.click(thumbnail!)
-    })
-
-    // Gallery dialog should now be open (Radix renders into a portal)
-    await waitFor(() => {
-      expect(document.querySelector('[role="dialog"]')).toBeInTheDocument()
-    })
-
-    // Step 2: Enter fullscreen by clicking the first active gallery image
-    // Gallery images have alt "Test App screenshot" (without index number)
-    const galleryImgs = document.querySelectorAll(
-      '[role="dialog"] img[alt="Test App screenshot"]',
-    )
-    expect(galleryImgs.length).toBeGreaterThan(0)
-    await act(async () => {
-      fireEvent.click(galleryImgs[0]!)
-    })
-
-    // Fullscreen overlay should be visible
-    await waitFor(() => {
-      expect(
-        document.querySelector('[aria-label="Fullscreen view"]'),
-      ).toBeInTheDocument()
-    })
-
-    // --- First Escape: exits fullscreen, gallery stays open, app card stays open ---
-    await act(async () => {
-      pressEscape()
-    })
-
-    await waitFor(() => {
-      expect(
-        document.querySelector('[aria-label="Fullscreen view"]'),
-      ).not.toBeInTheDocument()
-    })
-    // Gallery dialog still present
-    expect(document.querySelector('[role="dialog"]')).toBeInTheDocument()
-    // App card still open (onClose not called)
-    expect(onClose).not.toHaveBeenCalled()
-
-    // --- Second Escape: closes gallery dialog, app card stays open ---
-    await act(async () => {
-      pressEscape()
-    })
-
-    await waitFor(() => {
-      expect(document.querySelector('[role="dialog"]')).not.toBeInTheDocument()
-    })
-    // App card still open (onClose not called yet)
-    expect(onClose).not.toHaveBeenCalled()
-
-    // --- Third Escape: closes app card ---
-    await act(async () => {
-      pressEscape()
-    })
-
-    expect(onClose).toHaveBeenCalledTimes(1)
-  })
-})