diff --git a/EXHAUSTIVE_TODO_LIST.md b/EXHAUSTIVE_TODO_LIST.md index 2b794b467..c6923bc52 100644 --- a/EXHAUSTIVE_TODO_LIST.md +++ b/EXHAUSTIVE_TODO_LIST.md @@ -3873,11 +3873,26 @@ Critical path dependencies: ### Sub-Epic 11.4: Visual Restraint 🟢 #### Task 11.4.1: Remove Unnecessary Hover Effects -- [ ] **Action 11.4.1.1**: Audit hover effects +- [x] **Action 11.4.1.1**: Audit hover effects - **Scope**: All components - List all hover effects - - **Dependencies**: None + - **Dependencies**: None ✅ - **Risk**: LOW 🔒 - - **Validation**: List of hover effects + - **Validation**: ✅ List of hover effects documented: + - **Total instances**: 887 matches across 239 files + - **Audit document**: `apps/web/docs/HOVER_EFFECTS_AUDIT.md` + - **Categories**: + 1. **Necessary** (✅ Keep): ~400 instances (45%) - Interactive feedback (buttons, links, navigation) + 2. **Excessive/Decorative** (⚠️ Remove): ~200 instances (23%) - Scale transforms, shadow/glow, multiple effects + 3. **Group Hover** (⚠️ Review): ~150 instances (17%) - Parent hover triggers child effects + 4. **Transitions** (⚠️ Review): ~100 instances (11%) - Transition animations + 5. **Opacity-Based** (✅ Keep): ~37 instances (4%) - Subtle visibility changes + - **Excessive patterns identified**: + - Scale transforms: `hover:scale-[1.02]`, `hover:scale-110` (~50 instances) + - Shadow/glow effects: `hover:shadow-neon-cyan/20` (~30 instances) + - Multiple simultaneous effects (~40 instances) + - **High-impact files**: 6 files with many excessive effects (ProductCard, CourseCard, PostCard, TrackCard, etc.) + - **Target**: Reduce by 30-40% (remove decorative effects, keep interactive feedback) + - **Result**: Comprehensive audit complete, ready for categorization phase - **Rollback**: N/A (audit) - [ ] **Action 11.4.1.2**: Categorize hover effects: necessary vs excessive diff --git a/apps/web/docs/HOVER_EFFECTS_AUDIT.md b/apps/web/docs/HOVER_EFFECTS_AUDIT.md new file mode 100644 index 000000000..a88e88a3c --- /dev/null +++ b/apps/web/docs/HOVER_EFFECTS_AUDIT.md @@ -0,0 +1,252 @@ +# Hover Effects Audit - Action 11.4.1.1 + +**Date**: 2025-01-27 +**Scope**: All `hover:` usage across the codebase +**Total Instances**: 887 matches across 239 files + +## Summary + +Hover effects are used extensively throughout the application. This audit categorizes usage to identify opportunities for refinement and applying "Surgical Minimalism" principles. + +## Categories + +### 1. Necessary Hover Effects (✅ Keep) +**Purpose**: Essential interactive feedback for buttons, links, and clickable elements +**Count**: ~400 instances (estimated 45%) + +**Patterns**: +- `hover:bg-white/5` - Subtle background for interactive elements +- `hover:bg-accent` - Background change for buttons/links +- `hover:text-white` - Text color change for navigation +- `hover:opacity-100` - Icon visibility on hover +- `hover:border-*` - Border color changes for interactive elements +- `hover:underline` - Link underline on hover + +**Examples**: +- Button variants (primary, secondary, outline, ghost) +- Navigation links and menu items +- Clickable cards and list items +- Icon buttons +- Form inputs and selects + +**Files**: +- `apps/web/src/components/ui/button.tsx` - Button variants +- `apps/web/src/components/layout/Sidebar.tsx` - Navigation items +- `apps/web/src/components/layout/Navbar.tsx` - Nav links +- `apps/web/src/components/ui/select.tsx` - Select options +- `apps/web/src/components/data/List.tsx` - List items + +### 2. Excessive/Decorative Hover Effects (⚠️ Review/Remove) +**Purpose**: Decorative animations, scale transforms, multiple simultaneous effects +**Count**: ~200 instances (estimated 23%) + +**Patterns**: +- `hover:scale-[1.02]` or `hover:scale-110` - Scale transforms +- `hover:shadow-*` - Shadow effects (especially neon/glow) +- `hover:rotate-*` - Rotation transforms +- `hover:translate-*` - Translation transforms +- Multiple simultaneous effects (scale + shadow + color) + +**Examples**: +- Card scale on hover: `hover:scale-[1.02]` +- Image zoom on hover: `group-hover:scale-110` +- Shadow glow effects: `hover:shadow-neon-cyan/20` +- Button scale: `hover:scale-110` + +**Files**: +- `apps/web/src/components/marketplace/ProductCard.tsx` - Card scale + shadow +- `apps/web/src/components/education/CourseCard.tsx` - Card scale +- `apps/web/src/components/social/PostCard.tsx` - Multiple effects +- `apps/web/src/features/tracks/components/TrackCard.tsx` - Scale transform +- `apps/web/src/components/ui/button.tsx` - Some button variants with scale + +### 3. Group Hover Effects (⚠️ Review Context) +**Purpose**: Effects triggered by parent hover (e.g., card hover shows child elements) +**Count**: ~150 instances (estimated 17%) + +**Patterns**: +- `group-hover:opacity-100` - Show elements on parent hover +- `group-hover:scale-*` - Scale child on parent hover +- `group-hover:bg-*` - Background change on parent hover + +**Examples**: +- Card hover reveals play button overlay +- Image zoom on card hover +- Show action buttons on row hover + +**Files**: +- `apps/web/src/components/marketplace/ProductCard.tsx` - Play button overlay +- `apps/web/src/components/player/FullPlayer.tsx` - Overlay on hover +- `apps/web/src/components/views/DiscoverView.tsx` - Play icon on hover + +### 4. Transition/Animation Effects (⚠️ Review) +**Purpose**: Smooth transitions for hover state changes +**Count**: ~100 instances (estimated 11%) + +**Patterns**: +- `transition-all` - All properties transition +- `transition-colors` - Color transitions +- `transition-opacity` - Opacity transitions +- `transition-transform` - Transform transitions +- `duration-*` - Transition duration + +**Examples**: +- `transition-all duration-200` - Smooth hover transitions +- `transition-opacity` - Fade in/out effects + +**Files**: +- Most components with hover effects include transitions + +### 5. Opacity-Based Hover (✅ Keep - Subtle) +**Purpose**: Subtle visibility changes for icons and overlays +**Count**: ~37 instances (estimated 4%) + +**Patterns**: +- `hover:opacity-100` - Full opacity on hover +- `opacity-0 hover:opacity-100` - Show on hover +- `opacity-70 hover:opacity-100` - Increase opacity + +**Examples**: +- Icon buttons that become fully visible on hover +- Overlay elements that appear on hover +- Close buttons in modals + +**Files**: +- `apps/web/src/components/ui/alert.tsx` - Close button +- `apps/web/src/components/player/FullPlayer.tsx` - Overlay elements +- `apps/web/src/components/ui/ErrorDisplay.tsx` - Action buttons + +## Detailed Analysis + +### Scale Transforms (Excessive) +**Count**: ~50 instances + +**Examples**: +```tsx +// ProductCard.tsx +className="... hover:scale-[1.02] ..." + +// TrackCard.tsx +className="... hover:scale-[1.02] ..." + +// Button play overlay +className="... hover:scale-110 ..." +``` + +**Recommendation**: Remove scale transforms on cards. Keep only for small icon buttons where scale provides clear feedback. + +### Shadow/Glow Effects (Excessive) +**Count**: ~30 instances + +**Examples**: +```tsx +// ProductCard.tsx +className="... hover:shadow-neon-cyan/20 ..." + +// Button variants +className="... hover:shadow-[0_0_15px_rgba(102,252,241,0.3)] ..." +``` + +**Recommendation**: Remove decorative shadow/glow effects. Keep only subtle shadows for elevation feedback on buttons. + +### Multiple Simultaneous Effects (Excessive) +**Count**: ~40 instances + +**Examples**: +```tsx +// ProductCard.tsx +className="... hover:border-kodo-cyan/50 hover:shadow-neon-cyan/20 hover:scale-[1.02] ..." + +// CourseCard.tsx +className="... hover:bg-white/5 hover:scale-[1.02] hover:shadow-lg ..." +``` + +**Recommendation**: Limit to one primary hover effect per element. Prefer subtle background or border changes over multiple effects. + +### Group Hover Patterns (Review Context) +**Count**: ~150 instances + +**Examples**: +```tsx +// ProductCard.tsx - Play button overlay +
+ +
+ +// Image zoom + +``` + +**Recommendation**: +- ✅ Keep: Play button overlays (functional, reveals action) +- ⚠️ Review: Image zoom effects (decorative, could be removed) +- ✅ Keep: Action button reveals on row hover (functional) + +## Recommendations + +### High Priority (Action 11.4.1.3) +1. **Remove scale transforms from cards** + - ProductCard, CourseCard, TrackCard, PostCard + - Replace with subtle background change only + +2. **Remove decorative shadow/glow effects** + - `hover:shadow-neon-cyan/20` on cards + - Keep only subtle shadows on buttons + +3. **Simplify multiple simultaneous effects** + - Limit to one primary hover effect + - Prefer `hover:bg-white/5` over scale + shadow + border + +### Medium Priority +4. **Review group hover image zoom** + - Consider removing `group-hover:scale-110` on images + - Keep functional overlays (play buttons) + +5. **Standardize transition durations** + - Use consistent `duration-200` for all hover effects + - Avoid `transition-all` (prefer specific properties) + +### Low Priority +6. **Maintain necessary hover effects** + - Keep all button, link, and navigation hover states + - Keep opacity-based icon visibility + - Keep border color changes for interactive elements + +## Target Distribution (Surgical Minimalism) + +**Current**: ~887 hover effects across 239 files +**Target**: Reduce by ~30-40% (remove excessive decorative effects) + +**Breakdown**: +- **Keep** (~60%): Interactive feedback (buttons, links, navigation, clickable elements) +- **Remove** (~30%): Decorative effects (scale, excessive shadows, multiple simultaneous effects) +- **Review** (~10%): Group hover effects (keep functional, remove decorative) + +## Files Requiring Changes + +### High Impact (Many excessive effects): +1. `apps/web/src/components/marketplace/ProductCard.tsx` - Scale + shadow + border +2. `apps/web/src/components/education/CourseCard.tsx` - Scale + shadow +3. `apps/web/src/components/social/PostCard.tsx` - Multiple effects +4. `apps/web/src/features/tracks/components/TrackCard.tsx` - Scale transform +5. `apps/web/src/components/views/DiscoverView.tsx` - Image zoom on hover +6. `apps/web/src/components/player/FullPlayer.tsx` - Multiple overlay effects + +### Medium Impact: +- All card components with scale transforms +- Components with decorative shadow effects +- Components with multiple simultaneous hover effects + +## Next Steps + +1. ✅ **Action 11.4.1.1**: Audit complete +2. ⏭️ **Action 11.4.1.2**: Categorize hover effects: necessary vs excessive +3. ⏭️ **Action 11.4.1.3**: Remove excessive hover effects + +## Notes + +- This audit is based on pattern matching and may require manual review for context-specific decisions +- Some decorative effects may be intentional for brand consistency +- Interactive feedback (buttons, links) should always have hover states +- Group hover effects that reveal functionality (play buttons) should be kept +- Scale transforms and decorative shadows should be removed for "Surgical Minimalism"