Declutter feed header; add theme + accent options

- Feed header: the game pill is gone (the nav Games button opens the sheet); the active game is now a quiet text label under the title - Settings > Theme: add Black (OLED) and Sepia alongside System/Light/Dark - Settings > Accent colour: six swatches (red default, blue, green, amber, violet, rose) layered over any theme via [data-accent]; persisted - applyTheme() takes the settings object; system theme now keys off the absence of [data-theme] so explicit light/sepia don't fight the media query Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Sorting + richer snapshot; Legendary filter; shiny toggle to hero top
2026-08-27 13:24:48 -04:00 · 2026-08-27 13:20:19 -04:00
9 changed files with 393 additions and 137 deletions
--- a/scripts/build-snapshot.mjs
+++ b/scripts/build-snapshot.mjs
@ -2,13 +2,15 @@
 /**
 * Build a compact, offline-first data snapshot from PokéAPI.
 *
- * The app needs three things to work fully offline before any lazy detail
- * fetch: the species list (id, name, generation, types), the regional
- * Pokédex lists (which species, in what order, with regional numbers), and
- * the version groups (games) with their associated Pokédexes.
+ * The app runs its list, search, sort, filters and game switching entirely
+ * off this file — no network until you open a detail page. It carries, per
+ * species: name, generation, current + past typings, the six base stats and
+ * their total, height, weight, base experience, and species flags
+ * (legendary / mythical / baby, capture rate, growth rate, colour, egg
+ * groups, gender rate). Plus every regional Pokédex and every version group.
 *
- * Everything richer than that — stats, abilities, flavor text, evolution —
- * is fetched on demand by the app and cached by the service worker.
+ * Richer detail (abilities, moves, flavour text, evolution, encounters) is
+ * fetched on demand by the app and cached by the service worker.
 *
 * Output: src/data/snapshot.json  (imported by src/data/snapshot.js)
 * Usage:  node scripts/build-snapshot.mjs [--force]
@ -22,19 +24,18 @@ const OUT = resolve(__dirname, '../src/data/snapshot.json');
 const BASE = 'https://pokeapi.co/api/v2';
 const MAX_AGE_DAYS = 30;
 const FORCE = process.argv.includes('--force');
-const CONCURRENCY = 8;
+const CONCURRENCY = 16;

 const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 const idFromUrl = (u) => Number(u.replace(/\/$/, '').split('/').pop());
-const pretty = (k) =>
-  k.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+const pretty = (k) => k.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());

 const _cache = new Map();
 async function api(path) {
  if (_cache.has(path)) return _cache.get(path);
  const url = path.startsWith('http') ? path : `${BASE}/${path}`;
  let lastErr;
-  for (let attempt = 0; attempt < 4; attempt++) {
+  for (let attempt = 0; attempt < 5; attempt++) {
    try {
      const res = await fetch(url);
      if (res.ok) {
@ -55,13 +56,19 @@ async function api(path) {
 async function mapLimit(items, limit, fn) {
  const out = new Array(items.length);
  let i = 0;
-  const workers = Array.from({ length: Math.min(limit, items.length) }, async () => {
-    while (i < items.length) {
+  let done = 0;
+  const total = items.length;
+  const workers = Array.from({ length: Math.min(limit, total) }, async () => {
+    while (i < total) {
      const idx = i++;
      out[idx] = await fn(items[idx], idx);
+      if (++done % 200 === 0 || done === total) {
+        process.stdout.write(`\r  … ${done}/${total} species`);
+      }
    }
  });
  await Promise.all(workers);
+  if (total) process.stdout.write('\n');
  return out;
 }

@ -85,71 +92,29 @@ async function main() {
  console.log('Building snapshot from PokéAPI …');
  const t0 = Date.now();

-  // ---- Types: build pokemonName -> [type, ...] -----------------------------
+  // ---- Type name list ------------------------------------------------
  const typeIndex = await api('type?limit=100');
-  const usableTypes = typeIndex.results
+  const types = typeIndex.results
    .map((r) => r.name)
    .filter((n) => !['unknown', 'shadow', 'stellar'].includes(n));

-  const typesByPokemon = new Map();
-  await mapLimit(usableTypes, CONCURRENCY, async (t) => {
-    const data = await api(`type/${t}`);
-    for (const { slot, pokemon } of data.pokemon) {
-      const arr = typesByPokemon.get(pokemon.name) || [];
-      arr.push({ slot, type: t });
-      typesByPokemon.set(pokemon.name, arr);
-    }
-  });
-  const typesFor = (name) =>
-    (typesByPokemon.get(name) || [])
-      .sort((a, b) => a.slot - b.slot)
-      .map((x) => x.type);
-  const typesForSpecies = (name) => {
-    const direct = typesFor(name);
-    if (direct.length) return direct;
-    // Fall back to a default form variant, e.g. "deoxys" -> "deoxys-normal".
-    for (const key of typesByPokemon.keys()) {
-      if (key === name || key.startsWith(`${name}-`)) {
-        const t = typesFor(key);
-        if (t.length) return t;
-      }
-    }
-    return [];
-  };
-
-  // ---- Generations: species -> { name, generation } ----------------------
+  // ---- Generations (for display names / regions) ------------------
  const genIndex = await api('generation?limit=50');
  const generations = [];
-  const speciesMeta = new Map();
-  await mapLimit(genIndex.results, CONCURRENCY, async (g) => {
+  await mapLimit(genIndex.results, 8, async (g) => {
    const data = await api(`generation/${g.name}`);
    generations.push({
      id: data.id,
      name: pretty(data.main_region?.name || g.name),
      region: data.main_region?.name || null,
    });
-    for (const sp of data.pokemon_species) {
-      const id = idFromUrl(sp.url);
-      speciesMeta.set(id, { id, name: sp.name, generation: data.id });
-    }
  });
  generations.sort((a, b) => a.id - b.id);

-  const speciesIds = [...speciesMeta.keys()].sort((a, b) => a - b);
-  const species = speciesIds.map((id) => {
-    const m = speciesMeta.get(id);
-    return {
-      id,
-      name: m.name,
-      generation: m.generation,
-      types: typesForSpecies(m.name),
-    };
-  });
-
-  // ---- Pokédexes --------------------------------------------------------
+  // ---- Pokédexes ----------------------------------------------------
  const dexIndex = await api('pokedex?limit=100');
  const pokedexes = [];
-  await mapLimit(dexIndex.results, CONCURRENCY, async (d) => {
+  await mapLimit(dexIndex.results, 8, async (d) => {
    const data = await api(`pokedex/${d.name}`);
    pokedexes.push({
      key: data.name,
@ -164,10 +129,10 @@ async function main() {
  });
  pokedexes.sort((a, b) => a.key.localeCompare(b.key));

-  // ---- Version groups (the "games") -----------------------------------
+  // ---- Version groups (the "games") -----------------------------
  const vgIndex = await api('version-group?limit=100');
  const versionGroups = [];
-  await mapLimit(vgIndex.results, CONCURRENCY, async (v) => {
+  await mapLimit(vgIndex.results, 8, async (v) => {
    const data = await api(`version-group/${v.name}`);
    versionGroups.push({
      key: data.name,
@ -181,7 +146,57 @@ async function main() {
    (a, b) => a.generation - b.generation || a.key.localeCompare(b.key),
  );

-  // ---- Write ----------------------------------------------------------
+  // ---- Species: the data-rich part -----------------------------
+  const speciesIndex = await api('pokemon-species?limit=100000');
+  const ids = speciesIndex.results
+    .map((r) => idFromUrl(r.url))
+    .sort((a, b) => a - b);
+
+  console.log(`Fetching ${ids.length} species (stats, typings, flags) …`);
+  const species = await mapLimit(ids, CONCURRENCY, async (id) => {
+    const [pk, sp] = await Promise.all([
+      api(`pokemon/${id}`),
+      api(`pokemon-species/${id}`),
+    ]);
+    const s = Object.fromEntries(pk.stats.map((x) => [x.stat.name, x.base_stat]));
+    const stats = {
+      hp: s.hp ?? 0,
+      atk: s.attack ?? 0,
+      def: s.defense ?? 0,
+      spa: s['special-attack'] ?? 0,
+      spd: s['special-defense'] ?? 0,
+      spe: s.speed ?? 0,
+    };
+    return {
+      id,
+      name: sp.name,
+      generation: idFromUrl(sp.generation.url),
+      types: pk.types
+        .slice()
+        .sort((a, b) => a.slot - b.slot)
+        .map((t) => t.type.name),
+      pastTypes: (pk.past_types || []).map((p) => ({
+        gen: idFromUrl(p.generation.url),
+        types: p.types.slice().sort((a, b) => a.slot - b.slot).map((t) => t.type.name),
+      })),
+      stats,
+      bst: stats.hp + stats.atk + stats.def + stats.spa + stats.spd + stats.spe,
+      height: pk.height,
+      weight: pk.weight,
+      baseExp: pk.base_experience ?? null,
+      isLegendary: sp.is_legendary,
+      isMythical: sp.is_mythical,
+      isBaby: sp.is_baby,
+      captureRate: sp.capture_rate,
+      baseHappiness: sp.base_happiness,
+      growthRate: sp.growth_rate?.name || null,
+      color: sp.color?.name || null,
+      eggGroups: sp.egg_groups.map((g) => g.name),
+      genderRate: sp.gender_rate,
+    };
+  });
+
+  // ---- Write ----------------------------------------------------
  const snapshot = {
    meta: {
      generatedAt: new Date().toISOString(),
@ -192,7 +207,7 @@ async function main() {
        versionGroups: versionGroups.length,
      },
    },
-    types: usableTypes,
+    types,
    generations,
    species,
    pokedexes,
@ -200,14 +215,12 @@ async function main() {
  };

  await mkdir(dirname(OUT), { recursive: true });
-  await writeFile(OUT, JSON.stringify(snapshot));
-  const kb = (JSON.stringify(snapshot).length / 1024).toFixed(0);
+  const body = JSON.stringify(snapshot);
+  await writeFile(OUT, body);
  console.log(
    `Wrote ${OUT} — ${species.length} species, ${pokedexes.length} pokédexes, ` +
-      `${versionGroups.length} version groups (${kb} KB) in ${(
-        (Date.now() - t0) /
-        1000
-      ).toFixed(1)}s`,
+      `${versionGroups.length} version groups (${(body.length / 1024).toFixed(0)} KB) in ` +
+      `${((Date.now() - t0) / 1000).toFixed(1)}s`,
  );
 }

--- a/src/components/Card.js
+++ b/src/components/Card.js
@ -9,7 +9,7 @@ import { typeHex } from '../lib/type-color.js';
 * gradient, a type-coloured spotlight behind an oversized sprite that lifts
 * above the card, a number chip, and a big ghost number in the corner.
 */
-export function Card(species, number, { spriteStyle = 'official', versionGroup, boxed = false } = {}) {
+export function Card(species, number, { spriteStyle = 'official', versionGroup, boxed = false, metric = null } = {}) {
  const state = entry(species.id);
  const mainType = (species.types || [])[0] || 'normal';
  const num = String(number ?? species.id).padStart(3, '0');
@ -53,6 +53,7 @@ export function Card(species, number, { spriteStyle = 'official', versionGroup,
      el('span', { class: 'card__num' }, `#${num}`),
      el('span', { class: 'card__name' }, species.name.replace(/-/g, ' ')),
      el('span', { class: 'card__types' }, ...(species.types || []).map(TypeChip)),
+      metric ? el('span', { class: 'card__metric' }, metric) : null,
    ),
  );

--- a/src/store/settings.js
+++ b/src/store/settings.js
@ -13,23 +13,36 @@ import { createStore } from './createStore.js';
 export const settings = createStore('pdx.settings', {
  versionGroup: 'scarlet-violet',
  pokedex: null,
-  theme: 'system',
+  theme: 'system', // system | light | dark | black | sepia
+  accent: 'red', // red | blue | green | amber | violet | rose
  spriteStyle: 'official',
  showShiny: false,
  locale: 'en',
 });

-export function applyTheme(theme = settings.get().theme) {
+const DARKISH = new Set(['dark', 'black']);
+
+export function applyTheme(state = settings.get()) {
  const root = document.documentElement;
-  if (theme === 'system') root.removeAttribute('data-theme');
+  const { theme, accent } = state;
+
+  if (!theme || theme === 'system') root.removeAttribute('data-theme');
  else root.setAttribute('data-theme', theme);

+  if (!accent || accent === 'red') root.removeAttribute('data-accent');
+  else root.setAttribute('data-accent', accent);
+
  const meta = document.querySelector('meta[name="theme-color"]');
  if (meta) {
    const dark =
-      theme === 'dark' ||
-      (theme === 'system' &&
+      DARKISH.has(theme) ||
+      ((!theme || theme === 'system') &&
        window.matchMedia('(prefers-color-scheme: dark)').matches);
-    meta.setAttribute('content', dark ? '#0b0b0c' : '#b3161a');
+    meta.setAttribute(
+      'content',
+      dark
+        ? '#0b0b0c'
+        : getComputedStyle(root).getPropertyValue('--accent').trim() || '#b3161a',
+    );
  }
 }
--- a/src/store/ui.js
+++ b/src/store/ui.js
@ -8,4 +8,7 @@ export const ui = createStore('pdx.ui', {
  detailTab: 'about',
  searchQuery: '',
  searchScroll: 0,
+  sort: 'dex',
+  sortDesc: false,
+  filter: 'all',
 });
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@ -219,29 +219,13 @@
  line-height: 1.1;
  text-transform: capitalize;
 }
-.game-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 8px;
-  padding: 5px 10px 5px 12px;
-  border: none;
-  border-radius: 999px;
-  background: var(--surface-2);
-  color: var(--text-dim);
-  font: inherit;
+.feed-head__game {
+  display: block;
+  margin-top: 4px;
  font-size: 0.82rem;
  font-weight: 600;
-  text-decoration: none;
+  color: var(--text-dim);
  text-transform: capitalize;
-  cursor: pointer;
-}
-.game-pill:hover {
-  color: var(--text);
-}
-.game-pill__chev {
-  font-size: 0.9rem;
-  line-height: 1;
 }

 .ring {
@ -355,6 +339,42 @@
  opacity: 0.7;
 }

+.feed-sort {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+}
+.feed-sort__label {
+  font-size: 0.78rem;
+  font-weight: 600;
+  color: var(--text-dim);
+}
+.feed-sort__select {
+  flex: 1;
+  max-width: 220px;
+  padding: 7px 12px;
+  border: 1.5px solid var(--border);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+  font-size: 0.84rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+.feed-sort__dir {
+  width: 34px;
+  height: 34px;
+  flex: none;
+  border: 1.5px solid var(--border);
+  border-radius: 50%;
+  background: var(--surface);
+  color: var(--text);
+  font-size: 1rem;
+  cursor: pointer;
+}
+
 .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
@ -497,6 +517,17 @@
  flex-wrap: wrap;
  margin-top: 2px;
 }
+.card__metric {
+  margin-top: 6px;
+  align-self: flex-start;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--type-main) 24%, var(--surface-2));
+  color: var(--text);
+  font-size: 0.72rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
 .card__caught {
  position: absolute;
  top: 10px;
@ -678,8 +709,14 @@
  font-size: 0.9rem;
 }
 .phero__num {
+  flex: 1;
+  min-width: 0;
+  text-align: center;
  opacity: 0.85;
  text-transform: capitalize;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .phero__head {
  margin-top: 14px;
@ -754,19 +791,23 @@
 .phero__nav:hover {
  background: rgba(255, 255, 255, 0.3);
 }
+.phero__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex: none;
+}
 .phero__shiny {
-  position: absolute;
-  right: 20px;
-  bottom: 108px;
  border: none;
  border-radius: 999px;
-  padding: 6px 14px;
+  padding: 6px 12px;
  font: inherit;
-  font-size: 0.75rem;
+  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.18);
+  white-space: nowrap;
 }
 .phero__shiny.is-on {
  background: #fff;
@ -902,7 +943,6 @@
  display: block;
  font-size: 0.76rem;
  color: var(--text-dim);
-  text-transform: capitalize;
 }
 .flavor__all {
  margin-top: 12px;
@ -1323,6 +1363,28 @@
  color: var(--text);
  font: inherit;
 }
+.swatches {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+.swatch {
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 2px solid var(--border);
+  background: var(--sw);
+  cursor: pointer;
+  padding: 0;
+  transition: transform 0.12s var(--ease-spring);
+}
+.swatch:hover {
+  transform: scale(1.1);
+}
+.swatch.is-on {
+  border-color: var(--text);
+  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--sw);
+}

 /* ---------- Toast ------------------------------------------- */
 .toast {
--- a/src/styles/tokens.css
+++ b/src/styles/tokens.css
@ -47,8 +47,9 @@
  --type-fairy: #ec8fe6;
 }

+/* System default: follow the OS only when no explicit theme is chosen. */
@media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) {
+  :root:not([data-theme]) {
    --bg: #0b0b0c;
    --surface: #17171a;
    --surface-2: #202024;
@ -73,6 +74,39 @@
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
 }

+/* Pure black — for OLED screens. */
+:root[data-theme="black"] {
+  --bg: #000000;
+  --surface: #0b0b0c;
+  --surface-2: #17171a;
+  --text: #f4f4f6;
+  --text-dim: #9a9aa4;
+  --border: #222226;
+  --accent: #ff5a5f;
+  --accent-text: #16161a;
+  --shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 10px 30px rgba(0, 0, 0, 0.55);
+  --shadow-lg: 0 20px 50px -12px rgba(0, 0, 0, 0.65);
+}
+
+/* Sepia — a warm, low-glare light theme. */
+:root[data-theme="sepia"] {
+  --bg: #f2e8d5;
+  --surface: #fbf4e4;
+  --surface-2: #e9dbbe;
+  --text: #3b3022;
+  --text-dim: #7c6c52;
+  --border: #dccbaa;
+  --accent: #a8410f;
+  --accent-text: #ffffff;
+}
+
+/* Accent overrides — layered on top of any theme. Red is the default. */
+:root[data-accent="blue"] { --accent: #2f6fed; --accent-text: #ffffff; }
+:root[data-accent="green"] { --accent: #1f9d57; --accent-text: #ffffff; }
+:root[data-accent="amber"] { --accent: #d98a00; --accent-text: #1a1200; }
+:root[data-accent="violet"] { --accent: #7b52e0; --accent-text: #ffffff; }
+:root[data-accent="rose"] { --accent: #e0417a; --accent-text: #ffffff; }
+
 * {
  box-sizing: border-box;
 }
--- a/src/views/DexGrid.js
+++ b/src/views/DexGrid.js
@ -2,40 +2,88 @@ import { el, clear, onTeardown } from '../lib/dom.js';
 import { loadSnapshot } from '../data/snapshot.js';
 import { resolvePokedex, dexRows, prettify } from '../data/pokedex-resolver.js';
 import { settings } from '../store/settings.js';
+import { ui } from '../store/ui.js';
 import { selection, stats } from '../store/selection.js';
 import { Card } from '../components/Card.js';
 import { ProgressRing } from '../components/ProgressRing.js';
-import { openGameSheet } from '../components/GameSheet.js';

 const FILTERS = [
  { key: 'all', label: 'All', test: () => true },
  { key: 'caught', label: 'Caught', test: (e) => e.caught },
  { key: 'missing', label: 'Missing', test: (e) => !e.caught },
  { key: 'favorite', label: 'Favorites', test: (e) => e.favorite },
+  { key: 'legendary', label: 'Legendary', test: (e, sp) => sp.isLegendary || sp.isMythical },
 ];

+const SORTS = [
+  { key: 'dex', label: 'Dex number', desc: false },
+  { key: 'name', label: 'Name (A–Z)', desc: false },
+  { key: 'bst', label: 'Base stat total', desc: true },
+  { key: 'hp', label: 'HP', desc: true },
+  { key: 'atk', label: 'Attack', desc: true },
+  { key: 'def', label: 'Defense', desc: true },
+  { key: 'spa', label: 'Sp. Attack', desc: true },
+  { key: 'spd', label: 'Sp. Defense', desc: true },
+  { key: 'spe', label: 'Speed', desc: true },
+  { key: 'height', label: 'Height', desc: true },
+  { key: 'weight', label: 'Weight', desc: true },
+  { key: 'baseExp', label: 'Base EXP', desc: true },
+  { key: 'catchrate', label: 'Catch rate', desc: true },
+  { key: 'caught', label: 'Recently caught', desc: true },
+];
+const STAT_SHORT = { hp: 'HP', atk: 'Atk', def: 'Def', spa: 'SpA', spd: 'SpD', spe: 'Spe' };
+
 const SEARCH_ICON =
  '<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>';

+function sortValue(row, key) {
+  const sp = row.species;
+  switch (key) {
+    case 'dex': return row.number ?? sp.id;
+    case 'name': return sp.name;
+    case 'bst': return sp.bst ?? 0;
+    case 'hp': case 'atk': case 'def': case 'spa': case 'spd': case 'spe':
+      return sp.stats?.[key] ?? 0;
+    case 'height': return sp.height ?? 0;
+    case 'weight': return sp.weight ?? 0;
+    case 'baseExp': return sp.baseExp ?? 0;
+    case 'catchrate': return sp.captureRate ?? 0;
+    case 'caught': return selection.get().pokemon[sp.id]?.updatedAt || '';
+    default: return 0;
+  }
+}
+
+function metricLabel(key, sp) {
+  switch (key) {
+    case 'bst': return `BST ${sp.bst}`;
+    case 'hp': case 'atk': case 'def': case 'spa': case 'spd': case 'spe':
+      return `${STAT_SHORT[key]} ${sp.stats?.[key] ?? 0}`;
+    case 'height': return `${((sp.height ?? 0) / 10).toFixed(1)} m`;
+    case 'weight': return `${((sp.weight ?? 0) / 10).toFixed(1)} kg`;
+    case 'baseExp': return sp.baseExp != null ? `${sp.baseExp} EXP` : null;
+    case 'catchrate': return `Catch ${sp.captureRate ?? '?'}`;
+    default: return null;
+  }
+}
+
 export async function DexGrid() {
  const view = el('section', { class: 'view dexgrid' });
  const snap = await loadSnapshot();

  const grid = el('div', { class: 'grid' });
  let query = '';
-  let filterKey = 'all';
+  let filterKey = ui.get().filter || 'all';
+  let sortKey = ui.get().sort || 'dex';
+  let sortDesc = !!ui.get().sortDesc;
  let rows = [];
  let ids = [];

  const ring = ProgressRing();

  const title = el('h1', {});
-  const gamePill = el(
-    'button',
-    { class: 'game-pill', type: 'button', onclick: () => openGameSheet() },
-    el('span', {}),
-    el('span', { class: 'game-pill__chev', 'aria-hidden': 'true' }, '⌄'),
-  );
+  // Which game is active — a quiet label, not a control. Change it from the
+  // Games button in the nav.
+  const gameLabel = el('span', { class: 'feed-head__game' });

  const search = el('input', {
    class: 'field-search__input',
@ -53,10 +101,11 @@ export async function DexGrid() {
    const btn = el(
      'button',
      {
-        class: 'feed-chip',
+        class: `feed-chip${f.key === filterKey ? ' is-active' : ''}`,
        type: 'button',
        onclick: () => {
          filterKey = f.key;
+          ui.set({ filter: f.key });
          chipEls.forEach((c, i) => c.btn.classList.toggle('is-active', FILTERS[i].key === f.key));
          paintGrid();
        },
@ -67,7 +116,37 @@ export async function DexGrid() {
    filterBar.append(btn);
    return { btn, count };
  });
-  chipEls[0].btn.classList.add('is-active');
+
+  const sortSelect = el(
+    'select',
+    {
+      class: 'feed-sort__select',
+      onchange: (e) => {
+        sortKey = e.target.value;
+        sortDesc = SORTS.find((s) => s.key === sortKey).desc;
+        ui.set({ sort: sortKey, sortDesc });
+        syncDirBtn();
+        paintGrid();
+      },
+    },
+    ...SORTS.map((s) => el('option', { value: s.key, selected: s.key === sortKey }, s.label)),
+  );
+  const dirBtn = el('button', {
+    class: 'feed-sort__dir',
+    type: 'button',
+    title: 'Reverse order',
+    onclick: () => {
+      sortDesc = !sortDesc;
+      ui.set({ sortDesc });
+      syncDirBtn();
+      paintGrid();
+    },
+  });
+  function syncDirBtn() {
+    dirBtn.textContent = sortDesc ? '↓' : '↑';
+    dirBtn.setAttribute('aria-label', sortDesc ? 'Descending' : 'Ascending');
+  }
+  syncDirBtn();

  view.append(
    el(
@ -76,7 +155,7 @@ export async function DexGrid() {
      el(
        'div',
        { class: 'feed-head__top' },
-        el('div', { class: 'feed-head__id' }, title, gamePill),
+        el('div', { class: 'feed-head__id' }, title, gameLabel),
        ring.node,
      ),
      el(
@ -86,6 +165,13 @@ export async function DexGrid() {
        search,
      ),
      filterBar,
+      el(
+        'div',
+        { class: 'feed-sort' },
+        el('span', { class: 'feed-sort__label' }, 'Sort'),
+        sortSelect,
+        dirBtn,
+      ),
    ),
    grid,
  );
@ -94,13 +180,14 @@ export async function DexGrid() {
    const p = selection.get().pokemon;
    let caught = 0;
    let favorite = 0;
-    for (const id of ids) {
-      const e = p[id];
-      if (!e) continue;
-      if (e.caught) caught++;
-      if (e.favorite) favorite++;
+    let legendary = 0;
+    for (const { species } of rows) {
+      const e = p[species.id];
+      if (e?.caught) caught++;
+      if (e?.favorite) favorite++;
+      if (species.isLegendary || species.isMythical) legendary++;
    }
-    return { all: ids.length, caught, missing: ids.length - caught, favorite };
+    return { all: rows.length, caught, missing: rows.length - caught, favorite, legendary };
  }

  function refreshMeta() {
@ -114,38 +201,49 @@ export async function DexGrid() {
  function paintGrid() {
    const st = settings.get();
    const pokemonState = selection.get().pokemon;
-    // Gen 1–2 game-era sprites have opaque white backgrounds — frame them.
    const boxed =
      st.spriteStyle === 'game' &&
      (snap.versionGroupByKey.get(st.versionGroup)?.generation ?? 9) <= 2;
    const filterTest = FILTERS.find((f) => f.key === filterKey).test;
-    const frag = document.createDocumentFragment();
-    let shown = 0;

-    for (const { species, number } of rows) {
+    let list = rows.filter(({ species, number }) => {
      if (
        query &&
        !species.name.includes(query) &&
        String(number) !== query &&
        String(species.id) !== query
      ) {
-        continue;
+        return false;
      }
      const e = pokemonState[species.id] || { seen: false, caught: false, favorite: false };
-      if (!filterTest(e)) continue;
+      return filterTest(e, species);
+    });
+
+    const dir = sortDesc ? -1 : 1;
+    list = list
+      .map((row) => ({ row, v: sortValue(row, sortKey) }))
+      .sort((a, b) => {
+        if (a.v < b.v) return -dir;
+        if (a.v > b.v) return dir;
+        return (a.row.number ?? a.row.species.id) - (b.row.number ?? b.row.species.id);
+      })
+      .map((x) => x.row);
+
+    const frag = document.createDocumentFragment();
+    list.forEach(({ species, number }, i) => {
      const card = Card(species, number, {
        spriteStyle: st.spriteStyle,
        versionGroup: st.versionGroup,
        boxed,
+        metric: metricLabel(sortKey, species),
      });
-      if (shown < 30) card.style.setProperty('--i', String(shown));
+      if (i < 30) card.style.setProperty('--i', String(i));
      frag.append(card);
-      shown++;
-    }
+    });

    clear(grid);
    grid.append(
-      shown === 0
+      list.length === 0
        ? el('p', { class: 'grid__empty' }, 'Nothing matches those filters.')
        : frag,
    );
@ -158,7 +256,7 @@ export async function DexGrid() {
    ids = rows.map((r) => r.species.id);

    title.textContent = prettify(dex.name || dex.key);
-    gamePill.firstChild.textContent =
+    gameLabel.textContent =
      st.versionGroup === 'all' ? 'All games' : prettify(st.versionGroup);
    refreshMeta();
    paintGrid();
@ -169,7 +267,8 @@ export async function DexGrid() {
  const offSettings = settings.subscribe(rebuild);
  const offSelection = selection.subscribe(() => {
    refreshMeta();
-    if (filterKey !== 'all') paintGrid();
+    if (filterKey !== 'all' && filterKey !== 'legendary') paintGrid();
+    else if (sortKey === 'caught') paintGrid();
  });
  onTeardown(view, () => {
    offSettings();
--- a/src/views/PokemonDetail.js
+++ b/src/views/PokemonDetail.js
@ -300,7 +300,7 @@ export async function PokemonDetail(nationalId) {
        { class: 'phero__top' },
        el('a', { class: 'phero__back', href: '#/' }, '‹ Dex'),
        el('span', { class: 'phero__num' }, numLabel),
-        favBtn,
+        el('div', { class: 'phero__actions' }, shinyBtn, favBtn),
      ),
      el(
        'div',
@ -319,7 +319,6 @@ export async function PokemonDetail(nationalId) {
          ? el('a', { class: 'phero__nav phero__nav--next', href: `#/pokemon/${next.species.id}`, title: next.species.name }, '›')
          : el('span', { class: 'phero__nav' }),
      ),
-      shinyBtn,
    ),
    el(
      'div',
--- a/src/views/SettingsView.js
+++ b/src/views/SettingsView.js
@ -10,11 +10,43 @@ export async function SettingsView() {
    ['system', 'System'],
    ['light', 'Light'],
    ['dark', 'Dark'],
+    ['black', 'Black (OLED)'],
+    ['sepia', 'Sepia'],
  ], (v) => {
    settings.set({ theme: v });
-    applyTheme(v);
+    applyTheme();
  });

+  const ACCENTS = [
+    ['red', '#b3161a'],
+    ['blue', '#2f6fed'],
+    ['green', '#1f9d57'],
+    ['amber', '#d98a00'],
+    ['violet', '#7b52e0'],
+    ['rose', '#e0417a'],
+  ];
+  const accentRow = el(
+    'div',
+    { class: 'swatches' },
+    ...ACCENTS.map(([key, hex]) =>
+      el('button', {
+        class: `swatch${st.accent === key ? ' is-on' : ''}`,
+        type: 'button',
+        style: `--sw:${hex}`,
+        title: key,
+        'aria-label': `${key} accent`,
+        onclick: () => {
+          settings.set({ accent: key });
+          applyTheme();
+          [...accentRow.children].forEach((b, i) =>
+            b.classList.toggle('is-on', ACCENTS[i][0] === key),
+          );
+        },
+      }),
+    ),
+  );
+  const accentField = el('div', { class: 'field' }, el('span', {}, 'Accent colour'), accentRow);
+
  const spriteField = selectField('Sprite style', st.spriteStyle, [
    ['default', 'Pixel (modern)'],
    ['game', 'Game era (pixel art from the selected game)'],
@ -61,7 +93,7 @@ export async function SettingsView() {

  view.append(
    el('header', { class: 'view__header' }, el('h1', {}, 'Settings')),
-    el('div', { class: 'settings__group' }, themeField, spriteField, shinyField),
+    el('div', { class: 'settings__group' }, themeField, accentField, spriteField, shinyField),

    el('h2', {}, 'Your data'),
    storageNote,