From 2292dff2d8d6f4b43dad8dffd3d559f7c1e5bb35 Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Tue, 13 Jan 2026 08:56:26 -1000
Subject: Implement 4-Tab Architecture with unified Atom model

---
 web/templates/partials/meals-tab.html    |  6 +++
 web/templates/partials/planning-tab.html |  6 +++
 web/templates/partials/tasks-tab.html    | 79 ++++++++++++++++++++++++++------
 3 files changed, 76 insertions(+), 15 deletions(-)
 create mode 100644 web/templates/partials/meals-tab.html
 create mode 100644 web/templates/partials/planning-tab.html

(limited to 'web/templates/partials')

diff --git a/web/templates/partials/meals-tab.html b/web/templates/partials/meals-tab.html
new file mode 100644
index 0000000..5900368
--- /dev/null
+++ b/web/templates/partials/meals-tab.html
@@ -0,0 +1,6 @@
+{{define "meals-tab"}}
+<div class="space-y-6">
+    <!-- PlanToEat Meals Section -->
+    {{template "plantoeat-meals" .}}
+</div>
+{{end}}
diff --git a/web/templates/partials/planning-tab.html b/web/templates/partials/planning-tab.html
new file mode 100644
index 0000000..e538578
--- /dev/null
+++ b/web/templates/partials/planning-tab.html
@@ -0,0 +1,6 @@
+{{define "planning-tab"}}
+<div class="space-y-6">
+    <!-- Trello Boards Section -->
+    {{template "trello-boards" .}}
+</div>
+{{end}}
diff --git a/web/templates/partials/tasks-tab.html b/web/templates/partials/tasks-tab.html
index 5678193..f528553 100644
--- a/web/templates/partials/tasks-tab.html
+++ b/web/templates/partials/tasks-tab.html
@@ -1,22 +1,71 @@
 {{define "tasks-tab"}}
-<div class="space-y-10">
-    <!-- Error Messages -->
-    {{template "error-banner" .}}
+<div class="space-y-6">
+    <!-- Unified Tasks Section -->
+    <section>
+        <h2 class="section-header mb-6">
+            <span class="section-accent bg-gradient-to-r from-red-500 to-blue-500"></span>
+            Upcoming Tasks
+        </h2>
 
-    <!-- Trello Boards Section -->
-    {{template "trello-boards" .}}
+        {{if .Atoms}}
+        <div class="space-y-4">
+            {{range .Atoms}}
+            <div class="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow border-l-4 {{.ColorClass}}">
+                <div class="flex items-start justify-between">
+                    <div class="flex-1">
+                        <div class="flex items-center gap-3 mb-2">
+                            <span class="text-2xl">{{.SourceIcon}}</span>
+                            <h3 class="text-lg font-semibold text-gray-900">{{.Title}}</h3>
+                        </div>
 
-    <!-- Todoist + PlanToEat Grid -->
-    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <!-- Todoist (2 cols) -->
-        <div class="lg:col-span-2">
-            {{template "todoist-tasks" .}}
-        </div>
+                        {{if .Description}}
+                        <p class="text-sm text-gray-600 mb-3">{{.Description}}</p>
+                        {{end}}
+
+                        <div class="flex items-center gap-4 text-sm text-gray-500">
+                            {{if .DueDate}}
+                            <div class="flex items-center gap-1">
+                                <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="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                                </svg>
+                                <span>{{.DueDate.Format "Jan 2, 3:04 PM"}}</span>
+                            </div>
+                            {{end}}
+
+                            <div class="flex items-center gap-1">
+                                <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="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
+                                </svg>
+                                <span>{{if eq .Source "trello"}}Trello{{else if eq .Source "todoist"}}Todoist{{else}}{{.Source}}{{end}}</span>
+                            </div>
 
-        <!-- PlanToEat (1 col) -->
-        <div>
-            {{template "plantoeat-meals" .}}
+                            {{if gt .Priority 2}}
+                            <div class="flex items-center gap-1 text-red-600 font-medium">
+                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                                    <path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"></path>
+                                </svg>
+                                <span>Priority {{.Priority}}</span>
+                            </div>
+                            {{end}}
+                        </div>
+                    </div>
+
+                    {{if .URL}}
+                    <a href="{{.URL}}" target="_blank" class="ml-4 text-primary-600 hover:text-primary-800 transition-colors">
+                        <svg class="w-5 h-5" 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>
+            {{end}}
+        </div>
+        {{else}}
+        <div class="bg-gray-50 rounded-lg p-8 text-center">
+            <p class="text-gray-600">No upcoming tasks with due dates.</p>
         </div>
-    </div>
+        {{end}}
+    </section>
 </div>
 {{end}}
-- 
cgit v1.2.3