From 9696df2ff445be89c81bcc190f167300830e59b8 Mon Sep 17 00:00:00 2001
From: Christian Carlsson <hello@crlssn.com>
Date: Thu, 19 Dec 2024 09:48:18 +0000
Subject: [PATCH] feat: web: display exercise label (#257)

---
 web/src/ui/exercises/CreateExercise.vue | 2 +-
 web/src/ui/exercises/ListExercises.vue  | 5 ++++-
 web/src/ui/routines/CreateRoutine.vue   | 5 ++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/src/ui/exercises/CreateExercise.vue b/web/src/ui/exercises/CreateExercise.vue
index 8255fb7f..29cb7dab 100644
--- a/web/src/ui/exercises/CreateExercise.vue
+++ b/web/src/ui/exercises/CreateExercise.vue
@@ -48,6 +48,6 @@ const onSubmit = async () => {
       />
     </AppList>
 
-    <AppButton text="Create" type="submit" colour="primary"> Save Exercise </AppButton>
+    <AppButton text="Create" type="submit" colour="primary">Save Exercise</AppButton>
   </form>
 </template>
diff --git a/web/src/ui/exercises/ListExercises.vue b/web/src/ui/exercises/ListExercises.vue
index 5580f45e..538b4410 100644
--- a/web/src/ui/exercises/ListExercises.vue
+++ b/web/src/ui/exercises/ListExercises.vue
@@ -39,7 +39,10 @@ const fetchExercises = async () => {
       :key="exercise.id"
       :to="`/exercises/${exercise.id}`"
     >
-      {{ exercise.name }}
+      <p>
+        {{ exercise.name }}
+        <small v-if="exercise.label" class="text-sm text-gray-500">{{ exercise.label }}</small>
+      </p>
       <ChevronRightIcon class="size-8 text-gray-500" />
     </AppListItemLink>
   </AppList>
diff --git a/web/src/ui/routines/CreateRoutine.vue b/web/src/ui/routines/CreateRoutine.vue
index eb8b6406..0ec371ab 100644
--- a/web/src/ui/routines/CreateRoutine.vue
+++ b/web/src/ui/routines/CreateRoutine.vue
@@ -61,7 +61,10 @@ const onCreateRoutine = async () => {
     <AppList :can-fetch="hasMorePages" @fetch="fetchExercises">
       <AppListItem v-for="exercise in exercises" :key="exercise.id">
         <div class="flex justify-between items-center w-full">
-          {{ exercise.name }}
+          <div>
+            {{ exercise.name }}
+            <small v-if="exercise.label" class="text-sm text-gray-500">{{ exercise.label }}</small>
+          </div>
           <Switch
             :class="[
               exerciseIDs.includes(exercise.id) ? 'bg-indigo-600' : 'bg-gray-200',