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

2 files changed, 102 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}}
diff --git a/web/templates/settings.html b/web/templates/settings.html
index a955f64..3bb143c 100644
--- a/web/templates/settings.html
+++ b/web/templates/settings.html
@@ -264,6 +264,55 @@
                 {{end}}
             </div>
         </section>
+
+        <!-- Maintenance Buckets Section -->
+        <section class="mb-12">
+            <h2 class="text-xl font-medium text-white mb-6 pb-2 border-b border-white/10">Maintenance Buckets</h2>
+            {{template "buckets-section" .}}
+            <form class="mt-4 flex flex-wrap gap-3 p-4 bg-slate-900/40 rounded-xl border border-white/5" hx-post="/settings/buckets" hx-target="#buckets-list" hx-swap="outerHTML" hx-on::after-request="if(event.detail.successful) this.reset()">
+                <input type="text" name="name" placeholder="Bucket name" required
+                       class="flex-1 bg-slate-950 border border-white/10 rounded-lg px-4 py-2 text-sm focus:ring-1 focus:ring-blue-500 outline-none">
+                <input type="number" name="cycle_days" placeholder="Cycle (days)" required min="1"
+                       class="w-32 bg-slate-950 border border-white/10 rounded-lg px-4 py-2 text-sm focus:ring-1 focus:ring-blue-500 outline-none">
+                <input type="number" name="pick_n" placeholder="Pick N" required min="1"
+                       class="w-28 bg-slate-950 border border-white/10 rounded-lg px-4 py-2 text-sm focus:ring-1 focus:ring-blue-500 outline-none">
+                <button type="submit" class="bg-blue-600 hover:bg-blue-500 text-white px-6 py-2 rounded-lg text-sm font-medium transition-colors">Create Bucket</button>
+            </form>
+        </section>
+
+        <!-- Projects Section (read-only) -->
+        <section class="mb-12">
+            <h2 class="text-xl font-medium text-white mb-6 pb-2 border-b border-white/10">Projects</h2>
+            <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+                {{if .Projects}}
+                    {{range .Projects}}
+                    <div class="card flex items-center gap-3 py-2">
+                        <span class="w-3 h-3 rounded-full flex-shrink-0" style="background-color: {{.Color}}"></span>
+                        <span class="text-sm text-slate-200 truncate">{{.Name}}</span>
+                    </div>
+                    {{end}}
+                {{else}}
+                    <div class="card col-span-full text-center text-slate-500 py-6 text-sm italic">No projects yet.</div>
+                {{end}}
+            </div>
+        </section>
+
+        <!-- Labels Section (read-only) -->
+        <section class="mb-12">
+            <h2 class="text-xl font-medium text-white mb-6 pb-2 border-b border-white/10">Labels</h2>
+            <div class="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
+                {{if .Labels}}
+                    {{range .Labels}}
+                    <div class="card flex items-center gap-3 py-2">
+                        <span class="w-3 h-3 rounded-full flex-shrink-0" style="background-color: {{.Color}}"></span>
+                        <span class="text-sm text-slate-200 truncate">{{.Name}}</span>
+                    </div>
+                    {{end}}
+                {{else}}
+                    <div class="card col-span-full text-center text-slate-500 py-6 text-sm italic">No labels assigned a color yet.</div>
+                {{end}}
+            </div>
+        </section>
     </div>
 </body>
 </html>