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

package/dist/esm/modules/communityTools/ui/CommunityPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommunityPage.js","sources":["../../../../../src/modules/communityTools/ui/CommunityPage.tsx"],"sourcesContent":["import type {\n  CommunityTool,\n  FeedSort,\n  MatchField,\n  SortDir,\n} from '@igstack/app-catalog-shared-core'\nimport { rankTools, searchTools } from '@igstack/app-catalog-shared-core'\nimport { useLocation, useNavigate } from '@tanstack/react-router'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport { AlertTriangle, Plus, RefreshCw, Search, Star } from 'lucide-react'\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { useAuthModal } from '~/modules/auth/AuthModalContext'\nimport { Skeleton } from '~/ui/skeleton'\nimport { useCommunityTools } from '../useCommunityTools'\nimport { FeedRow, ROW_THUMB } from './FeedRow'\nimport { FeedSortControl, feedHeading } from './FeedSortControl'\nimport { MarginPreview } from './MarginPreview'\nimport { MyToolsShelf } from './MyToolsShelf'\nimport { TagRow } from './TagRow'\nimport { Toast } from './Toast'\nimport type { ToastMessage } from './Toast'\nimport { ToolCard } from './ToolCard'\nimport { ToolFormDialog } from './ToolFormDialog'\nimport { ToolSearch } from './ToolSearch'\n\nconst KBD =\n  'rounded-[5px] border border-b-2 border-border bg-card px-1.5 py-px text-[11px] font-semibold text-muted-foreground'\n\ninterface ListItem {\n  tool: CommunityTool\n  matched?: MatchField[]\n}\n\nexport interface CommunityPageProps {\n  /** `?tag=`: `<kind>:<value>`, or none for the whole feed. */\n  tag: string | undefined\n  sort: FeedSort\n  dir: SortDir\n  onTagChange: (tag: string | undefined) => void\n  onSortChange: (sort: FeedSort, dir: SortDir) => void\n  /** The tool whose card is open over the page (`/community/<slug>`). */\n  cardSlug?: string\n}\n\nconst RESULTS_ID = 'community-results-grid'\n\n/** Stable per tool, so the active descendant survives re-renders and re-ranking. */\nfunction optionIdOf(slug: string): string {\n  return `community-option-${slug}`\n}\n\nfunction openSite(url: string) {\n  window.open(url, '_blank', 'noopener,noreferrer')\n}\n\nexport function CommunityPage({\n  tag,\n  sort,\n  dir,\n  onTagChange,\n  onSortChange,\n  cardSlug,\n}: CommunityPageProps) {\n  const {\n    list,\n    pins,\n    appNames,\n    isAuthenticated,\n    isAuthLoading,\n    pin,\n    unpin,\n    pinBusySlug,\n    reorder,\n    like,\n    unlike,\n    withMyLike,\n  } = useCommunityTools()\n  const { open: openSignIn } = useAuthModal()\n  const navigate = useNavigate()\n  // Signing in comes back here: this page, or the card open over it. The\n  // router's own location, so it holds under any history (and in tests).\n  const here = useLocation({ select: (l) => l.href })\n  const signInHere = () => openSignIn(here)\n\n  const [query, setQuery] = useState('')\n  const [selected, setSelected] = useState(0)\n  const tokens = useMemo(\n    () => query.trim().toLowerCase().split(/\\s+/).filter(Boolean),\n    [query],\n  )\n  const searching = tokens.length > 0\n\n  const [toast, setToast] = useState<ToastMessage | null>(null)\n  const toastIdRef = useRef(0)\n  const showToast = useCallback((message: Omit<ToastMessage, 'id'>) => {\n    toastIdRef.current += 1\n    setToast({ ...message, id: toastIdRef.current })\n  }, [])\n  const dismissToast = useCallback(() => setToast(null), [])\n\n  const tools = useMemo(() => list.data ?? [], [list.data])\n  const withTag = useCallback(\n    (all: CommunityTool[]) =>\n      tag\n        ? all.filter((t) => t.tags.some((g) => `${g.kind}:${g.value}` === tag))\n        : all,\n    [tag],\n  )\n\n  const feed = useMemo<ListItem[]>(\n    () => withTag(rankTools(tools, sort, dir)).map((tool) => ({ tool })),\n    [tools, sort, dir, withTag],\n  )\n\n  // Strongest match first; archived tools still found, after the rest.\n  const results = useMemo<ListItem[]>(\n    () =>\n      searching\n        ? searchTools(withTag(tools), query, appNames, sort, dir).map(\n            ({ tool, fields }) => ({ tool, matched: fields }),\n          )\n        : [],\n    [searching, tools, query, appNames, sort, dir, withTag],\n  )\n\n  const items = searching ? results : feed\n  const selectedIndex = Math.min(selected, results.length - 1)\n  const selectedTool = results[selectedIndex]?.tool\n  const activeOptionId =\n    searching && selectedTool ? optionIdOf(selectedTool.slug) : undefined\n\n  const pinnedSlugs = useMemo(\n    () => new Set((pins.data ?? []).map((t) => t.slug)),\n    [pins.data],\n  )\n\n  const pinError = (retry: () => void) => () =>\n    showToast({\n      tone: 'error',\n      text: 'Could not save the pin. Check your connection.',\n      action: { label: 'Try again', run: retry },\n    })\n\n  const pinTool = (slug: string) =>\n    pin.mutate(\n      { slug },\n      {\n        onSuccess: () =>\n          showToast({\n            tone: 'info',\n            text: 'Pinned to My tools',\n            action: { label: 'Undo', run: () => unpinTool(slug, false) },\n          }),\n        onError: pinError(() => pinTool(slug)),\n      },\n    )\n  const unpinTool = (slug: string, offerUndo = true) =>\n    unpin.mutate(\n      { slug },\n      {\n        onSuccess: () => {\n          if (offerUndo) {\n            showToast({\n              tone: 'info',\n              text: 'Removed from My tools',\n              action: { label: 'Undo', run: () => pinTool(slug) },\n            })\n          }\n        },\n        onError: pinError(() => unpinTool(slug, offerUndo)),\n      },\n    )\n  const togglePin = (tool: CommunityTool) => {\n    if (!isAuthenticated) {\n      signInHere()\n      return\n    }\n    if (pinnedSlugs.has(tool.slug)) unpinTool(tool.slug)\n    else pinTool(tool.slug)\n  }\n\n  const toggleLike = (tool: CommunityTool) => {\n    if (!isAuthenticated) {\n      signInHere()\n      return\n    }\n    const save = tool.likedByMe ? unlike : like\n    save.mutate(\n      { slug: tool.slug },\n      {\n        onError: () =>\n          showToast({\n            tone: 'error',\n            text: 'Could not save the like. Check your connection.',\n            action: { label: 'Try again', run: () => toggleLike(tool) },\n          }),\n      },\n    )\n  }\n\n  // A failed save puts the tiles back (the pins refetch); say why they moved.\n  const reorderPins = (slugs: string[]) =>\n    reorder.mutate(\n      { slugs },\n      {\n        onError: () =>\n          showToast({\n            tone: 'error',\n            text: \"Couldn't save the new order\",\n            action: { label: 'Try again', run: () => reorderPins(slugs) },\n          }),\n      },\n    )\n\n  // Open: `{}` from Add a tool, the search text from \"Add it\".\n  const [adding, setAdding] = useState<{ prefillName?: string } | null>(null)\n  const startAdd = (prefillName?: string) => {\n    // Adding needs an identity: sign in, then come back to this page.\n    if (!isAuthenticated) signInHere()\n    else setAdding({ prefillName })\n  }\n\n  const openCard = (slug: string, replace = false) =>\n    navigate({\n      to: '/community/$slug',\n      params: { slug },\n      search: (prev) => prev,\n      replace,\n    })\n  const closeCard = () =>\n    void navigate({ to: '/community', search: (prev) => prev })\n\n  // The page column scrolls (the layout pins the header), not the list: the\n  // virtualizer needs where the list starts inside that column. Everything\n  // above it can change height — the shelf loads, hides while searching, goes\n  // from 2 to 4 columns at `md` — and all of that resizes the page, so one\n  // observer on it catches each case.\n  const scrollRef = useRef<HTMLDivElement>(null)\n  const pageRef = useRef<HTMLDivElement>(null)\n  const [listEl, setListEl] = useState<HTMLDivElement | null>(null)\n  const [scrollMargin, setScrollMargin] = useState(0)\n  useEffect(() => {\n    const scroller = scrollRef.current\n    const page = pageRef.current\n    if (!scroller || !page || !listEl) return\n    const measure = () =>\n      setScrollMargin(\n        listEl.getBoundingClientRect().top -\n          scroller.getBoundingClientRect().top +\n          scroller.scrollTop,\n      )\n    const observer = new ResizeObserver(measure)\n    observer.observe(page)\n    measure()\n    return () => observer.disconnect()\n  }, [listEl])\n  // No layout, no window (jsdom, a print preview): the column measures 0 tall,\n  // a virtualizer mounts nothing, so every row is rendered instead.\n  const [hasLayout, setHasLayout] = useState(true)\n  useLayoutEffect(() => {\n    setHasLayout((scrollRef.current?.clientHeight ?? 0) > 0)\n  }, [])\n  // Stable on purpose: the virtualizer keys its measurement cache on this\n  // function's identity, so a new arrow every render re-renders forever.\n  const getItemKey = useCallback(\n    (i: number) => items[i]?.tool.slug ?? i,\n    [items],\n  )\n  // TanStack Virtual hands back functions the React Compiler cannot memoize\n  // safely, so it skips this hook; registered in the root eslint.config.js.\n  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Virtual\n  const virtualizer = useVirtualizer({\n    getScrollElement: () => scrollRef.current,\n    // The column's height before it is measured, so the first paint already\n    // holds the rows that will be visible.\n    initialRect: { width: 0, height: 800 },\n    count: items.length,\n    // The thumbnail sets the row: 150 px, 12 px padding either side, borders.\n    estimateSize: () => 176,\n    overscan: 6,\n    gap: 8,\n    scrollMargin,\n    getItemKey,\n  })\n\n  // Keep the selected result on screen. The next row is almost always already\n  // mounted (overscan), and the browser scrolls it exactly; the virtualizer's\n  // own estimate-based scroll is only for a row that is not there yet.\n  useEffect(() => {\n    if (!searching || selectedIndex < 0) return\n    const row = listEl?.querySelector(`[data-index=\"${selectedIndex}\"]`)\n    if (row) row.scrollIntoView({ block: 'nearest' })\n    else virtualizer.scrollToIndex(selectedIndex, { align: 'auto' })\n  }, [searching, selectedIndex, virtualizer, listEl])\n\n  const onSearchKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    const current = results[selectedIndex]\n    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n      if (results.length === 0) return\n      e.preventDefault()\n      const step = e.key === 'ArrowDown' ? 1 : -1\n      setSelected(\n        Math.min(results.length - 1, Math.max(0, selectedIndex + step)),\n      )\n    } else if (e.key === 'Enter' && current) {\n      e.preventDefault()\n      openSite(current.tool.url)\n    } else if (\n      e.key === 'ArrowRight' &&\n      current &&\n      e.currentTarget.selectionStart === e.currentTarget.value.length\n    ) {\n      // Only at the end of the text, so → still moves the caret inside it.\n      e.preventDefault()\n      void openCard(current.tool.slug)\n    }\n  }\n\n  // Without layout every row is \"virtual\", at its natural place in the flow.\n  const virtualItems = hasLayout\n    ? virtualizer.getVirtualItems()\n    : items.map((_, index) => ({\n        key: items[index]!.tool.slug,\n        index,\n        start: virtualizer.options.scrollMargin,\n      }))\n\n  return (\n    <div\n      ref={scrollRef}\n      data-preview-scroller\n      className=\"min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable]\"\n    >\n      <div\n        ref={pageRef}\n        data-preview-column\n        className=\"mx-auto w-full max-w-[1000px] pt-1.5 pb-10\"\n      >\n        <div className=\"mb-[22px] flex items-center gap-2.5\">\n          <ToolSearch\n            value={query}\n            onChange={(value) => {\n              setQuery(value)\n              setSelected(0)\n            }}\n            resultCount={results.length}\n            resultsId={searching && results.length > 0 ? RESULTS_ID : undefined}\n            activeDescendant={activeOptionId}\n            onKey={onSearchKey}\n          />\n          <button\n            type=\"button\"\n            onClick={() => startAdd()}\n            className=\"inline-flex h-10 shrink-0 items-center gap-[7px] rounded-[10px] border border-border bg-card px-3.5 text-[13.5px] font-bold whitespace-nowrap hover:border-primary/40 focus-visible:outline-2 focus-visible:outline-ring\"\n          >\n            <Plus aria-hidden=\"true\" className=\"size-4\" />\n            Add a tool\n          </button>\n        </div>\n\n        {searching ? (\n          <div className=\"-mt-2 mb-3.5 ml-1 flex items-center gap-2 text-[13px] font-semibold text-muted-foreground\">\n            <Star\n              aria-hidden=\"true\"\n              className=\"size-4 fill-amber-400 text-amber-600\"\n            />\n            My tools is hidden while you search\n          </div>\n        ) : (\n          <div className=\"mb-[26px]\">\n            <MyToolsShelf\n              pins={pins.data ?? []}\n              isLoading={isAuthLoading || (isAuthenticated && pins.isPending)}\n              onUnpin={(tool) => togglePin(tool)}\n              onReorder={reorderPins}\n            />\n          </div>\n        )}\n\n        <section\n          aria-label={searching ? 'Search results' : feedHeading(sort, dir)}\n          data-testid={searching ? 'community-results' : 'community-feed'}\n        >\n          {!searching && (\n            <>\n              <div className=\"mb-3 flex items-center justify-between\">\n                <h2 className=\"font-serif text-[19px] font-semibold\">\n                  {feedHeading(sort, dir)}\n                </h2>\n                <FeedSortControl\n                  sort={sort}\n                  dir={dir}\n                  onChange={onSortChange}\n                />\n              </div>\n              <TagRow\n                tools={rankTools(tools, sort, dir)}\n                activeTag={tag}\n                appNames={appNames}\n                onChoose={onTagChange}\n              />\n            </>\n          )}\n\n          {list.isPending ? (\n            <FeedSkeleton />\n          ) : list.isError ? (\n            <FeedError onRetry={() => void list.refetch()} />\n          ) : searching && results.length === 0 ? (\n            <NoResults\n              query={query.trim()}\n              onAdd={() => startAdd(query.trim())}\n            />\n          ) : (\n            <div\n              ref={setListEl}\n              id={searching ? RESULTS_ID : undefined}\n              role={searching ? 'grid' : undefined}\n              aria-label={searching ? 'Search results' : undefined}\n              aria-activedescendant={activeOptionId}\n              className={hasLayout ? 'relative' : 'flex flex-col gap-2'}\n              style={\n                hasLayout ? { height: virtualizer.getTotalSize() } : undefined\n              }\n            >\n              {virtualItems.map((row) => {\n                const item = items[row.index]\n                if (!item) return null\n                return (\n                  <div\n                    key={row.key}\n                    data-index={row.index}\n                    ref={virtualizer.measureElement}\n                    className={\n                      hasLayout ? 'absolute inset-x-0 top-0' : undefined\n                    }\n                    style={\n                      hasLayout\n                        ? {\n                            transform: `translateY(${row.start - virtualizer.options.scrollMargin}px)`,\n                          }\n                        : undefined\n                    }\n                  >\n                    <FeedRow\n                      tool={withMyLike(item.tool)}\n                      rank={searching ? undefined : row.index + 1}\n                      sort={sort}\n                      tokens={tokens}\n                      matched={item.matched}\n                      selected={searching && row.index === selectedIndex}\n                      optionId={\n                        searching ? optionIdOf(item.tool.slug) : undefined\n                      }\n                      pinned={pinnedSlugs.has(item.tool.slug)}\n                      pinBusy={pinBusySlug === item.tool.slug}\n                      onTogglePin={() => togglePin(item.tool)}\n                      onToggleLike={() => toggleLike(withMyLike(item.tool))}\n                    />\n                  </div>\n                )\n              })}\n            </div>\n          )}\n\n          {searching && results.length > 0 && (\n            <div className=\"mt-3.5 flex items-center gap-1.5 text-[12.5px] font-semibold text-muted-foreground\">\n              <kbd className={KBD}>↑</kbd>\n              <kbd className={KBD}>↓</kbd>\n              <span className=\"mr-2.5\">move</span>\n              <kbd className={KBD}>Enter</kbd>\n              <span className=\"mr-2.5\">open site</span>\n              <kbd className={KBD}>→</kbd>\n              <span className=\"mr-2.5\">open card</span>\n              <kbd className={KBD}>Esc</kbd>\n              <span>clear</span>\n            </div>\n          )}\n        </section>\n\n        <MarginPreview\n          list={listEl}\n          tools={tools}\n          disabled={!!cardSlug || !!adding}\n        />\n        {cardSlug && (\n          <ToolCard\n            slug={cardSlug}\n            siblings={items.map((item) => item.tool.slug)}\n            onClose={closeCard}\n            // Stepping swaps the card in place; Back still leaves the card.\n            onNavigate={(slug) => void openCard(slug, true)}\n            pinned={pinnedSlugs.has(cardSlug)}\n            pinBusy={pinBusySlug === cardSlug}\n            onTogglePin={togglePin}\n            appNames={appNames}\n            // One step: the card closes onto the feed already filtered.\n            onChooseTag={(chosen) =>\n              void navigate({\n                to: '/community',\n                search: (prev) => ({ ...prev, tag: chosen }),\n              })\n            }\n          />\n        )}\n        {adding && (\n          <ToolFormDialog\n            mode=\"add\"\n            prefillName={adding.prefillName}\n            onClose={() => setAdding(null)}\n            onOpenCard={(slug) => {\n              setAdding(null)\n              void openCard(slug)\n            }}\n            onDone={(slug) => {\n              setAdding(null)\n              showToast({\n                tone: 'ok',\n                text: (\n                  <>\n                    <b>Live now</b>, in the review list\n                  </>\n                ),\n                action: { label: 'Open card', run: () => void openCard(slug) },\n              })\n            }}\n          />\n        )}\n        {/* After the card, so a toast raised from it shows above its scrim. */}\n        <Toast toast={toast} onDismiss={dismissToast} />\n      </div>\n    </div>\n  )\n}\n\n/** Three placeholder rows at the real row height. */\nfunction FeedSkeleton() {\n  return (\n    <div\n      data-testid=\"feed-skeleton\"\n      aria-busy=\"true\"\n      className=\"flex flex-col gap-2\"\n    >\n      {[0, 1, 2].map((i) => (\n        <div\n          key={i}\n          className=\"flex min-h-[176px] items-center gap-4 rounded-[14px] border border-border bg-card py-3 pl-3\"\n        >\n          <Skeleton className=\"h-[22px] w-[26px]\" />\n          <Skeleton className={ROW_THUMB} />\n          <div className=\"flex flex-1 flex-col gap-2\">\n            <Skeleton className=\"h-2.5 w-2/5\" />\n            <Skeleton className=\"h-2.5 w-4/5\" />\n            <Skeleton className=\"h-2.5 w-1/4\" />\n          </div>\n          {/* The Details panel's reserved width. */}\n          <div className=\"w-[120px] shrink-0\" />\n        </div>\n      ))}\n    </div>\n  )\n}\n\nfunction FeedError({ onRetry }: { onRetry: () => void }) {\n  return (\n    <div\n      data-testid=\"feed-error\"\n      role=\"alert\"\n      className=\"flex items-center gap-3.5 rounded-[14px] border border-destructive/30 bg-destructive/5 px-5 py-[18px]\"\n    >\n      <AlertTriangle\n        aria-hidden=\"true\"\n        className=\"size-[22px] shrink-0 text-destructive\"\n      />\n      <div>\n        <b className=\"font-bold\">Could not load community tools.</b>\n        <p className=\"mt-0.5 text-muted-foreground\">\n          The server did not answer. Your pinned tools above still work.\n        </p>\n      </div>\n      <button\n        type=\"button\"\n        onClick={onRetry}\n        className=\"ml-auto inline-flex h-10 shrink-0 items-center gap-[7px] rounded-[10px] border border-border bg-card px-3.5 text-[13.5px] font-bold hover:border-primary/40 focus-visible:outline-2 focus-visible:outline-ring\"\n      >\n        <RefreshCw aria-hidden=\"true\" className=\"size-4\" />\n        Try again\n      </button>\n    </div>\n  )\n}\n\nfunction NoResults({ query, onAdd }: { query: string; onAdd: () => void }) {\n  return (\n    <div\n      data-testid=\"no-results\"\n      className=\"flex gap-3.5 rounded-[14px] border border-border bg-card px-5 py-[18px]\"\n    >\n      <Search\n        aria-hidden=\"true\"\n        className=\"mt-0.5 size-5 shrink-0 text-muted-foreground\"\n      />\n      <div>\n        <b className=\"font-bold\">Nothing matches “{query}”.</b>\n        <p className=\"mt-0.5 text-muted-foreground\">\n          Try a word from the page itself, or the name of the person who shared\n          it. Know the tool?{' '}\n          <button\n            type=\"button\"\n            onClick={onAdd}\n            className=\"font-bold text-primary hover:underline focus-visible:outline-2 focus-visible:outline-ring\"\n          >\n            Add it\n          </button>\n        </p>\n      </div>\n    </div>\n  )\n}\n"],"names":["_a"],"mappings":";;;;;;;;;;;;;;;;;;AAgCA,MAAM,MACJ;AAkBF,MAAM,aAAa;AAGnB,SAAS,WAAW,MAAsB;AACxC,SAAO,oBAAoB,IAAI;AACjC;AAEA,SAAS,SAAS,KAAa;AAC7B,SAAO,KAAK,KAAK,UAAU,qBAAqB;AAClD;AAEO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;;AACrB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,kBAAA;AACJ,QAAM,EAAE,MAAM,WAAA,IAAe,aAAA;AAC7B,QAAM,WAAW,YAAA;AAGjB,QAAM,OAAO,YAAY,EAAE,QAAQ,CAAC,MAAM,EAAE,MAAM;AAClD,QAAM,aAAa,MAAM,WAAW,IAAI;AAExC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,CAAC;AAC1C,QAAM,SAAS;AAAA,IACb,MAAM,MAAM,KAAA,EAAO,YAAA,EAAc,MAAM,KAAK,EAAE,OAAO,OAAO;AAAA,IAC5D,CAAC,KAAK;AAAA,EAAA;AAER,QAAM,YAAY,OAAO,SAAS;AAElC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA8B,IAAI;AAC5D,QAAM,aAAa,OAAO,CAAC;AAC3B,QAAM,YAAY,YAAY,CAAC,YAAsC;AACnE,eAAW,WAAW;AACtB,aAAS,EAAE,GAAG,SAAS,IAAI,WAAW,SAAS;AAAA,EACjD,GAAG,CAAA,CAAE;AACL,QAAM,eAAe,YAAY,MAAM,SAAS,IAAI,GAAG,CAAA,CAAE;AAEzD,QAAM,QAAQ,QAAQ,MAAM,KAAK,QAAQ,IAAI,CAAC,KAAK,IAAI,CAAC;AACxD,QAAM,UAAU;AAAA,IACd,CAAC,QACC,MACI,IAAI,OAAO,CAAC,MAAM,EAAE,KAAK,KAAK,CAAC,MAAM,GAAG,EAAE,IAAI,IAAI,EAAE,KAAK,OAAO,GAAG,CAAC,IACpE;AAAA,IACN,CAAC,GAAG;AAAA,EAAA;AAGN,QAAM,OAAO;AAAA,IACX,MAAM,QAAQ,UAAU,OAAO,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,OAAO;AAAA,IACnE,CAAC,OAAO,MAAM,KAAK,OAAO;AAAA,EAAA;AAI5B,QAAM,UAAU;AAAA,IACd,MACE,YACI,YAAY,QAAQ,KAAK,GAAG,OAAO,UAAU,MAAM,GAAG,EAAE;AAAA,MACtD,CAAC,EAAE,MAAM,OAAA,OAAc,EAAE,MAAM,SAAS,OAAA;AAAA,IAAO,IAEjD,CAAA;AAAA,IACN,CAAC,WAAW,OAAO,OAAO,UAAU,MAAM,KAAK,OAAO;AAAA,EAAA;AAGxD,QAAM,QAAQ,YAAY,UAAU;AACpC,QAAM,gBAAgB,KAAK,IAAI,UAAU,QAAQ,SAAS,CAAC;AAC3D,QAAM,gBAAe,aAAQ,aAAa,MAArB,mBAAwB;AAC7C,QAAM,iBACJ,aAAa,eAAe,WAAW,aAAa,IAAI,IAAI;AAE9D,QAAM,cAAc;AAAA,IAClB,MAAM,IAAI,KAAK,KAAK,QAAQ,CAAA,GAAI,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC;AAAA,IAClD,CAAC,KAAK,IAAI;AAAA,EAAA;AAGZ,QAAM,WAAW,CAAC,UAAsB,MACtC,UAAU;AAAA,IACR,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ,EAAE,OAAO,aAAa,KAAK,MAAA;AAAA,EAAM,CAC1C;AAEH,QAAM,UAAU,CAAC,SACf,IAAI;AAAA,IACF,EAAE,KAAA;AAAA,IACF;AAAA,MACE,WAAW,MACT,UAAU;AAAA,QACR,MAAM;AAAA,QACN,MAAM;AAAA,QACN,QAAQ,EAAE,OAAO,QAAQ,KAAK,MAAM,UAAU,MAAM,KAAK,EAAA;AAAA,MAAE,CAC5D;AAAA,MACH,SAAS,SAAS,MAAM,QAAQ,IAAI,CAAC;AAAA,IAAA;AAAA,EACvC;AAEJ,QAAM,YAAY,CAAC,MAAc,YAAY,SAC3C,MAAM;AAAA,IACJ,EAAE,KAAA;AAAA,IACF;AAAA,MACE,WAAW,MAAM;AACf,YAAI,WAAW;AACb,oBAAU;AAAA,YACR,MAAM;AAAA,YACN,MAAM;AAAA,YACN,QAAQ,EAAE,OAAO,QAAQ,KAAK,MAAM,QAAQ,IAAI,EAAA;AAAA,UAAE,CACnD;AAAA,QACH;AAAA,MACF;AAAA,MACA,SAAS,SAAS,MAAM,UAAU,MAAM,SAAS,CAAC;AAAA,IAAA;AAAA,EACpD;AAEJ,QAAM,YAAY,CAAC,SAAwB;AACzC,QAAI,CAAC,iBAAiB;AACpB,iBAAA;AACA;AAAA,IACF;AACA,QAAI,YAAY,IAAI,KAAK,IAAI,EAAG,WAAU,KAAK,IAAI;AAAA,QAC9C,SAAQ,KAAK,IAAI;AAAA,EACxB;AAEA,QAAM,aAAa,CAAC,SAAwB;AAC1C,QAAI,CAAC,iBAAiB;AACpB,iBAAA;AACA;AAAA,IACF;AACA,UAAM,OAAO,KAAK,YAAY,SAAS;AACvC,SAAK;AAAA,MACH,EAAE,MAAM,KAAK,KAAA;AAAA,MACb;AAAA,QACE,SAAS,MACP,UAAU;AAAA,UACR,MAAM;AAAA,UACN,MAAM;AAAA,UACN,QAAQ,EAAE,OAAO,aAAa,KAAK,MAAM,WAAW,IAAI,EAAA;AAAA,QAAE,CAC3D;AAAA,MAAA;AAAA,IACL;AAAA,EAEJ;AAGA,QAAM,cAAc,CAAC,UACnB,QAAQ;AAAA,IACN,EAAE,MAAA;AAAA,IACF;AAAA,MACE,SAAS,MACP,UAAU;AAAA,QACR,MAAM;AAAA,QACN,MAAM;AAAA,QACN,QAAQ,EAAE,OAAO,aAAa,KAAK,MAAM,YAAY,KAAK,EAAA;AAAA,MAAE,CAC7D;AAAA,IAAA;AAAA,EACL;AAIJ,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA0C,IAAI;AAC1E,QAAM,WAAW,CAAC,gBAAyB;AAEzC,QAAI,CAAC,gBAAiB,YAAA;AAAA,QACjB,WAAU,EAAE,aAAa;AAAA,EAChC;AAEA,QAAM,WAAW,CAAC,MAAc,UAAU,UACxC,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,QAAQ,EAAE,KAAA;AAAA,IACV,QAAQ,CAAC,SAAS;AAAA,IAClB;AAAA,EAAA,CACD;AACH,QAAM,YAAY,MAChB,KAAK,SAAS,EAAE,IAAI,cAAc,QAAQ,CAAC,SAAS,MAAM;AAO5D,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAgC,IAAI;AAChE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,CAAC;AAClD,YAAU,MAAM;AACd,UAAM,WAAW,UAAU;AAC3B,UAAM,OAAO,QAAQ;AACrB,QAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,OAAQ;AACnC,UAAM,UAAU,MACd;AAAA,MACE,OAAO,wBAAwB,MAC7B,SAAS,sBAAA,EAAwB,MACjC,SAAS;AAAA,IAAA;AAEf,UAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,aAAS,QAAQ,IAAI;AACrB,YAAA;AACA,WAAO,MAAM,SAAS,WAAA;AAAA,EACxB,GAAG,CAAC,MAAM,CAAC;AAGX,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,IAAI;AAC/C,kBAAgB,MAAM;;AACpB,oBAAcA,MAAA,UAAU,YAAV,gBAAAA,IAAmB,iBAAgB,KAAK,CAAC;AAAA,EACzD,GAAG,CAAA,CAAE;AAGL,QAAM,aAAa;AAAA,IACjB,CAAC,MAAA;;AAAc,eAAAA,MAAA,MAAM,CAAC,MAAP,gBAAAA,IAAU,KAAK,SAAQ;AAAA;AAAA,IACtC,CAAC,KAAK;AAAA,EAAA;AAKR,QAAM,cAAc,eAAe;AAAA,IACjC,kBAAkB,MAAM,UAAU;AAAA;AAAA;AAAA,IAGlC,aAAa,EAAE,OAAO,GAAG,QAAQ,IAAA;AAAA,IACjC,OAAO,MAAM;AAAA;AAAA,IAEb,cAAc,MAAM;AAAA,IACpB,UAAU;AAAA,IACV,KAAK;AAAA,IACL;AAAA,IACA;AAAA,EAAA,CACD;AAKD,YAAU,MAAM;AACd,QAAI,CAAC,aAAa,gBAAgB,EAAG;AACrC,UAAM,MAAM,iCAAQ,cAAc,gBAAgB,aAAa;AAC/D,QAAI,IAAK,KAAI,eAAe,EAAE,OAAO,WAAW;AAAA,qBAC/B,cAAc,eAAe,EAAE,OAAO,QAAQ;AAAA,EACjE,GAAG,CAAC,WAAW,eAAe,aAAa,MAAM,CAAC;AAElD,QAAM,cAAc,CAAC,MAA6C;AAChE,UAAM,UAAU,QAAQ,aAAa;AACrC,QAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;AAChD,UAAI,QAAQ,WAAW,EAAG;AAC1B,QAAE,eAAA;AACF,YAAM,OAAO,EAAE,QAAQ,cAAc,IAAI;AACzC;AAAA,QACE,KAAK,IAAI,QAAQ,SAAS,GAAG,KAAK,IAAI,GAAG,gBAAgB,IAAI,CAAC;AAAA,MAAA;AAAA,IAElE,WAAW,EAAE,QAAQ,WAAW,SAAS;AACvC,QAAE,eAAA;AACF,eAAS,QAAQ,KAAK,GAAG;AAAA,IAC3B,WACE,EAAE,QAAQ,gBACV,WACA,EAAE,cAAc,mBAAmB,EAAE,cAAc,MAAM,QACzD;AAEA,QAAE,eAAA;AACF,WAAK,SAAS,QAAQ,KAAK,IAAI;AAAA,IACjC;AAAA,EACF;AAGA,QAAM,eAAe,YACjB,YAAY,gBAAA,IACZ,MAAM,IAAI,CAAC,GAAG,WAAW;AAAA,IACvB,KAAK,MAAM,KAAK,EAAG,KAAK;AAAA,IACxB;AAAA,IACA,OAAO,YAAY,QAAQ;AAAA,EAAA,EAC3B;AAEN,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,yBAAqB;AAAA,MACrB,WAAU;AAAA,MAEV,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,uBAAmB;AAAA,UACnB,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAU,uCACb,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,OAAO;AAAA,kBACP,UAAU,CAAC,UAAU;AACnB,6BAAS,KAAK;AACd,gCAAY,CAAC;AAAA,kBACf;AAAA,kBACA,aAAa,QAAQ;AAAA,kBACrB,WAAW,aAAa,QAAQ,SAAS,IAAI,aAAa;AAAA,kBAC1D,kBAAkB;AAAA,kBAClB,OAAO;AAAA,gBAAA;AAAA,cAAA;AAAA,cAET;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS,MAAM,SAAA;AAAA,kBACf,WAAU;AAAA,kBAEV,UAAA;AAAA,oBAAA,oBAAC,MAAA,EAAK,eAAY,QAAO,WAAU,UAAS;AAAA,oBAAE;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YAEhD,GACF;AAAA,YAEC,YACC,qBAAC,OAAA,EAAI,WAAU,6FACb,UAAA;AAAA,cAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,WAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,cACV;AAAA,YAAA,EAAA,CAEJ,IAEA,oBAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM,KAAK,QAAQ,CAAA;AAAA,gBACnB,WAAW,iBAAkB,mBAAmB,KAAK;AAAA,gBACrD,SAAS,CAAC,SAAS,UAAU,IAAI;AAAA,gBACjC,WAAW;AAAA,cAAA;AAAA,YAAA,GAEf;AAAA,YAGF;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,cAAY,YAAY,mBAAmB,YAAY,MAAM,GAAG;AAAA,gBAChE,eAAa,YAAY,sBAAsB;AAAA,gBAE9C,UAAA;AAAA,kBAAA,CAAC,aACA,qBAAA,UAAA,EACE,UAAA;AAAA,oBAAA,qBAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,sBAAA,oBAAC,QAAG,WAAU,wCACX,UAAA,YAAY,MAAM,GAAG,GACxB;AAAA,sBACA;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACC;AAAA,0BACA;AAAA,0BACA,UAAU;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACZ,GACF;AAAA,oBACA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,OAAO,UAAU,OAAO,MAAM,GAAG;AAAA,wBACjC,WAAW;AAAA,wBACX;AAAA,wBACA,UAAU;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACZ,GACF;AAAA,kBAGD,KAAK,YACJ,oBAAC,gBAAa,IACZ,KAAK,UACP,oBAAC,WAAA,EAAU,SAAS,MAAM,KAAK,KAAK,UAAQ,CAAG,IAC7C,aAAa,QAAQ,WAAW,IAClC;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,OAAO,MAAM,KAAA;AAAA,sBACb,OAAO,MAAM,SAAS,MAAM,MAAM;AAAA,oBAAA;AAAA,kBAAA,IAGpC;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,KAAK;AAAA,sBACL,IAAI,YAAY,aAAa;AAAA,sBAC7B,MAAM,YAAY,SAAS;AAAA,sBAC3B,cAAY,YAAY,mBAAmB;AAAA,sBAC3C,yBAAuB;AAAA,sBACvB,WAAW,YAAY,aAAa;AAAA,sBACpC,OACE,YAAY,EAAE,QAAQ,YAAY,aAAA,MAAmB;AAAA,sBAGtD,UAAA,aAAa,IAAI,CAAC,QAAQ;AACzB,8BAAM,OAAO,MAAM,IAAI,KAAK;AAC5B,4BAAI,CAAC,KAAM,QAAO;AAClB,+BACE;AAAA,0BAAC;AAAA,0BAAA;AAAA,4BAEC,cAAY,IAAI;AAAA,4BAChB,KAAK,YAAY;AAAA,4BACjB,WACE,YAAY,6BAA6B;AAAA,4BAE3C,OACE,YACI;AAAA,8BACE,WAAW,cAAc,IAAI,QAAQ,YAAY,QAAQ,YAAY;AAAA,4BAAA,IAEvE;AAAA,4BAGN,UAAA;AAAA,8BAAC;AAAA,8BAAA;AAAA,gCACC,MAAM,WAAW,KAAK,IAAI;AAAA,gCAC1B,MAAM,YAAY,SAAY,IAAI,QAAQ;AAAA,gCAC1C;AAAA,gCACA;AAAA,gCACA,SAAS,KAAK;AAAA,gCACd,UAAU,aAAa,IAAI,UAAU;AAAA,gCACrC,UACE,YAAY,WAAW,KAAK,KAAK,IAAI,IAAI;AAAA,gCAE3C,QAAQ,YAAY,IAAI,KAAK,KAAK,IAAI;AAAA,gCACtC,SAAS,gBAAgB,KAAK,KAAK;AAAA,gCACnC,aAAa,MAAM,UAAU,KAAK,IAAI;AAAA,gCACtC,cAAc,MAAM,WAAW,WAAW,KAAK,IAAI,CAAC;AAAA,8BAAA;AAAA,4BAAA;AAAA,0BACtD;AAAA,0BA5BK,IAAI;AAAA,wBAAA;AAAA,sBA+Bf,CAAC;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAIJ,aAAa,QAAQ,SAAS,KAC7B,qBAAC,OAAA,EAAI,WAAU,sFACb,UAAA;AAAA,oBAAA,oBAAC,OAAA,EAAI,WAAW,KAAK,UAAA,KAAC;AAAA,oBACtB,oBAAC,OAAA,EAAI,WAAW,KAAK,UAAA,KAAC;AAAA,oBACtB,oBAAC,QAAA,EAAK,WAAU,UAAS,UAAA,QAAI;AAAA,oBAC7B,oBAAC,OAAA,EAAI,WAAW,KAAK,UAAA,SAAK;AAAA,oBAC1B,oBAAC,QAAA,EAAK,WAAU,UAAS,UAAA,aAAS;AAAA,oBAClC,oBAAC,OAAA,EAAI,WAAW,KAAK,UAAA,KAAC;AAAA,oBACtB,oBAAC,QAAA,EAAK,WAAU,UAAS,UAAA,aAAS;AAAA,oBAClC,oBAAC,OAAA,EAAI,WAAW,KAAK,UAAA,OAAG;AAAA,oBACxB,oBAAC,UAAK,UAAA,QAAA,CAAK;AAAA,kBAAA,EAAA,CACb;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAIJ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN;AAAA,gBACA,UAAU,CAAC,CAAC,YAAY,CAAC,CAAC;AAAA,cAAA;AAAA,YAAA;AAAA,YAE3B,YACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,UAAU,MAAM,IAAI,CAAC,SAAS,KAAK,KAAK,IAAI;AAAA,gBAC5C,SAAS;AAAA,gBAET,YAAY,CAAC,SAAS,KAAK,SAAS,MAAM,IAAI;AAAA,gBAC9C,QAAQ,YAAY,IAAI,QAAQ;AAAA,gBAChC,SAAS,gBAAgB;AAAA,gBACzB,aAAa;AAAA,gBACb;AAAA,gBAEA,aAAa,CAAC,WACZ,KAAK,SAAS;AAAA,kBACZ,IAAI;AAAA,kBACJ,QAAQ,CAAC,UAAU,EAAE,GAAG,MAAM,KAAK,OAAA;AAAA,gBAAO,CAC3C;AAAA,cAAA;AAAA,YAAA;AAAA,YAIN,UACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,aAAa,OAAO;AAAA,gBACpB,SAAS,MAAM,UAAU,IAAI;AAAA,gBAC7B,YAAY,CAAC,SAAS;AACpB,4BAAU,IAAI;AACd,uBAAK,SAAS,IAAI;AAAA,gBACpB;AAAA,gBACA,QAAQ,CAAC,SAAS;AAChB,4BAAU,IAAI;AACd,4BAAU;AAAA,oBACR,MAAM;AAAA,oBACN,MACE,qBAAA,UAAA,EACE,UAAA;AAAA,sBAAA,oBAAC,OAAE,UAAA,WAAA,CAAQ;AAAA,sBAAI;AAAA,oBAAA,GACjB;AAAA,oBAEF,QAAQ,EAAE,OAAO,aAAa,KAAK,MAAM,KAAK,SAAS,IAAI,EAAA;AAAA,kBAAE,CAC9D;AAAA,gBACH;AAAA,cAAA;AAAA,YAAA;AAAA,YAIJ,oBAAC,OAAA,EAAM,OAAc,WAAW,aAAA,CAAc;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAChD;AAAA,EAAA;AAGN;AAGA,SAAS,eAAe;AACtB,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,aAAU;AAAA,MACV,WAAU;AAAA,MAET,WAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAAC,MACd;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,oBAAC,UAAA,EAAS,WAAU,oBAAA,CAAoB;AAAA,YACxC,oBAAC,UAAA,EAAS,WAAW,UAAA,CAAW;AAAA,YAChC,qBAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,cAAA,oBAAC,UAAA,EAAS,WAAU,cAAA,CAAc;AAAA,cAClC,oBAAC,UAAA,EAAS,WAAU,cAAA,CAAc;AAAA,cAClC,oBAAC,UAAA,EAAS,WAAU,cAAA,CAAc;AAAA,YAAA,GACpC;AAAA,YAEA,oBAAC,OAAA,EAAI,WAAU,qBAAA,CAAqB;AAAA,UAAA;AAAA,QAAA;AAAA,QAX/B;AAAA,MAAA,CAaR;AAAA,IAAA;AAAA,EAAA;AAGP;AAEA,SAAS,UAAU,EAAE,WAAoC;AACvD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,6BAEX,OAAA,EACC,UAAA;AAAA,UAAA,oBAAC,KAAA,EAAE,WAAU,aAAY,UAAA,mCAA+B;AAAA,UACxD,oBAAC,KAAA,EAAE,WAAU,gCAA+B,UAAA,iEAAA,CAE5C;AAAA,QAAA,GACF;AAAA,QACA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS;AAAA,YACT,WAAU;AAAA,YAEV,UAAA;AAAA,cAAA,oBAAC,WAAA,EAAU,eAAY,QAAO,WAAU,UAAS;AAAA,cAAE;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAErD;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,SAAS,UAAU,EAAE,OAAO,SAA+C;AACzE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAU;AAAA,MAEV,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,6BAEX,OAAA,EACC,UAAA;AAAA,UAAA,qBAAC,KAAA,EAAE,WAAU,aAAY,UAAA;AAAA,YAAA;AAAA,YAAkB;AAAA,YAAM;AAAA,UAAA,GAAE;AAAA,UACnD,qBAAC,KAAA,EAAE,WAAU,gCAA+B,UAAA;AAAA,YAAA;AAAA,YAEvB;AAAA,YACnB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,WAAU;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED,EAAA,CACF;AAAA,QAAA,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"CommunityPage.js","sources":["../../../../../src/modules/communityTools/ui/CommunityPage.tsx"],"sourcesContent":["import type {\n  CommunityTool,\n  FeedSort,\n  MatchField,\n  SortDir,\n} from '@igstack/app-catalog-shared-core'\nimport { rankTools, searchTools } from '@igstack/app-catalog-shared-core'\nimport { useLocation, useNavigate } from '@tanstack/react-router'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport { AlertTriangle, Plus, RefreshCw, Search, Star } from 'lucide-react'\nimport {\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { useAuthModal } from '~/modules/auth/AuthModalContext'\nimport { Skeleton } from '~/ui/skeleton'\nimport { useCommunityTools } from '../useCommunityTools'\nimport { FeedRow, ROW_THUMB } from './FeedRow'\nimport { FeedSortControl, feedHeading } from './FeedSortControl'\nimport { MarginPreview } from './MarginPreview'\nimport { MyToolsShelf } from './MyToolsShelf'\nimport { TagRow } from './TagRow'\nimport { Toast } from './Toast'\nimport type { ToastMessage } from './Toast'\nimport { ToolCard } from './ToolCard'\nimport { ToolFormDialog } from './ToolFormDialog'\nimport { ToolSearch } from './ToolSearch'\nimport { openSite } from '../siteOpen'\n\nconst KBD =\n  'rounded-[5px] border border-b-2 border-border bg-card px-1.5 py-px text-[11px] font-semibold text-muted-foreground'\n\ninterface ListItem {\n  tool: CommunityTool\n  matched?: MatchField[]\n}\n\nexport interface CommunityPageProps {\n  /** `?tag=`: `<kind>:<value>`, or none for the whole feed. */\n  tag: string | undefined\n  sort: FeedSort\n  dir: SortDir\n  onTagChange: (tag: string | undefined) => void\n  onSortChange: (sort: FeedSort, dir: SortDir) => void\n  /** The tool whose card is open over the page (`/community/<slug>`). */\n  cardSlug?: string\n}\n\nconst RESULTS_ID = 'community-results-grid'\n\n/** Stable per tool, so the active descendant survives re-renders and re-ranking. */\nfunction optionIdOf(slug: string): string {\n  return `community-option-${slug}`\n}\n\nexport function CommunityPage({\n  tag,\n  sort,\n  dir,\n  onTagChange,\n  onSortChange,\n  cardSlug,\n}: CommunityPageProps) {\n  const {\n    list,\n    pins,\n    appNames,\n    isAuthenticated,\n    isAuthLoading,\n    pin,\n    unpin,\n    pinBusySlug,\n    reorder,\n    like,\n    unlike,\n    withMyLike,\n  } = useCommunityTools()\n  const { open: openSignIn } = useAuthModal()\n  const navigate = useNavigate()\n  // Signing in comes back here: this page, or the card open over it. The\n  // router's own location, so it holds under any history (and in tests).\n  const here = useLocation({ select: (l) => l.href })\n  const signInHere = () => openSignIn(here)\n\n  const [query, setQuery] = useState('')\n  const [selected, setSelected] = useState(0)\n  const tokens = useMemo(\n    () => query.trim().toLowerCase().split(/\\s+/).filter(Boolean),\n    [query],\n  )\n  const searching = tokens.length > 0\n\n  const [toast, setToast] = useState<ToastMessage | null>(null)\n  const toastIdRef = useRef(0)\n  const showToast = useCallback((message: Omit<ToastMessage, 'id'>) => {\n    toastIdRef.current += 1\n    setToast({ ...message, id: toastIdRef.current })\n  }, [])\n  const dismissToast = useCallback(() => setToast(null), [])\n\n  const tools = useMemo(() => list.data ?? [], [list.data])\n  const withTag = useCallback(\n    (all: CommunityTool[]) =>\n      tag\n        ? all.filter((t) => t.tags.some((g) => `${g.kind}:${g.value}` === tag))\n        : all,\n    [tag],\n  )\n\n  const feed = useMemo<ListItem[]>(\n    () => withTag(rankTools(tools, sort, dir)).map((tool) => ({ tool })),\n    [tools, sort, dir, withTag],\n  )\n\n  // Strongest match first; archived tools still found, after the rest.\n  const results = useMemo<ListItem[]>(\n    () =>\n      searching\n        ? searchTools(withTag(tools), query, appNames, sort, dir).map(\n            ({ tool, fields }) => ({ tool, matched: fields }),\n          )\n        : [],\n    [searching, tools, query, appNames, sort, dir, withTag],\n  )\n\n  const items = searching ? results : feed\n  const selectedIndex = Math.min(selected, results.length - 1)\n  const selectedTool = results[selectedIndex]?.tool\n  const activeOptionId =\n    searching && selectedTool ? optionIdOf(selectedTool.slug) : undefined\n\n  const pinnedSlugs = useMemo(\n    () => new Set((pins.data ?? []).map((t) => t.slug)),\n    [pins.data],\n  )\n\n  const pinError = (retry: () => void) => () =>\n    showToast({\n      tone: 'error',\n      text: 'Could not save the pin. Check your connection.',\n      action: { label: 'Try again', run: retry },\n    })\n\n  const pinTool = (slug: string) =>\n    pin.mutate(\n      { slug },\n      {\n        onSuccess: () =>\n          showToast({\n            tone: 'info',\n            text: 'Pinned to My tools',\n            action: { label: 'Undo', run: () => unpinTool(slug, false) },\n          }),\n        onError: pinError(() => pinTool(slug)),\n      },\n    )\n  const unpinTool = (slug: string, offerUndo = true) =>\n    unpin.mutate(\n      { slug },\n      {\n        onSuccess: () => {\n          if (offerUndo) {\n            showToast({\n              tone: 'info',\n              text: 'Removed from My tools',\n              action: { label: 'Undo', run: () => pinTool(slug) },\n            })\n          }\n        },\n        onError: pinError(() => unpinTool(slug, offerUndo)),\n      },\n    )\n  const togglePin = (tool: CommunityTool) => {\n    if (!isAuthenticated) {\n      signInHere()\n      return\n    }\n    if (pinnedSlugs.has(tool.slug)) unpinTool(tool.slug)\n    else pinTool(tool.slug)\n  }\n\n  const toggleLike = (tool: CommunityTool) => {\n    if (!isAuthenticated) {\n      signInHere()\n      return\n    }\n    const save = tool.likedByMe ? unlike : like\n    save.mutate(\n      { slug: tool.slug },\n      {\n        onError: () =>\n          showToast({\n            tone: 'error',\n            text: 'Could not save the like. Check your connection.',\n            action: { label: 'Try again', run: () => toggleLike(tool) },\n          }),\n      },\n    )\n  }\n\n  // A failed save puts the tiles back (the pins refetch); say why they moved.\n  const reorderPins = (slugs: string[]) =>\n    reorder.mutate(\n      { slugs },\n      {\n        onError: () =>\n          showToast({\n            tone: 'error',\n            text: \"Couldn't save the new order\",\n            action: { label: 'Try again', run: () => reorderPins(slugs) },\n          }),\n      },\n    )\n\n  // Open: `{}` from Add a tool, the search text from \"Add it\".\n  const [adding, setAdding] = useState<{ prefillName?: string } | null>(null)\n  const startAdd = (prefillName?: string) => {\n    // Adding needs an identity: sign in, then come back to this page.\n    if (!isAuthenticated) signInHere()\n    else setAdding({ prefillName })\n  }\n\n  const openCard = (slug: string, replace = false) =>\n    navigate({\n      to: '/community/$slug',\n      params: { slug },\n      search: (prev) => prev,\n      replace,\n    })\n  const closeCard = () =>\n    void navigate({ to: '/community', search: (prev) => prev })\n\n  // The page column scrolls (the layout pins the header), not the list: the\n  // virtualizer needs where the list starts inside that column. Everything\n  // above it can change height — the shelf loads, hides while searching, goes\n  // from 2 to 4 columns at `md` — and all of that resizes the page, so one\n  // observer on it catches each case.\n  const scrollRef = useRef<HTMLDivElement>(null)\n  const pageRef = useRef<HTMLDivElement>(null)\n  const [listEl, setListEl] = useState<HTMLDivElement | null>(null)\n  const [scrollMargin, setScrollMargin] = useState(0)\n  useEffect(() => {\n    const scroller = scrollRef.current\n    const page = pageRef.current\n    if (!scroller || !page || !listEl) return\n    const measure = () =>\n      setScrollMargin(\n        listEl.getBoundingClientRect().top -\n          scroller.getBoundingClientRect().top +\n          scroller.scrollTop,\n      )\n    const observer = new ResizeObserver(measure)\n    observer.observe(page)\n    measure()\n    return () => observer.disconnect()\n  }, [listEl])\n  // No layout, no window (jsdom, a print preview): the column measures 0 tall,\n  // a virtualizer mounts nothing, so every row is rendered instead.\n  const [hasLayout, setHasLayout] = useState(true)\n  useLayoutEffect(() => {\n    setHasLayout((scrollRef.current?.clientHeight ?? 0) > 0)\n  }, [])\n  // Stable on purpose: the virtualizer keys its measurement cache on this\n  // function's identity, so a new arrow every render re-renders forever.\n  const getItemKey = useCallback(\n    (i: number) => items[i]?.tool.slug ?? i,\n    [items],\n  )\n  // TanStack Virtual hands back functions the React Compiler cannot memoize\n  // safely, so it skips this hook; registered in the root eslint.config.js.\n  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Virtual\n  const virtualizer = useVirtualizer({\n    getScrollElement: () => scrollRef.current,\n    // The column's height before it is measured, so the first paint already\n    // holds the rows that will be visible.\n    initialRect: { width: 0, height: 800 },\n    count: items.length,\n    // The thumbnail sets the row: 150 px, 12 px padding either side, borders.\n    estimateSize: () => 176,\n    overscan: 6,\n    gap: 8,\n    scrollMargin,\n    getItemKey,\n  })\n\n  // Keep the selected result on screen. The next row is almost always already\n  // mounted (overscan), and the browser scrolls it exactly; the virtualizer's\n  // own estimate-based scroll is only for a row that is not there yet.\n  useEffect(() => {\n    if (!searching || selectedIndex < 0) return\n    const row = listEl?.querySelector(`[data-index=\"${selectedIndex}\"]`)\n    if (row) row.scrollIntoView({ block: 'nearest' })\n    else virtualizer.scrollToIndex(selectedIndex, { align: 'auto' })\n  }, [searching, selectedIndex, virtualizer, listEl])\n\n  const onSearchKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    const current = results[selectedIndex]\n    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n      if (results.length === 0) return\n      e.preventDefault()\n      const step = e.key === 'ArrowDown' ? 1 : -1\n      setSelected(\n        Math.min(results.length - 1, Math.max(0, selectedIndex + step)),\n      )\n    } else if (e.key === 'Enter' && current) {\n      e.preventDefault()\n      openSite(current.tool)\n    } else if (\n      e.key === 'ArrowRight' &&\n      current &&\n      e.currentTarget.selectionStart === e.currentTarget.value.length\n    ) {\n      // Only at the end of the text, so → still moves the caret inside it.\n      e.preventDefault()\n      void openCard(current.tool.slug)\n    }\n  }\n\n  // Without layout every row is \"virtual\", at its natural place in the flow.\n  const virtualItems = hasLayout\n    ? virtualizer.getVirtualItems()\n    : items.map((_, index) => ({\n        key: items[index]!.tool.slug,\n        index,\n        start: virtualizer.options.scrollMargin,\n      }))\n\n  return (\n    <div\n      ref={scrollRef}\n      data-preview-scroller\n      className=\"min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable]\"\n    >\n      <div\n        ref={pageRef}\n        data-preview-column\n        className=\"mx-auto w-full max-w-[1000px] pt-1.5 pb-10\"\n      >\n        <div className=\"mb-[22px] flex items-center gap-2.5\">\n          <ToolSearch\n            value={query}\n            onChange={(value) => {\n              setQuery(value)\n              setSelected(0)\n            }}\n            resultCount={results.length}\n            resultsId={searching && results.length > 0 ? RESULTS_ID : undefined}\n            activeDescendant={activeOptionId}\n            onKey={onSearchKey}\n          />\n          <button\n            type=\"button\"\n            onClick={() => startAdd()}\n            className=\"inline-flex h-10 shrink-0 items-center gap-[7px] rounded-[10px] border border-border bg-card px-3.5 text-[13.5px] font-bold whitespace-nowrap hover:border-primary/40 focus-visible:outline-2 focus-visible:outline-ring\"\n          >\n            <Plus aria-hidden=\"true\" className=\"size-4\" />\n            Add a tool\n          </button>\n        </div>\n\n        {searching ? (\n          <div className=\"-mt-2 mb-3.5 ml-1 flex items-center gap-2 text-[13px] font-semibold text-muted-foreground\">\n            <Star\n              aria-hidden=\"true\"\n              className=\"size-4 fill-amber-400 text-amber-600\"\n            />\n            My tools is hidden while you search\n          </div>\n        ) : (\n          <div className=\"mb-[26px]\">\n            <MyToolsShelf\n              pins={pins.data ?? []}\n              isLoading={isAuthLoading || (isAuthenticated && pins.isPending)}\n              onUnpin={(tool) => togglePin(tool)}\n              onReorder={reorderPins}\n            />\n          </div>\n        )}\n\n        <section\n          aria-label={searching ? 'Search results' : feedHeading(sort, dir)}\n          data-testid={searching ? 'community-results' : 'community-feed'}\n        >\n          {!searching && (\n            <>\n              <div className=\"mb-3 flex items-center justify-between\">\n                <h2 className=\"font-serif text-[19px] font-semibold\">\n                  {feedHeading(sort, dir)}\n                </h2>\n                <FeedSortControl\n                  sort={sort}\n                  dir={dir}\n                  onChange={onSortChange}\n                />\n              </div>\n              <TagRow\n                tools={rankTools(tools, sort, dir)}\n                activeTag={tag}\n                appNames={appNames}\n                onChoose={onTagChange}\n              />\n            </>\n          )}\n\n          {list.isPending ? (\n            <FeedSkeleton />\n          ) : list.isError ? (\n            <FeedError onRetry={() => void list.refetch()} />\n          ) : searching && results.length === 0 ? (\n            <NoResults\n              query={query.trim()}\n              onAdd={() => startAdd(query.trim())}\n            />\n          ) : (\n            <div\n              ref={setListEl}\n              id={searching ? RESULTS_ID : undefined}\n              role={searching ? 'grid' : undefined}\n              aria-label={searching ? 'Search results' : undefined}\n              aria-activedescendant={activeOptionId}\n              className={hasLayout ? 'relative' : 'flex flex-col gap-2'}\n              style={\n                hasLayout ? { height: virtualizer.getTotalSize() } : undefined\n              }\n            >\n              {virtualItems.map((row) => {\n                const item = items[row.index]\n                if (!item) return null\n                return (\n                  <div\n                    key={row.key}\n                    data-index={row.index}\n                    ref={virtualizer.measureElement}\n                    className={\n                      hasLayout ? 'absolute inset-x-0 top-0' : undefined\n                    }\n                    style={\n                      hasLayout\n                        ? {\n                            transform: `translateY(${row.start - virtualizer.options.scrollMargin}px)`,\n                          }\n                        : undefined\n                    }\n                  >\n                    <FeedRow\n                      tool={withMyLike(item.tool)}\n                      rank={searching ? undefined : row.index + 1}\n                      sort={sort}\n                      tokens={tokens}\n                      matched={item.matched}\n                      selected={searching && row.index === selectedIndex}\n                      optionId={\n                        searching ? optionIdOf(item.tool.slug) : undefined\n                      }\n                      pinned={pinnedSlugs.has(item.tool.slug)}\n                      pinBusy={pinBusySlug === item.tool.slug}\n                      onTogglePin={() => togglePin(item.tool)}\n                      onToggleLike={() => toggleLike(withMyLike(item.tool))}\n                    />\n                  </div>\n                )\n              })}\n            </div>\n          )}\n\n          {searching && results.length > 0 && (\n            <div className=\"mt-3.5 flex items-center gap-1.5 text-[12.5px] font-semibold text-muted-foreground\">\n              <kbd className={KBD}>↑</kbd>\n              <kbd className={KBD}>↓</kbd>\n              <span className=\"mr-2.5\">move</span>\n              <kbd className={KBD}>Enter</kbd>\n              <span className=\"mr-2.5\">open site</span>\n              <kbd className={KBD}>→</kbd>\n              <span className=\"mr-2.5\">open card</span>\n              <kbd className={KBD}>Esc</kbd>\n              <span>clear</span>\n            </div>\n          )}\n        </section>\n\n        <MarginPreview\n          list={listEl}\n          tools={tools}\n          disabled={!!cardSlug || !!adding}\n        />\n        {cardSlug && (\n          <ToolCard\n            slug={cardSlug}\n            siblings={items.map((item) => item.tool.slug)}\n            onClose={closeCard}\n            // Stepping swaps the card in place; Back still leaves the card.\n            onNavigate={(slug) => void openCard(slug, true)}\n            pinned={pinnedSlugs.has(cardSlug)}\n            pinBusy={pinBusySlug === cardSlug}\n            onTogglePin={togglePin}\n            appNames={appNames}\n            // One step: the card closes onto the feed already filtered.\n            onChooseTag={(chosen) =>\n              void navigate({\n                to: '/community',\n                search: (prev) => ({ ...prev, tag: chosen }),\n              })\n            }\n          />\n        )}\n        {adding && (\n          <ToolFormDialog\n            mode=\"add\"\n            prefillName={adding.prefillName}\n            onClose={() => setAdding(null)}\n            onOpenCard={(slug) => {\n              setAdding(null)\n              void openCard(slug)\n            }}\n            onDone={(slug) => {\n              setAdding(null)\n              showToast({\n                tone: 'ok',\n                text: (\n                  <>\n                    <b>Live now</b>, in the review list\n                  </>\n                ),\n                action: { label: 'Open card', run: () => void openCard(slug) },\n              })\n            }}\n          />\n        )}\n        {/* After the card, so a toast raised from it shows above its scrim. */}\n        <Toast toast={toast} onDismiss={dismissToast} />\n      </div>\n    </div>\n  )\n}\n\n/** Three placeholder rows at the real row height. */\nfunction FeedSkeleton() {\n  return (\n    <div\n      data-testid=\"feed-skeleton\"\n      aria-busy=\"true\"\n      className=\"flex flex-col gap-2\"\n    >\n      {[0, 1, 2].map((i) => (\n        <div\n          key={i}\n          className=\"flex min-h-[176px] items-center gap-4 rounded-[14px] border border-border bg-card py-3 pl-3\"\n        >\n          <Skeleton className=\"h-[22px] w-[26px]\" />\n          <Skeleton className={ROW_THUMB} />\n          <div className=\"flex flex-1 flex-col gap-2\">\n            <Skeleton className=\"h-2.5 w-2/5\" />\n            <Skeleton className=\"h-2.5 w-4/5\" />\n            <Skeleton className=\"h-2.5 w-1/4\" />\n          </div>\n          {/* The Details panel's reserved width. */}\n          <div className=\"w-[120px] shrink-0\" />\n        </div>\n      ))}\n    </div>\n  )\n}\n\nfunction FeedError({ onRetry }: { onRetry: () => void }) {\n  return (\n    <div\n      data-testid=\"feed-error\"\n      role=\"alert\"\n      className=\"flex items-center gap-3.5 rounded-[14px] border border-destructive/30 bg-destructive/5 px-5 py-[18px]\"\n    >\n      <AlertTriangle\n        aria-hidden=\"true\"\n        className=\"size-[22px] shrink-0 text-destructive\"\n      />\n      <div>\n        <b className=\"font-bold\">Could not load community tools.</b>\n        <p className=\"mt-0.5 text-muted-foreground\">\n          The server did not answer. Your pinned tools above still work.\n        </p>\n      </div>\n      <button\n        type=\"button\"\n        onClick={onRetry}\n        className=\"ml-auto inline-flex h-10 shrink-0 items-center gap-[7px] rounded-[10px] border border-border bg-card px-3.5 text-[13.5px] font-bold hover:border-primary/40 focus-visible:outline-2 focus-visible:outline-ring\"\n      >\n        <RefreshCw aria-hidden=\"true\" className=\"size-4\" />\n        Try again\n      </button>\n    </div>\n  )\n}\n\nfunction NoResults({ query, onAdd }: { query: string; onAdd: () => void }) {\n  return (\n    <div\n      data-testid=\"no-results\"\n      className=\"flex gap-3.5 rounded-[14px] border border-border bg-card px-5 py-[18px]\"\n    >\n      <Search\n        aria-hidden=\"true\"\n        className=\"mt-0.5 size-5 shrink-0 text-muted-foreground\"\n      />\n      <div>\n        <b className=\"font-bold\">Nothing matches “{query}”.</b>\n        <p className=\"mt-0.5 text-muted-foreground\">\n          Try a word from the page itself, or the name of the person who shared\n          it. Know the tool?{' '}\n          <button\n            type=\"button\"\n            onClick={onAdd}\n            className=\"font-bold text-primary hover:underline focus-visible:outline-2 focus-visible:outline-ring\"\n          >\n            Add it\n          </button>\n        </p>\n      </div>\n    </div>\n  )\n}\n"],"names":["_a"],"mappings":"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"}

package/dist/esm/modules/communityTools/ui/FeedRow.d.ts

@@ -13,7 +13,10 @@ export interface FeedRowProps {
     tool: CommunityTool;
     /** Shown in the ranked feed; search results have no rank. */
     rank?: number;
-    /** A date sort shows its date on the row. */
+    /**
+     * Newest shows when it was added, Recently updated when the site changed;
+     * every other sort the site's date, or when it was added if that is unknown.
+     */
     sort: FeedSort;
     tokens: string[];
     /** Set while searching: which fields the query hit. */
@@ -34,9 +37,8 @@ export interface FeedRowProps {
 export declare const ROW_THUMB = "h-[150px] w-[240px] rounded-[10px]";
 /**
  * One tool in the feed or the search results. Everything left of the end
- * panel (rank, picture, name, summary, meta) is one link that opens the site
- * in a new tab; the 120 px panel opens the card. The star sits in the meta
- * line as its own target, above that link. The bottom strip shows the address
- * the big click goes to, on hover or focus only.
+ * panel (rank, picture, name, summary, meta) is one link that opens the
+ * site; the 120 px panel opens the card. The star sits in the meta
+ * line as its own target, above that link.
  */
 export declare function FeedRow({ tool, rank, sort, tokens, matched, selected, optionId, pinned, pinBusy, onTogglePin, onToggleLike, }: FeedRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/modules/communityTools/ui/FeedRow.js

@@ -1,9 +1,10 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Link } from "@tanstack/react-router";
-import { CornerDownLeft, Eye, ExternalLink, PanelRight, Globe } from "lucide-react";
+import { CornerDownLeft, Eye, MessageSquare, PanelRight, Globe } from "lucide-react";
 import { cn } from "../../../lib/utils.js";
 import { highlightTokens } from "../../../util/highlightMatches.js";
-import { timeAgo } from "../timeAgo.js";
+import { recordSiteOpen } from "../siteOpen.js";
+import { timeAgo, exactDate } from "../timeAgo.js";
 import { LifecycleBadge, UnreviewedBadge } from "./LifecycleBadge.js";
 import { LikeButton } from "./LikeButton.js";
 import { PinButton } from "./PinButton.js";
@@ -84,8 +85,8 @@ function FeedRow({
   const archived = tool.lifecycle.state === "archived";
   const cell = optionId ? "gridcell" : void 0;
   const owners = tool.owners.map((o) => o.name).join(", ");
-  const dated = sort === "newest" ? `Added ${timeAgo(tool.createdAt)}` : sort === "updated" && tool.siteUpdatedAt ? `Updated ${timeAgo(tool.siteUpdatedAt)}` : null;
-  const address = tool.url.replace(/^https?:\/\//, "").replace(/\/$/, "");
+  const siteUpdatedAt = sort !== "newest" ? tool.siteUpdatedAt : null;
+  const dated = siteUpdatedAt ? { label: "Updated", at: siteUpdatedAt } : sort !== "updated" ? { label: "Added", at: tool.createdAt } : null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -115,11 +116,10 @@ function FeedRow({
                     "a",
                     {
                       href: tool.url,
-                      target: "_blank",
-                      rel: "noopener noreferrer",
+                      onClick: () => recordSiteOpen(tool.slug),
                       "data-site": true,
                       "data-testid": "feed-row-name",
-                      "aria-label": `${tool.name}, opens ${tool.host} in a new tab`,
+                      "aria-label": `${tool.name}, opens ${tool.host}`,
                       className: cn(
                         "truncate decoration-1 underline-offset-[3px] after:absolute after:inset-y-0 after:left-0 after:right-[120px] after:z-[1] after:rounded-l-[13px] focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:-outline-offset-[3px] focus-visible:after:outline-ring",
                         "group-hover/row:underline group-has-[[data-details]:hover]/row:no-underline",
@@ -191,31 +191,29 @@ function FeedRow({
                           ]
                         }
                       ),
-                      dated && /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: "·" }),
-                        /* @__PURE__ */ jsx(
-                          "span",
-                          {
-                            "data-testid": "feed-row-date",
-                            className: "text-muted-foreground",
-                            children: dated
-                          }
-                        )
-                      ] })
+                      tool.comments > 0 && /* @__PURE__ */ jsxs(
+                        "span",
+                        {
+                          "data-testid": "feed-row-comments",
+                          className: "inline-flex items-center gap-1 text-muted-foreground",
+                          children: [
+                            /* @__PURE__ */ jsx(MessageSquare, { "aria-hidden": "true", className: "size-[15px]" }),
+                            tool.comments,
+                            /* @__PURE__ */ jsx("span", { className: "sr-only", children: tool.comments === 1 ? " comment" : " comments" })
+                          ]
+                        }
+                      )
                     ] }),
-                    /* @__PURE__ */ jsxs(
-                      "div",
+                    dated && /* @__PURE__ */ jsxs(
+                      "span",
                       {
-                        "aria-hidden": "true",
-                        "data-testid": "feed-row-address",
-                        className: cn(
-                          "flex h-full min-w-[150px] flex-1 items-center justify-end gap-1.5 px-4 font-mono text-[12.5px] text-muted-foreground opacity-0 transition-opacity",
-                          "group-hover/row:text-foreground group-hover/row:opacity-100 group-has-[[data-site]:focus-visible]/row:opacity-100 group-has-[[data-details]:hover]/row:opacity-0 [@media(hover:none)]:opacity-100",
-                          selected && "opacity-100"
-                        ),
+                        "data-testid": "feed-row-date",
+                        title: exactDate(dated.at),
+                        className: "pointer-events-auto ml-auto shrink-0 pr-4 text-[13px] font-semibold whitespace-nowrap text-muted-foreground",
                         children: [
-                          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: address }),
-                          /* @__PURE__ */ jsx(ExternalLink, { "aria-hidden": "true", className: "size-3.5 shrink-0" })
+                          dated.label,
+                          " ",
+                          timeAgo(dated.at)
                         ]
                       }
                     )

package/dist/esm/modules/communityTools/ui/FeedRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"FeedRow.js","sources":["../../../../../src/modules/communityTools/ui/FeedRow.tsx"],"sourcesContent":["import type {\n  CommunityTool,\n  FeedSort,\n  MatchField,\n} from '@igstack/app-catalog-shared-core'\nimport { Link } from '@tanstack/react-router'\nimport {\n  CornerDownLeft,\n  ExternalLink,\n  Eye,\n  Globe,\n  PanelRight,\n} from 'lucide-react'\nimport { cn } from '~/lib/utils'\nimport { highlightTokens } from '~/util/highlightMatches'\nimport { timeAgo } from '../timeAgo'\nimport { LifecycleBadge, UnreviewedBadge } from './LifecycleBadge'\nimport { LikeButton } from './LikeButton'\nimport { PinButton } from './PinButton'\n\nexport function screenshotUrl(id: string, size: number): string {\n  return `/api/screenshots/${id}?size=${size}`\n}\n\n/** The tool's screenshot, cropped to its top-left, or a globe when there is none. */\nexport function ToolThumb({\n  tool,\n  size,\n  className,\n}: {\n  tool: CommunityTool\n  size: number\n  className?: string\n}) {\n  return (\n    <div\n      className={cn(\n        'flex shrink-0 items-center justify-center overflow-hidden border border-border bg-muted text-muted-foreground',\n        className,\n      )}\n    >\n      {tool.screenshotId ? (\n        <img\n          src={screenshotUrl(tool.screenshotId, size)}\n          alt=\"\"\n          loading=\"lazy\"\n          className=\"size-full object-cover object-left-top\"\n        />\n      ) : (\n        <Globe aria-hidden=\"true\" className=\"size-1/4 min-w-4\" />\n      )}\n    </div>\n  )\n}\n\nconst AVATAR_TONES = [\n  'bg-orange-200',\n  'bg-sky-200',\n  'bg-lime-200',\n  'bg-amber-200',\n  'bg-rose-200',\n  'bg-violet-200',\n]\n\nexport function PersonAvatar({ name }: { name: string }) {\n  const initials = name\n    .split(/\\s+/)\n    .slice(0, 2)\n    .map((w) => w.charAt(0).toUpperCase())\n    .join('')\n  let hash = 0\n  for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) | 0\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn(\n        'inline-flex size-[22px] shrink-0 items-center justify-center rounded-full text-[9.5px] font-extrabold text-stone-700',\n        AVATAR_TONES[Math.abs(hash) % AVATAR_TONES.length],\n      )}\n    >\n      {initials}\n    </span>\n  )\n}\n\nconst FIELD_LABELS: Record<MatchField, string> = {\n  name: 'name',\n  summary: 'summary',\n  description: 'how to use',\n  owner: 'author',\n  address: 'address',\n  tag: 'tag',\n}\n\nexport interface FeedRowProps {\n  tool: CommunityTool\n  /** Shown in the ranked feed; search results have no rank. */\n  rank?: number\n  /** A date sort shows its date on the row. */\n  sort: FeedSort\n  tokens: string[]\n  /** Set while searching: which fields the query hit. */\n  matched?: MatchField[]\n  selected?: boolean\n  /**\n   * Set while searching: the row is a row of the results grid, and this is the\n   * id of its main cell, the one the search box points at.\n   */\n  optionId?: string\n  pinned: boolean\n  /** Its pin is being saved. */\n  pinBusy?: boolean\n  onTogglePin: () => void\n  onToggleLike: () => void\n}\n\n/** The feed row's thumbnail: big enough to read the page title in its top left. */\nexport const ROW_THUMB = 'h-[150px] w-[240px] rounded-[10px]'\n\n/** The Details panel's width, reserved at rest so nothing moves when it shows. */\nconst PANEL = 'w-[120px]'\n\n/**\n * One tool in the feed or the search results. Everything left of the end\n * panel (rank, picture, name, summary, meta) is one link that opens the site\n * in a new tab; the 120 px panel opens the card. The star sits in the meta\n * line as its own target, above that link. The bottom strip shows the address\n * the big click goes to, on hover or focus only.\n */\nexport function FeedRow({\n  tool,\n  rank,\n  sort,\n  tokens,\n  matched,\n  selected = false,\n  optionId,\n  pinned,\n  pinBusy,\n  onTogglePin,\n  onToggleLike,\n}: FeedRowProps) {\n  const archived = tool.lifecycle.state === 'archived'\n  const cell = optionId ? 'gridcell' : undefined\n  const owners = tool.owners.map((o) => o.name).join(', ')\n  const dated =\n    sort === 'newest'\n      ? `Added ${timeAgo(tool.createdAt)}`\n      : sort === 'updated' && tool.siteUpdatedAt\n        ? `Updated ${timeAgo(tool.siteUpdatedAt)}`\n        : null\n  const address = tool.url.replace(/^https?:\\/\\//, '').replace(/\\/$/, '')\n\n  return (\n    <div\n      data-testid=\"feed-row\"\n      data-slug={tool.slug}\n      data-selected={selected || undefined}\n      role={optionId ? 'row' : undefined}\n      className={cn(\n        'group/row relative flex min-h-[176px] items-center overflow-hidden rounded-[14px] border bg-card transition-[border-color,box-shadow]',\n        selected\n          ? 'border-primary ring-[3px] ring-primary/20'\n          : 'border-border hover:border-primary/35 hover:shadow-sm has-[:focus-visible]:border-primary/35',\n        archived && 'opacity-55',\n      )}\n    >\n      {/* Two cells while searching: the site, and the card. A grid rather\n          than a listbox, because an option's content is presentational and\n          would hide the link and the star. */}\n      <div\n        id={optionId}\n        role={cell}\n        aria-selected={optionId ? selected : undefined}\n        className=\"flex min-w-0 flex-1 items-center gap-4 self-stretch py-3 pl-3\"\n      >\n        {rank !== undefined && (\n          <span className=\"w-[26px] shrink-0 text-center font-serif text-[22px] font-semibold text-muted-foreground/70\">\n            {rank}\n          </span>\n        )}\n        <ToolThumb tool={tool} size={512} className={ROW_THUMB} />\n        <div className=\"min-w-0 flex-1 self-start pt-5 pr-6 pb-[52px]\">\n          <div className=\"flex items-center gap-2.5 text-[15.5px] font-extrabold\">\n            <a\n              href={tool.url}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              data-site\n              data-testid=\"feed-row-name\"\n              aria-label={`${tool.name}, opens ${tool.host} in a new tab`}\n              className={cn(\n                'truncate decoration-1 underline-offset-[3px] after:absolute after:inset-y-0 after:left-0 after:right-[120px] after:z-[1] after:rounded-l-[13px] focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:-outline-offset-[3px] focus-visible:after:outline-ring',\n                'group-hover/row:underline group-has-[[data-details]:hover]/row:no-underline',\n                archived && 'text-muted-foreground',\n              )}\n            >\n              {highlightTokens(tool.name, tokens)}\n            </a>\n            {selected && (\n              <span className=\"inline-flex shrink-0 items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[11.5px] font-bold text-primary\">\n                <CornerDownLeft aria-hidden=\"true\" className=\"size-3\" />\n                Enter opens site\n              </span>\n            )}\n            <LifecycleBadge lifecycle={tool.lifecycle} />\n            {!tool.reviewed && <UnreviewedBadge />}\n          </div>\n          {tool.summary && (\n            <div className=\"mt-1 line-clamp-2 text-foreground/75\">\n              {highlightTokens(tool.summary, tokens)}\n            </div>\n          )}\n          {matched && matched.length > 0 && (\n            <div\n              data-testid=\"match-reason\"\n              className=\"mt-1 text-xs font-semibold text-muted-foreground\"\n            >\n              Matched: {matched.map((f) => FIELD_LABELS[f]).join(', ')}\n            </div>\n          )}\n        </div>\n        {/* Meta on the left, the address on the right, flush to the panel.\n            The address keeps 150 px; a long author list gives way first.\n            Clicks fall through to the row link, except on star and like. */}\n        <div\n          className={cn(\n            'pointer-events-none absolute right-[120px] bottom-0 z-[2] flex h-12 items-center gap-4',\n            rank !== undefined ? 'left-[310px]' : 'left-[268px]',\n          )}\n        >\n          <div className=\"flex min-w-0 items-center gap-1.5 text-[13px] font-semibold whitespace-nowrap text-foreground/75 [&>*]:shrink-0\">\n            {tool.owners[0] && <PersonAvatar name={tool.owners[0].name} />}\n            <span\n              data-testid=\"feed-row-owner\"\n              className=\"mr-1 min-w-0 !shrink truncate\"\n            >\n              {highlightTokens(owners, tokens)}\n            </span>\n            <span className=\"pointer-events-auto -mr-1 flex items-center\">\n              <PinButton\n                small\n                pinned={pinned}\n                busy={pinBusy}\n                name={tool.name}\n                onToggle={onTogglePin}\n              />\n              <LikeButton tool={tool} onToggle={onToggleLike} />\n            </span>\n            <span\n              data-testid=\"feed-row-views\"\n              className=\"inline-flex items-center gap-1 text-muted-foreground\"\n            >\n              <Eye aria-hidden=\"true\" className=\"size-[15px]\" />\n              {tool.views30d}\n              <span className=\"sr-only\"> views this month</span>\n            </span>\n            {dated && (\n              <>\n                <span aria-hidden=\"true\" className=\"text-muted-foreground\">\n                  ·\n                </span>\n                <span\n                  data-testid=\"feed-row-date\"\n                  className=\"text-muted-foreground\"\n                >\n                  {dated}\n                </span>\n              </>\n            )}\n          </div>\n          <div\n            aria-hidden=\"true\"\n            data-testid=\"feed-row-address\"\n            className={cn(\n              'flex h-full min-w-[150px] flex-1 items-center justify-end gap-1.5 px-4 font-mono text-[12.5px] text-muted-foreground opacity-0 transition-opacity',\n              'group-hover/row:text-foreground group-hover/row:opacity-100 group-has-[[data-site]:focus-visible]/row:opacity-100 group-has-[[data-details]:hover]/row:opacity-0 [@media(hover:none)]:opacity-100',\n              selected && 'opacity-100',\n            )}\n          >\n            <span className=\"min-w-0 truncate\">{address}</span>\n            <ExternalLink aria-hidden=\"true\" className=\"size-3.5 shrink-0\" />\n          </div>\n        </div>\n      </div>\n      <div role={cell} className=\"flex self-stretch\">\n        <Link\n          to=\"/community/$slug\"\n          params={{ slug: tool.slug }}\n          search={(prev) => prev}\n          data-details\n          aria-label={`Details for ${tool.name}`}\n          className={cn(\n            PANEL,\n            'relative z-[2] flex flex-none flex-col items-center justify-center gap-1.5 border-l border-border/55 text-[13.5px] font-extrabold text-muted-foreground transition-colors',\n            'group-hover/row:border-border group-hover/row:bg-primary/[0.025] group-has-[:focus-visible]/row:bg-primary/[0.025]',\n            'hover:!border-primary/30 hover:!bg-primary/12 hover:text-foreground',\n            'focus-visible:rounded-r-[13px] focus-visible:!bg-primary/12 focus-visible:text-foreground focus-visible:outline-2 focus-visible:-outline-offset-[3px] focus-visible:outline-ring',\n          )}\n        >\n          {/* Shown on hover or focus; always where nothing hovers. */}\n          <span className=\"flex flex-col items-center gap-1.5 opacity-0 transition-opacity group-hover/row:opacity-100 group-has-[:focus-visible]/row:opacity-100 [@media(hover:none)]:opacity-100\">\n            <PanelRight aria-hidden=\"true\" className=\"size-[18px]\" />\n            <span>Details</span>\n          </span>\n        </Link>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FeedRow.js","sources":["../../../../../src/modules/communityTools/ui/FeedRow.tsx"],"sourcesContent":["import type {\n  CommunityTool,\n  FeedSort,\n  MatchField,\n} from '@igstack/app-catalog-shared-core'\nimport { Link } from '@tanstack/react-router'\nimport {\n  CornerDownLeft,\n  Eye,\n  Globe,\n  MessageSquare,\n  PanelRight,\n} from 'lucide-react'\nimport { cn } from '~/lib/utils'\nimport { highlightTokens } from '~/util/highlightMatches'\nimport { recordSiteOpen } from '../siteOpen'\nimport { exactDate, timeAgo } from '../timeAgo'\nimport { LifecycleBadge, UnreviewedBadge } from './LifecycleBadge'\nimport { LikeButton } from './LikeButton'\nimport { PinButton } from './PinButton'\n\nexport function screenshotUrl(id: string, size: number): string {\n  return `/api/screenshots/${id}?size=${size}`\n}\n\n/** The tool's screenshot, cropped to its top-left, or a globe when there is none. */\nexport function ToolThumb({\n  tool,\n  size,\n  className,\n}: {\n  tool: CommunityTool\n  size: number\n  className?: string\n}) {\n  return (\n    <div\n      className={cn(\n        'flex shrink-0 items-center justify-center overflow-hidden border border-border bg-muted text-muted-foreground',\n        className,\n      )}\n    >\n      {tool.screenshotId ? (\n        <img\n          src={screenshotUrl(tool.screenshotId, size)}\n          alt=\"\"\n          loading=\"lazy\"\n          className=\"size-full object-cover object-left-top\"\n        />\n      ) : (\n        <Globe aria-hidden=\"true\" className=\"size-1/4 min-w-4\" />\n      )}\n    </div>\n  )\n}\n\nconst AVATAR_TONES = [\n  'bg-orange-200',\n  'bg-sky-200',\n  'bg-lime-200',\n  'bg-amber-200',\n  'bg-rose-200',\n  'bg-violet-200',\n]\n\nexport function PersonAvatar({ name }: { name: string }) {\n  const initials = name\n    .split(/\\s+/)\n    .slice(0, 2)\n    .map((w) => w.charAt(0).toUpperCase())\n    .join('')\n  let hash = 0\n  for (const ch of name) hash = (hash * 31 + ch.charCodeAt(0)) | 0\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn(\n        'inline-flex size-[22px] shrink-0 items-center justify-center rounded-full text-[9.5px] font-extrabold text-stone-700',\n        AVATAR_TONES[Math.abs(hash) % AVATAR_TONES.length],\n      )}\n    >\n      {initials}\n    </span>\n  )\n}\n\nconst FIELD_LABELS: Record<MatchField, string> = {\n  name: 'name',\n  summary: 'summary',\n  description: 'how to use',\n  owner: 'author',\n  address: 'address',\n  tag: 'tag',\n}\n\nexport interface FeedRowProps {\n  tool: CommunityTool\n  /** Shown in the ranked feed; search results have no rank. */\n  rank?: number\n  /**\n   * Newest shows when it was added, Recently updated when the site changed;\n   * every other sort the site's date, or when it was added if that is unknown.\n   */\n  sort: FeedSort\n  tokens: string[]\n  /** Set while searching: which fields the query hit. */\n  matched?: MatchField[]\n  selected?: boolean\n  /**\n   * Set while searching: the row is a row of the results grid, and this is the\n   * id of its main cell, the one the search box points at.\n   */\n  optionId?: string\n  pinned: boolean\n  /** Its pin is being saved. */\n  pinBusy?: boolean\n  onTogglePin: () => void\n  onToggleLike: () => void\n}\n\n/** The feed row's thumbnail: big enough to read the page title in its top left. */\nexport const ROW_THUMB = 'h-[150px] w-[240px] rounded-[10px]'\n\n/** The Details panel's width, reserved at rest so nothing moves when it shows. */\nconst PANEL = 'w-[120px]'\n\n/**\n * One tool in the feed or the search results. Everything left of the end\n * panel (rank, picture, name, summary, meta) is one link that opens the\n * site; the 120 px panel opens the card. The star sits in the meta\n * line as its own target, above that link.\n */\nexport function FeedRow({\n  tool,\n  rank,\n  sort,\n  tokens,\n  matched,\n  selected = false,\n  optionId,\n  pinned,\n  pinBusy,\n  onTogglePin,\n  onToggleLike,\n}: FeedRowProps) {\n  const archived = tool.lifecycle.state === 'archived'\n  const cell = optionId ? 'gridcell' : undefined\n  const owners = tool.owners.map((o) => o.name).join(', ')\n  const siteUpdatedAt = sort !== 'newest' ? tool.siteUpdatedAt : null\n  const dated = siteUpdatedAt\n    ? { label: 'Updated', at: siteUpdatedAt }\n    : sort !== 'updated'\n      ? { label: 'Added', at: tool.createdAt }\n      : null\n\n  return (\n    <div\n      data-testid=\"feed-row\"\n      data-slug={tool.slug}\n      data-selected={selected || undefined}\n      role={optionId ? 'row' : undefined}\n      className={cn(\n        'group/row relative flex min-h-[176px] items-center overflow-hidden rounded-[14px] border bg-card transition-[border-color,box-shadow]',\n        selected\n          ? 'border-primary ring-[3px] ring-primary/20'\n          : 'border-border hover:border-primary/35 hover:shadow-sm has-[:focus-visible]:border-primary/35',\n        archived && 'opacity-55',\n      )}\n    >\n      {/* Two cells while searching: the site, and the card. A grid rather\n          than a listbox, because an option's content is presentational and\n          would hide the link and the star. */}\n      <div\n        id={optionId}\n        role={cell}\n        aria-selected={optionId ? selected : undefined}\n        className=\"flex min-w-0 flex-1 items-center gap-4 self-stretch py-3 pl-3\"\n      >\n        {rank !== undefined && (\n          <span className=\"w-[26px] shrink-0 text-center font-serif text-[22px] font-semibold text-muted-foreground/70\">\n            {rank}\n          </span>\n        )}\n        <ToolThumb tool={tool} size={512} className={ROW_THUMB} />\n        <div className=\"min-w-0 flex-1 self-start pt-5 pr-6 pb-[52px]\">\n          <div className=\"flex items-center gap-2.5 text-[15.5px] font-extrabold\">\n            <a\n              href={tool.url}\n              onClick={() => recordSiteOpen(tool.slug)}\n              data-site\n              data-testid=\"feed-row-name\"\n              aria-label={`${tool.name}, opens ${tool.host}`}\n              className={cn(\n                'truncate decoration-1 underline-offset-[3px] after:absolute after:inset-y-0 after:left-0 after:right-[120px] after:z-[1] after:rounded-l-[13px] focus-visible:outline-none focus-visible:after:outline-2 focus-visible:after:-outline-offset-[3px] focus-visible:after:outline-ring',\n                'group-hover/row:underline group-has-[[data-details]:hover]/row:no-underline',\n                archived && 'text-muted-foreground',\n              )}\n            >\n              {highlightTokens(tool.name, tokens)}\n            </a>\n            {selected && (\n              <span className=\"inline-flex shrink-0 items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-[11.5px] font-bold text-primary\">\n                <CornerDownLeft aria-hidden=\"true\" className=\"size-3\" />\n                Enter opens site\n              </span>\n            )}\n            <LifecycleBadge lifecycle={tool.lifecycle} />\n            {!tool.reviewed && <UnreviewedBadge />}\n          </div>\n          {tool.summary && (\n            <div className=\"mt-1 line-clamp-2 text-foreground/75\">\n              {highlightTokens(tool.summary, tokens)}\n            </div>\n          )}\n          {matched && matched.length > 0 && (\n            <div\n              data-testid=\"match-reason\"\n              className=\"mt-1 text-xs font-semibold text-muted-foreground\"\n            >\n              Matched: {matched.map((f) => FIELD_LABELS[f]).join(', ')}\n            </div>\n          )}\n        </div>\n        {/* Meta on the left, the date on the right, flush to the panel. A\n            long author list gives way first. Clicks fall through to the row\n            link, except on star and like. */}\n        <div\n          className={cn(\n            'pointer-events-none absolute right-[120px] bottom-0 z-[2] flex h-12 items-center gap-4',\n            rank !== undefined ? 'left-[310px]' : 'left-[268px]',\n          )}\n        >\n          <div className=\"flex min-w-0 items-center gap-1.5 text-[13px] font-semibold whitespace-nowrap text-foreground/75 [&>*]:shrink-0\">\n            {tool.owners[0] && <PersonAvatar name={tool.owners[0].name} />}\n            <span\n              data-testid=\"feed-row-owner\"\n              className=\"mr-1 min-w-0 !shrink truncate\"\n            >\n              {highlightTokens(owners, tokens)}\n            </span>\n            <span className=\"pointer-events-auto -mr-1 flex items-center\">\n              <PinButton\n                small\n                pinned={pinned}\n                busy={pinBusy}\n                name={tool.name}\n                onToggle={onTogglePin}\n              />\n              <LikeButton tool={tool} onToggle={onToggleLike} />\n            </span>\n            <span\n              data-testid=\"feed-row-views\"\n              className=\"inline-flex items-center gap-1 text-muted-foreground\"\n            >\n              <Eye aria-hidden=\"true\" className=\"size-[15px]\" />\n              {tool.views30d}\n              <span className=\"sr-only\"> views this month</span>\n            </span>\n            {tool.comments > 0 && (\n              <span\n                data-testid=\"feed-row-comments\"\n                className=\"inline-flex items-center gap-1 text-muted-foreground\"\n              >\n                <MessageSquare aria-hidden=\"true\" className=\"size-[15px]\" />\n                {tool.comments}\n                <span className=\"sr-only\">\n                  {tool.comments === 1 ? ' comment' : ' comments'}\n                </span>\n              </span>\n            )}\n          </div>\n          {dated && (\n            <span\n              data-testid=\"feed-row-date\"\n              title={exactDate(dated.at)}\n              className=\"pointer-events-auto ml-auto shrink-0 pr-4 text-[13px] font-semibold whitespace-nowrap text-muted-foreground\"\n            >\n              {dated.label} {timeAgo(dated.at)}\n            </span>\n          )}\n        </div>\n      </div>\n      <div role={cell} className=\"flex self-stretch\">\n        <Link\n          to=\"/community/$slug\"\n          params={{ slug: tool.slug }}\n          search={(prev) => prev}\n          data-details\n          aria-label={`Details for ${tool.name}`}\n          className={cn(\n            PANEL,\n            'relative z-[2] flex flex-none flex-col items-center justify-center gap-1.5 border-l border-border/55 text-[13.5px] font-extrabold text-muted-foreground transition-colors',\n            'group-hover/row:border-border group-hover/row:bg-primary/[0.025] group-has-[:focus-visible]/row:bg-primary/[0.025]',\n            'hover:!border-primary/30 hover:!bg-primary/12 hover:text-foreground',\n            'focus-visible:rounded-r-[13px] focus-visible:!bg-primary/12 focus-visible:text-foreground focus-visible:outline-2 focus-visible:-outline-offset-[3px] focus-visible:outline-ring',\n          )}\n        >\n          {/* Shown on hover or focus; always where nothing hovers. */}\n          <span className=\"flex flex-col items-center gap-1.5 opacity-0 transition-opacity group-hover/row:opacity-100 group-has-[:focus-visible]/row:opacity-100 [@media(hover:none)]:opacity-100\">\n            <PanelRight aria-hidden=\"true\" className=\"size-[18px]\" />\n            <span>Details</span>\n          </span>\n        </Link>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/modules/communityTools/ui/ShelfTile.js

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { ExternalLink, GripVertical } from "lucide-react";
+import { GripVertical } from "lucide-react";
 import { cn } from "../../../lib/utils.js";
 import { ToolThumb, PersonAvatar } from "./FeedRow.js";
+import { recordSiteOpen } from "../siteOpen.js";
 import { PinButton } from "./PinButton.js";
 function ShelfTile({
   tool,
@@ -26,8 +27,7 @@ function ShelfTile({
           "a",
           {
             href: tool.url,
-            target: "_blank",
-            rel: "noopener noreferrer",
+            onClick: () => recordSiteOpen(tool.slug),
             "aria-keyshortcuts": "Alt+ArrowUp Alt+ArrowDown",
             onKeyDown: (e) => {
               if (!e.altKey) return;
@@ -40,10 +40,7 @@ function ShelfTile({
             children: [
               /* @__PURE__ */ jsxs("span", { className: "relative block aspect-[16/9.5] border-b border-border", children: [
                 /* @__PURE__ */ jsx(ToolThumb, { tool, size: 512, className: "size-full border-0" }),
-                /* @__PURE__ */ jsxs("span", { className: "absolute right-2.5 bottom-2.5 inline-flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-sm font-extrabold text-primary-foreground opacity-0 shadow-sm transition-opacity group-hover:opacity-100 group-focus-within:opacity-100", children: [
-                  /* @__PURE__ */ jsx(ExternalLink, { "aria-hidden": "true", className: "size-4" }),
-                  "Open site"
-                ] })
+                /* @__PURE__ */ jsx("span", { className: "absolute right-2.5 bottom-2.5 rounded-lg bg-primary px-3 py-1.5 text-sm font-extrabold text-primary-foreground opacity-0 shadow-sm transition-opacity group-hover:opacity-100 group-focus-within:opacity-100", children: "Open site" })
               ] }),
               /* @__PURE__ */ jsxs("span", { className: "block py-2.5 pr-12 pl-3", children: [
                 /* @__PURE__ */ jsx(

package/dist/esm/modules/communityTools/ui/ShelfTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShelfTile.js","sources":["../../../../../src/modules/communityTools/ui/ShelfTile.tsx"],"sourcesContent":["import type { CommunityTool } from '@igstack/app-catalog-shared-core'\nimport { ExternalLink, GripVertical } from 'lucide-react'\nimport { cn } from '~/lib/utils'\nimport { PersonAvatar, ToolThumb } from './FeedRow'\nimport { PinButton } from './PinButton'\n\n/**\n * A pinned tool: screenshot first, then name and author. A click opens the\n * site. Drag the tile, or press Alt+↑/↓ on it, to move it.\n */\nexport function ShelfTile({\n  tool,\n  dragging,\n  onUnpin,\n  onMove,\n  dragProps,\n}: {\n  tool: CommunityTool\n  dragging: boolean\n  onUnpin: () => void\n  /** -1 moves it one place earlier, +1 one place later. */\n  onMove: (step: -1 | 1) => void\n  dragProps: React.HTMLAttributes<HTMLDivElement>\n}) {\n  return (\n    <div\n      data-testid=\"shelf-tile\"\n      draggable\n      {...dragProps}\n      className={cn(\n        'group relative overflow-hidden rounded-[14px] border border-border bg-card transition-[border-color,box-shadow]',\n        'hover:border-primary/40 hover:shadow-sm focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/30',\n        dragging && 'opacity-40',\n      )}\n    >\n      <a\n        href={tool.url}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        aria-keyshortcuts=\"Alt+ArrowUp Alt+ArrowDown\"\n        onKeyDown={(e) => {\n          if (!e.altKey) return\n          if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n            e.preventDefault()\n            onMove(e.key === 'ArrowUp' ? -1 : 1)\n          }\n        }}\n        className=\"block focus-visible:outline-none\"\n      >\n        <span className=\"relative block aspect-[16/9.5] border-b border-border\">\n          <ToolThumb tool={tool} size={512} className=\"size-full border-0\" />\n          <span className=\"absolute right-2.5 bottom-2.5 inline-flex items-center gap-1.5 rounded-lg bg-primary px-3 py-1.5 text-sm font-extrabold text-primary-foreground opacity-0 shadow-sm transition-opacity group-hover:opacity-100 group-focus-within:opacity-100\">\n            <ExternalLink aria-hidden=\"true\" className=\"size-4\" />\n            Open site\n          </span>\n        </span>\n        <span className=\"block py-2.5 pr-12 pl-3\">\n          <span\n            data-testid=\"shelf-tile-name\"\n            className=\"block truncate text-sm font-bold\"\n          >\n            {tool.name}\n          </span>\n          <span className=\"mt-0.5 flex min-w-0 items-center gap-1.5 text-[12.5px] font-medium text-muted-foreground\">\n            {tool.owners[0] && <PersonAvatar name={tool.owners[0].name} />}\n            <span className=\"truncate\">\n              {tool.owners.map((o) => o.name).join(', ')}\n            </span>\n          </span>\n        </span>\n      </a>\n      <span\n        aria-hidden=\"true\"\n        className=\"absolute top-2 right-2 inline-flex size-7 cursor-grab items-center justify-center rounded-md bg-card/90 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\"\n      >\n        <GripVertical className=\"size-4\" />\n      </span>\n      <div className=\"absolute right-2 bottom-2\">\n        <PinButton pinned name={tool.name} onToggle={onUnpin} />\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;AAUO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAS;AAAA,MACR,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,YAAY;AAAA,MAAA;AAAA,MAGd,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM,KAAK;AAAA,YACX,QAAO;AAAA,YACP,KAAI;AAAA,YACJ,qBAAkB;AAAA,YAClB,WAAW,CAAC,MAAM;AAChB,kBAAI,CAAC,EAAE,OAAQ;AACf,kBAAI,EAAE,QAAQ,aAAa,EAAE,QAAQ,aAAa;AAChD,kBAAE,eAAA;AACF,uBAAO,EAAE,QAAQ,YAAY,KAAK,CAAC;AAAA,cACrC;AAAA,YACF;AAAA,YACA,WAAU;AAAA,YAEV,UAAA;AAAA,cAAA,qBAAC,QAAA,EAAK,WAAU,yDACd,UAAA;AAAA,gBAAA,oBAAC,WAAA,EAAU,MAAY,MAAM,KAAK,WAAU,sBAAqB;AAAA,gBACjE,qBAAC,QAAA,EAAK,WAAU,iPACd,UAAA;AAAA,kBAAA,oBAAC,cAAA,EAAa,eAAY,QAAO,WAAU,UAAS;AAAA,kBAAE;AAAA,gBAAA,EAAA,CAExD;AAAA,cAAA,GACF;AAAA,cACA,qBAAC,QAAA,EAAK,WAAU,2BACd,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,eAAY;AAAA,oBACZ,WAAU;AAAA,oBAET,UAAA,KAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAER,qBAAC,QAAA,EAAK,WAAU,4FACb,UAAA;AAAA,kBAAA,KAAK,OAAO,CAAC,KAAK,oBAAC,cAAA,EAAa,MAAM,KAAK,OAAO,CAAC,EAAE,KAAA,CAAM;AAAA,kBAC5D,oBAAC,QAAA,EAAK,WAAU,YACb,eAAK,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,IAAI,EAAA,CAC3C;AAAA,gBAAA,EAAA,CACF;AAAA,cAAA,EAAA,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAU;AAAA,YAEV,UAAA,oBAAC,cAAA,EAAa,WAAU,SAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnC,oBAAC,OAAA,EAAI,WAAU,6BACb,UAAA,oBAAC,WAAA,EAAU,QAAM,MAAC,MAAM,KAAK,MAAM,UAAU,SAAS,EAAA,CACxD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"ShelfTile.js","sources":["../../../../../src/modules/communityTools/ui/ShelfTile.tsx"],"sourcesContent":["import type { CommunityTool } from '@igstack/app-catalog-shared-core'\nimport { GripVertical } from 'lucide-react'\nimport { cn } from '~/lib/utils'\nimport { PersonAvatar, ToolThumb } from './FeedRow'\nimport { recordSiteOpen } from '../siteOpen'\nimport { PinButton } from './PinButton'\n\n/**\n * A pinned tool: screenshot first, then name and author. A click opens the\n * site. Drag the tile, or press Alt+↑/↓ on it, to move it.\n */\nexport function ShelfTile({\n  tool,\n  dragging,\n  onUnpin,\n  onMove,\n  dragProps,\n}: {\n  tool: CommunityTool\n  dragging: boolean\n  onUnpin: () => void\n  /** -1 moves it one place earlier, +1 one place later. */\n  onMove: (step: -1 | 1) => void\n  dragProps: React.HTMLAttributes<HTMLDivElement>\n}) {\n  return (\n    <div\n      data-testid=\"shelf-tile\"\n      draggable\n      {...dragProps}\n      className={cn(\n        'group relative overflow-hidden rounded-[14px] border border-border bg-card transition-[border-color,box-shadow]',\n        'hover:border-primary/40 hover:shadow-sm focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/30',\n        dragging && 'opacity-40',\n      )}\n    >\n      <a\n        href={tool.url}\n        onClick={() => recordSiteOpen(tool.slug)}\n        aria-keyshortcuts=\"Alt+ArrowUp Alt+ArrowDown\"\n        onKeyDown={(e) => {\n          if (!e.altKey) return\n          if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n            e.preventDefault()\n            onMove(e.key === 'ArrowUp' ? -1 : 1)\n          }\n        }}\n        className=\"block focus-visible:outline-none\"\n      >\n        <span className=\"relative block aspect-[16/9.5] border-b border-border\">\n          <ToolThumb tool={tool} size={512} className=\"size-full border-0\" />\n          <span className=\"absolute right-2.5 bottom-2.5 rounded-lg bg-primary px-3 py-1.5 text-sm font-extrabold text-primary-foreground opacity-0 shadow-sm transition-opacity group-hover:opacity-100 group-focus-within:opacity-100\">\n            Open site\n          </span>\n        </span>\n        <span className=\"block py-2.5 pr-12 pl-3\">\n          <span\n            data-testid=\"shelf-tile-name\"\n            className=\"block truncate text-sm font-bold\"\n          >\n            {tool.name}\n          </span>\n          <span className=\"mt-0.5 flex min-w-0 items-center gap-1.5 text-[12.5px] font-medium text-muted-foreground\">\n            {tool.owners[0] && <PersonAvatar name={tool.owners[0].name} />}\n            <span className=\"truncate\">\n              {tool.owners.map((o) => o.name).join(', ')}\n            </span>\n          </span>\n        </span>\n      </a>\n      <span\n        aria-hidden=\"true\"\n        className=\"absolute top-2 right-2 inline-flex size-7 cursor-grab items-center justify-center rounded-md bg-card/90 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\"\n      >\n        <GripVertical className=\"size-4\" />\n      </span>\n      <div className=\"absolute right-2 bottom-2\">\n        <PinButton pinned name={tool.name} onToggle={onUnpin} />\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAWO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAS;AAAA,MACR,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA,YAAY;AAAA,MAAA;AAAA,MAGd,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM,KAAK;AAAA,YACX,SAAS,MAAM,eAAe,KAAK,IAAI;AAAA,YACvC,qBAAkB;AAAA,YAClB,WAAW,CAAC,MAAM;AAChB,kBAAI,CAAC,EAAE,OAAQ;AACf,kBAAI,EAAE,QAAQ,aAAa,EAAE,QAAQ,aAAa;AAChD,kBAAE,eAAA;AACF,uBAAO,EAAE,QAAQ,YAAY,KAAK,CAAC;AAAA,cACrC;AAAA,YACF;AAAA,YACA,WAAU;AAAA,YAEV,UAAA;AAAA,cAAA,qBAAC,QAAA,EAAK,WAAU,yDACd,UAAA;AAAA,gBAAA,oBAAC,WAAA,EAAU,MAAY,MAAM,KAAK,WAAU,sBAAqB;AAAA,gBACjE,oBAAC,QAAA,EAAK,WAAU,gNAA+M,UAAA,YAAA,CAE/N;AAAA,cAAA,GACF;AAAA,cACA,qBAAC,QAAA,EAAK,WAAU,2BACd,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,eAAY;AAAA,oBACZ,WAAU;AAAA,oBAET,UAAA,KAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAER,qBAAC,QAAA,EAAK,WAAU,4FACb,UAAA;AAAA,kBAAA,KAAK,OAAO,CAAC,KAAK,oBAAC,cAAA,EAAa,MAAM,KAAK,OAAO,CAAC,EAAE,KAAA,CAAM;AAAA,kBAC5D,oBAAC,QAAA,EAAK,WAAU,YACb,eAAK,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,KAAK,IAAI,EAAA,CAC3C;AAAA,gBAAA,EAAA,CACF;AAAA,cAAA,EAAA,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAU;AAAA,YAEV,UAAA,oBAAC,cAAA,EAAa,WAAU,SAAA,CAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAEnC,oBAAC,OAAA,EAAI,WAAU,6BACb,UAAA,oBAAC,WAAA,EAAU,QAAM,MAAC,MAAM,KAAK,MAAM,UAAU,SAAS,EAAA,CACxD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/modules/communityTools/ui/ToolCard.js

@@ -15,6 +15,8 @@ import { Skeleton } from "../../../ui/skeleton.js";
 import { formatCardDate, CardScreenshot } from "./CardScreenshot.js";
 import { CardTitleBlock } from "./CardTitleBlock.js";
 import { PersonAvatar } from "./FeedRow.js";
+import { openSite } from "../siteOpen.js";
+import { timeAgo, exactDate } from "../timeAgo.js";
 import { useTimeUp } from "../useTimeUp.js";
 import { PinButton } from "./PinButton.js";
 import { TagChip, tagLabel, tagKey } from "./TagRow.js";
@@ -117,7 +119,7 @@ function ToolCard({
     } else if (e.key === "Enter" && tool) {
       if (target.closest("a, button")) return;
       e.preventDefault();
-      window.open(tool.url, "_blank", "noopener,noreferrer");
+      openSite(tool);
     }
   };
   const controls = index >= 0 && siblings.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -232,7 +234,18 @@ function ToolCard({
                         /* @__PURE__ */ jsx("b", { className: "text-foreground", children: views.viewsAll.toLocaleString("en-US") }),
                         " ",
                         "all time"
-                      ] })
+                      ] }),
+                      tool.siteUpdatedAt && /* @__PURE__ */ jsxs(
+                        "span",
+                        {
+                          "data-testid": "card-site-updated",
+                          title: exactDate(tool.siteUpdatedAt),
+                          children: [
+                            "Site updated ",
+                            timeAgo(tool.siteUpdatedAt)
+                          ]
+                        }
+                      )
                     ]
                   }
                 ),