From ac6095a89976a9e74aa6ae86fa42453935cdb961 Mon Sep 17 00:00:00 2001
From: calboo <cal@rabooboo.de>
Date: Wed, 11 Feb 2026 13:01:25 +0100
Subject: [PATCH] better task complete animation

---
 app.py                   |   6 +-
 templates/dashboard.html | 135 ++++++++++++++++++++++++++++++---------
 2 files changed, 107 insertions(+), 34 deletions(-)

diff --git a/app.py b/app.py
index 50b1abd..aa30d77 100644
--- a/app.py
+++ b/app.py
@@ -95,14 +95,12 @@ def sync_check():
     
     entry_id = str(current_entry['_id']) if current_entry else 'none'
     
-    # Create simple hash of tasks (IDs joined string)
-    # If a task is completed, it drops from this list -> hash changes -> client reloads
+    # Return list of IDs for smart diffing on frontend
     task_ids = sorted([str(t['_id']) for t in active_tasks])
-    tasks_hash = ','.join(task_ids)
     
     return jsonify({
         'entry_hash': entry_id,
-        'tasks_hash': tasks_hash
+        'task_ids': task_ids
     })
 
 @app.route('/register', methods=['GET', 'POST'])
diff --git a/templates/dashboard.html b/templates/dashboard.html
index c3de700..dc9ba43 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -57,6 +57,27 @@
         /* Mobile specific timer adjustments */
         .timer-display { font-size: 2.5rem !important; margin: 0.5rem 0 1rem 0 !important; }
     }
+
+    /* Task Animations */
+    .checklist-item {
+        transition: transform 0.4s ease, opacity 0.4s ease, background-color 0.3s;
+        opacity: 1;
+        transform: translateX(0);
+    }
+    
+    /* State: Just finished animating out */
+    .checklist-item.fade-out-complete {
+        opacity: 0;
+        transform: translateX(20px);
+        pointer-events: none;
+    }
+
+    /* State: Currently animating out (optional differentiation) */
+    .checklist-item.animating-out {
+        opacity: 0.5;
+        background-color: #f9f9f9;
+        text-decoration: line-through;
+    }
 </style>
 
 <script>
@@ -166,9 +187,9 @@
             {% if tasks %}
             <div style="margin-bottom: 2rem;">
                 <h4 style="font-size: 0.8rem; text-transform: uppercase; color: var(--text-secondary); letter-spacing: 0.05em; border-bottom: 1px solid var(--border-dim); padding-bottom: 5px;">Active Tasks</h4>
-                <div class="checklist-container">
+                <div class="checklist-container" id="activeTasksList">
                     {% for task in tasks %}
-                        <div class="checklist-item {% if task.status == 'completed' %}completed{% endif %}">
+                        <div class="checklist-item {% if task.status == 'completed' %}completed{% endif %}" id="task-item-{{ task._id }}">
                             <input type="checkbox" id="task_{{ task._id }}" 
                                    {% if task.status == 'completed' %}checked{% endif %}
                                    onchange="toggleTask('{{ task._id }}', this)">
@@ -223,22 +244,38 @@
         updateTimer(); 
     }
 
-    // AJAX for Tasks
+    // AJAX for Tasks with Animation
     function toggleTask(taskId, checkbox) {
+        const item = checkbox.closest('.checklist-item');
+        
+        // 1. Immediately apply visual "done" state
+        if(checkbox.checked) {
+            item.classList.add('completed');
+            item.classList.add('animating-out'); // Marker for sync script to ignore
+            
+            // 2. Move to bottom of list
+            const container = document.getElementById('activeTasksList');
+            container.appendChild(item); // Moves to end
+            
+            // 3. Fade out slowly
+            setTimeout(() => {
+                item.classList.add('fade-out-complete');
+            }, 600); // Slight delay after move
+            
+        } else {
+            item.classList.remove('completed');
+            item.classList.remove('fade-out-complete');
+            item.classList.remove('animating-out');
+        }
+
+        // 4. Send Request
         const formData = new FormData();
         formData.append('task_id', taskId);
         formData.append('is_checked', checkbox.checked);
-
-        fetch('/complete_task', { method: 'POST', body: formData })
-        .then(r => r.json())
-        .then(data => {
-            const item = checkbox.closest('.checklist-item');
-            if(checkbox.checked) {
-                item.classList.add('completed');
-            } else {
-                item.classList.remove('completed');
-            }
-        });
+        
+        // Remove from our local "known" list so Sync doesn't freak out, actually Sync wants matches.
+        // We let Sync reload page eventually to clean up DOM purely
+        fetch('/complete_task', { method: 'POST', body: formData });
     }
 
     // Modal & Start Logic
@@ -375,27 +412,19 @@
     </div>
 </div>
 
-<!-- Live Sync Script -->
+<!-- Live Sync Script (Optimized for Animation) -->
 <script>
     // Generate initial state hashes based on what Jinja rendered
     const initialEntryHash = "{{ current_entry._id if current_entry else 'none' }}";
-    // Create comma-separated string of IDs. Since IDs are 24 chars, sorting shouldn't matter for Jinja vs Python if order preserved, 
-    // but app.py sorts. Let's trust they match initially or accept one quick reload on first poll if order differs.
-    // Actually, dashboard displays in list order. Python sorted them for hash.
-    // Let's rely on the Python endpoint's logic. We just need to know if we need to reload.
-    // To avoid immediate reload, we can fetch the initial hash via API or just accept one reload.
-    // Better: let's store the raw IDs from jinja.
     
     let localEntryHash = initialEntryHash;
     
-    // Construct local task hash manually to match Python's sorted logic
-    let taskIds = [
+    // Construct local task list
+    let localTaskIds = [
         {% for t in tasks %}
             "{{ t._id }}",
         {% endfor %}
     ];
-    taskIds.sort();
-    let localTasksHash = taskIds.join(',');
 
     // Polling function
     setInterval(() => {
@@ -412,12 +441,58 @@
             })
             .then(data => {
                 const serverEntryHash = data.entry_hash;
-                const serverTasksHash = data.tasks_hash;
+                const serverTaskIds = data.task_ids;
+                
+                // 1. Entry Changed? Priority Reload.
+                if (serverEntryHash !== localEntryHash) {
+                    window.location.reload();
+                    return;
+                }
 
-                // Compare
-                if (serverEntryHash !== localEntryHash || serverTasksHash !== localTasksHash) {
-                    console.log("State changed remotely. Syncing...");
-                    // Reload to reflect changes (Timer started/stopped on other device, or task completed)
+                // 2. Diff Tasks
+                // Find tasks that are in Local but NOT in Server (Remote Completion)
+                const missingIds = localTaskIds.filter(id => !serverTaskIds.includes(id));
+                // Find tasks that are in Server but NOT in Local (Remote Addition)
+                const addedIds = serverTaskIds.filter(id => !localTaskIds.includes(id));
+
+                let needsReload = false;
+
+                // Handle Missing (Completed Remotely)
+                if (missingIds.length > 0) {
+                    let animationTriggered = false;
+                    missingIds.forEach(id => {
+                        const el = document.getElementById(`task-item-${id}`);
+                        // Only animate if it exists and isn't already animating locally
+                        if (el && !el.classList.contains('animating-out') && !el.classList.contains('fade-out-complete')) {
+                             el.classList.add('completed');
+                             el.classList.add('fade-out-complete');
+                             animationTriggered = true;
+                        }
+                    });
+
+                    // Update our local truth to stop re-detecting
+                    localTaskIds = localTaskIds.filter(id => !missingIds.includes(id));
+
+                    // If we animated something out, wait briefly then reload to clean DOM or just leave it hidden
+                    // User wants "smoother". Reloading jerks. 
+                    // Since the element is hidden via CSS, we technically don't HAVE to reload immediately
+                    // unless we want to remove the DOM node. 
+                    // Let's remove the DOM node after animation and NOT reload if that's the only change.
+                    if (animationTriggered) {
+                        setTimeout(() => {
+                            missingIds.forEach(id => {
+                                const el = document.getElementById(`task-item-${id}`);
+                                if(el) el.remove();
+                            });
+                        }, 500);
+                        return; // Skip reload!
+                    } else {
+                        // If it was already missing or animating, maybe we do nothing or ensure it's gone
+                    }
+                }
+
+                if (addedIds.length > 0) {
+                    console.log("New tasks detected. Syncing...");
                     window.location.reload();
                 }
             })