Shotlog - Screenshot Log

@@ -448,13 +448,26 @@ header {    the human guessing what they're changing. */ .num-wrap { display: inline-flex; align-items: center; gap: 6px; height: 30px;   background: var(--overlay); border: 1px solid var(--border); border-radius: 7px;-  padding: 0 10px; flex-shrink: 0; }+  padding: 0 4px 0 10px; flex-shrink: 0; } .num-wrap:focus-within { border-color: rgba(0,184,176,.6); } .num-wrap .num-input { -webkit-appearance: none; appearance: textfield; width: 46px;   background: transparent; border: none; outline: none; color: var(--text);   font: 600 13px 'JetBrains Mono', monospace; text-align: right; } .num-wrap .num-input::-webkit-inner-spin-button, .num-wrap .num-input::-webkit-outer-spin-button { -webkit-appearance: none; } .num-wrap .unit { color: var(--text3); font: 500 11px 'Satoshi', sans-serif; }+/* Up/down stepper buttons on number inputs */+.num-wrap .num-step { -webkit-appearance: none; appearance: none; flex-shrink: 0;+  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;+  background: var(--elevated); color: var(--text2); border: 1px solid var(--border);+  border-radius: 5px; cursor: pointer; font: 600 15px/1 'Satoshi', sans-serif; padding: 0;+  transition: background .12s, color .12s, border-color .12s; }+.num-wrap .num-step:first-child { margin-right: 2px; }+.num-wrap .num-step:hover { background: rgba(0,184,176,.16); color: var(--accent-bright); border-color: rgba(0,184,176,.5); }+.num-wrap .num-step:active { transform: translateY(.5px); }+/* A setting that pairs an on/off switch with its number field */+.pref-control { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }+/* When the switch is OFF, grey + disable the number field */+.pref-control.off .num-wrap { opacity: .4; pointer-events: none; } .ai-chip .lbl { color: var(--text3); font-family: 'Satoshi', sans-serif; font-size: 9px;   letter-spacing: .04em; text-transform: uppercase; margin-right: 6px; } @@ -582,28 +595,40 @@ header {         <div class="ai-chip"><span class="lbl">or say to your AI</span>make the shotlog webview panel 25% wide</div>       </div>       <span class="num-wrap" data-tooltip="Percent of the workspace width for the skinny shotlog panel (10-50). Seeds a new panel; only re-applied on every open when auto-size is ON.">+        <button class="num-step" data-target="prefWidth" data-dir="-1" aria-label="decrease" tabindex="-1">−</button>         <input class="num-input" id="prefWidth" type="number" min="10" max="50" step="5"><span class="unit">%</span>+        <button class="num-step" data-target="prefWidth" data-dir="1" aria-label="increase" tabindex="-1">+</button>       </span>     </div>     <div class="pref-row">       <div class="pref-info">         <div class="pref-name">Keep per channel</div>-        <div class="pref-desc">The janitor keeps only the newest N shots per channel on disk; older files are deleted as new ones arrive. Auto-capture channels like read-captures never grow unbounded.</div>+        <div class="pref-desc">The janitor keeps only the newest N shots per channel on disk; older files are deleted as new ones arrive. Turn the switch OFF to keep every shot (unlimited on disk).</div>         <div class="ai-chip"><span class="lbl">or say to your AI</span>keep only the newest 100 shots per shotlog channel</div>       </div>-      <span class="num-wrap" data-tooltip="Newest shots kept per channel (10-5000). Applies as new shots arrive.">-        <input class="num-input" id="prefMaxShots" type="number" min="10" max="5000" step="10"><span class="unit">shots</span>-      </span>+      <div class="pref-control">+        <button class="toggle" id="prefKeepToggle" role="switch" aria-checked="true" data-tooltip="On: cap the shots kept per channel. Off: keep everything (unlimited)."></button>+        <span class="num-wrap" data-tooltip="Newest shots kept per channel (10-5000). Turn the switch off to keep unlimited.">+          <button class="num-step" data-target="prefMaxShots" data-dir="-1" aria-label="decrease" tabindex="-1">−</button>+          <input class="num-input" id="prefMaxShots" type="number" min="10" max="5000" step="25"><span class="unit">shots</span>+          <button class="num-step" data-target="prefMaxShots" data-dir="1" aria-label="increase" tabindex="-1">+</button>+        </span>+      </div>     </div>     <div class="pref-row">       <div class="pref-info">         <div class="pref-name">Prune idle channels after (days)</div>-        <div class="pref-desc">Channels with no new shots for this many days are deleted entirely (checked at startup and every 6 hours). 0 means never prune.</div>+        <div class="pref-desc">Channels with no new shots for this many days are deleted entirely (checked at startup and every 6 hours). Turn the switch OFF to never prune.</div>         <div class="ai-chip"><span class="lbl">or say to your AI</span>never auto-delete idle shotlog channels</div>       </div>-      <span class="num-wrap" data-tooltip="Days of inactivity before a whole channel is pruned. 0 = never.">-        <input class="num-input" id="prefRetention" type="number" min="0" max="3650" step="1"><span class="unit">days</span>-      </span>+      <div class="pref-control">+        <button class="toggle" id="prefPruneToggle" role="switch" aria-checked="true" data-tooltip="On: prune idle channels after N days. Off: never prune."></button>+        <span class="num-wrap" data-tooltip="Days of inactivity before a whole channel is pruned. Turn the switch off to never prune.">+          <button class="num-step" data-target="prefRetention" data-dir="-1" aria-label="decrease" tabindex="-1">−</button>+          <input class="num-input" id="prefRetention" type="number" min="1" max="3650" step="5"><span class="unit">days</span>+          <button class="num-step" data-target="prefRetention" data-dir="1" aria-label="increase" tabindex="-1">+</button>+        </span>+      </div>     </div>   </div> </div>@@ -1403,6 +1428,9 @@ header {     $('prefsClose').addEventListener('click',close);     dlg.addEventListener('click',e=>{ if(e.target===dlg) close(); });     document.addEventListener('keydown',e=>{ if(e.key==='Escape'&&dlg.classList.contains('open')) close(); });+    // Remember the last positive value so toggling a setting OFF (which stores 0)+    // then back ON restores what the human had, not a bare default.+    let lastKeep=200, lastPrune=30;     function renderPrefs(p){       hook.setAttribute('aria-checked', String(!!p.read_hook));       $('prefAlerts').setAttribute('aria-checked', String(p.update_alerts!==false));@@ -1411,8 +1439,16 @@ header {       APREFS=p;       seg.querySelectorAll('button').forEach(b=>b.classList.toggle('on', b.dataset.v===p.default_canvas));       $('prefWidth').value = p.webview_width ?? 20;-      $('prefMaxShots').value = p.max_shots ?? 200;-      $('prefRetention').value = p.retention_days ?? 30;+      // Keep per channel: max_shots 0 = OFF (unlimited).+      const mk = p.max_shots ?? 200; if(mk>0) lastKeep=mk;+      $('prefKeepToggle').setAttribute('aria-checked', String(mk>0));+      $('prefMaxShots').closest('.pref-control').classList.toggle('off', mk===0);+      $('prefMaxShots').value = mk>0 ? mk : lastKeep;+      // Prune idle: retention_days 0 = OFF (never).+      const rd = p.retention_days ?? 30; if(rd>0) lastPrune=rd;+      $('prefPruneToggle').setAttribute('aria-checked', String(rd>0));+      $('prefRetention').closest('.pref-control').classList.toggle('off', rd===0);+      $('prefRetention').value = rd>0 ? rd : lastPrune;     }     async function patch(body, okMsg){       try{@@ -1453,6 +1489,29 @@ header {     wireNum('prefWidth','webview_width', v=>'webview panel width is now '+v+'% for new opens.');     wireNum('prefMaxShots','max_shots', v=>'keeping the newest '+v+' shots per channel.');     wireNum('prefRetention','retention_days', v=> v===0?'idle channels are never pruned.':'idle channels prune after '+v+' days.');+    // Up/down steppers: adjust the target input by its step, clamp, commit.+    dlg.addEventListener('click', e=>{+      const b=e.target.closest('.num-step'); if(!b) return;+      const el=$(b.dataset.target); if(!el) return;+      if(el.closest('.pref-control')?.classList.contains('off')) return;   // disabled while switch is off+      const step=parseInt(el.step,10)||1, dir=parseInt(b.dataset.dir,10)||0;+      const min=parseInt(el.min,10), max=parseInt(el.max,10);+      let v=(parseInt(el.value,10)||min)+dir*step;+      v=Math.max(min, Math.min(max, v));+      if(String(v)!==el.value){ el.value=v; el.dispatchEvent(new Event('change')); }+    });+    // Keep-per-channel switch: OFF => max_shots 0 (unlimited); ON => restore last.+    $('prefKeepToggle').addEventListener('click',()=>{+      const on=$('prefKeepToggle').getAttribute('aria-checked')==='true';+      if(on) patch({max_shots:0}, 'keep-per-channel OFF: keeping every shot (unlimited on disk).');+      else patch({max_shots:lastKeep}, 'keep-per-channel ON: newest '+lastKeep+' shots per channel.');+    });+    // Prune-idle switch: OFF => retention_days 0 (never); ON => restore last.+    $('prefPruneToggle').addEventListener('click',()=>{+      const on=$('prefPruneToggle').getAttribute('aria-checked')==='true';+      if(on) patch({retention_days:0}, 'prune OFF: idle channels are never deleted.');+      else patch({retention_days:lastPrune}, 'prune ON: idle channels prune after '+lastPrune+' days.');+    });     $('prefsBtn').addEventListener('click', async ()=>{       try{ renderPrefs(await fetch('api/prefs').then(r=>r.json())); }catch{}       dlg.classList.add('open');