Match the site to the approved designs

Denser star field, the page nebula, a favicon package, the filament banner
without its box, the About portrait, Kashi and tea photos and Scorpius, the
Store's own header, a header logo glow, a resume PDF that fills its page,
one divider on the Library and Shelf, star-chart art for coverless
favorites, Shelf Players, Play time and blog filters with a Show all fold,
make kind pills on craft pages, and full-width closing bands.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx

services/site/src/pages/library/shelf.astro

@@ -6,7 +6,6 @@
  * counts, play times and box art sync from BoardGameGeek (a cover set in the
  * note wins); no filter for them yet.
  */
-import Divider from "@gk/ui/components/Divider.astro";
 import FilterGroup from "@gk/ui/components/FilterGroup.astro";
 import GiltCorners from "@gk/ui/components/GiltCorners.astro";
 import PageShell from "@gk/ui/components/PageShell.astro";
@@ -18,7 +17,7 @@ import FilterLayout from "../../components/library/FilterLayout.astro";
 import GameCard from "../../components/library/GameCard.astro";
 import LibraryHero from "../../components/library/LibraryHero.astro";
 import RailGroup from "../../components/library/RailGroup.astro";
-import { gameShows, onTheTable, playStyles, searchText, shelfFilter, sortGames, sorts, type Game } from "../../lib/library.ts";
+import { gameShows, minutesOf, onTheTable, playerOptions, playersOf, playStyles, searchText, shelfFilter, sortGames, sorts, timeOptions, type Game } from "../../lib/library.ts";
 import { site } from "../../lib/page.ts";
 import { formatDate, mediaSrc } from "../../lib/site.ts";
 
@@ -31,7 +30,16 @@ const owned = all.filter((g) => g.data.owned).length;
 const lede = s.pageText("/library/shelf")?.data.lede ?? "My board game collection. Filter by how it plays, sort by what hit the table last.";
 
 const text = (g: Game) => searchText([g.title, g.data.blurb, ...(g.data.howItPlays ?? [])]);
-const visible = new Set(games.filter((g) => gameShows(g, f, text(g))).map((g) => g.slug));
+const hasPost = (g: Game) => s.backlinks(g, { type: "post" }).length > 0;
+const visible = new Set(games.filter((g) => gameShows(g, f, text(g), hasPost(g))).map((g) => g.slug));
+// Players and play time come from BoardGameGeek; their pills wait for a sync.
+const synced = { players: all.some((g) => playersOf(g)), time: all.some((g) => minutesOf(g) !== undefined) };
+const anyPost = all.some(hasPost);
+/** Games shown before "Show all", while no filter narrows the list. */
+const FIRST = 12;
+const narrowed = !!(f.q || f.plays.size || f.want || !f.owned || f.favorites || f.blog || f.players || f.time);
+const folded = !narrowed && visible.size > FIRST;
+const firstShown = new Set(games.filter((g) => visible.has(g.slug)).slice(0, FIRST).map((g) => g.slug));
 
 // On the table: board-game statuses, then the most recent play not already listed.
 const table: { label: string; game: Game; note?: string; live: boolean }[] = onTheTable(s).map(({ status, game }) => ({
@@ -50,43 +58,42 @@ const sortHref = (key: string) => {
 };
 ---
 <PageShell title="The Shelf" family="shelf" current="library" description="Greg's board game collection: what is on the table, how each one plays, and what hit the table last.">
-  <Fragment slot="hero"><LibraryHero current="shelf" lede={lede} /></Fragment>
-
-  <section aria-labelledby="sh-table" class="top">
-    <div class="count gk-featured">
-      <StarChartArt class="count-art" ratio="auto" seal="tria-prima" />
-      <GiltCorners />
-      <p class="count-text"><span class="num">{owned}</span><span>{owned === 1 ? "game" : "games"} on the shelf</span></p>
-    </div>
-    <div class="table">
-      <div class="kick">
-        <h2 id="sh-table"><Star size={14} />On the table</h2>
-        <TickScale width={150} height={10} count={30} />
+  <Fragment slot="hero">
+    <LibraryHero current="shelf" lede={lede} />
+    <section aria-labelledby="sh-table" class="top">
+      <div class="count gk-featured">
+        <StarChartArt class="count-art" ratio="auto" seal="tria-prima" />
+        <GiltCorners />
+        <p class="count-text"><span class="num">{owned}</span><span>{owned === 1 ? "game" : "games"} on the shelf</span></p>
       </div>
-      {
-        table.length > 0 ? (
-          <ul class="table-list">
-            {table.map((t) => (
-              <li>
-                <a href={`#${t.game.slug}`} class:list={["gk-card", "table-card", { live: t.live }]}>
-                  <StarChartArt class="table-art" ratio="1 / 1" seal="tria-prima" src={mediaSrc(t.game.data.cover)} />
-                  <span class="table-body">
-                    <span class="table-label">{t.label}</span>
-                    <span class="table-title">{t.game.title}</span>
-                    {t.note && <span class="table-note">{t.note}</span>}
-                  </span>
-                </a>
-              </li>
-            ))}
-          </ul>
-        ) : (
-          <p class="quiet">Nothing on the table right now.</p>
-        )
-      }
-    </div>
-  </section>
-
-  <div class="divide"><Divider seed="shelf-list" /></div>
+      <div class="table">
+        <div class="kick">
+          <h2 id="sh-table"><Star size={14} />On the table</h2>
+          <TickScale width={150} height={10} count={30} />
+        </div>
+        {
+          table.length > 0 ? (
+            <ul class="table-list">
+              {table.map((t) => (
+                <li>
+                  <a href={`#${t.game.slug}`} class:list={["gk-card", "table-card", { live: t.live }]}>
+                    <StarChartArt class="table-art" ratio="1 / 1" seal="tria-prima" src={mediaSrc(t.game.data.cover)} />
+                    <span class="table-body">
+                      <span class="table-label">{t.label}</span>
+                      <span class="table-title">{t.game.title}</span>
+                      {t.note && <span class="table-note">{t.note}</span>}
+                    </span>
+                  </a>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p class="quiet">Nothing on the table right now.</p>
+          )
+        }
+      </div>
+    </section>
+  </Fragment>
 
   <FilterLayout action="/library/shelf" formId="shelf-filters">
     <Fragment slot="rail">
@@ -99,11 +106,29 @@ const sortHref = (key: string) => {
           </RailGroup>
         )
       }
+      {
+        synced.players && (
+          <RailGroup legend="Players" pills>
+            <label class="gk-filter pill"><input type="radio" name="players" value="" checked={!f.players} class="sr" /><span class="gk-fs star"><Star size={9} /></span>Any</label>
+            {playerOptions.map((o) => <label class="gk-filter pill"><input type="radio" name="players" value={o.key} checked={f.players === o.key} class="sr" /><span class="gk-fs star"><Star size={9} /></span>{o.label}</label>)}
+          </RailGroup>
+        )
+      }
+      {
+        synced.time && (
+          <RailGroup legend="Play time" pills>
+            <label class="gk-filter pill"><input type="radio" name="time" value="" checked={!f.time} class="sr" /><span class="gk-fs star"><Star size={9} /></span>Any</label>
+            {timeOptions.map((o) => <label class="gk-filter pill"><input type="radio" name="time" value={o.key} checked={f.time === o.key} class="sr" /><span class="gk-fs star"><Star size={9} /></span>{o.label}</label>)}
+          </RailGroup>
+        )
+      }
       <RailGroup legend="Show">
         <label class="check"><input type="checkbox" name="owned" value="1" checked={f.owned} />Owned</label>
         <label class="check"><input type="checkbox" name="want" value="1" checked={f.want} />Want to play</label>
         <label class="check"><input type="checkbox" name="fav" value="1" checked={f.favorites} />Favorites only</label>
+        {anyPost && <label class="check"><input type="checkbox" name="blog" value="1" checked={f.blog} />Has a blog post</label>}
       </RailGroup>
+      {(synced.players || synced.time) && <p class="rail-note">Player counts and play times come from BoardGameGeek.</p>}
     </Fragment>
 
     <section aria-label="Games" class="games">
@@ -115,8 +140,9 @@ const sortHref = (key: string) => {
         </div>
       </div>
       <ul class="grid" data-grid>
-        {games.map((g) => <GameCard game={g} site={s} hidden={!visible.has(g.slug)} />)}
+        {games.map((g) => <GameCard game={g} site={s} hidden={!visible.has(g.slug) || (folded && !firstShown.has(g.slug))} />)}
       </ul>
+      <button type="button" class="gk-text more" data-more hidden={!folded}>Show all {visible.size}</button>
       <p class="quiet" data-empty hidden={visible.size > 0}>No games on the Shelf match these filters.</p>
     </section>
   </FilterLayout>
@@ -252,8 +278,36 @@ const sortHref = (key: string) => {
     font-size: 13px;
     color: var(--gk-muted);
   }
-  .divide {
-    padding: 24px 0 4px;
+  .rail-note {
+    margin: 0;
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--gk-muted);
+  }
+  .sr {
+    position: absolute;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+    pointer-events: none;
+  }
+  .pill {
+    position: relative;
+  }
+  .pill:has(:checked) {
+    border-color: var(--gk-gold);
+    background: var(--gk-gold-tint);
+    color: var(--gk-text);
+  }
+  .pill:has(:checked) .star {
+    display: inline-flex;
+  }
+  .pill:has(:focus-visible) {
+    outline: 2px solid var(--gk-gold);
+    outline-offset: 3px;
+  }
+  .more {
+    align-self: center;
   }
   .games {
     display: flex;
@@ -322,7 +376,13 @@ const sortHref = (key: string) => {
       played: desc("lp"),
       az: (a, b) => title(a).localeCompare(title(b)),
       added: desc("c"),
+      time: (a, b) => Number(a.dataset.t || Infinity) - Number(b.dataset.t || Infinity) || title(a).localeCompare(title(b)),
     };
+    const FIRST = 12;
+    const more = document.querySelector<HTMLButtonElement>("[data-more]");
+    const players: Record<string, [number, number]> = { "1": [1, 1], "2": [2, 2], "3-4": [3, 4], "5+": [5, Infinity] };
+    const times: Record<string, [number, number]> = { short: [0, 29], mid: [30, 60], long: [61, Infinity] };
+    let expanded = false;
 
     const apply = () => {
       const data = new FormData(form);
@@ -331,16 +391,29 @@ const sortHref = (key: string) => {
       const owned = data.has("owned");
       const want = data.has("want");
       const fav = data.has("fav");
+      const blog = data.has("blog");
+      const seat = players[String(data.get("players") ?? "")];
+      const time = times[String(data.get("time") ?? "")];
+      const narrowed = !!(q || plays.length || want || !owned || fav || blog || seat || time);
       let n = 0;
-      for (const c of cards) {
+      for (const c of [...grid.children] as HTMLElement[]) {
         const d = c.dataset;
+        const [lo, hi] = (d.pl ?? "").split("-").map(Number);
+        const t = d.t ? Number(d.t) : NaN;
         const ok =
           (!(owned || want) || (owned && !!d.o) || (want && !!d.w)) &&
           (!fav || !!d.f) &&
+          (!blog || !!d.b) &&
+          (!seat || (!!d.pl && lo! <= seat[1] && hi! >= seat[0])) &&
+          (!time || (t >= time[0] && t <= time[1])) &&
           (!plays.length || (d.p ?? "").split("|").some((p) => plays.includes(p))) &&
           (!q || text.get(c)!.includes(q));
-        c.hidden = !ok;
         if (ok) n++;
+        c.hidden = !ok || (!narrowed && !expanded && n > FIRST);
+      }
+      if (more) {
+        more.hidden = narrowed || expanded || n <= FIRST;
+        more.textContent = `Show all ${n}`;
       }
       if (count) count.textContent = String(n);
       if (noun) noun.textContent = n === 1 ? "game" : "games";
@@ -350,8 +423,24 @@ const sortHref = (key: string) => {
     const sort = (key: string) => {
       sortInput.value = key;
       grid.append(...[...cards].sort(orders[key] ?? orders.played));
+      apply();
     };
 
+    more?.addEventListener("click", () => {
+      expanded = true;
+      apply();
+    });
+    // Opening an anchor to a folded-away card unfolds the grid first.
+    const reveal = () => {
+      const target = location.hash && document.getElementById(decodeURIComponent(location.hash.slice(1)));
+      if (target && target.hidden && cards.includes(target)) {
+        expanded = true;
+        apply();
+        target.scrollIntoView();
+      }
+    };
+    addEventListener("hashchange", reveal);
+    reveal();
     form.addEventListener("input", apply);
     form.addEventListener("submit", (e) => {
       e.preventDefault();