From f8757aef930a22669255359ff50908e0f7a941af Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Mon, 26 Jan 2026 23:22:32 -1000
Subject: Make Today collapsible and expand Tomorrow by default (#60)

- Convert Today section from static div to collapsible details element
- Add item count to Today header for consistency
- Expand both Today and Tomorrow sections by default
- Later section remains collapsed
- Update DESIGN.md with new timeline organization

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 DESIGN.md                                | 13 +++++++++++--
 web/templates/partials/timeline-tab.html | 18 +++++++++++-------
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index 59f3cb8..1bc9ed9 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -184,6 +184,15 @@ BuildTimeline(ctx, store, calendarClient, tasksClient, start, end)
 - `bg-black/60 backdrop-blur-lg` for modals
 - `box-shadow: 0 0 12px black` for depth
 
+**Z-Index Hierarchy:**
+| Layer | z-index | Element |
+|-------|---------|---------|
+| Content | default | Page content |
+| Sticky headers | z-10 | Timeline section headers |
+| Details dropdown | z-30 | Navigation dropdown menu |
+| FAB button | z-40 | Floating action button |
+| Modals | z-50 | Action modal, edit modal |
+
 ### Typography
 
 - **Font:** Inter (300, 400, 500, 600 weights)
@@ -247,8 +256,8 @@ Chronological view of all upcoming items grouped by day section.
 **Data Sources:** Todoist, Trello, PlanToEat, Google Calendar, Google Tasks
 
 **Organization:**
-- **Today** (expanded) - Items due today
-- **Tomorrow** (collapsed) - Items due tomorrow
+- **Today** (expanded, collapsible) - Items due today
+- **Tomorrow** (expanded, collapsible) - Items due tomorrow
 - **Later** (collapsed) - Items 2+ days out
 
 **Item Display:**
diff --git a/web/templates/partials/timeline-tab.html b/web/templates/partials/timeline-tab.html
index 22cdd38..b1045c6 100644
--- a/web/templates/partials/timeline-tab.html
+++ b/web/templates/partials/timeline-tab.html
@@ -5,23 +5,27 @@
      hx-target="#tab-content"
      hx-swap="innerHTML">
 
-    <!-- Today Section -->
+    <!-- Today Section (Expanded, Collapsible) -->
     {{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">
+    <details class="group" open>
+        <summary class="text-lg font-semibold mb-3 flex items-center gap-2 text-white/90 cursor-pointer hover:text-white sticky top-0 bg-black/20 backdrop-blur-md py-2 z-10 rounded-lg px-2 list-none">
             <span>📅</span> {{.TodayLabel}}
-        </h2>
+            <span class="text-sm font-normal text-white/50">({{len .TodayItems}} 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 .TodayItems}}
             {{template "timeline-item" .}}
             {{end}}
         </div>
-    </div>
+    </details>
     {{end}}
 
-    <!-- Tomorrow Section (Collapsed) -->
+    <!-- Tomorrow Section (Expanded) -->
     {{if .TomorrowItems}}
-    <details class="group">
+    <details class="group" open>
         <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> {{.TomorrowLabel}}
             <span class="text-sm font-normal text-white/50">({{len .TomorrowItems}} items)</span>
-- 
cgit v1.2.3