Web UI: Updated tab, inline errors, mobile card fixes #3

2026-07-27T00:30:02+07:00

sulthan commented

2026-07-27 00:30:02 +07:00

Third pass on the password-gated web UI, on top of #1 and #2.

Updated tab

New ?tab=new tab listing only series with an unread published chapter, plus per-tab empty states for Favourites and Updated. Covered by TestUIListNewTab.

Inline error feedback

htmx does not swap on a non-2xx response, so a failed favourite/chapter/delete looked like an ignored tap. Errors now render in a .error-inline slot on the card and clear after 5s. The chapter-edit form and delete-confirm row also close each other — only one per-card panel open at a time.

Mobile fixes (P0)

.chapter-form held three children on one unwrapped flex row, pushing Save off screen: 97px of page overflow at 390px, 127px at 360px. That broke correcting a chapter number on the primary device class.

.chapter-form and .confirm-row wrap; hint and prompt take their own full-width row
.chapter-form input uses flex: 1 1 0; min-width: 0 — with flex: 1 (basis auto) a number input holds its ~20ch intrinsic width and refused to shrink, which pushed Save to a third row
white-space: nowrap on the confirm prompt alone reintroduced 26px of overflow; the full-width row is what actually fixes it

Verified live: document.body.scrollWidth <= window.innerWidth with every chapter-form and confirm-row open, at 360/390/768/1280, light and dark.

Icons

☆ ✎ 🗑 ▶ replaced with hand-authored inline SVG on currentColor — the emoji font rendered each in a different face, weight, and colour, ignoring the card's own type and colour system. .icon.on / .icon.danger / .primary keep driving colour. No icon font or library added.

No-cover empty state

Series whose source site gave no og:image render a title-initial monogram (Bookmark.Initial()) instead of a blank --surface-2 rectangle that read as a cover still loading. Shared between the card cover and the Continue-reading strip.

Verification

go build ./... && go test ./... — pass
Live interaction run: favourite toggle round-trips, chapter save 210.5→211, All/Updated/Favourites swap, delete-confirm removes the card, no console errors

Third pass on the password-gated web UI, on top of #1 and #2. ## Updated tab New `?tab=new` tab listing only series with an unread published chapter, plus per-tab empty states for Favourites and Updated. Covered by `TestUIListNewTab`. ## Inline error feedback htmx does not swap on a non-2xx response, so a failed favourite/chapter/delete looked like an ignored tap. Errors now render in a `.error-inline` slot on the card and clear after 5s. The chapter-edit form and delete-confirm row also close each other — only one per-card panel open at a time. ## Mobile fixes (P0) `.chapter-form` held three children on one unwrapped flex row, pushing Save off screen: **97px of page overflow at 390px, 127px at 360px**. That broke correcting a chapter number on the primary device class. - `.chapter-form` and `.confirm-row` wrap; hint and prompt take their own full-width row - `.chapter-form input` uses `flex: 1 1 0; min-width: 0` — with `flex: 1` (basis auto) a number input holds its ~20ch intrinsic width and refused to shrink, which pushed Save to a third row - `white-space: nowrap` on the confirm prompt alone reintroduced 26px of overflow; the full-width row is what actually fixes it Verified live: `document.body.scrollWidth <= window.innerWidth` with every chapter-form and confirm-row open, at 360/390/768/1280, light and dark. ## Icons `☆ ✎ 🗑 ▶` replaced with hand-authored inline SVG on `currentColor` — the emoji font rendered each in a different face, weight, and colour, ignoring the card's own type and colour system. `.icon.on` / `.icon.danger` / `.primary` keep driving colour. No icon font or library added. ## No-cover empty state Series whose source site gave no `og:image` render a title-initial monogram (`Bookmark.Initial()`) instead of a blank `--surface-2` rectangle that read as a cover still loading. Shared between the card cover and the Continue-reading strip. ## Verification - `go build ./... && go test ./...` — pass - Live interaction run: favourite toggle round-trips, chapter save 210.5→211, All/Updated/Favourites swap, delete-confirm removes the card, no console errors

sulthan added 1 commit 2026-07-27 00:30:03 +07:00

feat(web): updated tab, inline errors, card craft b2aa814982

Adds the Updated tab (series with an unread chapter) with its own empty
state, so "what's new" no longer means scanning the whole list.

A failed favourite/chapter/delete previously looked like an ignored tap:
htmx does not swap on a non-2xx response and nothing else said so. Errors
now surface inline on the card. The two per-card panels (chapter edit,
delete confirm) also close each other.

Mobile fixes, all measured at 360/390px rather than eyeballed:
.chapter-form and .confirm-row now wrap so the hint and the prompt take
their own row, and the number input shrinks (flex-basis 0) instead of
holding its ~20ch intrinsic width. Before this the Save button sat off
screen — 97px of page overflow at 390px, 127px at 360px — which broke
correcting a chapter number on the one device class this is built for.

Emoji glyphs replaced with inline SVG on currentColor: each rendered in a
different face at a different weight and colour, ignoring the card's own
type and colour system. No icon font or library.

Series with no scraped og:image render a title-initial monogram instead
of a blank rectangle that read as a cover still loading.

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

sulthan added 1 commit 2026-07-27 00:34:09 +07:00

docs: track product context and UI critique snapshots d1253e8a7b

PRODUCT.md records the durable constraints the UI work keeps having to
rediscover: dark-first is binding (night reading), mobile is the target
rather than the starting breakpoint, and updated_at ordering is a
correctness rule the design must not decorate over.

The two critique snapshots are the scored before/after (21/40, then
26/40) the card fixes were driven from — worth keeping as the record of
which problems were already known, and which ones the fixes introduced.

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

sulthan added 1 commit 2026-07-27 00:41:01 +07:00

docs: note this repo uses tea, not gh 73a43fa0fc

origin is a self-hosted Gitea instance, so the gh CLI cannot see it. The
default assumption is GitHub, and it costs a failed command every time.

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

sulthan merged commit a587b16423 into main

2026-07-27 00:42:20 +07:00

sulthan deleted branch web-ui-revamp

2026-07-27 12:00:27 +07:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: sulthan/mangaBookmark#3