senke/veza
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
veza/apps/web/docs/CUSTOM_BUTTONS_AUDIT.md
senke 62e28b8557 consistency: audit custom button implementations (Action 9.2.1.1) 
- Scanned 166 files with button elements
- Identified 30+ high-priority custom button implementations
- Documented locations, line numbers, and recommended Button variants
- Created comprehensive audit report: apps/web/docs/CUSTOM_BUTTONS_AUDIT.md
- High priority: Live stream, Dashboard, Social, Admin, Studio, File Manager, Modals
- Includes migration strategy and next steps
2026-01-16 01:28:37 +01:00

7.4 KiB
Raw Blame History

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)