From b31ab97cd4e91b7ab7b34cf143849f0b6434a316 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Thu, 26 Feb 2026 23:48:08 +1100
Subject: [PATCH] Allow users to toggle to progress table view when selecting
 an exercise

---
 templates/partials/exercise_history.html | 22 ++++++++++++++++++++--
 templates/partials/new_set_form.html     |  2 +-
 templates/partials/sparkline.html        | 24 ++++++++++++++++++++----
 3 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/templates/partials/exercise_history.html b/templates/partials/exercise_history.html
index 98d4835..1240abf 100644
--- a/templates/partials/exercise_history.html
+++ b/templates/partials/exercise_history.html
@@ -1,7 +1,25 @@
 {% if offset == 0 %}
-<div
+<div id="exercise-history-container"
     class="w-full bg-gray-50 dark:bg-gray-800 p-4 border-t border-gray-200 dark:border-gray-700 shadow-inner overflow-x-auto">
-    <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">History</h4>
+    <div class="flex items-center justify-between sm:justify-center relative mb-4">
+        <div class="flex items-center justify-center gap-2 w-full">
+            <h4 class="text-sm font-semibold text-gray-900 dark:text-white">History</h4>
+        </div>
+        <div class="absolute right-0 z-10">
+            <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="#exercise-history-container" hx-swap="outerHTML">
+                <svg class="w-5 h-5 border border-gray-300 rounded p-0.5" 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>
+    </div>
     <table class="w-full text-left text-sm text-gray-500 dark:text-gray-400">
         <thead class="text-xs text-gray-700 uppercase bg-gray-100 dark:bg-gray-700 dark:text-gray-400">
             <tr>
diff --git a/templates/partials/new_set_form.html b/templates/partials/new_set_form.html
index 6ba4642..197c04d 100644
--- a/templates/partials/new_set_form.html
+++ b/templates/partials/new_set_form.html
@@ -71,7 +71,7 @@
 
     {% if exercise_id %}
     <div class="flex items-center justify-center">
-        <div class="md:w-full max-w-screen-sm">
+        <div class="w-full">
             <div class="hidden"
                 hx-get="{{ url_for('get_exercise_progress_for_user', person_id=person_id, exercise_id=exercise_id) }}"
                 hx-trigger="load" hx-target="this" hx-swap="outerHTML">
diff --git a/templates/partials/sparkline.html b/templates/partials/sparkline.html
index dd4d427..4b19643 100644
--- a/templates/partials/sparkline.html
+++ b/templates/partials/sparkline.html
@@ -46,10 +46,26 @@
     <div id="popover-{{ unique_id }}" class="absolute t-0 r-0 hidden bg-white border border-gray-300 p-2 z-10">
         <!-- Popover content will be dynamically inserted here -->
     </div>
-    <div class="flex items-center justify-center gap-2 mb-1">
-        <h4 class="text-l font-semibold text-blue-400">{{ title }}</h4>
-        <div hx-get="{{ url_for('workout.get_topset_achievements', person_id=person_id, workout_id=latest_workout_id, topset_id=latest_topset_id) }}"
-            hx-trigger="load" hx-target="this" hx-swap="innerHTML" class="flex items-center">
+    <div class="flex items-center justify-between sm:justify-center relative mb-1">
+        <div class="flex items-center justify-center gap-2 w-full">
+            <h4 class="text-l font-semibold text-blue-400">{{ title }}</h4>
+            <div hx-get="{{ url_for('workout.get_topset_achievements', person_id=person_id, workout_id=latest_workout_id, topset_id=latest_topset_id) }}"
+                hx-trigger="load" hx-target="this" hx-swap="innerHTML" class="flex items-center">
+            </div>
+        </div>
+        <div class="absolute right-0 z-10">
+            <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 History"
+                hx-get="{{ url_for('workout.get_exercise_history', person_id=person_id, exercise_id=exercise_id, source_topset_id=latest_topset_id) }}"
+                hx-target="#svg-plot-{{ unique_id }}" hx-swap="outerHTML">
+                <svg class="w-5 h-5 border border-gray-300 rounded p-0.5" 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="M4 6h16M4 10h16M4 14h16M4 18h16"></path>
+                </svg>
+                <span class="sr-only">Show History</span>
+            </button>
         </div>
     </div>
     <h2 class="text-xs font-semibold text-blue-200 mb-1 text-center">