Implement architectural refactors for feature requests #28, #30, #31, #33-38

Phase 1: Bugs as First-Class Atoms (#28)
- Add resolved_at column to bugs table (migration 007)
- Add GetUnresolvedBugs(), ResolveBug(), UnresolveBug() store methods
- Include bugs in Tasks tab via BugToAtom() with completion toggle
- Add unit tests for bug resolution

Phase 2: Timeline as Default + Enhancements (#35, #37)
- Change default tab from tasks to timeline
- Add IsCompleted, DaySection, Source fields to TimelineItem
- Group timeline items by today/tomorrow/later sections
- Add completion checkboxes for tasks/cards, grey completed items
- Collapse tomorrow/later sections by default

Phase 3: Shopping Quick-Add (#33)
- Add user_shopping_items table (migration 008)
- Add SaveUserShoppingItem(), GetUserShoppingItems(), ToggleUserShoppingItem()
- Add HandleShoppingQuickAdd() and HandleShoppingToggle() handlers
- Add quick-add form to shopping tab

Phase 4: Mobile Swipe Navigation (#38)
- Add touch event handlers for swipe left/right tab switching
- 50px threshold triggers tab change

Phase 5: Consistent Background Opacity (#30)
- Add CSS variables for panel/card/input/modal backgrounds
- Update templates to use consistent opacity classes

Phase 6: Tab Reorganization (#37)
- Reorganize tabs: Timeline, Shopping, Conditions as main tabs
- Move Tasks, Planning, Meals under Details dropdown

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

5 files changed, 273 insertions, 99 deletions

diff --git a/web/static/js/app.js b/web/static/js/app.js
index 52d0c91..6646400 100644
--- a/web/static/js/app.js
+++ b/web/static/js/app.js
@@ -207,3 +207,61 @@ function toggleTask(taskId) {
     console.log('Toggle task:', taskId);
     // To be implemented in Phase 2
 }
+
+// Mobile Swipe Navigation
+(function() {
+    let touchStartX = 0;
+    let touchEndX = 0;
+    const SWIPE_THRESHOLD = 50; // Minimum px for a swipe
+
+    // Get ordered list of tab names (main tabs only for swipe)
+    const TAB_ORDER = ['timeline', 'shopping', 'tasks', 'planning', 'meals'];
+
+    function handleSwipe() {
+        const swipeDistance = touchEndX - touchStartX;
+
+        if (Math.abs(swipeDistance) < SWIPE_THRESHOLD) {
+            return; // Not a significant swipe
+        }
+
+        const currentIndex = TAB_ORDER.indexOf(currentTab);
+        if (currentIndex === -1) return;
+
+        let newIndex;
+        if (swipeDistance > 0) {
+            // Swiped right -> previous tab
+            newIndex = currentIndex - 1;
+        } else {
+            // Swiped left -> next tab
+            newIndex = currentIndex + 1;
+        }
+
+        // Bounds check
+        if (newIndex < 0 || newIndex >= TAB_ORDER.length) {
+            return;
+        }
+
+        const newTab = TAB_ORDER[newIndex];
+        const tabButton = document.querySelector(`[hx-get="/tabs/${newTab}"]`);
+
+        if (tabButton) {
+            console.log(`Swipe navigation: ${currentTab} -> ${newTab}`);
+            tabButton.click();
+        }
+    }
+
+    // Set up touch event listeners on the tab content area
+    document.addEventListener('DOMContentLoaded', function() {
+        const tabContent = document.getElementById('tab-content');
+        if (!tabContent) return;
+
+        tabContent.addEventListener('touchstart', function(e) {
+            touchStartX = e.changedTouches[0].screenX;
+        }, { passive: true });
+
+        tabContent.addEventListener('touchend', function(e) {
+            touchEndX = e.changedTouches[0].screenX;
+            handleSwipe();
+        }, { passive: true });
+    });
+})();
diff --git a/web/templates/index.html b/web/templates/index.html
index b55f348..f4c0b59 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -7,8 +7,23 @@
     <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
     <link rel="stylesheet" href="/static/css/output.css">
     <style>
+        :root {
+            --panel-bg: rgba(0, 0, 0, 0.4);
+            --card-bg: rgba(255, 255, 255, 0.05);
+            --card-bg-hover: rgba(255, 255, 255, 0.1);
+            --input-bg: rgba(0, 0, 0, 0.4);
+            --modal-bg: rgba(0, 0, 0, 0.8);
+            --modal-overlay: rgba(0, 0, 0, 0.7);
+        }
         .text-shadow { text-shadow: 0 0 8px black, 0 0 8px black; }
         .text-shadow-sm { text-shadow: 0 0 4px black; }
+        /* CSS variable-based backgrounds */
+        .bg-panel { background-color: var(--panel-bg); }
+        .bg-card { background-color: var(--card-bg); }
+        .bg-card-hover:hover { background-color: var(--card-bg-hover); }
+        .bg-input { background-color: var(--input-bg); }
+        .bg-modal { background-color: var(--modal-bg); }
+        .bg-modal-overlay { background-color: var(--modal-overlay); }
     </style>
 </head>
 <body class="min-h-screen bg-gray-900 text-white" style="background-image: url('{{.BackgroundURL}}'); background-size: cover; background-position: center; background-attachment: fixed;" hx-headers='{"X-CSRF-Token": "{{.CSRFToken}}"}'>
@@ -31,31 +46,8 @@
 
         <!-- Tab Navigation -->
         <div class="mb-4 sm:mb-6 no-print">
-            <nav class="flex space-x-1 bg-black/50 backdrop-blur-sm rounded-xl p-1 text-shadow-sm">
-                <button
-                    class="tab-button {{if eq .ActiveTab "tasks"}}tab-button-active{{end}}"
-                    hx-get="/tabs/tasks"
-                    hx-target="#tab-content"
-                    hx-push-url="?tab=tasks"
-                    onclick="setActiveTab(this)">
-                    ✓ Tasks
-                </button>
-                <button
-                    class="tab-button {{if eq .ActiveTab "planning"}}tab-button-active{{end}}"
-                    hx-get="/tabs/planning"
-                    hx-target="#tab-content"
-                    hx-push-url="?tab=planning"
-                    onclick="setActiveTab(this)">
-                    📋 Planning
-                </button>
-                <button
-                    class="tab-button {{if eq .ActiveTab "meals"}}tab-button-active{{end}}"
-                    hx-get="/tabs/meals"
-                    hx-target="#tab-content"
-                    hx-push-url="?tab=meals"
-                    onclick="setActiveTab(this)">
-                    🍽️ Meals
-                </button>
+            <nav class="flex space-x-1 bg-panel backdrop-blur-sm rounded-xl p-1 text-shadow-sm">
+                <!-- Main Tabs -->
                 <button
                     class="tab-button {{if eq .ActiveTab "timeline"}}tab-button-active{{end}}"
                     hx-get="/tabs/timeline"
@@ -77,6 +69,44 @@
                    target="_blank">
                     🌋 Conditions
                 </a>
+
+                <!-- Details Dropdown -->
+                <div class="relative" id="details-dropdown">
+                    <button
+                        class="tab-button {{if or (eq .ActiveTab "tasks") (eq .ActiveTab "planning") (eq .ActiveTab "meals")}}tab-button-active{{end}}"
+                        onclick="toggleDetailsDropdown(event)">
+                        📁 Details
+                        <svg class="w-3 h-3 ml-1 inline" 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>
+                    <div id="details-menu" class="hidden absolute top-full left-0 mt-1 bg-panel backdrop-blur-sm rounded-lg p-1 min-w-[140px] z-20">
+                        <button
+                            class="w-full text-left tab-button {{if eq .ActiveTab "tasks"}}tab-button-active{{end}}"
+                            hx-get="/tabs/tasks"
+                            hx-target="#tab-content"
+                            hx-push-url="?tab=tasks"
+                            onclick="setActiveTab(this); closeDetailsDropdown();">
+                            ✓ Tasks
+                        </button>
+                        <button
+                            class="w-full text-left tab-button {{if eq .ActiveTab "planning"}}tab-button-active{{end}}"
+                            hx-get="/tabs/planning"
+                            hx-target="#tab-content"
+                            hx-push-url="?tab=planning"
+                            onclick="setActiveTab(this); closeDetailsDropdown();">
+                            📋 Planning
+                        </button>
+                        <button
+                            class="w-full text-left tab-button {{if eq .ActiveTab "meals"}}tab-button-active{{end}}"
+                            hx-get="/tabs/meals"
+                            hx-target="#tab-content"
+                            hx-push-url="?tab=meals"
+                            onclick="setActiveTab(this); closeDetailsDropdown();">
+                            🍽️ Meals
+                        </button>
+                    </div>
+                </div>
             </nav>
         </div>
 
@@ -102,8 +132,8 @@
     </button>
 
     <!-- Unified Action Modal -->
-    <div id="action-modal" class="hidden fixed inset-0 bg-black/70 flex items-center justify-center p-4 z-50">
-        <div class="bg-black/80 backdrop-blur-sm rounded-lg max-w-md w-full max-h-[80vh] overflow-hidden" style="box-shadow: 0 0 20px black;">
+    <div id="action-modal" class="hidden fixed inset-0 bg-modal-overlay flex items-center justify-center p-4 z-50">
+        <div class="bg-modal backdrop-blur-sm rounded-lg max-w-md w-full max-h-[80vh] overflow-hidden" style="box-shadow: 0 0 20px black;">
             <div class="p-4 border-b border-white/10 flex justify-between items-center">
                 <div class="flex gap-2">
                     <button onclick="switchActionTab('add')" id="tab-add"
@@ -130,15 +160,15 @@
                     <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 mb-3"
+                           class="w-full bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 mb-3"
                            required
                            autofocus>
                     <div class="flex gap-2 mb-3">
                         <input type="date"
                                name="due_date"
                                id="modal-add-date"
-                               class="flex-1 bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white">
-                        <select name="source" class="bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white">
+                               class="flex-1 bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white">
+                        <select name="source" class="bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white">
                             <option value="todoist">Todoist</option>
                             <option value="trello">Trello</option>
                         </select>
@@ -159,11 +189,11 @@
                     <input type="text"
                            name="title"
                            placeholder="Item name..."
-                           class="w-full bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 mb-3"
+                           class="w-full bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 mb-3"
                            required>
                     <select name="list_id"
                             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"
+                            class="w-full bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white mb-3"
                             required>
                         <option value="">Loading stores...</option>
                     </select>
@@ -182,7 +212,7 @@
                       hx-on::after-request="if(event.detail.successful) { this.reset(); closeActionModal(); }">
                     <textarea name="description"
                               placeholder="Describe the bug..."
-                              class="w-full bg-black/40 border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 mb-3 h-24"
+                              class="w-full bg-input border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-white/50 mb-3 h-24"
                               required></textarea>
                     <button type="submit"
                             class="w-full bg-red-900/50 hover:bg-red-900/70 text-red-300 px-4 py-2 rounded-lg text-sm font-medium">
@@ -272,11 +302,27 @@
         function closeTaskModal() {
             document.getElementById('task-edit-modal').classList.add('hidden');
         }
+        // Details dropdown functions
+        function toggleDetailsDropdown(e) {
+            e.stopPropagation();
+            var menu = document.getElementById('details-menu');
+            menu.classList.toggle('hidden');
+        }
+        function closeDetailsDropdown() {
+            document.getElementById('details-menu').classList.add('hidden');
+        }
+        // Close dropdown when clicking outside
+        document.addEventListener('click', function(e) {
+            var dropdown = document.getElementById('details-dropdown');
+            if (dropdown && !dropdown.contains(e.target)) {
+                closeDetailsDropdown();
+            }
+        });
     </script>
 
     <!-- Task Edit Modal -->
-    <div id="task-edit-modal" class="hidden fixed inset-0 bg-black/70 flex items-center justify-center p-4 z-50">
-        <div class="bg-black/80 backdrop-blur-sm rounded-lg max-w-md w-full max-h-[80vh] overflow-hidden" style="box-shadow: 0 0 20px black;">
+    <div id="task-edit-modal" class="hidden fixed inset-0 bg-modal-overlay flex items-center justify-center p-4 z-50">
+        <div class="bg-modal backdrop-blur-sm rounded-lg max-w-md w-full max-h-[80vh] overflow-hidden" style="box-shadow: 0 0 20px black;">
             <div class="p-4 border-b border-white/10 flex justify-between items-center">
                 <h2 class="font-medium text-white">Edit Task</h2>
                 <button onclick="closeTaskModal()" class="text-white/40 hover:text-white">✕</button>
diff --git a/web/templates/partials/shopping-tab.html b/web/templates/partials/shopping-tab.html
index 19c570f..1f589e5 100644
--- a/web/templates/partials/shopping-tab.html
+++ b/web/templates/partials/shopping-tab.html
@@ -4,25 +4,47 @@
      hx-trigger="refresh-tasks from:body"
      hx-target="#tab-content"
      hx-swap="innerHTML">
+
+    <!-- Quick Add Form -->
+    <form hx-post="/shopping/add"
+          hx-target="#tab-content"
+          hx-swap="innerHTML"
+          class="bg-panel backdrop-blur-sm rounded-xl p-4 sm:p-5">
+        <div class="flex gap-2">
+            <input type="text" name="name" placeholder="Add item..."
+                   class="flex-1 bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-white/30 text-sm"
+                   required>
+            <select name="store" class="bg-white/10 border border-white/20 rounded-lg px-3 py-2 text-white text-sm focus:outline-none focus:ring-2 focus:ring-white/30">
+                <option value="Quick Add">Quick Add</option>
+                {{range .Stores}}
+                <option value="{{.Name}}">{{.Name}}</option>
+                {{end}}
+            </select>
+            <button type="submit" class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors">
+                Add
+            </button>
+        </div>
+    </form>
+
     {{if .Stores}}
     {{range .Stores}}
-    <section class="bg-black/40 backdrop-blur-sm rounded-xl p-4 sm:p-5">
+    <section class="bg-panel backdrop-blur-sm rounded-xl p-4 sm:p-5">
         <h2 class="text-xl font-medium mb-4 text-white">{{.Name}}</h2>
         {{range .Categories}}
         <div class="mb-4 last:mb-0">
             {{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-white/5 hover:bg-white/10 transition-colors rounded-lg border border-white/5 {{if .Checked}}opacity-50{{end}}">
+                <li class="flex items-center gap-3 p-3 bg-card bg-card-hover 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}}}'
+                           hx-vals='{"id":"{{.ID}}","source":"{{.Source}}","checked":{{if .Checked}}false{{else}}true{{end}},"name":"{{.Name}}"}'
                            hx-target="closest li"
                            hx-swap="outerHTML"
                            class="h-5 w-5 rounded bg-black/40 border-white/30 text-green-500 focus:ring-white/30 cursor-pointer flex-shrink-0">
                     <span class="flex-1 {{if .Checked}}line-through text-white/40{{else}}text-white{{end}}">{{.Name}}</span>
                     {{if .Quantity}}<span class="text-white/50 text-sm">{{.Quantity}}</span>{{end}}
-                    <span class="text-xs px-2 py-0.5 rounded {{if eq .Source "trello"}}bg-blue-900/50 text-blue-300{{else}}bg-green-900/50 text-green-300{{end}}">
+                    <span class="text-xs px-2 py-0.5 rounded {{if eq .Source "trello"}}bg-blue-900/50 text-blue-300{{else if eq .Source "user"}}bg-purple-900/50 text-purple-300{{else}}bg-green-900/50 text-green-300{{end}}">
                         {{.Source}}
                     </span>
                 </li>
@@ -35,7 +57,7 @@
     {{else}}
     <div class="text-center py-16 text-white/50">
         <p class="text-lg mb-2">No shopping items</p>
-        <p class="text-sm">Add items from PlanToEat or Trello's Shopping board</p>
+        <p class="text-sm">Use the form above to add items quickly</p>
     </div>
     {{end}}
 </div>
diff --git a/web/templates/partials/tasks-tab.html b/web/templates/partials/tasks-tab.html
index db986bb..9e030e4 100644
--- a/web/templates/partials/tasks-tab.html
+++ b/web/templates/partials/tasks-tab.html
@@ -8,7 +8,7 @@
     {{if .Atoms}}
     <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
         {{range .Atoms}}
-        <div class="bg-white/5 hover:bg-white/10 transition-colors rounded-lg border border-white/5 {{if .IsFuture}}opacity-60{{end}}">
+        <div class="bg-card bg-card-hover 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"
@@ -70,7 +70,7 @@
         </summary>
         <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 mt-2">
             {{range .FutureAtoms}}
-            <div class="bg-white/5 hover:bg-white/10 transition-colors rounded-lg border border-white/5 opacity-60">
+            <div class="bg-card bg-card-hover 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"
diff --git a/web/templates/partials/timeline-tab.html b/web/templates/partials/timeline-tab.html
index e73a643..aeaba40 100644
--- a/web/templates/partials/timeline-tab.html
+++ b/web/templates/partials/timeline-tab.html
@@ -5,70 +5,118 @@
      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 -->
+    <!-- Today Section -->
+    {{if .TodayItems}}
+    <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> Today
+        </h2>
+        <div class="space-y-2 relative pl-4 border-l border-white/10 ml-2">
+            {{range .TodayItems}}
+            {{template "timeline-item" .}}
             {{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">
+        </div>
+    </div>
+    {{end}}
+
+    <!-- Tomorrow Section (Collapsed) -->
+    {{if .TomorrowItems}}
+    <details class="group">
+        <summary class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/70 cursor-pointer hover:text-white/90 sticky top-0 bg-black/20 backdrop-blur-md py-2 z-10 rounded-lg px-2 list-none">
+            <span>🗓️</span> Tomorrow
+            <span class="text-sm font-normal text-white/50">({{len .TomorrowItems}} items)</span>
+            <svg class="w-4 h-4 ml-auto transform transition-transform group-open:rotate-180" 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 relative pl-4 border-l border-white/10 ml-2">
+            {{range .TomorrowItems}}
+            {{template "timeline-item" .}}
+            {{end}}
+        </div>
+    </details>
+    {{end}}
+
+    <!-- Later Section (Collapsed) -->
+    {{if .LaterItems}}
+    <details class="group">
+        <summary class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/60 cursor-pointer hover:text-white/80 sticky top-0 bg-black/20 backdrop-blur-md py-2 z-10 rounded-lg px-2 list-none">
+            <span>📆</span> Later
+            <span class="text-sm font-normal text-white/40">({{len .LaterItems}} items)</span>
+            <svg class="w-4 h-4 ml-auto transform transition-transform group-open:rotate-180" 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 relative pl-4 border-l border-white/10 ml-2">
+            {{range .LaterItems}}
+            {{template "timeline-item" .}}
+            {{end}}
+        </div>
+    </details>
+    {{end}}
+
+    {{if and (not .TodayItems) (not .TomorrowItems) (not .LaterItems)}}
+    <div class="text-center py-8 text-white/50">
+        <p>No items found for the selected range.</p>
+    </div>
+    {{end}}
+
+</div>
+{{end}}
+
+{{define "timeline-item"}}
+<div class="bg-card bg-card-hover transition-colors rounded-lg border border-white/5 relative {{if .IsCompleted}}opacity-60{{end}}">
+    <!-- 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">
+        <!-- Checkbox for tasks/cards -->
+        {{if or (eq .Type "task") (eq .Type "card")}}
+        <input type="checkbox"
+               {{if .IsCompleted}}checked{{end}}
+               hx-post="{{if .IsCompleted}}/uncomplete-atom{{else}}/complete-atom{{end}}"
+               hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"}'
+               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">
         {{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 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 {{if .IsCompleted}}line-through text-white/50{{end}}">{{.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>
 
-            <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}}
+            {{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 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>
+                {{if .IsCompleted}}
+                <span class="text-[10px] px-1.5 py-0.5 rounded bg-green-500/20 text-green-400 uppercase tracking-wider">
+                    done
+                </span>
+                {{end}}
             </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>
 </div>
 {{end}}