From 23fecfb7380b0c068c3ee31e44dbc2a818f341f7 Mon Sep 17 00:00:00 2001
From: Samuel Prevost <samuel@infinic.com>
Date: Tue, 14 Apr 2026 23:24:09 +0200
Subject: [PATCH] fix(nav): make step indicators clickable with real button
 elements

Badge Primitive (<span>) was swallowing clicks. Reachable steps now
render as <button> with hover effects, current/unreached as Badge.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/StepIndicator.vue | 45 +++++++++++++++++++-------------
 1 file changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/components/StepIndicator.vue b/src/components/StepIndicator.vue
index d82525d..e2cea16 100644
--- a/src/components/StepIndicator.vue
+++ b/src/components/StepIndicator.vue
@@ -1,41 +1,50 @@
 <script setup lang="ts">
 import { useAppStore } from "@/stores/app"
+import type { AppStep } from "@/types"
 import { Badge } from "@/components/ui/badge"
 
 const store = useAppStore()
 
-const steps = [
-    { num: 1 as const, label: "Upload" },
-    { num: 2 as const, label: "EXIF" },
-    { num: 3 as const, label: "Datums" },
-    { num: 4 as const, label: "Result" },
+const steps: { num: AppStep; label: string }[] = [
+    { num: 1, label: "Upload" },
+    { num: 2, label: "EXIF" },
+    { num: 3, label: "Datums" },
+    { num: 4, label: "Result" },
 ]
+
+function isReachable(num: AppStep): boolean {
+    return num <= store.maxStepReached && num !== store.currentStep
+}
+
+function handleClick(num: AppStep) {
+    if (isReachable(num)) {
+        store.goToStep(num)
+    }
+}
 </script>
 
 <template>
     <nav class="flex items-center gap-1" aria-label="Steps">
         <template v-for="(step, i) in steps" :key="step.num">
+            <button
+                v-if="isReachable(step.num)"
+                class="inline-flex items-center rounded-md border border-border px-2 py-0.5 font-mono text-xs font-medium transition-colors hover:bg-accent hover:text-accent-foreground"
+                @click="handleClick(step.num)"
+            >
+                {{ step.num }}.{{ step.label }}
+            </button>
             <Badge
+                v-else
                 :variant="
                     store.currentStep === step.num
                         ? 'default'
                         : 'outline'
                 "
-                class="select-none font-mono text-xs"
+                class="cursor-default select-none font-mono text-xs"
                 :class="{
-                    'opacity-40': store.currentStep < step.num,
-                    'cursor-pointer hover:bg-accent':
-                        step.num <= store.maxStepReached
-                        && step.num !== store.currentStep,
-                    'cursor-default':
-                        step.num > store.maxStepReached
-                        || step.num === store.currentStep,
+                    'opacity-40':
+                        step.num > store.maxStepReached,
                 }"
-                @click="
-                    step.num <= store.maxStepReached
-                        ? store.goToStep(step.num)
-                        : undefined
-                "
             >
                 {{ step.num }}.{{ step.label }}
             </Badge>