From 22efca3118676926dec4af74fe8e225606063a35 Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Sat, 24 Jan 2026 20:28:15 -1000
Subject: Fix UI bugs and add Timeline view
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bug fixes:
- #25: Replace 📅 with 🗓️ to avoid misleading date display
- #30: Standardize background opacity (shopping items now use bg-white/5)

New feature:
- #11: Add Timeline view showing chronological events/tasks/meals

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 web/templates/index.html                 |  2 +-
 web/templates/partials/shopping-tab.html |  2 +-
 web/templates/partials/timeline-tab.html | 74 ++++++++++++++++++++++++++++++++
 3 files changed, 76 insertions(+), 2 deletions(-)
 create mode 100644 web/templates/partials/timeline-tab.html

(limited to 'web')

diff --git a/web/templates/index.html b/web/templates/index.html
index a5a7f38..9687884 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -62,7 +62,7 @@
                     hx-target="#tab-content"
                     hx-push-url="?tab=timeline"
                     onclick="setActiveTab(this)">
-                    📅 Timeline
+                    🗓️ Timeline
                 </button>
                 <button
                     class="tab-button {{if eq .ActiveTab "shopping"}}tab-button-active{{end}}"
diff --git a/web/templates/partials/shopping-tab.html b/web/templates/partials/shopping-tab.html
index 2362eef..19c570f 100644
--- a/web/templates/partials/shopping-tab.html
+++ b/web/templates/partials/shopping-tab.html
@@ -13,7 +13,7 @@
             {{if .Name}}<h3 class="text-sm text-white/60 mb-2 uppercase tracking-wide">{{.Name}}</h3>{{end}}
             <ul class="space-y-2">
                 {{range .Items}}
-                <li class="flex items-center gap-3 p-3 bg-black/30 rounded-lg {{if .Checked}}opacity-50{{end}}">
+                <li class="flex items-center gap-3 p-3 bg-white/5 hover:bg-white/10 transition-colors rounded-lg border border-white/5 {{if .Checked}}opacity-50{{end}}">
                     <input type="checkbox" {{if .Checked}}checked{{end}}
                            hx-post="/shopping/toggle"
                            hx-vals='{"id":"{{.ID}}","source":"{{.Source}}","checked":{{if .Checked}}false{{else}}true{{end}}}'
diff --git a/web/templates/partials/timeline-tab.html b/web/templates/partials/timeline-tab.html
new file mode 100644
index 0000000..e73a643
--- /dev/null
+++ b/web/templates/partials/timeline-tab.html
@@ -0,0 +1,74 @@
+{{define "timeline-tab"}}
+<div class="space-y-6 text-shadow-sm"
+     hx-get="/tabs/timeline"
+     hx-trigger="refresh-tasks from:body"
+     hx-target="#tab-content"
+     hx-swap="innerHTML">
+
+    {{$currentDay := ""}}
+    {{range .Items}}
+        {{$day := .Time.Format "Monday, January 2"}}
+        {{if ne $day $currentDay}}
+            {{if ne $currentDay ""}}
+                </div> <!-- Close previous day items -->
+            </div> <!-- Close previous day container -->
+            {{end}}
+            {{$currentDay = $day}}
+            <div>
+                <h2 class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90 sticky top-0 bg-black/20 backdrop-blur-md py-2 z-10 rounded-lg px-2">
+                    <span>🗓️</span> {{$day}}
+                </h2>
+                <div class="space-y-2 relative pl-4 border-l border-white/10 ml-2">
+        {{end}}
+
+        <div class="bg-white/5 hover:bg-white/10 transition-colors rounded-lg border border-white/5 relative">
+            <!-- Time Indicator -->
+            <div class="absolute -left-[21px] top-4 w-2.5 h-2.5 rounded-full 
+                {{if eq .Type "event"}}bg-blue-500{{else if eq .Type "meal"}}bg-orange-500{{else if eq .Type "task"}}bg-green-500{{else}}bg-purple-500{{end}}">
+            </div>
+
+            <div class="flex items-start gap-3 p-3">
+                <div class="flex flex-col items-center min-w-[60px] text-xs text-white/50 pt-0.5">
+                    <span class="font-medium text-white/80">{{.Time.Format "3:04 PM"}}</span>
+                    {{if .EndTime}}
+                        <span class="text-[10px] opacity-70">{{.EndTime.Format "3:04 PM"}}</span>
+                    {{end}}
+                </div>
+                
+                <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">{{.Title}}</h3>
+                        {{if .URL}}
+                        <a href="{{.URL}}" target="_blank" class="text-white/50 hover:text-white flex-shrink-0">
+                            <svg class="w-4 h-4" 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>
+                        </a>
+                        {{end}}
+                    </div>
+                    
+                    {{if .Description}}
+                    <p class="text-xs text-white/50 mt-1 line-clamp-2">{{.Description}}</p>
+                    {{end}}
+
+                    <div class="flex items-center gap-2 mt-2">
+                        <span class="text-[10px] px-1.5 py-0.5 rounded bg-white/10 text-white/60 uppercase tracking-wider">
+                            {{.Type}}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {{end}}
+    
+    {{if ne $currentDay ""}}
+        </div> <!-- Close last day items -->
+    </div> <!-- Close last day container -->
+    {{else}}
+        <div class="text-center py-8 text-white/50">
+            <p>No items found for the selected range.</p>
+        </div>
+    {{end}}
+
+</div>
+{{end}}
-- 
cgit v1.2.3