From 72641c0fb67b37eab768e48a8b2a51ba98df6bbb Mon Sep 17 00:00:00 2001
From: Jan-Henrik Bruhn <hi@jhbruhn.de>
Date: Sun, 7 Dec 2025 13:09:50 +0100
Subject: [PATCH] Fix button states to prevent actions during ongoing
 operations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- FileUpload: Disable "Choose PES File" button during upload
- ProgressMonitor: Disable Start/Resume/Trace buttons during pattern deletion
- Add disabled states with opacity-50 and cursor-not-allowed styling

Prevents race conditions and confusing UI states when operations are in progress.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/FileUpload.tsx      | 4 ++--
 src/components/ProgressMonitor.tsx | 9 ++++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index 3a9df8e..d959594 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -178,12 +178,12 @@ export function FileUpload({
           onChange={handleFileChange}
           id="file-input"
           className="hidden"
-          disabled={!pyodideReady || isLoading || patternUploaded}
+          disabled={!pyodideReady || isLoading || patternUploaded || isUploading}
         />
         <label
           htmlFor="file-input"
           className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded font-semibold text-xs transition-all ${
-            !pyodideReady || isLoading || patternUploaded
+            !pyodideReady || isLoading || patternUploaded || isUploading
               ? 'opacity-50 cursor-not-allowed bg-gray-400 dark:bg-gray-600 text-white'
               : 'cursor-pointer bg-gray-600 dark:bg-gray-700 text-white hover:bg-gray-700 dark:hover:bg-gray-600'
           }`}
diff --git a/src/components/ProgressMonitor.tsx b/src/components/ProgressMonitor.tsx
index 87a64de..e4aac84 100644
--- a/src/components/ProgressMonitor.tsx
+++ b/src/components/ProgressMonitor.tsx
@@ -274,7 +274,8 @@ export function ProgressMonitor({
         {canResumeSewing(machineStatus) && (
           <button
             onClick={onResumeSewing}
-            className="flex items-center gap-2 px-3 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded font-semibold text-xs hover:bg-blue-700 dark:hover:bg-blue-600 active:bg-blue-800 dark:active:bg-blue-500 transition-colors cursor-pointer"
+            disabled={isDeleting}
+            className="flex items-center gap-2 px-3 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded font-semibold text-xs hover:bg-blue-700 dark:hover:bg-blue-600 active:bg-blue-800 dark:active:bg-blue-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
             aria-label="Resume sewing the current pattern"
           >
             <PlayIcon className="w-3.5 h-3.5" />
@@ -286,7 +287,8 @@ export function ProgressMonitor({
         {canStartSewing(machineStatus) && !canResumeSewing(machineStatus) && (
           <button
             onClick={onStartSewing}
-            className="px-3 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded font-semibold text-xs hover:bg-blue-700 dark:hover:bg-blue-600 active:bg-blue-800 dark:active:bg-blue-500 transition-colors cursor-pointer"
+            disabled={isDeleting}
+            className="px-3 py-2 bg-blue-600 dark:bg-blue-700 text-white rounded font-semibold text-xs hover:bg-blue-700 dark:hover:bg-blue-600 active:bg-blue-800 dark:active:bg-blue-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
             aria-label="Start sewing the pattern"
           >
             Start Sewing
@@ -297,7 +299,8 @@ export function ProgressMonitor({
         {canStartMaskTrace(machineStatus) && (
           <button
             onClick={onStartMaskTrace}
-            className="px-3 py-2 bg-gray-600 dark:bg-gray-700 text-white rounded font-semibold text-xs hover:bg-gray-700 dark:hover:bg-gray-600 active:bg-gray-800 dark:active:bg-gray-500 transition-colors cursor-pointer"
+            disabled={isDeleting}
+            className="px-3 py-2 bg-gray-600 dark:bg-gray-700 text-white rounded font-semibold text-xs hover:bg-gray-700 dark:hover:bg-gray-600 active:bg-gray-800 dark:active:bg-gray-500 transition-colors cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
             aria-label={isMaskTraceComplete ? 'Start mask trace again' : 'Start mask trace'}
           >
             {isMaskTraceComplete ? 'Trace Again' : 'Start Mask Trace'}