jan-henrik/respira
1
0
Fork 0
mirror of https://github.com/jhbruhn/respira.git synced 2026-01-27 10:23:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix button states to prevent actions during ongoing operations

Browse source 
- 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>
This commit is contained in:
Jan-Henrik 2025-12-07 13:09:50 +01:00
parent 77c4c2fcdb
commit 72641c0fb6
2 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/FileUpload.tsx
View file

@ -178,12 +178,12 @@ export function FileUpload({
onChange={handleFileChange} onChange={handleFileChange}
id="file-input" id="file-input"
className="hidden" className="hidden"
disabled={!pyodideReady || isLoading || patternUploaded} disabled={!pyodideReady || isLoading || patternUploaded || isUploading}
/> />
<label <label
htmlFor="file-input" htmlFor="file-input"
className={`flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded font-semibold text-xs transition-all ${ 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' ? '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' : 'cursor-pointer bg-gray-600 dark:bg-gray-700 text-white hover:bg-gray-700 dark:hover:bg-gray-600'
}`} }`}

9
src/components/ProgressMonitor.tsx
View file

@ -274,7 +274,8 @@ export function ProgressMonitor({
{canResumeSewing(machineStatus) && ( {canResumeSewing(machineStatus) && (
<button <button
onClick={onResumeSewing} 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" aria-label="Resume sewing the current pattern"
> >
<PlayIcon className="w-3.5 h-3.5" /> <PlayIcon className="w-3.5 h-3.5" />
@ -286,7 +287,8 @@ export function ProgressMonitor({
{canStartSewing(machineStatus) && !canResumeSewing(machineStatus) && ( {canStartSewing(machineStatus) && !canResumeSewing(machineStatus) && (
<button <button
onClick={onStartSewing} 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" aria-label="Start sewing the pattern"
> >
Start Sewing Start Sewing
@ -297,7 +299,8 @@ export function ProgressMonitor({
{canStartMaskTrace(machineStatus) && ( {canStartMaskTrace(machineStatus) && (
<button <button
onClick={onStartMaskTrace} 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'} aria-label={isMaskTraceComplete ? 'Start mask trace again' : 'Start mask trace'}
> >
{isMaskTraceComplete ? 'Trace Again' : 'Start Mask Trace'} {isMaskTraceComplete ? 'Trace Again' : 'Start Mask Trace'}