feat: Added first iteration of exercises view

src/api/exercises.ts

@@ -0,0 +1,23 @@
+import { apiClient } from '@/api/client'
+import { extractErrorMessage } from '@/api/http'
+import type { PaginatedExercises } from '@/types/exercise'
+
+export interface GetExercisesParams {
+  page?: number
+  count?: number
+}
+
+export async function getExercisesApi(
+  params: GetExercisesParams = {},
+): Promise<PaginatedExercises> {
+  const query = new URLSearchParams()
+  if (params.page !== undefined) query.set('page', String(params.page))
+  if (params.count !== undefined) query.set('count', String(params.count))
+  const queryString = query.toString()
+
+  const response = await apiClient.get(`/exercises${queryString ? `?${queryString}` : ''}`)
+  if (!response.ok) {
+    throw new Error(await extractErrorMessage(response, 'Failed to load exercises'))
+  }
+  return response.json()
+}

src/components/BottomNav.vue

@@ -19,6 +19,24 @@ const listsStore = useListsStore()
         listsStore.pendingCount
       }}</span>
     </RouterLink>
+    <RouterLink to="/exercises" class="nav-item" active-class="is-active">
+      <svg
+        class="nav-icon"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <rect x="1" y="9" width="3" height="6" rx="1" />
+        <rect x="4.5" y="7" width="2" height="10" rx="1" />
+        <line x1="6.5" y1="12" x2="17.5" y2="12" />
+        <rect x="17.5" y="7" width="2" height="10" rx="1" />
+        <rect x="20" y="9" width="3" height="6" rx="1" />
+      </svg>
+      <span class="nav-label">Exercises</span>
+    </RouterLink>
     <RouterLink to="/account" class="nav-item" active-class="is-active">
       <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
         <circle cx="12" cy="12" r="3.2" />

src/components/ExerciseCard.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Exercise } from '@/types/exercise'
+import { EQUIPMENT_LABELS, LOAD_LABELS, METRIC_LABELS } from '@/types/exercise'
+
+const props = defineProps<{ exercise: Exercise }>()
+const emit = defineEmits<{
+  select: [id: string]
+}>()
+
+const equipmentLabels = computed(
+  () => props.exercise.equipment?.map((equipment) => EQUIPMENT_LABELS[equipment]) ?? [],
+)
+const loadLabel = computed(() =>
+  props.exercise.load !== undefined ? LOAD_LABELS[props.exercise.load] : null,
+)
+const metricLabel = computed(() =>
+  props.exercise.metric !== undefined ? METRIC_LABELS[props.exercise.metric] : null,
+)
+
+function handleClick() {
+  emit('select', props.exercise.id)
+}
+</script>
+
+<template>
+  <button type="button" class="exercise-card card" @click="handleClick">
+    <div class="exercise-card-main">
+      <h3>{{ exercise.name }}</h3>
+      <p v-if="exercise.notes" class="notes">{{ exercise.notes }}</p>
+      <div v-if="loadLabel || metricLabel || equipmentLabels.length > 0" class="tags">
+        <span v-if="loadLabel" class="tag tag-accent">{{ loadLabel }}</span>
+        <span v-if="metricLabel" class="tag tag-accent">{{ metricLabel }}</span>
+        <span v-for="equipment in equipmentLabels" :key="equipment" class="tag">{{
+          equipment
+        }}</span>
+      </div>
+    </div>
+    <span class="chevron">›</span>
+  </button>
+</template>
+
+<style scoped>
+.exercise-card {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.85rem 1rem;
+  color: inherit;
+  background-color: var(--c-bg-soft);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 0.15s ease-in-out;
+}
+
+.exercise-card:hover {
+  border-color: var(--c-border-hover);
+}
+
+.exercise-card-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.exercise-card-main h3 {
+  font-size: 1.02rem;
+  margin-bottom: 0.2rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.notes {
+  font-size: 0.8rem;
+  color: var(--c-text-soft);
+  margin-bottom: 0.4rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+.tag {
+  font-size: 0.68rem;
+  font-weight: 500;
+  padding: 0.15rem 0.5rem;
+  border-radius: 999px;
+  background-color: var(--c-bg-mute);
+  color: var(--c-text-soft);
+}
+
+.tag-accent {
+  background-color: var(--c-accent-bg);
+  color: var(--c-accent-strong);
+}
+
+.chevron {
+  flex-shrink: 0;
+  color: var(--c-text-soft);
+  font-size: 1.3rem;
+  line-height: 1;
+  padding-right: 0.25rem;
+}
+</style>

src/router/index.ts

@@ -18,6 +18,12 @@ const router = createRouter({
       meta: { requiresAuth: true },
       props: true,
     },
+    {
+      path: '/exercises',
+      name: 'exercises',
+      component: () => import('../views/ExercisesView.vue'),
+      meta: { requiresAuth: true },
+    },
     {
       path: '/login',
       name: 'login',

src/types/exercise.ts

@@ -0,0 +1,62 @@
+export enum Equipment {
+  Unknown = 0,
+  Floor = 1,
+  Rings = 2,
+  PullUpBar = 3,
+  ParallelBars = 4,
+  LowBar = 5,
+  Parallettes = 6,
+  ResistanceBand = 7,
+}
+
+export enum Load {
+  Unknown = 0,
+  Bodyweight = 1,
+  External = 2,
+}
+
+export enum Metric {
+  Unknown = 0,
+  Reps = 1,
+  Seconds = 2,
+}
+
+export const EQUIPMENT_LABELS: Record<Equipment, string> = {
+  [Equipment.Unknown]: 'Unknown',
+  [Equipment.Floor]: 'Floor',
+  [Equipment.Rings]: 'Rings',
+  [Equipment.PullUpBar]: 'Pull-up bar',
+  [Equipment.ParallelBars]: 'Parallel bars',
+  [Equipment.LowBar]: 'Low bar',
+  [Equipment.Parallettes]: 'Parallettes',
+  [Equipment.ResistanceBand]: 'Resistance band',
+}
+
+export const LOAD_LABELS: Record<Load, string> = {
+  [Load.Unknown]: 'Unknown',
+  [Load.Bodyweight]: 'Bodyweight',
+  [Load.External]: 'External',
+}
+
+export const METRIC_LABELS: Record<Metric, string> = {
+  [Metric.Unknown]: 'Unknown',
+  [Metric.Reps]: 'Reps',
+  [Metric.Seconds]: 'Seconds',
+}
+
+export interface Exercise {
+  id: string
+  name: string
+  notes?: string
+  equipment?: Equipment[]
+  load?: Load
+  metric?: Metric
+  tags?: string[]
+  modified_at?: string
+}
+
+export interface PaginatedExercises {
+  data: Exercise[]
+  total: number
+  count: number
+}

src/views/ExercisesView.vue

@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { getExercisesApi } from '@/api/exercises'
+import type { Exercise } from '@/types/exercise'
+import ExerciseCard from '@/components/ExerciseCard.vue'
+
+const PAGE_SIZE = 20
+
+const exercises = ref<Exercise[]>([])
+const page = ref(1)
+const total = ref(0)
+const isLoading = ref(false)
+const error = ref('')
+
+const totalPages = computed(() => Math.max(1, Math.ceil(total.value / PAGE_SIZE)))
+const showPagination = computed(() => totalPages.value > 1)
+
+onMounted(() => {
+  void loadExercises()
+})
+
+async function loadExercises() {
+  error.value = ''
+  isLoading.value = true
+  try {
+    const response = await getExercisesApi({ page: page.value, count: PAGE_SIZE })
+    exercises.value = response.data
+    total.value = response.total
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Failed to load exercises'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function goToPage(target: number) {
+  if (target < 1 || target > totalPages.value || target === page.value || isLoading.value) {
+    return
+  }
+  page.value = target
+  await loadExercises()
+}
+
+// No workout/workout-template flow exists yet to receive a selection; this
+// is the attachment point future "add exercise to workout" UI will use.
+function handleSelectExercise() {}
+</script>
+
+<template>
+  <main class="page">
+    <h1>Exercises</h1>
+
+    <p v-if="error" class="banner banner-error">{{ error }}</p>
+
+    <p v-if="isLoading && exercises.length === 0" class="loading-text">Loading exercises…</p>
+
+    <ul v-else-if="exercises.length > 0" class="exercises">
+      <li v-for="exercise in exercises" :key="exercise.id">
+        <ExerciseCard :exercise="exercise" @select="handleSelectExercise" />
+      </li>
+    </ul>
+
+    <div v-else class="empty-state">
+      <p>No exercises yet</p>
+    </div>
+
+    <div v-if="showPagination" class="pagination">
+      <button
+        type="button"
+        class="page-btn"
+        :disabled="page <= 1 || isLoading"
+        aria-label="Previous page"
+        @click="goToPage(page - 1)"
+      >
+        ‹
+      </button>
+      <span class="pagination-info mono-num"
+        >Page {{ page }} of {{ totalPages }} · {{ total }} total</span
+      >
+      <button
+        type="button"
+        class="page-btn"
+        :disabled="page >= totalPages || isLoading"
+        aria-label="Next page"
+        @click="goToPage(page + 1)"
+      >
+        ›
+      </button>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+h1 {
+  font-size: 1.4rem;
+  margin-bottom: 1rem;
+}
+
+.loading-text,
+.empty-state {
+  color: var(--c-text-soft);
+  font-size: 0.9rem;
+}
+
+.empty-state {
+  text-align: center;
+  padding: 3rem 1rem;
+}
+
+.exercises {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  margin-top: 1.25rem;
+}
+
+.pagination-info {
+  font-size: 0.78rem;
+  color: var(--c-text-soft);
+}
+
+.page-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  background: none;
+  border: 1px solid var(--c-border);
+  border-radius: var(--radius-sm);
+  color: var(--c-text);
+  font-size: 1rem;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.page-btn:hover:not(:disabled) {
+  border-color: var(--c-border-hover);
+  color: var(--c-heading);
+}
+
+.page-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+</style>