rebrand: MangaBM → BookmarkManager, add novel library support (#15)

Two intertwined changes — the rebrand and the novel library were developed on
the same branch because the novel UI plumbing is part of the new "Bookmark
Manager" wordmark in the web shell.

## What it does

- **Rebrand**: MangaBM → BookmarkManager across the Go module, compose stack,
  env vars, Traefik hostnames, container/image names, userscript storage
  prefixes (`mangabm:cache` → `bmgr:manga:cache`, `mangabm:queue` → `bmgr:manga:queue`),
  and docs.
- **Novel library**: same backend, two libraries. New `kind` column splits
  bookmarks into `manga` / `novel`; PUT validates it. Two userscripts:
  - `manga-bookmark.user.js` — unchanged behaviour, just stamps its own `kind`.
  - `novel-bookmark.user.js` — separate Violentmonkey install with adapters
    for **novelfull.com** (polled via headless browser — Cloudflare JS
    challenge) and **lightnovelworld.net** (polled via plain TLS).
- **Web UI**: library switch on the app shell. Login art, libswitch, and
  novel-site colours from the Cinder design snapshot.

## Plumbing

- `addedColumns` ALTER for `kind` runs on first start after upgrade; every
  pre-existing row is backfilled to `'manga'`. No manual SQL, no down-time.
- `ALLOWED_ORIGINS` gains the two novel sites.
- New `NOVEL_USERSCRIPT_PATH` env (default `/userscript/novel-bookmark.user.js`),
  bindmounted alongside the manga script.
- Traefik router names `mangabm*` → `bmapi*` / `bmweb*`.

## Test status

- `go test ./...` — green
- `node --test userscript/test/logic.test.js` — 34 pass
- `node --test userscript/test/novel-logic.test.js` — 11 pass
- `node --check` on both userscripts — clean

## Notes for the redeploy

.env keys were renamed (`MANGA_API_HOST` → `BOOKMARK_API_HOST`,
`MANGA_WEB_HOST` → `BOOKMARK_WEB_HOST`). Update DNS / Traefik labels on the
prod override before pulling, otherwise the public hostnames go dark.
See the redeploy instructions I'll post next to this PR.

Reviewed-on: #15
Co-authored-by: Sulthan Zaki <sultankiki05@gmail.com>
Co-committed-by: Sulthan Zaki <sultankiki05@gmail.com>

backend/internal/web/static/filter.js

@@ -46,7 +46,7 @@
 
   // htmx replaces the list on a tab switch, so re-apply to the new cards.
   document.body.addEventListener("htmx:afterSwap", applyFilter);
-  document.addEventListener("mangabm:refilter", applyFilter);
+  document.addEventListener("bmgr:refilter", applyFilter);
 })();
 
 function setActiveTab(el) {
@@ -58,7 +58,7 @@ function setActiveTab(el) {
   });
   // The strip is outside the swapped region, so its visibility is re-decided
   // here rather than by the server that just answered.
-  document.dispatchEvent(new Event("mangabm:refilter"));
+  document.dispatchEvent(new Event("bmgr:refilter"));
 }
 
 // The chapter-edit form and the archive/finish/remove confirm rows are the

backend/internal/web/static/logo.svg

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 172" role="img" aria-label="mangaBookmark">
-  <title>mangaBookmark</title>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 172" role="img" aria-label="BookmarkManager">
+  <title>BookmarkManager</title>
   <g fill="#100f0e" stroke="#f2ece5" stroke-width="5" stroke-linejoin="round" stroke-linecap="round">
     <path fill="none" d="M28 36H4v114h192V36h-24"></path>
     <path fill="none" d="M28 23H17v127h166V23h-11"></path>

backend/internal/web/static/style.css

@@ -97,6 +97,10 @@
   --comix: #8a9a7d;
   --kagane: #9a8aa5;
 
+  /* novel sources: same muted family, two hues the manga sites do not use */
+  --novelfull: #a59a7d;
+  --lightnovelworld: #7da59a;
+
   /* Covers are often missing; the hatch keeps the slot honest instead of
      faking artwork. */
   --hatch: repeating-linear-gradient(135deg, #211d1b 0 5px, #191614 5px 10px);
@@ -150,6 +154,8 @@
     --demonic: #8a6a55;
     --comix: #5f7250;
     --kagane: #6f5f7d;
+    --novelfull: #7d6f4f;
+    --lightnovelworld: #4f7d70;
 
     --hatch: repeating-linear-gradient(135deg, #e6e0d8 0 5px, #efeae3 5px 10px);
     --hatch-dim: repeating-linear-gradient(135deg, #ebe6de 0 5px, #f2eee8 5px 10px);
@@ -485,12 +491,51 @@ button { cursor: pointer; }
 .site-demonic { color: var(--demonic); }
 .site-comix { color: var(--comix); }
 .site-kagane { color: var(--kagane); }
+.site-novelfull { color: var(--novelfull); }
+.site-lightnovelworld { color: var(--lightnovelworld); }
 .new-chapter { color: var(--ember); }
 .state { display: flex; align-items: center; gap: 4px; color: var(--mute); }
 .state svg { width: 10px; height: 10px; }
 .is-dim .meta { color: var(--mute-2); }
 .is-dim .site-asura, .is-dim .site-demonic,
-.is-dim .site-comix, .is-dim .site-kagane { color: var(--mute); filter: grayscale(.6); }
+.is-dim .site-comix, .is-dim .site-kagane,
+.is-dim .site-novelfull, .is-dim .site-lightnovelworld { color: var(--mute); filter: grayscale(.6); }
+
+/* ---- library switch: manga and novels are separate libraries, so the pair
+   sits in the topbar next to the wordmark rather than among the buckets. ---- */
+.libswitch {
+  display: flex;
+  margin-left: auto;
+  border: 1px solid var(--field-line);
+}
+.libswitch a {
+  padding: 7px 13px;
+  font: 500 10px/1 var(--font-mono);
+  letter-spacing: .12em;
+  text-transform: uppercase;
+  color: var(--mute);
+  text-decoration: none;
+}
+.libswitch a + a { border-left: 1px solid var(--field-line); }
+.libswitch a:hover { color: var(--paper-dim); }
+/* The library you are in carries the ember, the same heat the wordmark and the
+   Updated tab use — it is the one piece of chrome that has to be unmistakable. */
+.libswitch a.active {
+  background: var(--ember-wash);
+  color: var(--ember);
+  box-shadow: inset 0 -2px 0 var(--ember);
+}
+.topbar form { margin-left: 18px; }
+/* At phone width brand + switch + Log out do not fit on one line, so the
+   switch takes its own row under the wordmark rather than pushing Log out
+   off-screen. */
+@media (max-width: 719px) {
+  .topbar { flex-wrap: wrap; row-gap: 12px; }
+  .brand { flex: 1 1 auto; min-width: 0; }
+  .libswitch { order: 3; margin-left: 0; }
+  .libswitch a { flex: 1; text-align: center; padding: 8px 14px; }
+  .topbar form { margin-left: 12px; }
+}
 
 /* ---- action strip: full-width on a phone, hairline-divided cells ---- */
 .actions {
@@ -714,6 +759,20 @@ button { cursor: pointer; }
   color: var(--paper);
 }
 .login-card h1 em { color: var(--ember); font-style: italic; }
+.login-art {
+  margin: 8px auto 0;
+  width: 240px;
+  aspect-ratio: 1;
+  display: grid;
+  place-items: center;
+  background: radial-gradient(circle, var(--ember-wash) 0%, transparent 70%);
+}
+.login-art img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  filter: drop-shadow(0 0 34px var(--ember-wash)) drop-shadow(0 18px 24px rgba(0,0,0,.5));
+}
 .login-card form { display: flex; flex-direction: column; gap: 18px; }
 .login-card label {
   font: 500 10px/1 var(--font-mono);
@@ -754,12 +813,22 @@ button { cursor: pointer; }
   color: #fff;
 }
 
+/* ---- laptop and up: the whole sheet is drawn 20% larger, which is what
+   reading it at 120% zoom on a 1920-wide screen was doing by hand. Everything
+   in this file is sized in px, so scaling the root is the one adjustment that
+   keeps every proportion — hairlines, cover ratios, hit targets —
+   intact. ---- */
+@media (min-width: 1280px) {
+  :root { zoom: 1.2; }
+}
+
 /* ---- desktop: same measure, actions fold up beside the row ---- */
 @media (min-width: 720px) {
   :root { --cover-w: 80px; --row-gap: 20px; }
   .topbar { padding: 26px 32px 18px; }
   .brand { font-size: 30px; }
   .brand .mark { width: 35px; height: 30px; }
+  .libswitch a { padding: 9px 16px; font-size: 11px; }
 
   .chrome {
     flex-direction: row;

backend/internal/web/templates/app.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="color-scheme" content="dark light">
-  <title>mangaBookmark</title>
+  <title>BookmarkManager</title>
   <link rel="icon" href="/static/logo.svg" type="image/svg+xml">
   <link rel="stylesheet" href="/static/style.css">
   <link rel="preload" href="/static/fonts/instrument-serif-400-latin.woff2" as="font" type="font/woff2" crossorigin>
@@ -19,7 +19,15 @@
 {{template "icons" .}}
 <div class="sheet">
   <header class="topbar">
-    <h1 class="brand">{{template "mark" .}}<span>manga<em>Bookmark</em></span></h1>
+    <h1 class="brand">{{template "mark" .}}<span>Bookmark<em>Manager</em></span></h1>
+    {{/* Plain full-page links, not htmx swaps: switching library replaces the
+         tab row and the chrome, which is a page, not a fragment. */}}
+    <nav class="libswitch" aria-label="Library">
+      <a href="/?tab=all" class="{{if eq .Lib "manga"}}active{{end}}"
+         {{if eq .Lib "manga"}}aria-current="page"{{end}}>Manga</a>
+      <a href="/?lib=novel&amp;tab=all" class="{{if eq .Lib "novel"}}active{{end}}"
+         {{if eq .Lib "novel"}}aria-current="page"{{end}}>Novels</a>
+    </nav>
     <form method="post" action="/logout">
       <button type="submit" class="ghost">Log out</button>
     </form>
@@ -38,27 +46,31 @@
        navigation, not an ARIA tablist — aria-current carries "which bucket am
        I in" without owing a tabpanel contract we do not implement. */}}
   <nav class="tabs" aria-label="Bookmark buckets">
-    <a href="/?tab=all" class="{{if eq .Tab "all"}}active{{end}}"
+    <a href="{{.PageURL "all"}}" class="{{if eq .Tab "all"}}active{{end}}"
        {{if eq .Tab "all"}}aria-current="page"{{end}}
-       hx-get="/ui/list?tab=all" hx-target="#list" hx-swap="innerHTML"
-       hx-push-url="/?tab=all" hx-on::after-request="setActiveTab(this)">All</a>
-    <a href="/?tab=new" class="tab-new {{if eq .Tab "new"}}active{{end}}"
+       hx-get="{{.ListURL "all"}}" hx-target="#list" hx-swap="innerHTML"
+       hx-push-url="{{.PageURL "all"}}" hx-on::after-request="setActiveTab(this)">All</a>
+    {{/* The one bucket novels do not have: without a poller-fed "what is out
+         that I have not read", the tab would only ever restate All. */}}
+    {{if eq .Lib "manga"}}
+    <a href="{{.PageURL "new"}}" class="tab-new {{if eq .Tab "new"}}active{{end}}"
        {{if eq .Tab "new"}}aria-current="page"{{end}}
-       hx-get="/ui/list?tab=new" hx-target="#list" hx-swap="innerHTML"
-       hx-push-url="/?tab=new" hx-on::after-request="setActiveTab(this)">Updated
+       hx-get="{{.ListURL "new"}}" hx-target="#list" hx-swap="innerHTML"
+       hx-push-url="{{.PageURL "new"}}" hx-on::after-request="setActiveTab(this)">Updated
       {{template "newcount" .}}</a>
-    <a href="/?tab=fav" class="{{if eq .Tab "fav"}}active{{end}}"
+    {{end}}
+    <a href="{{.PageURL "fav"}}" class="{{if eq .Tab "fav"}}active{{end}}"
        {{if eq .Tab "fav"}}aria-current="page"{{end}}
-       hx-get="/ui/list?tab=fav" hx-target="#list" hx-swap="innerHTML"
-       hx-push-url="/?tab=fav" hx-on::after-request="setActiveTab(this)">Favourites</a>
-    <a href="/?tab=archived" class="{{if eq .Tab "archived"}}active{{end}}"
+       hx-get="{{.ListURL "fav"}}" hx-target="#list" hx-swap="innerHTML"
+       hx-push-url="{{.PageURL "fav"}}" hx-on::after-request="setActiveTab(this)">Favourites</a>
+    <a href="{{.PageURL "archived"}}" class="{{if eq .Tab "archived"}}active{{end}}"
        {{if eq .Tab "archived"}}aria-current="page"{{end}}
-       hx-get="/ui/list?tab=archived" hx-target="#list" hx-swap="innerHTML"
-       hx-push-url="/?tab=archived" hx-on::after-request="setActiveTab(this)">Archived</a>
-    <a href="/?tab=finished" class="{{if eq .Tab "finished"}}active{{end}}"
+       hx-get="{{.ListURL "archived"}}" hx-target="#list" hx-swap="innerHTML"
+       hx-push-url="{{.PageURL "archived"}}" hx-on::after-request="setActiveTab(this)">Archived</a>
+    <a href="{{.PageURL "finished"}}" class="{{if eq .Tab "finished"}}active{{end}}"
        {{if eq .Tab "finished"}}aria-current="page"{{end}}
-       hx-get="/ui/list?tab=finished" hx-target="#list" hx-swap="innerHTML"
-       hx-push-url="/?tab=finished" hx-on::after-request="setActiveTab(this)">Finished</a>
+       hx-get="{{.ListURL "finished"}}" hx-target="#list" hx-swap="innerHTML"
+       hx-push-url="{{.PageURL "finished"}}" hx-on::after-request="setActiveTab(this)">Finished</a>
   </nav>
   </div>
 

backend/internal/web/templates/login.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
   <meta name="color-scheme" content="dark light">
-  <title>mangaBookmark</title>
+  <title>BookmarkManager</title>
   <link rel="icon" href="/static/logo.svg" type="image/svg+xml">
   <link rel="stylesheet" href="/static/style.css">
   <link rel="preload" href="/static/fonts/instrument-serif-400-latin.woff2" as="font" type="font/woff2" crossorigin>
@@ -14,8 +14,11 @@
   <main class="login-card">
     <div>
       <span class="eyebrow">Private library</span>
-      <h1 class="brand">{{template "mark" .}}<span>manga<em>Bookmark</em></span></h1>
+      <h1 class="brand">{{template "mark" .}}<span>Bookmark<em>Manager</em></span></h1>
     </div>
+    <figure class="login-art" aria-hidden="true">
+      <img src="/static/login-art.png" alt="">
+    </figure>
     <form method="post" action="/login">
       <div>
         <label for="password">Password</label>

backend/internal/web/web.go

@@ -14,8 +14,8 @@ import (
 	"strings"
 	"time"
 
-	"mangabm/backend/internal/session"
-	"mangabm/backend/internal/store"
+	"bookmarkmanager/backend/internal/session"
+	"bookmarkmanager/backend/internal/store"
 )
 
 //go:embed templates
@@ -40,6 +40,10 @@ type Handler struct {
 
 // listView is what every list-rendering template receives.
 type listView struct {
+	// Lib is the library this view renders: store.KindManga or store.KindNovel.
+	// Manga is the default and carries no query parameter, so every pre-novel
+	// URL keeps meaning exactly what it did.
+	Lib string
 	Tab    string // "all", "fav", or "new"
 	Recent []store.Bookmark
 	Items  []store.Bookmark
@@ -53,6 +57,23 @@ type listView struct {
 	OOB bool
 }
 
+// PageURL and ListURL are the two link shapes every tab needs. Building them
+// here rather than concatenating in the template is what keeps the library
+// parameter from being dropped on one link out of ten.
+func (v listView) PageURL(tab string) string {
+	if v.Lib == store.KindNovel {
+		return "/?lib=novel&tab=" + tab
+	}
+	return "/?tab=" + tab
+}
+
+func (v listView) ListURL(tab string) string {
+	if v.Lib == store.KindNovel {
+		return "/ui/list?lib=novel&tab=" + tab
+	}
+	return "/ui/list?tab=" + tab
+}
+
 // loginView is what the login template receives.
 type loginView struct {
 	Error string
@@ -146,7 +167,7 @@ func (h *Handler) index(w http.ResponseWriter, r *http.Request) {
 		h.render(w, http.StatusOK, "login", loginView{})
 		return
 	}
-	view, err := h.buildListView(r.URL.Query().Get("tab"))
+	view, err := h.buildListView(libOf(r.URL.Query().Get("lib")), r.URL.Query().Get("tab"))
 	if err != nil {
 		log.Printf("index: %v", err)
 		http.Error(w, "internal error", http.StatusInternalServerError)
@@ -167,6 +188,26 @@ func filterBookmarks(all []store.Bookmark, keep func(store.Bookmark) bool) []sto
 	return out
 }
 
+// kindOf reads a bookmark's library. A row cached or written before the kind
+// column existed has none; every one of those is manga, which is what the
+// column default says too.
+func kindOf(b store.Bookmark) string {
+	if b.Kind == "" {
+		return store.KindManga
+	}
+	return b.Kind
+}
+
+// libOf normalises the query parameter. Anything that is not the novel library
+// is the manga one, so a typo lands on the default page rather than an empty
+// list.
+func libOf(q string) string {
+	if q == store.KindNovel {
+		return store.KindNovel
+	}
+	return store.KindManga
+}
+
 // buildListView loads the list once and derives both the tab-filtered items and
 // the recent strip from it.
 //
@@ -174,11 +215,20 @@ func filterBookmarks(all []store.Bookmark, keep func(store.Bookmark) bool) []sto
 // in All, not in Updated, not in Favourites, and not in the recent strip. An
 // archived favourite therefore shows only under Archived: Favourites means
 // "favourites I am currently reading".
-func (h *Handler) buildListView(tab string) (listView, error) {
+func (h *Handler) buildListView(lib, tab string) (listView, error) {
 	all, err := h.store.List() // already ordered updated_at DESC
 	if err != nil {
 		return listView{}, err
 	}
+	// Narrow to one library first: reading, withNew and recent all derive from
+	// this slice, so doing it later would let the other library's rows into the
+	// strip and the Updated badge.
+	all = filterBookmarks(all, func(b store.Bookmark) bool { return kindOf(b) == lib })
+
+	// Novels do not offer an Updated tab, so a hand-typed one lands on All.
+	if lib == store.KindNovel && tab == "new" {
+		tab = "all"
+	}
 	reading := filterBookmarks(all, func(b store.Bookmark) bool { return b.Status == store.StatusReading })
 
 	withNew := filterBookmarks(reading, func(b store.Bookmark) bool { return b.HasNewChapter() })
@@ -213,11 +263,11 @@ func (h *Handler) buildListView(tab string) (listView, error) {
 			recent = recent[:RecentCount]
 		}
 	}
-	return listView{Tab: tab, Recent: recent, Items: items, NewCount: len(withNew)}, nil
+	return listView{Lib: lib, Tab: tab, Recent: recent, Items: items, NewCount: len(withNew)}, nil
 }
 
 func (h *Handler) uiList(w http.ResponseWriter, r *http.Request) {
-	view, err := h.buildListView(r.URL.Query().Get("tab"))
+	view, err := h.buildListView(libOf(r.URL.Query().Get("lib")), r.URL.Query().Get("tab"))
 	if err != nil {
 		log.Printf("ui list: %v", err)
 		http.Error(w, "internal error", http.StatusInternalServerError)
@@ -241,6 +291,17 @@ func currentTab(r *http.Request) string {
 	return u.Query().Get("tab")
 }
 
+// currentLib is the library the reader is looking at, read from htmx's own
+// header for the same reason currentTab is: out-of-band chrome must be rebuilt
+// for that view rather than for the default one.
+func currentLib(r *http.Request) string {
+	u, err := url.Parse(r.Header.Get("HX-Current-URL"))
+	if err != nil {
+		return store.KindManga
+	}
+	return libOf(u.Query().Get("lib"))
+}
+
 // writeChromeOOB appends the regions that live outside #list — the recent
 // strip, the Updated badge and the action key — as out-of-band swaps, so a
 // mutation cannot leave them describing the library as it was before the tap.
@@ -248,7 +309,11 @@ func currentTab(r *http.Request) string {
 // Archive for Restore.
 func (h *Handler) writeChromeOOB(w http.ResponseWriter, view listView) {
 	view.OOB = true
-	for _, name := range []string{"recent", "newcount", "keyrow"} {
+	names := []string{"recent", "keyrow"}
+	if view.Lib == store.KindManga {
+		names = append(names, "newcount")
+	}
+	for _, name := range names {
 		if err := h.tmpl.ExecuteTemplate(w, name, view); err != nil {
 			// The card is already written; stale chrome beats a torn response.
 			log.Printf("render %s oob: %v", name, err)
@@ -260,7 +325,7 @@ func (h *Handler) writeChromeOOB(w http.ResponseWriter, view listView) {
 // refreshChrome rebuilds the chrome for the reader's current tab after a
 // mutation and appends it to the response.
 func (h *Handler) refreshChrome(w http.ResponseWriter, r *http.Request) {
-	view, err := h.buildListView(currentTab(r))
+	view, err := h.buildListView(currentLib(r), currentTab(r))
 	if err != nil {
 		log.Printf("ui chrome: %v", err)
 		return