From a5f4bf650ca89b608e43b5df2fd827cdd5ddf268 Mon Sep 17 00:00:00 2001
From: Samuel Prevost <samuel@infinic.com>
Date: Sat, 25 Apr 2026 16:54:00 +0200
Subject: [PATCH] =?UTF-8?q?feat(measure):=20split=20toolbar=20into=20back?=
 =?UTF-8?q?=20=C2=B7=20downloads=20=C2=B7=20start-over=20zones?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Back collapses to a leading arrow icon, downloads stay in the middle,
and "New Image" moves to the far right behind a labeled "Start over"
separator. The reset button now uses a dashed transparent outline so
it reads as a deliberate, low-frequency action and is harder to hit
while reaching for a download.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/MeasureViewer.vue | 66 ++++++++++++++++++++++++--------
 1 file changed, 51 insertions(+), 15 deletions(-)

diff --git a/src/components/MeasureViewer.vue b/src/components/MeasureViewer.vue
index ad1f1c8..0acf3a4 100644
--- a/src/components/MeasureViewer.vue
+++ b/src/components/MeasureViewer.vue
@@ -211,14 +211,40 @@ async function downloadMeasured(scope: "full" | "view") {
     <!-- Break out of <main>'s max-w-7xl so the Measure step spans the full
          viewport width — annotation work benefits from the extra room. -->
     <div class="relative left-1/2 w-screen -translate-x-1/2 space-y-4 px-4">
-        <!-- Top header with downloads + back -->
+        <div>
+            <h2 class="text-xl font-semibold">Measure</h2>
+            <p class="text-sm text-muted-foreground">
+                Annotate the corrected image and download.
+            </p>
+        </div>
+
+        <!-- Toolbar row: Back arrow on far left, downloads in the middle,
+             "Start over" zone (dashed New Image) on the far right. -->
         <div class="flex flex-wrap items-center justify-between gap-3">
-            <div>
-                <h2 class="text-xl font-semibold">Measure</h2>
-                <p class="text-sm text-muted-foreground">
-                    Annotate the corrected image and download.
-                </p>
-            </div>
+            <Button
+                variant="ghost"
+                size="icon"
+                class="shrink-0"
+                aria-label="Back to Deskew"
+                title="Back to Deskew"
+                @click="store.goToStep(4)"
+            >
+                <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                >
+                    <path d="M19 12H5" />
+                    <path d="m12 19-7-7 7-7" />
+                </svg>
+            </Button>
+
             <div class="flex flex-wrap items-center gap-3">
                 <TooltipProvider>
                     <Tooltip>
@@ -245,14 +271,6 @@ async function downloadMeasured(scope: "full" | "view") {
                     </Tooltip>
                 </TooltipProvider>
                 <div class="mx-1 h-6 w-px bg-border" />
-                <Button variant="outline" @click="store.goToStep(4)"
-                    >Back</Button
-                >
-                <Button
-                    variant="outline"
-                    @click="store.reset()"
-                    >New Image</Button
-                >
                 <Button @click="download">
                     <svg
                         xmlns="http://www.w3.org/2000/svg"
@@ -349,6 +367,24 @@ async function downloadMeasured(scope: "full" | "view") {
                     </Tooltip>
                 </TooltipProvider>
             </div>
+
+            <!-- "Start over" zone: separator + label make it visually
+                 distinct from the action buttons; dashed/transparent
+                 styling on the button itself adds friction so it isn't
+                 mis-clicked while reaching for a download. -->
+            <div class="flex items-center gap-3">
+                <div class="h-6 w-px bg-border" />
+                <span
+                    class="text-xs font-medium uppercase tracking-wider text-muted-foreground/70"
+                    >Start over</span
+                >
+                <Button
+                    variant="outline"
+                    class="border-dashed bg-transparent text-muted-foreground hover:bg-muted/40 hover:text-foreground"
+                    @click="store.reset()"
+                    >New Image</Button
+                >
+            </div>
         </div>
 
         <p v-if="error" class="text-sm text-destructive">