Fix UI bugs and add Timeline view

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>

7 files changed, 269 insertions, 3 deletions

diff --git a/internal/handlers/handlers.go b/internal/handlers/handlers.go
index 4d38f72..366402e 100644
--- a/internal/handlers/handlers.go
+++ b/internal/handlers/handlers.go
@@ -1046,7 +1046,7 @@ func (h *Handler) HandleTabPlanning(w http.ResponseWriter, r *http.Request) {
 			End:        event.End,
 			URL:        event.HTMLLink,
 			Source:     "calendar",
-			SourceIcon: "📅",
+			SourceIcon: "🗓️",
 		}
 
 		if event.Start.Before(tomorrow) {
diff --git a/internal/handlers/timeline.go b/internal/handlers/timeline.go
new file mode 100644
index 0000000..b923d3e
--- /dev/null
+++ b/internal/handlers/timeline.go
@@ -0,0 +1,59 @@
+package handlers
+
+import (
+	"net/http"
+	"strconv"
+	"time"
+
+	"task-dashboard/internal/models"
+)
+
+// HandleTimeline renders the timeline view
+func (h *Handler) HandleTimeline(w http.ResponseWriter, r *http.Request) {
+	// Parse query params
+	startStr := r.URL.Query().Get("start")
+	daysStr := r.URL.Query().Get("days")
+
+	var start time.Time
+	if startStr != "" {
+		parsed, err := time.ParseInLocation("2006-01-02", startStr, time.Local)
+		if err == nil {
+			start = parsed
+		} else {
+			start = time.Now()
+		}
+	} else {
+		start = time.Now()
+	}
+
+	// Normalize start to beginning of day
+	start = time.Date(start.Year(), start.Month(), start.Day(), 0, 0, 0, 0, start.Location())
+
+	days := 3 // Default
+	if daysStr != "" {
+		if d, err := strconv.Atoi(daysStr); err == nil && d > 0 {
+			days = d
+		}
+	}
+
+	end := start.AddDate(0, 0, days)
+
+	// Call BuildTimeline
+	items, err := BuildTimeline(r.Context(), h.store, h.googleCalendarClient, start, end)
+	if err != nil {
+		JSONError(w, http.StatusInternalServerError, "Failed to build timeline", err)
+		return
+	}
+
+	data := struct {
+		Items []models.TimelineItem
+		Start time.Time
+		Days  int
+	}{
+		Items: items,
+		Start: start,
+		Days:  days,
+	}
+
+	HTMLResponse(w, h.templates, "timeline-tab", data)
+}
diff --git a/internal/handlers/timeline_logic.go b/internal/handlers/timeline_logic.go
new file mode 100644
index 0000000..1aba780
--- /dev/null
+++ b/internal/handlers/timeline_logic.go
@@ -0,0 +1,110 @@
+package handlers
+
+import (
+	"context"
+	"sort"
+	"time"
+
+	"task-dashboard/internal/api"
+	"task-dashboard/internal/models"
+	"task-dashboard/internal/store"
+)
+
+// BuildTimeline aggregates and normalizes data into a timeline structure
+func BuildTimeline(ctx context.Context, s *store.Store, calendarClient api.GoogleCalendarAPI, start, end time.Time) ([]models.TimelineItem, error) {
+	var items []models.TimelineItem
+
+	// 1. Fetch Tasks
+	tasks, err := s.GetTasksByDateRange(start, end)
+	if err != nil {
+		return nil, err
+	}
+	for _, task := range tasks {
+		if task.DueDate == nil {
+			continue
+		}
+		items = append(items, models.TimelineItem{
+			ID:           task.ID,
+			Type:         models.TimelineItemTypeTask,
+			Title:        task.Content,
+			Time:         *task.DueDate,
+			Description:  task.Description,
+			URL:          task.URL,
+			OriginalItem: task,
+		})
+	}
+
+	// 2. Fetch Meals
+	meals, err := s.GetMealsByDateRange(start, end)
+	if err != nil {
+		return nil, err
+	}
+	for _, meal := range meals {
+		mealTime := meal.Date
+		// Apply Meal Defaults
+		switch meal.MealType {
+		case "breakfast":
+			mealTime = time.Date(mealTime.Year(), mealTime.Month(), mealTime.Day(), 8, 0, 0, 0, mealTime.Location())
+		case "lunch":
+			mealTime = time.Date(mealTime.Year(), mealTime.Month(), mealTime.Day(), 12, 0, 0, 0, mealTime.Location())
+		case "dinner":
+			mealTime = time.Date(mealTime.Year(), mealTime.Month(), mealTime.Day(), 19, 0, 0, 0, mealTime.Location())
+		default:
+			mealTime = time.Date(mealTime.Year(), mealTime.Month(), mealTime.Day(), 12, 0, 0, 0, mealTime.Location())
+		}
+
+		items = append(items, models.TimelineItem{
+			ID:           meal.ID,
+			Type:         models.TimelineItemTypeMeal,
+			Title:        meal.RecipeName,
+			Time:         mealTime,
+			URL:          meal.RecipeURL,
+			OriginalItem: meal,
+		})
+	}
+
+	// 3. Fetch Cards
+	cards, err := s.GetCardsByDateRange(start, end)
+	if err != nil {
+		return nil, err
+	}
+	for _, card := range cards {
+		if card.DueDate == nil {
+			continue
+		}
+		items = append(items, models.TimelineItem{
+			ID:           card.ID,
+			Type:         models.TimelineItemTypeCard,
+			Title:        card.Name,
+			Time:         *card.DueDate,
+			URL:          card.URL,
+			OriginalItem: card,
+		})
+	}
+
+	// 4. Fetch Events
+	if calendarClient != nil {
+		events, err := calendarClient.GetEventsByDateRange(ctx, start, end)
+		if err == nil {
+			for _, event := range events {
+				items = append(items, models.TimelineItem{
+					ID:           event.ID,
+					Type:         models.TimelineItemTypeEvent,
+					Title:        event.Summary,
+					Time:         event.Start,
+					EndTime:      &event.End,
+					Description:  event.Description,
+					URL:          event.HTMLLink,
+					OriginalItem: event,
+				})
+			}
+		}
+	}
+
+	// Sort items by Time
+	sort.Slice(items, func(i, j int) bool {
+		return items[i].Time.Before(items[j].Time)
+	})
+
+	return items, nil
+}
diff --git a/internal/models/timeline.go b/internal/models/timeline.go
new file mode 100644
index 0000000..4a619fa
--- /dev/null
+++ b/internal/models/timeline.go
@@ -0,0 +1,23 @@
+package models
+
+import "time"
+
+type TimelineItemType string
+
+const (
+	TimelineItemTypeTask  TimelineItemType = "task"
+	TimelineItemTypeMeal  TimelineItemType = "meal"
+	TimelineItemTypeCard  TimelineItemType = "card"
+	TimelineItemTypeEvent TimelineItemType = "event"
+)
+
+type TimelineItem struct {
+	ID           string           `json:"id"`
+	Type         TimelineItemType `json:"type"`
+	Title        string           `json:"title"`
+	Time         time.Time        `json:"time"`
+	EndTime      *time.Time       `json:"end_time,omitempty"`
+	Description  string           `json:"description,omitempty"`
+	URL          string           `json:"url,omitempty"`
+	OriginalItem interface{}      `json:"-"`
+}
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}}