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

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

@@ -0,0 +1,547 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { rankTools, searchTools } from "@igstack/app-catalog-shared-core";
+import { useNavigate, useLocation } from "@tanstack/react-router";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { Plus, Star, AlertTriangle, RefreshCw, Search } from "lucide-react";
+import { useState, useMemo, useRef, useCallback, useEffect, useLayoutEffect } from "react";
+import { useAuthModal } from "../../auth/AuthModalContext.js";
+import { Skeleton } from "../../../ui/skeleton.js";
+import { useCommunityTools } from "../useCommunityTools.js";
+import { FeedRow, ROW_THUMB } from "./FeedRow.js";
+import { feedHeading, FeedSortControl } from "./FeedSortControl.js";
+import { MarginPreview } from "./MarginPreview.js";
+import { MyToolsShelf } from "./MyToolsShelf.js";
+import { TagRow } from "./TagRow.js";
+import { Toast } from "./Toast.js";
+import { ToolCard } from "./ToolCard.js";
+import { ToolFormDialog } from "./ToolFormDialog.js";
+import { ToolSearch } from "./ToolSearch.js";
+const KBD = "rounded-[5px] border border-b-2 border-border bg-card px-1.5 py-px text-[11px] font-semibold text-muted-foreground";
+const RESULTS_ID = "community-results-grid";
+function optionIdOf(slug) {
+  return `community-option-${slug}`;
+}
+function openSite(url) {
+  window.open(url, "_blank", "noopener,noreferrer");
+}
+function CommunityPage({
+  tag,
+  sort,
+  dir,
+  onTagChange,
+  onSortChange,
+  cardSlug
+}) {
+  var _a;
+  const {
+    list,
+    pins,
+    appNames,
+    isAuthenticated,
+    isAuthLoading,
+    pin,
+    unpin,
+    pinBusySlug,
+    reorder,
+    like,
+    unlike,
+    withMyLike
+  } = useCommunityTools();
+  const { open: openSignIn } = useAuthModal();
+  const navigate = useNavigate();
+  const here = useLocation({ select: (l) => l.href });
+  const signInHere = () => openSignIn(here);
+  const [query, setQuery] = useState("");
+  const [selected, setSelected] = useState(0);
+  const tokens = useMemo(
+    () => query.trim().toLowerCase().split(/\s+/).filter(Boolean),
+    [query]
+  );
+  const searching = tokens.length > 0;
+  const [toast, setToast] = useState(null);
+  const toastIdRef = useRef(0);
+  const showToast = useCallback((message) => {
+    toastIdRef.current += 1;
+    setToast({ ...message, id: toastIdRef.current });
+  }, []);
+  const dismissToast = useCallback(() => setToast(null), []);
+  const tools = useMemo(() => list.data ?? [], [list.data]);
+  const withTag = useCallback(
+    (all) => tag ? all.filter((t) => t.tags.some((g) => `${g.kind}:${g.value}` === tag)) : all,
+    [tag]
+  );
+  const feed = useMemo(
+    () => withTag(rankTools(tools, sort, dir)).map((tool) => ({ tool })),
+    [tools, sort, dir, withTag]
+  );
+  const results = useMemo(
+    () => searching ? searchTools(withTag(tools), query, appNames, sort, dir).map(
+      ({ tool, fields }) => ({ tool, matched: fields })
+    ) : [],
+    [searching, tools, query, appNames, sort, dir, withTag]
+  );
+  const items = searching ? results : feed;
+  const selectedIndex = Math.min(selected, results.length - 1);
+  const selectedTool = (_a = results[selectedIndex]) == null ? void 0 : _a.tool;
+  const activeOptionId = searching && selectedTool ? optionIdOf(selectedTool.slug) : void 0;
+  const pinnedSlugs = useMemo(
+    () => new Set((pins.data ?? []).map((t) => t.slug)),
+    [pins.data]
+  );
+  const pinError = (retry) => () => showToast({
+    tone: "error",
+    text: "Could not save the pin. Check your connection.",
+    action: { label: "Try again", run: retry }
+  });
+  const pinTool = (slug) => pin.mutate(
+    { slug },
+    {
+      onSuccess: () => showToast({
+        tone: "info",
+        text: "Pinned to My tools",
+        action: { label: "Undo", run: () => unpinTool(slug, false) }
+      }),
+      onError: pinError(() => pinTool(slug))
+    }
+  );
+  const unpinTool = (slug, offerUndo = true) => unpin.mutate(
+    { slug },
+    {
+      onSuccess: () => {
+        if (offerUndo) {
+          showToast({
+            tone: "info",
+            text: "Removed from My tools",
+            action: { label: "Undo", run: () => pinTool(slug) }
+          });
+        }
+      },
+      onError: pinError(() => unpinTool(slug, offerUndo))
+    }
+  );
+  const togglePin = (tool) => {
+    if (!isAuthenticated) {
+      signInHere();
+      return;
+    }
+    if (pinnedSlugs.has(tool.slug)) unpinTool(tool.slug);
+    else pinTool(tool.slug);
+  };
+  const toggleLike = (tool) => {
+    if (!isAuthenticated) {
+      signInHere();
+      return;
+    }
+    const save = tool.likedByMe ? unlike : like;
+    save.mutate(
+      { slug: tool.slug },
+      {
+        onError: () => showToast({
+          tone: "error",
+          text: "Could not save the like. Check your connection.",
+          action: { label: "Try again", run: () => toggleLike(tool) }
+        })
+      }
+    );
+  };
+  const reorderPins = (slugs) => reorder.mutate(
+    { slugs },
+    {
+      onError: () => showToast({
+        tone: "error",
+        text: "Couldn't save the new order",
+        action: { label: "Try again", run: () => reorderPins(slugs) }
+      })
+    }
+  );
+  const [adding, setAdding] = useState(null);
+  const startAdd = (prefillName) => {
+    if (!isAuthenticated) signInHere();
+    else setAdding({ prefillName });
+  };
+  const openCard = (slug, replace = false) => navigate({
+    to: "/community/$slug",
+    params: { slug },
+    search: (prev) => prev,
+    replace
+  });
+  const closeCard = () => void navigate({ to: "/community", search: (prev) => prev });
+  const scrollRef = useRef(null);
+  const pageRef = useRef(null);
+  const [listEl, setListEl] = useState(null);
+  const [scrollMargin, setScrollMargin] = useState(0);
+  useEffect(() => {
+    const scroller = scrollRef.current;
+    const page = pageRef.current;
+    if (!scroller || !page || !listEl) return;
+    const measure = () => setScrollMargin(
+      listEl.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop
+    );
+    const observer = new ResizeObserver(measure);
+    observer.observe(page);
+    measure();
+    return () => observer.disconnect();
+  }, [listEl]);
+  const [hasLayout, setHasLayout] = useState(true);
+  useLayoutEffect(() => {
+    var _a2;
+    setHasLayout((((_a2 = scrollRef.current) == null ? void 0 : _a2.clientHeight) ?? 0) > 0);
+  }, []);
+  const getItemKey = useCallback(
+    (i) => {
+      var _a2;
+      return ((_a2 = items[i]) == null ? void 0 : _a2.tool.slug) ?? i;
+    },
+    [items]
+  );
+  const virtualizer = useVirtualizer({
+    getScrollElement: () => scrollRef.current,
+    // The column's height before it is measured, so the first paint already
+    // holds the rows that will be visible.
+    initialRect: { width: 0, height: 800 },
+    count: items.length,
+    // The thumbnail sets the row: 150 px, 12 px padding either side, borders.
+    estimateSize: () => 176,
+    overscan: 6,
+    gap: 8,
+    scrollMargin,
+    getItemKey
+  });
+  useEffect(() => {
+    if (!searching || selectedIndex < 0) return;
+    const row = listEl == null ? void 0 : listEl.querySelector(`[data-index="${selectedIndex}"]`);
+    if (row) row.scrollIntoView({ block: "nearest" });
+    else virtualizer.scrollToIndex(selectedIndex, { align: "auto" });
+  }, [searching, selectedIndex, virtualizer, listEl]);
+  const onSearchKey = (e) => {
+    const current = results[selectedIndex];
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      if (results.length === 0) return;
+      e.preventDefault();
+      const step = e.key === "ArrowDown" ? 1 : -1;
+      setSelected(
+        Math.min(results.length - 1, Math.max(0, selectedIndex + step))
+      );
+    } else if (e.key === "Enter" && current) {
+      e.preventDefault();
+      openSite(current.tool.url);
+    } else if (e.key === "ArrowRight" && current && e.currentTarget.selectionStart === e.currentTarget.value.length) {
+      e.preventDefault();
+      void openCard(current.tool.slug);
+    }
+  };
+  const virtualItems = hasLayout ? virtualizer.getVirtualItems() : items.map((_, index) => ({
+    key: items[index].tool.slug,
+    index,
+    start: virtualizer.options.scrollMargin
+  }));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: scrollRef,
+      "data-preview-scroller": true,
+      className: "min-h-0 flex-1 overflow-y-auto [scrollbar-gutter:stable]",
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: pageRef,
+          "data-preview-column": true,
+          className: "mx-auto w-full max-w-[1000px] pt-1.5 pb-10",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "mb-[22px] flex items-center gap-2.5", children: [
+              /* @__PURE__ */ jsx(
+                ToolSearch,
+                {
+                  value: query,
+                  onChange: (value) => {
+                    setQuery(value);
+                    setSelected(0);
+                  },
+                  resultCount: results.length,
+                  resultsId: searching && results.length > 0 ? RESULTS_ID : void 0,
+                  activeDescendant: activeOptionId,
+                  onKey: onSearchKey
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => startAdd(),
+                  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",
+                  children: [
+                    /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true", className: "size-4" }),
+                    "Add a tool"
+                  ]
+                }
+              )
+            ] }),
+            searching ? /* @__PURE__ */ jsxs("div", { className: "-mt-2 mb-3.5 ml-1 flex items-center gap-2 text-[13px] font-semibold text-muted-foreground", children: [
+              /* @__PURE__ */ jsx(
+                Star,
+                {
+                  "aria-hidden": "true",
+                  className: "size-4 fill-amber-400 text-amber-600"
+                }
+              ),
+              "My tools is hidden while you search"
+            ] }) : /* @__PURE__ */ jsx("div", { className: "mb-[26px]", children: /* @__PURE__ */ jsx(
+              MyToolsShelf,
+              {
+                pins: pins.data ?? [],
+                isLoading: isAuthLoading || isAuthenticated && pins.isPending,
+                onUnpin: (tool) => togglePin(tool),
+                onReorder: reorderPins
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(
+              "section",
+              {
+                "aria-label": searching ? "Search results" : feedHeading(sort, dir),
+                "data-testid": searching ? "community-results" : "community-feed",
+                children: [
+                  !searching && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+                      /* @__PURE__ */ jsx("h2", { className: "font-serif text-[19px] font-semibold", children: feedHeading(sort, dir) }),
+                      /* @__PURE__ */ jsx(
+                        FeedSortControl,
+                        {
+                          sort,
+                          dir,
+                          onChange: onSortChange
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      TagRow,
+                      {
+                        tools: rankTools(tools, sort, dir),
+                        activeTag: tag,
+                        appNames,
+                        onChoose: onTagChange
+                      }
+                    )
+                  ] }),
+                  list.isPending ? /* @__PURE__ */ jsx(FeedSkeleton, {}) : list.isError ? /* @__PURE__ */ jsx(FeedError, { onRetry: () => void list.refetch() }) : searching && results.length === 0 ? /* @__PURE__ */ jsx(
+                    NoResults,
+                    {
+                      query: query.trim(),
+                      onAdd: () => startAdd(query.trim())
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ref: setListEl,
+                      id: searching ? RESULTS_ID : void 0,
+                      role: searching ? "grid" : void 0,
+                      "aria-label": searching ? "Search results" : void 0,
+                      "aria-activedescendant": activeOptionId,
+                      className: hasLayout ? "relative" : "flex flex-col gap-2",
+                      style: hasLayout ? { height: virtualizer.getTotalSize() } : void 0,
+                      children: virtualItems.map((row) => {
+                        const item = items[row.index];
+                        if (!item) return null;
+                        return /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            "data-index": row.index,
+                            ref: virtualizer.measureElement,
+                            className: hasLayout ? "absolute inset-x-0 top-0" : void 0,
+                            style: hasLayout ? {
+                              transform: `translateY(${row.start - virtualizer.options.scrollMargin}px)`
+                            } : void 0,
+                            children: /* @__PURE__ */ jsx(
+                              FeedRow,
+                              {
+                                tool: withMyLike(item.tool),
+                                rank: searching ? void 0 : row.index + 1,
+                                sort,
+                                tokens,
+                                matched: item.matched,
+                                selected: searching && row.index === selectedIndex,
+                                optionId: searching ? optionIdOf(item.tool.slug) : void 0,
+                                pinned: pinnedSlugs.has(item.tool.slug),
+                                pinBusy: pinBusySlug === item.tool.slug,
+                                onTogglePin: () => togglePin(item.tool),
+                                onToggleLike: () => toggleLike(withMyLike(item.tool))
+                              }
+                            )
+                          },
+                          row.key
+                        );
+                      })
+                    }
+                  ),
+                  searching && results.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-3.5 flex items-center gap-1.5 text-[12.5px] font-semibold text-muted-foreground", children: [
+                    /* @__PURE__ */ jsx("kbd", { className: KBD, children: "↑" }),
+                    /* @__PURE__ */ jsx("kbd", { className: KBD, children: "↓" }),
+                    /* @__PURE__ */ jsx("span", { className: "mr-2.5", children: "move" }),
+                    /* @__PURE__ */ jsx("kbd", { className: KBD, children: "Enter" }),
+                    /* @__PURE__ */ jsx("span", { className: "mr-2.5", children: "open site" }),
+                    /* @__PURE__ */ jsx("kbd", { className: KBD, children: "→" }),
+                    /* @__PURE__ */ jsx("span", { className: "mr-2.5", children: "open card" }),
+                    /* @__PURE__ */ jsx("kbd", { className: KBD, children: "Esc" }),
+                    /* @__PURE__ */ jsx("span", { children: "clear" })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              MarginPreview,
+              {
+                list: listEl,
+                tools,
+                disabled: !!cardSlug || !!adding
+              }
+            ),
+            cardSlug && /* @__PURE__ */ jsx(
+              ToolCard,
+              {
+                slug: cardSlug,
+                siblings: items.map((item) => item.tool.slug),
+                onClose: closeCard,
+                onNavigate: (slug) => void openCard(slug, true),
+                pinned: pinnedSlugs.has(cardSlug),
+                pinBusy: pinBusySlug === cardSlug,
+                onTogglePin: togglePin,
+                appNames,
+                onChooseTag: (chosen) => void navigate({
+                  to: "/community",
+                  search: (prev) => ({ ...prev, tag: chosen })
+                })
+              }
+            ),
+            adding && /* @__PURE__ */ jsx(
+              ToolFormDialog,
+              {
+                mode: "add",
+                prefillName: adding.prefillName,
+                onClose: () => setAdding(null),
+                onOpenCard: (slug) => {
+                  setAdding(null);
+                  void openCard(slug);
+                },
+                onDone: (slug) => {
+                  setAdding(null);
+                  showToast({
+                    tone: "ok",
+                    text: /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx("b", { children: "Live now" }),
+                      ", in the review list"
+                    ] }),
+                    action: { label: "Open card", run: () => void openCard(slug) }
+                  });
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(Toast, { toast, onDismiss: dismissToast })
+          ]
+        }
+      )
+    }
+  );
+}
+function FeedSkeleton() {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-testid": "feed-skeleton",
+      "aria-busy": "true",
+      className: "flex flex-col gap-2",
+      children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex min-h-[176px] items-center gap-4 rounded-[14px] border border-border bg-card py-3 pl-3",
+          children: [
+            /* @__PURE__ */ jsx(Skeleton, { className: "h-[22px] w-[26px]" }),
+            /* @__PURE__ */ jsx(Skeleton, { className: ROW_THUMB }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-2/5" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-4/5" }),
+              /* @__PURE__ */ jsx(Skeleton, { className: "h-2.5 w-1/4" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "w-[120px] shrink-0" })
+          ]
+        },
+        i
+      ))
+    }
+  );
+}
+function FeedError({ onRetry }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "feed-error",
+      role: "alert",
+      className: "flex items-center gap-3.5 rounded-[14px] border border-destructive/30 bg-destructive/5 px-5 py-[18px]",
+      children: [
+        /* @__PURE__ */ jsx(
+          AlertTriangle,
+          {
+            "aria-hidden": "true",
+            className: "size-[22px] shrink-0 text-destructive"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("b", { className: "font-bold", children: "Could not load community tools." }),
+          /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-muted-foreground", children: "The server did not answer. Your pinned tools above still work." })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onRetry,
+            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",
+            children: [
+              /* @__PURE__ */ jsx(RefreshCw, { "aria-hidden": "true", className: "size-4" }),
+              "Try again"
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function NoResults({ query, onAdd }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-testid": "no-results",
+      className: "flex gap-3.5 rounded-[14px] border border-border bg-card px-5 py-[18px]",
+      children: [
+        /* @__PURE__ */ jsx(
+          Search,
+          {
+            "aria-hidden": "true",
+            className: "mt-0.5 size-5 shrink-0 text-muted-foreground"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("b", { className: "font-bold", children: [
+            "Nothing matches “",
+            query,
+            "”."
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "mt-0.5 text-muted-foreground", children: [
+            "Try a word from the page itself, or the name of the person who shared it. Know the tool?",
+            " ",
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: onAdd,
+                className: "font-bold text-primary hover:underline focus-visible:outline-2 focus-visible:outline-ring",
+                children: "Add it"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  CommunityPage
+};
+//# sourceMappingURL=CommunityPage.js.map

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

@@ -0,0 +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":"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"}

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

@@ -0,0 +1,42 @@
+import { CommunityTool, FeedSort, MatchField } from '@igstack/app-catalog-shared-core';
+export declare function screenshotUrl(id: string, size: number): string;
+/** The tool's screenshot, cropped to its top-left, or a globe when there is none. */
+export declare function ToolThumb({ tool, size, className, }: {
+    tool: CommunityTool;
+    size: number;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PersonAvatar({ name }: {
+    name: string;
+}): import("react/jsx-runtime").JSX.Element;
+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. */
+    sort: FeedSort;
+    tokens: string[];
+    /** Set while searching: which fields the query hit. */
+    matched?: MatchField[];
+    selected?: boolean;
+    /**
+     * Set while searching: the row is a row of the results grid, and this is the
+     * id of its main cell, the one the search box points at.
+     */
+    optionId?: string;
+    pinned: boolean;
+    /** Its pin is being saved. */
+    pinBusy?: boolean;
+    onTogglePin: () => void;
+    onToggleLike: () => void;
+}
+/** The feed row's thumbnail: big enough to read the page title in its top left. */
+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.
+ */
+export declare function FeedRow({ tool, rank, sort, tokens, matched, selected, optionId, pinned, pinBusy, onTogglePin, onToggleLike, }: FeedRowProps): import("react/jsx-runtime").JSX.Element;