From a6d245c25e05ebce88b753a3f0a2b8e643b9be81 Mon Sep 17 00:00:00 2001
From: Sulthan Zaki <sultankiki05@gmail.com>
Date: Thu, 30 Jul 2026 22:25:04 +0700
Subject: [PATCH] Label the chapter field for the number it holds
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The edit panel's only visible text was "Latest known: Ch 30" sitting directly
above a field pre-filled with your own progress — so on the one occasion the
form is worth opening, when those two numbers differ, the visible label named
the wrong one. Correcting a chapter number is this UI's stated primary job.

The field gets a real label ("Chapter you're on", tied by for/id, replacing the
screen-reader-only aria-label) and "Latest known" moves below it as context.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 backend/templates/card.html | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/backend/templates/card.html b/backend/templates/card.html
index 5ef6a3d..4b79804 100644
--- a/backend/templates/card.html
+++ b/backend/templates/card.html
@@ -89,13 +89,17 @@
         hx-post="/ui/bookmarks/{{.Key}}/chapter"
         hx-target="[id='card-{{.Key}}']" hx-swap="outerHTML"
         hx-indicator="[id='card-{{.Key}}']" hx-disabled-elt="input, button">
-    {{if .LatestChapter}}<p class="hint">Latest known: {{.DisplayLatest}}</p>{{end}}
+    {{/* The field holds your progress; "Latest known" is the published chapter.
+         Those are different numbers whenever this form is worth opening, so the
+         label names the field and the latest sits after it as context. */}}
+    <label class="hint" for="chapter-{{.Key}}">Chapter you're on</label>
     <div class="field">
       {{/* max is a fat-finger guard, not a real ceiling — no series is near it. */}}
-      <input name="chapter" type="number" step="0.1" min="0" max="9999"
-             value="{{.LastChapterNum}}" aria-label="Chapter number" required>
+      <input id="chapter-{{.Key}}" name="chapter" type="number" step="0.1" min="0" max="9999"
+             value="{{.LastChapterNum}}" required>
       <button type="submit">Save</button>
     </div>
+    {{if .LatestChapter}}<p class="hint">Latest known: {{.DisplayLatest}}</p>{{end}}
   </form>
   {{/* One confirm row per way a series leaves the list. aria-live announces the
        step to a screen reader, which otherwise gets no word that the tap