Add bucket CRUD and read-only Projects/Labels to Settings page

New "Maintenance Buckets" section: create a bucket, add a pool item by
title (creates the task and assigns it in one step), remove an item,
delete a bucket (unbuckets its tasks rather than deleting them).

New read-only Projects and Labels sections (name + color swatch) --
both are simple enough that read-only is the right call on web, per
user direction, rather than duplicating the Android popup's editing
UX.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EZ7ikw2ukGJFTHE3bJS7zL

1 files changed, 53 insertions, 0 deletions

diff --git a/web/templates/partials/buckets-section.html b/web/templates/partials/buckets-section.html
new file mode 100644
index 0000000..d2f5b7e
--- /dev/null
+++ b/web/templates/partials/buckets-section.html
@@ -0,0 +1,53 @@
+{{define "buckets-section"}}
+<div id="buckets-list" class="grid gap-4">
+    {{if .Buckets}}
+        {{range .Buckets}}
+        <div class="card" id="bucket-{{.Bucket.ID}}">
+            <div class="flex items-center justify-between gap-4 mb-3">
+                <div>
+                    <strong class="text-white">{{.Bucket.Name}}</strong>
+                    <span class="text-xs text-slate-400 ml-2">every {{.Bucket.CycleDays}}d, picks {{.Bucket.PickN}}</span>
+                </div>
+                <button class="text-xs text-red-400 hover:text-red-300 transition-colors"
+                        hx-delete="/settings/buckets/{{.Bucket.ID}}"
+                        hx-target="#buckets-list"
+                        hx-swap="outerHTML"
+                        hx-confirm="Delete bucket '{{.Bucket.Name}}'? Its tasks will be kept, just unbucketed.">
+                    Delete Bucket
+                </button>
+            </div>
+
+            <div class="space-y-1 mb-3">
+                {{if .Items}}
+                    {{range .Items}}
+                    <div class="flex items-center justify-between gap-2 text-sm py-1">
+                        <span class="text-slate-200">{{.Content}}</span>
+                        <div class="flex items-center gap-3 flex-shrink-0">
+                            <span class="text-[10px] uppercase tracking-wider {{if eq .BucketState "active"}}text-green-400{{else}}text-slate-500{{end}}">{{.BucketState}}</span>
+                            <button class="text-xs text-red-400/70 hover:text-red-300 transition-colors"
+                                    hx-post="/settings/buckets/items/remove"
+                                    hx-vals='{"task_id": "{{.ID}}"}'
+                                    hx-target="#buckets-list"
+                                    hx-swap="outerHTML">
+                                Remove
+                            </button>
+                        </div>
+                    </div>
+                    {{end}}
+                {{else}}
+                    <p class="text-xs text-slate-500 italic">Pool is empty.</p>
+                {{end}}
+            </div>
+
+            <form class="flex gap-2" hx-post="/settings/buckets/{{.Bucket.ID}}/items" hx-target="#buckets-list" hx-swap="outerHTML" hx-on::after-request="if(event.detail.successful) this.reset()">
+                <input type="text" name="title" placeholder="Add a pool item..." required
+                       class="flex-1 bg-slate-950 border border-white/10 rounded-lg px-3 py-1.5 text-sm focus:ring-1 focus:ring-blue-500 outline-none">
+                <button type="submit" class="text-sm bg-slate-800 hover:bg-slate-700 text-white px-3 py-1.5 rounded-lg transition-colors">Add</button>
+            </form>
+        </div>
+        {{end}}
+    {{else}}
+        <div class="card text-center text-slate-500 py-10">No maintenance buckets yet.</div>
+    {{end}}
+</div>
+{{end}}