Improve Library Sorting UI - Proposals for Better UX

[dmoo500]

Current State

The library listing views (tracks, albums, artists, playlists) currently use a dropdown menu with submenu items for sorting. While functional, this approach has some UX limitations:

• Current sort is not immediately visible
• Requires 2 clicks to change sorting (menu → submenu item)
• Sort direction not visually indicated
• Hidden in a submenu alongside other actions

Current implementation: Dropdown with mdi-sort icon → submenu with all sort options

Problem

When users want to explore their library in different ways (recently added, most played, by name, etc.), the current UI requires navigating through a submenu. Additionally:

• Current sort state is not immediately visible
• Sort direction is not visually indicated
• Changing sort requires multiple clicks

Modern media players use more prominent sorting controls that make the current state clear at a glance and make changes quick when needed.

Related Discussion

This proposal complements #6004 - Global settings for display and sorting, which focuses on default/persistent sorting preferences. That discussion addresses saving preferred sort orders globally, while this proposal focuses on improving the UI/UX for changing sorts dynamically during browsing. Both improvements together would provide the ideal experience: sensible defaults that persist + quick, visual controls to change sorting on the fly.

Proposed Solutions

I've created 4 functional prototypes with different UX approaches, all using the existing shadcn/ui components:

Option 1: Spotify-Style Chips ⭐ (Recommended)

Layout: Primary dropdown button + quick-access chips for common sorts (desktop)

Pros:

• Very visual - active sort immediately recognizable
• Quick access for common sorts (Recently Added, Most Played, etc.)
• All options available via dropdown
• Arrow shows direction on quick buttons
• Responsive - mobile shows only dropdown, desktop adds chips
• Modern and clean design

Inspiration: Spotify, modern filter UIs

---

Option 2: Apple Music-Style Headers

Layout: Sortable header bar (like table column headers, but works for card/grid views too)

Pros:

• Very intuitive - familiar table header pattern
• Shows all options permanently (no hidden menus)
• Hover state makes clickability clear
• Double arrow shows both directions, active is highlighted
• Clean and minimalistic

Inspiration: Apple Music, macOS Finder, iTunes

---

Option 3: Plex-Style Chips Bar

Layout: Horizontal chips bar with active sort + quick presets

Pros:

• Very visual - chips are modern and appealing
• Active sort always visible with X to reset
• Quick presets for common sorts
• Direction as separate toggle - very clear
• Horizontal scrolling for many options (mobile-friendly)
• Pill/badge style is trendy

Inspiration: Plex, GitHub Filters, modern e-commerce sites

---

Option 4: iOS-Style Segmented Control

Layout: iOS segmented control for main options + direction toggle

Pros:

• Very clean and modern - iOS/macOS design language
• Segmented control is highly intuitive
• Clear visual separation between field and direction
• Compact but readable
• Touch-friendly (large click targets)
• Responsive - works on all screen sizes

Inspiration: iOS Apps, Apple Music iOS, Shortcuts App

---

Technical Details

• All prototypes are fully functional Vue 3 components with reactive state
• Use existing shadcn/ui components (Button, Popover, Tabs, RadioGroup, etc.)
• No new dependencies required
• Icons from lucide-vue-next (already in use)
• Responsive design (mobile/tablet/desktop)
• Ready for integration into ItemsListing.vue

My Recommendation

Option 1 (Spotify-Style Chips) provides the best balance:

• Compact yet highly usable
• Fits well with MA's modern UI
• Progressive disclosure: quick options visible, all options in dropdown
• Works great on all screen sizes
• Icons improve scannability

Alternative: Option 4 (iOS Segmented) is great for views with only 3-4 sort options (simpler lists like playlists or genres).

Implementation Impact

• Component: src/components/ItemsListing.vue (lines ~1239-1253)
• Affected views: All library listings (tracks, albums, artists, playlists, radios, etc.)
• Backwards compatible: Keeps existing sortKeys prop interface

Questions for the Community

1. Which option do you find most intuitive and visually appealing?
2. Do you prefer seeing all sort options at once (Option 6) or progressive disclosure (Options 5/8)?
3. Should quick-access chips show the most common sorts, or be configurable per user?
4. Any other sorting UX patterns from media players you'd like to see considered?

---

Note: I'm happy to implement whichever option the community prefers, or create variations/combinations based on feedback!

[ossiflocke]

Great you take care of this! I think I'd be fine with option 1