Work the design critique down: chapter format, colour law, search, strip, a11y (#11)
Two rounds of design-critique fixes on the web UI. Every visual change was verified at 390x844 and 1280x900 in both dark and light with screenshots; `go test ./...` is green throughout; no new dependencies. ## Earlier commits on this branch The two oldest commits predate this session and were never opened as their own PR, so they are under review here too: - Confirm-gate the lifecycle actions, cluster the action strip by consequence. - Fix the accessibility findings from the audit: contrast, focus, reduced motion. ## The rest **Chapter format.** The userscript and the poller both write `"Chapter N"`, and the templates prefixed `Ch ` again, so every real Asura row read `Ch Chapter 250` — while a manual edit stored a bare `250`, leaving two formats in one list. `DisplayChapter`/`DisplayLatest` on `Bookmark` now strip the lead-in and re-add exactly one `Ch `. **Zero-result search.** The client filter only toggled `card.hidden`, so a query matching nothing left a blank list under a fully populated, unfiltered "Continue reading" strip. There is now a no-match state with a Clear-search button, and the strip goes down while a filter is active. **The colour law.** `--ember` is documented as meaning "new chapter" and was spent on eight things, including setting "Nothing new." in the colour reserved for new chapters. Destruction moves to a new `--danger` token; text-input focus follows the searchbar idiom and turns `--paper`. Contrast, both themes: `--danger` on the page 4.82 / 6.65, the solid Remove button 4.94 / 7.30, the confirm question 9.00 / 7.98. **The remove confirm.** Buttons 40px 8px apart became 46px 12px apart, and the question names the series and the loss instead of asking "Remove this?". It opens with **Cancel** focused, not Remove — the two reversible rows still open on their affirmative. **The recent strip.** It was the head of the same `updated_at DESC` list rendered directly below it, on every tab, costing ~240px of the first phone screen. It is now scoped to series with a chapter waiting, and only on All. With nothing new anywhere it does not render — deliberate. **Stale chrome.** The strip and the Updated badge describe the whole library but live outside the swapped `#list`, so archiving a series left it under "Continue reading" with the badge still counting it, and `/?tab=all` reached by htmx differed from the same URL reloaded. Both regions move into `chrome.html` and refresh out of band on every mutation and every tab switch. **Accessibility and touch.** Esc closes any open panel and returns focus to the cell that owns it; opening a confirm moves focus into it; the inline error scrolls into view and no longer self-destructs after 5s; every tab and desktop action cell clears 44px; `role="alert"` on the login error; the card monogram is no longer announced; the busy bar is clipped by its own travel rather than by `overflow: hidden` on the card. **Chapter form label.** The panel's only visible text named the published chapter while the field held your progress. The field gets a real label; "Latest known" moves below it. **gzip.** Nothing was compressed. A stdlib middleware handles the four text types and leaves woff2 alone: style.css 21.8 -> 6.5 KB, htmx 50.9 -> 16.4, filter.js 7.6 -> 2.9. ## Not addressed The `role="status"` error slot is still mutated while hidden and then revealed, which is the non-announcing pattern the confirm rows were fixed for. Delete is still a silent vanish. Both are flagged in the critique snapshot under `.impeccable/critique/`. Design health went 24/36 (66.7%) to 29/40 (72.5%) between snapshots; the two P1s that survived were found and fixed after that run. Reviewed-on: #11 Co-authored-by: Sulthan Zaki <sultankiki05@gmail.com> Co-committed-by: Sulthan Zaki <sultankiki05@gmail.com>
This commit was merged in pull request #11.
This commit is contained in:
@@ -5,6 +5,7 @@ import (
|
||||
"errors"
|
||||
"fmt"
|
||||
"regexp"
|
||||
"strconv"
|
||||
"strings"
|
||||
|
||||
_ "modernc.org/sqlite"
|
||||
@@ -41,6 +42,41 @@ func (b Bookmark) HasNewChapter() bool {
|
||||
return b.LatestChapterNum != nil && *b.LatestChapterNum > b.LastChapterNum
|
||||
}
|
||||
|
||||
// chapterLeadIn matches the prefix the userscript and the poller both write
|
||||
// ("Chapter 250"), so the UI can add exactly one "Ch " of its own instead of
|
||||
// doubling it. A manual edit through the web UI stores a bare "250", which is
|
||||
// the same string minus the lead-in.
|
||||
var chapterLeadIn = regexp.MustCompile(`(?i)^\s*(?:chapter|ch\.?)\s*`)
|
||||
|
||||
func displayChapter(raw string, num float64) string {
|
||||
rest := strings.TrimSpace(chapterLeadIn.ReplaceAllString(raw, ""))
|
||||
if rest == "" {
|
||||
rest = strconv.FormatFloat(num, 'f', -1, 64)
|
||||
}
|
||||
// "Ch " only makes sense in front of a number; anything else is a label the
|
||||
// site gave us, so pass it through as written.
|
||||
if rest[0] < '0' || rest[0] > '9' {
|
||||
return rest
|
||||
}
|
||||
return "Ch " + rest
|
||||
}
|
||||
|
||||
// DisplayChapter is the read-progress line: one canonical "Ch N" whatever
|
||||
// format the write came in as.
|
||||
func (b Bookmark) DisplayChapter() string {
|
||||
return displayChapter(b.LastChapter, b.LastChapterNum)
|
||||
}
|
||||
|
||||
// DisplayLatest is the same for the newest published chapter, which arrives
|
||||
// with the same "Chapter N" lead-in from both the userscript and the poller.
|
||||
func (b Bookmark) DisplayLatest() string {
|
||||
var num float64
|
||||
if b.LatestChapterNum != nil {
|
||||
num = *b.LatestChapterNum
|
||||
}
|
||||
return displayChapter(b.LatestChapter, num)
|
||||
}
|
||||
|
||||
// ContinueURL is where the Continue button points: the chapter last read, or
|
||||
// the series page when no chapter URL was ever captured.
|
||||
func (b Bookmark) ContinueURL() string {
|
||||
|
||||
Reference in New Issue
Block a user