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:

  <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:

  <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:

  <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:

  <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:

  <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:

  <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