From 5e230a7bd2b56645608aeaa9024bc44df0bf123c Mon Sep 17 00:00:00 2001
From: patrick <patrickjaroszewski@protonmail.com>
Date: Thu, 14 May 2026 09:11:09 -0400
Subject: [PATCH] Move Clear All button inline with Download All

- Relocate to action buttons row
- Add red outline styling with solid fill on hover

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/routes/+page.svelte | 57 ++++++++++++++++++++++-------------------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 12a47d3..11adaeb 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -449,26 +449,9 @@
 						<h2 class="text-sm font-medium text-grey-500 uppercase tracking-wide">
 							Images ({imagesStore.images.length})
 						</h2>
-
-						<button
-							type="button"
-							class="
-								flex items-center gap-1.5
-								px-3 py-1.5
-								text-grey-500
-								hover:text-error hover:bg-error-light
-								rounded-md
-								text-sm font-medium
-								transition-colors duration-150
-							"
-							onclick={handleClearAll}
-						>
-							<Trash2 class="w-4 h-4" />
-							Clear All
-						</button>
 					</div>
 
-					<!-- View mode toggle and download button -->
+					<!-- View mode toggle and action buttons -->
 					<div class="flex flex-wrap items-center justify-between gap-3">
 						<div class="flex items-center gap-2">
 							<span class="text-xs font-medium text-grey-500 uppercase tracking-wide">View:</span>
@@ -512,25 +495,45 @@
 							</div>
 						</div>
 
-						{#if imagesStore.completeCount > 0}
+						<div class="flex items-center gap-2">
 							<button
 								type="button"
 								class="
-									flex items-center justify-center gap-2
+									flex items-center gap-1.5
 									px-4 py-2
-									bg-accent text-white
+									text-error
+									border border-error
 									rounded-md
 									text-sm font-medium
-									hover:bg-accent-hover
-									focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2
+									hover:bg-error hover:text-white
 									transition-colors duration-150
 								"
-								onclick={handleDownloadAll}
+								onclick={handleClearAll}
 							>
-								<Download class="w-4 h-4" />
-								Download All ({imagesStore.completeCount})
+								<Trash2 class="w-4 h-4" />
+								Clear All
 							</button>
-						{/if}
+
+							{#if imagesStore.completeCount > 0}
+								<button
+									type="button"
+									class="
+										flex items-center justify-center gap-2
+										px-4 py-2
+										bg-accent text-white
+										rounded-md
+										text-sm font-medium
+										hover:bg-accent-hover
+										focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2
+										transition-colors duration-150
+									"
+									onclick={handleDownloadAll}
+								>
+									<Download class="w-4 h-4" />
+									Download All ({imagesStore.completeCount})
+								</button>
+							{/if}
+						</div>
 					</div>
 				</div>