feat: Add dismissible exercise progress graph to workout page

Adds a feature to view exercise progress directly from the workout page.

- Modifies `templates/partials/topset.html`.
- Adds a graph icon next to the exercise name in the topset list.
- Clicking the icon uses HTMX to fetch and display the progress graph for that exercise inline in a new table row.
- Implements a dismiss button using hyperscript to hide the graph after viewing.

templates/changelog/changelog.html

@@ -10,6 +10,22 @@
         <div class="prose max-w-none">
             <p>Updates and changes to the site will be documented here, with the most recent changes listed first.</p>
 
+            <!-- New Entry for Dismissible Exercise Graph -->
+            <hr class="my-6">
+            <h2 class="text-xl font-semibold mb-2">April 13, 2025</h2>
+            <ul class="list-disc pl-5 space-y-1">
+                <li>Added a dismissible exercise progress graph to the workout page:</li>
+                <ul class="list-disc pl-5 space-y-1">
+                    <li>Added a graph icon next to each exercise name in the topset list
+                        (`templates/partials/topset.html`).</li>
+                    <li>Clicking the icon loads the exercise progress graph inline using HTMX (`hx-get`, `hx-target`).
+                    </li>
+                    <li>Added a dismiss button (cross icon) to the loaded graph area.</li>
+                    <li>Implemented hyperscript (`_`) logic to show the dismiss button when the graph loads and clear
+                        the graph/hide the button when clicked.</li>
+                </ul>
+            </ul>
+
             <!-- New Entry for Data Export -->
             <hr class="my-6">
             <h2 class="text-xl font-semibold mb-2">April 12, 2025</h2>

templates/partials/topset.html

@@ -1,11 +1,24 @@
 <tr id="topset-{{ topset_id }}">
     <td class="p-0 sm:p-4 text-sm font-semibold text-gray-900 break-normal">
         {% if is_edit|default(false, true) == false %}
-        <span class="cursor-pointer" hx-get="{{ url_for('goto_tag') }}"
-            hx-vals='{"filter": "?exercise_id={{ exercise_id }}", "person_id" : "{{ person_id }}" }'
-            hx-target="#container" hx-swap="innerHTML" hx-push-url="true"
-            _='on click trigger closeModalWithoutRefresh'>{{ exercise_name
-            }}</span>
+        <div class="flex items-center space-x-2">
+            <span class="cursor-pointer" hx-get="{{ url_for('goto_tag') }}"
+                hx-vals='{"filter": "?exercise_id={{ exercise_id }}", "person_id" : "{{ person_id }}" }'
+                hx-target="#container" hx-swap="innerHTML" hx-push-url="true"
+                _='on click trigger closeModalWithoutRefresh'>{{ exercise_name }}</span>
+            <button
+                class="inline-flex justify-center p-1 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600"
+                title="Show Progress Graph"
+                hx-get="{{ url_for('get_exercise_progress_for_user', person_id=person_id, exercise_id=exercise_id) }}"
+                hx-target="#graph-content-{{ topset_id }}" hx-swap="innerHTML">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
+                </svg>
+                <span class="sr-only">Show Progress Graph</span>
+            </button>
+        </div>
         {% else %}
         <div class="w-full">
             <select name="exercise_id"
@@ -90,4 +103,34 @@
             {% endif %}
         </div>
     </td>
+</tr>
+{# Target row modified for dismissible graph #}
+<tr id="graph-target-{{ topset_id }}">
+    <td colspan="3" class="p-0 relative">
+        <div id="graph-content-{{ topset_id }}" class="graph-content-container" _="
+            on htmx:afterSwap
+                get the next <button.dismiss-button/>
+                if my.innerHTML is not empty and my.innerHTML is not ' '
+                    remove .hidden from it
+                else
+                    add .hidden to it
+                end
+            end">
+            <!-- Progress graph will be loaded here -->
+        </div>
+        <button
+            class="absolute top-1 right-1 p-1 bg-white rounded-full text-gray-500 hover:text-gray-700 hover:bg-gray-100 z-10 dismiss-button hidden"
+            title="Dismiss Graph" _="on click
+                     get #graph-content-{{ topset_id }}
+                     set its innerHTML to ''
+                     add .hidden to me
+                   end">
+            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path fill-rule="evenodd"
+                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                    clip-rule="evenodd"></path>
+            </svg>
+            <span class="sr-only">Dismiss Graph</span>
+        </button>
+    </td>
 </tr>