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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A

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/<slug>`, `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 @@
       <label>{{t "Date"}}<br>
         <input type="datetime-local" name="posted_at" value="{{.Data.post.CreatedAt.Format "2006-01-02T15:04"}}" placeholder="YYYY-MM-DD HH:MM"></label>
     </div>
-    {{if .Data.allTags}}<p class="lbl">{{t "Tags"}}</p>
-    <div class="tagpick">{{range .Data.allTags}}<label class="check"><input type="checkbox" name="tag" value="{{.Name}}"{{if index $.Data.tagged .Slug}} checked{{end}}> {{.Name}}</label>{{end}}</div>{{end}}
-    <label>{{if .Data.allTags}}{{t "New tags"}}{{else}}{{t "Tags"}}{{end}} <span class="muted">({{t "comma-separated"}})</span><br>
-      <input name="new_tags" value="{{.Data.newTags}}" maxlength="900" placeholder="{{t "go, tomatoes, recipes"}}"></label>
+    <label for="post-tags">{{t "Tags"}} <span class="muted">({{t "comma-separated"}})</span><br>
+      <input id="post-tags" name="tags" value="{{.Data.tagsText}}" maxlength="900" placeholder="{{t "go, tomatoes, recipes"}}"></label>
+    {{if .Data.allTags}}<details class="tagref"><summary>{{tf "Your tags (%d)" (len .Data.allTags)}}</summary>
+      <p class="chips">{{range .Data.allTags}}<span class="chip" data-tag="{{.Name}}">{{.Name}}</span> {{end}}</p>
+    </details>{{end}}
     <p class="muted small">{{t "Tags on hidden posts are not shown on the blog; a tag nobody uses disappears."}}</p>
+    <script>
+    // The chips add or remove their tag in the box; without JS they are a plain list to copy from.
+    (function () {
+      var box = document.getElementById('post-tags'), chips = document.querySelectorAll('.chip');
+      if (!box || !chips.length) return;
+      function list() { return box.value.split(',').map(function (s) { return s.trim(); }).filter(Boolean); }
+      function has(l, t) { t = t.toLowerCase(); return l.some(function (x) { return x.toLowerCase() === t; }); }
+      function mark() { var l = list(); for (var i = 0; i < chips.length; i++) chips[i].className = has(l, chips[i].getAttribute('data-tag')) ? 'chip on' : 'chip'; }
+      for (var i = 0; i < chips.length; i++) chips[i].onclick = function () {
+        var t = this.getAttribute('data-tag'), l = list();
+        l = has(l, t) ? l.filter(function (x) { return x.toLowerCase() !== t.toLowerCase(); }) : l.concat([t]);
+        box.value = l.join(', '); mark();
+      };
+      box.addEventListener('input', mark);
+      document.querySelector('.tagref').className += ' live'; mark();
+    })();
+    </script>
     <label for="ed-body">{{t "Content"}} <span class="muted">(Markdown)</span></label>
     {{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)}}
     <label class="check"><input type="checkbox" name="published"{{if .Data.post.Published}} checked{{end}}> {{t "Visible on the blog"}}</label>
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)
 	}
 }