refactor: move user preferences to homepage
Refactoring Request Template
Title
refactor(user-preferences): move preferences to homepage and redesign preferences UI
Description
This merge request refactors the existing User Preferences experience by moving the preferences access point from upload pages to the Home Page and redesigning the preferences interface into a modern Duolingo-inspired UI.
Previously, User Preferences were embedded inside upload-related pages and displayed using a traditional popup modal. This implementation created unnecessary UI clutter inside upload workflows and made global preferences less discoverable.
This refactor centralizes preference management on the Home Page and introduces a cleaner, more engaging, and mobile-friendly preferences experience.
Problem Statement
The legacy User Preferences implementation had several UX limitations:
- Preferences were tightly coupled with upload pages
- Upload interfaces became visually cluttered
- Users needed to enter upload workflows to modify global settings
- Traditional popup modal interrupted user interaction flow
- Limited visual hierarchy and accessibility
- Inconsistent experience across mobile and desktop layouts
Because preferences are global settings, they are better suited for a centralized dashboard-level experience.
Solution Implemented
This MR introduces a redesigned User Preferences architecture and UI flow.
UI Flow Changes
Old Flow:
Home Page → Upload Page → User Preferences Popup Modal
New Flow:
Home Page → Preferences Access beside Stats → Duolingo-style Preferences Panel
Refactor Details
1. Removed User Preferences from Upload Pages
Removed User Preferences entry points/components from:
- Image Upload
- Audio Upload
- Video Upload
- Document Upload
- Other upload-related flows/components
Changes:
- Removed upload-page preference triggers
- Cleaned unused imports/components
- Reduced upload page UI clutter
2. Added User Preferences to Home Page
Integrated User Preferences access beside:
- Streak
- Uploads
- Edits
Changes:
- Added centralized preferences access point
- Matched existing homepage layout and spacing
- Added responsive layout handling for mobile/tablet/desktop
3. Redesigned Preferences UI
Replaced the old popup modal with a Duolingo-inspired modern UI.
New UI improvements include:
- Rounded cards/buttons
- Better typography hierarchy
- Improved spacing and layout
- Smooth hover/transition effects
- Mobile-friendly responsive design
- Cleaner interaction flow
- Less intrusive settings experience
4. Preferences Management Updates
Retained existing functionality for:
- Default Language
- Default Release Rights
Behavior preserved:
- Preferences still save correctly
- Existing API integration maintained
- Global preference application preserved across uploads
Files Changed
Modified
- Home page components/layout
- Upload page components
- User preferences UI components
- Preference modal/panel components
- Shared styling/layout files
- State management integration files
Removed
- Legacy upload-page preference triggers
- Old popup modal-specific implementations
Benefits
- Cleaner upload interfaces
- Better accessibility for global settings
- Improved UI consistency
- More intuitive user workflow
- Modernized user experience
- Better responsiveness across devices
- Reduced UI clutter
- Improved maintainability
Testing & Validation
Validated:
- User Preferences successfully moved to Home Page
- Preferences save and persist correctly
- Upload pages no longer show preferences button/icon
- Responsive behavior across devices
- Existing upload workflows remain functional
- UI transitions and interactions work correctly
Checklist
- Removed User Preferences from upload pages
- Added User Preferences to Home Page
- Redesigned preferences UI
- Preserved existing preference functionality
- Improved responsive behavior
- Removed unused imports/components
- Verified upload flow functionality
- Verified preference persistence
Related Issue
Closes: #320