Description

Create the button component for adding new files following the multi-file editor design.

Requirements

• Plus icon with text "Add another file"
• Disabled state at 20 files with clear messaging
• Loading state while adding (brief animation)
• Tooltip explaining why button is disabled
• Consistent with shadcn/ui button design
• Full width on mobile, auto width on desktop
• Smooth hover and active states
• Keyboard accessible (Enter/Space to activate)

Acceptance Criteria

• Button renders with plus icon and text
• Disabled state at 20 file limit
• Disabled state shows custom cursor and opacity
• Tooltip shows "Maximum 20 files reached" when disabled
• Loading spinner shows briefly during add operation
• Click handler properly triggers parent callback
• Keyboard navigation works (focusable, Enter/Space activates)
• Responsive sizing (full width on mobile)
• Follows design system color tokens
• Smooth transitions for all states

UI States

Normal:
┌─────────────────────────────────────┐
│         ➕ Add another file          │
└─────────────────────────────────────┘

Hover:
┌─────────────────────────────────────┐
│         ➕ Add another file          │ (elevated shadow)
└─────────────────────────────────────┘

Loading:
┌─────────────────────────────────────┐
│         ⟳ Adding file...             │
└─────────────────────────────────────┘

Disabled (with tooltip on hover):
┌─────────────────────────────────────┐
│         ➕ Add another file          │ (50% opacity)
└─────────────────────────────────────┘
         Maximum 20 files reached

Props Interface

interface AddFileButtonProps {
  onClick: () => void;
  disabled?: boolean;
  loading?: boolean;
  fileCount?: number; // For accessibility announcement
  className?: string;
}

Technical Notes

• Use shadcn/ui Button component as base
• Use lucide-react Plus icon
• Implement with forwardRef for proper ref handling
• Use Tooltip component from shadcn/ui for disabled state
• Consider using framer-motion for micro-animations
• Ensure proper ARIA labels and announcements

Accessibility

• Button should announce "Add another file, button"
• When disabled, announce "Add another file, button, disabled. Maximum 20 files reached"
• After click, announce "Adding file" then "File added, file number X"
• Must be keyboard navigable in the tab order

Related

• Part of Implement MultiFileEditor component for managing multiple files #56 (MultiFileEditor component)
• Uses design tokens from Create design tokens system for theming #57
• Follows patterns from MULTI_FILE_EDITOR_DESIGN.md
• Part of Phase 4 UI Components