Auto-load exercise records on selection (#112)

rodrigogiraoserrao · web-flow · commit a8a51f4efcd4 · 2026-02-11T08:25:24.000Z
- Updated the records panel UI to include explicit context text (Showing records for: ...) so it’s always clear which exercise’s records are currently displayed, and to show a dedicated “no records yet” note when applicable. - Changed selection behavior so records are fetched automatically when a valid exercise is selected via typing/datalist input or via the browse list, instead of requiring only manual button usage. - Extended record loading logic to clear/set empty-state messaging properly and show a clear per-exercise no-records note (<exercise> has no records yet.). ------ [Codex Task](https://chatgpt.com/codex/tasks/task_e_698c364942e48325b90abd155947e6a7)
diff --git a/workout-exercise-record.html b/workout-exercise-record.html
@@ -142,6 +142,11 @@
             font-weight: 600;
             margin-bottom: 0.25rem;
         }
+
+        .records-context {
+            margin: 0;
+            font-weight: 600;
+        }
     </style>
 </head>
 <body>
@@ -173,13 +178,15 @@ <h2>Records</h2>
                     <button id="refresh-exercises">Refresh list</button>
                 </div>
             </div>
+            <p id="records-context" class="status-text records-context">No exercise selected.</p>
             <div class="record-table-container">
                 <div id="load-status" class="status"></div>
                 <table class="record-table">
                     <caption id="records-caption" aria-live="polite">Select an exercise to view records</caption>
                     <thead><tr><th>Weight</th><th>Reps</th></tr></thead>
                     <tbody id="record-rows"></tbody>
                 </table>
+                <p id="no-record-note" class="status-text" aria-live="polite"></p>
             </div>
         </section>
 
@@ -218,6 +225,8 @@ <h2 style="margin: 0;">Workout tools</h2>
         const recordWeight = document.getElementById('record-weight');
         const recordReps = document.getElementById('record-reps');
         const recordsCaption = document.getElementById('records-caption');
+        const recordsContext = document.getElementById('records-context');
+        const noRecordNote = document.getElementById('no-record-note');
 
         const STORAGE_KEYS = { base: 'workout-api-base', token: 'workout-api-token' };
 
@@ -314,9 +323,13 @@ <h2 style="margin: 0;">Workout tools</h2>
         function updateRecordsCaption(name, hasRecords) {
             if (!name) {
                 recordsCaption.textContent = 'Select an exercise to view records';
+                recordsContext.textContent = 'No exercise selected.';
+                noRecordNote.textContent = '';
                 return;
             }
 
+            recordsContext.textContent = `Showing records for: ${name}`;
+
             recordsCaption.textContent = hasRecords === false
                 ? `No ${name} records`
                 : `${name} records`;
@@ -333,6 +346,7 @@ <h2 style="margin: 0;">Workout tools</h2>
             updateRecordsCaption(displayName);
             loadStatus.textContent = `Loading records for ${displayName}...`;
             recordRows.innerHTML = '';
+            noRecordNote.textContent = '';
             try {
                 const data = await apiFetch(`/exercises/${encodeURIComponent(name)}/records`);
                 (data.records || []).forEach((rec) => {
@@ -344,11 +358,13 @@ <h2 style="margin: 0;">Workout tools</h2>
                     const row = document.createElement('tr');
                     row.innerHTML = '<td colspan="2">No personal bests yet.</td>';
                     recordRows.appendChild(row);
+                    noRecordNote.textContent = `${displayName} has no records yet.`;
                 }
                 updateRecordsCaption(displayName, data.records && data.records.length > 0);
                 loadStatus.textContent = '';
             } catch (error) {
                 loadStatus.textContent = error.message;
+                noRecordNote.textContent = '';
             }
         }
 
@@ -374,17 +390,23 @@ <h2 style="margin: 0;">Workout tools</h2>
         exerciseSelect.addEventListener('input', () => {
             clearRecordInputs();
             recordStatus.textContent = '';
-            loadStatus.textContent = '';
-            updateRecordsCaption('');
-            recordRows.innerHTML = '';
-        });
+            if (!getSelectedExercise()) {
+                loadStatus.textContent = '';
+                updateRecordsCaption('');
+                recordRows.innerHTML = '';
+                return;
+            }
 
+            loadRecords();
+        });
         exerciseBrowseSelect.addEventListener('change', (event) => {
             const selectedOption = event.target.selectedOptions[0];
             if (!selectedOption) return;
             const value = selectedOption.value || selectedOption.textContent;
             exerciseSelect.value = value;
-            exerciseSelect.dispatchEvent(new Event('input', { bubbles: true }));
+            clearRecordInputs();
+            recordStatus.textContent = '';
+            loadRecords();
             const details = exerciseBrowseSelect.closest('details');
             if (details) details.open = false;
         });
