wwj

public/s/js/scroller.js

@@ -79,8 +79,9 @@
   const CACHE_MAX   = 200;
   const CACHE_TTL   = 30 * 60 * 1000;
   const VOL_KEY     = 'scroller_volume';
-  const PREFS_KEY   = 'scroller_prefs';
-  const PRESETS_KEY = 'scroller_presets';
+  const PREFS_KEY      = 'scroller_prefs';
+  const PRESETS_KEY    = 'scroller_presets';
+  const THUMB_SIZE_KEY = 'scroller_thumb_size';
 
   // ── User Preferences ──────────────────────────────────────────────────────
   function loadPrefs() {
@@ -97,6 +98,33 @@
   let autoNextLoops   = Math.max(0, parseInt(prefs.autoNextLoops ?? 1, 10));
   let leftHandEnabled = prefs.leftHand === true;
 
+  // ── Grid / Thumbnail size ─────────────────────────────────────────────────
+  const THUMB_SIZES = ['s', 'm', 'l', 'xl'];
+  let thumbSize = localStorage.getItem(THUMB_SIZE_KEY) || 'm';
+  if (!THUMB_SIZES.includes(thumbSize)) thumbSize = 'm';
+
+  function applyThumbSize(size) {
+    thumbSize = size;
+    document.documentElement.dataset.thumbSize = size;
+    localStorage.setItem(THUMB_SIZE_KEY, size);
+    // Sync pill active state whenever called outside the click handler
+    document.querySelectorAll('#thumb-size-pills .filter-pill').forEach(p =>
+      p.classList.toggle('active', p.dataset.thumbSize === size)
+    );
+  }
+  // Apply persisted size on load
+  applyThumbSize(thumbSize);
+
+  // Wire pill click events
+  const thumbSizePillsEl = document.getElementById('thumb-size-pills');
+  if (thumbSizePillsEl) {
+    thumbSizePillsEl.querySelectorAll('.filter-pill').forEach(pill => {
+      pill.addEventListener('click', () => {
+        applyThumbSize(pill.dataset.thumbSize);
+      });
+    });
+  }
+
   let applied   = { mode: defaultMode, mime: '', order: 'random', tags: [], externalUrl: null };
   let pending   = { ...applied, tags: [] };
 
@@ -2988,6 +3016,7 @@
     document.querySelectorAll('#mode-pills .filter-pill').forEach(p => p.classList.toggle('active', +p.dataset.mode === pending.mode));
     document.querySelectorAll('#mime-pills .filter-pill').forEach(p => p.classList.toggle('active', p.dataset.mime === pending.mime));
     document.querySelectorAll('#order-pills .filter-pill').forEach(p => p.classList.toggle('active', p.dataset.order === pending.order));
+    document.querySelectorAll('#thumb-size-pills .filter-pill').forEach(p => p.classList.toggle('active', p.dataset.thumbSize === thumbSize));
     if (externalUrlInput) externalUrlInput.value = pending.externalUrl || '';
     renderActiveTags();
   }