@grove-dev/astro 0.1.0

package/templates/default/src/components/OriginalCollection.astro

@@ -0,0 +1,144 @@
+---
+import type { SiteStats } from "../data/stats";
+import Container from "./layout/Container.astro";
+
+interface Props {
+  stats: SiteStats;
+}
+
+const { stats } = Astro.props;
+const repoUrl = stats.originalRepo;
+
+function formatCount(n: number): string {
+  if (n >= 1000) {
+    const k = n / 1000;
+    return (k >= 10 ? Math.round(k).toString() : k.toFixed(1)) + "k";
+  }
+  return n.toString();
+}
+
+const starsLabel = formatCount(stats.stars);
+const forksLabel = formatCount(stats.forks);
+---
+
+<section
+  id="original"
+  class="section scroll-mt-20 border-b border-ink-200 dark:border-ink-800"
+>
+  <Container>
+    <div
+      class="card flex flex-col gap-6 p-6 sm:flex-row sm:items-center sm:justify-between sm:gap-8"
+    >
+      <div class="max-w-2xl">
+        <span
+          class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400"
+          >Origin</span
+        >
+        <h2
+          class="mt-1 text-[1.375rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100 m-0"
+        >
+          Started from Open Source Flutter Apps.
+        </h2>
+        <p
+          class="mt-2 text-[0.9375rem] leading-relaxed text-ink-500 dark:text-ink-400 m-0"
+        >
+          The project began as a curated Flutter app list and is now expanding
+          into a broader open-source app directory, starting with mobile.
+        </p>
+
+        <dl class="mt-4 flex flex-wrap items-center gap-x-6 gap-y-2">
+          <div class="flex items-center gap-2">
+            <svg
+              viewBox="0 0 16 16"
+              width="14"
+              height="14"
+              aria-hidden="true"
+              fill="currentColor"
+              class="text-amber-500"
+            >
+              <path
+                d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"
+              />
+            </svg>
+            <dd class="m-0 text-[0.9375rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+              <span class="font-mono">{starsLabel}+</span>
+              <span class="ml-1 text-2xs font-normal text-ink-500 dark:text-ink-400">stars</span>
+            </dd>
+          </div>
+          <div class="flex items-center gap-2">
+            <svg
+              viewBox="0 0 16 16"
+              width="14"
+              height="14"
+              aria-hidden="true"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              class="text-ink-500 dark:text-ink-400"
+            >
+              <circle cx="4" cy="3" r="1.5"/>
+              <circle cx="12" cy="3" r="1.5"/>
+              <circle cx="8" cy="8" r="1.5"/>
+              <circle cx="4" cy="13" r="1.5"/>
+              <circle cx="12" cy="13" r="1.5"/>
+              <path d="M5 4.2 7 6.8M11 4.2 9 6.8M5 11.8 7 9.2M11 11.8 9 9.2"/>
+            </svg>
+            <dd class="m-0 text-[0.9375rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+              <span class="font-mono">{forksLabel}+</span>
+              <span class="ml-1 text-2xs font-normal text-ink-500 dark:text-ink-400">forks</span>
+            </dd>
+          </div>
+          <div class="flex items-center gap-2">
+            <svg
+              viewBox="0 0 16 16"
+              width="14"
+              height="14"
+              aria-hidden="true"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              class="text-ink-500 dark:text-ink-400"
+            >
+              <path d="M2 2.5A2.5 2.5 0 0 1 4.5 0h8.75a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1 0-1.5h1.75v-2h-8a1 1 0 0 0-.714 1.7.75.75 0 0 1-1.072 1.05A2.495 2.495 0 0 1 2 11.5Z"/>
+              <path d="M5 6.5a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5A.75.75 0 0 1 5 6.5Zm.75 2.25a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5Z"/>
+            </svg>
+            <dd class="m-0 text-[0.9375rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
+              <span class="font-mono">{stats.contributors}+</span>
+              <span class="ml-1 text-2xs font-normal text-ink-500 dark:text-ink-400">contributors</span>
+            </dd>
+          </div>
+        </dl>
+      </div>
+
+      <div class="flex shrink-0 flex-col gap-2 sm:items-end">
+        <a
+          href={repoUrl}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="btn-primary"
+        >
+          <svg
+            viewBox="0 0 16 16"
+            width="14"
+            height="14"
+            aria-hidden="true"
+            fill="currentColor"
+          >
+            <path
+              d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38v-1.33c-2.22.48-2.69-1.07-2.69-1.07-.36-.92-.89-1.17-.89-1.17-.73-.5.05-.49.05-.49.8.06 1.23.83 1.23.83.72 1.22 1.87.87 2.33.67.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48v2.19c0 .21.15.46.55.38A8 8 0 0 0 8 0Z"
+            />
+          </svg>
+          View on GitHub
+        </a>
+        <a
+          href={`${repoUrl}/blob/main/CONTRIBUTING.md`}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="text-2xs text-ink-500 hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100"
+        >
+          How to contribute →
+        </a>
+      </div>
+    </div>
+  </Container>
+</section>

package/templates/default/src/components/RefinePanel.astro

@@ -0,0 +1,272 @@
+---
+import type { AppsFilters } from "../lib/apps-search";
+
+interface FacetOption {
+  value: string;
+  count: number;
+}
+
+interface Props {
+  facets: {
+    stacks: FacetOption[];
+    platforms: FacetOption[];
+    categories: FacetOption[];
+    labels: FacetOption[];
+    licenses: FacetOption[];
+  };
+  initial: AppsFilters;
+  class?: string;
+}
+
+const { facets, initial, class: className = "" } = Astro.props;
+
+/**
+ * A single filter group rendered as a dropdown trigger + popover.
+ * Multi-select by default; license is intentionally single-select.
+ */
+interface FilterGroup {
+  /** Short label, e.g. "Stack". */
+  label: string;
+  /** Key in AppsFilters (plural). */
+  filterKey: "stacks" | "platforms" | "categories" | "labels" | "licenses";
+  /** Options with counts. */
+  options: FacetOption[];
+  initial: string[];
+  /** Single-select (radio-like) — for license, which is usually one. */
+  single?: boolean;
+}
+
+const groups: FilterGroup[] = [
+  { label: "Stack", filterKey: "stacks", options: facets.stacks, initial: initial.stacks ?? [] },
+  { label: "Platform", filterKey: "platforms", options: facets.platforms, initial: initial.platforms ?? [] },
+  { label: "Category", filterKey: "categories", options: facets.categories, initial: initial.categories ?? [] },
+  { label: "License", filterKey: "licenses", options: facets.licenses, initial: initial.licenses ?? [], single: true },
+];
+
+/** Build the trigger label: "Stack" when empty, "Stack: 2" when 2 selected. */
+function triggerLabel(g: FilterGroup): string {
+  const n = g.initial.length;
+  if (n === 0) return `${g.label}: Any`;
+  if (n === 1) return `${g.label}: ${g.initial[0]}`;
+  return `${g.label}: ${n} selected`;
+}
+---
+
+<section class={`${className}`}>
+  <div
+    class="flex flex-wrap items-center gap-2"
+    role="toolbar"
+    aria-label="Filter apps"
+  >
+    {
+      groups.map((g) => {
+        const hasActive = g.initial.length > 0;
+        const popoverId = `filter-popover-${g.filterKey}`;
+        return (
+          <div
+            class="apps-filter relative"
+            data-filter-group-key={g.filterKey}
+            data-filter-single={g.single ? "true" : "false"}
+          >
+            <button
+              type="button"
+              class={`apps-filter-trigger inline-flex h-9 items-center gap-1.5 rounded-md border px-3 text-[0.8125rem] font-medium transition-colors ${
+                hasActive
+                  ? "border-ink-900 bg-ink-900 text-white dark:border-ink-100 dark:bg-ink-100 dark:text-ink-900"
+                  : "border-ink-200 bg-white text-ink-700 hover:border-ink-300 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300 dark:hover:border-ink-700 dark:hover:bg-ink-900/60"
+              }`}
+              aria-haspopup="listbox"
+              aria-expanded="false"
+              aria-controls={popoverId}
+              data-filter-trigger
+            >
+              <span>{triggerLabel(g)}</span>
+              <svg
+                viewBox="0 0 16 16"
+                width="11"
+                height="11"
+                aria-hidden="true"
+                fill="currentColor"
+                class="opacity-70"
+              >
+                <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>
+            </button>
+            <div
+              id={popoverId}
+              class="apps-filter-popover absolute left-0 top-full z-40 mt-1 hidden w-72 max-w-[calc(100vw-2rem)] rounded-lg border border-ink-200 bg-white p-1.5 shadow-lg dark:border-ink-800 dark:bg-ink-950"
+              role="listbox"
+              aria-multiselectable={g.single ? "false" : "true"}
+              hidden
+            >
+              {g.options.length === 0 ? (
+                <p class="m-0 px-2 py-1.5 text-2xs text-ink-400 dark:text-ink-500">
+                  No options available.
+                </p>
+              ) : (
+                <ul class="m-0 flex max-h-72 flex-col gap-0.5 overflow-y-auto p-0" data-filter-list>
+                  {g.options.map((opt) => {
+                    const checked = g.initial.includes(opt.value);
+                    return (
+                      <li>
+                        <label
+                          class={`flex cursor-pointer items-center justify-between gap-3 rounded-md px-2 py-1.5 text-[0.8125rem] transition-colors hover:bg-ink-50 dark:hover:bg-ink-900/60 ${
+                            checked
+                              ? "text-ink-900 dark:text-ink-100"
+                              : "text-ink-700 dark:text-ink-300"
+                          }`}
+                        >
+                          <span class="flex min-w-0 items-center gap-2">
+                            <input
+                              type={g.single ? "radio" : "checkbox"}
+                              class="apps-filter-input h-3.5 w-3.5 shrink-0 cursor-pointer accent-ink-900 dark:accent-ink-100"
+                              data-filter-key={g.filterKey}
+                              data-filter-value={opt.value}
+                              data-filter-single={g.single ? "true" : undefined}
+                              checked={checked}
+                            />
+                            <span class="truncate">{opt.value}</span>
+                          </span>
+                          <span class="shrink-0 font-mono text-2xs tabular-nums text-ink-500 dark:text-ink-400">
+                            {opt.count}
+                          </span>
+                        </label>
+                      </li>
+                    );
+                  })}
+                </ul>
+              )}
+              <div class="mt-1 flex items-center justify-between border-t border-ink-100 px-2 pt-1.5 dark:border-ink-900">
+                <button
+                  type="button"
+                  class="apps-filter-clear text-2xs font-medium text-ink-500 hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100"
+                  hidden={!hasActive}
+                >
+                  Clear {g.label.toLowerCase()}
+                </button>
+                <button
+                  type="button"
+                  class="apps-filter-apply ml-auto rounded-md bg-ink-900 px-2.5 py-1 text-2xs font-medium text-white transition-colors hover:bg-ink-700 dark:bg-ink-100 dark:text-ink-900 dark:hover:bg-ink-300"
+                >
+                  Apply
+                </button>
+              </div>
+            </div>
+          </div>
+        );
+      })
+    }
+  </div>
+</section>
+
+<script>
+  /**
+   * Dropdown behavior for each filter group:
+   *   - click trigger → toggle popover
+   *   - click outside / ESC → close
+   *   - Apply / Clear / Single-select fire `applyFilterPatch()` which
+   *     is a host-page hook (defined in `src/pages/apps/index.astro`).
+   *     The hook updates the URL via `history.pushState` (no reload)
+   *     and re-runs the row filter so the result list updates
+   *     immediately. Static pages don't filter on the server, so
+   *     this is the only way the filter actually narrows the list.
+   */
+  function applyFilterPatch(patch: Record<string, string[] | null>) {
+    const fn = (window as unknown as { __applyFilters?: (p: typeof patch) => void }).__applyFilters;
+    if (typeof fn === "function") fn(patch);
+    else location.assign(location.pathname); // graceful fallback
+  }
+
+  (() => {
+    const groups = document.querySelectorAll<HTMLElement>(".apps-filter");
+    if (!groups.length) return;
+
+    function closeAll(except?: HTMLElement) {
+      groups.forEach((g) => {
+        if (g === except) return;
+        const pop = g.querySelector<HTMLElement>(".apps-filter-popover");
+        const trig = g.querySelector<HTMLElement>(".apps-filter-trigger");
+        if (!pop || !trig) return;
+        pop.hidden = true;
+        pop.classList.add("hidden");
+        trig.setAttribute("aria-expanded", "false");
+      });
+    }
+
+    function openGroup(g: HTMLElement) {
+      const pop = g.querySelector<HTMLElement>(".apps-filter-popover");
+      const trig = g.querySelector<HTMLElement>(".apps-filter-trigger");
+      if (!pop || !trig) return;
+      pop.hidden = false;
+      pop.classList.remove("hidden");
+      trig.setAttribute("aria-expanded", "true");
+    }
+
+    function closeGroup(g: HTMLElement) {
+      const pop = g.querySelector<HTMLElement>(".apps-filter-popover");
+      const trig = g.querySelector<HTMLElement>(".apps-filter-trigger");
+      if (!pop || !trig) return;
+      pop.hidden = true;
+      pop.classList.add("hidden");
+      trig.setAttribute("aria-expanded", "false");
+    }
+
+    groups.forEach((g) => {
+      const trig = g.querySelector<HTMLElement>(".apps-filter-trigger");
+      const pop = g.querySelector<HTMLElement>(".apps-filter-popover");
+      const applyBtn = g.querySelector<HTMLElement>(".apps-filter-apply");
+      const clearBtn = g.querySelector<HTMLElement>(".apps-filter-clear");
+      const isSingle = g.dataset.filterSingle === "true";
+      if (!trig || !pop) return;
+
+      trig.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const isOpen = trig.getAttribute("aria-expanded") === "true";
+        closeAll(isOpen ? undefined : g);
+        if (isOpen) closeGroup(g);
+        else openGroup(g);
+      });
+
+      // Single-select: click any input immediately applies + closes.
+      if (isSingle) {
+        pop.querySelectorAll<HTMLInputElement>(".apps-filter-input").forEach((input) => {
+          input.addEventListener("change", () => {
+            const key = input.dataset.filterKey!;
+            const value = input.dataset.filterValue!;
+            applyFilterPatch({ [key]: [value] });
+          });
+        });
+      }
+
+      // Apply: read checked inputs, write URL.
+      applyBtn?.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const key = g.dataset.filterGroupKey!;
+        const inputs = pop.querySelectorAll<HTMLInputElement>(".apps-filter-input");
+        const chosen: string[] = [];
+        inputs.forEach((i) => {
+          if (i.checked) chosen.push(i.dataset.filterValue!);
+        });
+        applyFilterPatch({ [key]: chosen });
+      });
+
+      // Clear: uncheck all in this group, remove from URL.
+      clearBtn?.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const key = g.dataset.filterGroupKey!;
+        applyFilterPatch({ [key]: null });
+      });
+
+      // Prevent clicks inside the popover from closing it (e.g. the
+      // scrollbar area).
+      pop.addEventListener("click", (e) => e.stopPropagation());
+    });
+
+    // Close on outside click.
+    document.addEventListener("click", () => closeAll());
+    // Close on ESC.
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") closeAll();
+    });
+  })();
+</script>

package/templates/default/src/components/ScoreBars.astro

@@ -0,0 +1,72 @@
+---
+import { SCORE_DIMENSIONS, SCORE_LABELS, scoreTier, scoreLabel } from "../lib/scores";
+import type { AppScores } from "../data/types";
+
+interface Props {
+  scores?: AppScores;
+  /** Show the "Overall" dimension too (default true). */
+  showOverall?: boolean;
+  /** Compact mode: hide value text, bar only. */
+  compact?: boolean;
+  class?: string;
+}
+
+const { scores, showOverall = true, compact = false, class: className = "" } = Astro.props;
+const dims = showOverall ? SCORE_DIMENSIONS : SCORE_DIMENSIONS.filter((d) => d !== "overall");
+const hasAny = scores && Object.values(scores).some((v) => typeof v === "number");
+---
+
+<dl
+  class={`flex flex-wrap items-center gap-x-3 gap-y-1.5 text-2xs ${className}`}
+  aria-label="App scores"
+>
+  {!hasAny && (
+    <span class="text-ink-400 dark:text-ink-500">Scores not yet curated</span>
+  )}
+  {hasAny &&
+    dims.map((dim) => {
+      const v = scores![dim];
+      const tier = typeof v === "number" ? scoreTier(v) : 0;
+      const isOverall = dim === "overall";
+      return (
+        <div class="inline-flex items-center gap-1.5">
+          <dt
+            class={`${
+              isOverall
+                ? "font-semibold text-ink-700 dark:text-ink-200"
+                : "text-ink-500 dark:text-ink-400"
+            }`}
+          >
+            {SCORE_LABELS[dim]}
+          </dt>
+          {!compact && (
+            <dd
+              class={`font-mono ${
+                isOverall
+                  ? "text-ink-900 dark:text-ink-100"
+                  : "text-ink-700 dark:text-ink-300"
+              }`}
+            >
+              {scoreLabel(v)}
+            </dd>
+          )}
+          <dd
+            class="flex h-1.5 w-10 gap-px"
+            aria-label={`${SCORE_LABELS[dim]} ${scoreLabel(v)} of 100`}
+          >
+            {[0, 1, 2, 3].map((i) => (
+              <div
+                class={`flex-1 rounded-sm ${
+                  i < tier
+                    ? isOverall
+                      ? "bg-ink-700 dark:bg-ink-200"
+                      : "bg-ink-500 dark:bg-ink-400"
+                    : "bg-ink-200 dark:bg-ink-800"
+                }`}
+              />
+            ))}
+          </dd>
+        </div>
+      );
+    })}
+</dl>

package/templates/default/src/components/SmartLensTabs.astro

@@ -0,0 +1,65 @@
+---
+import { LENSES, PRIMARY_LENSES, isLensActive, type LensId } from "../lib/lenses";
+
+interface Props {
+  currentParams: URLSearchParams;
+  class?: string;
+}
+
+const { currentParams, class: className = "" } = Astro.props;
+
+// Render only the 6 primary lenses, in declared order.
+const tabs = PRIMARY_LENSES.map((id) => LENSES.find((l) => l.id === id)!).filter(Boolean);
+
+// Build href for a lens: merge lens's params on top of current search.
+function hrefFor(lensId: LensId): string {
+  const sp = new URLSearchParams(currentParams);
+  // Clear any existing lens
+  sp.delete("lens");
+  if (lensId !== "all") {
+    const def = LENSES.find((l) => l.id === lensId);
+    if (def) {
+      for (const [k, v] of Object.entries(def.toParams())) {
+        if (Array.isArray(v)) {
+          sp.delete(k);
+          for (const item of v) sp.append(k, item);
+        } else {
+          sp.set(k, v);
+        }
+      }
+    }
+  }
+  const qs = sp.toString();
+  return qs ? `/apps?${qs}` : "/apps";
+}
+---
+
+<nav
+  class={`overflow-x-auto ${className}`}
+  aria-label="Curated lenses"
+>
+  <ul class="m-0 flex list-none items-center gap-1 p-0 whitespace-nowrap">
+    {
+      tabs.map((lens) => {
+        const isActive = isLensActive(lens.id, currentParams);
+        return (
+          <li>
+            <a
+              href={hrefFor(lens.id)}
+              data-lens-id={lens.id}
+              class={`lens-tab inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-2xs font-medium transition-colors ${
+                isActive
+                  ? "border-ink-900 bg-ink-900 text-white dark:border-ink-100 dark:bg-ink-100 dark:text-ink-900"
+                  : "border-ink-200 bg-white text-ink-700 hover:border-ink-300 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300 dark:hover:border-ink-700 dark:hover:bg-ink-900/60"
+              }`}
+              aria-current={isActive ? "page" : undefined}
+              title={lens.description}
+            >
+              {lens.label}
+            </a>
+          </li>
+        );
+      })
+    }
+  </ul>
+</nav>

package/templates/default/src/components/StackGrid.astro

@@ -0,0 +1,95 @@
+---
+import type { Stack } from "../data/stacks";
+import SectionHeader from "./layout/SectionHeader.astro";
+import Container from "./layout/Container.astro";
+import Icon from "./icons/Icon.astro";
+import { countByStack } from "../lib/taxonomy-counts";
+
+interface Props {
+  stacks: Stack[];
+}
+
+const { stacks } = Astro.props;
+const counts = countByStack();
+
+const statusLabel: Record<Stack["status"], string> = {
+  live: "Available now",
+  expanding: "Expanding",
+  planned: "Planned",
+};
+
+const statusBadge: Record<Stack["status"], string> = {
+  live: "border-emerald-300/60 bg-emerald-50 text-emerald-800 dark:border-emerald-800/60 dark:bg-emerald-950/40 dark:text-emerald-300",
+  expanding: "border-ink-200 bg-ink-50 text-ink-700 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-300",
+  planned: "border-ink-200 bg-white text-ink-500 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-500",
+};
+
+// Decorative count for each stack. We render it as a small "n apps" pill
+// for live stacks and as a "0 apps" / "Planned" pill for the rest so the
+// UI is honest about coverage — no fake numbers, no "Available now"
+// stacks that secretly have zero apps.
+const enriched = stacks
+  .map((s) => ({ ...s, count: counts.get(s.slug) ?? 0 }))
+  .sort((a, b) => b.count - a.count);
+---
+
+<section
+  id="stacks"
+  class="section scroll-mt-20 border-b border-ink-200 dark:border-ink-800"
+>
+  <Container>
+    <SectionHeader
+      eyebrow="Stacks"
+      title="Browse by stack"
+      description="Pick a stack to see real apps built with it."
+    />
+
+    <div class="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
+      {
+        enriched.map((stack) => (
+          <a
+            href={`/apps?stack=${encodeURIComponent(stack.name)}`}
+            class="card card-hover group flex h-full items-center gap-3 p-3.5 no-underline"
+          >
+            {/* Compact stack icon — supports the card without dominating it */}
+            <div
+              class="flex h-9 w-9 shrink-0 items-center justify-center rounded-md border border-ink-200 bg-white dark:border-ink-800 dark:bg-ink-950"
+              aria-hidden="true"
+            >
+              <Icon
+                name={stack.name}
+                category="stack"
+                size={18}
+                class="h-[18px] w-[18px]"
+              />
+            </div>
+
+            <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+              <div class="flex items-center gap-2">
+                <h3 class="m-0 text-[0.875rem] font-semibold tracking-tight text-ink-900 group-hover:underline dark:text-ink-100">
+                  {stack.name}
+                </h3>
+                <span
+                  class="inline-flex items-center rounded-md border border-ink-200 bg-ink-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-ink-600 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-400"
+                  title={`${stack.count} apps in this stack`}
+                >
+                  {stack.count} apps
+                </span>
+              </div>
+              <p class="m-0 truncate text-2xs text-ink-500 dark:text-ink-400">
+                {stack.blurb}
+              </p>
+            </div>
+
+            <span
+              class={`shrink-0 inline-flex items-center rounded-md border px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wider ${statusBadge[stack.status]}`}
+              aria-label={`Status: ${statusLabel[stack.status]}`}
+            >
+              {statusLabel[stack.status]}
+            </span>
+          </a>
+        ))
+      }
+    </div>
+  </Container>
+</section>