From d913064d700cb430a6d8c84180fa6239d27e8e9a Mon Sep 17 00:00:00 2001
From: Henry <63872314+Fingolfin7@users.noreply.github.com>
Date: Mon, 13 Apr 2026 14:56:29 +0200
Subject: [PATCH] Fix dashboard timer polling sync behavior

---
 core/static/core/js/dynamic_timers.js | 16 +++++++++++-----
 core/templates/core/dashboard.html    |  4 ++--
 core/templates/core/remove_timer.html |  4 ++--
 core/templates/core/stop_timer.html   |  4 ++--
 core/templates/core/timers.html       |  2 +-
 5 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/core/static/core/js/dynamic_timers.js b/core/static/core/js/dynamic_timers.js
index a571c9f..9cb0fee 100644
--- a/core/static/core/js/dynamic_timers.js
+++ b/core/static/core/js/dynamic_timers.js
@@ -1,6 +1,7 @@
 $(document).ready(function() {
     const ACTIVE_TIMERS_SELECTOR = '#active-timers';
-    const TIMER_CARD_SELECTOR = `${ACTIVE_TIMERS_SELECTOR} .card[id^="timer-"]`;
+    const TIMER_CARD_SELECTOR = `${ACTIVE_TIMERS_SELECTOR} [data-timer-id]`;
+    const DASHBOARD_PATH = '/';
 
     function updateDurations() {
         $(TIMER_CARD_SELECTOR).each(function() {
@@ -43,7 +44,7 @@ $(document).ready(function() {
     function getLocalTimerIds() {
         return $(TIMER_CARD_SELECTOR)
             .map(function() {
-                return parseInt($(this).attr('id').replace('timer-', ''), 10);
+                return parseInt($(this).data('timer-id'), 10);
             })
             .get()
             .filter(Number.isFinite)
@@ -52,9 +53,6 @@ $(document).ready(function() {
 
     function syncActiveTimers() {
         const timersContainer = $(ACTIVE_TIMERS_SELECTOR);
-        if (timersContainer.length === 0) {
-            return;
-        }
 
         $.getJSON('/api/list_active_sessions/')
             .done(function(sessions) {
@@ -62,6 +60,14 @@ $(document).ready(function() {
                     .filter(session => session.is_active)
                     .map(session => session.id)
                     .sort((a, b) => a - b);
+
+                if (timersContainer.length === 0) {
+                    if (window.location.pathname === DASHBOARD_PATH && serverIds.length > 0) {
+                        window.location.reload();
+                    }
+                    return;
+                }
+
                 const localIds = getLocalTimerIds();
                 const serverSet = new Set(serverIds);
                 const allLocalTimersStillActive = localIds.every(id => serverSet.has(id));
diff --git a/core/templates/core/dashboard.html b/core/templates/core/dashboard.html
index 8fa5dd6..bc996ae 100644
--- a/core/templates/core/dashboard.html
+++ b/core/templates/core/dashboard.html
@@ -35,7 +35,7 @@
 
     <!-- Active Timers (if any) -->
     {% if active_timers %}
-    <section id="active-timers" class="card" style="border-left: 4px solid var(--main-yellow);">
+    <section id="active-timers" class="card" data-partial-list="true" data-max-visible="5" style="border-left: 4px solid var(--main-yellow);">
         <h2 class="section-header collapsible-header" data-target="active-timers-body">
             <span><i class="fas fa-play-circle text-yellow"></i> <u>Active Timers</u></span>
             <button type="button" class="collapse-toggle" aria-expanded="true" aria-controls="active-timers-body">
@@ -44,7 +44,7 @@ <h2 class="section-header collapsible-header" data-target="active-timers-body">
         </h2>
         <div id="active-timers-body" class="collapsible-body active-timers-list">
             {% for timer in active_timers %}
-            <div class="active-timer-item card" style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: rgba(234, 179, 8, 0.1); border: 1px solid rgba(234, 179, 8, 0.2); border-radius: 4px; width: 100%;" data-start-time="{{ timer.start_time|utc_time_formatter }}">
+            <div class="active-timer-item card" data-timer-id="{{ timer.id }}" style="display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; background: rgba(234, 179, 8, 0.1); border: 1px solid rgba(234, 179, 8, 0.2); border-radius: 4px; width: 100%;" data-start-time="{{ timer.start_time|utc_time_formatter }}">
                 <div style="display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;">
                     <span class="text-red timer-project" style="font-weight: bold;">{{ timer.project.name }}</span>
                     {% if timer.subprojects.all %}
diff --git a/core/templates/core/remove_timer.html b/core/templates/core/remove_timer.html
index 0e3216e..f15b640 100644
--- a/core/templates/core/remove_timer.html
+++ b/core/templates/core/remove_timer.html
@@ -12,7 +12,7 @@
 
         <h3>Are you sure you want to remove this timer?</h3>
 
-        <div class="card" id="timer-{{ timer.id }}" data-start-time="{{ timer.start_time|utc_time_formatter }}">
+        <div class="card" id="timer-{{ timer.id }}" data-timer-id="{{ timer.id }}" data-start-time="{{ timer.start_time|utc_time_formatter }}">
                 <table class="timer-row">
                     <tr>
                         <td class="text-red">
@@ -46,4 +46,4 @@ <h3>Are you sure you want to remove this timer?</h3>
             </button>
         </div>
     </form>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/core/templates/core/stop_timer.html b/core/templates/core/stop_timer.html
index 7a3a2d8..83d5fcf 100644
--- a/core/templates/core/stop_timer.html
+++ b/core/templates/core/stop_timer.html
@@ -10,7 +10,7 @@
     <form method="post" enctype="multipart/form-data">
         {% csrf_token %}
 
-        <div class="card" id="timer-{{ timer.id }}" data-start-time="{{ timer.start_time|utc_time_formatter }}">
+        <div class="card" id="timer-{{ timer.id }}" data-timer-id="{{ timer.id }}" data-start-time="{{ timer.start_time|utc_time_formatter }}">
             <table class="timer-row">
                 <tr>
                     <td>
@@ -44,4 +44,4 @@
             </button>
         </div>
     </form>
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/core/templates/core/timers.html b/core/templates/core/timers.html
index 9ee0585..3a1de2c 100644
--- a/core/templates/core/timers.html
+++ b/core/templates/core/timers.html
@@ -15,7 +15,7 @@
     </section>
     <section id="active-timers">
         {% for timer in timers %}
-            <div class="card" id="timer-{{ timer.id }}" data-start-time="{{ timer.start_time|utc_time_formatter }}">
+            <div class="card" id="timer-{{ timer.id }}" data-timer-id="{{ timer.id }}" data-start-time="{{ timer.start_time|utc_time_formatter }}">
                 <div class="timer-row-flex">
                     <span>[{{ forloop.counter0 }}]: Started</span>
                     <span class="text-red">