Fix dashboard timer polling loop and sync updates

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,16 +53,21 @@ $(document).ready(function() {
 
     function syncActiveTimers() {
         const timersContainer = $(ACTIVE_TIMERS_SELECTOR);
-        if (timersContainer.length === 0) {
-            return;
-        }
 
         $.getJSON('/api/list_active_sessions/')
             .done(function(sessions) {
                 const serverIds = sessions
                     .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));

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 %}

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 %}
+{% endblock %}

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 %}
+{% endblock %}

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">