From 628dcb814ece6335667e2b719049728aa161d8c9 Mon Sep 17 00:00:00 2001 From: grm Date: Tue, 15 Sep 2026 23:17:17 +0300 Subject: Make the post form's tag input a box with a folded list of chips A checkbox per existing tag stops working once a blog has dozens of them. The form is now one comma-separated box, prefilled with the post's tags, and the blog's tags sit folded under it as chips; a small script toggles a clicked chip in the box, and without it the chips are a plain list to copy from. Co-Authored-By: Claude Opus 5 Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A --- AGENTS.md | 10 ++++++---- internal/i18n/el.go | 20 +++++++++---------- internal/web/handlers_posts.go | 7 +++---- internal/web/static/dashboard.css | 11 +++++++---- internal/web/tags.go | 12 ++++++------ internal/web/templates/dashboard/post_form.html | 26 +++++++++++++++++++++---- internal/web/web_test.go | 4 ++-- 7 files changed, 56 insertions(+), 34 deletions(-) diff --git a/AGENTS.md b/AGENTS.md index 974fc10..18bc043 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -278,10 +278,12 @@ internal/web/ server.go (host router, middleware, render helpers) the URL (`/tag/`, `handleBlogTag`, published posts of every page, paginated) and the dedupe key — "Go" and "go" are one tag, the first spelling wins. `Post.Tags` rides along in `postCols` as two arrays. - The post form offers the blog's existing tags as checkboxes (`tag`) plus - a comma-separated `new_tags` box; `parseTags` normalises both into one - list (20 per post, 40 runes each; nothing slug-worthy → dropped) and - `SetPostTags` stores it after the post is saved. Tags no post carries + The post form is one comma-separated `tags` box (prefilled by + `tagsText`); the blog's existing tags sit folded under it as chips that + a small inline script toggles in the box (a plain list without JS). + `parseTags` normalises the box (20 per post, 40 runes each; nothing + slug-worthy → dropped) and `SetPostTags` stores it after the post is + saved. Tags no post carries are deleted (`deleteOrphanTags`, also after post/page deletion), so the form only lists tags in use. `TagCounts` counts published posts only: a tag on hidden posts alone shows nowhere public and its page is a 404. diff --git a/internal/i18n/el.go b/internal/i18n/el.go index 0b63d38..c4f0fac 100644 --- a/internal/i18n/el.go +++ b/internal/i18n/el.go @@ -86,16 +86,16 @@ var el = map[string]string{ "Back to posts": "Πίσω στις δημοσιεύσεις", "Post deleted.": "Η δημοσίευση διαγράφηκε.", "the post “%s”": "τη δημοσίευση «%s»", - "Title is required (max 200 characters).": "Ο τίτλος είναι υποχρεωτικός (έως 200 χαρακτήρες).", - "Slug may only contain lowercase letters, digits and dashes.": "Η διεύθυνση επιτρέπει μόνο πεζά λατινικά γράμματα, ψηφία και παύλες.", - "Pick a page for this post.": "Επιλέξτε σελίδα για τη δημοσίευση.", - "Post is too long (200 KB max).": "Η δημοσίευση είναι πολύ μεγάλη (έως 200 KB).", - "Enter the date as YYYY-MM-DD HH:MM.": "Γράψτε την ημερομηνία ως ΕΕΕΕ-ΜΜ-ΗΗ ΩΩ:ΛΛ.", - "A post with that slug already exists on this page; choose another slug.": "Υπάρχει ήδη δημοσίευση με αυτή τη διεύθυνση στη σελίδα· διαλέξτε άλλη.", - "Saved. Refresh your blog to see it.": "Αποθηκεύτηκε. Ανανεώστε το ιστολόγιό σας για να το δείτε.", - "New tags": "Νέες ετικέτες", - "comma-separated": "χωρισμένες με κόμμα", - "go, tomatoes, recipes": "go, ντομάτες, συνταγές", + "Title is required (max 200 characters).": "Ο τίτλος είναι υποχρεωτικός (έως 200 χαρακτήρες).", + "Slug may only contain lowercase letters, digits and dashes.": "Η διεύθυνση επιτρέπει μόνο πεζά λατινικά γράμματα, ψηφία και παύλες.", + "Pick a page for this post.": "Επιλέξτε σελίδα για τη δημοσίευση.", + "Post is too long (200 KB max).": "Η δημοσίευση είναι πολύ μεγάλη (έως 200 KB).", + "Enter the date as YYYY-MM-DD HH:MM.": "Γράψτε την ημερομηνία ως ΕΕΕΕ-ΜΜ-ΗΗ ΩΩ:ΛΛ.", + "A post with that slug already exists on this page; choose another slug.": "Υπάρχει ήδη δημοσίευση με αυτή τη διεύθυνση στη σελίδα· διαλέξτε άλλη.", + "Saved. Refresh your blog to see it.": "Αποθηκεύτηκε. Ανανεώστε το ιστολόγιό σας για να το δείτε.", + "Your tags (%d)": "Οι ετικέτες σας (%d)", + "comma-separated": "χωρισμένες με κόμμα", + "go, tomatoes, recipes": "go, ντομάτες, συνταγές", "Tags on hidden posts are not shown on the blog; a tag nobody uses disappears.": "Οι ετικέτες κρυφών δημοσιεύσεων δεν εμφανίζονται στο ιστολόγιο· μια ετικέτα που δεν χρησιμοποιείται πουθενά εξαφανίζεται.", "Tags: at most 20 per post, 40 characters each.": "Ετικέτες: έως 20 ανά δημοσίευση, 40 χαρακτήρες η καθεμία.", diff --git a/internal/web/handlers_posts.go b/internal/web/handlers_posts.go index 16d9cf2..ad0a241 100644 --- a/internal/web/handlers_posts.go +++ b/internal/web/handlers_posts.go @@ -69,7 +69,7 @@ func (s *Server) handlePostForm(w http.ResponseWriter, r *http.Request) { } else if hp, err := blogStore(r).HomePage(r.Context()); err == nil { p.PageID = hp.ID } - s.render(w, r, "dashboard/post_form.html", map[string]any{"post": p, "pages": pages, "allTags": allTags, "tagged": tagSet(p.Tags), "newTags": ""}) + s.render(w, r, "dashboard/post_form.html", map[string]any{"post": p, "pages": pages, "allTags": allTags, "tagsText": tagsText(p.Tags)}) } func (s *Server) handlePostSave(w http.ResponseWriter, r *http.Request) { @@ -95,8 +95,7 @@ func (s *Server) handlePostSave(w http.ResponseWriter, r *http.Request) { p.BodyMD = strings.ReplaceAll(r.FormValue("body"), "\r\n", "\n") p.Published = r.FormValue("published") == "on" p.PageID, _ = strconv.ParseInt(r.FormValue("page_id"), 10, 64) - // The ticked existing tags and the comma-separated new ones are one list. - tags, tagsOK := parseTags(append(r.Form["tag"], strings.Split(r.FormValue("new_tags"), ",")...)) + tags, tagsOK := parseTags(strings.Split(r.FormValue("tags"), ",")) p.Tags = tags autoSlug := p.Slug == "" if autoSlug { @@ -104,7 +103,7 @@ func (s *Server) handlePostSave(w http.ResponseWriter, r *http.Request) { } fail := func(status int, msg string) { s.renderStatus(w, r, status, "dashboard/post_form.html", map[string]any{"post": p, "pages": pages, "error": msg, - "allTags": allTags, "tagged": tagSet(p.Tags), "newTags": r.FormValue("new_tags")}) + "allTags": allTags, "tagsText": r.FormValue("tags")}) } if at := strings.TrimSpace(r.FormValue("posted_at")); at != "" { // blank keeps the current date var ok bool diff --git a/internal/web/static/dashboard.css b/internal/web/static/dashboard.css index 36de479..679fdde 100644 --- a/internal/web/static/dashboard.css +++ b/internal/web/static/dashboard.css @@ -85,10 +85,13 @@ label.check { font-weight: normal; font-size: 0.95em; } label.check input { width: auto; margin: 0 0.45em 0 0; vertical-align: middle; accent-color: var(--accent); } input[type=radio], input[type=checkbox] { accent-color: var(--accent); } .row { display: flex; flex-wrap: wrap; gap: 0 1.5em; } -/* The post form's tag checklist: a label-like heading over a wrapped row of checkboxes. */ -p.lbl { margin: 0.9em 0 0.3em; font-size: 0.875em; font-weight: 500; } -.tagpick { display: flex; flex-wrap: wrap; gap: 0.2em 1.2em; margin: 0 0 0.3em; } -.tagpick label.check { margin: 0; } +/* The post form's list of existing tags, folded under the tags box; the chips are buttons only once the script runs. */ +details.tagref { margin: -0.4em 0 0.6em; font-size: 0.9em; } +details.tagref summary { cursor: pointer; color: var(--muted); } +.chips { margin: 0.4em 0 0; line-height: 2; } +.chip { display: inline-block; border: 1px solid var(--border-strong); border-radius: 999px; padding: 0 0.7em; margin: 0 0.3em 0.3em 0; line-height: 1.7; background: var(--surface-2); } +.tagref.live .chip { cursor: pointer; } +.chip.on { background: var(--accent-soft); color: var(--accent-hover); border-color: var(--accent); } .row label { flex: 1 1 12em; min-width: 12em; } button, .btn { display: inline-block; font: inherit; font-size: 0.9em; font-weight: 600; padding: 0.5em 1.05em; border: 1px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent); color: #fff; cursor: pointer; text-decoration: none; vertical-align: middle; line-height: 1.4; } button:hover, .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } diff --git a/internal/web/tags.go b/internal/web/tags.go index ba49260..f1f74e0 100644 --- a/internal/web/tags.go +++ b/internal/web/tags.go @@ -39,13 +39,13 @@ func parseTags(raw []string) (tags []store.Tag, ok bool) { return tags, len(tags) <= maxTagsPerPost } -// tagSet is the post's tags by slug, for ticking the form's checklist. -func tagSet(tags []store.Tag) map[string]bool { - out := map[string]bool{} - for _, t := range tags { - out[t.Slug] = true +// tagsText is the post's tags the way the form's box shows them. +func tagsText(tags []store.Tag) string { + names := make([]string, len(tags)) + for i, t := range tags { + names[i] = t.Name } - return out + return strings.Join(names, ", ") } // topTags orders tags by use, then name: the Tags module's list. diff --git a/internal/web/templates/dashboard/post_form.html b/internal/web/templates/dashboard/post_form.html index fd47615..ab05b34 100644 --- a/internal/web/templates/dashboard/post_form.html +++ b/internal/web/templates/dashboard/post_form.html @@ -14,11 +14,29 @@ - {{if .Data.allTags}}

{{t "Tags"}}

-
{{range .Data.allTags}}{{end}}
{{end}} - + + {{if .Data.allTags}}
{{tf "Your tags (%d)" (len .Data.allTags)}} +

{{range .Data.allTags}}{{.Name}} {{end}}

+
{{end}}

{{t "Tags on hidden posts are not shown on the blog; a tag nobody uses disappears."}}

+ {{template "editor" (dict "name" "body" "value" .Data.post.BodyMD "rows" 24 "tall" true "upload" (print "/b/" .Blog.Subdomain "/files/upload") "preview" (print "/b/" .Blog.Subdomain "/preview") "csrf" .CSRF)}} diff --git a/internal/web/web_test.go b/internal/web/web_test.go index 5ab8219..afb289a 100644 --- a/internal/web/web_test.go +++ b/internal/web/web_test.go @@ -241,8 +241,8 @@ func TestParseTags(t *testing.T) { if _, ok := parseTags(many); ok { t.Error("21 tags should be too many") } - if !tagSet(tags)["ntomates"] || tagSet(tags)["nope"] { - t.Error("tagSet") + if got := tagsText(tags); got != "Go, tomatoes plants, Ντομάτες" { + t.Errorf("tagsText: %q", got) } } -- cgit v1.2.3