Library filters sidebar, clickable tags, remove Ready badge
Build & Deploy / build-and-deploy (push) Successful in 59s

- GameCard: removed 'Ready' badge from covers (keep '🪟 Win' for
  Windows games only — it's informative since they can't be played)
- Library: sidebar with Year + Genre checkbox filter groups
  - Each shows up to 5 items with game counts, 'Show all' button
  - Active filters shown as removable chips above the grid
  - Reset button clears all filters
  - Filters reflected in URL hash (#/?genre=FPS&year=1996)
- GameDetail: year and genre tags are now clickable links to
  #/?year=1996 or #/?genre=FPS, which opens the Library with that
  filter pre-applied
- App.svelte: parses query params from hash and passes to Library
This commit is contained in:
Hermes Agent
2026-05-28 22:56:51 +02:00
parent e15ce10f5a
commit 676e101ffc
4 changed files with 469 additions and 157 deletions
+8 -2
View File
@@ -7,14 +7,20 @@
let route = $state("/");
let gameId = $state(null);
let filterGenre = $state("");
let filterYear = $state("");
function parseHash() {
const hash = window.location.hash.slice(1) || "/";
const [pathPart] = hash.split("?"); // strip query params
const [pathPart, qs] = hash.split("?");
const parts = pathPart.split("/").filter(Boolean);
if (parts.length === 0 || (parts.length === 1 && parts[0] === "")) {
route = "/";
gameId = null;
// Parse filter query params
const params = new URLSearchParams(qs || "");
filterGenre = params.get("genre") || "";
filterYear = params.get("year") || "";
} else if (parts[0] === "game" && parts[1]) {
route = "/game";
gameId = parts[1];
@@ -40,7 +46,7 @@
<main class="container">
{#if route === "/"}
<Library />
<Library genreFilter={filterGenre} yearFilter={filterYear} />
{:else if route === "/game" && gameId}
<GameDetail id={gameId} />
{:else if route === "/play" && gameId}