From ed4da082ce6703c5fff42f44b279d53871b3491d Mon Sep 17 00:00:00 2001
From: Samuel Prevost <samuel@infinic.com>
Date: Sat, 25 Apr 2026 16:50:16 +0200
Subject: [PATCH] feat(upload): move clear-cache to top-right with two-step
 confirm

The cache button now sits in the corner of the upload card so it's out
of the way of the drop zone. First click swaps the label to "Are you
sure?", second click within 4s clears; otherwise the prompt reverts.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/ImageUpload.vue | 106 ++++++++++++++++++++++-----------
 1 file changed, 70 insertions(+), 36 deletions(-)

diff --git a/src/components/ImageUpload.vue b/src/components/ImageUpload.vue
index 38deb54..9b215b0 100644
--- a/src/components/ImageUpload.vue
+++ b/src/components/ImageUpload.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue"
+import { ref, onMounted, onUnmounted } from "vue"
 import { useAppStore } from "@/stores/app"
 import { loadImage } from "@/lib/image-loader"
 import { extractExif } from "@/lib/exif"
@@ -21,17 +21,41 @@ const isDragging = ref(false)
 const error = ref("")
 const fileInput = ref<HTMLInputElement | null>(null)
 const cacheCount = ref(0)
+const confirmingClear = ref(false)
 
 const ACCEPTED = "image/*,.heic,.heif"
+// Auto-revert the "Are you sure?" prompt after this long of inactivity
+// so a stray first click can't be confirmed minutes later.
+const CLEAR_CONFIRM_TIMEOUT_MS = 4000
+
+let confirmTimer: ReturnType<typeof setTimeout> | null = null
 
 onMounted(() => {
     cacheCount.value = getCacheSize()
 })
 
-function handleClearCache() {
-    clearCache()
-    clearMeasurementCache()
-    cacheCount.value = 0
+onUnmounted(() => {
+    if (confirmTimer) clearTimeout(confirmTimer)
+})
+
+function handleClearCacheClick() {
+    if (confirmingClear.value) {
+        clearCache()
+        clearMeasurementCache()
+        cacheCount.value = 0
+        confirmingClear.value = false
+        if (confirmTimer) {
+            clearTimeout(confirmTimer)
+            confirmTimer = null
+        }
+        return
+    }
+    confirmingClear.value = true
+    if (confirmTimer) clearTimeout(confirmTimer)
+    confirmTimer = setTimeout(() => {
+        confirmingClear.value = false
+        confirmTimer = null
+    }, CLEAR_CONFIRM_TIMEOUT_MS)
 }
 
 async function handleFile(file: File) {
@@ -92,7 +116,47 @@ function onFileSelect(e: Event) {
 <template>
     <div class="flex min-h-[60vh] items-start justify-center pt-12">
         <div class="w-full max-w-2xl space-y-6">
-            <Card>
+            <Card class="relative">
+                <!-- Clear-cache lives top-right of the upload card so it's
+                     visible without scrolling but doesn't compete with the
+                     primary drop target. Two-step confirm: first click
+                     arms it; second click within
+                     CLEAR_CONFIRM_TIMEOUT_MS commits. -->
+                <Button
+                    v-if="cacheCount > 0"
+                    variant="ghost"
+                    size="sm"
+                    class="absolute right-2 top-2 h-7 gap-1.5 text-xs"
+                    :class="
+                        confirmingClear
+                            ? 'text-destructive hover:text-destructive'
+                            : 'text-muted-foreground/60 hover:text-destructive'
+                    "
+                    @click="handleClearCacheClick"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="12"
+                        height="12"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    >
+                        <path d="M3 6h18" />
+                        <path
+                            d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
+                        />
+                        <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+                    </svg>
+                    {{
+                        confirmingClear
+                            ? "Are you sure?"
+                            : `Clear cache (${String(cacheCount)})`
+                    }}
+                </Button>
                 <CardHeader class="text-center">
                     <CardTitle class="text-lg">Load Source Image</CardTitle>
                     <CardDescription>
@@ -170,36 +234,6 @@ function onFileSelect(e: Event) {
                 </p>
                 </CardContent>
             </Card>
-            <div
-                v-if="cacheCount > 0"
-                class="flex justify-end"
-            >
-                <Button
-                    variant="ghost"
-                    size="sm"
-                    class="h-7 gap-1.5 text-xs text-muted-foreground/60 hover:text-destructive"
-                    @click="handleClearCache"
-                >
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="12"
-                        height="12"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                    >
-                        <path d="M3 6h18" />
-                        <path
-                            d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
-                        />
-                        <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
-                    </svg>
-                    Clear cache ({{ cacheCount }})
-                </Button>
-            </div>
 
             <div class="space-y-2 text-left">
                 <p class="text-xs font-medium uppercase tracking-wider text-muted-foreground/70">Example</p>