@grove-dev/astro 0.1.5 → 0.2.5

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

@@ -1,176 +0,0 @@
----
-import { siteConfig } from "../data/config";
-import Container from "./layout/Container.astro";
-import { stats } from "../data/stats";
-import { compact } from "../lib/format";
-
-const githubUrl = stats.originalRepo;
-
-const trustStats: { value: string; label: string }[] = [
-  { value: compact(stats.apps), label: "apps indexed" },
-  { value: String(stats.categories), label: "categories" },
-  { value: String(stats.stacks), label: "stacks" },
-  { value: compact(stats.contributors), label: "contributors" },
-  { value: compact(stats.stars), label: "GitHub stars" },
-];
----
-
-<section class="relative overflow-hidden border-b border-ink-200 dark:border-ink-800">
-  {/* Soft animated background gradient — subtle, not loud. */}
-  <div
-    aria-hidden="true"
-    class="pointer-events-none absolute inset-0 opacity-60 dark:opacity-40"
-    style="
-      background-image:
-        radial-gradient(60% 50% at 15% 20%, rgba(31, 111, 235, 0.12), transparent 60%),
-        radial-gradient(50% 40% at 85% 10%, rgba(110, 231, 183, 0.10), transparent 60%),
-        radial-gradient(40% 40% at 50% 90%, rgba(251, 146, 60, 0.08), transparent 60%);
-    "
-  ></div>
-
-  <Container>
-    <div class="relative py-14 sm:py-20">
-      <div class="max-w-3xl">
-        <span
-          class="inline-flex animate-fade-in items-center gap-2 text-2xs font-medium text-ink-500 dark:text-ink-400"
-        >
-          <span
-            aria-hidden="true"
-            class="inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-emerald-500"
-          ></span>
-          A directory of real open-source apps
-          <span
-            class="inline-flex items-center rounded-full border border-amber-300 bg-amber-50 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-amber-700 dark:border-amber-700/50 dark:bg-amber-900/20 dark:text-amber-300"
-            aria-label="Pre-1.0 — data and UI are still being curated. Expect rough edges."
-          >
-            Beta
-          </span>
-          <span class="text-ink-400 dark:text-ink-500">·</span>
-          <span>v0.1</span>
-        </span>
-
-        <h1
-          class="mt-3 animate-fade-in-up text-[2.25rem] sm:text-[2.75rem] md:text-[3rem] font-semibold tracking-[-0.02em] leading-[1.05] text-ink-900 dark:text-ink-100 m-0"
-          style="animation-delay: 0.05s;"
-        >
-          Find open-source apps you can actually<br class="hidden sm:block" />
-          <span
-            class="bg-gradient-to-r from-ink-900 via-ink-700 to-ink-900 bg-clip-text text-transparent dark:from-ink-100 dark:via-ink-300 dark:to-ink-100"
-            style="background-size: 200% 200%; animation: fade-in-up 0.7s ease-out 0.1s both, gradient-shift 8s ease-in-out 1s infinite;"
-          >
-            run, study, and contribute to.
-          </span>
-        </h1>
-
-        <p
-          class="mt-4 animate-fade-in-up text-[0.9375rem] sm:text-[1rem] leading-relaxed text-ink-500 dark:text-ink-400 m-0 max-w-[64ch]"
-          style="animation-delay: 0.15s;"
-        >
-          {siteConfig.name} is a curated directory of real applications with public source code.
-          Browse by stack, category, maturity, platform, license, stars, and activity — without
-          digging through random GitHub searches and outdated README lists.
-        </p>
-      </div>
-
-      {/* Trust stats row — the single most credibility-critical block on the
-          page. Number + label, monospaced numbers so they line up. */}
-      <dl
-        class="mt-7 grid grid-cols-2 gap-x-4 gap-y-3 sm:grid-cols-5"
-        aria-label="Directory at a glance"
-      >
-        {
-          trustStats.map((s) => (
-            <div class="flex flex-col gap-0.5">
-              <dt class="sr-only">{s.label}</dt>
-              <dd class="m-0 font-mono text-[1.25rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
-                {s.value}
-              </dd>
-              <dd class="m-0 text-2xs uppercase tracking-wider text-ink-500 dark:text-ink-400">
-                {s.label}
-              </dd>
-            </div>
-          ))
-        }
-      </dl>
-
-      {/* Search + filters */}
-      <form
-        class="mt-7 flex flex-col gap-2 sm:flex-row sm:items-stretch"
-        role="search"
-        action="/apps"
-        method="get"
-      >
-        <label class="relative flex-1">
-          <span class="sr-only">Search apps, stacks, categories, licenses</span>
-          <svg
-            viewBox="0 0 16 16"
-            width="16"
-            height="16"
-            aria-hidden="true"
-            class="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-ink-400"
-            fill="currentColor"
-          >
-            <path
-              d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"
-            ></path>
-          </svg>
-          <input
-            type="search"
-            name="q"
-            placeholder="Search apps, stacks, categories, licenses, platforms..."
-            class="h-10 w-full rounded-md border border-ink-200 bg-white pl-10 pr-3 text-[0.9375rem] text-ink-900 placeholder:text-ink-400 focus:border-ink-900 focus:outline-none focus:ring-2 focus:ring-ink-900/10 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-100 dark:placeholder:text-ink-500 dark:focus:border-ink-100 dark:focus:ring-ink-100/15"
-          />
-        </label>
-        <a
-          href="/apps"
-          class="inline-flex h-10 items-center justify-center gap-1.5 rounded-md border border-ink-200 bg-white px-3 text-[0.875rem] font-medium text-ink-700 transition-colors 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/40"
-          aria-label="Browse all apps with filters"
-        >
-          <svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true" fill="currentColor">
-            <path d="M.75 3h14.5a.75.75 0 0 1 .55 1.26l-5.55 6.1v4.39a.75.75 0 0 1-1.2.6l-2.5-1.87a.75.75 0 0 1-.3-.6v-2.52L.2 4.26A.75.75 0 0 1 .75 3Z"/>
-          </svg>
-          <span>Filters</span>
-        </a>
-        <button
-          type="submit"
-          class="btn-primary h-10 px-4 sm:px-5"
-        >
-          Search
-        </button>
-      </form>
-
-      <p
-        class="mt-2 text-2xs text-ink-500 dark:text-ink-400 m-0"
-        aria-hidden="true"
-      >
-        Try{" "}
-        <a href="/apps?stack=Flutter" class="font-mono text-ink-700 underline-offset-2 hover:underline dark:text-ink-300">Flutter apps</a>
-        <span class="mx-1">·</span>
-        <a href="/apps?category=Finance" class="font-mono text-ink-700 underline-offset-2 hover:underline dark:text-ink-300">Finance</a>
-        <span class="mx-1">·</span>
-        <a href="/apps?label=hot" class="font-mono text-ink-700 underline-offset-2 hover:underline dark:text-ink-300">Hot projects</a>
-        <span class="mx-1">·</span>
-        <a href="/apps?platform=Android" class="font-mono text-ink-700 underline-offset-2 hover:underline dark:text-ink-300">Android</a>
-        <span class="mx-1">·</span>
-        <a href="/apps?label=mature" class="font-mono text-ink-700 underline-offset-2 hover:underline dark:text-ink-300">Mature</a>
-      </p>
-
-      <div class="mt-5 flex flex-wrap items-center gap-2">
-        <a href="#new" class="btn-primary">Browse apps</a>
-        <a
-          href={`${githubUrl}/blob/main/CONTRIBUTING.md`}
-          target="_blank"
-          rel="noopener noreferrer"
-          class="btn-outline">Submit via GitHub</a
-        >
-        <a
-          href={githubUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          class="btn-ghost"
-          >View source on GitHub →</a
-        >
-      </div>
-    </div>
-  </Container>
-</section>

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

@@ -1,57 +0,0 @@
----
-import { siteConfig } from "../data/config";
-import Container from "./layout/Container.astro";
-
-const points = [
-  {
-    title: "Real codebases",
-    body: "Not just tutorials or packages — apps that actually run.",
-  },
-  {
-    title: "Searchable context",
-    body: "Find apps by stack, platform, category, license, and activity.",
-  },
-  {
-    title: "Open data",
-    body: "Static site. GitHub-based data. Community maintained.",
-  },
-];
----
-
-<section id="about" class="section scroll-mt-20">
-  <Container size="narrow">
-    <span
-      class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400"
-      >About</span
-    >
-    <h2
-      class="mt-1 text-[1.5rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100 m-0"
-    >
-      Why this exists
-    </h2>
-    <p
-      class="mt-3 text-[0.9375rem] leading-relaxed text-ink-500 dark:text-ink-400 m-0"
-    >
-      Most app examples are either toy projects, abandoned lists, or hard to
-      search. {siteConfig.name} focuses on real application codebases that
-      developers can study, compare, and contribute to.
-    </p>
-
-    <ul
-      class="mt-6 grid list-none grid-cols-1 gap-3 p-0 m-0 sm:grid-cols-3"
-    >
-      {
-        points.map((p) => (
-          <li class="card p-4">
-            <h3 class="m-0 text-[0.875rem] font-semibold text-ink-900 dark:text-ink-100">
-              {p.title}
-            </h3>
-            <p class="mt-1 m-0 text-2xs leading-relaxed text-ink-500 dark:text-ink-400">
-              {p.body}
-            </p>
-          </li>
-        ))
-      }
-    </ul>
-  </Container>
-</section>

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

@@ -1,144 +0,0 @@
----
-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

@@ -1,272 +0,0 @@
----
-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>