Add alphabet scrollbar to list screens

[phanan]

Summary

• New reusable AlphabetScrollbar widget overlaid on the right edge of list screens
• Only visible when sorting by name/title and the list has 100+ items
• Tap or drag a letter to jump to that section, with haptic feedback on each letter change
• Non-alpha characters (digits, symbols, brackets) grouped under #
• Integrated into 6 screens: Songs, Albums, Artists, Favorites, Playlist Details, Artist Details
• SliverPadding on Albums/Artists prevents list content from overlapping the scrollbar
• shouldShow() static helper centralizes visibility logic

Test plan

• All 93 tests pass
• Scrollbar appears on Albums/Artists/Songs when sorted by name with 100+ items
• Scrollbar hidden when sorting by year/artist/created_at
• Scrollbar hidden when list has < 100 items
• Tap a letter → list jumps to first item starting with that letter
• Drag through letters → list scrolls with haptic feedback
• # groups numeric/symbol entries
• List content doesn't overlap scrollbar on Albums/Artists

Summary by CodeRabbit

New Features

• Added an alphabet scrollbar overlay to scrollable lists (albums, artists, songs, playlists, and favorites). This enables quick navigation through large collections by tapping or dragging along the index. The scrollbar automatically appears when viewing sorted lists with sufficient items.

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

This PR introduces a new AlphabetScrollbar widget that provides a vertical, touch-interactive alphabet index overlay for navigating long lists. The widget is integrated into six screens (albums, artists, songs, favorites, artist_details, playlist_details) where it conditionally displays based on list size and active sort field, enabling quick letter-based navigation.

Changes

Cohort / File(s)	Summary
AlphabetScrollbar Widget lib/ui/widgets/alphabet_scrollbar.dart	New stateful widget implementing vertical alphabet index overlay with gesture-based scroll control. Supports drag, tap, and haptic feedback interactions. Includes letter deduplication, non-alphabetic character grouping under #, and conditional rendering based on itemCount and minItemCount thresholds.
Screen Integrations lib/ui/screens/albums.dart, lib/ui/screens/artists.dart, lib/ui/screens/songs.dart, lib/ui/screens/artist_details.dart, lib/ui/screens/favorites.dart, lib/ui/screens/playlist_details.dart	Added ScrollController and wrapped CustomScrollView in Stack to conditionally overlay AlphabetScrollbar. Scrollbar visibility determined by AlphabetScrollbar.shouldShow() based on list size and sort field. Applied SliverPadding for rightside spacing where needed.
Widget Exports lib/ui/widgets/widgets.dart	Added re-export for the new AlphabetScrollbar widget in barrel file.
Widget Tests test/ui/widgets/alphabet_scrollbar_test.dart	New comprehensive test suite covering widget rendering, letter deduplication, uppercase conversion, non-alphabetic character handling, and static shouldShow() decision logic across various itemCount and sort field scenarios.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant AlphabetScrollbar
    participant ScrollController
    participant ListView

    User->>AlphabetScrollbar: Drag finger vertically
    activate AlphabetScrollbar
    AlphabetScrollbar->>AlphabetScrollbar: Calculate Y position to letter
    AlphabetScrollbar->>AlphabetScrollbar: Trigger HapticFeedback.selectionClick()
    AlphabetScrollbar->>ScrollController: jumpTo(targetScrollOffset)
    ScrollController->>ListView: Update scroll position
    ListView->>User: Display target letter section
    deactivate AlphabetScrollbar

    User->>AlphabetScrollbar: Release drag (end)
    activate AlphabetScrollbar
    AlphabetScrollbar->>AlphabetScrollbar: Clear active letter
    AlphabetScrollbar->>User: Dismiss visual highlight
    deactivate AlphabetScrollbar

    User->>AlphabetScrollbar: Tap letter
    activate AlphabetScrollbar
    AlphabetScrollbar->>ScrollController: jumpTo(targetScrollOffset)
    ScrollController->>ListView: Update scroll position
    AlphabetScrollbar->>AlphabetScrollbar: Schedule 300ms reset
    AlphabetScrollbar->>User: Clear active letter after delay
    deactivate AlphabetScrollbar

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• Add album sorting to Albums screen #124: Adds album sorting functionality and provider.sortField usage, which aligns with how AlphabetScrollbar.shouldShow() evaluates sort field matching for conditional visibility.

Poem

🐰 A scrollbar appears, with letters so neat,
Dancing with fingers in swift, swishy beat,
Jump through the alphabet, quick as a hare,
From A all the way down—alphabetic flair! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Add alphabet scrollbar to list screens' directly and accurately describes the primary change—introducing a new AlphabetScrollbar widget to multiple list screens across the application.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/alphabet-scrollbar

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}