From dd4689a71de8f1c0b5a2d483827411a9645ad66a Mon Sep 17 00:00:00 2001
From: Peter Stone <thepeterstone@gmail.com>
Date: Tue, 20 Jan 2026 21:38:18 -1000
Subject: UI improvements and bug fixes

- Gray out overdue tasks (past today)
- Sort tasks with specific times before midnight-due tasks
- Fix timezone bug in quick add (use local timezone)
- Remove "Personal Dashboard" header, minimal refresh/logout bar
- Change Todoist icon from checkmark to red circle
- Show due time when set (not just date)
- Compact task list styling

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 web/templates/partials/tasks-tab.html | 81 ++++++++++++++++-------------------
 1 file changed, 37 insertions(+), 44 deletions(-)

(limited to 'web/templates/partials')

diff --git a/web/templates/partials/tasks-tab.html b/web/templates/partials/tasks-tab.html
index 3f0d5bf..2a89a40 100644
--- a/web/templates/partials/tasks-tab.html
+++ b/web/templates/partials/tasks-tab.html
@@ -69,54 +69,47 @@
         </form>
     </section>
 
-    <!-- Unified Tasks Section -->
-    <section>
-        <h2 class="text-base sm:text-lg font-semibold text-gray-900 mb-3 sm:mb-4">
-            Upcoming Tasks
-        </h2>
-
-        {{if .Atoms}}
-        <div class="space-y-2 sm:space-y-3">
-            {{range .Atoms}}
-            <div class="task-item bg-white rounded-lg p-3 sm:p-4 shadow-sm hover:shadow-md transition-shadow border-l-4 {{.ColorClass}}"
-                 hx-post="/complete-atom"
-                 hx-trigger="click"
-                 hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"}'
-                 hx-target="this"
-                 hx-swap="outerHTML"
-                 hx-confirm="Mark as complete?">
-                <div class="flex items-start gap-2 sm:gap-3">
-                    <span class="text-lg sm:text-xl flex-shrink-0">{{.SourceIcon}}</span>
-                    <div class="flex-1 min-w-0">
-                        <div class="flex items-start justify-between gap-2">
-                            <h3 class="text-sm sm:text-base font-medium text-gray-900 break-words">{{.Title}}</h3>
-                            {{if .URL}}
-                            <a href="{{.URL}}" target="_blank" class="text-primary-600 hover:text-primary-800 flex-shrink-0" onclick="event.stopPropagation()">
-                                <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 flex-wrap items-center gap-2 sm:gap-3 mt-1 text-xs sm:text-sm text-gray-500">
-                            {{if .DueDate}}
-                            <span>{{.DueDate.Format "Jan 2"}}</span>
-                            {{end}}
-                            {{if gt .Priority 2}}
-                            <span class="text-red-600 font-medium">P{{.Priority}}</span>
-                            {{end}}
-                        </div>
+    <!-- Tasks List -->
+    {{if .Atoms}}
+    <div class="space-y-2">
+        {{range .Atoms}}
+        <div class="task-item bg-white rounded-lg p-3 sm:p-4 shadow-sm hover:shadow-md transition-shadow border-l-4 {{.ColorClass}} {{if .IsOverdue}}opacity-50{{end}}"
+             hx-post="/complete-atom"
+             hx-trigger="click"
+             hx-vals='{"id": "{{.ID}}", "source": "{{.Source}}"}'
+             hx-target="this"
+             hx-swap="outerHTML"
+             hx-confirm="Mark as complete?">
+            <div class="flex items-start gap-2 sm:gap-3">
+                <span class="text-lg flex-shrink-0">{{.SourceIcon}}</span>
+                <div class="flex-1 min-w-0">
+                    <div class="flex items-start justify-between gap-2">
+                        <h3 class="text-sm font-medium {{if .IsOverdue}}text-gray-500{{else}}text-gray-900{{end}} break-words">{{.Title}}</h3>
+                        {{if .URL}}
+                        <a href="{{.URL}}" target="_blank" class="text-primary-600 hover:text-primary-800 flex-shrink-0" onclick="event.stopPropagation()">
+                            <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 flex-wrap items-center gap-2 mt-1 text-xs text-gray-400">
+                        {{if .DueDate}}
+                        <span class="{{if .IsOverdue}}text-red-400{{end}}">{{.DueDate.Format "Jan 2"}}{{if .HasSetTime}}, {{.DueDate.Format "3:04pm"}}{{end}}</span>
+                        {{end}}
+                        {{if gt .Priority 2}}
+                        <span class="text-red-500 font-medium">P{{.Priority}}</span>
+                        {{end}}
                     </div>
                 </div>
             </div>
-            {{end}}
-        </div>
-        {{else}}
-        <div class="bg-gray-50 rounded-lg p-8 text-center">
-            <p class="text-gray-600">No upcoming tasks found.</p>
         </div>
         {{end}}
-    </section>
+    </div>
+    {{else}}
+    <div class="bg-white/50 rounded-lg p-6 text-center">
+        <p class="text-gray-500 text-sm">No tasks found.</p>
+    </div>
+    {{end}}
 </div>
 {{end}}
-- 
cgit v1.2.3