Add list styles: Podium, Spotlight, Grid, List

- Each list picks a style in List settings (new lists default to Podium);
  existing lists keep Grid or List
- Podium: top 3 on medal-colored steps (#1 center and raised), the rest
  behind a native <details> "Show N more"; stacks #1 over #2/#3 on phones
- Spotlight: #1 as a feature card (art, why-note or description, play
  button), the rest as a numbered list
- Visitors can switch styles on a list page (?style=), preserved across
  pages; later pages fall back to a plain list since they don't start at #1
- Entries' detail data now lives on a wrapper per list, so featured and
  collapsed entries all open the detail view

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/static/js/admin-list.js

@@ -54,7 +54,7 @@ const isFull = () => list.itemCount >= list.maxItems;
 
 document.querySelector("[data-action=edit-list]").addEventListener("click", () => {
   openListForm({
-    categories, limits, list,
+    categories, limits, styles: boot.styles, list,
     onSaved: (saved) => {
       // The artwork shape affects the whole editor, so redraw from scratch.
       if (saved.art !== list.art) { location.reload(); return; }

web/static/js/admin-lists.js

@@ -13,14 +13,14 @@ const root = document.getElementById("lists");
 
 function newList(category) {
   openListForm({
-    categories, limits, category,
+    categories, limits, styles: boot.styles, category,
     onSaved: (l) => { location.href = `/admin/lists/${l.id}`; },
   });
 }
 
 function editList(list) {
   openListForm({
-    categories, limits, list,
+    categories, limits, styles: boot.styles, list,
     onSaved: (saved) => {
       lists = lists.map((l) => (l.id === saved.id ? saved : l));
       render();

web/static/js/list-form.js

@@ -22,7 +22,7 @@ const autoTitle = (n, cat) => (cat.key === "custom" ? "" : `Top ${n} ${cat.label
  * @param {string} [o.category]  preselected category for a new list
  * @param {(list: object) => void} o.onSaved
  */
-export function openListForm({ categories, limits, list, category, onSaved }) {
+export function openListForm({ categories, limits, styles, list, category, onSaved }) {
   const editing = !!list;
   const catByKey = Object.fromEntries(categories.map((c) => [c.key, c]));
   const state = {
@@ -77,11 +77,12 @@ export function openListForm({ categories, limits, list, category, onSaved }) {
 
   const desc = h("textarea", { name: "description", rows: 2, maxlength: 1000, placeholder: "Optional: a line about what makes this list", value: list?.description || "" });
   const slug = editing && h("input", { name: "slug", value: list.slug, maxlength: 60, pattern: "[a-z0-9-]+", spellcheck: false });
-  const layout = list?.layout || "grid";
-  const layoutGroup = h("div", { class: "radio-cards" },
-    h("label", {}, h("input", { type: "radio", name: "layout", value: "grid", checked: layout === "grid" }), icon("grid"), "Artwork grid"),
-    h("label", {}, h("input", { type: "radio", name: "layout", value: "rows", checked: layout === "rows" }), icon("rows"), "Ranked list"),
-  );
+  const layout = list?.layout || styles[0].key;
+  const layoutGroup = h("div", { class: "style-picker", role: "radiogroup", "aria-label": "Style" },
+    styles.map((st) => h("label", { class: "style-option" },
+      h("input", { type: "radio", name: "layout", value: st.key, checked: layout === st.key }),
+      h("span", {}, icon(st.icon), h("b", {}, st.label), h("small", {}, st.description)),
+    )));
   // Custom lists choose their artwork shape; built-in categories have one.
   const art = list?.art || "square";
   const artField = h("div", { class: "field", hidden: !isCustom() },
@@ -106,7 +107,8 @@ export function openListForm({ categories, limits, list, category, onSaved }) {
       h("label", { class: "field" }, h("span", { class: "field-label" }, "Description"), desc),
       editing && h("label", { class: "field" }, h("span", { class: "field-label" }, "Address"),
         h("div", { class: "input-group", style: { alignItems: "center" } }, h("span", { class: "muted" }, "/l/"), slug)),
-      h("div", { class: "field" }, h("span", { class: "field-label" }, "Layout"), layoutGroup),
+      h("div", { class: "field" }, h("span", { class: "field-label" }, "Style"), layoutGroup,
+        h("span", { class: "field-hint" }, "How the list looks on your page. Visitors can switch styles on the list's own page.")),
       artField,
       h("label", { class: "check" }, visible, "Show this list on my public page"),
       error,

web/static/js/public.js

@@ -1,12 +1,13 @@
 // Public pages: item detail dialog and grid/list toggle.
-import { h, icon, openDialog, storageGet, storageSet } from "./common.js";
+import { h, icon, openDialog } from "./common.js";
 import { previewButton } from "./player.js";
 
 // Each ranked list on the page ships its items as JSON next to the markup.
-const lists = [...document.querySelectorAll("[data-items]")].map((ol) => {
-  const data = JSON.parse(ol.nextElementSibling?.textContent || "[]");
-  return { ol, items: data, title: ol.dataset.listTitle, square: ol.classList.contains("aspect-square") };
-});
+const lists = [...document.querySelectorAll("[data-items]")].map((el) => ({
+  items: JSON.parse(el.querySelector(":scope > .items-data")?.textContent || "[]"),
+  title: el.dataset.listTitle,
+  square: el.classList.contains("aspect-square"),
+}));
 
 function findItem(id) {
   for (const list of lists) {
@@ -78,23 +79,3 @@ document.addEventListener("click", (e) => {
   const found = findItem(Number(btn.dataset.item));
   if (found) show(found.list, found.idx);
 });
-
-// Grid / list toggle on list pages, remembered per list in this browser.
-const toggle = document.querySelector("[data-layout-toggle]");
-if (toggle) {
-  const key = "canon:layout:" + toggle.dataset.key;
-  const apply = (layout) => {
-    for (const { ol } of lists) {
-      ol.classList.toggle("items--grid", layout === "grid");
-      ol.classList.toggle("items--rows", layout === "rows");
-    }
-    for (const b of toggle.querySelectorAll("button")) b.setAttribute("aria-pressed", String(b.dataset.layout === layout));
-  };
-  apply(storageGet(key) || toggle.dataset.default);
-  toggle.addEventListener("click", (e) => {
-    const b = e.target.closest("button[data-layout]");
-    if (!b) return;
-    apply(b.dataset.layout);
-    storageSet(key, b.dataset.layout);
-  });
-}