From e250762ea6d820bc0e6ecacc5136ef904c1c1fd4 Mon Sep 17 00:00:00 2001 From: Sulthan Zaki Date: Sun, 2 Aug 2026 19:18:56 +0700 Subject: [PATCH] Move userscript to Violentmonkey, sync docs to shipped Cinder design CLAUDE.md: swap Bromite for Violentmonkey throughout, add installed golang skills to relevant skills, add comment-writing rules, add a design-system pointer rule. docs/design-system.md: rewrite against the current Claude Design project and the tokens/components already shipped in backend/static/style.css (danger/slate/moss/clay/trash, action key, brand mark). Co-Authored-By: Claude Sonnet 5 --- CLAUDE.md | 238 ++++++++++++++++++++++++------------------ docs/design-system.md | 173 +++++++++++++++++++++--------- 2 files changed, 260 insertions(+), 151 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index e719837..b57c00f 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1,137 +1,137 @@ # CLAUDE.md -This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. +Guidance for Claude Code (claude.ai/code) working in this repo. ## Status -Greenfield. Only `plans/mangaBookmark.md` exists — no code yet. That plan is the spec; read it before building. Two deliverables: a Go sync backend and a single Bromite-compatible userscript. +Greenfield. Only `plans/mangaBookmark.md` exist — no code yet. Plan = spec; read before build. Two deliverables: Go sync backend, single Violentmonkey-compatible userscript. ## What this is -A manga read-progress tracker for a user reading on **asurascans.com** (the current domain; asuracomic.net 301s here) and **demonicscans.org** from **Bromite** (mobile Chromium). A userscript injects on-page UI (floating button + slide-in panel) and syncs progress to a self-hosted Go backend so bookmarks unify across both sites and across devices. +Manga read-progress tracker, user read on **asurascans.com** (current domain; asuracomic.net 301s here) and **demonicscans.org** via **Violentmonkey**. Userscript inject on-page UI (floating button + slide-in panel), sync progress to self-hosted Go backend so bookmarks unify across both sites and devices. -## Hard constraints (these drive the design — do not violate) +## Hard constraints (drive design — don't violate) -Bromite uses Chromium's **native** userscript engine, not Tampermonkey: -- **No `GM_*` APIs anywhere.** No `GM_setValue`/`GM_getValue` (use page `localStorage`), no `GM_registerMenuCommand` (inject on-page UI), no `GM_xmlhttpRequest` for cross-origin (use plain `fetch()`). Keeping the script GM-free also lets it run in desktop Tampermonkey/Violentmonkey for faster iteration. -- Cross-origin `fetch()` works **only** against a CORS-enabled backend. Manga sites are `https://`, so backend **must be HTTPS** (mixed-content block otherwise). -- Asura and Demonic are **separate origins with separate `localStorage`** — a shared remote store is the only way to unify bookmarks. Cloud sync is required, not optional. -- Userscript runs in an **isolated world**, so the embedded API token is safe from the site's JS. -- Cloudflare's block on fetching the manga sites is **IP-reputation-based, not universal — and not reliably reproducible.** Verified 2026-07-26: plain `curl` from both the CGNAT dev machine *and* the deployed VPS got clean 200s with real HTML on both asurascans.com and demonicscans.org (homepage, series, chapter pages) — no interactive Turnstile challenge from either IP at test time. This contradicts an earlier, untested assumption that the CGNAT dev IP would be blocked; it was not, at least on this date. Treat "does curl work right now" as a live, time-varying fact to re-check, not a fixed property of a given machine — Cloudflare's bot scoring can flip a previously-clean IP without notice. Any backend fetcher still needs a graceful-degrade path for when it does get challenged, and adapters should be **verified against live pages** (Playwright MCP, on-device devtools, or a direct probe) before finalizing, not assumed from a single earlier test. +Userscript targets **Violentmonkey**, so `GM_*` APIs available, but stay GM-free where plain web APIs suffice — keeps portability across engines: +- **Avoid `GM_*` unless needed.** Prefer page `localStorage` over `GM_setValue`/`GM_getValue`, on-page UI over `GM_registerMenuCommand`, plain `fetch()` over `GM_xmlhttpRequest` for cross-origin. +- Cross-origin `fetch()` work **only** against CORS-enabled backend. Manga sites `https://`, so backend **must be HTTPS** (else mixed-content block). +- Asura and Demonic are **separate origins with separate `localStorage`** — shared remote store only way to unify bookmarks. Cloud sync required, not optional. +- Userscript run in **isolated world**, so embedded API token safe from site's JS. +- Cloudflare's block on manga sites **IP-reputation-based, not universal — and not reliably reproducible.** Verified 2026-07-26: plain `curl` from both CGNAT dev machine *and* deployed VPS got clean 200s with real HTML on both asurascans.com and demonicscans.org (homepage, series, chapter pages) — no interactive Turnstile challenge from either IP at test time. Contradicts earlier untested assumption CGNAT dev IP blocked; wasn't, at least this date. Treat "does curl work right now" as live, time-varying fact to re-check, not fixed property of machine — Cloudflare's bot scoring can flip previously-clean IP without notice. Backend fetcher still needs graceful-degrade path for when challenged, and adapters should be **verified against live pages** (Playwright MCP, on-device devtools, or direct probe) before finalize, not assumed from single earlier test. ## Architecture ``` -Bromite userscript (isolated world, per-site adapters, localStorage cache) +Violentmonkey userscript (isolated world, per-site adapters, localStorage cache) -- fetch() HTTPS --> reverse proxy (TLS + CORS) --> Go net/http --> SQLite (volume) ``` -- **Backend** (`backend/`): stdlib `net/http` (a handful of routes, no framework) + `modernc.org/sqlite` (pure Go, `CGO_ENABLED=0` -> static binary -> distroless/scratch image). The reverse proxy terminates TLS; the Go service listens plain `:8080`. -- **Single-user store.** One `bookmarks` table keyed `:` (`asura`|`demonic`). Sync is **last-write-wins**. Schema and endpoint list are in the plan. +- **Backend** (`backend/`): stdlib `net/http` (handful routes, no framework) + `modernc.org/sqlite` (pure Go, `CGO_ENABLED=0` -> static binary -> distroless/scratch image). Reverse proxy terminates TLS; Go service listens plain `:8080`. +- **Single-user store.** One `bookmarks` table keyed `:` (`asura`|`demonic`). Sync **last-write-wins**. Schema and endpoint list in plan. - **Endpoints:** `GET /bookmarks`, `PUT /bookmarks/{key}` (upsert; see `updated_at` rule below), `DELETE /bookmarks/{key}`, `GET /healthz` (no auth). -- **Web UI:** the same binary serves a password-gated browser UI on a second - hostname — `GET /` (list, or login page when there is no session), - `POST /login`, `POST /logout`, `GET /static/*`, and htmx fragment endpoints - under `/ui/*`. Templates and assets are `go:embed`-ed, so `backend/Dockerfile` - must copy `templates/` and `static/` as well as `*.go`. Sessions are stateless - HMAC cookies keyed off `API_TOKEN`; `WEB_PASSWORD` gates them and, when empty, - the web routes are not registered at all. UI mutations read-modify-write - through `Store.Get` + `Store.Upsert` so the `updated_at` rule stays in one +- **Web UI:** same binary serve password-gated browser UI on second + hostname — `GET /` (list, or login page when no session), + `POST /login`, `POST /logout`, `GET /static/*`, htmx fragment endpoints + under `/ui/*`. Templates + assets `go:embed`-ed, so `backend/Dockerfile` + must copy `templates/` and `static/` plus `*.go`. Sessions stateless + HMAC cookies keyed off `API_TOKEN`; `WEB_PASSWORD` gates them, and when empty, + web routes not registered at all. UI mutations read-modify-write + through `Store.Get` + `Store.Upsert` so `updated_at` rule stays one place. See `docs/superpowers/specs/2026-07-25-web-ui-design.md`. - **Design-tool caveat:** the templates link `/static/style.css` root-absolutely - (correct — they are served from `/`), but the impeccable detector resolves a - stylesheet href with `path.resolve(fileDir, href)`, which drops the directory - on a leading `/` and silently skips the file. A relative href does not help - either: the template's directory is not its served path. So - `detect.mjs backend/templates` reports a **false clean** — always pass - `backend/static` too. Its one finding there, `overused-font` on "Instrument - Serif", is a deliberate identity choice, not debt. -- **Every action that moves a series out of the list is confirm-gated.** - Archive, finish, and remove each open their own `.confirm-row` disclosure + **Design-tool caveat:** templates link `/static/style.css` root-absolutely + (correct — served from `/`), but impeccable detector resolves + stylesheet href with `path.resolve(fileDir, href)`, drops directory + on leading `/` and silently skip file. Relative href don't help + either: template's directory isn't its served path. So + `detect.mjs backend/templates` reports **false clean** — always pass + `backend/static` too. One finding there, `overused-font` on "Instrument + Serif", deliberate identity choice, not debt. +- **Every action that moves series out of list is confirm-gated.** + Archive, finish, remove each open own `.confirm-row` disclosure (`toggleConfirmRow(key, kind)` in `filter.js`, `kind` ∈ - `archive|finish|remove`); restore fires instantly because it is the reversal. - Remove's row wears the ember wash, the two reversible ones wear `.calm` grey. - `--ember` stays reserved for the new-chapter signal: busy bar and inline + `archive|finish|remove`); restore fire instantly since it's the reversal. + Remove's row wear ember wash, two reversible ones wear `.calm` grey. + `--ember` stay reserved for new-chapter signal: busy bar and inline error use `--mute`. -- **Latest-chapter poller:** a ticker goroutine in the same binary re-checks - each bookmarked series' newest published chapter from the backend's own - network access, so `latest_chapter` stays fresh when the user is not - browsing. It is a *second, parallel* signal — the userscript keeps its own +- **Latest-chapter poller:** ticker goroutine in same binary re-check + each bookmarked series' newest published chapter from backend's own + network access, so `latest_chapter` stay fresh when user not + browsing. Second, parallel signal — userscript keep own `maybeCaptureLatestOnSeriesPage`/`backgroundRefreshLatest` logic unchanged. - Two independent clocks: a per-bookmark cooldown (`latest_checked_at` column, - enforced by `Store.DueForLatestCheck`'s WHERE clause) and a wake interval. - The row is stamped *before* the fetch so a broken series waits out a full + Two independent clocks: per-bookmark cooldown (`latest_checked_at` column, + enforced by `Store.DueForLatestCheck`'s WHERE clause) and wake interval. + Row stamped *before* fetch so broken series wait out full cooldown instead of retrying every tick, and writes go through - `Store.Get` + `Store.Upsert` so a new chapter never reorders the list. - Fetches use `bogdanfinn/tls-client` with a Chrome profile as defence in depth - against fingerprint-based blocking; any failure logs and skips. See + `Store.Get` + `Store.Upsert` so new chapter never reorders list. + Fetches use `bogdanfinn/tls-client` with Chrome profile as defence in depth + against fingerprint-based blocking; any failure log and skip. See `docs/superpowers/specs/2026-07-26-server-latest-chapter-polling-design.md`. - The poller's `Store.Get` + `Store.Upsert` is not wrapped in a transaction, so - a userscript `PUT` that commits between the two can be overwritten by the - poller's stale re-read — reverting that read progress and, since the stored - value now differs, moving `updated_at` and reordering the list. This is a - known, accepted limitation for a single-user deployment, not a bug to fix. -- **`updated_at` drives list order, so it moves only on real reading progress:** the server applies its timestamp when the row is new or `last_chapter_num` changes, and otherwise keeps the stored value — favouriting a series or recording a newly published chapter must not reorder the list. `PUT` therefore returns the row **as stored**, and clients must adopt that response rather than their own payload. See `plans/2026-07-25-bookmark-list-favorites-design.md` §4. + Poller's `Store.Get` + `Store.Upsert` not wrapped in transaction, so + userscript `PUT` that commits between the two can get overwritten by + poller's stale re-read — reverting that read progress and, since stored + value now differs, moving `updated_at` and reordering list. Known, + accepted limitation for single-user deployment, not bug to fix. +- **`updated_at` drives list order, so moves only on real reading progress:** server apply its timestamp when row new or `last_chapter_num` changes, else keep stored value — favouriting series or recording newly published chapter must not reorder list. `PUT` therefore returns row **as stored**, clients must adopt that response rather than own payload. See `plans/2026-07-25-bookmark-list-favorites-design.md` §4. - **Lifecycle buckets:** `status` on each bookmark is `reading` | `archived` | `finished`, orthogonal to `favorite`. Archived and finished appear only in - their own tab — not in All, Updated, Favourites, or the recent strip. The - poller keeps checking archived series and skips finished ones. `finished` is - settable only from the web UI; `PUT /bookmarks/{key}` rejects it with 400. - **An empty incoming status means "keep the stored one"** — resolved on the - `VALUES` side of `Store.Upsert`, not in the conflict clause, because - `excluded.*` is the post-evaluation row and a default applied there would - wipe the bucket on every PUT from a client that predates the column. See + own tab — not in All, Updated, Favourites, or recent strip. Poller keeps + checking archived series and skip finished ones. `finished` settable + only from web UI; `PUT /bookmarks/{key}` reject it with 400. + **Empty incoming status means "keep stored one"** — resolved on the + `VALUES` side of `Store.Upsert`, not conflict clause, since + `excluded.*` is post-evaluation row and default applied there would + wipe bucket on every PUT from client that predates column. See `docs/superpowers/specs/2026-07-27-status-buckets-design.md`. - **Config via env:** `API_TOKEN`, `ALLOWED_ORIGINS` (comma list), `DB_PATH` (default `/data/bookmarks.db`), `PORT` (default `8080`), `WEB_PASSWORD` - (gates the browser UI; unset disables it), + (gates browser UI; unset disable it), `LATEST_CHAPTER_POLL_ENABLED`/`_COOLDOWN`/`_INTERVAL`/`_BATCH`/`_STAGGER` (background latest-chapter poller; defaults on, `1h`/`10m`/`14`/`20s`). `USERSCRIPT_PATH` (file served at `/u/{token}/manga-bookmark.user.js`, - default `/userscript/manga-bookmark.user.js`, supplied by a bindmount). + default `/userscript/manga-bookmark.user.js`, supplied by bindmount). ### Userscript structure (single IIFE, `manga-bookmark.user.js`) -1. **Site adapters** — one per host, `detect(location, document)` returns page `type` + IDs. Identify type/IDs from **URL regex** (most stable); pull `title`/`cover` from **`og:title`/`og:image` meta tags**, not CSS classes. +1. **Site adapters** — one per host, `detect(location, document)` return page `type` + IDs. Identify type/IDs from **URL regex** (most stable); pull `title`/`cover` from **`og:title`/`og:image` meta tags**, not CSS classes. 2. **API client** — `apiGet/apiPut/apiDelete` with bearer header; `localStorage` key `mangabm:cache` for instant render + offline fallback. 3. **Progress logic** — auto-upsert `last_chapter` only when `chapterNum >= stored last_chapter_num` (re-reading old chapters must not regress progress; unparseable -> set current). Manual panel override forces any value. -4. **Retry queue** — every write goes through `pushBookmark`/`pushDelete`, so a - failed mutation is parked in `localStorage` (`mangabm:queue`) and replayed on - the next navigation, reconnect, or `refresh()`. Entries are markers - (`{key, op, sendStatus, attempts}`), never payloads — the body is read from - the cache at send time, so one entry per key gives ordering and coalescing for - free. `sendStatus` is **sticky**: while an archive is pending, later writes to - that key keep carrying the bucket, which is what stops a successful - in-between write from silently un-archiving the series. `refresh()` drains - before it fetches and overlays anything still pending, so the list never - flaps. A 400 drops the entry, a 401 aborts the pass and keeps the queue, and - transient failures retry to a cap of 10. Latest-chapter writes deliberately - stay out of the queue. See +4. **Retry queue** — every write go through `pushBookmark`/`pushDelete`, so + failed mutation park in `localStorage` (`mangabm:queue`) and replayed on + next navigation, reconnect, or `refresh()`. Entries are markers + (`{key, op, sendStatus, attempts}`), never payloads — body read from + cache at send time, so one entry per key give ordering and coalescing for + free. `sendStatus` is **sticky**: while archive pending, later writes to + that key keep carrying bucket, which stop successful + in-between write from silently un-archiving series. `refresh()` drains + before it fetches and overlays anything still pending, so list never + flaps. 400 drops entry, 401 abort pass and keep queue, and + transient failures retry to cap of 10. Latest-chapter writes deliberately + stay out of queue. See `docs/superpowers/specs/2026-07-27-offline-retry-queue-design.md`. -5. **UI** — rendered inside a **Shadow DOM** root to isolate from site CSS - (critical on mobile). Three tabs (All / Favourites / Archived) and a row of - link chips to the web UI and both manga sites; `WEB_BASE` sits in the CONFIG - block next to `API_BASE`. The FAB is a `7 × 44` edge tab whose *hit* area is - widened to `28 × 72` by an invisible `#hit` child; `#fab` must keep - `touch-action: none` and must **not** regain `overflow: hidden`. Because - `touch-action` is resolved at gesture start, the strip cannot be both - browser-scrolled and script-dragged, so `makeDraggable` splits by intent: a - swipe from `#hit` scrolls via `window.scrollBy`, a hold of `ARM_MS` arms a - reposition drag, and the visible sliver drags with no hold. See +5. **UI** — rendered inside **Shadow DOM** root to isolate from site CSS + (critical on mobile). Three tabs (All / Favourites / Archived) and row of + link chips to web UI and both manga sites; `WEB_BASE` sits in CONFIG + block next to `API_BASE`. FAB is `7 × 44` edge tab whose *hit* area + widened to `28 × 72` by invisible `#hit` child; `#fab` must keep + `touch-action: none` and must **not** regain `overflow: hidden`. Since + `touch-action` resolved at gesture start, strip can't be both + browser-scrolled and script-dragged, so `makeDraggable` splits by intent: swipe + from `#hit` scrolls via `window.scrollBy`, hold of `ARM_MS` arms + reposition drag, visible sliver drags with no hold. See `docs/superpowers/specs/2026-07-28-edge-tab-hitbox-design.md`. -6. **SPA navigation** — Asura is Astro, client-routed on the comic/chapter pages: patch `history.pushState`/`replaceState` + listen `popstate`, re-run `detect()` on URL change so auto-update fires without reload. Demonic uses classic reloads (initial `document-idle` run suffices). +6. **SPA navigation** — Asura is Astro, client-routed on comic/chapter pages: patch `history.pushState`/`replaceState` + listen `popstate`, re-run `detect()` on URL change so auto-update fire without reload. Demonic uses classic reloads (initial `document-idle` run suffice). -### Live URL shapes (verified 2026-07-26, may drift — re-check against live pages before trusting) +### Live URL shapes (verified 2026-07-26, may drift — re-check against live pages before trust) -- **asurascans.com**: series `/comics/` (slug carries a trailing +- **asurascans.com**: series `/comics/` (slug carries trailing site-wide build-hash suffix, e.g. `-059befe1`, that **rotates on every redeploy**), chapter `/comics//chapter/`. `seriesId` must strip - the hash (`/-[0-9a-f]{8}$/`, `stripBuildHash` in the userscript, - `asuraBuildHash` in the backend); URLs keep the full slug — stale-hash + hash (`/-[0-9a-f]{8}$/`, `stripBuildHash` in userscript, + `asuraBuildHash` in backend); URLs keep full slug — stale-hash URLs 302 to current ones. Astro-rendered; chapter links present in raw server HTML. - **demonicscans.org**: series `/manga/` (slug may URL-encode punctuation, e.g. `%2527` for `'`), chapter `/title//chapter//` (older `chaptered.php?manga=&chapter=` form still exists as redirect, what series-page chapter-list anchors link through). - Encodings (incl. triple-encoded punctuation like `%25252D`) are identical + Encodings (incl. triple-encoded punctuation like `%25252D`) identical on /manga/ and /title/ pages, so decode-once seriesIds match — verified 2026-07-28. @@ -144,34 +144,74 @@ Backend (`cd backend`): Local stack: `docker compose up` (named volume mounted at `/data`, `restart: unless-stopped`). -Smoke test: `curl` the endpoints with `Authorization: Bearer `; confirm `OPTIONS` preflight returns CORS headers and `/healthz` returns 200. +Smoke test: `curl` endpoints with `Authorization: Bearer `; confirm `OPTIONS` preflight return CORS headers and `/healthz` return 200. ## Forge: Gitea, not GitHub -`origin` is a self-hosted Gitea instance (`gitea.violetcrown.my.id`), so **`gh` does not work here — use `tea` (Gitea CLI) for anything past plain git.** Common ones: +`origin` is self-hosted Gitea instance (`gitea.violetcrown.my.id`), so **`gh` don't work here — use `tea` (Gitea CLI) for anything past plain git.** Common ones: -- Open a PR: `tea pr create --head --base main --title "..." --description "..."` +- Open PR: `tea pr create --head --base main --title "..." --description "..."` - List / view / check out: `tea pr list`, `tea pr `, `tea pr checkout ` - Issues: `tea issue create`, `tea issue list` -- Auth lives in `tea login`, not a `GH_TOKEN` env var. +- Auth lives in `tea login`, not `GH_TOKEN` env var. -`tea` prints its output as rendered boxes rather than plain text; the PR URL lands on the last line. +`tea` print output as rendered boxes rather than plain text; PR URL lands on last line. + +## Design system + +Web UI + userscript panel follow **Cinder**, rules in `docs/design-system.md` +— source of truth Claude Design project `mangaBookmark Web UI` +(`969ac210-fe02-4c01-ae1b-9a271dcc779a`). Read it before touching +`backend/static/style.css`, `backend/templates/*`, or userscript +`TEMPLATE`/`CSS`. Core law: **ember means new chapter only** — no other +state (busy, error, destruction) may use `--ember`; destruction gets +`--danger`. No cards/corners/shadows, one `--measure: 760px` column, tokens +only (never hardcode hex outside `:root`), both colour branches touched +together. Any move that pulls series out of list (archive/finish/remove) +must be confirm-gated via its own `.confirm-row`; only restore fires +instantly. ## Security invariants - Auth on `/bookmarks*`: require `Authorization: Bearer `, **constant-time compare**, 401 otherwise. - CORS: reflect `Origin` only when in `ALLOWED_ORIGINS`; allow `GET,PUT,DELETE,OPTIONS` + headers `Authorization,Content-Type`; answer preflight `OPTIONS` with `204`. +## Comments + +Comment only if code alone can't carry info. Cost per read — must earn spot. + +Write for: +- Why not what. Tradeoffs, non-obvious decisions. +- Load-bearing detail looking incidental — say so if "simplify" breaks it. +- Non-local consequence, invisible from function alone. +- Wire format / encoding / interface contract — save callers re-deriving. +- Gotcha/workaround, with ref if exists. +- Domain/business rule not derivable from code. + +Skip: +- Restating code (no `// increment i` above `i++`). +- Trivial getter/setter/pass-through. +- Banners, dividers, `// helpers`. +- Change narration (`// fix bug`, `// as requested`, `// new impl`) — git's job. +- Commented-out code — delete. +- TODO without concrete action. + +Style: one dense comment over function beats one per line inside. Tight, no worked example unless bug subtle. Wrong comment worse than none — update/delete on change. Default fewer — sparse+high-signal beats comprehensive. + +Test: "competent reader get this from code in few sec?" Yes → skip. Needs detour through another file/spec/git-blame → write it. + ## Relevant skills -`multi-stage-dockerfile` and `docker-compose-orchestration` for the container work (referenced in the plan). +`multi-stage-dockerfile` and `docker-compose-orchestration` for container work (referenced in plan). + +`golang-code-style`, `golang-error-handling`, `golang-performance`, `golang-testing` for backend Go work. ## graphify -This project has a knowledge graph at graphify-out/ with god nodes, community structure, and cross-file relationships. +Project has knowledge graph at graphify-out/ with god nodes, community structure, cross-file relationships. Rules: -- For codebase questions, first run `graphify query ""` when graphify-out/graph.json exists. Use `graphify path "" ""` for relationships and `graphify explain ""` for focused concepts. These return a scoped subgraph, usually much smaller than GRAPH_REPORT.md or raw grep output. -- If graphify-out/wiki/index.md exists, use it for broad navigation instead of raw source browsing. -- Read graphify-out/GRAPH_REPORT.md only for broad architecture review or when query/path/explain do not surface enough context. -- After modifying code, run `graphify update .` to keep the graph current (AST-only, no API cost). +- For codebase questions, first run `graphify query ""` when graphify-out/graph.json exists. Use `graphify path "" ""` for relationships and `graphify explain ""` for focused concepts. Return scoped subgraph, usually much smaller than GRAPH_REPORT.md or raw grep output. +- If graphify-out/wiki/index.md exists, use for broad navigation instead of raw source browsing. +- Read graphify-out/GRAPH_REPORT.md only for broad architecture review or when query/path/explain don't surface enough context. +- After modifying code, run `graphify update .` to keep graph current (AST-only, no API cost). \ No newline at end of file diff --git a/docs/design-system.md b/docs/design-system.md index a19e051..9aed761 100644 --- a/docs/design-system.md +++ b/docs/design-system.md @@ -1,16 +1,16 @@ # Cinder — mangaBookmark design system -Source of truth: the Claude Design doc **Cinder Sheet** -(`cfa39183-8874-4f76-987c-afef14dceebb`, files `Cinder Sheet.dc.html` for the -static spec and `Cinder Sheet App.dc.html` for the interactive one). This file -records the rules that got implemented so a future agent can extend the UI -without re-reading the design. +Source of truth: the Claude Design project **mangaBookmark Web UI** +(`969ac210-fe02-4c01-ae1b-9a271dcc779a`, `index.html` + siblings +`archived.html`/`fav.html`/`finished.html`/`new.html`/`login.html`/`mobile.html`, +`style.css`, `filter.js`). This file records the rules that got implemented so +a future agent can extend the UI without re-reading the design. Implemented in: | Surface | Files | | --- | --- | -| Web UI (login, list, card, empty, errors) | `backend/static/style.css`, `backend/templates/{app,card,list,login,icons}.html`, `backend/static/filter.js` | +| Web UI (login, list, card, empty, errors) | `backend/static/style.css`, `backend/templates/{app,card,list,login,chrome,icons}.html`, `backend/static/filter.js` | | Userscript panel (Shadow DOM) | `userscript/manga-bookmark.user.js` — `TEMPLATE` and `CSS` at the bottom of the IIFE | ## 1. The one idea @@ -19,9 +19,12 @@ Implemented in: allowed to be crimson: its title turns `--paper-hot` and sits on a 1px ember underline sized to the text, its cover gains a 3px ember rule at the foot, and its `Ch N out` meta and play icon go ember. Everything else — favourites, -status, chrome — stays cool. If a new feature wants to be noticed, it does *not* -get to borrow the ember; find a typographic answer (weight, italic, a rule) or -use brass, which is already spoken for by favourites. +status, chrome, destruction — stays off that one colour. Destruction gets its +own token (`--danger`, a duller oxblood) precisely so a remove confirm is +never mistaken across the room for an unread chapter. If a new feature wants +to be noticed, it does *not* get to borrow the ember; find a typographic +answer (weight, italic, a rule) or reach for one of the named action accents +(§2). Corollaries: @@ -34,7 +37,7 @@ Corollaries: - **Three type roles, never mixed.** Display serif for anything a human reads as a name (brand, titles, tabs, primary buttons, empty-state headings). Mono small-caps for machine facts (site, chapter numbers, labels, status, badges, - ghost buttons). Sans for prose only (empty-state body, hints). + ghost buttons, the action key). Sans for prose only (empty-state body, hints). ## 2. Tokens @@ -44,7 +47,7 @@ Defined once in `backend/static/style.css` `:root`, mirrored in the userscript's | Token | Dark | Light | Use | | --- | --- | --- | --- | | `--ink` | `#100f0e` | `#f7f4ef` | page | -| `--ash` | `#161413` | `#efeae3` | recessed panel (chapter form, toast) | +| `--ash` | `#161413` | `#efeae3` | recessed panel (chapter form) | | `--dim` | `#0d0c0b` | `#f1ede7` | archived / finished row background | | `--rule` | `#221f1d` | `#e0dad2` | hairline between sheets, button borders | | `--rule-soft` | `#1a1817` | `#e8e3dc` | the measure's own side edges | @@ -54,23 +57,34 @@ Defined once in `backend/static/style.css` `:root`, mirrored in the userscript's | `--paper-hot` | `#f0d3cb` | `#a33018` | title of a series with a new chapter | | `--paper-dim` | `#ddd5cb` | `#191715` | resting title | | `--mute` | `#8d857c` | `#6b645d` | secondary text, idle icons | -| `--mute-2` | `#5a5450` | `#857d75` | eyebrow labels, hints | +| `--mute-2` | `#877f76` | `#6c655e` | eyebrow labels, hints (must clear 4.5:1 on both `--ink` and `--ash`) | | `--faint` | `#3a3733` | `#c9c2ba` | the `/` separators in a meta line | | `--faint-2` | `#57504b` | `#a8a098` | cover monogram | | `--ember` | `#e0452c` | `#c23a22` | heat — see §1 | -| `--ember-wash` | `#1a1211` | `#fbeee9` | ember-tinted surface (confirm, error) | +| `--ember-wash` | `#1a1211` | `#fbeee9` | ember-tinted surface | | `--ember-ink` | `#150907` | `#fff` | text on solid ember | | `--ember-soft` | `#eda798` | `#8d2c17` | text on ember wash | -| `--brass` | `#b8912f` | `#8a681c` | favourites, and only favourites | -| `--trash` | `#6b5450` | `#a98276` | remove, at rest | +| `--danger` | `#cf5c4d` | `#97362a` | destruction — remove confirm, never the same as `--ember` | +| `--danger-wash` | `#211311` | `#fbe9e5` | remove-confirm surface | +| `--danger-ink` | `#150808` | `#fff` | text on solid danger | +| `--danger-soft` | `#e2aaa1` | `#7c2c22` | text on danger wash | +| `--brass` | `#b8912f` | `#8a681c` | favourite — a cooler second metal | +| `--slate` | `#7fa0c0` | `#3f6689` | archive accent | +| `--moss` | `#7fae86` | `#3d6c46` | finished accent | +| `--clay` | `#b5906f` | `#7c5533` | set-chapter accent | +| `--trash` | `#977671` | `#8c6558` | remove, at rest — icons need 3:1, not 4.5:1 | +| `--play-hot-line` | `#3a1d18` | `#f0cfc6` | desktop cell border, play when `.is-new` | +| `--fav-line` | `#332b14` | `#e3d3a4` | desktop cell border, favourite when on | | `--asura` | `#7d93a5` | `#4f6b80` | site tag | | `--demonic` | `#a98a78` | `#8a6a55` | site tag | | `--hatch` / `--hatch-dim` | 135° 5px stripe | paper stripe | missing-cover slot | -Dark is the default (`color-scheme: dark light`); light is a -`@media (prefers-color-scheme: light)` override of the same names. **Any new -colour must be added in both branches** — light is not a filter over dark, the -hues are re-tuned. +`--slate`/`--moss`/`--clay`/`--brass` are held at the same weight deliberately: +one accent per action, so a press says which lane it belongs to, with none of +them competing with ember. Dark is the default (`color-scheme: dark light`); +light is a `@media (prefers-color-scheme: light)` override of the same names. +**Any new colour must be added in both branches** — light is not a filter over +dark, the hues are re-tuned. ## 3. Type @@ -83,11 +97,10 @@ hues are re-tuned. The web UI **self-hosts** all three: five latin-subset woff2 files in `backend/static/fonts/` (~120 KB total), declared by the `@font-face` block at the top of `style.css` and embedded in the binary by the existing -`//go:embed static`. There is no request to Google — this UI is read in Bromite, -where `fonts.googleapis.com` is routinely blocked, and over a LAN with no -internet route. `staticHandler()` in `web.go` registers the `.woff2` MIME type -because Go's built-in table lacks it and the scratch image has no -`/etc/mime.types`. +`//go:embed static`. There is no request to Google — this UI needs to survive +on a LAN with no internet route. `staticHandler()` in `web.go` registers the +`.woff2` MIME type because Go's built-in table lacks it and the scratch image +has no `/etc/mime.types`. Adding a weight means adding a file: grab the *latin* `@font-face` block from `https://fonts.googleapis.com/css2?...` **with a browser User-Agent** (Google @@ -102,37 +115,57 @@ root is at the mercy of the host site's CSP. Recurring specs (copy these rather than inventing sizes): -- Brand: `400 26px/1 display`, with `` in ember italic — `mangaBookmark`. -- Row title: `400 19px/1.2 display` (21px ≥720px). -- Tab: `400 17px display` (18px ≥720px), active gets `border-bottom: 2px` in +- Brand: `400 26px/1 display` (`30px` ≥720px), inline SVG mark (§4) + `` in + ember italic — `mangaBookmark`. +- Row title: `400 21px/1.2 display` (`22px` ≥720px). +- Tab: `400 17px display` (`18px` ≥720px), active gets `border-bottom: 2px` in `--paper` (`--ember` for Updated) plus `margin-bottom: -1px` so it lands on the row's own hairline. -- Meta / label / badge: `500 10px mono`, `letter-spacing: .12em`, - `text-transform: uppercase`. Eyebrows ("CONTINUE READING") use `.2em`. +- Meta / label / badge / action key: `500 10–11px mono`, `letter-spacing: + .04em`–`.2em`, `text-transform: uppercase`. Eyebrows use the widest tracking. - Empty-state heading: `400 20px display`; body `400 14px/1.6 sans`, `max-width: 44ch`. -- Primary button: `--paper` fill, `--ink` text, `400 17px display`, no border radius. +- Primary button: `--paper` fill, `--ink` text, `400 17–19px display`, no border radius. - Ghost button: mono small-caps, transparent, `border-bottom: 1px --field-line`. ## 4. Components (web UI) ``` .sheet - .topbar .brand + .ghost (log out) + .topbar .brand (mark + wordmark) + .ghost (log out) .chrome .searchbar + nav.tabs (column on phone, row ≥720px via order:) + .keyrow one-line action key: Read / Fav / Chapter / Archive / Done / Delete .recent h2 eyebrow + .recent-strip > a.recent-card main#list article.card … | .empty ``` +**Brand mark**: an inline `` (`viewBox="0 0 200 172"`), +defined once in `chrome.html`'s `mark` template and reused by `app.html` and +`login.html` so it takes the page's `--ink`/`currentColor`/`--ember` rather +than shipping as a static asset. The blade at its centre strokes +`var(--logo-blade, var(--ember))` — override that custom property, don't +duplicate the SVG, if a surface ever needs a different blade colour. Drawn at +a 5px stroke on a 200-unit grid; at brand size that thins out, so `.brand .mark +g` nudges `stroke-width` up to `6.5` rather than scaling the artwork down. + +**Action key** (`.keyrow`): one permanent line under the tabs naming what +every icon in `.actions` does — Read / Fav / Chapter / Archive / Done / +Delete — so the icon strip on a card is never a guess. On a phone each pair +stacks icon-over-word (`flex-direction: column`) so the word gets the full +cell width and can stay in long form; ≥720px it lays out icon-beside-word and +switches the `.short`/`.full` label pair. `.pair.brass` and `.pair.trash` +carry their icon's resting accent so the key itself teaches the colour +vocabulary in §1/§2. + `article.card` — the row, and the only per-series component: ``` article.card[.is-new|.is-dim]#card-[data-title] .row - a.cover img | span.monogram, + span.foot-rule[.brass] + a.cover[tabindex="-1" aria-hidden] img | span.monogram, + span.foot-rule[.brass] .body .title-line (h3.title + svg.fav-mark) , p.meta - .actions play, favourite, chapter, archive|restore, finish, remove - form.chapter-form[hidden] .hint + .field(input + Save) - .confirm-row[hidden] span + (Remove, Cancel) + .actions play, favourite, chapter | lifecycle: archive/restore, finish, remove + form.chapter-form[hidden] .hint + .field(input + Save) + .hint (latest known) + .confirm-row[.calm][hidden] × one per lifecycle action, span + (go/danger-solid, Cancel) p.error-inline[hidden] ``` @@ -143,9 +176,29 @@ Rules that are easy to break: dim rule is a descendant selector off those two classes, so a new sub-element inherits the state for free. - `.actions` is `flex: 1 0 100%` inside `.row`, which is what makes it a - full-width strip under the row on a phone and a group of 40px squares beside + full-width strip under the row on a phone and a group of 44px squares beside the row at ≥720px. Cells are 46px tall on phone (thumb target) and divided by `border-right: 1px var(--rule)`, last child none. +- Three clusters by consequence, in this order: navigate (`.play`) | organize + (`.fav`, `.pencil`) | lifecycle (`.box`/`.restore`, `.finish`, `.remove`, + each carrying the `.lifecycle` class). Lifecycle cells sit on a recessed + `--ash` ground so the thumb reads "this one moves the series" before it + reads which icon it landed on; ≥720px they separate by a 10px gap instead of + the phone's inset hairline. +- Every lifecycle button that moves a series out of the list is + **confirm-gated**: it opens its own `.confirm-row` (`archive`, `finish`, + `remove` — `toggleConfirmRow(key, kind)` in `filter.js`). Archive and finish + ask in `.calm` grey since they're reversible; remove alone gets the + `--danger-wash` treatment and names the series in its question. Restore + fires instantly — no confirm — because it's the reversal. +- Per-action hover/press accent: `.fav` → `--brass`, `.pencil` → `--clay`, + `.box` → `--slate`, `.finish` → `--moss`. `.play` stays paper/ember (ember + only when `.is-new`). `.remove` stays `--trash` at rest, `--danger` on + hover. Desktop cell borders follow the same accent on hover + (`border-color: currentColor`); the two coloured *resting* states + (`.is-new .play`, `.fav.on`) get their own dim border tokens + (`--play-hot-line`, `--fav-line`) instead of the full accent, since a + resting border needs less contrast than a hover one. - Icons are `` against the sprite in `templates/icons.html`, included once by `app.html`. htmx-swapped card fragments reference the page's sprite, so a card never inlines a path. New icon → add a `` @@ -155,11 +208,15 @@ Rules that are easy to break: - Cover foot rule: ember when new, brass when favourite-and-not-new. Never both. - `[hidden] { display: none !important; }` is load-bearing — every disclosure panel is a flex container, and `display` beats `hidden`. -- Busy state is `.card.htmx-request::before`, a 1px ember bar sliding across the +- Busy state is `.card.htmx-request::before`, a 1px grey bar sliding across the top hairline (`barSlide`), plus the action strip at `opacity: .5`. Never a - spinner. -- `.open` on the pencil / trash cell marks which panel is showing; `filter.js` - `togglePanel()` owns that class alongside `hidden`. + spinner, and deliberately `--mute` not `--ember` — on a list screen ember + means "new chapter" and nothing else, so a system state can't borrow it. +- `.open` on the pencil / lifecycle cell marks which panel is showing; + `filter.js` `togglePanel()`/`toggleConfirmRow()` own that class alongside + `hidden`. An open lifecycle cell needs the next surface step up from + `--hover` (`--rule`) to stay legible as the panel's owner, since the panel + itself already sits on `--ash`. ## 5. Components (userscript panel) @@ -167,9 +224,9 @@ Same tokens, same heat rule, structure unchanged from before the revamp (`#fab`/`#hit`, `#panel`, `#nav` chips, `#context`, `#tabs`, `#list` of `.item`). Cinder-specific: `.item.hot` (new chapter) and `.item.dim` (archived) mirror `.is-new` / `.is-dim`; chips and `.btn`s are mono small-caps with hairline -borders instead of pills; loading is the same sliding ember hairline (`.spinner` -is now a 1px bar, not a rotating ring); toasts are `--ash` with a 2px left rule, -ember-washed when `.err`. +borders instead of pills; loading is the same sliding hairline (`.spinner` +is a 1px bar, not a rotating ring); toasts are `--ash` with a 2px left rule, +`--danger`-washed when `.err`. **Do not touch** the FAB geometry while restyling: `#fab` keeps `touch-action: none`, must not regain `overflow: hidden`, and `#hit` keeps the @@ -179,36 +236,48 @@ ember-washed when `.err`. ## 6. Motion Three animations, all ≤ 1.15s and all disabled under -`prefers-reduced-motion: reduce`: +`prefers-reduced-motion: reduce` (pseudo-elements need naming explicitly in +that query — `*` does not match `::before`/`::after`, so the busy bar and +error dot are listed by name and fall back to their static drawn form): - `sheetIn` — 180ms fade + 4px rise, on a row and on each disclosure panel. -- `barSlide` — the burning hairline, for any busy state. -- `emberPulse` — the 5px dot on `.error-inline`. +- `barSlide` — the sliding hairline, for any busy state. +- `mutePulse` — the 5px dot on `.error-inline`. No transforms on hover, no scale, no easing curves beyond `ease-out`/`linear`. ## 7. Accessibility floor (not negotiable) -- Touch targets on the phone layout are 44–46px; the 40px desktop cells are +- Touch targets on the phone layout are 44–46px; the 44px desktop cells are pointer-only (≥720px). - Every icon-only control keeps `title` + `aria-label`; the SVG inside is - `aria-hidden`. + `aria-hidden`. Lifecycle buttons also carry `aria-expanded` + + `aria-controls` pointing at their `.confirm-row`. - The cover link is `tabindex="-1" aria-hidden="true"` because the title link and the play cell already reach the same URL — do not make it a third tab stop. - Tabs keep `role="tab"` / `role="tablist"`; the active one is marked by class, and `setActiveTab()` in `filter.js` maintains it after an htmx swap. +- `.confirm-row` and `.error-inline` are `role="group"`/`role="status"` with + `aria-live="polite"` so a disclosure opening is announced. - Light and dark are both first-class. Check any new colour in both. ## 8. Adding something new — checklist 1. Can it be a hairline, a small-caps label, or a serif line instead of a new component? Prefer that. -2. Tokens only, both colour branches. +2. Tokens only, both colour branches. A new action gets its own named accent + (like `--slate`/`--moss`/`--clay`) at the same weight as the existing set — + never reuse `--ember` or `--danger` for anything but their one meaning. 3. If it is per-series, hang it off `.is-new` / `.is-dim` rather than adding a third state class. -4. Icon → `templates/icons.html`; nothing inlines SVG paths. -5. Phone first (44px targets, single column), then the ≥720px block. -6. Verify: `cd backend && go test ./...`, then run the binary and screenshot +4. If it removes a series from the current view (archive/finish/remove-shaped), + it is confirm-gated via its own `.confirm-row` — no exceptions, restore is + the only instant action because it's the one that's reversible by nature. +5. Icon → `templates/icons.html`; nothing inlines SVG paths. Brand mark stays + the one exception (`chrome.html`'s `mark` template), since it takes + page-level custom properties the sprite can't carry per-instance. +6. Phone first (44px targets, single column), then the ≥720px block. +7. Verify: `cd backend && go test ./...`, then run the binary and screenshot both widths and both colour schemes (Playwright: `emulateMedia`, `setViewportSize`; disable the browser cache — `/static/*` is served with `max-age=3600`, and templates are `go:embed`ed so the binary must be rebuilt