From bde7be454b685cd94cc512d93f79637b0d860a82 Mon Sep 17 00:00:00 2001
From: Keith Smith <keith@firebugit.com>
Date: Sat, 5 Sep 2026 00:15:22 -0600
Subject: [PATCH] Show overdue styling on tasks in offline mode

renderTaskItem() never applied the "overdue" CSS class at all, so
overdue tasks in offline mode looked like any other task instead of
getting the red highlight/due-date treatment they get online. Adds
isTaskOverdue(), mirroring Task.is_overdue, applied the same way
_task_item.html does it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 static/js/offline-tasks.js | 13 ++++++++++---
 templates/sw.js            |  2 +-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/static/js/offline-tasks.js b/static/js/offline-tasks.js
index fb4a9ad..916741b 100644
--- a/static/js/offline-tasks.js
+++ b/static/js/offline-tasks.js
@@ -114,9 +114,16 @@ function escapeHtml(str) {
     return div.innerHTML;
 }
 
+function isTaskOverdue(task) {
+    // Mirrors Task.is_overdue in tasks/models.py.
+    if (!task.due_date || task.status === 'completed' || task.status === 'cancelled') return false;
+    return task.due_date < todayLocalStr();
+}
+
 function renderTaskItem(task, tagsBySyncId) {
+    const overdue = isTaskOverdue(task);
     const item = document.createElement('div');
-    item.className = `task-item priority-${task.priority}${task.status === 'completed' ? ' completed' : ''}`;
+    item.className = `task-item priority-${task.priority}${overdue ? ' overdue' : ''}${task.status === 'completed' ? ' completed' : ''}`;
 
     const toggleForm = document.createElement('button');
     toggleForm.type = 'button';
@@ -140,13 +147,13 @@ function renderTaskItem(task, tagsBySyncId) {
 
     const metaParts = [];
     if (task.due_date) {
-        metaParts.push(`📅 ${formatDueDate(task.due_date)}`);
+        metaParts.push(`<span class="task-due${overdue ? ' overdue' : ''}">📅 ${formatDueDate(task.due_date)}</span>`);
     }
     const tagChips = renderTagChips(task, tagsBySyncId);
     if (metaParts.length || tagChips) {
         const meta = document.createElement('div');
         meta.className = 'task-meta';
-        meta.innerHTML = metaParts.map((p) => `<span>${p}</span>`).join(' ') + tagChips;
+        meta.innerHTML = metaParts.join(' ') + tagChips;
         content.appendChild(meta);
     }
 
diff --git a/templates/sw.js b/templates/sw.js
index 026ef13..b85a8f6 100644
--- a/templates/sw.js
+++ b/templates/sw.js
@@ -1,4 +1,4 @@
-{% load static %}const CACHE_NAME = 'keepitgoing-shell-v6';
+{% load static %}const CACHE_NAME = 'keepitgoing-shell-v7';
 const OFFLINE_URL = '{% url "offline" %}';
 const OFFLINE_TASKS_URL = '{% url "offline-tasks" %}';