Remove the redundant "Upload Complete!" green banner that appeared at
the bottom of the Pattern File section. The top blue banner "Pattern
uploaded successfully!" already provides this information along with
additional context about the locked state.
This eliminates visual clutter and duplicate messaging while keeping
the more informative message that explains the pattern is locked.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Fix UI delay issue where buttons remained clickable during BLE communication
setup. Now provides instant visual feedback when operations begin.
Changes:
- Add isUploading and isDeleting state tracking in useBrotherMachine hook
- Set loading states immediately on button click, before BLE communication
- Update FileUpload component to disable upload button and show spinner
- Update ProgressMonitor to disable delete button with loading indicator
- Add PatternCacheService.deletePattern() method for proper cache cleanup
- Pass loading state props through App.tsx to child components
The UI now responds immediately with disabled buttons and loading spinners,
preventing double-clicks and providing clear feedback during the initial
BLE setup period before progress reporting begins.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Dark Mode Implementation:
- Add Tailwind config with darkMode: 'media' for system preference detection
- Update all 9 components with 200+ dark mode variants
- Semantic color backgrounds with semi-transparent overlays in dark mode
- Proper text contrast (gray-900/gray-100) for readability
- Enhanced borders, shadows, and focus rings for dark backgrounds
Component Dark Mode Updates:
- App.tsx: Header gradient, error banners, empty states
- MachineConnection: Status badges with proper dark variants for all states
- FileUpload: Pattern info cards, thread swatches, upload progress
- PatternCanvas: Canvas background, overlays, zoom controls
- ProgressMonitor: Color blocks, progress bars, state indicators with colored icons
- NextStepGuide: All status boxes (blue/yellow/cyan/green/red)
- WorkflowStepper: Progress indicators and step states
- ConfirmDialog: Modal overlays and dialog backgrounds
- KonvaComponents: Grid lines and origin markers
Pattern Visibility Improvements:
- Pattern shows full opacity (1.0) when unlocked for easy positioning
- Pattern shows reduced opacity (0.75) for unstitched areas when locked/uploading
- Helps distinguish completed vs pending stitches during sewing
- Pattern locks during upload to prevent accidental repositioning
- Canvas dragging disabled when pattern is uploading or uploaded
Status Indicator Enhancements:
- Machine status badges: All states (idle/active/waiting/complete/error) have dark variants
- Progress monitor state icons: Colored icons (blue/yellow/green/red) in both modes
- Color blocks: Proper backgrounds and borders for completed/current/pending states
- All semantic colors maintain visibility and meaning in dark mode
Canvas Lock Behavior:
- Pattern locked during upload (uploadProgress > 0 && < 100)
- Pattern locked after upload (patternUploaded = true)
- Lock indicator shows amber background with lock icon
- Cursor changes prevent confusion about draggability
- Full opacity during positioning, transparency during progress tracking
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Loading State Improvements:
- Add SkeletonLoader component with pattern info, canvas, and connection skeletons
- Show loading spinner on file selection and during pattern upload
- Display upload progress with enhanced progress bar and percentage
- Add success confirmation message when upload completes
- Show thread color preview dots inline with pattern info (up to 5 colors)
Visual Polish & Animations:
- Add custom animations: fadeIn, slideInRight, pulseGlow, skeleton-loading
- Enhance all cards with subtle hover shadow effects
- Improve header with richer gradient (blue-600 → blue-700 → blue-800)
- Polish error messages with icons and improved layouts
- Enhance empty state with decorative patterns and feature highlights
- Add smooth transitions to all NextStepGuide states
- Current color block pulses with blue glow animation
- Color blocks have hover states for better interactivity
Pattern Upload & Lock Functionality:
- Hide upload button after pattern is uploaded (patternUploaded && uploadProgress === 100)
- Disable pattern dragging when uploaded with visual lock indicator
- Pattern position overlay shows amber background with lock icon when locked
- Pattern remains in canvas after deletion for re-editing and re-upload
- Delete pattern from cache when deleting from machine to prevent auto-resume
- Add LockClosedIcon to indicate locked pattern state
Pattern Management:
- Keep pattern data in UI after deletion for repositioning and re-uploading
- Clear machine-related state but preserve pattern visualization
- Reset upload progress and pattern uploaded state on deletion
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Visual enhancements:
- Create design tokens system with semantic colors (primary, success, warning, danger, info, neutral)
- Enhanced button states with hover shadow, active press feedback, and focus rings
- Improved WorkflowStepper with larger circles, gradient progress bar, and green completion indicators
- Enhanced color blocks with larger swatches (w-8 h-8), better shadows, and animated current indicator
- Reorganized ProgressMonitor layout - progress/controls on left, color blocks on right
- Moved disconnect button to header as small, compact button
Accessibility improvements:
- Added comprehensive ARIA labels to all interactive elements
- Implemented proper focus states with color-matched rings
- Added role attributes for navigation and progress elements
- Enhanced screen reader support with descriptive labels
- All buttons now meet 44px touch target requirements
Button improvements across all components:
- Standardized to rounded-lg for softer appearance
- Added hover:shadow-lg for depth perception
- Added active:scale-[0.98] for tactile feedback
- Clean disabled states without grayscale filter
- Keyboard navigation with visible focus rings
- Consistent transition timing (150ms)
Typography:
- Maintained minimum 12px text size throughout
- Proper hierarchy with defined heading sizes
- Improved readability with consistent weights
Documentation:
- Created comprehensive UI design analysis
- Implementation guides and checklists
- Before/after examples
- Design tokens reference
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Major fixes:
- Fix PEN data encoding to properly mark color changes and end markers
- COLOR_END (0x03) for intermediate color blocks
- DATA_END (0x05) for the final stitch only
- Machine now correctly reads total stitch count across all color blocks
- Reset uploadProgress when pattern is deleted to re-enable upload button
- Allow pattern deletion during WAITING states
- Allow pattern upload in COMPLETE states
- Fix pattern state tracking to reset when patternInfo is null
UI improvements:
- Integrate workflow stepper into compact header
- Change app title to "SKiTCH Controller"
- Reduce header size from ~200px to ~70px
- Make Sewing Progress section more compact with two-column layout
- Replace emojis with Heroicons throughout
- Reorganize action buttons with better visual hierarchy
- Add cursor-pointer to all buttons for better UX
- Fix cached pattern not showing info in Pattern File box
- Remove duplicate status messages (keep only state visual indicator)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Install @heroicons/react package
- Replace text symbols with proper heroicons:
- Zoom controls: PlusIcon, MinusIcon, ArrowPathIcon
- Color block status: CheckCircleIcon, ArrowRightIcon, CircleStackIcon
- Resume sewing: PlayIcon
- Remove hover:-translate-y-0.5 and active:translate-y-0 from all buttons
- Buttons now have stable hover states (color change and shadow only)
- Improved UI consistency and accessibility with vector icons
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Install Tailwind CSS and configure Vite plugin
- Replace all custom CSS classes with Tailwind utility classes
- Migrate all components to use Tailwind styling:
- App.tsx: Responsive layout with modern styling
- MachineConnection: Status badges and action buttons
- FileUpload: File input and progress bars with shimmer effect
- ProgressMonitor: Color blocks, state indicators, and actions
- ConfirmDialog: Modal overlay with backdrop blur
- PatternCanvas: Canvas viewer with floating controls
- Add custom shimmer animation for progress bars
- Fix canvas resizing issue during zoom operations:
- Add ResizeObserver for stable container dimensions
- Use clientWidth/clientHeight instead of offset dimensions
- Cache container size to prevent layout thrashing
- Improve zoom button behavior to zoom towards viewport center
- Maintain consistent design with shadows, borders, and transitions
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Replace vanilla canvas with Konva.js for better interactivity
- Add pan and zoom functionality (mouse wheel zoom, drag to pan)
- Make pattern draggable within hoop coordinate system
- Center canvas on embroidery origin (0,0)
- Default zoom shows entire 100x100mm hoop
- Pass user-defined pattern offset to LAYOUT command
- Replace auto-centering with manual pattern positioning
- Add visual overlays for thread legend, dimensions, pattern position, and zoom controls
- Fix effect dependencies to prevent drag interruption on machine status updates
- Memoize callbacks to prevent unnecessary re-renders
- Create konvaRenderers.ts utility for rendering grid, hoop, stitches, etc.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
