veza/apps/web/docs/CUSTOM_BUTTONS_AUDIT.md

# Custom Button Implementations Audit

**Date**: 2025-01-27  
**Action**: 9.2.1.1 - Find all custom button implementations  
**Purpose**: Identify all buttons with inline className styles that should be replaced with the Button component from `@/components/ui/button`

## Summary

- **Total files with button elements**: 166 files
- **Button component location**: `apps/web/src/components/ui/button.tsx`
- **Legacy Button component**: `apps/web/src/components/base/Button.tsx` (uses CSS classes, different API)

## Custom Button Implementations Found

### High Priority (Should be replaced)

#### 1. Live Stream Components
- **File**: `apps/web/src/components/live/LiveStreamDetailView.tsx`
  - Line 195-200: Send chat button with `className="absolute right-1.5 top-1.5 p-1.5 bg-kodo-cyan text-black rounded-full hover:bg-white transition-colors"`
  - Line 205-211: Tip button with `className="text-kodo-gold hover:text-white"`
  - **Recommendation**: Replace with Button component (variant="default" for send, variant="ghost" for tip)

#### 2. Dashboard Page
- **File**: `apps/web/src/pages/DashboardPage.tsx`
  - Line 235-237: Time filter button with complex className
  - Line 238-240: Active time filter button with `className="text-xs font-medium text-kodo-cyan bg-kodo-cyan/10 px-2 py-1 rounded-lg border border-kodo-cyan/20..."`
  - Line 241-243: Time filter button with complex className
  - **Recommendation**: Replace with Button component (variant="outline" for inactive, variant="default" for active)

#### 3. Social Components
- **File**: `apps/web/src/components/social/CommentItem.tsx`
  - Line 61: Button with `className="hover:text-white transition-colors"`
  - **Recommendation**: Replace with Button component (variant="ghost")

- **File**: `apps/web/src/components/social/PostCard.tsx`
  - Line 239: Button with `className="w-full text-center text-xs text-kodo-cyan mt-4 hover:underline"`
  - **Recommendation**: Replace with Button component (variant="link")

- **File**: `apps/web/src/pages/SocialPage.tsx`
  - Line 112: Button with `className="flex items-center gap-2 text-kodo-secondary hover:text-kodo-magenta transition-colors"`
  - Line 116: Button with `className="flex items-center gap-2 text-kodo-secondary hover:text-kodo-cyan transition-colors"`
  - Line 120: Button with `className="flex items-center gap-2 text-kodo-secondary hover:text-white transition-colors"`
  - **Recommendation**: Replace with Button component (variant="ghost")

- **File**: `apps/web/src/components/views/SocialView.tsx`
  - Line 75: Button with `className="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium text-gray-400 hover:text-white"`
  - Line 146-150: Multiple buttons with `className="hover:text-white"`
  - **Recommendation**: Replace with Button component (variant="ghost")

#### 4. Admin Components
- **File**: `apps/web/src/components/admin/AdminUsersView.tsx`
  - Line 169: Disabled button with `className="hover:text-white disabled:opacity-50"`
  - Line 172: Next button with `className="hover:text-white"`
  - **Recommendation**: Replace with Button component (variant="ghost", disabled prop)

- **File**: `apps/web/src/components/admin/UserTableRow.tsx`
  - Line 99: Button with `className="w-full text-left px-4 py-2.5 text-xs text-gray-300 hover:bg-white/10 flex items-center gap-2"`
  - **Recommendation**: Replace with Button component (variant="ghost")

#### 5. Studio Components
- **File**: `apps/web/src/components/studio/ProjectsManager.tsx`
  - Line 196: Button with `className="p-1.5 rounded bg-kodo-slate text-white"`
  - Line 199: Button with `className="p-1.5 rounded text-gray-500 hover:text-white"`
  - **Recommendation**: Replace with Button component (variant="secondary" and "ghost")

- **File**: `apps/web/src/components/studio/CloudFileBrowser.tsx`
  - Line 403: Button with `className="p-1.5 hover:bg-white/10 rounded text-gray-400 hover:text-white"`
  - Line 406: Similar button
  - **Recommendation**: Replace with Button component (variant="ghost")

#### 6. File Manager
- **File**: `apps/web/src/components/views/FileManagerView.tsx`
  - Line 357: Button with `className="p-1.5 hover:bg-white/10 rounded text-gray-400 hover:text-white"`
  - Line 363: Similar button
  - **Recommendation**: Replace with Button component (variant="ghost")

#### 7. Modal Components
- **File**: `apps/web/src/components/modals/CreatorModal.tsx`
  - Line 66: Close button with `className="text-gray-400 hover:text-white"`
  - Line 113: Button with `className="p-3 rounded border border-kodo-cyan bg-kodo-cyan/10 text-kodo-cyan..."`
  - Line 117: Button with `className="p-3 rounded border border-kodo-steel bg-kodo-slate text-gray-400..."`
  - Line 121: Similar button
  - **Recommendation**: Replace with Button component (variant="ghost" for close, variant="outline" for others)

- **File**: `apps/web/src/components/ui/ImageCropper.tsx`
  - Line 138: Cancel button with `className="text-gray-400 hover:text-white"`
  - **Recommendation**: Replace with Button component (variant="ghost")

- **File**: `apps/web/src/components/upload/BulkUploadModal.tsx`
  - Line 46: Close button with `className="text-gray-400 hover:text-white"`
  - **Recommendation**: Replace with Button component (variant="ghost")

### Medium Priority (Context-specific, may need custom handling)

#### 8. UI Component Internals
- **File**: `apps/web/src/components/ui/dropdown-menu.tsx`
  - Line 120: Internal button with `className={cn('outline-none', className)}`
  - **Note**: This is part of a Radix UI component wrapper, may need to stay as-is

### Low Priority (May be intentional custom buttons)

#### 9. Specialized Components
- **File**: `apps/web/src/components/ui/FAB.tsx`
  - Floating Action Button - may be intentionally custom
  - **Note**: Review if FAB should use Button component or remain custom

- **File**: `apps/web/src/features/tracks/components/LikeButton.tsx`
  - Specialized like button component
  - **Note**: May use Button component internally, needs verification

## Statistics

- **High Priority Replacements**: ~30+ instances across 15+ files
- **Medium Priority**: ~5 instances (UI component internals)
- **Low Priority**: ~5 instances (specialized components)

## Migration Strategy

1. **Phase 1**: Replace high-priority custom buttons in:
   - Live stream components
   - Dashboard page
   - Social components
   - Admin components

2. **Phase 2**: Replace medium-priority buttons in:
   - Studio components
   - File manager
   - Modal components

3. **Phase 3**: Review and decide on low-priority specialized components

## Button Component Variants Available

From `apps/web/src/components/ui/button.tsx`:
- `default`: Primary button with cyan background
- `destructive`: Red variant for destructive actions
- `outline`: Outlined button
- `secondary`: Secondary button with steel background
- `ghost`: Minimal button with hover effect
- `link`: Link-style button
- `neon`: Neon effect button
- `glass`: Glass morphism effect
- `premium`: Premium gradient button

## Notes

- Some buttons may need size adjustments (Button component supports `sm`, `md`, `lg`, `xl`)
- Some buttons may need icon support (Button component supports `asChild` prop for custom content)
- Legacy Button component (`components/base/Button.tsx`) uses different API and CSS classes - should be migrated separately

## Next Steps

1. ✅ Audit complete (Action 9.2.1.1)
2. ⏳ Replace custom buttons with Button component (Action 9.2.1.2)
3. ⏳ Create ESLint rule to enforce Button usage (Action 9.2.1.3)
4. ⏳ Create component usage guide (Action 9.2.1.4)