Action key under the tabs, plus the brand mark #12

2026-07-31T03:19:15+07:00

sulthan commented

2026-07-31 03:19:15 +07:00

The card action strip is icon-only, so nothing on screen said what the six
glyphs do. This adds a permanent key line under the tabs naming each one.

The key is tab-shaped, not row-shaped: archived and finished swap Archive
for Restore, and finished drops Done — the same conditions card.html already
uses for the buttons. It rides along in writeChromeOOB, otherwise an htmx
tab switch would leave the previous bucket's key behind.

Also from the Claude Design pass:

• per-action accent on hover/press — slate archive, moss finished, clay
chapter — so a press says which lane it belongs to; ember stays reserved for
new-chapter heat
• cover 74→80px desktop / 86→93px phone, title 19→21px, meta 10→11px
• favourite mark pinned to the right edge of the measure instead of trailing
the title, which drifted whenever a new-chapter title shrink-wrapped
• recent strip sizes now derive from --cover-w instead of repeating magic
numbers

Brand mark

The design project grew a logo, so it lands in three places with three
different colour sources:

• backend/static/logo.svg — fixed palette, because a favicon has no page to
inherit from. Linked as rel="icon" from both the app and the login page.
• {{define "mark"}} in chrome.html — takes --ink/--ember/currentColor, so
the header mark flips with the light/dark theme. Used by app.html and
login.html.
• the userscript panel header — same drawing inside the shadow root, next to
the tokens it uses.

.brand becomes a flex row in both stylesheets and the topbar aligns centre
rather than baseline. The 5px stroke on the 200-unit grid thins out at brand
size, so it is nudged to 6.5 instead of scaled blindly. No mark on the edge
tab: a 7px sliver has nowhere to put one.

go test ./... passes (static-asset test now covers logo.svg), node --test on
the userscript logic suite passes 14/14. Verified live at 412px and desktop:
key renders, per-tab variant correct on /?tab=finished (play/star/pencil/undo/
trash, no Done), and the OOB swap fires on /ui/list.

The card action strip is icon-only, so nothing on screen said what the six glyphs do. This adds a permanent key line under the tabs naming each one. The key is tab-shaped, not row-shaped: archived and finished swap Archive for Restore, and finished drops Done — the same conditions card.html already uses for the buttons. It rides along in writeChromeOOB, otherwise an htmx tab switch would leave the previous bucket's key behind. Also from the Claude Design pass: • per-action accent on hover/press — slate archive, moss finished, clay chapter — so a press says which lane it belongs to; ember stays reserved for new-chapter heat • cover 74→80px desktop / 86→93px phone, title 19→21px, meta 10→11px • favourite mark pinned to the right edge of the measure instead of trailing the title, which drifted whenever a new-chapter title shrink-wrapped • recent strip sizes now derive from --cover-w instead of repeating magic numbers ### Brand mark The design project grew a logo, so it lands in three places with three different colour sources: • `backend/static/logo.svg` — fixed palette, because a favicon has no page to inherit from. Linked as `rel="icon"` from both the app and the login page. • `{{define "mark"}}` in chrome.html — takes `--ink`/`--ember`/currentColor, so the header mark flips with the light/dark theme. Used by app.html and login.html. • the userscript panel header — same drawing inside the shadow root, next to the tokens it uses. `.brand` becomes a flex row in both stylesheets and the topbar aligns centre rather than baseline. The 5px stroke on the 200-unit grid thins out at brand size, so it is nudged to 6.5 instead of scaled blindly. No mark on the edge tab: a 7px sliver has nowhere to put one. go test ./... passes (static-asset test now covers logo.svg), node --test on the userscript logic suite passes 14/14. Verified live at 412px and desktop: key renders, per-tab variant correct on /?tab=finished (play/star/pencil/undo/ trash, no Done), and the OOB swap fires on /ui/list.

sulthan added 1 commit 2026-07-31 03:19:16 +07:00

feat(web): permanent action key under the tabs 42b93dc155

The card action strip is icon-only, so nothing on screen said what the
six glyphs do. Add a keyrow line under the tabs that names each one.

The key follows the tab, not the row: archived and finished swap Archive
for Restore, and finished drops Done — same conditions card.html already
uses for the buttons themselves. It therefore rides along in
writeChromeOOB, or a tab switch would leave the previous bucket's key.

Also from the Claude Design pass: per-action accent colours on hover and
press (slate archive, moss finished, clay chapter) so a press says which
lane it belongs to, a slightly larger cover and title, and the favourite
mark pinned to the right edge of the measure instead of trailing the
title, which drifted whenever a new-chapter title shrink-wrapped.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

sulthan added 1 commit 2026-07-31 17:13:05 +07:00

feat(ui): brand mark logo in the web UI, panel, and favicon 51839762e7

The mark is the same drawing in three places with three different
colour sources: /static/logo.svg carries a fixed palette because a
favicon has no page to inherit from, the {{define "mark"}} block takes
--ink/--ember so it flips with the theme, and the userscript copy lives
inside the shadow root next to the tokens it uses.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

sulthan changed title from ~~Action key under the tabs~~ to Action key under the tabs, plus the brand mark

2026-07-31 17:13:23 +07:00

sulthan merged commit 3c935ba7c3 into main

2026-07-31 17:14:16 +07:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: sulthan/mangaBookmark#12