feat(web): library poster grid with list toggle

2026-08-24 03:04:06 +01:00
parent 365c2a7587
commit a6cdd0ab0b
3 changed files with 369 additions and 13 deletions
@@ -2380,6 +2380,25 @@ interface LibraryGroup {
  rows: HTMLUListElement;
 }

+/* ---- §9.6 poster grid (#151) -------------------------------------------- */
+
+type LibraryShape = "grid" | "list";
+
+const LIBRARY_SHAPE_KEY = "arr.libraryView";
+
+/**
+ * The grid is default and the choice is per-person — no server state. A
+ * corrupt or foreign value falls back to the grid rather than breaking open.
+ */
+function loadLibraryShape(): LibraryShape {
+  try {
+    const stored = window.localStorage.getItem(LIBRARY_SHAPE_KEY);
+    return stored === "list" ? "list" : "grid";
+  } catch {
+    return "grid";
+  }
+}
+
 function libraryMain(
  board: HTMLElement,
  movieDetail: MovieView,
@@ -2392,6 +2411,8 @@ function libraryMain(
  const summary = must<HTMLElement>("#library-summary");
  const toggle = must<HTMLButtonElement>("#library-toggle");
  const status = must<HTMLElement>("#library-status");
+  const gridBtn = must<HTMLButtonElement>("#library-view-grid");
+  const listBtn = must<HTMLButtonElement>("#library-view-list");
  const groups: { series: LibraryGroup; movies: LibraryGroup } = {
    series: {
      section: must<HTMLElement>("#library-series"),
@@ -2407,11 +2428,30 @@ function libraryMain(

  // §4.2: ONE toggle for everything the default view leaves out
  let showAll = false;
+  // §9.6 library view: the poster grid is default, per-person, localStorage
+  let shape = loadLibraryShape();
  let data: { series: LibrarySeries[]; movies: LibraryMovie[] } | null = null;
  let roots: Root[] = [];
  // guards a stale fetch from painting over a newer view
  let sequence = 0;

+  function setShape(next: LibraryShape) {
+    shape = next;
+    try {
+      window.localStorage.setItem(LIBRARY_SHAPE_KEY, next);
+    } catch {
+      // private mode or full storage: the choice just does not persist
+    }
+    gridBtn.setAttribute("aria-pressed", String(shape === "grid"));
+    listBtn.setAttribute("aria-pressed", String(shape === "list"));
+    render();
+  }
+
+  gridBtn.addEventListener("click", () => setShape("grid"));
+  listBtn.addEventListener("click", () => setShape("list"));
+  gridBtn.setAttribute("aria-pressed", String(shape === "grid"));
+  listBtn.setAttribute("aria-pressed", String(shape === "list"));
+
  function setStatus(text: string | null, tone?: "fault") {
    status.hidden = text === null;
    status.textContent = text ?? "";
@@ -2432,6 +2472,7 @@ function libraryMain(
  }

  function renderGroup<T>(group: LibraryGroup, items: T[], build: (item: T) => HTMLLIElement) {
+    group.rows.className = shape === "grid" ? "deck-rows grid-rows" : "deck-rows";
    group.rows.replaceChildren();
    group.section.hidden = items.length === 0;
    group.count.textContent = String(items.length);
@@ -2457,18 +2498,23 @@ function libraryMain(

    const seriesShown = showAll ? library.series : library.series.filter(seriesNeedsAttention);
    const moviesShown = showAll ? library.movies : library.movies.filter(movieNeedsAttention);
-    renderGroup(groups.series, seriesShown, (series) =>
-      seriesRow(series, roots, (id, origin) => {
-        navigate({ kind: "series", seriesId: id });
-        void seriesDetail.open(id, origin, view, { kind: "library" });
-      }),
-    );
-    renderGroup(groups.movies, moviesShown, (movie) =>
-      libraryRow(movie, roots, (target, origin) => {
-        navigate({ kind: "movie", movieId: target.id });
-        void movieDetail.open(target.id, origin, view, { kind: "library" });
-      }),
-    );
+
+    const openSeries = (id: number, origin: HTMLElement) => {
+      navigate({ kind: "series", seriesId: id });
+      void seriesDetail.open(id, origin, view, { kind: "library" });
+    };
+    const openMovie = (movie: LibraryMovie, origin: HTMLElement) => {
+      navigate({ kind: "movie", movieId: movie.id });
+      void movieDetail.open(movie.id, origin, view, { kind: "library" });
+    };
+
+    if (shape === "grid") {
+      renderGroup(groups.series, seriesShown, (series) => seriesCard(series, roots, openSeries));
+      renderGroup(groups.movies, moviesShown, (movie) => movieCard(movie, roots, openMovie));
+    } else {
+      renderGroup(groups.series, seriesShown, (series) => seriesRow(series, roots, openSeries));
+      renderGroup(groups.movies, moviesShown, (movie) => libraryRow(movie, roots, openMovie));
+    }

    if (total === 0) {
      setStatus("library is empty — the search box above adds titles");
@@ -2601,6 +2647,151 @@ function seriesRow(
  return item;
 }

+/**
+ * One §9.6 grid tile (#151): poster at w342, title and year beneath, then
+ * the chips the row view carries — a card is legible before it is pretty.
+ * A missing poster becomes a same-ratio placeholder carrying its title,
+ * so the grid never reflows and never has a hole in it.
+ */
+function libraryCard(
+  posterPath: string | null,
+  title: string,
+  year: number | null,
+  chips: HTMLSpanElement[],
+  open: (origin: HTMLElement) => void,
+): HTMLLIElement {
+  const item = document.createElement("li");
+  const card = document.createElement("button");
+  card.type = "button";
+  card.className = "card";
+
+  const art = document.createElement("span");
+  art.className = "card-art";
+  if (posterPath === null) {
+    const blank = document.createElement("span");
+    blank.className = "card-blank";
+    const blankTitle = document.createElement("span");
+    blankTitle.className = "card-blank-title";
+    blankTitle.textContent = title;
+    blank.append(blankTitle);
+    art.append(blank);
+  } else {
+    const img = document.createElement("img");
+    img.className = "card-poster";
+    img.loading = "lazy";
+    img.src = tmdbImage(posterPath, "w342") ?? "";
+    img.alt = `${title} poster`;
+    // hotlinked art can 404; fall back to the titled blank rather than a hole
+    img.addEventListener("error", () => {
+      const blankTitle = document.createElement("span");
+      blankTitle.className = "card-blank-title";
+      blankTitle.textContent = title;
+      const blank = document.createElement("span");
+      blank.className = "card-blank";
+      blank.append(blankTitle);
+      img.replaceWith(blank);
+    });
+    art.append(img);
+  }
+
+  const id = document.createElement("span");
+  id.className = "card-id";
+  const name = document.createElement("span");
+  name.className = "card-name";
+  name.textContent = title;
+  const when = document.createElement("span");
+  when.className = "card-year readout dim";
+  when.textContent = year === null ? "—" : String(year);
+  id.append(name, when);
+
+  const chipLine = document.createElement("span");
+  chipLine.className = "card-chips";
+  for (const chipEl of chips) {
+    chipLine.append(chipEl);
+  }
+
+  const body = document.createElement("span");
+  body.className = "card-body";
+  body.append(id, chipLine);
+
+  card.append(art, body);
+  card.addEventListener("click", () => {
+    open(card);
+  });
+  item.append(card);
+  return item;
+}
+
+function seriesCard(
+  series: LibrarySeries,
+  roots: Root[],
+  open: (id: number, origin: HTMLElement) => void,
+): HTMLLIElement {
+  const root = roots.find((candidate) => candidate.id === series.root_id);
+  const chips = [chip(root ? root.audience : `root ${series.root_id}`)];
+  if (series.wanted_episodes > 0) {
+    chips.push(
+      chip(`${series.available_episodes}/${series.wanted_episodes} eps`, (span) => {
+        span.setAttribute(
+          "aria-label",
+          `${series.available_episodes} of ${series.wanted_episodes} wanted episodes on disk`,
+        );
+      }),
+    );
+  }
+  if (series.blocked) {
+    chips.push(chip("blocked"));
+  }
+  chips.push(
+    chip(series.status, (span) => {
+      span.dataset.status = series.status;
+    }),
+  );
+  const rating = ratingChip(series.vote_average);
+  if (rating !== null) {
+    chips.push(rating);
+  }
+  return libraryCard(series.poster_path, series.title, series.year, chips, (origin) =>
+    open(series.id, origin),
+  );
+}
+
+function movieCard(
+  movie: LibraryMovie,
+  roots: Root[],
+  open: (movie: LibraryMovie, origin: HTMLElement) => void,
+): HTMLLIElement {
+  const root = roots.find((candidate) => candidate.id === movie.root_id);
+  const chips = [chip(root ? root.audience : `root ${movie.root_id}`)];
+  chips.push(
+    chip(movie.state, (span) => {
+      span.dataset.movieState = movie.state;
+    }),
+  );
+  // §5.7 honesty: a waived import is never presented as a clean match
+  const waiver = waiverLabel(movie.waiver);
+  if (waiver !== null) {
+    chips.push(
+      chip(waiver, (span) => {
+        span.dataset.verdict = "waived";
+      }),
+    );
+  }
+  if (!movie.wanted) {
+    chips.push(chip("not wanted"));
+  }
+  if (movie.blocked) {
+    chips.push(chip("blocked"));
+  }
+  const rating = ratingChip(movie.vote_average);
+  if (rating !== null) {
+    chips.push(rating);
+  }
+  return libraryCard(movie.poster_path, movie.title, movie.year, chips, (origin) =>
+    open(movie, origin),
+  );
+}
+
 /* ---- tv release deck (§9.3 for season packs and single episodes) ------- */

 interface TvDeckRequest {