Skip to content

Add toggle between daily/overall ranking views #78

@CarlosCanet

Description

@CarlosCanet

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 /ranking page 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=overall vs /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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions