-
Notifications
You must be signed in to change notification settings - Fork 0
Open
Labels
Description
Description
Implement UI toggle to switch between daily and overall ranking views on the same page, improving UX by avoiding navigation between separate pages.
Context
Currently, users need to navigate to /ranking for overall view and /ranking/[dayId] for daily view. This feature adds a toggle component to switch views seamlessly.
Related to #35 (Overall ranking page implementation)
Tasks
- Design toggle component (tabs/buttons/segmented control)
- Create shared ranking layout component
- Implement client-side state management for view switching
- Update
/rankingpage to support both views - Add URL parameter or hash to maintain state on refresh
- Update daily ranking pages to use shared toggle
- Add smooth transition/animation between views
- Update Navbar links if needed
Implementation Suggestions
- Use daisyUI tabs component for toggle UI
- Consider using URL search params:
/ranking?view=overallvs/ranking?view=daily&day=1 - Alternative: Keep separate routes but add navigation tabs at the top
- Client component for toggle, Server Component for data fetching
Acceptance Criteria
- Users can toggle between daily and overall views
- Selected view persists on page refresh
- Toggle is accessible (keyboard navigation, screen readers)
- Responsive design (mobile-friendly)
- Smooth UX (no flashing/loading between switches if possible)
Design Notes
- Position: Below page title, above ranking list
- Style: Match existing daisyUI theme (neutral/primary colors)
- Labels: "Diario" / "General" or "Día X" / "Overall"
Priority: Medium (UX enhancement)
Phase: Post-MVP / Phase 2.3 Enhancement
Reactions are currently unavailable