veza/apps/web/docs/UPLOAD_BUTTONS_AUDIT.md

# Upload Buttons Audit

**Date**: 2025-01-27  
**Task**: Action 8.1.1.1 - Audit all upload buttons  
**Status**: ✅ Complete

## Summary

Found **6 upload button instances** across **3 components**:
- 1 FAB (Floating Action Button) on Dashboard
- 5 regular Button components on Library pages

## Detailed Inventory

### 1. DashboardPage - FAB (Floating Action Button)
- **Location**: `apps/web/src/pages/DashboardPage.tsx:398-407`
- **Type**: FAB (Floating Action Button)
- **Position**: Fixed bottom-right
- **Label**: "Upload Track" (with label shown)
- **Icon**: Plus icon
- **Action**: Navigates to `/library?action=upload`
- **Visibility**: Always visible (fixed position)
- **Context**: Main dashboard page
- **Code**:
  ```tsx
  <FAB
    position="bottom-right"
    size="lg"
    showLabel
    label="Upload Track"
    onClick={() => navigate('/library?action=upload')}
  >
    <Plus className="w-6 h-6" />
  </FAB>
  ```

### 2. LibraryPage - Header Button
- **Location**: `apps/web/src/features/library/pages/LibraryPage.tsx:392-395`
- **Type**: Regular Button
- **Position**: Header section, right side (next to view mode toggle)
- **Label**: "Upload"
- **Icon**: Upload icon
- **Action**: Opens upload modal (`handleOpenUpload`)
- **Visibility**: Always visible in header
- **Context**: Library page header
- **Code**:
  ```tsx
  <Button onClick={handleOpenUpload} size="sm">
    <Upload className="mr-2 h-4 w-4" />
    Upload
  </Button>
  ```

### 3. LibraryPage - Empty State (Grid View)
- **Location**: `apps/web/src/features/library/pages/LibraryPage.tsx:607-610`
- **Type**: Regular Button
- **Position**: Empty state card (when no tracks in grid view)
- **Label**: "Upload Track"
- **Icon**: Upload icon
- **Action**: Opens upload modal (`handleOpenUpload`)
- **Visibility**: Only shown when library is empty and no search term
- **Context**: Empty state message
- **Code**:
  ```tsx
  <Button onClick={handleOpenUpload}>
    <Upload className="mr-2 h-4 w-4" />
    Upload Track
  </Button>
  ```

### 4. LibraryPage - Empty State (List View)
- **Location**: `apps/web/src/features/library/pages/LibraryPage.tsx:632-635`
- **Type**: Regular Button
- **Position**: Empty state card (when no tracks in list view)
- **Label**: "Upload Track"
- **Icon**: Upload icon
- **Action**: Opens upload modal (`handleOpenUpload`)
- **Visibility**: Only shown when library is empty and no search term
- **Context**: Empty state message
- **Code**:
  ```tsx
  <Button onClick={handleOpenUpload}>
    <Upload className="mr-2 h-4 w-4" />
    Upload Track
  </Button>
  ```

### 5. LibraryManager - Header Button
- **Location**: `apps/web/src/features/library/components/LibraryManager.tsx:176-179`
- **Type**: Regular Button
- **Position**: Card header, right side
- **Label**: "Upload Track"
- **Icon**: Upload icon
- **Action**: Opens upload modal (`setIsUploadModalOpen(true)`)
- **Visibility**: Always visible in header
- **Context**: Library manager component header
- **Code**:
  ```tsx
  <Button onClick={() => setIsUploadModalOpen(true)}>
    <Upload className="h-4 w-4 mr-2" />
    Upload Track
  </Button>
  ```

### 6. LibraryManager - Empty State
- **Location**: `apps/web/src/features/library/components/LibraryManager.tsx:250-253`
- **Type**: Regular Button
- **Position**: Empty state card
- **Label**: "Upload Track"
- **Icon**: Upload icon
- **Action**: Opens upload modal (`setIsUploadModalOpen(true)`)
- **Visibility**: Only shown when library is empty and no search query
- **Context**: Empty state message
- **Code**:
  ```tsx
  <Button onClick={() => setIsUploadModalOpen(true)}>
    <Upload className="h-4 w-4 mr-2" />
    Upload Track
  </Button>
  ```

## Analysis

### Duplicate Locations
1. **LibraryPage header** (always visible) + **LibraryPage empty states** (conditional)
   - Same page, different contexts
   - Empty state buttons are redundant when header button is visible
   
2. **LibraryManager header** (always visible) + **LibraryManager empty state** (conditional)
   - Same component, different contexts
   - Empty state button is redundant when header button is visible

3. **Dashboard FAB** + **LibraryPage header button**
   - Different pages, but both accessible from main navigation
   - FAB is always visible, LibraryPage button is page-specific

### Primary vs Secondary
- **Primary candidates**:
  - Dashboard FAB (most prominent, always accessible)
  - LibraryPage header button (contextual, always visible on library page)
  
- **Secondary candidates** (likely to remove):
  - LibraryPage empty state buttons (redundant with header button)
  - LibraryManager empty state button (redundant with header button)
  - LibraryManager header button (if LibraryManager is not primary library interface)

### Recommendations
1. **Keep**: Dashboard FAB (primary global upload action)
2. **Keep**: LibraryPage header button (contextual, always visible)
3. **Remove**: LibraryPage empty state buttons (redundant)
4. **Evaluate**: LibraryManager buttons (determine if LibraryManager is still used)

## Next Steps
- Action 8.1.1.2: Determine primary upload button location
- Action 8.1.1.3: Remove duplicate upload buttons