From bc4149d7c9fe7a698cf07895b504ab8f2b26f649 Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Fri, 23 Jan 2026 10:29:02 -1000
Subject: UI improvements: styling and layout fixes

- Prefill first store in shopping quick-add
- Tone down overdue/priority styling (red -> amber)
- Remove quick-add panel from tasks tab (use modal instead)
- Increase card opacity for better readability
- Swap task/event formatting (tasks get cards, events get border-l-4)
- Add grid layout for tasks (2-3 columns on wider screens)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 web/templates/index.html                 |  7 ++-
 web/templates/partials/planning-tab.html | 38 ++++++++------
 web/templates/partials/tasks-tab.html    | 90 ++++----------------------------
 3 files changed, 37 insertions(+), 98 deletions(-)

(limited to 'web/templates')

diff --git a/web/templates/index.html b/web/templates/index.html
index 32c0857..050f0bf 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -144,7 +144,7 @@
                             id="shopping-list-select"
                             class="w-full bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white mb-3"
                             required>
-                        <option value="">Select store...</option>
+                        <option value="">Loading stores...</option>
                     </select>
                     <button type="submit"
                             class="w-full bg-green-900/50 hover:bg-green-900/70 text-green-300 px-4 py-2 rounded-lg text-sm font-medium">
@@ -224,7 +224,10 @@
                 fetch('/partials/shopping-lists')
                     .then(function(r) { return r.text(); })
                     .then(function(html) {
-                        select.innerHTML = '<option value="">Select store...</option>' + html;
+                        select.innerHTML = html;
+                        if (select.options.length > 0) {
+                            select.selectedIndex = 0;
+                        }
                     })
                     .catch(function(e) { console.error('Failed to load shopping lists:', e); });
             }
diff --git a/web/templates/partials/planning-tab.html b/web/templates/partials/planning-tab.html
index 17879ff..77bd3d8 100644
--- a/web/templates/partials/planning-tab.html
+++ b/web/templates/partials/planning-tab.html
@@ -6,23 +6,31 @@
         <h2 class="text-xl font-semibold mb-4 flex items-center gap-2 text-shadow-sm">
             <span>📅</span> Upcoming Events
         </h2>
-        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        <div class="space-y-2">
             {{range .Events}}
-            <a href="{{.HTMLLink}}" target="_blank" class="block bg-white/5 hover:bg-white/10 transition-colors rounded-lg p-3 border border-white/5 group">
-                <div class="flex justify-between items-start mb-1">
-                    <h3 class="font-medium text-white group-hover:text-primary-300 transition-colors truncate">{{.Summary}}</h3>
-                    <span class="text-xs text-white/50 bg-white/10 px-1.5 py-0.5 rounded">{{.Start.Format "Jan 2"}}</span>
+            <a href="{{.HTMLLink}}" target="_blank" class="task-item border-l-4 border-blue-500 block group">
+                <div class="flex items-start gap-3 p-3 sm:p-4">
+                    <span class="text-lg flex-shrink-0">📅</span>
+                    <div class="flex-1 min-w-0">
+                        <div class="flex items-start justify-between gap-2">
+                            <h3 class="text-sm text-white font-medium break-words group-hover:underline">{{.Summary}}</h3>
+                            <svg class="w-4 h-4 text-white/50 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+                            </svg>
+                        </div>
+                        <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-white/50">
+                            <span>{{.Start.Format "Jan 2"}}</span>
+                            {{if eq (.Start.Format "15:04") "00:00"}}
+                            <span>All Day</span>
+                            {{else}}
+                            <span>{{.Start.Format "3:04 PM"}} - {{.End.Format "3:04 PM"}}</span>
+                            {{end}}
+                        </div>
+                        {{if .Description}}
+                        <p class="text-xs text-white/40 mt-1 line-clamp-2">{{.Description}}</p>
+                        {{end}}
+                    </div>
                 </div>
-                <div class="text-xs text-white/60 mb-1">
-                    {{if eq (.Start.Format "15:04") "00:00"}}
-                        All Day
-                    {{else}}
-                        {{.Start.Format "3:04 PM"}} - {{.End.Format "3:04 PM"}}
-                    {{end}}
-                </div>
-                {{if .Description}}
-                <p class="text-xs text-white/40 line-clamp-2">{{.Description}}</p>
-                {{end}}
             </a>
             {{end}}
         </div>
diff --git a/web/templates/partials/tasks-tab.html b/web/templates/partials/tasks-tab.html
index 92e7979..db986bb 100644
--- a/web/templates/partials/tasks-tab.html
+++ b/web/templates/partials/tasks-tab.html
@@ -4,95 +4,23 @@
      hx-trigger="refresh-tasks from:body"
      hx-target="#tab-content"
      hx-swap="innerHTML">
-    <!-- Quick Add Form - Collapsible -->
-    <section class="card">
-        <button type="button"
-                onclick="document.getElementById('quick-add-form').classList.toggle('hidden')"
-                class="w-full p-3 sm:p-4 text-left flex justify-between items-center">
-            <span class="font-medium text-white">+ Quick Add</span>
-            <svg class="w-4 h-4 text-white/50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
-        </button>
-        <form id="quick-add-form"
-              class="hidden p-3 sm:p-4 pt-0 border-t border-white/10"
-              hx-post="/unified-add"
-              hx-swap="none"
-              hx-on::after-request="if(event.detail.successful) { this.reset(); document.getElementById('trello-fields').style.display = 'none'; }">
-            <div class="flex flex-wrap gap-2 items-end">
-                <div class="flex-1 min-w-[150px]">
-                    <input type="text"
-                           name="title"
-                           placeholder="Task name..."
-                           class="w-full bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 focus:ring-2 focus:ring-white/30 focus:border-white/30"
-                           required>
-                </div>
-                <div>
-                    <input type="date"
-                           name="due_date"
-                           id="quick-add-date"
-                           class="bg-black/40 border border-white/20 rounded-lg px-2 py-2 text-sm text-white focus:ring-2 focus:ring-white/30">
-                    <script>
-                        (function() {
-                            var d = new Date();
-                            var dateStr = d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
-                            document.getElementById('quick-add-date').value = dateStr;
-                        })();
-                    </script>
-                </div>
-                <div>
-                    <select name="source"
-                            class="bg-black/40 border border-white/20 rounded-lg px-2 py-2 text-sm text-white focus:ring-2 focus:ring-white/30"
-                            onchange="document.getElementById('trello-fields').style.display = this.value === 'trello' ? 'flex' : 'none'">
-                        <option value="todoist">Todoist</option>
-                        <option value="trello">Trello</option>
-                    </select>
-                </div>
-                <button type="submit"
-                        class="bg-white/20 hover:bg-white/30 text-white px-3 py-2 rounded-lg transition-colors font-medium text-sm">
-                    Add
-                </button>
-            </div>
-
-            <!-- Trello Fields (Hidden by default) -->
-            <div id="trello-fields" class="flex flex-wrap gap-2 mt-3" style="display: none;">
-                <div>
-                    <select name="board_id"
-                            class="bg-black/40 border border-white/20 rounded-lg px-2 py-2 text-sm text-white"
-                            hx-get="/partials/lists"
-                            hx-target="#list-select"
-                            hx-trigger="change"
-                            hx-swap="innerHTML">
-                        <option value="">Select Board...</option>
-                        {{range .Boards}}
-                        <option value="{{.ID}}">{{.Name}}</option>
-                        {{end}}
-                    </select>
-                </div>
-                <div>
-                    <select id="list-select" name="list_id" class="bg-black/40 border border-white/20 rounded-lg px-2 py-2 text-sm text-white">
-                        <option value="">Select List...</option>
-                    </select>
-                </div>
-            </div>
-        </form>
-    </section>
-
     <!-- Tasks List -->
     {{if .Atoms}}
-    <div class="space-y-2">
+    <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
         {{range .Atoms}}
-        <div class="task-item border-l-4 {{.ColorClass}} {{if .IsFuture}}opacity-60{{end}}">
+        <div class="bg-white/5 hover:bg-white/10 transition-colors rounded-lg border border-white/5 {{if .IsFuture}}opacity-60{{end}}">
             <div class="flex items-start gap-2 sm:gap-3 p-3 sm:p-4">
                 <!-- Checkbox for completing -->
                 <input type="checkbox"
                        hx-post="/complete-atom"
                        hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"}'
-                       hx-target="closest .task-item"
+                       hx-target="closest div.rounded-lg"
                        hx-swap="outerHTML"
                        class="mt-1 h-5 w-5 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer flex-shrink-0">
                 <span class="text-lg flex-shrink-0">{{.SourceIcon}}</span>
                 <div class="flex-1 min-w-0">
                     <div class="flex items-start justify-between gap-2">
-                        <h3 class="text-sm {{if .IsOverdue}}text-red-400 font-semibold{{else if .IsFuture}}text-white/50 font-normal{{else}}text-white font-medium{{end}} break-words cursor-pointer hover:underline"
+                        <h3 class="text-sm {{if .IsOverdue}}text-amber-300 font-medium{{else if .IsFuture}}text-white/50 font-normal{{else}}text-white font-medium{{end}} break-words cursor-pointer hover:underline"
                             hx-get="/tasks/detail?id={{.ID}}&source={{.Source}}"
                             hx-target="#task-edit-content"
                             hx-swap="innerHTML"
@@ -107,10 +35,10 @@
                     </div>
                     <div class="flex flex-wrap items-center gap-2 mt-1 text-xs text-white/50">
                         {{if .DueDate}}
-                        <span class="{{if .IsOverdue}}text-red-400 font-medium{{end}}">{{.DueDate.Format "Jan 2"}}{{if .HasSetTime}}, {{.DueDate.Format "3:04pm"}}{{end}}</span>
+                        <span class="{{if .IsOverdue}}text-amber-300/80{{end}}">{{.DueDate.Format "Jan 2"}}{{if .HasSetTime}}, {{.DueDate.Format "3:04pm"}}{{end}}</span>
                         {{end}}
                         {{if gt .Priority 2}}
-                        <span class="text-red-400 font-medium">P{{.Priority}}</span>
+                        <span class="text-amber-300/80">P{{.Priority}}</span>
                         {{end}}
                         {{if .Description}}
                         <span class="text-white/40">+details</span>
@@ -140,14 +68,14 @@
             <span>+{{len .FutureAtoms}} later</span>
             <svg class="w-4 h-4 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
         </summary>
-        <div class="space-y-2 mt-2">
+        <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 mt-2">
             {{range .FutureAtoms}}
-            <div class="task-item border-l-4 {{.ColorClass}} opacity-60">
+            <div class="bg-white/5 hover:bg-white/10 transition-colors rounded-lg border border-white/5 opacity-60">
                 <div class="flex items-start gap-2 sm:gap-3 p-3 sm:p-4">
                     <input type="checkbox"
                            hx-post="/complete-atom"
                            hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"}'
-                           hx-target="closest .task-item"
+                           hx-target="closest div.bg-white\\/5"
                            hx-swap="outerHTML"
                            class="mt-1 h-5 w-5 rounded bg-black/40 border-white/30 text-white/80 focus:ring-white/30 cursor-pointer flex-shrink-0">
                     <span class="text-lg flex-shrink-0">{{.SourceIcon}}</span>
-- 
cgit v1.2.3