@grove-dev/astro 0.6.1 → 0.8.0

package/src/components/RecordSidebar.astro

@@ -1,387 +0,0 @@
----
-/**
- * RecordSidebar.astro
- *
- * Sticky right-hand column on the record detail page. Renders
- * up to four cards, each conditional on the model's `sidebar`
- * visibility flags:
- *
- *   - Activity   — repo facts (stars, forks, language, license, …)
- *   - Freshness  — last commit / last fetch / maintenance status
- *   - Ecosystem  — stack, platforms, category, tags, hygiene files
- *   - Source     — curation metadata + reading-time summary
- *
- * Empty rows are suppressed entirely — the sidebar never shows "—"
- * or "0" placeholders that confuse "no data" with "zero".
- *
- * Sticky on lg+ (`lg:sticky lg:top-20 lg:max-h-calc(100vh-5rem)
- * lg:overflow-y-auto`) so the cards stay in view while the user
- * scrolls the body. Cards are individually rendered so the
- * sticky container's height is bounded by the actual content.
- */
-import { licenseDisplay } from "@grove-dev/core";
-import type { RecordDetailModel } from "../server/models.js";
-import { taxonomyLabel } from "../server/directory.js";
-import Icon from "./Icon.astro";
-import LanguageBreakdown from "./LanguageBreakdown.astro";
-
-interface Props {
-  detail: RecordDetailModel;
-  /**
-   * Pass false when a parent wrapper owns the sticky behavior (e.g.
-   * the detail page stacks the TOC above this sidebar inside one
-   * sticky column).
-   */
-  sticky?: boolean;
-  /**
-   * "column" (default) stacks the cards vertically for a rail;
-   * "grid" lays them out in responsive columns for full-width
-   * placement below the article.
-   */
-  layout?: "column" | "grid";
-}
-
-const { detail, sticky = true, layout = "column" } = Astro.props;
-const {
-  sidebar,
-  github,
-  stars,
-  forks,
-  language,
-  licenseSpdx,
-  pushedLabel,
-  repoUrl,
-  ownerRepo,
-  healthLabel,
-  activityBadge,
-  stacks,
-  platforms,
-  tags,
-  category,
-  contributionSignals,
-  languages,
-  totalLanguageBytes,
-  readingMetrics,
-  record,
-} = detail;
-
-// Visibility helpers for individual rows inside the Activity card.
-// `hasRepo` is the discriminator between "GitHub data synced" and
-// "no data fetched yet" — without it the card would show "Stars 0"
-// even when the field was never populated.
-const repo = github;
-const hasRepo = !!repo;
-const starsNumber = typeof stars === "number" && stars > 0 ? stars : null;
-const forksNumber = typeof forks === "number" && forks > 0 ? forks : null;
-const recentReleases = (repo?.releases ?? []).slice(0, 1);
-const isArchived = !!repo?.archived;
-
-// Render a kv row only when both the label and value have content.
-function row(label: string, value: unknown) {
-  if (value === null || value === undefined || value === "") return null;
-  return { label, value };
-}
----
-
-<aside
-  class:list={[
-    layout === "grid"
-      ? "grove-sidebar grid grid-cols-1 items-start gap-4 sm:grid-cols-2 xl:grid-cols-4"
-      : "grove-sidebar flex flex-col gap-4",
-    layout === "column" &&
-      sticky &&
-      "lg:sticky lg:top-20 lg:max-h-[calc(100vh-5rem)] lg:self-start lg:overflow-y-auto",
-  ]}
-  aria-label="Record metadata"
->
-
-  {/* ── Activity card ──────────────────────────────────────── */}
-  {sidebar.showActivity && (
-    <section
-      class="grove-card rounded-[var(--radius-lg)] border border-ink-200 bg-card p-4 dark:border-ink-800"
-      aria-labelledby="sidebar-activity-title"
-    >
-      <h2
-        id="sidebar-activity-title"
-        class="grove-card-title m-0 mb-3 text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400"
-      >
-        Activity
-      </h2>
-      <dl class="grove-kv m-0 flex flex-col gap-2.5 text-sm">
-        {row("Stars", starsNumber !== null ? starsNumber : null) && (
-          <div class="flex items-baseline justify-between gap-3">
-            <dt class="text-ink-500 dark:text-ink-400">Stars</dt>
-            <dd class="font-mono tabular-nums text-ink-900 dark:text-ink-100">{starsNumber!.toLocaleString()}</dd>
-          </div>
-        )}
-        {row("Forks", forksNumber !== null ? forksNumber.toLocaleString() : null) && (
-          <div class="flex items-baseline justify-between gap-3">
-            <dt class="text-ink-500 dark:text-ink-400">Forks</dt>
-            <dd class="font-mono tabular-nums text-ink-900 dark:text-ink-100">{forksNumber!.toLocaleString()}</dd>
-          </div>
-        )}
-        {row("Contributors", repo?.contributors_count) && (
-          <div class="flex items-baseline justify-between gap-3">
-            <dt class="text-ink-500 dark:text-ink-400">Contributors</dt>
-            <dd class="font-mono tabular-nums text-ink-900 dark:text-ink-100">{Number(repo!.contributors_count).toLocaleString()}</dd>
-          </div>
-        )}
-        {row("Open issues", repo?.open_issues_count) && (
-          <div class="flex items-baseline justify-between gap-3">
-            <dt class="text-ink-500 dark:text-ink-400">Open issues</dt>
-            <dd class="font-mono tabular-nums text-ink-900 dark:text-ink-100">{Number(repo!.open_issues_count).toLocaleString()}</dd>
-          </div>
-        )}
-        {row("Watchers", repo?.subscribers_count) && (
-          <div class="flex items-baseline justify-between gap-3">
-            <dt class="text-ink-500 dark:text-ink-400">Watchers</dt>
-            <dd class="font-mono tabular-nums text-ink-900 dark:text-ink-100">{Number(repo!.subscribers_count).toLocaleString()}</dd>
-          </div>
-        )}
-        {row("Language", language) && (
-          <div class="flex items-baseline justify-between gap-3">
-            <dt class="text-ink-500 dark:text-ink-400">Language</dt>
-            <dd class="text-ink-900 dark:text-ink-100">{language}</dd>
-          </div>
-        )}
-        {row("License", licenseSpdx) && (
-          <div class="flex items-baseline justify-between gap-3">
-            <dt class="text-ink-500 dark:text-ink-400">License</dt>
-            <dd class="font-mono text-ink-900 dark:text-ink-100">{licenseDisplay(licenseSpdx)}</dd>
-          </div>
-        )}
-        {row("Default branch", repo?.default_branch) && (
-          <div class="flex items-baseline justify-between gap-3">
-            <dt class="text-ink-500 dark:text-ink-400">Default branch</dt>
-            <dd class="font-mono text-ink-900 dark:text-ink-100">{repo!.default_branch}</dd>
-          </div>
-        )}
-        {row("First commit", repo?.created_at ? new Date(String(repo!.created_at)).getUTCFullYear() : null) && (
-          <div class="flex items-baseline justify-between gap-3">
-            <dt class="text-ink-500 dark:text-ink-400">First commit</dt>
-            <dd class="text-ink-900 dark:text-ink-100">
-              <time datetime={String(repo!.created_at)}>{new Date(String(repo!.created_at)).getUTCFullYear()}</time>
-            </dd>
-          </div>
-        )}
-        {recentReleases[0] && (
-          <div class="flex items-baseline justify-between gap-3">
-            <dt class="text-ink-500 dark:text-ink-400">Latest release</dt>
-            <dd class="text-ink-900 dark:text-ink-100">
-              <a
-                href={recentReleases[0].html_url ?? repoUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                class="no-underline hover:underline"
-              >
-                {recentReleases[0].tag_name ?? recentReleases[0].name ?? "—"}
-              </a>
-            </dd>
-          </div>
-        )}
-      </dl>
-
-      <LanguageBreakdown languages={languages} totalBytes={totalLanguageBytes} />
-    </section>
-  )}
-
-  {/* ── Freshness card ─────────────────────────────────────── */}
-  {sidebar.showFreshness && (
-    <section
-      class="grove-card rounded-[var(--radius-lg)] border border-ink-200 bg-card p-4 dark:border-ink-800"
-      aria-labelledby="sidebar-freshness-title"
-    >
-      <h2
-        id="sidebar-freshness-title"
-        class="grove-card-title m-0 mb-3 text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400"
-      >
-        Freshness
-      </h2>
-      <dl class="grove-kv m-0 flex flex-col gap-2.5 text-sm">
-        {pushedLabel && pushedLabel !== "—" && (
-          <div class="flex items-baseline justify-between gap-3">
-            <dt class="text-ink-500 dark:text-ink-400">Last commit</dt>
-            <dd class="text-ink-900 dark:text-ink-100">{pushedLabel}</dd>
-          </div>
-        )}
-        {repo?.updated_at && (
-          <div class="flex items-baseline justify-between gap-3">
-            <dt class="text-ink-500 dark:text-ink-400">Last fetched</dt>
-            <dd class="text-ink-900 dark:text-ink-100">
-              <time datetime={String(repo.updated_at)}>{new Date(String(repo.updated_at)).toLocaleDateString()}</time>
-            </dd>
-          </div>
-        )}
-        {activityBadge && (
-          <div class="flex items-baseline justify-between gap-3">
-            <dt class="text-ink-500 dark:text-ink-400">Maintenance</dt>
-            <dd>
-              <span data-activity-tone={activityBadge.tone} class="grove-pill grove-pill--activity inline-flex items-center gap-1 rounded border px-1.5 py-0.5 text-[10px] font-medium">
-                {activityBadge.label}
-              </span>
-            </dd>
-          </div>
-        )}
-        {healthLabel && (
-          <div class="flex items-baseline justify-between gap-3">
-            <dt class="text-ink-500 dark:text-ink-400">Health</dt>
-            <dd class="text-ink-900 dark:text-ink-100">{healthLabel}</dd>
-          </div>
-        )}
-        {isArchived && (
-          <div class="flex items-baseline justify-between gap-3">
-            <dt class="text-ink-500 dark:text-ink-400">Status</dt>
-            <dd class="text-amber-700 dark:text-amber-400">Archived</dd>
-          </div>
-        )}
-        {repo?.homepage && (
-          <div class="flex items-baseline justify-between gap-3">
-            <dt class="text-ink-500 dark:text-ink-400">Docs</dt>
-            <dd class="truncate text-ink-900 dark:text-ink-100">
-              <a href={String(repo.homepage)} target="_blank" rel="noopener noreferrer" class="no-underline hover:underline">
-                {new URL(String(repo.homepage)).hostname}
-              </a>
-            </dd>
-          </div>
-        )}
-        {repoUrl && (
-          <div class="flex items-baseline justify-between gap-3">
-            <dt class="text-ink-500 dark:text-ink-400">Source</dt>
-            <dd class="text-ink-900 dark:text-ink-100">
-              <a href={repoUrl} target="_blank" rel="noopener noreferrer" class="no-underline hover:underline">
-                {ownerRepo ? `${ownerRepo.owner}/${ownerRepo.repo}` : repoUrl}
-              </a>
-            </dd>
-          </div>
-        )}
-      </dl>
-    </section>
-  )}
-
-  {/* ── Ecosystem card ─────────────────────────────────────── */}
-  {sidebar.showEcosystem && (
-    <section
-      class="grove-card rounded-[var(--radius-lg)] border border-ink-200 bg-card p-4 dark:border-ink-800"
-      aria-labelledby="sidebar-ecosystem-title"
-    >
-      <h2
-        id="sidebar-ecosystem-title"
-        class="grove-card-title m-0 mb-3 text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400"
-      >
-        Ecosystem
-      </h2>
-
-      {stacks.length > 0 && (
-        <div class="mb-3">
-          <h3 class="m-0 mb-1.5 text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Stack</h3>
-          <ul class="m-0 flex list-none flex-wrap gap-1.5 p-0">
-            {stacks.map((s) => (
-              <li>
-                <a href={`/${detail.slug}?stack=${encodeURIComponent(s)}`} class="inline-flex items-center gap-1.5 rounded-full bg-secondary py-0.5 pl-1.5 pr-2 text-2xs font-medium text-secondary-foreground no-underline">
-                  <Icon name={s} category="stack" size={12} />
-                  {taxonomyLabel("stacks", s)}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-
-      {platforms.length > 0 && (
-        <div class="mb-3">
-          <h3 class="m-0 mb-1.5 text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Platforms</h3>
-          <ul class="m-0 flex list-none flex-wrap gap-1.5 p-0">
-            {platforms.map((p) => (
-              <li class="inline-flex items-center gap-1.5 rounded-full border border-ink-200 py-0.5 pl-1.5 pr-2 text-2xs font-medium text-ink-700 dark:border-ink-800 dark:text-ink-300">
-                <Icon name={p} category="platform" size={12} />
-                {taxonomyLabel("platforms", p)}
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-
-      {category && (
-        <div class="mb-3">
-          <h3 class="m-0 mb-1.5 text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Category</h3>
-          <a href={`/${detail.slug}?category=${encodeURIComponent(category)}`} class="rounded-full bg-secondary px-2 py-0.5 text-2xs font-medium text-secondary-foreground no-underline">
-            {taxonomyLabel("categories", category)}
-          </a>
-        </div>
-      )}
-
-      {tags.length > 0 && (
-        <div class="mb-3">
-          <h3 class="m-0 mb-1.5 text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Tags</h3>
-          <ul class="m-0 flex list-none flex-wrap gap-1.5 p-0">
-            {tags.map((t) => (
-              <li>
-                <a href={`/${detail.slug}?tag=${encodeURIComponent(t)}`} class="rounded-full border border-ink-200 px-2 py-0.5 text-2xs font-medium text-ink-700 no-underline dark:border-ink-800 dark:text-ink-300">
-                  {taxonomyLabel("topics", t)}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-
-      {contributionSignals.length > 0 && (
-        <div>
-          <h3 class="m-0 mb-1.5 text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">Repository hygiene</h3>
-          <ul class="m-0 flex list-none flex-col gap-1 p-0 text-sm">
-            {contributionSignals.map((s) => (
-              <li class="inline-flex items-center gap-1.5 text-ink-700 dark:text-ink-200">
-                {s.ok ? (
-                  <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor" class="text-emerald-600 dark:text-emerald-400">
-                    <path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z" />
-                  </svg>
-                ) : (
-                  <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor" class="text-ink-400">
-                    <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z" />
-                  </svg>
-                )}
-                {s.label}
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-    </section>
-  )}
-
-  {/* ── Source card (small) ────────────────────────────────── */}
-  {sidebar.showSource && (
-    <section
-      class="grove-card grove-card--muted rounded-[var(--radius-lg)] border border-dashed border-ink-200 bg-card/50 p-4 text-2xs text-ink-500 dark:border-ink-800 dark:text-ink-400"
-      aria-labelledby="sidebar-source-title"
-    >
-      <h2
-        id="sidebar-source-title"
-        class="grove-card-title m-0 mb-1.5 text-2xs font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400"
-      >
-        Source
-      </h2>
-      <p class="m-0 leading-relaxed">
-        Reviewed by {record.curation?.reviewedBy ?? "grove"}
-        on <time datetime={String(record.curation?.reviewedAt)}>
-          {record.curation?.reviewedAt ? new Date(String(record.curation.reviewedAt)).toLocaleDateString() : "—"}
-        </time>.
-      </p>
-      {detail.collectionMembership && detail.collectionMembership.length > 0 && (
-        <p class="m-0 mt-1.5 leading-relaxed">
-          <span class="font-semibold">Also in: </span>
-          {detail.collectionMembership.map((c, i) => (
-            <>
-              <a href={c.url} class="text-inherit no-underline hover:underline">{c.title}</a>{i < detail.collectionMembership.length - 1 ? ", " : ""}
-            </>
-          ))}
-        </p>
-      )}
-      {readingMetrics.wordCount > 0 && (
-        <p class="m-0 mt-1 leading-relaxed">
-          Notes: {readingMetrics.wordCount.toLocaleString()} words · {readingMetrics.minutes} min read.
-        </p>
-      )}
-    </section>
-  )}
-</aside>

package/src/components/RefinePanel.astro

@@ -1,168 +0,0 @@
----
-/**
- * RefinePanel — multi-select facet dropdowns.
- *
- * Renders the ordered `groups` view-model produced by
- * `getDirectoryIndexModel().facetGroups` — visibility, ORDER, display
- * label, and selection mode all come from `browse.facets` + the core
- * facet registry, never from this component. Option labels arrive
- * pre-resolved from the taxonomy YAML, so the server render and the
- * client script share one label source.
- *
- * The form is a GET to the list page base, with each facet as a
- * repeated key. Empty values are dropped, so the URL stays clean.
- */
-
-import type { IndexFilters } from "../lib/search";
-import { SORT_OPTIONS } from "../lib/search";
-import FilterGroupMenu from "./FilterGroupMenu.astro";
-
-interface FacetValue {
-  value: string;
-  label?: string;
-  count?: number;
-}
-
-interface FacetGroupModel {
-  id: string;
-  filterKey: "stacks" | "platforms" | "categories" | "tags" | "licenses";
-  label: string;
-  single?: boolean;
-  options: FacetValue[];
-  initial: string[];
-}
-
-interface Props {
-  /** Ordered filter groups (see `getDirectoryIndexModel`). */
-  groups: FacetGroupModel[];
-  /** Current URL filter state — used to preselect the sort. */
-  initial: IndexFilters;
-  pathPrefix?: string;
-  class?: string;
-  /**
-   * Emit the default flex layout on the root. Pass `false` when the
-   * caller owns the layout — e.g. `layout={false} class="contents"` to
-   * promote the filter triggers into the parent's flex row. Without
-   * this the root's own `flex` would win over any display utility in
-   * `class`, since Tailwind emits `.contents` before `.flex`.
-   */
-  layout?: boolean;
-  /** Hide the sort select (e.g. when the page renders its own). */
-  hide?: Array<"sort">;
-}
-
-const {
-  groups: groupModels,
-  initial,
-  pathPrefix = "/",
-  class: className = "",
-  layout = true,
-  hide = [],
-} = Astro.props;
-
-function triggerLabel(group: FacetGroupModel): string {
-  if (group.initial.length === 0) return `${group.label}: Any`;
-  if (group.initial.length === 1) {
-    const selected = group.initial[0];
-    const option = group.options.find((candidate) => candidate.value === selected);
-    return `${group.label}: ${option?.label ?? selected}`;
-  }
-  return `${group.label}: ${group.initial.length} selected`;
-}
-
-const groups = groupModels.map((group) => ({
-  ...group,
-  active: group.initial.length > 0,
-  popoverId: `filter-popover-${group.filterKey}`,
-  trigger: triggerLabel(group),
-}));
----
-
-<div class:list={[layout && "flex flex-wrap items-center gap-2", className]} role="toolbar" aria-label="Filter items">
-    {groups.map((group) => <FilterGroupMenu {...group} />)}
-
-    {!hide.includes("sort") && (
-      <label class="relative">
-        <span class="sr-only">Sort items</span>
-        <select name="sort" class="h-9 cursor-pointer appearance-none border py-1.5 pl-3 pr-8 text-[0.8125rem] font-medium">
-          {SORT_OPTIONS.map((option) => <option value={option.value} selected={(initial.sort ?? "recently-updated") === option.value}>{option.label}</option>)}
-        </select>
-        <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" class="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-ink-400" fill="currentColor">
-          <path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"/>
-        </svg>
-      </label>
-    )}
-</div>
-
-<script is:inline define:vars={{ pathPrefix }}>
-  (() => {
-    const groups = document.querySelectorAll(".grove-filter");
-    const keys = { stacks: "stack", platforms: "platform", categories: "category", tags: "tag", licenses: "license" };
-    function closeAll(except) {
-      groups.forEach((group) => {
-        if (group === except) return;
-        const popover = group.querySelector(".grove-filter-popover");
-        const trigger = group.querySelector(".grove-filter-trigger");
-        if (popover && trigger) {
-          popover.hidden = true;
-          popover.classList.add("hidden");
-          trigger.setAttribute("aria-expanded", "false");
-        }
-      });
-    }
-    // A directory controller (DirectoryIndexClient) can adopt the URL
-    // in place and re-render without a reload; it signals that by
-    // cancelling the event. Anywhere else — a taxonomy page, no
-    // controller on the page at all — this falls back to navigating,
-    // so the panel keeps working on its own.
-    function go(url) {
-      const event = new CustomEvent("grove:navigate", { detail: { url }, cancelable: true });
-      if (document.dispatchEvent(event)) location.assign(url);
-    }
-    function navigate(group, values) {
-      const params = new URLSearchParams(location.search);
-      const key = keys[group.dataset.filterGroupKey];
-      params.delete(key);
-      params.delete("page");
-      values.forEach((value) => params.append(key, value));
-      go(params.toString() ? `${pathPrefix}?${params}` : pathPrefix);
-    }
-    groups.forEach((group) => {
-      const trigger = group.querySelector(".grove-filter-trigger");
-      const popover = group.querySelector(".grove-filter-popover");
-      trigger?.addEventListener("click", (event) => {
-        event.stopPropagation();
-        const opening = trigger.getAttribute("aria-expanded") !== "true";
-        closeAll(opening ? group : undefined);
-        popover.hidden = !opening;
-        popover.classList.toggle("hidden", !opening);
-        trigger.setAttribute("aria-expanded", String(opening));
-      });
-      group.querySelector(".grove-filter-apply")?.addEventListener("click", () => {
-        navigate(group, [...group.querySelectorAll(".grove-filter-input:checked")].map((input) => input.dataset.filterValue));
-      });
-      group.querySelector(".grove-filter-clear")?.addEventListener("click", () => navigate(group, []));
-      if (group.dataset.filterSingle === "true") {
-        group.querySelectorAll(".grove-filter-input").forEach((input) => input.addEventListener("change", () => navigate(group, [input.dataset.filterValue])));
-      }
-      popover?.addEventListener("click", (event) => event.stopPropagation());
-    });
-    document.addEventListener("click", () => closeAll());
-    document.addEventListener("keydown", (event) => {
-      if (event.key !== "Escape") return;
-      // Restore focus to the trigger whose popover was open so
-      // keyboard users don't lose their place.
-      const openGroup = [...groups].find((group) =>
-        group.querySelector('.grove-filter-trigger[aria-expanded="true"]'),
-      );
-      closeAll();
-      openGroup?.querySelector(".grove-filter-trigger")?.focus();
-    });
-    document.querySelector('select[name="sort"]')?.addEventListener("change", (event) => {
-      const params = new URLSearchParams(location.search);
-      params.set("sort", event.target.value);
-      params.delete("page");
-      go(params.toString() ? `${pathPrefix}?${params}` : pathPrefix);
-    });
-  })();
-</script>

package/src/components/SmartLensTabs.astro

@@ -1,81 +0,0 @@
----
-/**
- * SmartLensTabs — curated single-select lens tabs.
- *
- * Renders configured curated lenses as a horizontal tab bar. Sort choices,
- * including Recently added, belong in the separate sort control.
- * Clicking a tab navigates to the same list page with the `lens=`
- * query param updated. Other filter params (q, stack, platform,
- * category, sort) are preserved.
- *
- * The current selection is computed from `currentParams`, so the
- * component is server-render-only — no client JS required.
- *
- * Generic: uses the `LENSES` registry from `lib/lenses.ts` and
- * takes the list-page base via `pathPrefix`.
- */
-
-import { LENSES, hrefForLens, isLensActive } from "../lib/lenses";
-import { lensDisplay } from "../lib/display";
-import { lensTabClass } from "../ui/button.js";
-
-interface Props {
-  currentParams: URLSearchParams;
-  pathPrefix?: string;
-  class?: string;
-  /**
-   * Emit the default flex layout on the root. Pass `false` when the
-   * caller owns the layout — e.g. `layout={false} class="contents"` to
-   * promote the tabs into the parent's flex row. Without this the
-   * root's own `flex` would win over any display utility in `class`,
-   * since Tailwind emits `.contents` before `.flex`.
-   */
-  layout?: boolean;
-  /** Override the visible lens list (defaults to LENSES). */
-  lensIds?: readonly string[];
-  /** Consumer noun for the unfiltered lens, e.g. "All apps". */
-  allLabel?: string;
-}
-
-const {
-  currentParams,
-  pathPrefix = "/",
-  class: className = "",
-  layout = true,
-  lensIds,
-  allLabel,
-} = Astro.props;
-
-// If `lensIds` is provided, filter LENSES to those ids in that order.
-const lenses =
-  lensIds && lensIds.length > 0
-    ? lensIds
-        .map((id) => LENSES.find((l) => l.id === id))
-        .filter((l): l is NonNullable<typeof l> => Boolean(l))
-    : LENSES;
----
-
-<nav
-  class:list={[
-    "grove-lens-tabs",
-    layout && "flex flex-wrap items-center gap-1.5",
-    className,
-  ]}
-  aria-label="Curated views"
->
-  {lenses.map((lens) => {
-    const active = isLensActive(lens.id, currentParams);
-    return (
-      <a
-        href={hrefForLens(lens.id, currentParams, pathPrefix)}
-        class={lensTabClass(active)}
-        aria-current={active ? "page" : undefined}
-        data-lens-id={lens.id}
-        data-event="lens_tab_click"
-        data-event-source="smart_lens_tabs"
-      >
-        {lens.id === "all" && allLabel ? allLabel : lensDisplay(lens.id)}
-      </a>
-    );
-  })}
-</nav>