@igstack/app-catalog-frontend-core 6.10.3 → 6.11.0

package/src/modules/communityTools/ui/ToolSearch.tsx

@@ -0,0 +1,111 @@
+import { Search, X } from 'lucide-react'
+import { useEffect, useRef } from 'react'
+
+const KBD =
+  'shrink-0 rounded-[5px] border border-b-2 border-border bg-card px-1.5 py-px text-[11px] font-semibold text-muted-foreground'
+
+function isTypingTarget(target: EventTarget | null): boolean {
+  return (
+    target instanceof HTMLElement &&
+    (target.isContentEditable ||
+      target.tagName === 'INPUT' ||
+      target.tagName === 'TEXTAREA' ||
+      target.tagName === 'SELECT')
+  )
+}
+
+/**
+ * The community search box. It has focus when the page opens and `/` brings it
+ * back from anywhere. Esc clears it; a second Esc, on an empty box, leaves it.
+ * The arrow keys and Enter belong to the results, so they go to `onKey`.
+ */
+export function ToolSearch({
+  value,
+  onChange,
+  resultCount,
+  onKey,
+  resultsId,
+  activeDescendant,
+}: {
+  value: string
+  onChange: (value: string) => void
+  resultCount: number
+  onKey: (e: React.KeyboardEvent<HTMLInputElement>) => void
+  /** The results grid, while there are results to move through. */
+  resultsId?: string
+  /** The selected result's id: the option ↑↓ move and Enter opens. */
+  activeDescendant?: string
+}) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const searching = value.trim() !== ''
+
+  useEffect(() => {
+    const onSlash = (e: KeyboardEvent) => {
+      if (e.key !== '/' || isTypingTarget(e.target)) return
+      e.preventDefault()
+      inputRef.current?.focus()
+    }
+    document.addEventListener('keydown', onSlash)
+    return () => document.removeEventListener('keydown', onSlash)
+  }, [])
+
+  const clear = () => {
+    onChange('')
+    inputRef.current?.focus()
+  }
+
+  return (
+    <div
+      data-testid="tool-search"
+      className="flex h-[50px] min-w-0 flex-1 items-center gap-[11px] rounded-full border border-border bg-card px-4 text-muted-foreground transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-4 focus-within:ring-ring/20"
+    >
+      <Search aria-hidden="true" className="size-[19px] shrink-0" />
+      <input
+        ref={inputRef}
+        type="text"
+        value={value}
+        autoFocus
+        autoComplete="off"
+        spellCheck={false}
+        aria-label="Search community tools"
+        role="combobox"
+        aria-haspopup="grid"
+        aria-autocomplete="list"
+        aria-expanded={resultsId !== undefined}
+        aria-controls={resultsId}
+        aria-activedescendant={activeDescendant}
+        placeholder="Type anything you remember: a word, the author, part of the address"
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') {
+            e.preventDefault()
+            e.stopPropagation()
+            if (value) onChange('')
+            else e.currentTarget.blur()
+            return
+          }
+          onKey(e)
+        }}
+        className="min-w-0 flex-1 truncate border-0 bg-transparent text-[15.5px] text-foreground outline-none placeholder:text-muted-foreground"
+      />
+      {searching ? (
+        <>
+          <span className="shrink-0 text-[13px] font-semibold">
+            {resultCount === 1 ? '1 tool' : `${resultCount} tools`}
+          </span>
+          <button
+            type="button"
+            aria-label="Clear search"
+            onClick={clear}
+            className="shrink-0 rounded-full p-1 hover:bg-accent hover:text-foreground"
+          >
+            <X aria-hidden="true" className="size-4" />
+          </button>
+          <kbd className={KBD}>Esc</kbd>
+        </>
+      ) : (
+        <kbd className={KBD}>/</kbd>
+      )}
+    </div>
+  )
+}

package/src/modules/communityTools/useCommunityTools.ts

@@ -0,0 +1,146 @@
+import type { CommunityTool } from '@igstack/app-catalog-shared-core'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useCallback, useMemo, useState } from 'react'
+import { useTRPC } from '~/api/infra/trpc'
+import { useAppCatalogContext } from '~/modules/appCatalog/context/AppCatalogContext'
+import { useAuth } from '~/modules/auth'
+import { withLike } from './likedBy'
+
+/**
+ * Everything the community page reads, and the pin writes. Pins
+ * belong to the signed-in user, so they are not asked for until there is one.
+ */
+export function useCommunityTools() {
+  const trpc = useTRPC()
+  const queryClient = useQueryClient()
+  const { isAuthenticated, isLoading: isAuthLoading } = useAuth()
+  const { resources } = useAppCatalogContext()
+
+  const list = useQuery(trpc.communityTools.list.queryOptions())
+  const pins = useQuery(
+    trpc.communityTools.pins.queryOptions(undefined, {
+      enabled: isAuthenticated,
+    }),
+  )
+
+  /** Display names of official apps by slug, for app tags. */
+  const appNames = useMemo(
+    () => Object.fromEntries(resources.map((r) => [r.slug, r.displayName])),
+    [resources],
+  )
+
+  const pinsKey = trpc.communityTools.pins.queryKey()
+  const refreshPins = () => queryClient.invalidateQueries({ queryKey: pinsKey })
+
+  // The star and the shelf change at once; a failed save puts them back.
+  const optimisticPins = (
+    change: (old: CommunityTool[], slug: string) => CommunityTool[],
+  ) => ({
+    onMutate: async ({ slug }: { slug: string }) => {
+      await queryClient.cancelQueries({ queryKey: pinsKey })
+      const previous = queryClient.getQueryData<CommunityTool[]>(pinsKey)
+      queryClient.setQueryData<CommunityTool[]>(pinsKey, (old) =>
+        old ? change(old, slug) : old,
+      )
+      return { previous }
+    },
+    onError: (
+      _error: unknown,
+      _input: { slug: string },
+      context: { previous?: CommunityTool[] } | undefined,
+    ) => {
+      queryClient.setQueryData(pinsKey, context?.previous)
+    },
+    // Not awaited: the pin is saved once the server answers; the refetch
+    // behind it only confirms what the star already shows.
+    onSettled: () => {
+      void refreshPins()
+    },
+  })
+  const pin = useMutation(
+    trpc.communityTools.pin.mutationOptions(
+      optimisticPins((old, slug) => {
+        const tool = list.data?.find((t) => t.slug === slug)
+        return tool && !old.some((t) => t.slug === slug) ? [...old, tool] : old
+      }),
+    ),
+  )
+  const unpin = useMutation(
+    trpc.communityTools.unpin.mutationOptions(
+      optimisticPins((old, slug) => old.filter((t) => t.slug !== slug)),
+    ),
+  )
+  /** The tool whose pin is being saved, if any. */
+  const pinBusySlug = pin.isPending
+    ? pin.variables.slug
+    : unpin.isPending
+      ? unpin.variables.slug
+      : undefined
+  const reorder = useMutation(
+    trpc.communityTools.reorderPins.mutationOptions({
+      onMutate: ({ slugs }) => {
+        // The tile moves at once; the server catches up behind it.
+        queryClient.setQueryData<CommunityTool[]>(pinsKey, (old) =>
+          old ? slugs.flatMap((s) => old.find((t) => t.slug === s) ?? []) : old,
+        )
+      },
+      onSettled: refreshPins,
+    }),
+  )
+
+  // My likes show at once, as an overlay on the tools as fetched. The feed
+  // ranks from the fetched tools, so a like changes its own count and never
+  // moves a row out from under the pointer. Settling marks the list stale
+  // without refetching it: it re-ranks on the next refocus or remount.
+  const [myLikes, setMyLikes] = useState<ReadonlyMap<string, boolean>>(
+    () => new Map(),
+  )
+  const setMyLike = (slug: string, liked: boolean | undefined) =>
+    setMyLikes((prev) => {
+      const next = new Map(prev)
+      if (liked === undefined) next.delete(slug)
+      else next.set(slug, liked)
+      return next
+    })
+  const likeOptions = (liked: boolean) => ({
+    onMutate: ({ slug }: { slug: string }) => setMyLike(slug, liked),
+    onError: (_error: unknown, { slug }: { slug: string }) =>
+      setMyLike(slug, undefined),
+    onSettled: () => {
+      void queryClient.invalidateQueries({
+        queryKey: trpc.communityTools.list.queryKey(),
+        refetchType: 'none',
+      })
+      void refreshPins()
+    },
+  })
+  const like = useMutation(
+    trpc.communityTools.like.mutationOptions(likeOptions(true)),
+  )
+  const unlike = useMutation(
+    trpc.communityTools.unlike.mutationOptions(likeOptions(false)),
+  )
+  /** The tool with my latest like or unlike, saved or still saving. */
+  const withMyLike = useCallback(
+    (tool: CommunityTool) => {
+      const mine = myLikes.get(tool.slug)
+      return mine === undefined ? tool : withLike(tool, mine)
+    },
+    [myLikes],
+  )
+
+  return {
+    list,
+    pins,
+    appNames,
+    isAuthenticated,
+    isAuthLoading,
+    pin,
+    unpin,
+    pinBusySlug,
+    reorder,
+    like,
+    unlike,
+    withMyLike,
+  }
+}

package/src/modules/communityTools/useCommunityToolsConfig.ts

@@ -0,0 +1,26 @@
+import type { TRPCRouter } from '@igstack/app-catalog-backend-core'
+import { useQuery } from '@tanstack/react-query'
+import { createTRPCOptionsProxy } from '@trpc/tanstack-react-query'
+import { useMemo } from 'react'
+import type { AcRouterContext } from '~/types/types'
+
+/**
+ * The feature switch, read with the route context's clients, for the route
+ * above the layout's providers. Same query key as the header's, so it is one
+ * request. Here and not in the route file: a deployment compiles the core's
+ * route files from its own tree, where these packages are other copies.
+ */
+export function useCommunityToolsConfig({
+  queryClient,
+  trpcClient,
+}: Pick<AcRouterContext, 'queryClient' | 'trpcClient'>) {
+  const options = useMemo(
+    () =>
+      createTRPCOptionsProxy<TRPCRouter>({
+        client: trpcClient,
+        queryClient,
+      }).communityTools.config.queryOptions(),
+    [queryClient, trpcClient],
+  )
+  return useQuery(options, queryClient).data
+}

package/src/modules/communityTools/useTimeUp.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react'
+
+/**
+ * True once `ms` have passed since `key` was first shown, false until then. A
+ * new key starts the wait again. The card's cap on waiting for a screenshot.
+ */
+export function useTimeUp(key: string, ms: number): boolean {
+  const [upFor, setUpFor] = useState<string | null>(null)
+  useEffect(() => {
+    const timer = setTimeout(() => setUpFor(key), ms)
+    return () => clearTimeout(timer)
+  }, [key, ms])
+  return upFor === key
+}

package/src/routeTree.gen.ts

@@ -11,11 +11,13 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as LayoutRouteImport } from './routes/_layout'
 import { Route as LayoutIndexRouteImport } from './routes/_layout/index'
+import { Route as LayoutCommunityRouteImport } from './routes/_layout/community'
 import { Route as LayoutLoginRouteImport } from './routes/_layout/login'
 import { Route as LayoutMcpRouteImport } from './routes/_layout/mcp'
 import { Route as LayoutServiceDesksRouteImport } from './routes/_layout/service-desks'
 import { Route as AuthCallbackRouteImport } from './routes/auth.callback'
 import { Route as LayoutAppSlugRouteImport } from './routes/_layout/app.$slug'
+import { Route as LayoutCommunitySlugRouteImport } from './routes/_layout/community.$slug'
 import { Route as LayoutCatalogAppsIndexRouteImport } from './routes/_layout/catalog.apps.index'
 import { Route as LayoutAppSlugSubSubSlugRouteImport } from './routes/_layout/app.$slug_.sub.$subSlug'
 
@@ -28,6 +30,11 @@ const LayoutIndexRoute = LayoutIndexRouteImport.update({
   path: '/',
   getParentRoute: () => LayoutRoute,
 } as any)
+const LayoutCommunityRoute = LayoutCommunityRouteImport.update({
+  id: '/community',
+  path: '/community',
+  getParentRoute: () => LayoutRoute,
+} as any)
 const LayoutLoginRoute = LayoutLoginRouteImport.update({
   id: '/login',
   path: '/login',
@@ -53,6 +60,11 @@ const LayoutAppSlugRoute = LayoutAppSlugRouteImport.update({
   path: '/app/$slug',
   getParentRoute: () => LayoutRoute,
 } as any)
+const LayoutCommunitySlugRoute = LayoutCommunitySlugRouteImport.update({
+  id: '/$slug',
+  path: '/$slug',
+  getParentRoute: () => LayoutCommunityRoute,
+} as any)
 const LayoutCatalogAppsIndexRoute = LayoutCatalogAppsIndexRouteImport.update({
   id: '/catalog/apps/',
   path: '/catalog/apps/',
@@ -66,33 +78,39 @@ const LayoutAppSlugSubSubSlugRoute = LayoutAppSlugSubSubSlugRouteImport.update({
 
 export interface FileRoutesByFullPath {
   '/': typeof LayoutIndexRoute
+  '/community': typeof LayoutCommunityRouteWithChildren
   '/login': typeof LayoutLoginRoute
   '/mcp': typeof LayoutMcpRoute
   '/service-desks': typeof LayoutServiceDesksRoute
   '/auth/callback': typeof AuthCallbackRoute
   '/app/$slug': typeof LayoutAppSlugRoute
+  '/community/$slug': typeof LayoutCommunitySlugRoute
   '/catalog/apps/': typeof LayoutCatalogAppsIndexRoute
   '/app/$slug/sub/$subSlug': typeof LayoutAppSlugSubSubSlugRoute
 }
 export interface FileRoutesByTo {
+  '/community': typeof LayoutCommunityRouteWithChildren
   '/login': typeof LayoutLoginRoute
   '/mcp': typeof LayoutMcpRoute
   '/service-desks': typeof LayoutServiceDesksRoute
   '/auth/callback': typeof AuthCallbackRoute
   '/': typeof LayoutIndexRoute
   '/app/$slug': typeof LayoutAppSlugRoute
+  '/community/$slug': typeof LayoutCommunitySlugRoute
   '/catalog/apps': typeof LayoutCatalogAppsIndexRoute
   '/app/$slug/sub/$subSlug': typeof LayoutAppSlugSubSubSlugRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
   '/_layout': typeof LayoutRouteWithChildren
+  '/_layout/community': typeof LayoutCommunityRouteWithChildren
   '/_layout/login': typeof LayoutLoginRoute
   '/_layout/mcp': typeof LayoutMcpRoute
   '/_layout/service-desks': typeof LayoutServiceDesksRoute
   '/auth/callback': typeof AuthCallbackRoute
   '/_layout/': typeof LayoutIndexRoute
   '/_layout/app/$slug': typeof LayoutAppSlugRoute
+  '/_layout/community/$slug': typeof LayoutCommunitySlugRoute
   '/_layout/catalog/apps/': typeof LayoutCatalogAppsIndexRoute
   '/_layout/app/$slug_/sub/$subSlug': typeof LayoutAppSlugSubSubSlugRoute
 }
@@ -100,32 +118,38 @@ export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
   fullPaths:
     | '/'
+    | '/community'
     | '/login'
     | '/mcp'
     | '/service-desks'
     | '/auth/callback'
     | '/app/$slug'
+    | '/community/$slug'
     | '/catalog/apps/'
     | '/app/$slug/sub/$subSlug'
   fileRoutesByTo: FileRoutesByTo
   to:
+    | '/community'
     | '/login'
     | '/mcp'
     | '/service-desks'
     | '/auth/callback'
     | '/'
     | '/app/$slug'
+    | '/community/$slug'
     | '/catalog/apps'
     | '/app/$slug/sub/$subSlug'
   id:
     | '__root__'
     | '/_layout'
+    | '/_layout/community'
     | '/_layout/login'
     | '/_layout/mcp'
     | '/_layout/service-desks'
     | '/auth/callback'
     | '/_layout/'
     | '/_layout/app/$slug'
+    | '/_layout/community/$slug'
     | '/_layout/catalog/apps/'
     | '/_layout/app/$slug_/sub/$subSlug'
   fileRoutesById: FileRoutesById
@@ -151,6 +175,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LayoutIndexRouteImport
       parentRoute: typeof LayoutRoute
     }
+    '/_layout/community': {
+      id: '/_layout/community'
+      path: '/community'
+      fullPath: '/community'
+      preLoaderRoute: typeof LayoutCommunityRouteImport
+      parentRoute: typeof LayoutRoute
+    }
     '/_layout/login': {
       id: '/_layout/login'
       path: '/login'
@@ -186,6 +217,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof LayoutAppSlugRouteImport
       parentRoute: typeof LayoutRoute
     }
+    '/_layout/community/$slug': {
+      id: '/_layout/community/$slug'
+      path: '/$slug'
+      fullPath: '/community/$slug'
+      preLoaderRoute: typeof LayoutCommunitySlugRouteImport
+      parentRoute: typeof LayoutCommunityRoute
+    }
     '/_layout/catalog/apps/': {
       id: '/_layout/catalog/apps/'
       path: '/catalog/apps'
@@ -203,7 +241,20 @@ declare module '@tanstack/react-router' {
   }
 }
 
+interface LayoutCommunityRouteChildren {
+  LayoutCommunitySlugRoute: typeof LayoutCommunitySlugRoute
+}
+
+const LayoutCommunityRouteChildren: LayoutCommunityRouteChildren = {
+  LayoutCommunitySlugRoute: LayoutCommunitySlugRoute,
+}
+
+const LayoutCommunityRouteWithChildren = LayoutCommunityRoute._addFileChildren(
+  LayoutCommunityRouteChildren,
+)
+
 interface LayoutRouteChildren {
+  LayoutCommunityRoute: typeof LayoutCommunityRouteWithChildren
   LayoutLoginRoute: typeof LayoutLoginRoute
   LayoutMcpRoute: typeof LayoutMcpRoute
   LayoutServiceDesksRoute: typeof LayoutServiceDesksRoute
@@ -214,6 +265,7 @@ interface LayoutRouteChildren {
 }
 
 const LayoutRouteChildren: LayoutRouteChildren = {
+  LayoutCommunityRoute: LayoutCommunityRouteWithChildren,
   LayoutLoginRoute: LayoutLoginRoute,
   LayoutMcpRoute: LayoutMcpRoute,
   LayoutServiceDesksRoute: LayoutServiceDesksRoute,

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

@@ -0,0 +1,7 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_layout/community/$slug')({
+  // Renders nothing: the parent `/community` route owns the page, so the list
+  // stays mounted (and keeps its scroll) under the card for this slug.
+  component: () => null,
+})

package/src/routes/_layout/community.tsx

@@ -0,0 +1,97 @@
+import {
+  Outlet,
+  createFileRoute,
+  stripSearchParams,
+  useParams,
+} from '@tanstack/react-router'
+import { z } from 'zod'
+import { AppCatalogLayout } from '~/modules/appCatalog/ui/layout/AppCatalogLayout'
+import { CommunityPage } from '~/modules/communityTools/ui/CommunityPage'
+import { useCommunityToolsConfig } from '~/modules/communityTools/useCommunityToolsConfig'
+import { NotFoundError } from '~/ui/error/NotFoundError'
+import { TopLevelProvidersForErrors } from '~/ui/layout/TopLevelProvidersForErrors'
+
+// Each defaults to absent, so a plain /community link stays plain. A value that
+// does not parse reads as absent rather than failing the route.
+/** The old window toggle: Newest kept its name; both view counts are Popular now. */
+const LEGACY_WINDOW: Record<string, 'popular' | 'newest' | undefined> = {
+  newest: 'newest',
+  month: 'popular',
+  all: 'popular',
+}
+
+const searchSchema = z
+  .object({
+    /** `<kind>:<value>`, e.g. `topic:sandbox` or `app:order-service`. */
+    tag: z.string().optional().catch(undefined),
+    /** Most liked when absent. */
+    sort: z.enum(['popular', 'newest', 'updated']).optional().catch(undefined),
+    /** Descending when absent. */
+    dir: z.enum(['asc']).optional().catch(undefined),
+    /** The old window toggle: `newest` still means Newest; the param is dropped. */
+    window: z.string().optional().catch(undefined),
+  })
+  .transform(({ window, ...search }) => ({
+    ...search,
+    sort: search.sort ?? LEGACY_WINDOW[window ?? ''],
+    window: undefined,
+  }))
+
+export const Route = createFileRoute('/_layout/community')({
+  component: RouteComponent,
+  validateSearch: searchSchema,
+  search: { middlewares: [stripSearchParams(['window'])] },
+})
+
+function RouteComponent() {
+  const { queryClient, trpcClient } = Route.useRouteContext()
+  const search = Route.useSearch()
+  const navigate = Route.useNavigate()
+  // Set while a card is open: the child route's slug.
+  const { slug } = useParams({ strict: false })
+  // Read here, above the layout's providers, so a deployment with the feature
+  // off answers a typed-in /community with the usual not-found page.
+  const config = useCommunityToolsConfig({ queryClient, trpcClient })
+
+  // A tag or sort change keeps an open card open: it navigates from the
+  // current match, not from this parent route, which would drop the slug.
+  const setSearch = (patch: Partial<typeof search>) =>
+    void (slug
+      ? navigate({
+          to: '/community/$slug',
+          params: { slug },
+          search: (prev) => ({ ...prev, ...patch }),
+        })
+      : navigate({
+          to: '/community',
+          search: (prev) => ({ ...prev, ...patch }),
+        }))
+
+  if (config?.enabled === false) {
+    return (
+      <TopLevelProvidersForErrors>
+        <NotFoundError />
+      </TopLevelProvidersForErrors>
+    )
+  }
+
+  return (
+    <AppCatalogLayout queryClient={queryClient} trpcClient={trpcClient}>
+      <CommunityPage
+        tag={search.tag}
+        sort={search.sort ?? 'liked'}
+        dir={search.dir ?? 'desc'}
+        cardSlug={slug}
+        onTagChange={(tag) => setSearch({ tag })}
+        onSortChange={(sort, dir) =>
+          setSearch({
+            sort: sort === 'liked' ? undefined : sort,
+            dir: dir === 'asc' ? 'asc' : undefined,
+          })
+        }
+      />
+      {/* The card route renders nothing; the page above reads its slug. */}
+      <Outlet />
+    </AppCatalogLayout>
+  )
+}

package/src/ui/components/header/Header.tsx

@@ -4,7 +4,7 @@ import type {
 } from '@igstack/app-catalog-backend-core'
 import { Link } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
-import { LogOut, X } from 'lucide-react'
+import { LogOut, Plug, X } from 'lucide-react'
 import React, { use } from 'react'
 import AppCatalogLogo from '~/assets/app-catalog.svg?react'
 import { useTRPC } from '~/api/infra/trpc'
@@ -211,11 +211,17 @@ export function Header({ middle }: HeaderProps) {
       </div>
       {middle && <div className="flex-1">{middle}</div>}
       <div className="flex items-center gap-3 ml-auto">
+        <Button variant="outline" size="sm" asChild>
+          <Link to="/mcp">
+            <Plug />
+            MCP
+          </Link>
+        </Button>
         <ThemeSwitcher />
         {isLoading ? (
           <Skeleton className="w-8 h-8 rounded-full" />
         ) : !isAuthenticated ? (
-          // The catalog is browsable without signing in; Login is for the parts
+          // The catalog is browsable without signing in; Sign in is for the parts
           // that need an identity (comments, admin). DEV Login is gated behind
           // `devLoginEnabled`, so it never reaches a real deployment.
           <div className="flex items-center gap-2">
@@ -233,7 +239,7 @@ export function Header({ middle }: HeaderProps) {
               onClick={handleLoginClick}
               className="text-sm font-medium text-muted-foreground hover:text-foreground cursor-pointer"
             >
-              Login
+              Sign in
             </button>
           </div>
         ) : (

package/src/util/highlightMatches.tsx

@@ -27,3 +27,37 @@ export function highlightMatches(text: string, query: string): React.ReactNode {
     </>
   )
 }
+
+/** Like `highlightMatches`, for several search words at once, in any order. */
+export function highlightTokens(
+  text: string,
+  tokens: string[],
+): React.ReactNode {
+  const words = tokens.filter(Boolean)
+  if (words.length === 0) return text
+
+  // Longest first, so "runbook" wins over its own prefix "run".
+  const alternation = [...words]
+    .sort((a, b) => b.length - a.length)
+    .map(escapeRegex)
+    .join('|')
+  const parts = text.split(new RegExp(`(${alternation})`, 'gi'))
+
+  let offset = 0
+  return (
+    <>
+      {parts.map((part, idx) => {
+        // An empty part shares its offset with the match after it; parity splits them.
+        const key = `${offset}-${idx % 2}`
+        offset += part.length
+        return idx % 2 === 1 ? (
+          <span key={key} className="rounded-[3px] bg-highlight">
+            {part}
+          </span>
+        ) : (
+          <React.Fragment key={key}>{part}</React.Fragment>
+        )
+      })}
+    </>
+  )
+}

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

@@ -1,12 +0,0 @@
-/**
- * Compact segmented toggle for the header (Apps | Service Desks | MCP). Rendered in
- * the header's `middle` slot so it adds no header height. Uses router Links so
- * each segment is deep-linkable.
- *
- * The active segment is derived from the current pathname rather than a plain
- * exact-match on the Link: the "Apps" tab must stay active on the app-detail
- * routes (`/app/<slug>`) too, since the detail panel is part of the Apps view
- * (#23). A plain `activeOptions={{ exact: true }}` on `to="/"` left both tabs
- * inactive on `/app/<slug>`.
- */
-export declare function ViewToggle(): import("react/jsx-runtime").JSX.Element;