ui: watched-episode state (dimmed + check, next-up highlight), favicon

static/app.js

@@ -255,8 +255,20 @@ async function showAnime(slug_id, opts = {}) {
   eps.append(el("p", "muted", "loading episodes\u2026"));
   main.append(eps);
 
-  // default: resume last watched ep of this season, else start at ep 1
+  // watched state: dim completed eps, highlight the first unwatched one
+  // (ponytail: "first unwatched in list order" is wrong if you skip around;
+  //  good enough for sequential viewing)
   epsList = await api(`/api/anime/${seasonId}/episodes`);
+  watchDone = new Set();
+  let started = false;
+  try {
+    for (const x of await api("/api/history?all=1")) {
+      if (x.slug_id !== slug_id || x.season_id !== seasonId) continue;
+      started = true;
+      if (x.dur > 0 && x.pos >= x.dur * 0.95) watchDone.add(String(x.ep_id));
+    }
+  } catch {}
+  watchNext = started ? (epsList.find(e => !watchDone.has(String(e.id))) || {}).id : null;
   renderEps();
   const h = history.find(x => x.slug_id === slug_id && x.season_id === seasonId);
   const start = opts.ep || (h ? h.ep_id : null) || epsList[0]?.id;
@@ -315,6 +327,7 @@ function markActive(b) {
 }
 
 let epsList = [], hideFiller = false;
+let watchDone = new Set(), watchNext = null;
 
 function renderEps() {
   const eps = document.getElementById("eps");
@@ -323,7 +336,10 @@ function renderEps() {
   for (const e of epsList) {
     if (hideFiller && e.filler) continue;
     const b = el("button", "ep" + (e.filler ? " filler" : ""));
-    b.textContent = "E" + e.number;
+    const done = watchDone.has(String(e.id));
+    b.textContent = done ? "E" + e.number + " \u2713" : "E" + e.number;
+    if (done) b.classList.add("done");
+    if (watchNext != null && String(watchNext) === String(e.id)) b.classList.add("nextup");
     if (e.filler) b.append(el("span", "badge", " filler"));
     b.dataset.ep = e.id; b.dataset.no = e.number;
     b.onclick = () => { markActive(b); play(e.id, e.number); };