@igstack/app-catalog-frontend-core 0.13.3 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@igstack/app-catalog-frontend-core",
-  "version": "0.13.3",
+  "version": "0.14.0",
   "description": "Frontend core library for App Catalog",
   "homepage": "https://github.com/lislon/app-catalog",
   "repository": {
@@ -134,8 +134,8 @@
     "vite-plugin-static-copy": "^3.1.4",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^4.1.2",
-    "@igstack/app-catalog-backend-core": "0.13.3",
-    "@igstack/app-catalog-shared-core": "0.13.3"
+    "@igstack/app-catalog-shared-core": "0.14.0",
+    "@igstack/app-catalog-backend-core": "0.14.0"
   },
   "peerDependencies": {
     "react": "19.1.2",
@@ -144,7 +144,7 @@
     "vite": "^6.3.5",
     "vite-plugin-svgr": "^4.2.0"
   },
-  "gitHead": "5e900c4f7cda2501c01164155098fc3f46a58b5c",
+  "gitHead": "f7e30b3da50d80d10ed19ddd3be273329495bdcb",
   "scripts": {
     "build": "vite build",
     "build:lenient": "vite build --mode lenient",

package/src/__tests__/integration/appCatalog.integration.test.ts

@@ -328,4 +328,47 @@ describe('App Catalog Integration', () => {
       /(?<![\d])0(?![\d]).*clear filters/i,
     )
   })
+
+  it('highlights matched query text in search result app names (#57)', async () => {
+    const { ui } = await given(
+      magazine.custom(({ backendCfg }) => {
+        backendCfg.withApp({ displayName: 'Kubernetes Platform' })
+        backendCfg.withApp({ displayName: 'Other Tool' })
+      }),
+    )
+
+    await ui.catalog.search('kube')
+
+    await waitFor(() => {
+      const marks = document.querySelectorAll('mark')
+      const markTexts = [...marks].map((m) => String(m.textContent))
+      expect(markTexts.some((t) => t.toLowerCase().includes('kube'))).toBe(true)
+    })
+  })
+
+  it('clear (×) button appears when search has text and clears on click (#54)', async () => {
+    const { ui } = await given(magazine.full())
+
+    // Before typing: no clear button
+    expect(
+      document.querySelector('[aria-label="Clear search"]'),
+    ).not.toBeInTheDocument()
+
+    // After typing: clear button appears
+    await ui.catalog.search('jira')
+    await waitFor(() => {
+      expect(
+        document.querySelector('[aria-label="Clear search"]'),
+      ).toBeInTheDocument()
+    })
+
+    // Click × — input clears, button disappears
+    fireEvent.click(document.querySelector('[aria-label="Clear search"]')!)
+    await waitFor(() => {
+      expect(ui.catalog.getSearchInput().value).toBe('')
+      expect(
+        document.querySelector('[aria-label="Clear search"]'),
+      ).not.toBeInTheDocument()
+    })
+  })
 })

package/src/__tests__/integration/appDeepLink.integration.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { fireEvent, waitFor } from '@testing-library/react'
+import { fireEvent, screen, waitFor } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 
 import { given } from './harness/given'
@@ -45,6 +45,18 @@ describe('App deep-link routing', () => {
     expect(router.state.location.pathname).toBe('/')
   })
 
+  it('closes the detail panel when the × close button is clicked (#59)', async () => {
+    const { ui, router } = await given(magazine.full(), { initialRoute: '/' })
+    await ui.catalog.openApp('Jira')
+    await waitFor(() => expect(ui.catalog.isDetailPanelOpen()).toBe(true))
+    const closeBtn = screen.getByRole('button', { name: /^Close$/i })
+    fireEvent.click(closeBtn)
+    await waitFor(() => {
+      expect(ui.catalog.isDetailPanelOpen()).toBe(false)
+    })
+    expect(router.state.location.pathname).toBe('/')
+  })
+
   it('ignores legacy ?app= query param (no detail opens)', async () => {
     const { ui } = await given(magazine.full(), { initialRoute: '/?app=jira' })
     await waitFor(() => {

package/src/__tests__/integration/appFreshness.integration.test.ts

@@ -45,6 +45,21 @@ describe('App freshness line', () => {
     expect(screen.getByText(/may be out of date/i)).toBeInTheDocument()
   })
 
+  it('shows "Added" date before Sources when createdAt is present (#55)', async () => {
+    const { ui } = await given(
+      magazine.full(({ backendCfg }) => {
+        backendCfg.withApp({
+          slug: 'dated-app',
+          displayName: 'Dated App',
+          createdAt: iso(30 * DAY),
+        })
+      }),
+      { initialRoute: '/app/dated-app' },
+    )
+    await waitFor(() => expect(ui.catalog.isDetailPanelOpen()).toBe(true))
+    expect(screen.getByText(/Added/i)).toBeInTheDocument()
+  })
+
   it('shows no freshness line when the app was never scanned', async () => {
     const { ui } = await given(
       magazine.full(({ backendCfg }) => {

package/src/modules/appCatalog/ui/components/Highlight.tsx

@@ -0,0 +1,26 @@
+import { highlightText } from '../../utils/searchApps'
+
+/**
+ * Highlights all case-insensitive occurrences of `query` in `text`.
+ * Renders plain text when query is empty or has no match.
+ */
+export function Highlight({ text, query }: { text: string; query: string }) {
+  if (!query.trim()) return <>{text}</>
+  const segments = highlightText(text, query)
+  return (
+    <>
+      {segments.map((seg, i) =>
+        seg.highlight ? (
+          <mark
+            key={i}
+            className="bg-primary/15 text-primary rounded-[2px] px-[1px] font-semibold not-italic"
+          >
+            {seg.text}
+          </mark>
+        ) : (
+          seg.text
+        ),
+      )}
+    </>
+  )
+}

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

@@ -8,7 +8,15 @@ import {
   getCoreRowModel,
   useReactTable,
 } from '@tanstack/react-table'
-import { AppWindow, Clock, ExternalLink, Plus, Trash2, X } from 'lucide-react'
+import {
+  AppWindow,
+  CalendarPlus,
+  Clock,
+  ExternalLink,
+  Plus,
+  Trash2,
+  X,
+} from 'lucide-react'
 import React, { useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { cn } from '~/lib/utils'
@@ -356,26 +364,7 @@ export function AppDetails({
                   <span className="text-muted-foreground">—</span>
                 )}
               </div>
-              {/* Freshness date near the header (this is the same signal that
-                  drives "New this week"), so the date is visible in the card
-                  itself, not only in the muted footer. */}
-              {app.freshness?.lastCheckedAt && (
-                <div className="mt-1 px-3">
-                  <span
-                    className="inline-flex items-center gap-1 text-xs text-muted-foreground"
-                    title={app.freshness.lastCheckedAt}
-                  >
-                    <Clock className="size-3" />
-                    Updated {formatRelativeTime(app.freshness.lastCheckedAt)}
-                    {app.freshness.isStale && (
-                      <span className="italic opacity-75">
-                        {' '}
-                        · may be out of date
-                      </span>
-                    )}
-                  </span>
-                </div>
-              )}
+              {/* Updated/Added metadata moved to consolidated section before Sources (#55) */}
             </div>
           </div>
         </div>
@@ -536,6 +525,36 @@ export function AppDetails({
           </div>
         )}
 
+        {/* Metadata: Added / Updated */}
+        {(app.createdAt || app.freshness?.lastCheckedAt) && (
+          <div className="mt-6 flex flex-wrap gap-x-5 gap-y-1">
+            {app.createdAt && (
+              <span
+                className="inline-flex items-center gap-1 text-xs text-muted-foreground"
+                title={app.createdAt}
+              >
+                <CalendarPlus className="size-3" />
+                Added {formatRelativeTime(app.createdAt)}
+              </span>
+            )}
+            {app.freshness?.lastCheckedAt && (
+              <span
+                className="inline-flex items-center gap-1 text-xs text-muted-foreground"
+                title={app.freshness.lastCheckedAt}
+              >
+                <Clock className="size-3" />
+                Updated {formatRelativeTime(app.freshness.lastCheckedAt)}
+                {app.freshness.isStale && (
+                  <span className="italic opacity-75">
+                    {' '}
+                    · may be out of date
+                  </span>
+                )}
+              </span>
+            )}
+          </div>
+        )}
+
         {/* Sources */}
         <div className="mt-6">
           <h3 className="mb-2 text-sm font-medium">Sources</h3>

package/src/modules/appCatalog/ui/launcher/LauncherDetailPanel.tsx

@@ -1,4 +1,5 @@
 import type { Resource } from '@igstack/app-catalog-backend-core'
+import { X } from 'lucide-react'
 import { AppDetails } from '../grid/AppCatalogGrid'
 
 /**
@@ -39,6 +40,14 @@ export function LauncherDetailPanel({
         aria-label={`${app.displayName} details`}
         className="relative w-full max-w-[min(1120px,94vw)] my-auto rounded-[var(--radius)] border border-border bg-background shadow-2xl animate-in fade-in zoom-in-95 duration-200"
       >
+        <button
+          type="button"
+          aria-label="Close"
+          onClick={onClose}
+          className="absolute top-3 right-3 z-10 rounded-full p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+        >
+          <X className="size-4" />
+        </button>
         <div className="max-h-[85vh] overflow-y-auto px-6 py-5 sm:px-8 sm:py-7">
           <AppDetails
             app={app}

package/src/modules/appCatalog/ui/launcher/LauncherHome.tsx

@@ -1,5 +1,5 @@
 import type { Resource } from '@igstack/app-catalog-backend-core'
-import { ArrowUpRight, Search } from 'lucide-react'
+import { ArrowUpRight, Search, X } from 'lucide-react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { cn } from '~/lib/utils'
 import { useAppClickHistory } from '../../hooks/useAppClickHistory'
@@ -7,6 +7,7 @@ import { markdownToPlainText } from '../../utils/markdownToPlainText'
 import { AttributionFooter } from './AttributionFooter'
 import { ResourceIcon } from './ResourceIcon'
 import { searchResources } from '../../utils/searchApps'
+import { Highlight } from '../components/Highlight'
 
 /**
  * Adaptive-home discovery spine (issue #38, increment 1) — matches the
@@ -281,10 +282,10 @@ function SearchResultsList({
             <ResourceIcon app={app} size={40} />
             <span className="flex-1 min-w-0">
               <span className="block text-[14px] font-semibold truncate">
-                {app.displayName}
+                <Highlight text={app.displayName} query={searchValue} />
                 {app.abbreviation && app.abbreviation !== app.displayName && (
                   <span className="ml-1.5 text-[12px] font-normal text-muted-foreground">
-                    ({app.abbreviation})
+                    (<Highlight text={app.abbreviation} query={searchValue} />)
                   </span>
                 )}
               </span>
@@ -296,14 +297,18 @@ function SearchResultsList({
               {(() => {
                 const kids = matchedChildrenByParent.get(app.slug)
                 if (!kids || kids.length === 0) return null
-                const names = kids.map((k) => k.displayName)
-                const shown = names.slice(0, 3).join(', ')
-                const extra =
-                  names.length > 3 ? ` +${names.length - 3} more` : ''
+                const shown = kids.slice(0, 3)
+                const extra = kids.length > 3 ? ` +${kids.length - 3} more` : ''
                 return (
                   <span className="mt-0.5 block text-[12px] text-primary truncate">
                     Matched {kids.length} sub-resource
-                    {kids.length === 1 ? '' : 's'}: {shown}
+                    {kids.length === 1 ? '' : 's'}:{' '}
+                    {shown.map((k, idx) => (
+                      <span key={k.slug}>
+                        {idx > 0 && ', '}
+                        <Highlight text={k.displayName} query={searchValue} />
+                      </span>
+                    ))}
                     {extra}
                   </span>
                 )
@@ -433,7 +438,19 @@ export function LauncherHome({
               aria-label="Search apps"
               className="flex-1 bg-transparent border-0 outline-none text-[16px] text-foreground placeholder:text-muted-foreground"
             />
-            {!isSearching && (
+            {isSearching ? (
+              <button
+                type="button"
+                aria-label="Clear search"
+                onClick={() => {
+                  onSearchChange('')
+                  searchRef.current?.focus()
+                }}
+                className="shrink-0 rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
+              >
+                <X className="size-4" />
+              </button>
+            ) : (
               <kbd className="hidden sm:inline-flex items-center gap-0.5 text-[11px] text-muted-foreground/60 border border-muted-foreground/20 rounded px-1.5 py-0.5 font-mono shrink-0">
                 {typeof navigator !== 'undefined' &&
                 navigator.platform.includes('Mac')