Spec #136: reader-facing finished label on the flat Bookmark (#160)

userscript/manga-bookmark.user.js

@@ -551,6 +551,12 @@
     return b.kind || "manga";
   }
 
+  // finished is a fact about the Series, decided from the owner's side and
+  // derived on the wire (issue #157); the panel only labels it.
+  function finishedLabel(b) {
+    return b && b.finished ? "Finished" : "";
+  }
+
   // ============================================================
   // Retry queue
   //
@@ -1399,6 +1405,7 @@
       el("div", { class: "meta" }, [
         el("a", { class: "go-t t", href: cont, text: b.title || b.series_id }),
         el("div", { class: "c" + (behind ? " behind" : ""), text: sub }),
+        b.finished && el("span", { class: "finished", text: finishedLabel(b) }),
         el("div", { class: "actions" }, [
           el("button", {
             class: "btn small star" + (b.favorite ? " on" : ""),
@@ -1669,7 +1676,7 @@
       --paper: #f2ece5; --paper-hot: #f0d3cb; --paper-dim: #ddd5cb;
       --mute: #8d857c; --mute-2: #5a5450; --faint: #3a3733; --faint-2: #57504b;
       --ember: #e0452c; --ember-wash: #1a1211; --ember-ink: #150907;
-      --ember-soft: #eda798; --brass: #b8912f; --trash: #6b5450;
+      --ember-soft: #eda798; --brass: #b8912f; --trash: #6b5450; --moss: #7fae86;
       --font-display: Georgia, "Times New Roman", serif;
       --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
       --font-body: system-ui, -apple-system, sans-serif;
@@ -1788,6 +1795,12 @@
       font: 400 17px/1.2 var(--font-display); color: var(--paper-dim);
       max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
     }
+    /* finished: a Series fact, not a state class (issue #157) — same meta
+       typography as .c, moss instead of mute. */
+    .finished {
+      margin: 0; color: var(--moss);
+      font: 500 10px/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
+    }
     .item.hot .t { color: var(--paper-hot); border-bottom: 1px solid var(--ember); padding-bottom: 3px; }
     .item.dim .t { font-style: italic; color: var(--mute); }
     .c {
@@ -1838,7 +1851,7 @@
   // Exposes pure logic only — see userscript/test/logic.test.js.
   // ============================================================
   if (typeof window === "undefined" && typeof module === "object" && module.exports) {
-    module.exports = { stripBuildHash, comixSeriesId, asura, demonic, comix, kagane, anchorsFromHTML, statusOf, kindOf };
+    module.exports = { stripBuildHash, comixSeriesId, asura, demonic, comix, kagane, anchorsFromHTML, statusOf, kindOf, finishedLabel };
   }
 
   // ============================================================