Bump version to 2.8.7-beta+45

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

.github/workflows/build-apk.yml

@@ -35,6 +35,16 @@ jobs:
           channel: 'stable'
           cache: true
 
+      - name: Cache Gradle dependencies
+        uses: actions/cache@v4
+        with:
+          path: |
+            ~/.gradle/caches
+            ~/.gradle/wrapper
+          key: gradle-${{ runner.os }}-${{ hashFiles('**/*.gradle*', '**/gradle-wrapper.properties') }}
+          restore-keys: |
+            gradle-${{ runner.os }}-
+
       - name: Get dependencies
         run: flutter pub get
 
@@ -65,7 +75,12 @@ jobs:
           EOF
 
       - name: Build APK
-        run: flutter build apk --release
+        run: |
+          # Use init.gradle to force Maven mirrors (workaround for Maven Central 403)
+          mkdir -p ~/.gradle
+          cp android/init.gradle ~/.gradle/init.gradle
+
+          flutter build apk --release
 
       - name: Upload APK artifact
         uses: actions/upload-artifact@v4

.prompts/player-animation-audit.md

@@ -0,0 +1,182 @@
+# Player System Animation & Polish Audit
+
+## Context
+
+This is a Music Assistant client app (Ensemble) built with Flutter. The player system has undergone extensive development and now needs a comprehensive polish audit. The goal is buttery smooth 60fps animations and a premium user experience.
+
+## Architecture Overview
+
+The player system consists of three interconnected components:
+
+1. **Mini Player** (collapsed state) - Floating card at bottom, shows current track
+2. **Expanded Player** - Full-screen player with album art, controls, progress
+3. **Queue Panel** - Slides in from right of expanded player, shows playback queue
+
+Additionally:
+- **Player Selector** - Horizontal swipe between multiple players (collapsed mode)
+- **Device Reveal** - Swipe down from mini player to show available players
+
+## Key Files
+
+```
+lib/widgets/
+├── expandable_player.dart      # Main player widget (1800+ lines)
+├── global_player_overlay.dart  # Overlay wrapper, static accessors
+├── player/
+│   ├── queue_panel.dart        # Queue list with great_list_view
+│   ├── chapters_panel.dart     # Audiobook chapters
+│   └── mini_player_content.dart
+```
+
+## CRITICAL CONSTRAINTS
+
+1. **DO NOT MODIFY the queue list implementation** - It uses `great_list_view` package with `AutomaticAnimatedListView`. This was chosen specifically to avoid Flutter's grey screen overlay bug (#103804). The current implementation works correctly.
+
+2. **Preserve all existing functionality** - Focus on polish, not rewrites
+
+3. **Test changes incrementally** - This system is complex with many interdependencies
+
+## Audit Areas
+
+### 1. Animation Performance Audit
+
+Use sub-agents to analyze each animation system:
+
+**Agent 1: Expand/Collapse Animation**
+- Analyze `_controller` and `_expandAnimation`
+- Check for jank during morphing transition
+- Verify lerp functions are efficient
+- Look for unnecessary rebuilds during animation
+- Check `RepaintBoundary` placement
+
+**Agent 2: Queue Panel Animation**
+- Analyze `_queuePanelController` and `_queuePanelAnimation`
+- Verify slide-in/out is smooth
+- Check interaction with expanded player state
+- Verify the Listener-based swipe detection doesn't cause issues
+
+**Agent 3: Player Selector Animation**
+- Analyze horizontal swipe between players
+- Check `_slideOffset` and peek player animations
+- Verify finger-following feels natural
+- Look for edge cases with rapid swipes
+
+**Agent 4: Micro-interactions**
+- Play/pause button animations
+- Progress bar interactions
+- Volume swipe overlay
+- Favorite button feedback
+- Skip button responsiveness
+
+### 2. State Management Audit
+
+**Check for:**
+- Unnecessary `setState` calls during animations
+- ValueNotifier usage efficiency
+- Animation listener cleanup
+- Memory leaks from subscriptions
+- State synchronization between components
+
+### 3. Visual Polish Audit
+
+**Check for:**
+- Color transitions during expand/collapse
+- Text fade/scale animations
+- Image loading placeholders
+- Shadow/elevation consistency
+- Border radius morphing smoothness
+- Safe area handling
+
+### 4. Gesture Conflict Resolution
+
+**Verify:**
+- Vertical drag (expand/collapse) vs horizontal drag (player switch)
+- Queue panel swipe-right-to-close vs Dismissible swipe-left-to-delete
+- Edge dead zones for Android back gesture
+- Tap vs drag disambiguation
+
+### 5. Edge Cases
+
+**Test scenarios:**
+- Rapid expand/collapse
+- Swipe during animation
+- Back button during animations
+- Track change during queue scroll
+- Network image loading failures
+- Very long track/artist names
+
+## Execution Strategy
+
+```
+ultrathink: true
+```
+
+### Phase 1: Discovery (Read-Only)
+Launch parallel sub-agents to analyze each file:
+- Read and understand the animation architecture
+- Map all animation controllers and their relationships
+- Identify potential performance bottlenecks
+- Document current RepaintBoundary usage
+
+### Phase 2: Analysis Report
+Compile findings into categories:
+- **Critical**: Causes visible jank or bugs
+- **Important**: Noticeable but not breaking
+- **Nice-to-have**: Minor polish improvements
+
+### Phase 3: Implementation Plan
+For each finding:
+- Specific file and line numbers
+- Proposed change
+- Risk assessment
+- Testing approach
+
+### Phase 4: Incremental Fixes
+- One fix at a time
+- Build and test after each change
+- Verify no regressions
+
+## Output Format
+
+Provide a structured audit report:
+
+```markdown
+## Animation Audit Report
+
+### Executive Summary
+[2-3 sentences on overall state]
+
+### Critical Issues
+1. [Issue]: [File:Line] - [Description] - [Proposed Fix]
+
+### Important Issues
+1. [Issue]: [File:Line] - [Description] - [Proposed Fix]
+
+### Polish Opportunities
+1. [Issue]: [File:Line] - [Description] - [Proposed Fix]
+
+### Architecture Observations
+[Notes on overall structure, patterns noticed]
+
+### Recommended Priority Order
+1. [First fix]
+2. [Second fix]
+...
+```
+
+## Success Criteria
+
+After this audit and fixes:
+- All animations run at consistent 60fps
+- No jank during any transition
+- Gestures feel responsive and natural
+- State transitions are seamless
+- No visual glitches or flickers
+- Memory usage is stable during interactions
+
+## Notes
+
+- The app uses adaptive theming (colors extracted from album art)
+- There's an `AnimationDebugger` utility for profiling
+- Position tracking uses a shared `PositionTracker` singleton
+- The player supports both music and audiobooks (different UI modes)

README.md

@@ -20,44 +20,63 @@ This application was built with AI-assisted development using **Claude Code** an
 ## Features
 
 ### Local Playback
-- **Stream to Your Phone** - Play music from your Music Assistant library directly on your mobile device
+- **Stream to Your Phone** - Play music from your Music Assistant library directly on your mobile device via Sendspin protocol
 - **Background Playback** - Music continues playing when the app is minimized
 - **Media Notifications** - Control playback from your notification shade with album art display
+- **Instant Response** - Pause/resume in ~300ms
 
 ### Remote Control
 - **Multi-Player Support** - Control any speaker or device connected to Music Assistant
-- **Device Selector** - Quickly switch between your phone and other players
+- **Device Selector** - Swipe down on mini player to reveal all your devices
+- **Multi-Room Grouping** - Long-press any player to sync it with the current player
 - **Full Playback Controls** - Play, pause, skip, seek, and adjust volume
-- **Queue Management** - View and manage the playback queue
+- **Volume Precision Mode** - Hold the volume slider for fine-grained control with haptic feedback
+- **Power Control** - Turn players on/off directly from the mini player
+
+### Queue Management
+- **View & Manage Queue** - See upcoming tracks in the playback queue
+- **Drag to Reorder** - Instant drag handles for reordering tracks
+- **Swipe to Delete** - Remove tracks with a simple swipe gesture
 
 ### Home Screen
-- **Customizable Rows** - Toggle Recently Played, Discover Artists, and Discover Albums
-- **Favorites Rows** - Optional rows for Favorite Albums, Artists, and Tracks
+- **Customizable Rows** - Toggle and reorder: Recently Played, Discover Artists, Discover Albums
+- **Favorites Rows** - Optional rows for Favorite Albums, Artists, Tracks, Playlists, and Radio Stations
 - **Adaptive Layout** - Rows scale properly for different screen sizes and aspect ratios
 - **Pull to Refresh** - Refresh content with a simple pull gesture
 
-### Library Browsing
-- **Browse Your Collection** - Artists, albums, playlists, and tracks from all your music sources
+### Library
+- **Music** - Browse artists, albums, playlists, and tracks from all your music sources
+- **Radio Stations** - Browse and play radio stations with list or grid view
+- **Podcasts** - Browse podcasts, view episodes with descriptions and publish dates
+- **Audiobooks** - Browse by title, series, or author with progress tracking
 - **Favorites Filter** - Toggle to show only your favorite items
-- **Album Details** - View track listings with artwork
-- **Artist Details** - View artist albums and top tracks
-- **Playlist Support** - Browse and play your playlists
-- **Search** - Find music across your entire library
+- **Letter Scrollbar** - Fast navigation through long lists
+
+### Search
+- **Universal Search** - Find music, podcasts, radio stations, playlists, and audiobooks
+- **Fuzzy Matching** - Typo-tolerant search (e.g., "beetles" finds "Beatles")
+- **Smart Scoring** - Results ranked by relevance with colored type indicators
+- **Search History** - Quickly access your recent searches
+- **Quick Actions** - Long-press any result to add to queue or play next
 
 ### Audiobooks
-- **Audiobooks Tab** - Browse your audiobook library with grid/list view options
-- **Series Support** - View audiobooks organized by series with collage cover art
-- **Author Browsing** - Browse audiobooks by author
 - **Chapter Navigation** - Jump between chapters with timestamp display
 - **Progress Tracking** - Track your listening progress across sessions
 - **Continue Listening** - Pick up where you left off
 - **Mark as Finished/Unplayed** - Manage your reading progress
+- **Series Support** - View audiobooks organized by series with collage cover art
+
+### Podcasts
+- **Episode Browser** - View full episode list with artwork and descriptions
+- **Skip Controls** - Skip forward/backward during playback
+- **High-Resolution Artwork** - Fetched via iTunes for best quality
 
 ### Smart Features
 - **Instant App Restore** - App loads instantly with cached library data while syncing in background
 - **Auto-Reconnect** - Automatically reconnects when connection is lost
 - **Offline Browsing** - Browse your cached library even when disconnected
 - **Hero Animations** - Smooth transitions between screens
+- **Welcome Screen** - Guided onboarding for first-time users
 
 ### Theming
 - **Material You** - Dynamic theming based on your device's wallpaper
@@ -67,14 +86,16 @@ This application was built with AI-assisted development using **Claude Code** an
 ## Screenshots
 
 <div align="center">
-  <img src="assets/screenshots/1.png?v=2" alt="Connection Screen" width="150">
-  <img src="assets/screenshots/2.png?v=2" alt="Home Screen" width="150">
-  <img src="assets/screenshots/3.png?v=2" alt="Album Details" width="150">
-  <img src="assets/screenshots/4.png?v=2" alt="Now Playing" width="150">
-  <img src="assets/screenshots/5.png?v=2" alt="Queue" width="150">
-  <img src="assets/screenshots/6.png?v=2" alt="Settings" width="150">
-  <img src="assets/screenshots/7.png?v=2" alt="Audiobooks" width="150">
-  <img src="assets/screenshots/8.png?v=2" alt="Audiobook Player" width="150">
+  <img src="assets/screenshots/1.png?v=3" alt="Screenshot 1" width="150">
+  <img src="assets/screenshots/2.png?v=3" alt="Screenshot 2" width="150">
+  <img src="assets/screenshots/3.png?v=3" alt="Screenshot 3" width="150">
+  <img src="assets/screenshots/4.png?v=3" alt="Screenshot 4" width="150">
+  <img src="assets/screenshots/5.png?v=3" alt="Screenshot 5" width="150">
+  <img src="assets/screenshots/6.png?v=3" alt="Screenshot 6" width="150">
+  <img src="assets/screenshots/7.png?v=3" alt="Screenshot 7" width="150">
+  <img src="assets/screenshots/8.png?v=3" alt="Screenshot 8" width="150">
+  <img src="assets/screenshots/9.png?v=3" alt="Screenshot 9" width="150">
+  <img src="assets/screenshots/10.png?v=3" alt="Screenshot 10" width="150">
 </div>
 
 ## Download
@@ -84,9 +105,29 @@ Download the latest release from the [Releases page](https://github.com/CollotsS
 ## Setup
 
 1. Launch the app
-2. Enter your Music Assistant server URL (e.g., `music.example.com` or `192.168.1.100`)
+2. Enter your Music Assistant server URL
 3. Connect to your server
-4. Start playing! Music plays on your phone by default, or tap the device icon to choose a different player.
+4. Start playing! Music plays on your phone by default, or swipe down on the mini player to choose a different player.
+
+### Finding Your Server URL
+
+**Important:** You need the **Music Assistant** URL, not your Home Assistant URL.
+
+To find the correct URL:
+1. Open Music Assistant web UI
+2. Go to **Settings** > **About**
+3. Look for **Base URL** (e.g., `http://192.168.1.100:8095`)
+
+### Home Assistant Add-on Users
+
+If you run Music Assistant as a Home Assistant add-on:
+- Use the IP address of your Home Assistant server
+- Enter `8095` in the port field
+- Do **not** use your Home Assistant URL or ingress URL
+
+### Remote Access
+
+For access outside your home network, you'll need to expose Music Assistant through a reverse proxy (e.g., Nginx Proxy Manager, Cloudflare Tunnel).
 
 ## Authentication
 
@@ -103,7 +144,7 @@ Ensemble supports multiple authentication methods:
 
 ## Requirements
 
-- Music Assistant server (v2.7.0 beta 20 or later)
+- Music Assistant server (v2.7.0 beta 20 or later recommended)
 - Network connectivity to your Music Assistant server
 - Android device (Android 5.0+)
 - Audiobookshelf provider configured in Music Assistant (for audiobook features)

android/build.gradle

@@ -2,6 +2,9 @@ buildscript {
     ext.kotlin_version = '1.9.10'
     repositories {
         google()
+        // Use Maven Central mirrors as fallback for 403 errors
+        maven { url 'https://maven.aliyun.com/repository/central' }
+        maven { url 'https://maven.aliyun.com/repository/google' }
         mavenCentral()
     }
 
@@ -14,6 +17,9 @@ buildscript {
 allprojects {
     repositories {
         google()
+        // Use Maven Central mirrors as fallback for 403 errors
+        maven { url 'https://maven.aliyun.com/repository/central' }
+        maven { url 'https://maven.aliyun.com/repository/google' }
         mavenCentral()
     }
 }

android/init.gradle

@@ -0,0 +1,37 @@
+// Force all repositories to use mirrors first
+allprojects {
+    repositories {
+        all { ArtifactRepository repo ->
+            if (repo instanceof MavenArtifactRepository) {
+                def url = repo.url.toString()
+                if (url.contains('repo.maven.apache.org') || url.contains('repo1.maven.org')) {
+                    remove repo
+                }
+            }
+        }
+        // Add mirrors before Maven Central
+        maven { url 'https://maven.aliyun.com/repository/central' }
+        maven { url 'https://maven.aliyun.com/repository/google' }
+        maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
+        maven { url 'https://maven.aliyun.com/repository/public' }
+    }
+}
+
+settingsEvaluated { settings ->
+    settings.pluginManagement {
+        repositories {
+            all { ArtifactRepository repo ->
+                if (repo instanceof MavenArtifactRepository) {
+                    def url = repo.url.toString()
+                    if (url.contains('repo.maven.apache.org') || url.contains('repo1.maven.org')) {
+                        remove repo
+                    }
+                }
+            }
+            maven { url 'https://maven.aliyun.com/repository/central' }
+            maven { url 'https://maven.aliyun.com/repository/google' }
+            maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
+            maven { url 'https://maven.aliyun.com/repository/public' }
+        }
+    }
+}

lib/constants/hero_tags.dart

@@ -28,4 +28,19 @@ class HeroTags {
 
   /// Podcast cover hero tag prefix
   static const String podcastCover = 'podcast_cover_';
+
+  /// Podcast title hero tag prefix
+  static const String podcastTitle = 'podcast_title_';
+
+  /// Playlist cover hero tag prefix
+  static const String playlistCover = 'playlist_cover_';
+
+  /// Playlist title hero tag prefix
+  static const String playlistTitle = 'playlist_title_';
+
+  /// Radio station cover hero tag prefix
+  static const String radioCover = 'radio_cover_';
+
+  /// Radio station title hero tag prefix
+  static const String radioTitle = 'radio_title_';
 }

lib/l10n/app_de.arb

@@ -203,6 +203,7 @@
   "english": "Englisch",
   "german": "Deutsch",
   "spanish": "Spanisch",
+  "french": "Französisch",
 
   "noTracksInPlaylist": "Keine Songs in Wiedergabeliste",
   "sortAlphabetically": "Alphabetisch sortieren",

lib/l10n/app_en.arb

@@ -251,6 +251,21 @@
     "description": "Home screen section title"
   },
 
+  "favoritePlaylists": "Favorite Playlists",
+  "@favoritePlaylists": {
+    "description": "Home screen section title"
+  },
+
+  "favoriteRadioStations": "Favorite Radio Stations",
+  "@favoriteRadioStations": {
+    "description": "Home screen section title"
+  },
+
+  "favoritePodcasts": "Favorite Podcasts",
+  "@favoritePodcasts": {
+    "description": "Home screen section title"
+  },
+
   "searchMusic": "Search music...",
   "@searchMusic": {
     "description": "Search placeholder text"
@@ -1045,6 +1060,11 @@
     "description": "Spanish language"
   },
 
+  "french": "French",
+  "@french": {
+    "description": "French language"
+  },
+
   "noTracksInPlaylist": "No tracks in playlist",
   "sortAlphabetically": "Sort alphabetically",
   "sortByYear": "Sort by year",
@@ -1062,6 +1082,9 @@
   "showFavoriteAlbums": "Show a row of your favorite albums",
   "showFavoriteArtists": "Show a row of your favorite artists",
   "showFavoriteTracks": "Show a row of your favorite tracks",
+  "showFavoritePlaylists": "Show a row of your favorite playlists",
+  "showFavoriteRadioStations": "Show a row of your favorite radio stations",
+  "showFavoritePodcasts": "Show a row of your favorite podcasts",
   "extractColorsFromArtwork": "Extract colors from album and artist artwork",
   "chooseHomeScreenRows": "Choose which rows to display on the home screen",
   "addedToFavorites": "Added to favorites",

lib/l10n/app_es.arb

@@ -360,6 +360,7 @@
   "english": "Inglés",
   "german": "Alemán",
   "spanish": "Español",
+  "french": "Francés",
   "noTracksInPlaylist": "No hay canciones en la lista",
   "sortAlphabetically": "Ordenar alfabéticamente",
   "sortByYear": "Ordenar por año",

lib/main.dart

@@ -71,13 +71,16 @@ Future<void> main() async {
     DeviceOrientation.portraitDown,
   ]);
 
-  // Set system UI overlay style
+  // Set initial system UI overlay style based on platform brightness
+  // SystemUIWrapper will update this dynamically when theme changes
+  final platformBrightness = WidgetsBinding.instance.platformDispatcher.platformBrightness;
+  final isDark = platformBrightness == Brightness.dark;
   SystemChrome.setSystemUIOverlayStyle(
-    const SystemUiOverlayStyle(
+    SystemUiOverlayStyle(
       statusBarColor: Colors.transparent,
-      statusBarIconBrightness: Brightness.light,
-      systemNavigationBarColor: Color(0xFF1a1a1a),
-      systemNavigationBarIconBrightness: Brightness.light,
+      statusBarIconBrightness: isDark ? Brightness.light : Brightness.dark,
+      systemNavigationBarColor: isDark ? const Color(0xFF1a1a1a) : const Color(0xFFF5F5F5),
+      systemNavigationBarIconBrightness: isDark ? Brightness.light : Brightness.dark,
     ),
   );
 
@@ -176,7 +179,7 @@ class _MusicAssistantAppState extends State<MusicAssistantApp> with WidgetsBindi
   @override
   Future<bool> didPopRoute() async {
     // Intercept back button at app level - runs BEFORE Navigator processes it
-    // Priority order: device list > expanded player > normal navigation
+    // Priority order: device list > queue panel > expanded player > normal navigation
 
     // Device list has highest priority - dismiss it first
     if (GlobalPlayerOverlay.isPlayerRevealVisible) {
@@ -184,6 +187,14 @@ class _MusicAssistantAppState extends State<MusicAssistantApp> with WidgetsBindi
       return true; // We handled it, don't let Navigator process it
     }
 
+    // Queue panel second - close it before collapsing player
+    // Use target state (not animation value) to handle rapid open-close timing
+    // Use withHaptic: false because Android back gesture provides system haptic
+    if (GlobalPlayerOverlay.isQueuePanelTargetOpen) {
+      GlobalPlayerOverlay.closeQueuePanel(withHaptic: false);
+      return true; // We handled it, don't let Navigator process it
+    }
+
     // Then check expanded player
     if (GlobalPlayerOverlay.isPlayerExpanded) {
       GlobalPlayerOverlay.collapsePlayer();
@@ -263,6 +274,29 @@ class _MusicAssistantAppState extends State<MusicAssistantApp> with WidgetsBindi
                   ],
                   supportedLocales: S.supportedLocales,
                   locale: localeProvider.locale,
+                  // Fallback to English when locale is not supported
+                  localeListResolutionCallback: (locales, supportedLocales) {
+                    // If user has set a specific locale, try to use it
+                    if (localeProvider.locale != null) {
+                      for (final supported in supportedLocales) {
+                        if (supported.languageCode == localeProvider.locale!.languageCode) {
+                          return supported;
+                        }
+                      }
+                    }
+                    // Try to match system locales
+                    if (locales != null) {
+                      for (final locale in locales) {
+                        for (final supported in supportedLocales) {
+                          if (supported.languageCode == locale.languageCode) {
+                            return supported;
+                          }
+                        }
+                      }
+                    }
+                    // Fallback to English (not German)
+                    return const Locale('en');
+                  },
                   themeMode: themeProvider.themeMode,
                   theme: AppTheme.lightTheme(colorScheme: lightColorScheme),
                   darkTheme: AppTheme.darkTheme(colorScheme: darkColorScheme),
@@ -339,8 +373,8 @@ class _SystemUIWrapperState extends State<SystemUIWrapper> {
           statusBarColor: Colors.transparent,
           statusBarIconBrightness: isDark ? Brightness.light : Brightness.dark,
           systemNavigationBarColor: isDark
-              ? widget.darkColorScheme.background
-              : widget.lightColorScheme.background,
+              ? widget.darkColorScheme.surface
+              : widget.lightColorScheme.surface,
           systemNavigationBarIconBrightness: isDark ? Brightness.light : Brightness.dark,
         ),
       );

lib/providers/locale_provider.dart

@@ -31,6 +31,10 @@ class LocaleProvider extends ChangeNotifier {
         return 'English';
       case 'de':
         return 'Deutsch';
+      case 'es':
+        return 'Español';
+      case 'fr':
+        return 'Français';
       case null:
         return 'System';
       default:

lib/providers/music_assistant_provider.dart

@@ -65,6 +65,7 @@ class MusicAssistantProvider with ChangeNotifier {
   Map<String, String> _castToSendspinIdMap = {}; // Maps regular Cast IDs to Sendspin IDs for grouping
   Track? _currentTrack;
   Audiobook? _currentAudiobook; // Currently playing audiobook context (with chapters)
+  String? _currentPodcastName; // Currently playing podcast's name (set when playing episode)
   Timer? _playerStateTimer;
   Timer? _notificationPositionTimer; // Updates notification position every second for remote players
 
@@ -333,14 +334,18 @@ class MusicAssistantProvider with ChangeNotifier {
   }
 
   /// Get the podcast name when playing a podcast episode
-  /// Returns the podcast name from metadata, album name, or artist name
+  /// Returns the podcast name from stored context, metadata, or fallbacks
   String? get currentPodcastName {
     if (!isPlayingPodcast || _currentTrack == null) return null;
 
-    // Try metadata first (if episode has parent podcast info)
+    // Primary source: stored podcast name from when episode was played
+    if (_currentPodcastName != null && _currentPodcastName!.isNotEmpty) {
+      return _currentPodcastName;
+    }
+
+    // Try metadata (if episode has parent podcast info from API)
     final metadata = _currentTrack!.metadata;
     if (metadata != null) {
-      // Check for podcast_name or podcast.name in metadata
       if (metadata['podcast_name'] != null) {
         return metadata['podcast_name'] as String;
       }
@@ -351,20 +356,26 @@ class MusicAssistantProvider with ChangeNotifier {
         }
       }
     }
-    // Fall back to album name (often contains podcast name)
-    if (_currentTrack!.album != null && _currentTrack!.album!.name.isNotEmpty) {
-      return _currentTrack!.album!.name;
-    }
-    // Fall back to artist (sometimes the podcast name is set as artist)
-    if (_currentTrack!.artists != null && _currentTrack!.artists!.isNotEmpty) {
-      final artistName = _currentTrack!.artists!.first.name;
-      if (artistName != 'Unknown Artist' && artistName.isNotEmpty) {
-        return artistName;
-      }
-    }
+
+    // Fallbacks removed - album/artist contain episode name, not podcast name
+    // Return null to let UI show generic "Podcasts" label
     return null;
   }
 
+  /// Set the current podcast context (call when playing a podcast episode)
+  void setCurrentPodcastName(String? podcastName) {
+    _currentPodcastName = podcastName;
+    _logger.log('🎙️ Set current podcast name: $podcastName');
+  }
+
+  /// Clear the podcast context
+  void clearCurrentPodcastName() {
+    if (_currentPodcastName != null) {
+      _logger.log('🎙️ Cleared podcast context');
+      _currentPodcastName = null;
+    }
+  }
+
   String get lastSearchQuery => _lastSearchQuery;
   Map<String, List<MediaItem>> get lastSearchResults => filterSearchResults(_lastSearchResults);
 
@@ -2350,6 +2361,12 @@ class MusicAssistantProvider with ChangeNotifier {
           clearCurrentAudiobook();
         }
 
+        // Clear podcast context when switching to non-podcast media
+        if (mediaType != 'podcast_episode' && _currentPodcastName != null) {
+          _logger.log('🎙️ Media type changed to $mediaType - clearing podcast context');
+          clearCurrentPodcastName();
+        }
+
         if (mediaType != 'flow_stream') {
           final durationSecs = (currentMedia['duration'] as num?)?.toInt();
           final albumName = currentMedia['album'] as String?;
@@ -2799,13 +2816,59 @@ class MusicAssistantProvider with ChangeNotifier {
     return _cachedFavoriteTracks;
   }
 
+  /// Get favorite playlists from the library
+  Future<List<Playlist>> getFavoritePlaylists() async {
+    if (_api == null) return [];
+    try {
+      return await getPlaylists(favoriteOnly: true);
+    } catch (e) {
+      _logger.log('❌ Failed to fetch favorite playlists: $e');
+      return [];
+    }
+  }
+
+  /// Get favorite radio stations from the library
+  Future<List<MediaItem>> getFavoriteRadioStations() async {
+    if (_api == null) return [];
+    try {
+      final stations = await _api!.getRadioStations(favoriteOnly: true);
+      return filterByProvider(stations);
+    } catch (e) {
+      _logger.log('❌ Failed to fetch favorite radio stations: $e');
+      return [];
+    }
+  }
+
+  /// Get favorite podcasts from the library
+  Future<List<MediaItem>> getFavoritePodcasts() async {
+    if (_api == null) return [];
+    try {
+      final podcasts = await _api!.getPodcasts(favoriteOnly: true);
+      return filterByProvider(podcasts);
+    } catch (e) {
+      _logger.log('❌ Failed to fetch favorite podcasts: $e');
+      return [];
+    }
+  }
+
   // ============================================================================
   // AUDIOBOOK HOME SCREEN ROWS
   // ============================================================================
 
-  /// Get audiobooks that have progress (continue listening)
-  Future<List<Audiobook>> getInProgressAudiobooks() async {
-    if (_api == null) return [];
+  /// Get audiobooks that have progress (continue listening) with caching
+  Future<List<Audiobook>> getInProgressAudiobooksWithCache({bool forceRefresh = false}) async {
+    // Check cache first
+    if (!forceRefresh && _cacheService.isInProgressAudiobooksCacheValid()) {
+      _logger.log('📦 Using cached in-progress audiobooks');
+      return _cacheService.getCachedInProgressAudiobooks()!;
+    }
+
+    if (_api == null) {
+      // Fallback to cache when offline
+      final cached = _cacheService.getCachedInProgressAudiobooks();
+      if (cached != null && cached.isNotEmpty) return cached;
+      return [];
+    }
 
     try {
       _logger.log('📚 Fetching in-progress audiobooks...');
@@ -2815,48 +2878,94 @@ class MusicAssistantProvider with ChangeNotifier {
           .where((a) => a.progress > 0 && a.progress < 1.0) // Has progress but not complete
           .toList()
         ..sort((a, b) => b.progress.compareTo(a.progress)); // Sort by progress descending
-      _logger.log('📚 Found ${inProgress.length} in-progress audiobooks');
-      return inProgress.take(20).toList(); // Limit to 20 for home row
+      final result = inProgress.take(20).toList(); // Limit to 20 for home row
+      _logger.log('📚 Found ${result.length} in-progress audiobooks');
+      _cacheService.setCachedInProgressAudiobooks(result);
+      return result;
     } catch (e) {
       _logger.log('❌ Failed to fetch in-progress audiobooks: $e');
+      // Fallback to cache on error
+      final cached = _cacheService.getCachedInProgressAudiobooks();
+      if (cached != null && cached.isNotEmpty) return cached;
       return [];
     }
   }
 
-  /// Get random audiobooks for discovery
-  Future<List<Audiobook>> getDiscoverAudiobooks() async {
-    if (_api == null) return [];
+  /// Get cached in-progress audiobooks synchronously (for instant display)
+  List<Audiobook>? getCachedInProgressAudiobooks() => _cacheService.getCachedInProgressAudiobooks();
+
+  /// Get random audiobooks for discovery with caching
+  Future<List<Audiobook>> getDiscoverAudiobooksWithCache({bool forceRefresh = false}) async {
+    // Check cache first
+    if (!forceRefresh && _cacheService.isDiscoverAudiobooksCacheValid()) {
+      _logger.log('📦 Using cached discover audiobooks');
+      return _cacheService.getCachedDiscoverAudiobooks()!;
+    }
+
+    if (_api == null) {
+      // Fallback to cache when offline
+      final cached = _cacheService.getCachedDiscoverAudiobooks();
+      if (cached != null && cached.isNotEmpty) return cached;
+      return [];
+    }
 
     try {
       _logger.log('📚 Fetching discover audiobooks...');
       final allAudiobooks = filterByProvider(await _api!.getAudiobooks());
       // Shuffle and take a subset
       final shuffled = List<Audiobook>.from(allAudiobooks)..shuffle();
+      final result = shuffled.take(20).toList();
       _logger.log('📚 Found ${allAudiobooks.length} total audiobooks, returning random selection');
-      return shuffled.take(20).toList();
+      _cacheService.setCachedDiscoverAudiobooks(result);
+      return result;
     } catch (e) {
       _logger.log('❌ Failed to fetch discover audiobooks: $e');
+      // Fallback to cache on error
+      final cached = _cacheService.getCachedDiscoverAudiobooks();
+      if (cached != null && cached.isNotEmpty) return cached;
       return [];
     }
   }
 
-  /// Get random series for discovery
-  Future<List<AudiobookSeries>> getDiscoverSeries() async {
-    if (_api == null) return [];
+  /// Get cached discover audiobooks synchronously (for instant display)
+  List<Audiobook>? getCachedDiscoverAudiobooks() => _cacheService.getCachedDiscoverAudiobooks();
+
+  /// Get random series for discovery with caching
+  Future<List<AudiobookSeries>> getDiscoverSeriesWithCache({bool forceRefresh = false}) async {
+    // Check cache first
+    if (!forceRefresh && _cacheService.isDiscoverSeriesCacheValid()) {
+      _logger.log('📦 Using cached discover series');
+      return _cacheService.getCachedDiscoverSeries()!;
+    }
+
+    if (_api == null) {
+      // Fallback to cache when offline
+      final cached = _cacheService.getCachedDiscoverSeries();
+      if (cached != null && cached.isNotEmpty) return cached;
+      return [];
+    }
 
     try {
       _logger.log('📚 Fetching discover series...');
       final allSeries = await _api!.getAudiobookSeries();
       // Shuffle and take a subset
       final shuffled = List<AudiobookSeries>.from(allSeries)..shuffle();
+      final result = shuffled.take(20).toList();
       _logger.log('📚 Found ${allSeries.length} total series, returning random selection');
-      return shuffled.take(20).toList();
+      _cacheService.setCachedDiscoverSeries(result);
+      return result;
     } catch (e) {
       _logger.log('❌ Failed to fetch discover series: $e');
+      // Fallback to cache on error
+      final cached = _cacheService.getCachedDiscoverSeries();
+      if (cached != null && cached.isNotEmpty) return cached;
       return [];
     }
   }
 
+  /// Get cached discover series synchronously (for instant display)
+  List<AudiobookSeries>? getCachedDiscoverSeries() => _cacheService.getCachedDiscoverSeries();
+
   // ============================================================================
   // DETAIL SCREEN CACHING
   // ============================================================================
@@ -3967,6 +4076,11 @@ class MusicAssistantProvider with ChangeNotifier {
           _currentAudiobook = null;
           stateChanged = true;
         }
+        if (_currentPodcastName != null) {
+          _logger.log('🎙️ External source active, clearing podcast context');
+          _currentPodcastName = null;
+          stateChanged = true;
+        }
         // Clear notification for external source
         audioHandler.clearRemotePlaybackState();
         if (stateChanged) {
@@ -4008,6 +4122,12 @@ class MusicAssistantProvider with ChangeNotifier {
           _currentAudiobook = null;
           stateChanged = true;
         }
+        // Clear podcast context when playback stops
+        if (_currentPodcastName != null) {
+          _logger.log('🎙️ Playback stopped, clearing podcast context');
+          _currentPodcastName = null;
+          stateChanged = true;
+        }
 
         if (stateChanged) {
           notifyListeners();

lib/screens/home_screen.dart

@@ -68,6 +68,12 @@ class _HomeScreenState extends State<HomeScreen> {
               return;
             }
 
+            // If queue panel is open, close it first (before collapsing player)
+            if (GlobalPlayerOverlay.isQueuePanelOpen) {
+              GlobalPlayerOverlay.closeQueuePanel();
+              return;
+            }
+
             // If global player is expanded, collapse it first
             if (GlobalPlayerOverlay.isPlayerExpanded) {
               GlobalPlayerOverlay.collapsePlayer();

lib/screens/library_playlists_screen.dart

@@ -4,6 +4,9 @@ import 'package:cached_network_image/cached_network_image.dart';
 import '../providers/music_assistant_provider.dart';
 import '../models/media_item.dart';
 import '../widgets/common/empty_state.dart';
+import '../constants/hero_tags.dart';
+import '../theme/theme_provider.dart';
+import '../utils/page_transitions.dart';
 import 'playlist_details_screen.dart';
 import '../l10n/app_localizations.dart';
 
@@ -104,34 +107,55 @@ class _LibraryPlaylistsScreenState extends State<LibraryPlaylistsScreen> {
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
 
+    // Unique suffix for this context to avoid hero tag conflicts
+    const heroSuffix = '_playlists';
+
     return RepaintBoundary(
       child: ListTile(
         key: ValueKey(playlist.itemId),
-        leading: Container(
-          width: 48,
-          height: 48,
-          decoration: BoxDecoration(
-            color: colorScheme.surfaceVariant,
+        leading: Hero(
+          tag: HeroTags.playlistCover + (playlist.uri ?? playlist.itemId) + heroSuffix,
+          child: ClipRRect(
             borderRadius: BorderRadius.circular(8),
-            image: imageUrl != null
-                ? DecorationImage(
-                    image: CachedNetworkImageProvider(imageUrl),
-                    fit: BoxFit.cover,
-                  )
-                : null,
+            child: Container(
+              width: 48,
+              height: 48,
+              color: colorScheme.surfaceContainerHighest,
+              child: imageUrl != null
+                  ? CachedNetworkImage(
+                      imageUrl: imageUrl,
+                      fit: BoxFit.cover,
+                      memCacheWidth: 96,
+                      memCacheHeight: 96,
+                      fadeInDuration: Duration.zero,
+                      fadeOutDuration: Duration.zero,
+                      placeholder: (_, __) => const SizedBox(),
+                      errorWidget: (_, __, ___) => Icon(
+                        Icons.playlist_play_rounded,
+                        color: colorScheme.onSurfaceVariant,
+                      ),
+                    )
+                  : Icon(
+                      Icons.playlist_play_rounded,
+                      color: colorScheme.onSurfaceVariant,
+                    ),
+            ),
           ),
-          child: imageUrl == null
-              ? Icon(Icons.playlist_play_rounded, color: colorScheme.onSurfaceVariant)
-              : null,
         ),
-        title: Text(
-          playlist.name,
-          style: textTheme.titleMedium?.copyWith(
-            color: colorScheme.onSurface,
-            fontWeight: FontWeight.w500,
+        title: Hero(
+          tag: HeroTags.playlistTitle + (playlist.uri ?? playlist.itemId) + heroSuffix,
+          child: Material(
+            color: Colors.transparent,
+            child: Text(
+              playlist.name,
+              style: textTheme.titleMedium?.copyWith(
+                color: colorScheme.onSurface,
+                fontWeight: FontWeight.w500,
+              ),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+            ),
           ),
-          maxLines: 1,
-          overflow: TextOverflow.ellipsis,
         ),
         subtitle: Text(
           playlist.trackCount != null
@@ -147,13 +171,14 @@ class _LibraryPlaylistsScreenState extends State<LibraryPlaylistsScreen> {
             ? const Icon(Icons.favorite, color: Colors.red, size: 20)
             : null,
         onTap: () {
+          updateAdaptiveColorsFromImage(context, imageUrl);
           Navigator.push(
             context,
-            MaterialPageRoute(
-              builder: (context) => PlaylistDetailsScreen(
+            FadeSlidePageRoute(
+              child: PlaylistDetailsScreen(
                 playlist: playlist,
-                provider: playlist.provider,
-                itemId: playlist.itemId,
+                heroTagSuffix: 'playlists',
+                initialImageUrl: imageUrl,
               ),
             ),
           );

lib/screens/new_home_screen.dart

@@ -13,6 +13,9 @@ import '../widgets/artist_row.dart';
 import '../widgets/track_row.dart';
 import '../widgets/audiobook_row.dart';
 import '../widgets/series_row.dart';
+import '../widgets/playlist_row.dart';
+import '../widgets/radio_station_row.dart';
+import '../widgets/podcast_row.dart';
 import '../widgets/common/disconnected_state.dart';
 import 'settings_screen.dart';
 import 'search_screen.dart';
@@ -35,6 +38,9 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
   bool _showFavoriteAlbums = false;
   bool _showFavoriteArtists = false;
   bool _showFavoriteTracks = false;
+  bool _showFavoritePlaylists = false;
+  bool _showFavoriteRadioStations = false;
+  bool _showFavoritePodcasts = false;
   // Audiobook rows (default off)
   bool _showContinueListeningAudiobooks = false;
   bool _showDiscoverAudiobooks = false;
@@ -45,19 +51,89 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
   @override
   bool get wantKeepAlive => true;
 
+  // Track if we had empty favorites on first load (to know when to refresh)
+  bool _hadEmptyFavoritesOnLoad = false;
+  SyncStatus? _lastSyncStatus;
+  int _lastArtistCount = 0;
+  MusicAssistantProvider? _providerListeningTo;
+
   @override
   void initState() {
     super.initState();
     WidgetsBinding.instance.addObserver(this);
     _loadSettings();
+    // Listen to sync completion to refresh favorite rows when data becomes available
+    SyncService.instance.addListener(_onSyncChanged);
+    _lastSyncStatus = SyncService.instance.status;
+    _checkInitialFavoriteState();
   }
 
   @override
   void dispose() {
+    SyncService.instance.removeListener(_onSyncChanged);
+    // Clean up provider listener if attached
+    _providerListeningTo?.removeListener(_onProviderChanged);
+    _providerListeningTo = null;
     WidgetsBinding.instance.removeObserver(this);
     super.dispose();
   }
 
+  /// Check if favorites are empty on initial load (so we know to refresh after sync)
+  void _checkInitialFavoriteState() {
+    // Schedule after first frame to ensure provider is accessible
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (!mounted) return;
+      final provider = context.read<MusicAssistantProvider>();
+      _lastArtistCount = provider.artists.length;
+      // Check if artists list is empty - favorites will also be empty
+      if (_lastArtistCount == 0) {
+        _hadEmptyFavoritesOnLoad = true;
+        _logger.log('📋 Home: favorites empty on load, will refresh after sync');
+        // Also listen to provider for when cache loads (before sync completes)
+        _providerListeningTo = provider;
+        provider.addListener(_onProviderChanged);
+      }
+    });
+  }
+
+  /// Called when MusicAssistantProvider changes (for cache load detection)
+  void _onProviderChanged() {
+    if (!mounted || !_hadEmptyFavoritesOnLoad || _providerListeningTo == null) return;
+    final currentCount = _providerListeningTo!.artists.length;
+    // If artists went from 0 to non-zero, refresh
+    if (_lastArtistCount == 0 && currentCount > 0) {
+      _logger.log('🔄 Home: artists loaded from cache ($currentCount), refreshing rows');
+      _hadEmptyFavoritesOnLoad = false;
+      _providerListeningTo!.removeListener(_onProviderChanged);
+      _providerListeningTo = null;
+      setState(() {
+        _refreshKey = UniqueKey();
+      });
+    }
+    _lastArtistCount = currentCount;
+  }
+
+  /// Called when SyncService status changes
+  void _onSyncChanged() {
+    final newStatus = SyncService.instance.status;
+    // When sync completes and we had empty favorites, refresh to show new data
+    if (_lastSyncStatus == SyncStatus.syncing &&
+        newStatus == SyncStatus.completed &&
+        _hadEmptyFavoritesOnLoad) {
+      _logger.log('🔄 Home: sync completed, refreshing favorite rows');
+      _hadEmptyFavoritesOnLoad = false;
+      // Clean up provider listener if still attached
+      _providerListeningTo?.removeListener(_onProviderChanged);
+      _providerListeningTo = null;
+      if (mounted) {
+        setState(() {
+          _refreshKey = UniqueKey();
+        });
+      }
+    }
+    _lastSyncStatus = newStatus;
+  }
+
   @override
   void didChangeAppLifecycleState(AppLifecycleState state) {
     // Reload settings when app resumes (coming back from settings)
@@ -73,6 +149,9 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
     final showFavAlbums = await SettingsService.getShowFavoriteAlbums();
     final showFavArtists = await SettingsService.getShowFavoriteArtists();
     final showFavTracks = await SettingsService.getShowFavoriteTracks();
+    final showFavPlaylists = await SettingsService.getShowFavoritePlaylists();
+    final showFavRadio = await SettingsService.getShowFavoriteRadioStations();
+    final showFavPodcasts = await SettingsService.getShowFavoritePodcasts();
     final showContAudiobooks = await SettingsService.getShowContinueListeningAudiobooks();
     final showDiscAudiobooks = await SettingsService.getShowDiscoverAudiobooks();
     final showDiscSeries = await SettingsService.getShowDiscoverSeries();
@@ -85,6 +164,9 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
         _showFavoriteAlbums = showFavAlbums;
         _showFavoriteArtists = showFavArtists;
         _showFavoriteTracks = showFavTracks;
+        _showFavoritePlaylists = showFavPlaylists;
+        _showFavoriteRadioStations = showFavRadio;
+        _showFavoritePodcasts = showFavPodcasts;
         _showContinueListeningAudiobooks = showContAudiobooks;
         _showDiscoverAudiobooks = showDiscAudiobooks;
         _showDiscoverSeries = showDiscSeries;
@@ -238,15 +320,50 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
   }
 
 
+  /// Count how many rows are currently enabled
+  int _countEnabledRows() {
+    int count = 0;
+    for (final rowId in _homeRowOrder) {
+      if (_isRowEnabled(rowId)) count++;
+    }
+    return count;
+  }
+
+  /// Check if a specific row is enabled
+  bool _isRowEnabled(String rowId) {
+    switch (rowId) {
+      case 'recent-albums': return _showRecentAlbums;
+      case 'discover-artists': return _showDiscoverArtists;
+      case 'discover-albums': return _showDiscoverAlbums;
+      case 'continue-listening': return _showContinueListeningAudiobooks;
+      case 'discover-audiobooks': return _showDiscoverAudiobooks;
+      case 'discover-series': return _showDiscoverSeries;
+      case 'favorite-albums': return _showFavoriteAlbums;
+      case 'favorite-artists': return _showFavoriteArtists;
+      case 'favorite-tracks': return _showFavoriteTracks;
+      case 'favorite-playlists': return _showFavoritePlaylists;
+      case 'favorite-radio-stations': return _showFavoriteRadioStations;
+      case 'favorite-podcasts': return _showFavoritePodcasts;
+      default: return false;
+    }
+  }
+
   Widget _buildConnectedView(
       BuildContext context, MusicAssistantProvider provider) {
     // Use LayoutBuilder to get available screen height
     return LayoutBuilder(
       builder: (context, constraints) {
-        // Simple calculation: available height divided by 3 rows
-        // Each row includes its title, artwork, and info
+        // Each row is always 1/3 of screen height
+        // 1 row = 1/3, 2 rows = 2/3, 3 rows = full screen, 4+ rows scroll
         final availableHeight = constraints.maxHeight - BottomSpacing.withMiniPlayer;
-        final rowHeight = (availableHeight + 8) / 3;
+
+        // Account for margins between rows (2px each)
+        // Only adjust for margins when ≤3 rows (so they fit exactly without scroll)
+        // For 4+ rows, use original calculation so 4th row stays hidden (scrollable)
+        const marginSize = 2.0;
+        final enabledRows = _countEnabledRows();
+        final marginsInView = enabledRows > 1 && enabledRows <= 3 ? (enabledRows - 1) * marginSize : 0.0;
+        final rowHeight = (availableHeight - marginsInView) / 3;
 
         // Use Android 12+ stretch overscroll effect
         return NotificationListener<ScrollNotification>(
@@ -288,6 +405,10 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
     for (final rowId in _homeRowOrder) {
       final widget = _buildRowWidget(rowId, provider, rowHeight);
       if (widget != null) {
+        // Add spacing between rows (not before first row)
+        if (rows.isNotEmpty) {
+          rows.add(const SizedBox(height: 2.0));
+        }
         rows.add(widget);
       }
     }
@@ -330,7 +451,8 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
         return AudiobookRow(
           key: const ValueKey('continue-listening'),
           title: S.of(context)!.continueListening,
-          loadAudiobooks: () => provider.getInProgressAudiobooks(),
+          loadAudiobooks: () => provider.getInProgressAudiobooksWithCache(),
+          getCachedAudiobooks: () => provider.getCachedInProgressAudiobooks(),
           rowHeight: rowHeight,
         );
       case 'discover-audiobooks':
@@ -338,7 +460,8 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
         return AudiobookRow(
           key: const ValueKey('discover-audiobooks'),
           title: S.of(context)!.discoverAudiobooks,
-          loadAudiobooks: () => provider.getDiscoverAudiobooks(),
+          loadAudiobooks: () => provider.getDiscoverAudiobooksWithCache(),
+          getCachedAudiobooks: () => provider.getCachedDiscoverAudiobooks(),
           rowHeight: rowHeight,
         );
       case 'discover-series':
@@ -346,7 +469,8 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
         return SeriesRow(
           key: const ValueKey('discover-series'),
           title: S.of(context)!.discoverSeries,
-          loadSeries: () => provider.getDiscoverSeries(),
+          loadSeries: () => provider.getDiscoverSeriesWithCache(),
+          getCachedSeries: () => provider.getCachedDiscoverSeries(),
           rowHeight: rowHeight,
         );
       case 'favorite-albums':
@@ -373,6 +497,33 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
           loadTracks: () => provider.getFavoriteTracks(),
           rowHeight: rowHeight,
         );
+      case 'favorite-playlists':
+        if (!_showFavoritePlaylists) return null;
+        return PlaylistRow(
+          key: const ValueKey('favorite-playlists'),
+          title: S.of(context)!.favoritePlaylists,
+          loadPlaylists: () => provider.getFavoritePlaylists(),
+          heroTagSuffix: 'home',
+          rowHeight: rowHeight,
+        );
+      case 'favorite-radio-stations':
+        if (!_showFavoriteRadioStations) return null;
+        return RadioStationRow(
+          key: const ValueKey('favorite-radio-stations'),
+          title: S.of(context)!.favoriteRadioStations,
+          loadRadioStations: () => provider.getFavoriteRadioStations(),
+          heroTagSuffix: 'home',
+          rowHeight: rowHeight,
+        );
+      case 'favorite-podcasts':
+        if (!_showFavoritePodcasts) return null;
+        return PodcastRow(
+          key: const ValueKey('favorite-podcasts'),
+          title: S.of(context)!.favoritePodcasts,
+          loadPodcasts: () => provider.getFavoritePodcasts(),
+          heroTagSuffix: 'home',
+          rowHeight: rowHeight,
+        );
       default:
         return null;
     }

lib/screens/new_library_screen.dart

@@ -64,6 +64,14 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
   // Media type selection (Music, Books, Podcasts)
   LibraryMediaType _selectedMediaType = LibraryMediaType.music;
 
+  // Track overscroll for switching between media types
+  double _horizontalOverscroll = 0;
+  static const double _overscrollThreshold = 80; // Pixels to trigger switch
+
+  // Track horizontal drag for single-category types (where PageView doesn't overscroll)
+  double _horizontalDragStart = 0;
+  double _horizontalDragDelta = 0;
+
   // View mode settings
   String _artistsViewMode = 'list'; // 'grid2', 'grid3', 'list'
   String _albumsViewMode = 'grid2'; // 'grid2', 'grid3', 'list'
@@ -477,6 +485,26 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     });
   }
 
+  /// Get the color for a media type - muted colors based on primaryContainer tone
+  Color _getMediaTypeColor(ColorScheme colorScheme, LibraryMediaType type) {
+    final baseColor = colorScheme.primaryContainer;
+    final baseHsl = HSLColor.fromColor(baseColor);
+
+    double hueShift;
+    switch (type) {
+      case LibraryMediaType.music:
+        hueShift = 0; // Keep primary hue (purple-ish)
+      case LibraryMediaType.books:
+        hueShift = 35; // Shift toward orange
+      case LibraryMediaType.podcasts:
+        hueShift = 160; // Shift toward teal
+      case LibraryMediaType.radio:
+        hueShift = -30; // Shift toward pink
+    }
+
+    return baseHsl.withHue((baseHsl.hue + hueShift) % 360).toColor();
+  }
+
   void _changeMediaType(LibraryMediaType type) {
     _logger.log('📚 _changeMediaType called: $type (current: $_selectedMediaType)');
     if (_selectedMediaType == type) {
@@ -523,6 +551,70 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     _tabIndexNotifier.value = index;
   }
 
+  /// Handle horizontal overscroll to switch between media types
+  bool _handleHorizontalOverscroll(ScrollNotification notification) {
+    if (notification.metrics.axis != Axis.horizontal) {
+      return false;
+    }
+
+    if (notification is OverscrollNotification) {
+      _horizontalOverscroll += notification.overscroll;
+
+      // Check if we've overscrolled enough to switch
+      // Positive overscroll = swiping left at the end = go to NEXT type
+      // Negative overscroll = swiping right at the start = go to PREVIOUS type
+      if (_horizontalOverscroll > _overscrollThreshold) {
+        _horizontalOverscroll = 0;
+        _switchToNextMediaType();
+        return true;
+      } else if (_horizontalOverscroll < -_overscrollThreshold) {
+        _horizontalOverscroll = 0;
+        _switchToPreviousMediaType();
+        return true;
+      }
+    } else if (notification is ScrollEndNotification) {
+      // Reset overscroll accumulation when scroll ends
+      _horizontalOverscroll = 0;
+    }
+
+    return false;
+  }
+
+  void _switchToNextMediaType() {
+    final types = LibraryMediaType.values;
+    final currentIndex = types.indexOf(_selectedMediaType);
+    final nextIndex = (currentIndex + 1) % types.length;
+    _changeMediaType(types[nextIndex]);
+  }
+
+  void _switchToPreviousMediaType() {
+    final types = LibraryMediaType.values;
+    final currentIndex = types.indexOf(_selectedMediaType);
+    final prevIndex = (currentIndex - 1 + types.length) % types.length;
+    _changeMediaType(types[prevIndex]);
+  }
+
+  // Drag handlers for single-category types
+  void _onHorizontalDragStart(DragStartDetails details) {
+    _horizontalDragStart = details.globalPosition.dx;
+    _horizontalDragDelta = 0;
+  }
+
+  void _onHorizontalDragUpdate(DragUpdateDetails details) {
+    _horizontalDragDelta = details.globalPosition.dx - _horizontalDragStart;
+  }
+
+  void _onHorizontalDragEnd(DragEndDetails details) {
+    // Swipe right (positive delta) = go to previous type
+    // Swipe left (negative delta) = go to next type
+    if (_horizontalDragDelta > _overscrollThreshold) {
+      _switchToPreviousMediaType();
+    } else if (_horizontalDragDelta < -_overscrollThreshold) {
+      _switchToNextMediaType();
+    }
+    _horizontalDragDelta = 0;
+  }
+
   /// Handle scroll notifications to hide/show filter bars
   bool _handleScrollNotification(ScrollNotification notification) {
     // Don't hide while dragging letter scrollbar
@@ -801,6 +893,9 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
             _seriesCoversLoading.remove(seriesId);
           });
 
+          // Precache images for smooth hero animations
+          _precacheSeriesCovers(covers);
+
           // PERF: Queue color extraction with debounce to avoid blocking UI during scroll
           _queueColorExtraction(seriesId, covers);
         }
@@ -811,6 +906,17 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     }
   }
 
+  /// Precache series cover images for smooth hero animations
+  void _precacheSeriesCovers(List<String> covers) {
+    if (!mounted) return;
+    for (final url in covers) {
+      precacheImage(
+        CachedNetworkImageProvider(url),
+        context,
+      ).catchError((_) => false);
+    }
+  }
+
   /// PERF: Queue color extraction requests - processed after scroll settles
   void _queueColorExtraction(String seriesId, List<String> coverUrls) {
     if (coverUrls.isEmpty) return;
@@ -975,18 +1081,34 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
                   child: Stack(
                     children: [
                       // Main scrollable content
-                      NotificationListener<ScrollNotification>(
-                        onNotification: _handleScrollNotification,
-                        // PERF: Use PageView.builder to only build visible tabs
-                        child: PageView.builder(
-                          controller: _pageController,
-                          onPageChanged: _onPageChanged,
-                          itemCount: _tabCount,
-                          // Faster settling so vertical scroll works sooner after swipe
-                          physics: const _FastPageScrollPhysics(),
-                          itemBuilder: (context, index) => _buildTabAtIndex(context, l10n, index),
-                        ),
-                      ),
+                      // For single-category types, wrap with GestureDetector for swipe detection
+                      // (PageView with 1 item doesn't generate overscroll)
+                      _tabCount == 1
+                          ? GestureDetector(
+                              onHorizontalDragStart: _onHorizontalDragStart,
+                              onHorizontalDragUpdate: _onHorizontalDragUpdate,
+                              onHorizontalDragEnd: _onHorizontalDragEnd,
+                              child: NotificationListener<ScrollNotification>(
+                                onNotification: _handleScrollNotification,
+                                child: _buildTabAtIndex(context, l10n, 0),
+                              ),
+                            )
+                          : NotificationListener<ScrollNotification>(
+                              onNotification: _handleScrollNotification,
+                              // PERF: Use PageView.builder to only build visible tabs
+                              // Wrapped with horizontal overscroll detection for media type switching
+                              child: NotificationListener<ScrollNotification>(
+                                onNotification: _handleHorizontalOverscroll,
+                                child: PageView.builder(
+                                  controller: _pageController,
+                                  onPageChanged: _onPageChanged,
+                                  itemCount: _tabCount,
+                                  // Faster settling so vertical scroll works sooner after swipe
+                                  physics: const _FastPageScrollPhysics(),
+                                  itemBuilder: (context, index) => _buildTabAtIndex(context, l10n, index),
+                                ),
+                              ),
+                            ),
                       // Fade gradient at top - content fades as it scrolls under filter bar
                       Positioned(
                         top: 0,
@@ -1097,35 +1219,130 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
       }
     }
 
-    // Justify chips across full width
-    return Row(
-      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-      children: LibraryMediaType.values.map((type) {
-        final isSelected = _selectedMediaType == type;
-        return FilterChip(
-          selected: isSelected,
-          showCheckmark: false,
-          // Only show icon when selected
-          avatar: isSelected
-              ? Icon(
-                  getMediaTypeIcon(type),
-                  size: 18,
-                  color: colorScheme.onTertiaryContainer,
-                )
-              : null,
-          label: Text(getMediaTypeLabel(type)),
-          labelStyle: TextStyle(
-            color: isSelected
-                ? colorScheme.onTertiaryContainer
-                : colorScheme.onSurface.withOpacity(0.7),
-            fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
+    final types = LibraryMediaType.values;
+
+    // Calculate flex values based on label length
+    // Longer labels get more space to avoid clipping
+    // Base flex of 10 for icon + padding, plus label length
+    int getFlexForType(LibraryMediaType type) {
+      final label = getMediaTypeLabel(type);
+      // Base space for icon/padding + proportional text space
+      return 10 + label.length;
+    }
+
+    // Pre-calculate flex values and total
+    final flexValues = types.map((t) => getFlexForType(t)).toList();
+    final totalFlex = flexValues.reduce((a, b) => a + b);
+    final selectedIndex = types.indexOf(_selectedMediaType);
+
+    // Horizontal inset for the pill highlight (gap between adjacent tabs)
+    const double hInset = 2.0;
+    final isFirstTab = selectedIndex == 0;
+    final isLastTab = selectedIndex == types.length - 1;
+
+    // Animated sliding highlight with pill shape
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final totalWidth = constraints.maxWidth;
+
+        // Calculate left position for a given tab index
+        double getLeftPosition(int index) {
+          double left = 0;
+          for (int i = 0; i < index; i++) {
+            left += (flexValues[i] / totalFlex) * totalWidth;
+          }
+          return left;
+        }
+
+        // Calculate width for a given tab index
+        double getTabWidth(int index) {
+          return (flexValues[index] / totalFlex) * totalWidth;
+        }
+
+        // Calculate highlight position and size based on whether it's at the edge
+        // First tab: flush with left edge, gap on right
+        // Last tab: gap on left, flush with right edge
+        // Middle tabs: gap on both sides
+        final leftInset = isFirstTab ? 0.0 : hInset;
+        final rightInset = isLastTab ? 0.0 : hInset;
+        final highlightLeft = getLeftPosition(selectedIndex) + leftInset;
+        final highlightWidth = getTabWidth(selectedIndex) - leftInset - rightInset;
+
+        return Container(
+          decoration: BoxDecoration(
+            color: colorScheme.surfaceContainerHighest.withOpacity(0.5),
+            borderRadius: BorderRadius.circular(8),
+          ),
+          child: Stack(
+            children: [
+              // Animated sliding highlight (pill shape with full border radius)
+              AnimatedPositioned(
+                duration: const Duration(milliseconds: 300),
+                curve: Curves.easeOutCubic,
+                left: highlightLeft,
+                width: highlightWidth,
+                top: 0,
+                bottom: 0,
+                child: AnimatedContainer(
+                  duration: const Duration(milliseconds: 300),
+                  curve: Curves.easeOutCubic,
+                  decoration: BoxDecoration(
+                    color: _getMediaTypeColor(colorScheme, _selectedMediaType),
+                    borderRadius: BorderRadius.circular(8),
+                  ),
+                ),
+              ),
+              // Tab buttons row (transparent, on top of highlight)
+              Row(
+                children: types.asMap().entries.map((entry) {
+                  final index = entry.key;
+                  final type = entry.value;
+                  final isSelected = _selectedMediaType == type;
+
+                  return Expanded(
+                    flex: flexValues[index],
+                    child: GestureDetector(
+                      onTap: () => _changeMediaType(type),
+                      behavior: HitTestBehavior.opaque,
+                      child: Container(
+                        alignment: Alignment.center,
+                        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
+                        child: Row(
+                          mainAxisAlignment: MainAxisAlignment.center,
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            Icon(
+                              getMediaTypeIcon(type),
+                              size: 18,
+                              color: isSelected
+                                  ? colorScheme.onPrimaryContainer
+                                  : colorScheme.onSurface.withOpacity(0.6),
+                            ),
+                            const SizedBox(width: 6),
+                            Flexible(
+                              child: Text(
+                                getMediaTypeLabel(type),
+                                style: TextStyle(
+                                  color: isSelected
+                                      ? colorScheme.onPrimaryContainer
+                                      : colorScheme.onSurface.withOpacity(0.7),
+                                  fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
+                                  fontSize: 14,
+                                ),
+                                overflow: TextOverflow.ellipsis,
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                    ),
+                  );
+                }).toList(),
+              ),
+            ],
           ),
-          backgroundColor: colorScheme.surfaceVariant.withOpacity(0.5),
-          selectedColor: colorScheme.tertiaryContainer,
-          side: BorderSide.none,
-          onSelected: (_) => _changeMediaType(type),
         );
-      }).toList(),
+      },
     );
   }
 
@@ -1186,39 +1403,97 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
   Widget _buildCategoryChips(ColorScheme colorScheme, S l10n, int selectedIndex) {
     final categories = _getCategoryLabels(l10n);
 
-    return ClipRRect(
-      borderRadius: BorderRadius.circular(8),
-      child: Row(
-        mainAxisSize: MainAxisSize.min,
-        children: categories.asMap().entries.map((entry) {
-          final index = entry.key;
-          final label = entry.value;
-          final isSelected = selectedIndex == index;
+    // Calculate flex values based on label length (same approach as media type bar)
+    final flexValues = categories.map((label) => 10 + label.length).toList();
+    final totalFlex = flexValues.reduce((a, b) => a + b);
 
-          return Material(
-            color: isSelected
-                ? colorScheme.primaryContainer
-                : colorScheme.surfaceVariant.withOpacity(0.6),
-            child: InkWell(
-              onTap: () => _animateToCategory(index),
-              child: Container(
-                height: _filterRowHeight,
-                alignment: Alignment.center,
-                padding: const EdgeInsets.symmetric(horizontal: 14),
-                child: Text(
-                  label,
-                  style: TextStyle(
-                    color: isSelected
-                        ? colorScheme.onPrimaryContainer
-                        : colorScheme.onSurfaceVariant.withOpacity(0.8),
-                    fontSize: 14,
-                    fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
-                  ),
-                ),
+    // Estimate total width: base padding (28) + text width per label
+    final estimatedTotalWidth = categories.fold<double>(
+      0,
+      (sum, label) => sum + 28 + label.length * 8.5,
+    );
+
+    const double hInset = 2.0;
+    final isFirstTab = selectedIndex == 0;
+    final isLastTab = selectedIndex == categories.length - 1;
+
+    // Calculate left position for a given index
+    double getLeftPosition(int index) {
+      double left = 0;
+      for (int i = 0; i < index; i++) {
+        left += (flexValues[i] / totalFlex) * estimatedTotalWidth;
+      }
+      return left;
+    }
+
+    // Calculate width for a given index
+    double getTabWidth(int index) {
+      return (flexValues[index] / totalFlex) * estimatedTotalWidth;
+    }
+
+    // Calculate highlight position and size based on whether it's at the edge
+    // First tab: flush with left edge, gap on right
+    // Last tab: gap on left, flush with right edge
+    // Middle tabs: gap on both sides
+    final leftInset = isFirstTab ? 0.0 : hInset;
+    final rightInset = isLastTab ? 0.0 : hInset;
+    final highlightLeft = getLeftPosition(selectedIndex) + leftInset;
+    final highlightWidth = getTabWidth(selectedIndex) - leftInset - rightInset;
+
+    return Container(
+      width: estimatedTotalWidth,
+      height: _filterRowHeight,
+      decoration: BoxDecoration(
+        color: colorScheme.surfaceVariant.withOpacity(0.6),
+        borderRadius: BorderRadius.circular(8),
+      ),
+      child: Stack(
+        children: [
+          // Animated sliding highlight
+          AnimatedPositioned(
+            duration: const Duration(milliseconds: 300),
+            curve: Curves.easeOutCubic,
+            left: highlightLeft,
+            width: highlightWidth,
+            top: 0,
+            bottom: 0,
+            child: Container(
+              decoration: BoxDecoration(
+                color: _getMediaTypeColor(colorScheme, _selectedMediaType),
+                borderRadius: BorderRadius.circular(8),
               ),
             ),
-          );
-        }).toList(),
+          ),
+          // Labels row
+          Row(
+            children: categories.asMap().entries.map((entry) {
+              final index = entry.key;
+              final label = entry.value;
+              final isSelected = selectedIndex == index;
+
+              return Expanded(
+                flex: flexValues[index],
+                child: GestureDetector(
+                  onTap: () => _animateToCategory(index),
+                  behavior: HitTestBehavior.opaque,
+                  child: Container(
+                    alignment: Alignment.center,
+                    child: Text(
+                      label,
+                      style: TextStyle(
+                        color: isSelected
+                            ? colorScheme.onPrimaryContainer
+                            : colorScheme.onSurfaceVariant.withOpacity(0.8),
+                        fontSize: 14,
+                        fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
+                      ),
+                    ),
+                  ),
+                ),
+              );
+            }).toList(),
+          ),
+        ],
       ),
     );
   }
@@ -1992,8 +2267,8 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
         _logger.log('📚 Tapped series: ${series.name}, path: ${series.id}');
         Navigator.push(
           context,
-          MaterialPageRoute(
-            builder: (context) => AudiobookSeriesScreen(
+          FadeSlidePageRoute(
+            child: AudiobookSeriesScreen(
               series: series,
               heroTag: heroTag,
               initialCovers: covers,
@@ -2024,8 +2299,8 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
         _logger.log('📚 Tapped series: ${series.name}, path: ${series.id}');
         Navigator.push(
           context,
-          MaterialPageRoute(
-            builder: (context) => AudiobookSeriesScreen(
+          FadeSlidePageRoute(
+            child: AudiobookSeriesScreen(
               series: series,
               heroTag: heroTag,
               initialCovers: cachedCovers,
@@ -2039,13 +2314,16 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
           // Square cover grid with Hero animation
           Hero(
             tag: heroTag,
-            child: AspectRatio(
-              aspectRatio: 1.0,
-              child: ClipRRect(
-                borderRadius: BorderRadius.circular(8),
-                child: Container(
-                  color: colorScheme.surfaceVariant,
-                  child: _buildSeriesCoverGrid(series, colorScheme, maProvider, maxGridSize: maxCoverGridSize),
+            // RepaintBoundary caches the rendered grid for smooth animation
+            child: RepaintBoundary(
+              child: AspectRatio(
+                aspectRatio: 1.0,
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(12), // Match detail screen
+                  child: Container(
+                    color: colorScheme.surfaceVariant,
+                    child: _buildSeriesCoverGrid(series, colorScheme, maProvider, maxGridSize: maxCoverGridSize),
+                  ),
                 ),
               ),
             ),
@@ -3089,51 +3367,76 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
 
+    // Unique suffix for list view context
+    const heroSuffix = '_library_list';
+
     return RepaintBoundary(
       child: ListTile(
         key: ValueKey(playlist.itemId),
-        leading: Container(
-        width: 48,
-        height: 48,
-        decoration: BoxDecoration(
-          color: colorScheme.surfaceVariant,
-          borderRadius: BorderRadius.circular(8),
-          image: imageUrl != null
-              ? DecorationImage(image: CachedNetworkImageProvider(imageUrl), fit: BoxFit.cover)
-              : null,
+        leading: Hero(
+          tag: HeroTags.playlistCover + (playlist.uri ?? playlist.itemId) + heroSuffix,
+          child: ClipRRect(
+            borderRadius: BorderRadius.circular(8),
+            child: Container(
+              width: 48,
+              height: 48,
+              color: colorScheme.surfaceContainerHighest,
+              child: imageUrl != null
+                  ? CachedNetworkImage(
+                      imageUrl: imageUrl,
+                      fit: BoxFit.cover,
+                      memCacheWidth: 96,
+                      memCacheHeight: 96,
+                      fadeInDuration: Duration.zero,
+                      fadeOutDuration: Duration.zero,
+                      placeholder: (_, __) => const SizedBox(),
+                      errorWidget: (_, __, ___) => Icon(
+                        Icons.playlist_play_rounded,
+                        color: colorScheme.onSurfaceVariant,
+                      ),
+                    )
+                  : Icon(
+                      Icons.playlist_play_rounded,
+                      color: colorScheme.onSurfaceVariant,
+                    ),
+            ),
+          ),
         ),
-        child: imageUrl == null
-            ? Icon(Icons.playlist_play_rounded, color: colorScheme.onSurfaceVariant)
-            : null,
-      ),
-      title: Text(
-        playlist.name,
-        style: textTheme.titleMedium?.copyWith(
-          color: colorScheme.onSurface,
-          fontWeight: FontWeight.w500,
+        title: Hero(
+          tag: HeroTags.playlistTitle + (playlist.uri ?? playlist.itemId) + heroSuffix,
+          child: Material(
+            color: Colors.transparent,
+            child: Text(
+              playlist.name,
+              style: textTheme.titleMedium?.copyWith(
+                color: colorScheme.onSurface,
+                fontWeight: FontWeight.w500,
+              ),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+        ),
+        subtitle: Text(
+          playlist.trackCount != null
+              ? '${playlist.trackCount} ${l10n.tracks}'
+              : playlist.owner ?? l10n.playlist,
+          style: textTheme.bodySmall?.copyWith(color: colorScheme.onSurface.withOpacity(0.7)),
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
         ),
-        maxLines: 1,
-        overflow: TextOverflow.ellipsis,
-      ),
-      subtitle: Text(
-        playlist.trackCount != null
-            ? '${playlist.trackCount} ${l10n.tracks}'
-            : playlist.owner ?? l10n.playlist,
-        style: textTheme.bodySmall?.copyWith(color: colorScheme.onSurface.withOpacity(0.7)),
-        maxLines: 1,
-        overflow: TextOverflow.ellipsis,
-      ),
         trailing: playlist.favorite == true
             ? const Icon(Icons.favorite, color: Colors.red, size: 20)
             : null,
         onTap: () {
+          updateAdaptiveColorsFromImage(context, imageUrl);
           Navigator.push(
             context,
-            MaterialPageRoute(
-              builder: (context) => PlaylistDetailsScreen(
+            FadeSlidePageRoute(
+              child: PlaylistDetailsScreen(
                 playlist: playlist,
-                provider: playlist.provider,
-                itemId: playlist.itemId,
+                heroTagSuffix: 'library_list',
+                initialImageUrl: imageUrl,
               ),
             ),
           );
@@ -3148,73 +3451,92 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
 
-    return GestureDetector(
-      onTap: () {
-        Navigator.push(
-          context,
-          MaterialPageRoute(
-            builder: (context) => PlaylistDetailsScreen(
-              playlist: playlist,
-              provider: playlist.provider,
-              itemId: playlist.itemId,
-            ),
-          ),
-        );
-      },
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Expanded(
-            child: ClipRRect(
-              borderRadius: BorderRadius.circular(12),
-              child: Container(
-                color: colorScheme.surfaceVariant,
-                child: imageUrl != null
-                    ? CachedNetworkImage(
-                        imageUrl: imageUrl,
-                        fit: BoxFit.cover,
-                        width: double.infinity,
-                        height: double.infinity,
-                        placeholder: (_, __) => const SizedBox(),
-                        errorWidget: (_, __, ___) => Center(
-                          child: Icon(
-                            Icons.playlist_play_rounded,
-                            size: 48,
-                            color: colorScheme.onSurfaceVariant,
-                          ),
-                        ),
-                      )
-                    : Center(
-                        child: Icon(
-                          Icons.playlist_play_rounded,
-                          size: 48,
-                          color: colorScheme.onSurfaceVariant,
-                        ),
-                      ),
+    // Unique suffix for grid view context
+    const heroSuffix = '_library_grid';
+
+    return RepaintBoundary(
+      child: GestureDetector(
+        onTap: () {
+          updateAdaptiveColorsFromImage(context, imageUrl);
+          Navigator.push(
+            context,
+            FadeSlidePageRoute(
+              child: PlaylistDetailsScreen(
+                playlist: playlist,
+                heroTagSuffix: 'library_grid',
+                initialImageUrl: imageUrl,
               ),
             ),
-          ),
-          const SizedBox(height: 8),
-          Text(
-            playlist.name,
-            style: textTheme.bodyMedium?.copyWith(
-              color: colorScheme.onSurface,
-              fontWeight: FontWeight.w500,
+          );
+        },
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Expanded(
+              child: Hero(
+                tag: HeroTags.playlistCover + (playlist.uri ?? playlist.itemId) + heroSuffix,
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(12),
+                  child: Container(
+                    color: colorScheme.surfaceContainerHighest,
+                    child: imageUrl != null
+                        ? CachedNetworkImage(
+                            imageUrl: imageUrl,
+                            fit: BoxFit.cover,
+                            width: double.infinity,
+                            height: double.infinity,
+                            memCacheWidth: 256,
+                            memCacheHeight: 256,
+                            fadeInDuration: Duration.zero,
+                            fadeOutDuration: Duration.zero,
+                            placeholder: (_, __) => const SizedBox(),
+                            errorWidget: (_, __, ___) => Center(
+                              child: Icon(
+                                Icons.playlist_play_rounded,
+                                size: 48,
+                                color: colorScheme.onSurfaceVariant,
+                              ),
+                            ),
+                          )
+                        : Center(
+                            child: Icon(
+                              Icons.playlist_play_rounded,
+                              size: 48,
+                              color: colorScheme.onSurfaceVariant,
+                            ),
+                          ),
+                  ),
+                ),
+              ),
             ),
-            maxLines: 1,
-            overflow: TextOverflow.ellipsis,
-          ),
-          Text(
-            playlist.trackCount != null
-                ? '${playlist.trackCount} ${l10n.tracks}'
-                : playlist.owner ?? l10n.playlist,
-            style: textTheme.bodySmall?.copyWith(
-              color: colorScheme.onSurface.withOpacity(0.7),
+            const SizedBox(height: 8),
+            Hero(
+              tag: HeroTags.playlistTitle + (playlist.uri ?? playlist.itemId) + heroSuffix,
+              child: Material(
+                color: Colors.transparent,
+                child: Text(
+                  playlist.name,
+                  style: textTheme.bodyMedium?.copyWith(
+                    color: colorScheme.onSurface,
+                    fontWeight: FontWeight.w500,
+                  ),
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                ),
+              ),
             ),
-            maxLines: 1,
-            overflow: TextOverflow.ellipsis,
-          ),
-        ],
+            Text(
+              playlist.trackCount != null
+                  ? '${playlist.trackCount} ${l10n.tracks}'
+                  : playlist.owner ?? l10n.playlist,
+              style: textTheme.bodySmall?.copyWith(
+                color: colorScheme.onSurface.withOpacity(0.7),
+              ),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+            ),
+          ],
+        ),
       ),
     );
   }

lib/screens/podcast_detail_screen.dart

@@ -225,6 +225,8 @@ class _PodcastDetailScreenState extends State<PodcastDetailScreen> {
 
     if (selectedPlayer != null) {
       try {
+        // Set podcast context before playing so player UI shows correct podcast name
+        maProvider.setCurrentPodcastName(widget.podcast.name);
         await maProvider.api?.playPodcastEpisode(selectedPlayer.playerId, episode);
         if (mounted) {
           ScaffoldMessenger.of(context).showSnackBar(
@@ -259,6 +261,8 @@ class _PodcastDetailScreenState extends State<PodcastDetailScreen> {
       selectedPlayer: maProvider.selectedPlayer,
       onPlayerSelected: (player) async {
         maProvider.selectPlayer(player);
+        // Set podcast context before playing so player UI shows correct podcast name
+        maProvider.setCurrentPodcastName(widget.podcast.name);
         await maProvider.api?.playPodcastEpisode(player.playerId, episode);
       },
     ).whenComplete(() {

lib/screens/search_screen.dart

@@ -137,6 +137,13 @@ class SearchScreenState extends State<SearchScreen> {
   double _lastVerticalScrollOffset = 0;
   static const double _scrollThreshold = 10.0;
 
+  // Filter chip position tracking for animated sliding highlight
+  final Map<String, GlobalKey> _filterKeys = {};
+  final Map<String, double> _filterWidths = {};
+  final Map<String, double> _filterPositions = {};
+  double _highlightLeft = 0;
+  double _highlightWidth = 80; // Default width until measured
+
   @override
   void initState() {
     super.initState();
@@ -185,6 +192,39 @@ class SearchScreenState extends State<SearchScreen> {
     }
   }
 
+  /// Measure filter chip positions and update highlight
+  void _measureFilterPositions() {
+    final filters = _getAvailableFilters();
+    double left = 0;
+
+    for (final filter in filters) {
+      final key = _filterKeys[filter];
+      if (key?.currentContext != null) {
+        final box = key!.currentContext!.findRenderObject() as RenderBox?;
+        if (box != null && box.hasSize) {
+          _filterWidths[filter] = box.size.width;
+          _filterPositions[filter] = left;
+          left += box.size.width;
+        }
+      }
+    }
+  }
+
+  /// Update highlight position for the active filter
+  void _updateHighlightPosition(String activeFilter) {
+    _measureFilterPositions();
+
+    final position = _filterPositions[activeFilter];
+    final width = _filterWidths[activeFilter];
+
+    if (position != null && width != null) {
+      setState(() {
+        _highlightLeft = position;
+        _highlightWidth = width;
+      });
+    }
+  }
+
   /// Scroll filter bar to keep active filter visible
   /// Only scrolls when the filter would be obscured (off-screen)
   /// Uses post-frame callback to avoid interfering with PageView animation
@@ -200,30 +240,35 @@ class SearchScreenState extends State<SearchScreen> {
       // If all filters fit on screen, don't scroll at all
       if (maxScroll <= 0) return;
 
-      // Approximate width per filter chip (padding + text)
-      const chipWidth = 80.0;
-      const horizontalPadding = 16.0;
+      final filters = _getAvailableFilters();
+      if (filterIndex < 0 || filterIndex >= filters.length) return;
+
+      final filter = filters[filterIndex];
+
+      // Update highlight position
+      _updateHighlightPosition(filter);
+
+      // Use measured positions if available, fallback to estimate
+      final chipLeft = _filterPositions[filter] ?? (filterIndex * 80.0);
+      final chipWidth = _filterWidths[filter] ?? 80.0;
+      final chipRight = chipLeft + chipWidth;
 
       final currentScroll = _filterScrollController.offset;
       final viewportWidth = _filterScrollController.position.viewportDimension;
 
-      // Calculate the left and right edges of the active filter chip
-      final chipLeft = (filterIndex * chipWidth);
-      final chipRight = chipLeft + chipWidth;
-
       // Calculate what's currently visible in the viewport
       final visibleLeft = currentScroll;
-      final visibleRight = currentScroll + viewportWidth - (horizontalPadding * 2);
+      final visibleRight = currentScroll + viewportWidth;
 
       // Only scroll if the chip is actually obscured
       double? targetOffset;
 
       if (chipRight > visibleRight) {
-        // Chip is cut off on the right - scroll right just enough to show it
-        targetOffset = chipRight - viewportWidth + (horizontalPadding * 2);
+        // Chip is cut off on the right - scroll right to show it with padding
+        targetOffset = chipRight - viewportWidth + 8;
       } else if (chipLeft < visibleLeft) {
-        // Chip is cut off on the left - scroll left just enough to show it
-        targetOffset = chipLeft;
+        // Chip is cut off on the left - scroll left to show it with padding
+        targetOffset = chipLeft - 8;
       }
 
       // Only animate if we need to scroll
@@ -934,7 +979,7 @@ class SearchScreenState extends State<SearchScreen> {
     return items;
   }
 
-  /// Build joined segmented filter selector (like library media type selector)
+  /// Build joined segmented filter selector with animated sliding highlight
   Widget _buildFilterSelector(ColorScheme colorScheme) {
     final filters = _getAvailableFilters();
     final l10n = S.of(context)!;
@@ -953,42 +998,93 @@ class SearchScreenState extends State<SearchScreen> {
       }
     }
 
-    // No ClipRRect here - parent container handles clipping with rounded corners
+    // Ensure GlobalKeys exist for all filters
+    for (final filter in filters) {
+      _filterKeys.putIfAbsent(filter, () => GlobalKey());
+    }
+
     // Wrap in ValueListenableBuilder for efficient rebuilds on filter change
     return ValueListenableBuilder<String>(
       valueListenable: _activeFilterNotifier,
       builder: (context, activeFilter, _) {
-        return Row(
-          mainAxisSize: MainAxisSize.min,
-          children: filters.map((filter) {
-            final isSelected = activeFilter == filter;
-            return Material(
-              // Use theme-aware colors for light/dark mode support
-              color: isSelected
-                  ? colorScheme.primaryContainer
-                  : colorScheme.surfaceVariant.withOpacity(0.6),
-              child: InkWell(
-                onTap: () {
-                  // Only update ValueNotifier - no setState needed
-                  _activeFilterNotifier.value = filter;
-                  _animateToFilter(filter);
-                },
-                child: Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
-                  child: Text(
-                    getLabel(filter),
-                    style: TextStyle(
-                      color: isSelected
-                          ? colorScheme.onPrimaryContainer
-                          : colorScheme.onSurfaceVariant.withOpacity(0.8),
-                      fontSize: 14,
-                      fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
+        // Measure positions after build
+        WidgetsBinding.instance.addPostFrameCallback((_) {
+          if (mounted) {
+            _measureFilterPositions();
+            // Update highlight on first build or when filters change
+            final position = _filterPositions[activeFilter];
+            final width = _filterWidths[activeFilter];
+            if (position != null && width != null &&
+                (_highlightLeft != position || _highlightWidth != width)) {
+              setState(() {
+                _highlightLeft = position;
+                _highlightWidth = width;
+              });
+            }
+          }
+        });
+
+        final selectedIndex = filters.indexOf(activeFilter);
+        final isFirstTab = selectedIndex == 0;
+        final isLastTab = selectedIndex == filters.length - 1;
+
+        return Container(
+          decoration: BoxDecoration(
+            color: colorScheme.surfaceContainerHighest.withOpacity(0.5),
+            borderRadius: BorderRadius.circular(10),
+          ),
+          child: IntrinsicHeight(
+            child: Stack(
+              children: [
+                // Animated sliding highlight
+                AnimatedPositioned(
+                  duration: const Duration(milliseconds: 300),
+                  curve: Curves.easeOutCubic,
+                  left: _highlightLeft + (isFirstTab ? 0 : 2),
+                  width: _highlightWidth - (isFirstTab ? 0 : 2) - (isLastTab ? 0 : 2),
+                  top: 0,
+                  bottom: 0,
+                  child: AnimatedContainer(
+                    duration: const Duration(milliseconds: 300),
+                    curve: Curves.easeOutCubic,
+                    decoration: BoxDecoration(
+                      color: colorScheme.primaryContainer,
+                      borderRadius: BorderRadius.circular(10),
                     ),
                   ),
                 ),
-              ),
-            );
-          }).toList(),
+                // Filter buttons row (transparent, on top of highlight)
+                Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: filters.map((filter) {
+                    final isSelected = activeFilter == filter;
+                    return GestureDetector(
+                      key: _filterKeys[filter],
+                      onTap: () {
+                        _activeFilterNotifier.value = filter;
+                        _animateToFilter(filter);
+                      },
+                      behavior: HitTestBehavior.opaque,
+                      child: Container(
+                        alignment: Alignment.center,
+                        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
+                        child: Text(
+                          getLabel(filter),
+                          style: TextStyle(
+                            color: isSelected
+                                ? colorScheme.onPrimaryContainer
+                                : colorScheme.onSurfaceVariant.withOpacity(0.8),
+                            fontSize: 14,
+                            fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
+                          ),
+                        ),
+                      ),
+                    );
+                  }).toList(),
+                ),
+              ],
+            ),
+          ),
         );
       },
     );
@@ -1566,37 +1662,58 @@ class SearchScreenState extends State<SearchScreen> {
     final isExpanded = _expandedPlaylistId == playlistId;
     final isInLib = _isInLibrary(playlist);
 
+    // Unique suffix for search context
+    const heroSuffix = '_search';
+
     return RepaintBoundary(
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: [
           ListTile(
             key: ValueKey(playlistId),
-            leading: Container(
-              width: 48,
-              height: 48,
-              decoration: BoxDecoration(
-                color: colorScheme.surfaceVariant,
+            leading: Hero(
+              tag: HeroTags.playlistCover + playlistId + heroSuffix,
+              child: ClipRRect(
                 borderRadius: BorderRadius.circular(8),
-                image: imageUrl != null
-                    ? DecorationImage(
-                        image: CachedNetworkImageProvider(imageUrl),
-                        fit: BoxFit.cover,
-                      )
-                    : null,
+                child: Container(
+                  width: 48,
+                  height: 48,
+                  color: colorScheme.surfaceContainerHighest,
+                  child: imageUrl != null
+                      ? CachedNetworkImage(
+                          imageUrl: imageUrl,
+                          fit: BoxFit.cover,
+                          memCacheWidth: 96,
+                          memCacheHeight: 96,
+                          fadeInDuration: Duration.zero,
+                          fadeOutDuration: Duration.zero,
+                          placeholder: (_, __) => const SizedBox(),
+                          errorWidget: (_, __, ___) => Icon(
+                            Icons.queue_music_rounded,
+                            color: colorScheme.onSurfaceVariant,
+                          ),
+                        )
+                      : Icon(
+                          Icons.queue_music_rounded,
+                          color: colorScheme.onSurfaceVariant,
+                        ),
+                ),
               ),
-              child: imageUrl == null
-                  ? Icon(Icons.queue_music_rounded, color: colorScheme.onSurfaceVariant)
-                  : null,
             ),
-            title: Text(
-              playlist.name,
-              style: TextStyle(
-                color: colorScheme.onSurface,
-                fontWeight: FontWeight.w500,
+            title: Hero(
+              tag: HeroTags.playlistTitle + playlistId + heroSuffix,
+              child: Material(
+                color: Colors.transparent,
+                child: Text(
+                  playlist.name,
+                  style: TextStyle(
+                    color: colorScheme.onSurface,
+                    fontWeight: FontWeight.w500,
+                  ),
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                ),
               ),
-              maxLines: 1,
-              overflow: TextOverflow.ellipsis,
             ),
             subtitle: showType
                 ? Row(
@@ -1631,13 +1748,14 @@ class SearchScreenState extends State<SearchScreen> {
               if (isExpanded) {
                 setState(() => _expandedPlaylistId = null);
               } else {
+                updateAdaptiveColorsFromImage(context, imageUrl);
                 Navigator.push(
                   context,
-                  MaterialPageRoute(
-                    builder: (context) => PlaylistDetailsScreen(
+                  FadeSlidePageRoute(
+                    child: PlaylistDetailsScreen(
                       playlist: playlist,
-                      provider: playlist.provider,
-                      itemId: playlist.itemId,
+                      heroTagSuffix: 'search',
+                      initialImageUrl: imageUrl,
                     ),
                   ),
                 );

lib/screens/settings_screen.dart

@@ -29,6 +29,9 @@ class _SettingsScreenState extends State<SettingsScreen> {
   bool _showFavoriteAlbums = false;
   bool _showFavoriteArtists = false;
   bool _showFavoriteTracks = false;
+  bool _showFavoritePlaylists = false;
+  bool _showFavoriteRadioStations = false;
+  bool _showFavoritePodcasts = false;
   // Audiobook home rows (default off)
   bool _showContinueListeningAudiobooks = false;
   bool _showDiscoverAudiobooks = false;
@@ -41,6 +44,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
   // Player settings
   bool _preferLocalPlayer = false;
   bool _smartSortPlayers = false;
+  bool _volumePrecisionMode = true;
   // Hint settings
   bool _showHints = true;
   // Library settings
@@ -70,6 +74,9 @@ class _SettingsScreenState extends State<SettingsScreen> {
     final showFavAlbums = await SettingsService.getShowFavoriteAlbums();
     final showFavArtists = await SettingsService.getShowFavoriteArtists();
     final showFavTracks = await SettingsService.getShowFavoriteTracks();
+    final showFavPlaylists = await SettingsService.getShowFavoritePlaylists();
+    final showFavRadio = await SettingsService.getShowFavoriteRadioStations();
+    final showFavPodcasts = await SettingsService.getShowFavoritePodcasts();
 
     // Load audiobook home row settings
     final showContinueAudiobooks = await SettingsService.getShowContinueListeningAudiobooks();
@@ -92,6 +99,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
     // Load player settings
     final preferLocal = await SettingsService.getPreferLocalPlayer();
     final smartSort = await SettingsService.getSmartSortPlayers();
+    final volumePrecision = await SettingsService.getVolumePrecisionMode();
 
     // Load hint settings
     final showHints = await SettingsService.getShowHints();
@@ -107,6 +115,9 @@ class _SettingsScreenState extends State<SettingsScreen> {
         _showFavoriteAlbums = showFavAlbums;
         _showFavoriteArtists = showFavArtists;
         _showFavoriteTracks = showFavTracks;
+        _showFavoritePlaylists = showFavPlaylists;
+        _showFavoriteRadioStations = showFavRadio;
+        _showFavoritePodcasts = showFavPodcasts;
         _showContinueListeningAudiobooks = showContinueAudiobooks;
         _showDiscoverAudiobooks = showDiscAudiobooks;
         _showDiscoverSeries = showDiscSeries;
@@ -115,6 +126,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
         _libraryEnabled = libraryEnabled;
         _preferLocalPlayer = preferLocal;
         _smartSortPlayers = smartSort;
+        _volumePrecisionMode = volumePrecision;
         _showHints = showHints;
         _showOnlyArtistsWithAlbums = showOnlyArtistsWithAlbums;
       });
@@ -150,6 +162,12 @@ class _SettingsScreenState extends State<SettingsScreen> {
         return {'title': s.favoriteArtists, 'subtitle': s.showFavoriteArtists};
       case 'favorite-tracks':
         return {'title': s.favoriteTracks, 'subtitle': s.showFavoriteTracks};
+      case 'favorite-playlists':
+        return {'title': s.favoritePlaylists, 'subtitle': s.showFavoritePlaylists};
+      case 'favorite-radio-stations':
+        return {'title': s.favoriteRadioStations, 'subtitle': s.showFavoriteRadioStations};
+      case 'favorite-podcasts':
+        return {'title': s.favoritePodcasts, 'subtitle': s.showFavoritePodcasts};
       default:
         return {'title': rowId, 'subtitle': ''};
     }
@@ -176,6 +194,12 @@ class _SettingsScreenState extends State<SettingsScreen> {
         return _showFavoriteArtists;
       case 'favorite-tracks':
         return _showFavoriteTracks;
+      case 'favorite-playlists':
+        return _showFavoritePlaylists;
+      case 'favorite-radio-stations':
+        return _showFavoriteRadioStations;
+      case 'favorite-podcasts':
+        return _showFavoritePodcasts;
       default:
         return false;
     }
@@ -221,6 +245,18 @@ class _SettingsScreenState extends State<SettingsScreen> {
           _showFavoriteTracks = value;
           SettingsService.setShowFavoriteTracks(value);
           break;
+        case 'favorite-playlists':
+          _showFavoritePlaylists = value;
+          SettingsService.setShowFavoritePlaylists(value);
+          break;
+        case 'favorite-radio-stations':
+          _showFavoriteRadioStations = value;
+          SettingsService.setShowFavoriteRadioStations(value);
+          break;
+        case 'favorite-podcasts':
+          _showFavoritePodcasts = value;
+          SettingsService.setShowFavoritePodcasts(value);
+          break;
       }
     });
   }
@@ -287,13 +323,26 @@ class _SettingsScreenState extends State<SettingsScreen> {
           crossAxisAlignment: CrossAxisAlignment.center,
           children: [
             // Logo - same size as login screen (50% of screen width)
+            // Use color filter to make logo dark in light theme
             Padding(
               padding: const EdgeInsets.only(top: 8.0, bottom: 48.0),
-              child: Image.asset(
-                'assets/images/ensemble_icon_transparent.png',
-                width: MediaQuery.of(context).size.width * 0.5,
-                fit: BoxFit.contain,
-              ),
+              child: Theme.of(context).brightness == Brightness.light
+                  ? ColorFiltered(
+                      colorFilter: const ColorFilter.mode(
+                        Color(0xFF1a1a1a), // Dark color for light theme
+                        BlendMode.srcIn,
+                      ),
+                      child: Image.asset(
+                        'assets/images/ensemble_icon_transparent.png',
+                        width: MediaQuery.of(context).size.width * 0.5,
+                        fit: BoxFit.contain,
+                      ),
+                    )
+                  : Image.asset(
+                      'assets/images/ensemble_icon_transparent.png',
+                      width: MediaQuery.of(context).size.width * 0.5,
+                      fit: BoxFit.contain,
+                    ),
             ),
 
             // Connection status box - centered with border radius like theme boxes
@@ -635,6 +684,15 @@ class _SettingsScreenState extends State<SettingsScreen> {
                                   Navigator.pop(dialogContext);
                                 },
                               ),
+                              RadioListTile<String?>(
+                                title: const Text('Français'),
+                                value: 'fr',
+                                groupValue: localeProvider.locale?.languageCode,
+                                onChanged: (value) {
+                                  localeProvider.setLocale(const Locale('fr'));
+                                  Navigator.pop(dialogContext);
+                                },
+                              ),
                             ],
                           ),
                         );
@@ -708,6 +766,31 @@ class _SettingsScreenState extends State<SettingsScreen> {
                 contentPadding: EdgeInsets.zero,
               ),
             ),
+            const SizedBox(height: 8),
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+              decoration: BoxDecoration(
+                color: colorScheme.surfaceVariant.withOpacity(0.3),
+                borderRadius: BorderRadius.circular(12),
+              ),
+              child: SwitchListTile(
+                title: Text(
+                  'Volume precision mode',
+                  style: TextStyle(color: colorScheme.onSurface),
+                ),
+                subtitle: Text(
+                  'Hold still while adjusting volume for fine control',
+                  style: TextStyle(color: colorScheme.onSurface.withOpacity(0.6), fontSize: 12),
+                ),
+                value: _volumePrecisionMode,
+                onChanged: (value) {
+                  setState(() => _volumePrecisionMode = value);
+                  SettingsService.setVolumePrecisionMode(value);
+                },
+                activeColor: colorScheme.primary,
+                contentPadding: EdgeInsets.zero,
+              ),
+            ),
 
             const SizedBox(height: 32),
 

lib/services/cache_service.dart

@@ -20,9 +20,15 @@ class CacheService {
   List<Album>? _cachedRecentAlbums;
   List<Artist>? _cachedDiscoverArtists;
   List<Album>? _cachedDiscoverAlbums;
+  List<Audiobook>? _cachedInProgressAudiobooks;
+  List<Audiobook>? _cachedDiscoverAudiobooks;
+  List<AudiobookSeries>? _cachedDiscoverSeries;
   DateTime? _recentAlbumsLastFetched;
   DateTime? _discoverArtistsLastFetched;
   DateTime? _discoverAlbumsLastFetched;
+  DateTime? _inProgressAudiobooksLastFetched;
+  DateTime? _discoverAudiobooksLastFetched;
+  DateTime? _discoverSeriesLastFetched;
 
   // Detail screen caching
   final Map<String, List<Track>> _albumTracksCache = {};
@@ -112,11 +118,82 @@ class CacheService {
     _persistHomeRowToDatabase('discover_albums', albums.map((a) => a.toJson()).toList());
   }
 
+  /// Check if in-progress audiobooks cache is valid
+  bool isInProgressAudiobooksCacheValid({bool forceRefresh = false}) {
+    if (forceRefresh) return false;
+    final now = DateTime.now();
+    return _cachedInProgressAudiobooks != null &&
+        _inProgressAudiobooksLastFetched != null &&
+        now.difference(_inProgressAudiobooksLastFetched!) < Timings.homeRowCacheDuration;
+  }
+
+  /// Get cached in-progress audiobooks
+  List<Audiobook>? getCachedInProgressAudiobooks() => _cachedInProgressAudiobooks;
+
+  /// Set cached in-progress audiobooks
+  void setCachedInProgressAudiobooks(List<Audiobook> audiobooks) {
+    _cachedInProgressAudiobooks = audiobooks;
+    _inProgressAudiobooksLastFetched = DateTime.now();
+    _logger.log('✅ Cached ${audiobooks.length} in-progress audiobooks');
+  }
+
+  /// Check if discover audiobooks cache is valid
+  bool isDiscoverAudiobooksCacheValid({bool forceRefresh = false}) {
+    if (forceRefresh) return false;
+    final now = DateTime.now();
+    return _cachedDiscoverAudiobooks != null &&
+        _discoverAudiobooksLastFetched != null &&
+        now.difference(_discoverAudiobooksLastFetched!) < Timings.homeRowCacheDuration;
+  }
+
+  /// Get cached discover audiobooks
+  List<Audiobook>? getCachedDiscoverAudiobooks() => _cachedDiscoverAudiobooks;
+
+  /// Set cached discover audiobooks
+  void setCachedDiscoverAudiobooks(List<Audiobook> audiobooks) {
+    _cachedDiscoverAudiobooks = audiobooks;
+    _discoverAudiobooksLastFetched = DateTime.now();
+    _logger.log('✅ Cached ${audiobooks.length} discover audiobooks');
+  }
+
+  /// Check if discover series cache is valid
+  bool isDiscoverSeriesCacheValid({bool forceRefresh = false}) {
+    if (forceRefresh) return false;
+    final now = DateTime.now();
+    return _cachedDiscoverSeries != null &&
+        _discoverSeriesLastFetched != null &&
+        now.difference(_discoverSeriesLastFetched!) < Timings.homeRowCacheDuration;
+  }
+
+  /// Get cached discover series
+  List<AudiobookSeries>? getCachedDiscoverSeries() => _cachedDiscoverSeries;
+
+  /// Set cached discover series
+  void setCachedDiscoverSeries(List<AudiobookSeries> series) {
+    _cachedDiscoverSeries = series;
+    _discoverSeriesLastFetched = DateTime.now();
+    _logger.log('✅ Cached ${series.length} discover series');
+  }
+
+  /// Invalidate audiobook caches
+  void invalidateAudiobookCaches() {
+    _cachedInProgressAudiobooks = null;
+    _inProgressAudiobooksLastFetched = null;
+    _cachedDiscoverAudiobooks = null;
+    _discoverAudiobooksLastFetched = null;
+    _cachedDiscoverSeries = null;
+    _discoverSeriesLastFetched = null;
+    _logger.log('🗑️ Audiobook caches invalidated');
+  }
+
   /// Invalidate home screen cache (call on pull-to-refresh)
   void invalidateHomeCache() {
     _recentAlbumsLastFetched = null;
     _discoverArtistsLastFetched = null;
     _discoverAlbumsLastFetched = null;
+    _inProgressAudiobooksLastFetched = null;
+    _discoverAudiobooksLastFetched = null;
+    _discoverSeriesLastFetched = null;
     _logger.log('🗑️ Home screen cache invalidated');
   }
 

lib/services/music_assistant_api.dart

@@ -2453,6 +2453,71 @@ class MusicAssistantAPI {
     }
   }
 
+  /// Delete an item from the queue
+  Future<void> queueCommandDeleteItem(String queueId, String itemId) async {
+    try {
+      await _sendCommand(
+        'player_queues/delete_item',
+        args: {
+          'queue_id': queueId,
+          'item_id_or_index': itemId,
+        },
+      );
+    } catch (e) {
+      _logger.log('Error deleting queue item: $e');
+      rethrow;
+    }
+  }
+
+  /// Move an item in the queue by a relative position shift
+  /// pos_shift > 0: move down, pos_shift < 0: move up, pos_shift = 0: move to next
+  Future<void> queueCommandMoveItem(String queueId, String itemId, int posShift) async {
+    try {
+      await _sendCommand(
+        'player_queues/move_item',
+        args: {
+          'queue_id': queueId,
+          'queue_item_id': itemId,
+          'pos_shift': posShift,
+        },
+      );
+    } catch (e) {
+      _logger.log('Error moving queue item: $e');
+      rethrow;
+    }
+  }
+
+  /// Play a specific item in the queue by its queue_item_id
+  Future<void> queueCommandPlayIndex(String queueId, String queueItemId) async {
+    try {
+      await _sendCommand(
+        'player_queues/play_index',
+        args: {
+          'queue_id': queueId,
+          'index': queueItemId,
+        },
+      );
+    } catch (e) {
+      _logger.log('Error playing queue item: $e');
+      rethrow;
+    }
+  }
+
+  /// Clear all items from the queue
+  Future<void> queueCommandClear(String queueId) async {
+    try {
+      await _sendCommand(
+        'player_queues/clear',
+        args: {
+          'queue_id': queueId,
+        },
+      );
+    } catch (e) {
+      _logger.log('Error clearing queue: $e');
+      rethrow;
+    }
+  }
+
   // ============================================================================
   // BUILT-IN PLAYER MANAGEMENT
   // ============================================================================
@@ -2496,6 +2561,23 @@ class MusicAssistantAPI {
     return _eventStreams['media_item_deleted']!.stream;
   }
 
+  /// Stream of queue_updated events (for queue metadata changes)
+  Stream<Map<String, dynamic>> get queueUpdatedEvents {
+    if (!_eventStreams.containsKey('queue_updated')) {
+      _eventStreams['queue_updated'] = StreamController<Map<String, dynamic>>.broadcast();
+    }
+    return _eventStreams['queue_updated']!.stream;
+  }
+
+  /// Stream of queue_items_updated events (for queue item add/remove/reorder)
+  /// This is critical for keeping queue UI in sync, especially in radio mode
+  Stream<Map<String, dynamic>> get queueItemsUpdatedEvents {
+    if (!_eventStreams.containsKey('queue_items_updated')) {
+      _eventStreams['queue_items_updated'] = StreamController<Map<String, dynamic>>.broadcast();
+    }
+    return _eventStreams['queue_items_updated']!.stream;
+  }
+
   /// Register this device as a player with retry logic
   /// CRITICAL: This creates a player config in MA's settings.json
   /// The server expects: player_id and player_name

lib/services/settings_service.dart

@@ -35,6 +35,9 @@ class SettingsService {
   static const String _keyShowFavoriteAlbums = 'show_favorite_albums';
   static const String _keyShowFavoriteArtists = 'show_favorite_artists';
   static const String _keyShowFavoriteTracks = 'show_favorite_tracks';
+  static const String _keyShowFavoritePlaylists = 'show_favorite_playlists';
+  static const String _keyShowFavoriteRadioStations = 'show_favorite_radio_stations';
+  static const String _keyShowFavoritePodcasts = 'show_favorite_podcasts';
   static const String _keyShowOnlyArtistsWithAlbums = 'show_only_artists_with_albums'; // Library artists filter
   static const String _keyHomeRowOrder = 'home_row_order'; // JSON list of row IDs
 
@@ -49,6 +52,9 @@ class SettingsService {
     'favorite-albums',
     'favorite-artists',
     'favorite-tracks',
+    'favorite-playlists',
+    'favorite-radio-stations',
+    'favorite-podcasts',
   ];
 
   // View Mode Settings
@@ -84,6 +90,9 @@ class SettingsService {
   static const String _keyHasUsedPlayerReveal = 'has_used_player_reveal'; // Track if user has pulled to reveal players
   static const String _keyHasCompletedOnboarding = 'has_completed_onboarding'; // Track if user has seen welcome screen
 
+  // Volume Precision Mode Settings
+  static const String _keyVolumePrecisionMode = 'volume_precision_mode'; // Enable hold-to-precision volume control
+
   // Podcast Cover Cache (iTunes URLs for high-res artwork)
   static const String _keyPodcastCoverCache = 'podcast_cover_cache';
 
@@ -490,6 +499,36 @@ class SettingsService {
     await prefs.setBool(_keyShowFavoriteTracks, show);
   }
 
+  static Future<bool> getShowFavoritePlaylists() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getBool(_keyShowFavoritePlaylists) ?? false;
+  }
+
+  static Future<void> setShowFavoritePlaylists(bool show) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_keyShowFavoritePlaylists, show);
+  }
+
+  static Future<bool> getShowFavoriteRadioStations() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getBool(_keyShowFavoriteRadioStations) ?? false;
+  }
+
+  static Future<void> setShowFavoriteRadioStations(bool show) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_keyShowFavoriteRadioStations, show);
+  }
+
+  static Future<bool> getShowFavoritePodcasts() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getBool(_keyShowFavoritePodcasts) ?? false;
+  }
+
+  static Future<void> setShowFavoritePodcasts(bool show) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_keyShowFavoritePodcasts, show);
+  }
+
   // Library Artists Filter - show only artists that have albums in library
   static Future<bool> getShowOnlyArtistsWithAlbums() async {
     final prefs = await SharedPreferences.getInstance();
@@ -508,7 +547,17 @@ class SettingsService {
     if (json != null) {
       try {
         final List<dynamic> decoded = jsonDecode(json);
-        return decoded.cast<String>();
+        final savedOrder = decoded.cast<String>();
+
+        // Add any new rows from defaultHomeRowOrder that aren't in saved order
+        // This ensures new row types appear for existing users
+        final missingRows = defaultHomeRowOrder
+            .where((row) => !savedOrder.contains(row))
+            .toList();
+        if (missingRows.isNotEmpty) {
+          return [...savedOrder, ...missingRows];
+        }
+        return savedOrder;
       } catch (_) {
         return List.from(defaultHomeRowOrder);
       }
@@ -824,6 +873,22 @@ class SettingsService {
     await prefs.setBool(_keyHasCompletedOnboarding, completed);
   }
 
+  // Volume Precision Mode Settings
+
+  /// Get whether volume precision mode is enabled (default: true)
+  /// When enabled, holding still while adjusting volume enters precision mode
+  /// for fine-grained control (10x more precise)
+  static Future<bool> getVolumePrecisionMode() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getBool(_keyVolumePrecisionMode) ?? true;
+  }
+
+  /// Set whether volume precision mode is enabled
+  static Future<void> setVolumePrecisionMode(bool enabled) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_keyVolumePrecisionMode, enabled);
+  }
+
   // Podcast Cover Cache (iTunes URLs for high-res artwork)
   // Stored as JSON: {"podcastId": "itunesUrl", ...}
 

lib/theme/theme_provider.dart

@@ -9,6 +9,7 @@ final _themeLogger = DebugLogger();
 
 /// Global function to update adaptive colors from an image URL
 /// This can be called from anywhere in the app (e.g., when tapping an album/artist)
+/// Sets isOnDetailScreen=true so nav bar will also use adaptive colors
 Future<void> updateAdaptiveColorsFromImage(BuildContext context, String? imageUrl) async {
   if (imageUrl == null || imageUrl.isEmpty) return;
 
@@ -16,7 +17,7 @@ Future<void> updateAdaptiveColorsFromImage(BuildContext context, String? imageUr
     final colorSchemes = await PaletteHelper.extractColorSchemes(CachedNetworkImageProvider(imageUrl));
     if (colorSchemes != null && context.mounted) {
       final themeProvider = context.read<ThemeProvider>();
-      themeProvider.updateAdaptiveColors(colorSchemes.$1, colorSchemes.$2);
+      themeProvider.updateAdaptiveColors(colorSchemes.$1, colorSchemes.$2, isFromDetailScreen: true);
     }
   } catch (e) {
     // Silently fail - colors will update when track plays
@@ -42,6 +43,10 @@ class ThemeProvider extends ChangeNotifier {
   ColorScheme? _adaptiveLightScheme;
   ColorScheme? _adaptiveDarkScheme;
 
+  // Track if we're on a detail screen (vs just player-extracted colors)
+  // When true, nav bar should use adaptive colors even when player is collapsed
+  bool _isOnDetailScreen = false;
+
   ThemeProvider() {
     _loadSettings();
   }
@@ -55,12 +60,14 @@ class ThemeProvider extends ChangeNotifier {
   AdaptiveColors? get adaptiveColors => _adaptiveColors;
   ColorScheme? get adaptiveLightScheme => _adaptiveLightScheme;
   ColorScheme? get adaptiveDarkScheme => _adaptiveDarkScheme;
+  bool get isOnDetailScreen => _isOnDetailScreen;
 
   /// Get the current adaptive primary color (for bottom nav highlight, etc.)
   Color get adaptivePrimaryColor => _adaptiveColors?.primary ?? _customColor;
 
   /// Get the current adaptive surface color (for bottom nav background, etc.)
   /// Returns a subtle tinted surface based on the adaptive colors
+  /// NOTE: Prefer getAdaptiveSurfaceColorFor() which respects light/dark mode
   Color? get adaptiveSurfaceColor {
     if (_adaptiveColors == null) return null;
     // Use the miniPlayer color but darkened for a subtle tinted background
@@ -68,6 +75,20 @@ class ThemeProvider extends ChangeNotifier {
     return hsl.withLightness((hsl.lightness * 0.4).clamp(0.08, 0.15)).toColor();
   }
 
+  /// Get adaptive surface color for the given brightness (light/dark mode aware)
+  /// Returns the same color as the expanded player background (scheme.surface)
+  Color? getAdaptiveSurfaceColorFor(Brightness brightness) {
+    // Pick scheme based on current mode
+    final scheme = brightness == Brightness.dark
+        ? _adaptiveDarkScheme
+        : _adaptiveLightScheme;
+
+    if (scheme == null) return null;
+
+    // Use surface - same as expanded player background (line 1234 in expandable_player.dart)
+    return scheme.surface;
+  }
+
   Future<void> _loadSettings() async {
     final themeModeString = await SettingsService.getThemeMode();
     _themeMode = _parseThemeMode(themeModeString);
@@ -147,10 +168,18 @@ class ThemeProvider extends ChangeNotifier {
   }
 
   /// Update adaptive colors from album art
-  void updateAdaptiveColors(ColorScheme? lightScheme, ColorScheme? darkScheme) {
+  /// [isFromDetailScreen] - if true, this is from navigating to a detail screen
+  /// and the nav bar should use adaptive colors even when player is collapsed
+  void updateAdaptiveColors(ColorScheme? lightScheme, ColorScheme? darkScheme, {bool isFromDetailScreen = false}) {
     _adaptiveLightScheme = lightScheme;
     _adaptiveDarkScheme = darkScheme;
 
+    // Only set detail screen flag if explicitly from a detail screen navigation
+    // Player-extracted colors should NOT set this flag
+    if (isFromDetailScreen) {
+      _isOnDetailScreen = true;
+    }
+
     // Extract AdaptiveColors from the schemes
     if (darkScheme != null) {
       _adaptiveColors = AdaptiveColors(
@@ -166,11 +195,12 @@ class ThemeProvider extends ChangeNotifier {
     notifyListeners();
   }
 
-  /// Clear adaptive colors (when no track is playing)
+  /// Clear adaptive colors (when navigating back from detail screen or no track playing)
   void clearAdaptiveColors() {
     _adaptiveColors = null;
     _adaptiveLightScheme = null;
     _adaptiveDarkScheme = null;
+    _isOnDetailScreen = false;
     notifyListeners();
   }
 }

lib/widgets/album_row.dart

@@ -38,6 +38,12 @@ class _AlbumRowState extends State<AlbumRow> with AutomaticKeepAliveClientMixin
   @override
   void initState() {
     super.initState();
+    // Get cached data synchronously BEFORE first build (no spinner flash)
+    final cached = widget.getCachedAlbums?.call();
+    if (cached != null && cached.isNotEmpty) {
+      _albums = cached;
+      _isLoading = false;
+    }
     _loadAlbums();
   }
 
@@ -45,18 +51,7 @@ class _AlbumRowState extends State<AlbumRow> with AutomaticKeepAliveClientMixin
     if (_hasLoaded) return;
     _hasLoaded = true;
 
-    // 1. Try to get cached data synchronously for instant display
-    final cachedAlbums = widget.getCachedAlbums?.call();
-    if (cachedAlbums != null && cachedAlbums.isNotEmpty) {
-      if (mounted) {
-        setState(() {
-          _albums = cachedAlbums;
-          _isLoading = false;
-        });
-      }
-    }
-
-    // 2. Load fresh data (always update - fresh data may have images that cached data lacks)
+    // Load fresh data (always update - fresh data may have images that cached data lacks)
     try {
       final freshAlbums = await widget.loadAlbums();
       if (mounted && freshAlbums.isNotEmpty) {

lib/widgets/artist_row.dart

@@ -38,6 +38,12 @@ class _ArtistRowState extends State<ArtistRow> with AutomaticKeepAliveClientMixi
   @override
   void initState() {
     super.initState();
+    // Get cached data synchronously BEFORE first build (no spinner flash)
+    final cached = widget.getCachedArtists?.call();
+    if (cached != null && cached.isNotEmpty) {
+      _artists = cached;
+      _isLoading = false;
+    }
     _loadArtists();
   }
 
@@ -45,18 +51,7 @@ class _ArtistRowState extends State<ArtistRow> with AutomaticKeepAliveClientMixi
     if (_hasLoaded) return;
     _hasLoaded = true;
 
-    // 1. Try to get cached data synchronously for instant display
-    final cachedArtists = widget.getCachedArtists?.call();
-    if (cachedArtists != null && cachedArtists.isNotEmpty) {
-      if (mounted) {
-        setState(() {
-          _artists = cachedArtists;
-          _isLoading = false;
-        });
-      }
-    }
-
-    // 2. Load fresh data (always update - fresh data may have images that cached data lacks)
+    // Load fresh data (always update - fresh data may have images that cached data lacks)
     try {
       final freshArtists = await widget.loadArtists();
       if (mounted && freshArtists.isNotEmpty) {

lib/widgets/audiobook_row.dart

@@ -14,6 +14,8 @@ class AudiobookRow extends StatefulWidget {
   final Future<List<Audiobook>> Function() loadAudiobooks;
   final String? heroTagSuffix;
   final double? rowHeight;
+  /// Optional: synchronous getter for cached data (for instant display)
+  final List<Audiobook>? Function()? getCachedAudiobooks;
 
   const AudiobookRow({
     super.key,
@@ -21,6 +23,7 @@ class AudiobookRow extends StatefulWidget {
     required this.loadAudiobooks,
     this.heroTagSuffix,
     this.rowHeight,
+    this.getCachedAudiobooks,
   });
 
   @override
@@ -28,8 +31,8 @@ class AudiobookRow extends StatefulWidget {
 }
 
 class _AudiobookRowState extends State<AudiobookRow> with AutomaticKeepAliveClientMixin {
-  late Future<List<Audiobook>> _audiobooksFuture;
-  List<Audiobook>? _cachedAudiobooks;
+  List<Audiobook> _audiobooks = [];
+  bool _isLoading = true;
   bool _hasLoaded = false;
   bool _hasPrecachedAudiobooks = false;
 
@@ -39,18 +42,36 @@ class _AudiobookRowState extends State<AudiobookRow> with AutomaticKeepAliveClie
   @override
   void initState() {
     super.initState();
-    _loadAudiobooksOnce();
+    // Get cached data synchronously BEFORE first build (no spinner flash)
+    final cached = widget.getCachedAudiobooks?.call();
+    if (cached != null && cached.isNotEmpty) {
+      _audiobooks = cached;
+      _isLoading = false;
+    }
+    _loadAudiobooks();
   }
 
-  void _loadAudiobooksOnce() {
-    if (!_hasLoaded) {
-      _audiobooksFuture = widget.loadAudiobooks().then((audiobooks) {
-        _cachedAudiobooks = audiobooks;
-        // Pre-cache images for smooth Hero animations
-        _precacheAudiobookImages(audiobooks);
-        return audiobooks;
-      });
-      _hasLoaded = true;
+  Future<void> _loadAudiobooks() async {
+    if (_hasLoaded) return;
+    _hasLoaded = true;
+
+    // Load fresh data (always update - fresh data may have updated progress)
+    try {
+      final freshAudiobooks = await widget.loadAudiobooks();
+      if (mounted && freshAudiobooks.isNotEmpty) {
+        setState(() {
+          _audiobooks = freshAudiobooks;
+          _isLoading = false;
+        });
+        // Pre-cache images for smooth hero animations
+        _precacheAudiobookImages(freshAudiobooks);
+      }
+    } catch (e) {
+      // Silent failure - keep showing cached data
+    }
+
+    if (mounted && _isLoading) {
+      setState(() => _isLoading = false);
     }
   }
 
@@ -80,10 +101,57 @@ class _AudiobookRowState extends State<AudiobookRow> with AutomaticKeepAliveClie
 
   static final _logger = DebugLogger();
 
+  Widget _buildContent(double contentHeight, ColorScheme colorScheme, MusicAssistantProvider maProvider) {
+    // Only show loading if we have no data at all
+    if (_audiobooks.isEmpty && _isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    if (_audiobooks.isEmpty) {
+      return Center(
+        child: Text(
+          'No audiobooks found',
+          style: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
+        ),
+      );
+    }
+
+    const textAreaHeight = 44.0;
+    final artworkSize = contentHeight - textAreaHeight;
+    final cardWidth = artworkSize;
+    final itemExtent = cardWidth + 12;
+
+    return ScrollConfiguration(
+      behavior: const _StretchScrollBehavior(),
+      child: ListView.builder(
+        scrollDirection: Axis.horizontal,
+        padding: const EdgeInsets.symmetric(horizontal: 12.0),
+        itemCount: _audiobooks.length,
+        itemExtent: itemExtent,
+        cacheExtent: 500,
+        addAutomaticKeepAlives: false,
+        addRepaintBoundaries: false,
+        itemBuilder: (context, index) {
+          final audiobook = _audiobooks[index];
+          return Container(
+            key: ValueKey(audiobook.uri ?? audiobook.itemId),
+            width: cardWidth,
+            margin: const EdgeInsets.symmetric(horizontal: 6.0),
+            child: _AudiobookCard(
+              audiobook: audiobook,
+              heroTagSuffix: widget.heroTagSuffix ?? 'home_${widget.title.replaceAll(' ', '_').toLowerCase()}',
+              maProvider: maProvider,
+            ),
+          );
+        },
+      ),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     _logger.startBuild('AudiobookRow:${widget.title}');
-    super.build(context);
+    super.build(context); // Required for AutomaticKeepAliveClientMixin
     final textTheme = Theme.of(context).textTheme;
     final colorScheme = Theme.of(context).colorScheme;
     final maProvider = context.read<MusicAssistantProvider>();
@@ -109,62 +177,7 @@ class _AudiobookRowState extends State<AudiobookRow> with AutomaticKeepAliveClie
               ),
             ),
             Expanded(
-              child: FutureBuilder<List<Audiobook>>(
-                future: _audiobooksFuture,
-                builder: (context, snapshot) {
-                  final audiobooks = snapshot.data ?? _cachedAudiobooks;
-
-                  if (audiobooks == null && snapshot.connectionState == ConnectionState.waiting) {
-                    return const Center(child: CircularProgressIndicator());
-                  }
-
-                  if (snapshot.hasError && audiobooks == null) {
-                    return Center(
-                      child: Text('Error: ${snapshot.error}'),
-                    );
-                  }
-
-                  if (audiobooks == null || audiobooks.isEmpty) {
-                    return Center(
-                      child: Text(
-                        'No audiobooks found',
-                        style: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
-                      ),
-                    );
-                  }
-
-                  const textAreaHeight = 44.0;
-                  final artworkSize = contentHeight - textAreaHeight;
-                  final cardWidth = artworkSize;
-                  final itemExtent = cardWidth + 12;
-
-                  return ScrollConfiguration(
-                    behavior: const _StretchScrollBehavior(),
-                    child: ListView.builder(
-                      scrollDirection: Axis.horizontal,
-                      padding: const EdgeInsets.symmetric(horizontal: 12.0),
-                      itemCount: audiobooks.length,
-                      itemExtent: itemExtent,
-                      cacheExtent: 500,
-                      addAutomaticKeepAlives: false,
-                      addRepaintBoundaries: false,
-                      itemBuilder: (context, index) {
-                        final audiobook = audiobooks[index];
-                        return Container(
-                          key: ValueKey(audiobook.uri ?? audiobook.itemId),
-                          width: cardWidth,
-                          margin: const EdgeInsets.symmetric(horizontal: 6.0),
-                          child: _AudiobookCard(
-                            audiobook: audiobook,
-                            heroTagSuffix: widget.heroTagSuffix ?? 'home_${widget.title.replaceAll(' ', '_').toLowerCase()}',
-                            maProvider: maProvider,
-                          ),
-                        );
-                      },
-                    ),
-                  );
-                },
-              ),
+              child: _buildContent(contentHeight, colorScheme, maProvider),
             ),
           ],
         ),

lib/widgets/global_player_overlay.dart

@@ -8,6 +8,7 @@ import '../providers/music_assistant_provider.dart';
 import '../providers/navigation_provider.dart';
 import '../services/settings_service.dart';
 import '../theme/theme_provider.dart';
+
 import 'expandable_player.dart';
 import 'player/mini_player_content.dart' show MiniPlayerLayout;
 import 'player/player_reveal_overlay.dart';
@@ -67,13 +68,14 @@ class BottomSpacing {
   static double get withMiniPlayer => navBarHeight + miniPlayerHeight + 22.0;
 }
 
-/// ValueNotifier for player expansion progress (0.0 to 1.0) and background color
+/// ValueNotifier for player expansion progress (0.0 to 1.0) and colors
 class PlayerExpansionState {
   final double progress;
   final Color? backgroundColor;
-  PlayerExpansionState(this.progress, this.backgroundColor);
+  final Color? primaryColor;
+  PlayerExpansionState(this.progress, this.backgroundColor, this.primaryColor);
 }
-final playerExpansionNotifier = ValueNotifier<PlayerExpansionState>(PlayerExpansionState(0.0, null));
+final playerExpansionNotifier = ValueNotifier<PlayerExpansionState>(PlayerExpansionState(0.0, null, null));
 
 /// Wrapper widget that provides a global player overlay above all navigation.
 ///
@@ -99,6 +101,21 @@ class GlobalPlayerOverlay extends StatefulWidget {
   static bool get isPlayerExpanded =>
       globalPlayerKey.currentState?.isExpanded ?? false;
 
+  /// Check if the queue panel is currently open (animation value > 0.5)
+  static bool get isQueuePanelOpen =>
+      globalPlayerKey.currentState?.isQueuePanelOpen ?? false;
+
+  /// Check if the queue panel is intended to be open (target state)
+  /// Use this for back gesture handling to avoid timing issues during animations
+  static bool get isQueuePanelTargetOpen =>
+      globalPlayerKey.currentState?.isQueuePanelTargetOpen ?? false;
+
+  /// Close the queue panel if open
+  /// [withHaptic]: Set to false for Android back gesture (system provides haptic)
+  static void closeQueuePanel({bool withHaptic = true}) {
+    globalPlayerKey.currentState?.closeQueuePanel(withHaptic: withHaptic);
+  }
+
   /// Get the current expansion progress (0.0 to 1.0)
   static double get expansionProgress =>
       globalPlayerKey.currentState?.expansionProgress ?? 0.0;
@@ -473,74 +490,44 @@ class _GlobalPlayerOverlayState extends State<GlobalPlayerOverlay>
               builder: (context, _) {
                 return Consumer<ThemeProvider>(
                 builder: (context, themeProvider, _) {
-                  // Use adaptive primary color for bottom nav when adaptive theme is enabled
-                  final sourceColor = themeProvider.adaptiveTheme
-                      ? themeProvider.adaptivePrimaryColor
-                      : colorScheme.primary;
-
-                  // Use cached color computation to avoid expensive HSL operations during scroll
                   final isDark = Theme.of(context).brightness == Brightness.dark;
-                  final navSelectedColor = _cachedNavColor.getAdjustedColor(sourceColor, isDark);
-
-                  // Base background: use adaptive surface color if available, otherwise default surface
-                  final baseBgColor = (themeProvider.adaptiveTheme && themeProvider.adaptiveSurfaceColor != null)
-                      ? themeProvider.adaptiveSurfaceColor!
-                      : colorScheme.surface;
 
                   return ValueListenableBuilder<PlayerExpansionState>(
                     valueListenable: playerExpansionNotifier,
-                    // Pass BottomNavigationBar as child to avoid rebuilding it every frame
-                    child: BottomNavigationBar(
-                      currentIndex: navigationProvider.selectedIndex,
-                      onTap: (index) {
-                        if (GlobalPlayerOverlay.isPlayerExpanded) {
-                          GlobalPlayerOverlay.collapsePlayer();
-                        }
-                        navigationProvider.navigatorKey.currentState?.popUntil((route) => route.isFirst);
-                        if (index == 3) {
-                          GlobalPlayerOverlay.hidePlayer();
-                        } else if (navigationProvider.selectedIndex == 3) {
-                          GlobalPlayerOverlay.showPlayer();
-                        }
-                        navigationProvider.setSelectedIndex(index);
-                      },
-                      backgroundColor: Colors.transparent,
-                      selectedItemColor: navSelectedColor,
-                      unselectedItemColor: colorScheme.onSurface.withOpacity(0.54),
-                      elevation: 0,
-                      type: BottomNavigationBarType.fixed,
-                      selectedFontSize: 12,
-                      unselectedFontSize: 12,
-                      items: [
-                        BottomNavigationBarItem(
-                          icon: const Icon(Icons.home_outlined),
-                          activeIcon: const Icon(Icons.home_rounded),
-                          label: S.of(context)!.home,
-                        ),
-                        BottomNavigationBarItem(
-                          icon: const Icon(Icons.library_music_outlined),
-                          activeIcon: const Icon(Icons.library_music_rounded),
-                          label: S.of(context)!.library,
-                        ),
-                        BottomNavigationBarItem(
-                          icon: const Icon(Icons.search_rounded),
-                          activeIcon: const Icon(Icons.search_rounded),
-                          label: S.of(context)!.search,
-                        ),
-                        BottomNavigationBarItem(
-                          icon: const Icon(Icons.settings_outlined),
-                          activeIcon: const Icon(Icons.settings_rounded),
-                          label: S.of(context)!.settings,
-                        ),
-                      ],
-                    ),
-                    builder: (context, expansionState, navBar) {
-                      // Only compute colors during animation - this is the hot path
-                      final navBgColor = expansionState.progress > 0 && expansionState.backgroundColor != null
-                          ? Color.lerp(baseBgColor, expansionState.backgroundColor, expansionState.progress)!
-                          : baseBgColor;
+                    builder: (context, expansionState, _) {
+                      // Nav bar color logic - only use adaptive colors when:
+                      // 1. Player is expanding/expanded, OR
+                      // 2. On a detail screen (isOnDetailScreen)
+                      // On home screen with collapsed player: always use default theme colors
+                      final bool useAdaptiveColors = themeProvider.adaptiveTheme &&
+                          (expansionState.progress > 0 || themeProvider.isOnDetailScreen);
+
+                      // Nav bar background color
+                      final Color navBgColor;
+                      if (expansionState.progress > 0 && expansionState.backgroundColor != null) {
+                        // Player is expanding - blend from surface to player's adaptive color
+                        navBgColor = Color.lerp(colorScheme.surface, expansionState.backgroundColor, expansionState.progress)!;
+                      } else if (useAdaptiveColors) {
+                        // On a detail screen - use adaptive surface color for nav bar
+                        final adaptiveBg = themeProvider.getAdaptiveSurfaceColorFor(Theme.of(context).brightness);
+                        navBgColor = adaptiveBg ?? colorScheme.surface;
+                      } else {
+                        // Home screen with collapsed player - use default surface color
+                        navBgColor = colorScheme.surface;
+                      }
+
+                      // Icon color - only use adaptive colors when appropriate
+                      final Color baseSourceColor = (useAdaptiveColors && themeProvider.adaptiveColors != null)
+                          ? themeProvider.adaptiveColors!.primary
+                          : colorScheme.primary;
+
+                      // Blend icon color with player's primary color during expansion
+                      Color sourceColor = baseSourceColor;
+                      if (themeProvider.adaptiveTheme && expansionState.progress > 0 && expansionState.primaryColor != null) {
+                        sourceColor = Color.lerp(baseSourceColor, expansionState.primaryColor!, expansionState.progress)!;
+                      }
+                      final navSelectedColor = _cachedNavColor.getAdjustedColor(sourceColor, isDark);
 
-                      // Use AnimatedContainer for smoother transitions instead of rebuilding
                       return Container(
                         decoration: BoxDecoration(
                           color: navBgColor,
@@ -554,7 +541,50 @@ class _GlobalPlayerOverlayState extends State<GlobalPlayerOverlay>
                                 ]
                               : null,
                         ),
-                        child: navBar, // Reuse pre-built navigation bar
+                        child: BottomNavigationBar(
+                          currentIndex: navigationProvider.selectedIndex,
+                          onTap: (index) {
+                            if (GlobalPlayerOverlay.isPlayerExpanded) {
+                              GlobalPlayerOverlay.collapsePlayer();
+                            }
+                            navigationProvider.navigatorKey.currentState?.popUntil((route) => route.isFirst);
+                            if (index == 3) {
+                              GlobalPlayerOverlay.hidePlayer();
+                            } else if (navigationProvider.selectedIndex == 3) {
+                              GlobalPlayerOverlay.showPlayer();
+                            }
+                            navigationProvider.setSelectedIndex(index);
+                          },
+                          backgroundColor: Colors.transparent,
+                          selectedItemColor: navSelectedColor,
+                          unselectedItemColor: colorScheme.onSurface.withOpacity(0.54),
+                          elevation: 0,
+                          type: BottomNavigationBarType.fixed,
+                          selectedFontSize: 12,
+                          unselectedFontSize: 12,
+                          items: [
+                            BottomNavigationBarItem(
+                              icon: const Icon(Icons.home_outlined),
+                              activeIcon: const Icon(Icons.home_rounded),
+                              label: S.of(context)!.home,
+                            ),
+                            BottomNavigationBarItem(
+                              icon: const Icon(Icons.library_music_outlined),
+                              activeIcon: const Icon(Icons.library_music_rounded),
+                              label: S.of(context)!.library,
+                            ),
+                            BottomNavigationBarItem(
+                              icon: const Icon(Icons.search_rounded),
+                              activeIcon: const Icon(Icons.search_rounded),
+                              label: S.of(context)!.search,
+                            ),
+                            BottomNavigationBarItem(
+                              icon: const Icon(Icons.settings_outlined),
+                              activeIcon: const Icon(Icons.settings_rounded),
+                              label: S.of(context)!.settings,
+                            ),
+                          ],
+                        ),
                       );
                     },
                   );

lib/widgets/player/mini_player_content.dart

@@ -8,8 +8,8 @@ class MiniPlayerLayout {
   static const double textLeftOffset = 10.0; // Gap between art and text
   static const double textLeft = artSize + textLeftOffset; // 82px
   // 3-line layout: track, artist, player
-  static const double primaryTop = 5.0; // raised slightly from 7
-  static const double secondaryTop = 26.0; // raised by 1
+  static const double primaryTop = 9.0;
+  static const double secondaryTop = 26.0;
   static const double tertiaryTop = 46.0;
   // 2-line layout (evenly spaced): player name, hint
   // Height 72 / 3 = 24px spacing. Line 1 center at 24, Line 2 center at 48

lib/widgets/player/player_card.dart

@@ -1,9 +1,14 @@
+import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import '../../providers/music_assistant_provider.dart';
 import '../../theme/design_tokens.dart';
 import '../../l10n/app_localizations.dart';
+import '../../services/debug_logger.dart';
+import '../../services/settings_service.dart';
+
+final _volumeLogger = DebugLogger();
 
 /// A player card that matches the mini player's visual style.
 /// Used in the player reveal overlay when swiping down or tapping the device button.
@@ -23,10 +28,23 @@ class PlayerCard extends StatefulWidget {
   final VoidCallback? onSkipNext;
   final VoidCallback? onPower;
   final ValueChanged<double>? onVolumeChange;
+  final ValueChanged<bool>? onPrecisionModeChanged;
 
   // Pastel yellow for grouped players
   static const Color groupBorderColor = Color(0xFFFFF59D);
 
+  // Precision mode settings
+  static const int precisionTriggerMs = 800; // Hold still for 800ms to enter precision mode
+  static const double precisionStillnessThreshold = 5.0; // Max pixels of movement considered "still"
+  static const double precisionSensitivity = 0.1; // 10x more precise (full swipe = 10% change)
+
+  // PERF Phase 4: Pre-cached BoxShadow to avoid allocation per frame
+  static const BoxShadow cardShadow = BoxShadow(
+    color: Color(0x33000000), // 20% black
+    blurRadius: 8,
+    offset: Offset(0, 2),
+  );
+
   const PlayerCard({
     super.key,
     required this.player,
@@ -43,6 +61,7 @@ class PlayerCard extends StatefulWidget {
     this.onSkipNext,
     this.onPower,
     this.onVolumeChange,
+    this.onPrecisionModeChanged,
   });
 
   @override
@@ -54,7 +73,70 @@ class _PlayerCardState extends State<PlayerCard> {
   double _dragVolumeLevel = 0.0;
   double _cardWidth = 0.0;
   int _lastVolumeUpdateTime = 0;
+  int _lastDragEndTime = 0; // Track when last drag ended for consecutive swipes
+  bool _hasLocalVolumeOverride = false; // True if we've set volume locally
   static const int _volumeThrottleMs = 150; // Only send volume updates every 150ms
+  static const int _precisionThrottleMs = 50; // Faster updates in precision mode
+  static const int _consecutiveSwipeWindowMs = 5000; // 5 seconds - extended window for consecutive swipes
+
+  // Precision mode state
+  bool _inPrecisionMode = false;
+  Timer? _precisionTimer;
+  Offset? _lastDragPosition;
+  double _lastLocalX = 0.0; // Last local X position during drag (for precision mode)
+  bool _precisionModeEnabled = true; // From settings
+  double _precisionZoomCenter = 0.0; // Volume level when precision mode started
+  double _precisionStartX = 0.0; // Finger X position when precision mode started
+
+  @override
+  void initState() {
+    super.initState();
+    _loadPrecisionModeSetting();
+  }
+
+  Future<void> _loadPrecisionModeSetting() async {
+    final enabled = await SettingsService.getVolumePrecisionMode();
+    if (mounted) {
+      setState(() {
+        _precisionModeEnabled = enabled;
+      });
+    }
+  }
+
+  @override
+  void dispose() {
+    _precisionTimer?.cancel();
+    super.dispose();
+  }
+
+  void _enterPrecisionMode() {
+    if (_inPrecisionMode) return;
+    HapticFeedback.mediumImpact(); // Vibrate to indicate precision mode
+    setState(() {
+      _inPrecisionMode = true;
+      _precisionZoomCenter = _dragVolumeLevel; // Capture current volume as zoom center
+      _precisionStartX = _lastLocalX; // Capture finger position at entry
+    });
+    widget.onPrecisionModeChanged?.call(true);
+    _volumeLogger.debug(
+      'PRECISION_MODE [${widget.player.name}]: ENTERED at ${(_precisionZoomCenter * 100).round()}%',
+      context: 'Volume',
+    );
+  }
+
+  void _exitPrecisionMode() {
+    _precisionTimer?.cancel();
+    _precisionTimer = null;
+    if (!_inPrecisionMode) return;
+    setState(() {
+      _inPrecisionMode = false;
+    });
+    widget.onPrecisionModeChanged?.call(false);
+    _volumeLogger.debug(
+      'PRECISION_MODE [${widget.player.name}]: EXITED',
+      context: 'Volume',
+    );
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -67,7 +149,10 @@ class _PlayerCardState extends State<PlayerCard> {
     final filledColor = widget.backgroundColor;
     final unfilledColor = Color.lerp(widget.backgroundColor, Colors.black, 0.3)!;
 
-    return LayoutBuilder(
+    // RepaintBoundary isolates this card's repaint from parent transform animations
+    // This improves performance during the staggered reveal animation
+    return RepaintBoundary(
+      child: LayoutBuilder(
       builder: (context, constraints) {
         _cardWidth = constraints.maxWidth;
 
@@ -92,13 +177,8 @@ class _PlayerCardState extends State<PlayerCard> {
                   decoration: BoxDecoration(
                     color: unfilledColor,
                     borderRadius: BorderRadius.circular(borderRadius),
-                    boxShadow: [
-                      BoxShadow(
-                        color: Colors.black.withOpacity(0.2),
-                        blurRadius: 8,
-                        offset: const Offset(0, 2),
-                      ),
-                    ],
+                    // PERF Phase 4: Use pre-cached static BoxShadow
+                    boxShadow: const [PlayerCard.cardShadow],
                   ),
                   clipBehavior: Clip.antiAlias,
                   child: Align(
@@ -133,6 +213,7 @@ class _PlayerCardState extends State<PlayerCard> {
           ),
         );
       },
+      ),
     );
   }
 
@@ -142,13 +223,8 @@ class _PlayerCardState extends State<PlayerCard> {
       decoration: BoxDecoration(
         color: widget.backgroundColor,
         borderRadius: BorderRadius.circular(borderRadius),
-        boxShadow: [
-          BoxShadow(
-            color: Colors.black.withOpacity(0.2),
-            blurRadius: 8,
-            offset: const Offset(0, 2),
-          ),
-        ],
+        // PERF Phase 4: Use pre-cached static BoxShadow
+        boxShadow: const [PlayerCard.cardShadow],
       ),
       clipBehavior: Clip.antiAlias,
       child: Row(
@@ -282,25 +358,83 @@ class _PlayerCardState extends State<PlayerCard> {
   }
 
   void _onDragStart(DragStartDetails details) {
-    // Get current volume from player
-    final currentVolume = (widget.player.volumeLevel ?? 0).toDouble() / 100.0;
+    // For consecutive swipes, use local volume (API may not have updated player state yet)
+    final now = DateTime.now().millisecondsSinceEpoch;
+    final timeSinceLastDrag = now - _lastDragEndTime;
+    final isWithinWindow = timeSinceLastDrag < _consecutiveSwipeWindowMs;
+
+    // Use local volume if:
+    // 1. We have a local override (we've swiped before) AND
+    // 2. We're within the consecutive swipe window (5 seconds)
+    // Otherwise, read fresh from player state
+    final useLocalVolume = _hasLocalVolumeOverride && isWithinWindow;
+
+    final playerVolume = (widget.player.volumeLevel ?? 0).toDouble() / 100.0;
+    final startVolume = useLocalVolume
+        ? _dragVolumeLevel // Continue from where last swipe ended
+        : playerVolume; // Fresh from player
+
+    _volumeLogger.debug(
+      'DRAG_START [${widget.player.name}]: '
+      'useLocal=$useLocalVolume, hasOverride=$_hasLocalVolumeOverride, '
+      'inWindow=$isWithinWindow (${timeSinceLastDrag}ms ago), '
+      'localVol=${(_dragVolumeLevel * 100).round()}%, '
+      'playerVol=${(playerVolume * 100).round()}%, '
+      'startVol=${(startVolume * 100).round()}%',
+      context: 'Volume',
+    );
+
     setState(() {
       _isDraggingVolume = true;
-      _dragVolumeLevel = currentVolume;
+      _dragVolumeLevel = startVolume;
     });
+    _lastDragPosition = details.globalPosition;
     HapticFeedback.lightImpact();
   }
 
   void _onDragUpdate(DragUpdateDetails details) {
     if (!_isDraggingVolume || _cardWidth <= 0) return;
 
-    // Directional volume: drag right = increase, drag left = decrease
-    // Distance determines amount of change (full card width = 100%)
-    // Multiple swipes accumulate - each starts from current volume
-    final dragDelta = details.delta.dx;
-    final volumeDelta = dragDelta / _cardWidth;
+    // Track local X position for precision mode
+    _lastLocalX = details.localPosition.dx;
 
-    final newVolume = (_dragVolumeLevel + volumeDelta).clamp(0.0, 1.0);
+    // Check for stillness to trigger precision mode (only if enabled in settings)
+    final currentPosition = details.globalPosition;
+    if (_precisionModeEnabled && _lastDragPosition != null) {
+      final movement = (currentPosition - _lastDragPosition!).distance;
+
+      if (movement < PlayerCard.precisionStillnessThreshold) {
+        // Finger is still - start precision timer if not already running
+        if (_precisionTimer == null && !_inPrecisionMode) {
+          _precisionTimer = Timer(
+            Duration(milliseconds: PlayerCard.precisionTriggerMs),
+            _enterPrecisionMode,
+          );
+        }
+      } else {
+        // Finger moved - cancel timer (but don't exit precision mode if already in it)
+        _precisionTimer?.cancel();
+        _precisionTimer = null;
+      }
+    }
+    _lastDragPosition = currentPosition;
+
+    double newVolume;
+
+    if (_inPrecisionMode) {
+      // PRECISION MODE: Movement from entry point maps to zoomed range
+      // Full card width of movement = precisionSensitivity (10%) change
+      // e.g., at 40% center: moving full card right = 50%, full card left = 30%
+      final offsetX = details.localPosition.dx - _precisionStartX;
+      final normalizedOffset = offsetX / _cardWidth; // -1.0 to +1.0 range
+      final volumeChange = normalizedOffset * PlayerCard.precisionSensitivity;
+      newVolume = (_precisionZoomCenter + volumeChange).clamp(0.0, 1.0);
+    } else {
+      // NORMAL MODE: Delta-based movement (full card width = 100%)
+      final dragDelta = details.delta.dx;
+      final volumeDelta = dragDelta / _cardWidth;
+      newVolume = (_dragVolumeLevel + volumeDelta).clamp(0.0, 1.0);
+    }
 
     // Always update visual
     if ((newVolume - _dragVolumeLevel).abs() > 0.001) {
@@ -308,9 +442,10 @@ class _PlayerCardState extends State<PlayerCard> {
         _dragVolumeLevel = newVolume;
       });
 
-      // Throttle API calls to prevent flooding
+      // Throttle API calls to prevent flooding (faster in precision mode)
       final now = DateTime.now().millisecondsSinceEpoch;
-      if (now - _lastVolumeUpdateTime >= _volumeThrottleMs) {
+      final throttleMs = _inPrecisionMode ? _precisionThrottleMs : _volumeThrottleMs;
+      if (now - _lastVolumeUpdateTime >= throttleMs) {
         _lastVolumeUpdateTime = now;
         widget.onVolumeChange?.call(newVolume);
       }
@@ -319,7 +454,17 @@ class _PlayerCardState extends State<PlayerCard> {
 
   void _onDragEnd(DragEndDetails details) {
     // Send final volume on release
+    _volumeLogger.debug(
+      'DRAG_END [${widget.player.name}]: '
+      'finalVol=${(_dragVolumeLevel * 100).round()}%, '
+      'precisionMode=$_inPrecisionMode',
+      context: 'Volume',
+    );
     widget.onVolumeChange?.call(_dragVolumeLevel);
+    _lastDragEndTime = DateTime.now().millisecondsSinceEpoch; // Track for consecutive swipes
+    _hasLocalVolumeOverride = true; // Mark that we have a local volume value
+    _exitPrecisionMode();
+    _lastDragPosition = null;
     setState(() {
       _isDraggingVolume = false;
     });
@@ -327,6 +472,8 @@ class _PlayerCardState extends State<PlayerCard> {
   }
 
   void _onDragCancel() {
+    _exitPrecisionMode();
+    _lastDragPosition = null;
     setState(() {
       _isDraggingVolume = false;
     });

lib/widgets/player/player_reveal_overlay.dart

@@ -54,6 +54,13 @@ class PlayerRevealOverlayState extends State<PlayerRevealOverlay>
   // Hint system
   bool _showHints = true;
 
+  // PERF: Pre-cached static BoxShadow to avoid allocation per frame
+  static const BoxShadow _cardShadow = BoxShadow(
+    color: Color(0x33000000), // 20% black
+    blurRadius: 8,
+    offset: Offset(0, 2),
+  );
+
   @override
   void initState() {
     super.initState();
@@ -231,6 +238,9 @@ class PlayerRevealOverlayState extends State<PlayerRevealOverlay>
     final colorScheme = Theme.of(context).colorScheme;
     final isDark = Theme.of(context).brightness == Brightness.dark;
 
+    // PERF Phase 4: Pre-compute hint colors outside animation loop
+    final hintColor = colorScheme.onSurface.withOpacity(0.7);
+
     // Back gesture is handled at GlobalPlayerOverlay level
     return Consumer<MusicAssistantProvider>(
       builder: (context, maProvider, child) {
@@ -267,6 +277,31 @@ class PlayerRevealOverlayState extends State<PlayerRevealOverlay>
           }
         });
 
+        // PERF Phase 4: Pre-compute player card data OUTSIDE AnimatedBuilder
+        // This avoids re-gathering player data every animation frame
+        final playerDataList = players.map((player) {
+          final isPlaying = player.state == 'playing';
+          final playerTrack = maProvider.getCachedTrackForPlayer(player.playerId);
+          String? albumArtUrl;
+          if (playerTrack != null && player.available && player.powered) {
+            albumArtUrl = maProvider.getImageUrl(playerTrack, size: 128);
+          }
+          final playerColorScheme = _playerColors[player.playerId];
+          final cardBgColor = playerColorScheme?.primaryContainer ?? defaultBgColor;
+          final cardTextColor = playerColorScheme?.onPrimaryContainer ?? defaultTextColor;
+          final isGrouped = maProvider.isPlayerManuallySynced(player.playerId);
+
+          return _PlayerCardData(
+            player: player,
+            playerTrack: playerTrack,
+            albumArtUrl: albumArtUrl,
+            isPlaying: isPlaying,
+            isGrouped: isGrouped,
+            cardBgColor: cardBgColor,
+            cardTextColor: cardTextColor,
+          );
+        }).toList();
+
         return AnimatedBuilder(
           animation: _revealAnimation,
           builder: (context, child) {
@@ -308,6 +343,7 @@ class PlayerRevealOverlayState extends State<PlayerRevealOverlay>
                               // Show different hint for onboarding vs regular use
                               final isOnboarding = widget.showOnboardingHints;
 
+                              // PERF Phase 4: Use pre-computed hintColor
                               Widget buildHintRow(IconData icon, String text) {
                                 return Row(
                                   mainAxisSize: MainAxisSize.min,
@@ -315,13 +351,13 @@ class PlayerRevealOverlayState extends State<PlayerRevealOverlay>
                                     Icon(
                                       icon,
                                       size: 18,
-                                      color: colorScheme.onSurface.withOpacity(0.7),
+                                      color: hintColor,
                                     ),
                                     const SizedBox(width: 6),
                                     Text(
                                       text,
                                       style: TextStyle(
-                                        color: colorScheme.onSurface.withOpacity(0.7),
+                                        color: hintColor,
                                         fontSize: 16,
                                         fontWeight: FontWeight.w500,
                                       ),
@@ -354,31 +390,23 @@ class PlayerRevealOverlayState extends State<PlayerRevealOverlay>
                         // Build player cards - scrollable when overflow, otherwise static
                         // Using ListView.builder for many players: only builds visible items
                         // This significantly improves animation performance with 10+ players
+                        // PERF Phase 4: Use pre-computed playerDataList
                         if (needsScroll)
                           ConstrainedBox(
                             constraints: BoxConstraints(maxHeight: maxListHeight),
                             child: ListView.builder(
                               controller: _scrollController,
                               physics: const ClampingScrollPhysics(),
-                              itemCount: players.length,
+                              itemCount: playerDataList.length,
                               // Fixed height per item for optimal scroll performance
                               itemExtent: cardHeight + cardSpacing,
                               itemBuilder: (context, index) {
-                                final player = players[index];
-                                final isPlaying = player.state == 'playing';
-                                final playerTrack = maProvider.getCachedTrackForPlayer(player.playerId);
-                                String? albumArtUrl;
-                                if (playerTrack != null && player.available && player.powered) {
-                                  albumArtUrl = maProvider.getImageUrl(playerTrack, size: 128);
-                                }
-                                final playerColorScheme = _playerColors[player.playerId];
-                                final cardBgColor = playerColorScheme?.primaryContainer ?? defaultBgColor;
-                                final cardTextColor = playerColorScheme?.onPrimaryContainer ?? defaultTextColor;
+                                final data = playerDataList[index];
 
                                 // Animation: slide from behind mini player
                                 // Only calculate for items that will be built (visible ones)
                                 const baseOffset = 80.0;
-                                final reverseIndex = players.length - 1 - index;
+                                final reverseIndex = playerDataList.length - 1 - index;
                                 final distanceToTravel = baseOffset + (reverseIndex * (cardHeight + cardSpacing));
                                 final slideOffset = distanceToTravel * (1.0 - t);
 
@@ -387,33 +415,33 @@ class PlayerRevealOverlayState extends State<PlayerRevealOverlay>
                                   child: Padding(
                                     padding: const EdgeInsets.only(bottom: cardSpacing),
                                     child: PlayerCard(
-                                      player: player,
-                                      trackInfo: playerTrack,
-                                      albumArtUrl: albumArtUrl,
+                                      player: data.player,
+                                      trackInfo: data.playerTrack,
+                                      albumArtUrl: data.albumArtUrl,
                                       isSelected: false,
-                                      isPlaying: isPlaying,
-                                      isGrouped: maProvider.isPlayerManuallySynced(player.playerId),
-                                      backgroundColor: cardBgColor,
-                                      textColor: cardTextColor,
+                                      isPlaying: data.isPlaying,
+                                      isGrouped: data.isGrouped,
+                                      backgroundColor: data.cardBgColor,
+                                      textColor: data.cardTextColor,
                                       onTap: () {
                                         HapticFeedback.mediumImpact();
-                                        maProvider.selectPlayer(player);
+                                        maProvider.selectPlayer(data.player);
                                         dismiss();
                                       },
                                       onLongPress: () {
                                         HapticFeedback.mediumImpact();
-                                        maProvider.togglePlayerSync(player.playerId);
+                                        maProvider.togglePlayerSync(data.player.playerId);
                                       },
                                       onPlayPause: () {
-                                        if (isPlaying) {
-                                          maProvider.pausePlayer(player.playerId);
+                                        if (data.isPlaying) {
+                                          maProvider.pausePlayer(data.player.playerId);
                                         } else {
-                                          maProvider.resumePlayer(player.playerId);
+                                          maProvider.resumePlayer(data.player.playerId);
                                         }
                                       },
-                                      onSkipNext: () => maProvider.nextTrack(player.playerId),
-                                      onPower: () => maProvider.togglePower(player.playerId),
-                                      onVolumeChange: (volume) => maProvider.setVolume(player.playerId, (volume * 100).round()),
+                                      onSkipNext: () => maProvider.nextTrack(data.player.playerId),
+                                      onPower: () => maProvider.togglePower(data.player.playerId),
+                                      onVolumeChange: (volume) => maProvider.setVolume(data.player.playerId, (volume * 100).round()),
                                     ),
                                   ),
                                 );
@@ -422,28 +450,14 @@ class PlayerRevealOverlayState extends State<PlayerRevealOverlay>
                           )
                         else
                         // Non-scrollable list for when players fit
-                        ...List.generate(players.length, (index) {
-                          final player = players[index];
-                          final isPlaying = player.state == 'playing';
-
-                          // Get track info for this player
-                          final playerTrack = maProvider.getCachedTrackForPlayer(player.playerId);
-
-                          // Get album art URL - use track directly like mini player does
-                          String? albumArtUrl;
-                          if (playerTrack != null && player.available && player.powered) {
-                            albumArtUrl = maProvider.getImageUrl(playerTrack, size: 128);
-                          }
-
-                          // Use per-player colors if available, otherwise use defaults
-                          final playerColorScheme = _playerColors[player.playerId];
-                          final cardBgColor = playerColorScheme?.primaryContainer ?? defaultBgColor;
-                          final cardTextColor = playerColorScheme?.onPrimaryContainer ?? defaultTextColor;
+                        // PERF Phase 4: Use pre-computed playerDataList
+                        ...List.generate(playerDataList.length, (index) {
+                          final data = playerDataList[index];
 
                           // Animation: all cards start hidden behind mini player
                           // and fan out to their final positions with spring physics
                           const baseOffset = 80.0;
-                          final reverseIndex = players.length - 1 - index;
+                          final reverseIndex = playerDataList.length - 1 - index;
                           final distanceToTravel = baseOffset + (reverseIndex * (cardHeight + cardSpacing));
 
                           // Use the elastic animation value directly (already has bounce)
@@ -454,44 +468,33 @@ class PlayerRevealOverlayState extends State<PlayerRevealOverlay>
                             child: Padding(
                               padding: const EdgeInsets.only(bottom: 12),
                               child: PlayerCard(
-                                player: player,
-                                trackInfo: playerTrack,
-                                albumArtUrl: albumArtUrl,
+                                player: data.player,
+                                trackInfo: data.playerTrack,
+                                albumArtUrl: data.albumArtUrl,
                                 isSelected: false,
-                                isPlaying: isPlaying,
-                                isGrouped: maProvider.isPlayerManuallySynced(player.playerId),
-                                backgroundColor: cardBgColor,
-                                textColor: cardTextColor,
+                                isPlaying: data.isPlaying,
+                                isGrouped: data.isGrouped,
+                                backgroundColor: data.cardBgColor,
+                                textColor: data.cardTextColor,
                                 onTap: () {
                                   HapticFeedback.mediumImpact();
-                                  maProvider.selectPlayer(player);
+                                  maProvider.selectPlayer(data.player);
                                   dismiss();
                                 },
                                 onLongPress: () {
                                   HapticFeedback.mediumImpact();
-                                  debugPrint('🔗 Long-press on ${player.name} (${player.playerId})');
-                                  ScaffoldMessenger.of(context).showSnackBar(
-                                    SnackBar(
-                                      content: Text('Syncing ${player.name}...'),
-                                      duration: const Duration(seconds: 2),
-                                    ),
-                                  );
-                                  maProvider.togglePlayerSync(player.playerId);
+                                  maProvider.togglePlayerSync(data.player.playerId);
                                 },
                                 onPlayPause: () {
-                                  if (isPlaying) {
-                                    maProvider.pausePlayer(player.playerId);
+                                  if (data.isPlaying) {
+                                    maProvider.pausePlayer(data.player.playerId);
                                   } else {
-                                    maProvider.resumePlayer(player.playerId);
+                                    maProvider.resumePlayer(data.player.playerId);
                                   }
                                 },
-                                onSkipNext: () {
-                                  maProvider.nextTrack(player.playerId);
-                                },
-                                onPower: () {
-                                  maProvider.togglePower(player.playerId);
-                                },
-                                onVolumeChange: (volume) => maProvider.setVolume(player.playerId, (volume * 100).round()),
+                                onSkipNext: () => maProvider.nextTrack(data.player.playerId),
+                                onPower: () => maProvider.togglePower(data.player.playerId),
+                                onVolumeChange: (volume) => maProvider.setVolume(data.player.playerId, (volume * 100).round()),
                               ),
                             ),
                           );
@@ -508,3 +511,24 @@ class PlayerRevealOverlayState extends State<PlayerRevealOverlay>
     );
   }
 }
+
+/// PERF Phase 4: Pre-computed player card data to avoid gathering per animation frame
+class _PlayerCardData {
+  final dynamic player;
+  final dynamic playerTrack;
+  final String? albumArtUrl;
+  final bool isPlaying;
+  final bool isGrouped;
+  final Color cardBgColor;
+  final Color cardTextColor;
+
+  const _PlayerCardData({
+    required this.player,
+    required this.playerTrack,
+    required this.albumArtUrl,
+    required this.isPlaying,
+    required this.isGrouped,
+    required this.cardBgColor,
+    required this.cardTextColor,
+  });
+}

lib/widgets/player/queue_panel.dart

@@ -1,12 +1,19 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import '../../providers/music_assistant_provider.dart';
 import '../../models/player.dart';
 import '../../theme/design_tokens.dart';
 import '../common/empty_state.dart';
 
-/// Panel that displays the current playback queue
-class QueuePanel extends StatelessWidget {
+/// Panel that displays the current playback queue with drag-to-reorder
+/// and swipe-left-to-delete functionality.
+///
+/// Uses custom AnimatedList implementation instead of great_list_view
+/// to avoid grey screen bugs (ReorderableListView) and drag duplication bugs (great_list_view).
+class QueuePanel extends StatefulWidget {
   final MusicAssistantProvider maProvider;
   final PlayerQueue? queue;
   final bool isLoading;
@@ -16,6 +23,10 @@ class QueuePanel extends StatelessWidget {
   final double topPadding;
   final VoidCallback onClose;
   final VoidCallback onRefresh;
+  final ValueChanged<bool>? onDraggingChanged;
+  final VoidCallback? onSwipeStart;
+  final ValueChanged<double>? onSwipeUpdate; // dx delta from start
+  final void Function(double velocity, double totalDx)? onSwipeEnd; // velocity and total displacement
 
   const QueuePanel({
     super.key,
@@ -28,151 +39,739 @@ class QueuePanel extends StatelessWidget {
     required this.topPadding,
     required this.onClose,
     required this.onRefresh,
+    this.onDraggingChanged,
+    this.onSwipeStart,
+    this.onSwipeUpdate,
+    this.onSwipeEnd,
   });
 
   @override
-  Widget build(BuildContext context) {
-    return Container(
-      color: backgroundColor,
-      child: Column(
-        children: [
-          // Header
-          Container(
-            padding: EdgeInsets.only(top: topPadding + 4, left: 4, right: 16),
-            child: Row(
-              children: [
-                IconButton(
-                  icon: Icon(Icons.arrow_back_rounded, color: textColor, size: IconSizes.md),
-                  onPressed: onClose,
-                  padding: Spacing.paddingAll12,
-                ),
-                const Spacer(),
-                Text(
-                  'Queue',
-                  style: TextStyle(
-                    color: textColor,
-                    fontSize: 18,
-                    fontWeight: FontWeight.w600,
-                  ),
-                ),
-                const Spacer(),
-                IconButton(
-                  icon: Icon(Icons.refresh_rounded, color: textColor.withOpacity(0.7), size: IconSizes.sm),
-                  onPressed: onRefresh,
-                  padding: Spacing.paddingAll12,
-                ),
-              ],
-            ),
-          ),
+  State<QueuePanel> createState() => _QueuePanelState();
+}
 
-          // Queue content
-          Expanded(
-            child: isLoading
-                ? Center(child: CircularProgressIndicator(color: primaryColor))
-                : queue == null || queue!.items.isEmpty
-                    ? _buildEmptyState(context)
-                    : _buildQueueList(),
-          ),
-        ],
+class _QueuePanelState extends State<QueuePanel> {
+  List<QueueItem> _items = [];
+  final GlobalKey _stackKey = GlobalKey();
+
+  // Drag state
+  int? _dragIndex;
+  int? _dragStartIndex;
+  double _dragY = 0; // Y position of dragged item relative to Stack
+  double _dragStartY = 0; // Y position when drag started (global)
+  double _dragOffsetInItem = 0; // Offset of touch point within item
+  QueueItem? _dragItem;
+  double _itemHeight = 64.0;
+  bool _pendingReorder = false; // True while waiting for API confirmation
+  Timer? _pendingReorderTimer;
+
+  // Optimistic update for tap-to-skip
+  int? _optimisticCurrentIndex;
+
+  // Swipe-to-close tracking (raw pointer events to bypass gesture arena)
+  Offset? _swipeStart;
+  Offset? _swipeLast;
+  int? _swipeLastTime; // milliseconds since epoch
+  bool _isSwiping = false;
+  bool _swipeLocked = false; // Lock direction once established
+  static const _swipeMinDistance = 8.0; // Min distance to start tracking (reduced for responsiveness)
+  static const _edgeDeadZone = 48.0; // Dead zone for Android back gesture (increased)
+
+  // Track last touch start position for edge detection in Dismissible
+  // Static so it persists across widget rebuilds
+  static double? _lastPointerDownX;
+  static double? _lastScreenWidth;
+
+  // Velocity tracking with multiple samples for smoother calculation
+  final List<_VelocitySample> _velocitySamples = [];
+  static const _maxVelocitySamples = 5;
+
+
+  @override
+  void initState() {
+    super.initState();
+    _items = List.from(widget.queue?.items ?? []);
+  }
+
+  @override
+  void didUpdateWidget(QueuePanel oldWidget) {
+    super.didUpdateWidget(oldWidget);
+
+    // Clear optimistic state when server catches up
+    if (_optimisticCurrentIndex != null) {
+      final serverIndex = widget.queue?.currentIndex;
+      if (serverIndex == _optimisticCurrentIndex) {
+        // Server caught up - clear optimistic state
+        _optimisticCurrentIndex = null;
+      }
+    }
+
+    // Don't update items while dragging or waiting for reorder confirmation
+    if (_dragIndex != null || _pendingReorder) return;
+
+    final newItems = widget.queue?.items ?? [];
+
+    // Only sync when player changes or item count changes (additions/deletions)
+    // Don't sync on order changes - trust our local order after user reorders
+    // This prevents stale server state from overwriting recent local changes
+    final playerChanged = widget.queue?.playerId != oldWidget.queue?.playerId;
+    final countChanged = newItems.length != _items.length;
+
+    if (playerChanged || countChanged) {
+      setState(() {
+        _items = List.from(newItems);
+      });
+    }
+  }
+
+  @override
+  void dispose() {
+    _pendingReorderTimer?.cancel();
+    super.dispose();
+  }
+
+  String _formatDuration(Duration? duration) {
+    if (duration == null) return '';
+    final totalSeconds = duration.inSeconds;
+    final minutes = totalSeconds ~/ 60;
+    final seconds = totalSeconds % 60;
+    return '$minutes:${seconds.toString().padLeft(2, '0')}';
+  }
+
+  void _handleDelete(QueueItem item, int index) async {
+    // Store item for potential rollback
+    final deletedItem = item;
+    final deletedIndex = index;
+
+    // Optimistic update - remove from local list
+    setState(() {
+      _items.removeAt(index);
+    });
+
+    // Call API with error handling
+    final playerId = widget.queue?.playerId;
+    if (playerId != null) {
+      try {
+        await widget.maProvider.api?.queueCommandDeleteItem(playerId, item.queueItemId);
+        debugPrint('QueuePanel: Delete successful for ${item.track.name}');
+      } catch (e) {
+        debugPrint('QueuePanel: Error deleting queue item: $e');
+        // Rollback: re-insert the item or refresh from server
+        // Refresh is safer as queue may have changed
+        widget.onRefresh();
+      }
+    }
+  }
+
+  void _handleClearQueue() async {
+    final playerId = widget.queue?.playerId;
+    if (playerId == null) return;
+
+    // Optimistic update - clear local list
+    setState(() {
+      _items.clear();
+    });
+
+    // Call API
+    try {
+      await widget.maProvider.api?.queueCommandClear(playerId);
+    } catch (e) {
+      debugPrint('QueuePanel: Error clearing queue: $e');
+      // Refresh to restore if failed
+      widget.onRefresh();
+    }
+  }
+
+  void _resetSwipeState() {
+    _swipeStart = null;
+    _swipeLast = null;
+    _swipeLastTime = null;
+    _isSwiping = false;
+    _swipeLocked = false;
+    _velocitySamples.clear();
+    // NOTE: Don't reset _lastPointerDownX - it's needed by confirmDismiss
+    // which may be called after pointer up
+  }
+
+  /// Check if x position is in the edge dead zone (Android back gesture area)
+  static bool _isInEdgeZone(double x, double screenWidth) {
+    return x < _edgeDeadZone || x > screenWidth - _edgeDeadZone;
+  }
+
+  /// Check if last touch started in edge zone (for Dismissible to check)
+  static bool get lastTouchWasInEdgeZone {
+    if (_lastPointerDownX == null || _lastScreenWidth == null) return false;
+    return _isInEdgeZone(_lastPointerDownX!, _lastScreenWidth!);
+  }
+
+  /// Build an invisible edge absorber that blocks horizontal drags from triggering Dismissible
+  Widget _buildEdgeAbsorber({required bool left}) {
+    return Positioned(
+      left: left ? 0 : null,
+      right: left ? null : 0,
+      top: 0,
+      bottom: 0,
+      width: _edgeDeadZone,
+      child: GestureDetector(
+        behavior: HitTestBehavior.translucent,
+        onHorizontalDragStart: (_) {}, // Absorb horizontal drags
+        onHorizontalDragUpdate: (_) {},
+        onHorizontalDragEnd: (_) {},
       ),
     );
   }
 
-  Widget _buildEmptyState(BuildContext context) {
-    return EmptyState.queue(context: context);
+  void _addVelocitySample(Offset position, int timeMs) {
+    _velocitySamples.add(_VelocitySample(position, timeMs));
+    if (_velocitySamples.length > _maxVelocitySamples) {
+      _velocitySamples.removeAt(0);
+    }
+  }
+
+  double _calculateAverageVelocity() {
+    if (_velocitySamples.length < 2) return 0.0;
+
+    // Use weighted average of recent samples (more recent = higher weight)
+    double totalVelocity = 0.0;
+    double totalWeight = 0.0;
+
+    for (int i = 1; i < _velocitySamples.length; i++) {
+      final prev = _velocitySamples[i - 1];
+      final curr = _velocitySamples[i];
+      final dt = curr.timeMs - prev.timeMs;
+      if (dt > 0 && dt < 100) { // Only use samples within 100ms
+        final dx = curr.position.dx - prev.position.dx;
+        final velocity = (dx / dt) * 1000; // px/s
+        final weight = i.toDouble(); // Later samples get higher weight
+        totalVelocity += velocity * weight;
+        totalWeight += weight;
+      }
+    }
+
+    return totalWeight > 0 ? totalVelocity / totalWeight : 0.0;
+  }
+
+  void _startDrag(int index, BuildContext itemContext, Offset globalPosition) {
+    if (_dragIndex != null) return;
+
+    // Clear any pending swipe state to prevent conflicts
+    _resetSwipeState();
+
+    final RenderBox itemBox = itemContext.findRenderObject() as RenderBox;
+    final Offset itemGlobalPos = itemBox.localToGlobal(Offset.zero);
+    _itemHeight = itemBox.size.height;
+
+    // Get Stack's global position for proper coordinate conversion
+    final stackBox = _stackKey.currentContext?.findRenderObject() as RenderBox?;
+    final stackGlobalPos = stackBox?.localToGlobal(Offset.zero) ?? Offset.zero;
+
+    // Calculate initial position relative to Stack
+    _dragY = itemGlobalPos.dy - stackGlobalPos.dy;
+    _dragStartY = globalPosition.dy;
+    // Remember where in the item the touch started (for smooth following)
+    _dragOffsetInItem = globalPosition.dy - itemGlobalPos.dy;
+
+    setState(() {
+      _dragIndex = index;
+      _dragStartIndex = index;
+      _dragItem = _items[index];
+    });
+
+    // Haptic feedback on drag start
+    HapticFeedback.mediumImpact();
+
+    // Notify parent that drag started
+    widget.onDraggingChanged?.call(true);
+  }
+
+  void _updateDragPointer(Offset globalPosition) {
+    if (_dragIndex == null) return;
+
+    // Get Stack's global position
+    final stackBox = _stackKey.currentContext?.findRenderObject() as RenderBox?;
+    final stackGlobalPos = stackBox?.localToGlobal(Offset.zero) ?? Offset.zero;
+
+    // Calculate overlay position relative to Stack, accounting for touch offset
+    _dragY = globalPosition.dy - stackGlobalPos.dy - _dragOffsetInItem;
+
+    // Calculate which index we're hovering over based on movement from start
+    final totalOffset = globalPosition.dy - _dragStartY;
+    final indexOffset = (totalOffset / _itemHeight).round();
+    final targetIndex = (_dragStartIndex! + indexOffset).clamp(0, _items.length - 1);
+
+    if (targetIndex != _dragIndex) {
+      // Reorder items in the list
+      setState(() {
+        final item = _items.removeAt(_dragIndex!);
+        _items.insert(targetIndex, item);
+        _dragIndex = targetIndex;
+      });
+      // Haptic feedback on each reorder
+      HapticFeedback.selectionClick();
+    } else {
+      // Just update position
+      setState(() {});
+    }
+  }
+
+  void _endDrag() async {
+    if (_dragIndex == null || _dragStartIndex == null) return;
+
+    final newIndex = _dragIndex!;
+    final originalIndex = _dragStartIndex!;
+    final item = _items[newIndex];
+    final positionChanged = originalIndex != newIndex;
+
+    // Cancel any existing timer to prevent stacking
+    _pendingReorderTimer?.cancel();
+
+    setState(() {
+      _dragIndex = null;
+      _dragStartIndex = null;
+      _dragItem = null;
+      // Block didUpdateWidget while waiting for server confirmation
+      if (positionChanged) _pendingReorder = true;
+    });
+
+    // Haptic feedback on drop
+    HapticFeedback.lightImpact();
+
+    // Notify parent that drag ended
+    widget.onDraggingChanged?.call(false);
+
+    // Call API if position changed
+    if (positionChanged) {
+      final playerId = widget.queue?.playerId;
+      // API uses relative shift: positive = down, negative = up
+      final posShift = newIndex - originalIndex;
+      debugPrint('QueuePanel: Moving ${item.track.name} from $originalIndex to $newIndex (shift: $posShift, queueItemId: ${item.queueItemId})');
+      if (playerId != null) {
+        try {
+          await widget.maProvider.api?.queueCommandMoveItem(playerId, item.queueItemId, posShift);
+          debugPrint('QueuePanel: Move API call completed successfully');
+          // Allow updates again after a delay for server state to propagate
+          _pendingReorderTimer = Timer(const Duration(milliseconds: 2000), () {
+            if (mounted) {
+              setState(() {
+                _pendingReorder = false;
+              });
+            }
+          });
+        } catch (e) {
+          debugPrint('QueuePanel: Move API error: $e');
+          // Clear pending state immediately on error
+          if (mounted) {
+            setState(() {
+              _pendingReorder = false;
+            });
+          }
+          // Refresh queue from server to get correct state
+          widget.onRefresh();
+        }
+      } else {
+        debugPrint('QueuePanel: playerId is null, cannot move');
+        // Clear pending state
+        if (mounted) {
+          setState(() {
+            _pendingReorder = false;
+          });
+        }
+      }
+    }
+  }
+
+  void _cancelDrag() {
+    if (_dragStartIndex == null) return;
+
+    // Restore original position
+    if (_dragIndex != null && _dragIndex != _dragStartIndex) {
+      setState(() {
+        final item = _items.removeAt(_dragIndex!);
+        _items.insert(_dragStartIndex!, item);
+      });
+    }
+
+    setState(() {
+      _dragIndex = null;
+      _dragStartIndex = null;
+      _dragItem = null;
+    });
+
+    // Notify parent that drag ended
+    widget.onDraggingChanged?.call(false);
+  }
+
+  void _handleTapToSkip(QueueItem item, int index, bool isCurrentItem) async {
+    if (isCurrentItem) return;
+
+    final playerId = widget.queue?.playerId;
+    if (playerId == null) return;
+
+    // Optimistic update: immediately show tapped track as current
+    setState(() {
+      _optimisticCurrentIndex = index;
+    });
+
+    // Call API
+    try {
+      await widget.maProvider.api?.queueCommandPlayIndex(playerId, item.queueItemId);
+    } catch (e) {
+      debugPrint('QueuePanel: Error playing index: $e');
+    }
+
+    // Clear optimistic state after delay - server state will take over
+    await Future.delayed(const Duration(milliseconds: 1500));
+    if (mounted) {
+      setState(() {
+        _optimisticCurrentIndex = null;
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // Use Listener for raw pointer events to bypass gesture arena
+    // This allows swipe-to-close to work even over ListView/Dismissible
+    return Listener(
+      onPointerDown: (event) {
+        // Store touch position for edge detection (used by Dismissible confirmDismiss)
+        // Use static variables so they persist across rebuilds
+        _lastPointerDownX = event.position.dx;
+        _lastScreenWidth = MediaQuery.of(context).size.width;
+
+        // Check if touch started in edge zone (Android back gesture area)
+        final startedInEdgeZone = _isInEdgeZone(event.position.dx, _lastScreenWidth!);
+
+        // Don't track swipe while dragging a queue item
+        if (_dragIndex == null && !startedInEdgeZone) {
+          _swipeStart = event.position;
+          _swipeLast = event.position;
+          _swipeLastTime = DateTime.now().millisecondsSinceEpoch;
+          _isSwiping = false;
+          _swipeLocked = false;
+          _velocitySamples.clear();
+          _addVelocitySample(event.position, _swipeLastTime!);
+        } else if (startedInEdgeZone) {
+          // Clear swipe state for edge touches
+          _swipeStart = null;
+        }
+      },
+      onPointerMove: (event) {
+        // Ignore swipes from edge zone (let Android back gesture handle it)
+        if (_swipeStart == null || _dragIndex != null) return;
+
+        final dx = event.position.dx - _swipeStart!.dx;
+        final dy = (event.position.dy - _swipeStart!.dy).abs();
+        final now = DateTime.now().millisecondsSinceEpoch;
+
+        // Track all move events for velocity calculation
+        _addVelocitySample(event.position, now);
+        _swipeLast = event.position;
+        _swipeLastTime = now;
+
+        // Once direction is locked, maintain it (prevents accidental cancellation)
+        if (_swipeLocked && _isSwiping) {
+          widget.onSwipeUpdate?.call(dx.clamp(0.0, double.infinity));
+          return;
+        }
+
+        // Check if this is a horizontal swipe (reduced tolerance: dx > dy * 1.2)
+        final isHorizontal = dx.abs() > _swipeMinDistance && dx.abs() > dy * 1.2;
+
+        if (isHorizontal && dx > 0) {
+          // Horizontal swipe right - close gesture
+          if (!_isSwiping) {
+            _isSwiping = true;
+            _swipeLocked = true; // Lock direction once swipe starts
+            widget.onSwipeStart?.call();
+          }
+          widget.onSwipeUpdate?.call(dx);
+        } else if (!_swipeLocked && dx.abs() > _swipeMinDistance) {
+          // Direction established as vertical - don't start swipe
+          _swipeLocked = true; // Lock as non-swipe
+        }
+      },
+      onPointerUp: (event) {
+        if (_isSwiping && _swipeStart != null) {
+          final velocity = _calculateAverageVelocity();
+          final totalDx = event.position.dx - _swipeStart!.dx;
+          widget.onSwipeEnd?.call(velocity, totalDx);
+        }
+        _resetSwipeState();
+      },
+      onPointerCancel: (_) {
+        if (_isSwiping) {
+          widget.onSwipeEnd?.call(0, 0); // Cancel - no action
+        }
+        _resetSwipeState();
+      },
+      child: Container(
+        color: widget.backgroundColor,
+        child: Column(
+          children: [
+            // Header
+            Container(
+              padding: EdgeInsets.only(top: widget.topPadding + 4, left: 4, right: 16),
+              child: Row(
+                children: [
+                  IconButton(
+                    icon: Icon(Icons.arrow_back_rounded, color: widget.textColor, size: IconSizes.md),
+                    onPressed: widget.onClose,
+                    padding: Spacing.paddingAll12,
+                  ),
+                  const Spacer(),
+                  Text(
+                    'Queue',
+                    style: TextStyle(
+                      color: widget.textColor,
+                      fontSize: 18,
+                      fontWeight: FontWeight.w600,
+                    ),
+                  ),
+                  const Spacer(),
+                  // Clear queue button
+                  IconButton(
+                    icon: Icon(Icons.delete_sweep_rounded, color: widget.textColor.withOpacity(0.7), size: IconSizes.sm),
+                    onPressed: _handleClearQueue,
+                    padding: Spacing.paddingAll12,
+                    tooltip: 'Clear queue',
+                  ),
+                ],
+              ),
+            ),
+
+            // Queue content
+            Expanded(
+              child: widget.isLoading
+                  ? Center(child: CircularProgressIndicator(color: widget.primaryColor))
+                  : widget.queue == null || _items.isEmpty
+                      ? EmptyState.queue(context: context)
+                      : Listener(
+                          // Capture pointer events anywhere while dragging
+                          onPointerMove: (event) {
+                            if (_dragIndex != null) {
+                              _updateDragPointer(event.position);
+                            }
+                          },
+                          onPointerUp: (event) {
+                            if (_dragIndex != null) {
+                              _endDrag();
+                            }
+                          },
+                          onPointerCancel: (event) {
+                            if (_dragIndex != null) {
+                              _cancelDrag();
+                            }
+                          },
+                          child: Stack(
+                            key: _stackKey,
+                            children: [
+                              _buildQueueList(),
+                              // Dragged item overlay
+                              if (_dragIndex != null && _dragItem != null)
+                                Positioned(
+                                  left: 8,
+                                  right: 8,
+                                  top: _dragY,
+                                  child: Material(
+                                    elevation: 8,
+                                    borderRadius: BorderRadius.circular(8),
+                                    child: _buildQueueItemContent(_dragItem!, _dragIndex!, false, false),
+                                  ),
+                                ),
+                              // Edge gesture absorbers - block horizontal drags from screen edges
+                              // This prevents Android back gesture from triggering Dismissible
+                              _buildEdgeAbsorber(left: true),
+                              _buildEdgeAbsorber(left: false),
+                            ],
+                          ),
+                        ),
+            ),
+          ],
+        ),
+      ),
+    );
   }
 
   Widget _buildQueueList() {
-    final currentIndex = queue!.currentIndex ?? 0;
-    final items = queue!.items;
+    // Use optimistic index if set, otherwise use server state
+    final currentIndex = _optimisticCurrentIndex ?? widget.queue!.currentIndex ?? 0;
 
     return ListView.builder(
+      key: const PageStorageKey('queue_list'),
       padding: Spacing.paddingH8,
-      cacheExtent: 500,
-      addAutomaticKeepAlives: false, // Items don't need individual keep-alive
-      addRepaintBoundaries: false, // We add RepaintBoundary manually
-      itemCount: items.length,
+      // Disable scrolling while dragging to prevent gesture conflict
+      physics: _dragIndex != null
+          ? const NeverScrollableScrollPhysics()
+          : const AlwaysScrollableScrollPhysics(),
+      itemCount: _items.length,
       itemBuilder: (context, index) {
-        final item = items[index];
+        final item = _items[index];
         final isCurrentItem = index == currentIndex;
         final isPastItem = index < currentIndex;
-        final imageUrl = maProvider.api?.getImageUrl(item.track, size: 80);
+        final isDragging = _dragIndex == index;
 
-        return RepaintBoundary(
-          child: Opacity(
-          opacity: isPastItem ? 0.5 : 1.0,
-          child: Container(
-            margin: EdgeInsets.symmetric(vertical: Spacing.xxs),
-            decoration: BoxDecoration(
-              color: isCurrentItem ? primaryColor.withOpacity(0.15) : Colors.transparent,
-              borderRadius: BorderRadius.circular(Radii.md),
-            ),
-            child: ListTile(
-              dense: true,
-              leading: ClipRRect(
-                borderRadius: BorderRadius.circular(Radii.sm),
-                child: SizedBox(
-                  width: 44,
-                  height: 44,
-                  child: imageUrl != null
-                      ? CachedNetworkImage(
-                          imageUrl: imageUrl,
-                          fit: BoxFit.cover,
-                          // PERF: 4x cache size for 44x44 display, zero fade for scrolling
-                          memCacheWidth: 176,
-                          memCacheHeight: 176,
-                          fadeInDuration: Duration.zero,
-                          fadeOutDuration: Duration.zero,
-                          placeholder: (context, url) => Container(
-                            color: textColor.withOpacity(0.1),
-                            child: Icon(Icons.music_note, color: textColor.withOpacity(0.3), size: 20),
-                          ),
-                          errorWidget: (context, url, error) => Container(
-                            color: textColor.withOpacity(0.1),
-                            child: Icon(Icons.music_note, color: textColor.withOpacity(0.3), size: 20),
-                          ),
-                        )
-                      : Container(
-                          color: textColor.withOpacity(0.1),
-                          child: Icon(Icons.music_note, color: textColor.withOpacity(0.3), size: 20),
-                        ),
-                ),
-              ),
-              title: Text(
-                item.track.name,
-                style: TextStyle(
-                  color: isCurrentItem ? primaryColor : textColor,
-                  fontSize: 14,
-                  fontWeight: isCurrentItem ? FontWeight.w600 : FontWeight.normal,
-                ),
-                maxLines: 1,
-                overflow: TextOverflow.ellipsis,
-              ),
-              subtitle: item.track.artists != null && item.track.artists!.isNotEmpty
-                  ? Text(
-                      item.track.artists!.first.name,
-                      style: TextStyle(
-                        color: textColor.withOpacity(0.6),
-                        fontSize: 12,
-                      ),
-                      maxLines: 1,
-                      overflow: TextOverflow.ellipsis,
-                    )
-                  : null,
-              trailing: isCurrentItem
-                  ? Icon(Icons.play_arrow_rounded, color: primaryColor, size: 20)
-                  : null,
-              onTap: () {
-                // TODO: Jump to this track in queue
-                // Music Assistant API doesn't currently expose a skip_to_index or play_queue_item endpoint
-                // Would need to add API method like skipToQueueIndex(queueId, index) if MA supports it
-                // Alternative: Could use multiple next() calls but that's inefficient and unreliable
-              },
-            ),
-          ),
-          ),
+        return Opacity(
+          opacity: isDragging ? 0.3 : 1.0,
+          child: _buildDismissibleItem(item, index, isCurrentItem, isPastItem),
         );
       },
     );
   }
+
+  Widget _buildDismissibleItem(QueueItem item, int index, bool isCurrentItem, bool isPastItem) {
+    return Dismissible(
+      key: ValueKey(item.queueItemId),
+      direction: DismissDirection.endToStart,
+      background: Container(
+        alignment: Alignment.centerRight,
+        padding: const EdgeInsets.only(right: 20),
+        decoration: BoxDecoration(
+          color: Colors.red.shade700,
+          borderRadius: BorderRadius.zero,
+        ),
+        child: const Icon(Icons.delete_outline, color: Colors.white, size: 24),
+      ),
+      confirmDismiss: (direction) async {
+        // Block dismissal if swipe started from screen edge (Android back gesture)
+        if (lastTouchWasInEdgeZone) return false;
+        // Don't allow dismissing the currently playing item
+        return !isCurrentItem;
+      },
+      onDismissed: (direction) => _handleDelete(item, index),
+      child: _buildQueueItemWithDragHandle(item, index, isCurrentItem, isPastItem),
+    );
+  }
+
+  Widget _buildQueueItemWithDragHandle(QueueItem item, int index, bool isCurrentItem, bool isPastItem) {
+    return Builder(
+      builder: (itemContext) => _buildQueueItemContent(
+        item,
+        index,
+        isCurrentItem,
+        isPastItem,
+        dragHandle: isCurrentItem
+            ? SizedBox(
+                width: 48,
+                height: 48,
+                child: Center(
+                  child: Icon(Icons.play_arrow_rounded, color: widget.primaryColor, size: 20),
+                ),
+              )
+            : SizedBox(
+                width: 48,
+                height: 48,
+                child: Listener(
+                  behavior: HitTestBehavior.opaque,
+                  onPointerDown: (event) {
+                    _startDrag(index, itemContext, event.position);
+                  },
+                  // Move/up/cancel handled by parent Listener on Stack
+                  child: Center(
+                    child: Icon(Icons.drag_handle, color: widget.textColor.withOpacity(0.3), size: 20),
+                  ),
+                ),
+              ),
+      ),
+    );
+  }
+
+  Widget _buildQueueItemContent(QueueItem item, int index, bool isCurrentItem, bool isPastItem, {Widget? dragHandle}) {
+    final imageUrl = widget.maProvider.api?.getImageUrl(item.track, size: 80);
+    final duration = _formatDuration(item.track.duration);
+
+    return RepaintBoundary(
+      child: Opacity(
+        opacity: isPastItem ? 0.5 : 1.0,
+        child: Container(
+          margin: isCurrentItem ? const EdgeInsets.symmetric(horizontal: 8, vertical: 2) : EdgeInsets.zero,
+          decoration: BoxDecoration(
+            color: isCurrentItem ? widget.primaryColor.withOpacity(0.15) : widget.backgroundColor,
+            borderRadius: isCurrentItem ? BorderRadius.circular(12) : BorderRadius.zero,
+          ),
+          child: ListTile(
+            dense: true,
+            // Compensate for current item's 8px margin on both sides
+            // Left:  Non-current: 8+0+16=24px, Current: 8+8+8=24px
+            // Right: Non-current: 8+0+8+14=30px, Current: 8+8+0+14=30px
+            contentPadding: EdgeInsets.only(
+              left: isCurrentItem ? 8 : 16,
+              right: isCurrentItem ? 0 : 8,
+            ),
+            leading: ClipRRect(
+              borderRadius: BorderRadius.circular(Radii.sm),
+              child: SizedBox(
+                width: 44,
+                height: 44,
+                child: imageUrl != null
+                    ? CachedNetworkImage(
+                        imageUrl: imageUrl,
+                        fit: BoxFit.cover,
+                        memCacheWidth: 176,
+                        memCacheHeight: 176,
+                        fadeInDuration: Duration.zero,
+                        fadeOutDuration: Duration.zero,
+                        placeholder: (context, url) => Container(
+                          color: widget.textColor.withOpacity(0.1),
+                          child: Icon(Icons.music_note, color: widget.textColor.withOpacity(0.3), size: 20),
+                        ),
+                        errorWidget: (context, url, error) => Container(
+                          color: widget.textColor.withOpacity(0.1),
+                          child: Icon(Icons.music_note, color: widget.textColor.withOpacity(0.3), size: 20),
+                        ),
+                      )
+                    : Container(
+                        color: widget.textColor.withOpacity(0.1),
+                        child: Icon(Icons.music_note, color: widget.textColor.withOpacity(0.3), size: 20),
+                      ),
+              ),
+            ),
+            title: Text(
+              item.track.name,
+              style: TextStyle(
+                color: isCurrentItem ? widget.primaryColor : widget.textColor,
+                fontSize: 14,
+                fontWeight: isCurrentItem ? FontWeight.w600 : FontWeight.normal,
+              ),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+            ),
+            subtitle: item.track.artists != null && item.track.artists!.isNotEmpty
+                ? Text(
+                    item.track.artists!.first.name,
+                    style: TextStyle(
+                      color: widget.textColor.withOpacity(0.6),
+                      fontSize: 12,
+                    ),
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                  )
+                : null,
+            trailing: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                if (duration.isNotEmpty)
+                  Text(
+                    duration,
+                    style: TextStyle(
+                      color: widget.textColor.withOpacity(0.5),
+                      fontSize: 12,
+                    ),
+                  ),
+                dragHandle ?? Icon(Icons.drag_handle, color: widget.textColor.withOpacity(0.3), size: 20),
+              ],
+            ),
+            onTap: () => _handleTapToSkip(item, index, isCurrentItem),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// Helper class for velocity tracking samples
+class _VelocitySample {
+  final Offset position;
+  final int timeMs;
+
+  _VelocitySample(this.position, this.timeMs);
 }

lib/widgets/playlist_card.dart

@@ -0,0 +1,122 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import '../models/media_item.dart';
+import '../providers/music_assistant_provider.dart';
+import '../screens/playlist_details_screen.dart';
+import '../constants/hero_tags.dart';
+import '../theme/theme_provider.dart';
+import '../utils/page_transitions.dart';
+
+class PlaylistCard extends StatelessWidget {
+  final Playlist playlist;
+  final VoidCallback? onTap;
+  final String? heroTagSuffix;
+  final int? imageCacheSize;
+
+  const PlaylistCard({
+    super.key,
+    required this.playlist,
+    this.onTap,
+    this.heroTagSuffix,
+    this.imageCacheSize,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final maProvider = context.read<MusicAssistantProvider>();
+    final imageUrl = maProvider.api?.getImageUrl(playlist, size: 256);
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    final suffix = heroTagSuffix != null ? '_$heroTagSuffix' : '';
+    final cacheSize = imageCacheSize ?? 256;
+
+    return RepaintBoundary(
+      child: GestureDetector(
+        onTap: onTap ?? () {
+          // Update adaptive colors immediately on tap
+          updateAdaptiveColorsFromImage(context, imageUrl);
+          Navigator.push(
+            context,
+            FadeSlidePageRoute(
+              child: PlaylistDetailsScreen(
+                playlist: playlist,
+                heroTagSuffix: heroTagSuffix,
+                initialImageUrl: imageUrl,
+              ),
+            ),
+          );
+        },
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            // Playlist artwork
+            AspectRatio(
+              aspectRatio: 1.0,
+              child: Hero(
+                tag: HeroTags.playlistCover + (playlist.uri ?? playlist.itemId) + suffix,
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(12.0),
+                  child: Container(
+                    color: colorScheme.surfaceContainerHighest,
+                    child: imageUrl != null
+                        ? CachedNetworkImage(
+                            imageUrl: imageUrl,
+                            fit: BoxFit.cover,
+                            memCacheWidth: cacheSize,
+                            memCacheHeight: cacheSize,
+                            fadeInDuration: Duration.zero,
+                            fadeOutDuration: Duration.zero,
+                            placeholder: (context, url) => const SizedBox(),
+                            errorWidget: (context, url, error) => Center(
+                              child: Icon(
+                                Icons.playlist_play_rounded,
+                                size: 64,
+                                color: colorScheme.onSurfaceVariant,
+                              ),
+                            ),
+                          )
+                        : Center(
+                            child: Icon(
+                              Icons.playlist_play_rounded,
+                              size: 64,
+                              color: colorScheme.onSurfaceVariant,
+                            ),
+                          ),
+                  ),
+                ),
+              ),
+            ),
+            const SizedBox(height: 8),
+            // Playlist title
+            Hero(
+              tag: HeroTags.playlistTitle + (playlist.uri ?? playlist.itemId) + suffix,
+              child: Material(
+                color: Colors.transparent,
+                child: Text(
+                  playlist.name,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: textTheme.titleSmall?.copyWith(
+                    color: colorScheme.onSurface,
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
+              ),
+            ),
+            // Owner/track count
+            Text(
+              playlist.owner ?? (playlist.trackCount != null ? '${playlist.trackCount} tracks' : ''),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: textTheme.bodySmall?.copyWith(
+                color: colorScheme.onSurface.withOpacity(0.7),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/widgets/playlist_row.dart

@@ -0,0 +1,197 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import '../models/media_item.dart';
+import '../providers/music_assistant_provider.dart';
+import '../services/debug_logger.dart';
+import 'playlist_card.dart';
+
+class PlaylistRow extends StatefulWidget {
+  final String title;
+  final Future<List<Playlist>> Function() loadPlaylists;
+  final String? heroTagSuffix;
+  final double? rowHeight;
+  final List<Playlist>? Function()? getCachedPlaylists;
+
+  const PlaylistRow({
+    super.key,
+    required this.title,
+    required this.loadPlaylists,
+    this.heroTagSuffix,
+    this.rowHeight,
+    this.getCachedPlaylists,
+  });
+
+  @override
+  State<PlaylistRow> createState() => _PlaylistRowState();
+}
+
+class _PlaylistRowState extends State<PlaylistRow> with AutomaticKeepAliveClientMixin {
+  List<Playlist> _playlists = [];
+  bool _isLoading = true;
+  bool _hasLoaded = false;
+
+  static final _logger = DebugLogger();
+
+  @override
+  bool get wantKeepAlive => true;
+
+  @override
+  void initState() {
+    super.initState();
+    // Get cached data synchronously BEFORE first build (no spinner flash)
+    final cached = widget.getCachedPlaylists?.call();
+    if (cached != null && cached.isNotEmpty) {
+      _playlists = cached;
+      _isLoading = false;
+    }
+    _loadPlaylists();
+  }
+
+  Future<void> _loadPlaylists() async {
+    if (_hasLoaded) return;
+    _hasLoaded = true;
+
+    // Load fresh data
+    try {
+      final freshPlaylists = await widget.loadPlaylists();
+      if (mounted && freshPlaylists.isNotEmpty) {
+        setState(() {
+          _playlists = freshPlaylists;
+          _isLoading = false;
+        });
+        // Pre-cache images for smooth hero animations
+        _precachePlaylistImages(freshPlaylists);
+      }
+    } catch (e) {
+      // Silent failure - keep showing cached data
+    }
+
+    if (mounted && _isLoading) {
+      setState(() => _isLoading = false);
+    }
+  }
+
+  void _precachePlaylistImages(List<Playlist> playlists) {
+    if (!mounted) return;
+    final maProvider = context.read<MusicAssistantProvider>();
+
+    final playlistsToCache = playlists.take(10);
+
+    for (final playlist in playlistsToCache) {
+      final imageUrl = maProvider.api?.getImageUrl(playlist, size: 256);
+      if (imageUrl != null) {
+        precacheImage(
+          CachedNetworkImageProvider(imageUrl),
+          context,
+        ).catchError((_) => false);
+      }
+    }
+  }
+
+  Widget _buildContent(double contentHeight, ColorScheme colorScheme) {
+    // Only show loading if we have no data at all
+    if (_playlists.isEmpty && _isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    if (_playlists.isEmpty) {
+      return Center(
+        child: Text(
+          'No playlists found',
+          style: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
+        ),
+      );
+    }
+
+    // Card layout: square artwork + text below (same as AlbumRow)
+    // Text area: 8px gap + ~18px title + ~18px owner = ~44px
+    const textAreaHeight = 44.0;
+    final artworkSize = contentHeight - textAreaHeight;
+    final cardWidth = artworkSize; // Card width = artwork width (square)
+    final itemExtent = cardWidth + 12; // width + horizontal margins
+
+    return ScrollConfiguration(
+      behavior: const _StretchScrollBehavior(),
+      child: ListView.builder(
+        clipBehavior: Clip.none,
+        scrollDirection: Axis.horizontal,
+        padding: const EdgeInsets.symmetric(horizontal: 12.0),
+        itemCount: _playlists.length,
+        itemExtent: itemExtent,
+        cacheExtent: 500, // Preload ~3 items ahead for smoother scrolling
+        addAutomaticKeepAlives: false, // Row already uses AutomaticKeepAliveClientMixin
+        addRepaintBoundaries: false, // Cards already have RepaintBoundary
+        itemBuilder: (context, index) {
+          final playlist = _playlists[index];
+          return Padding(
+            padding: const EdgeInsets.only(bottom: 4.0),
+            child: Container(
+              key: ValueKey(playlist.uri ?? playlist.itemId),
+              width: cardWidth,
+              margin: const EdgeInsets.symmetric(horizontal: 6.0),
+              child: PlaylistCard(
+                playlist: playlist,
+                heroTagSuffix: widget.heroTagSuffix,
+                imageCacheSize: 256,
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    _logger.startBuild('PlaylistRow:${widget.title}');
+    super.build(context); // Required for AutomaticKeepAliveClientMixin
+    final textTheme = Theme.of(context).textTheme;
+    final colorScheme = Theme.of(context).colorScheme;
+
+    // Total row height includes title + content (same as AlbumRow)
+    final totalHeight = widget.rowHeight ?? 237.0; // Default: 44 title + 193 content
+    const titleHeight = 44.0; // 12 top padding + ~24 text + 8 bottom padding
+    final contentHeight = totalHeight - titleHeight;
+
+    final result = RepaintBoundary(
+      child: SizedBox(
+        height: totalHeight,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Padding(
+              padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
+              child: Text(
+                widget.title,
+                style: textTheme.titleLarge?.copyWith(
+                  fontWeight: FontWeight.bold,
+                  color: colorScheme.onBackground,
+                ),
+              ),
+            ),
+            Expanded(
+              child: _buildContent(contentHeight, colorScheme),
+            ),
+          ],
+        ),
+      ),
+    );
+    _logger.endBuild('PlaylistRow:${widget.title}');
+    return result;
+  }
+}
+
+/// Custom scroll behavior that uses Android 12+ stretch overscroll effect
+class _StretchScrollBehavior extends ScrollBehavior {
+  const _StretchScrollBehavior();
+
+  @override
+  Widget buildOverscrollIndicator(
+      BuildContext context, Widget child, ScrollableDetails details) {
+    return StretchingOverscrollIndicator(
+      axisDirection: details.direction,
+      child: child,
+    );
+  }
+}

lib/widgets/podcast_card.dart

@@ -0,0 +1,140 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
+import '../models/media_item.dart';
+import '../providers/music_assistant_provider.dart';
+import '../screens/podcast_detail_screen.dart';
+import '../constants/hero_tags.dart';
+import '../theme/theme_provider.dart';
+import '../utils/page_transitions.dart';
+
+class PodcastCard extends StatelessWidget {
+  final MediaItem podcast;
+  final VoidCallback? onTap;
+  final String? heroTagSuffix;
+  /// Image decode size in pixels. Defaults to 256.
+  /// Use smaller values (e.g., 128) for list views, larger for grids.
+  final int? imageCacheSize;
+
+  const PodcastCard({
+    super.key,
+    required this.podcast,
+    this.onTap,
+    this.heroTagSuffix,
+    this.imageCacheSize,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final maProvider = context.read<MusicAssistantProvider>();
+    // Use provider's getPodcastImageUrl which includes iTunes cache
+    final imageUrl = maProvider.getPodcastImageUrl(podcast, size: 256);
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    final suffix = heroTagSuffix != null ? '_$heroTagSuffix' : '';
+
+    // PERF: Use appropriate cache size based on display size
+    final cacheSize = imageCacheSize ?? 256;
+
+    return RepaintBoundary(
+      child: GestureDetector(
+        onTap: onTap ?? () {
+          // Update adaptive colors immediately on tap
+          updateAdaptiveColorsFromImage(context, imageUrl);
+          Navigator.push(
+            context,
+            FadeSlidePageRoute(
+              child: PodcastDetailScreen(
+                podcast: podcast,
+                heroTagSuffix: heroTagSuffix,
+                initialImageUrl: imageUrl,
+              ),
+            ),
+          );
+        },
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            // Podcast artwork - square with rounded corners
+            AspectRatio(
+              aspectRatio: 1.0,
+              child: Hero(
+                tag: HeroTags.podcastCover + (podcast.uri ?? podcast.itemId) + suffix,
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(12.0),
+                  child: Container(
+                    color: colorScheme.surfaceVariant,
+                    child: imageUrl != null
+                        ? CachedNetworkImage(
+                            imageUrl: imageUrl,
+                            fit: BoxFit.cover,
+                            memCacheWidth: cacheSize,
+                            memCacheHeight: cacheSize,
+                            fadeInDuration: Duration.zero,
+                            fadeOutDuration: Duration.zero,
+                            placeholder: (context, url) => const SizedBox(),
+                            errorWidget: (context, url, error) => Center(
+                              child: Icon(
+                                MdiIcons.podcast,
+                                size: 64,
+                                color: colorScheme.onSurfaceVariant,
+                              ),
+                            ),
+                          )
+                        : Center(
+                            child: Icon(
+                              MdiIcons.podcast,
+                              size: 64,
+                              color: colorScheme.onSurfaceVariant,
+                            ),
+                          ),
+                  ),
+                ),
+              ),
+            ),
+            const SizedBox(height: 8),
+            // Podcast title
+            Hero(
+              tag: HeroTags.podcastTitle + (podcast.uri ?? podcast.itemId) + suffix,
+              child: Material(
+                color: Colors.transparent,
+                child: Text(
+                  podcast.name,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: textTheme.titleSmall?.copyWith(
+                    color: colorScheme.onSurface,
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
+              ),
+            ),
+            // Podcast author (if available)
+            Text(
+              _getAuthor(podcast),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: textTheme.bodySmall?.copyWith(
+                color: colorScheme.onSurface.withOpacity(0.7),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  /// Extract author from podcast metadata
+  String _getAuthor(MediaItem podcast) {
+    final metadata = podcast.metadata;
+    if (metadata == null) return '';
+
+    // Try different metadata fields for author
+    final author = metadata['author'] ??
+                   metadata['artist'] ??
+                   metadata['owner'] ?? '';
+    return author.toString();
+  }
+}

lib/widgets/podcast_row.dart

@@ -0,0 +1,205 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import '../models/media_item.dart';
+import '../providers/music_assistant_provider.dart';
+import '../services/debug_logger.dart';
+import 'podcast_card.dart';
+
+class PodcastRow extends StatefulWidget {
+  final String title;
+  final Future<List<MediaItem>> Function() loadPodcasts;
+  final String? heroTagSuffix;
+  final double? rowHeight;
+  /// Optional: synchronous getter for cached data (for instant display)
+  final List<MediaItem>? Function()? getCachedPodcasts;
+
+  const PodcastRow({
+    super.key,
+    required this.title,
+    required this.loadPodcasts,
+    this.heroTagSuffix,
+    this.rowHeight,
+    this.getCachedPodcasts,
+  });
+
+  @override
+  State<PodcastRow> createState() => _PodcastRowState();
+}
+
+class _PodcastRowState extends State<PodcastRow> with AutomaticKeepAliveClientMixin {
+  List<MediaItem> _podcasts = [];
+  bool _isLoading = true;
+  bool _hasLoaded = false;
+
+  static final _logger = DebugLogger();
+
+  @override
+  bool get wantKeepAlive => true;
+
+  @override
+  void initState() {
+    super.initState();
+    // Get cached data synchronously BEFORE first build (no spinner flash)
+    final cached = widget.getCachedPodcasts?.call();
+    if (cached != null && cached.isNotEmpty) {
+      _podcasts = cached;
+      _isLoading = false;
+    }
+    _loadPodcasts();
+  }
+
+  Future<void> _loadPodcasts() async {
+    if (_hasLoaded) return;
+    _hasLoaded = true;
+
+    // Load fresh data (always update - fresh data may have images that cached data lacks)
+    try {
+      final freshPodcasts = await widget.loadPodcasts();
+      if (mounted && freshPodcasts.isNotEmpty) {
+        setState(() {
+          _podcasts = freshPodcasts;
+          _isLoading = false;
+        });
+        // Pre-cache images for smooth hero animations
+        _precachePodcastImages(freshPodcasts);
+      }
+    } catch (e) {
+      // Silent failure - keep showing cached data
+    }
+
+    if (mounted && _isLoading) {
+      setState(() => _isLoading = false);
+    }
+  }
+
+  /// Pre-cache podcast images so hero animations are smooth on first tap
+  void _precachePodcastImages(List<MediaItem> podcasts) {
+    if (!mounted) return;
+    final maProvider = context.read<MusicAssistantProvider>();
+
+    // Only precache first ~10 visible items to avoid excessive network/memory use
+    final podcastsToCache = podcasts.take(10);
+
+    for (final podcast in podcastsToCache) {
+      // Use getPodcastImageUrl which includes iTunes cache
+      final imageUrl = maProvider.getPodcastImageUrl(podcast, size: 256);
+      if (imageUrl != null) {
+        // Use CachedNetworkImageProvider to warm the cache
+        precacheImage(
+          CachedNetworkImageProvider(imageUrl),
+          context,
+        ).catchError((_) {
+          // Silently ignore precache errors
+          return false;
+        });
+      }
+    }
+  }
+
+  Widget _buildContent(double contentHeight, ColorScheme colorScheme) {
+    // Only show loading if we have no data at all
+    if (_podcasts.isEmpty && _isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    if (_podcasts.isEmpty) {
+      return Center(
+        child: Text(
+          'No podcasts found',
+          style: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
+        ),
+      );
+    }
+
+    // Card layout: square artwork + text below (same as AlbumRow)
+    // Text area: 8px gap + ~18px title + ~18px author = ~44px
+    const textAreaHeight = 44.0;
+    final artworkSize = contentHeight - textAreaHeight;
+    final cardWidth = artworkSize; // Card width = artwork width (square)
+    final itemExtent = cardWidth + 12; // width + horizontal margins
+
+    return ScrollConfiguration(
+      behavior: const _StretchScrollBehavior(),
+      child: ListView.builder(
+        clipBehavior: Clip.none,
+        scrollDirection: Axis.horizontal,
+        padding: const EdgeInsets.symmetric(horizontal: 12.0),
+        itemCount: _podcasts.length,
+        itemExtent: itemExtent,
+        cacheExtent: 500, // Preload ~3 items ahead for smoother scrolling
+        addAutomaticKeepAlives: false, // Row already uses AutomaticKeepAliveClientMixin
+        addRepaintBoundaries: false, // Cards already have RepaintBoundary
+        itemBuilder: (context, index) {
+          final podcast = _podcasts[index];
+          return Padding(
+            padding: const EdgeInsets.only(bottom: 4.0),
+            child: Container(
+              key: ValueKey(podcast.uri ?? podcast.itemId),
+              width: cardWidth,
+              margin: const EdgeInsets.symmetric(horizontal: 6.0),
+              child: PodcastCard(
+                podcast: podcast,
+                heroTagSuffix: widget.heroTagSuffix,
+                imageCacheSize: 256,
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    _logger.startBuild('PodcastRow:${widget.title}');
+    super.build(context); // Required for AutomaticKeepAliveClientMixin
+    final textTheme = Theme.of(context).textTheme;
+    final colorScheme = Theme.of(context).colorScheme;
+
+    // Total row height includes title + content (same as AlbumRow)
+    final totalHeight = widget.rowHeight ?? 237.0; // Default: 44 title + 193 content
+    const titleHeight = 44.0; // 12 top padding + ~24 text + 8 bottom padding
+    final contentHeight = totalHeight - titleHeight;
+
+    final result = RepaintBoundary(
+      child: SizedBox(
+        height: totalHeight,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Padding(
+              padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
+              child: Text(
+                widget.title,
+                style: textTheme.titleLarge?.copyWith(
+                  fontWeight: FontWeight.bold,
+                  color: colorScheme.onBackground,
+                ),
+              ),
+            ),
+            Expanded(
+              child: _buildContent(contentHeight, colorScheme),
+            ),
+          ],
+        ),
+      ),
+    );
+    _logger.endBuild('PodcastRow:${widget.title}');
+    return result;
+  }
+}
+
+/// Custom scroll behavior that uses Android 12+ stretch overscroll effect
+class _StretchScrollBehavior extends ScrollBehavior {
+  const _StretchScrollBehavior();
+
+  @override
+  Widget buildOverscrollIndicator(
+      BuildContext context, Widget child, ScrollableDetails details) {
+    return StretchingOverscrollIndicator(
+      axisDirection: details.direction,
+      child: child,
+    );
+  }
+}

lib/widgets/radio_station_card.dart

@@ -0,0 +1,109 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:provider/provider.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import '../models/media_item.dart';
+import '../providers/music_assistant_provider.dart';
+import '../constants/hero_tags.dart';
+
+class RadioStationCard extends StatelessWidget {
+  final MediaItem radioStation;
+  final VoidCallback? onTap;
+  final String? heroTagSuffix;
+  final int? imageCacheSize;
+
+  const RadioStationCard({
+    super.key,
+    required this.radioStation,
+    this.onTap,
+    this.heroTagSuffix,
+    this.imageCacheSize,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final maProvider = context.read<MusicAssistantProvider>();
+    final imageUrl = maProvider.api?.getImageUrl(radioStation, size: 256);
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    final suffix = heroTagSuffix != null ? '_$heroTagSuffix' : '';
+    final cacheSize = imageCacheSize ?? 256;
+
+    return RepaintBoundary(
+      child: GestureDetector(
+        onTap: onTap ?? () {
+          HapticFeedback.mediumImpact();
+          // Play the radio station on selected player
+          final selectedPlayer = maProvider.selectedPlayer;
+          if (selectedPlayer != null) {
+            maProvider.api?.playRadioStation(selectedPlayer.playerId, radioStation);
+          }
+        },
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            // Radio station artwork - circular for radio
+            AspectRatio(
+              aspectRatio: 1.0,
+              child: Hero(
+                tag: HeroTags.radioCover + (radioStation.uri ?? radioStation.itemId) + suffix,
+                child: ClipOval(
+                  child: Container(
+                    color: colorScheme.surfaceContainerHighest,
+                    child: imageUrl != null
+                        ? CachedNetworkImage(
+                            imageUrl: imageUrl,
+                            fit: BoxFit.cover,
+                            memCacheWidth: cacheSize,
+                            memCacheHeight: cacheSize,
+                            fadeInDuration: Duration.zero,
+                            fadeOutDuration: Duration.zero,
+                            placeholder: (context, url) => const SizedBox(),
+                            errorWidget: (context, url, error) => Center(
+                              child: Icon(
+                                Icons.radio_rounded,
+                                size: 64,
+                                color: colorScheme.onSurfaceVariant,
+                              ),
+                            ),
+                          )
+                        : Center(
+                            child: Icon(
+                              Icons.radio_rounded,
+                              size: 64,
+                              color: colorScheme.onSurfaceVariant,
+                            ),
+                          ),
+                  ),
+                ),
+              ),
+            ),
+            const SizedBox(height: 8),
+            // Radio station name - fixed height container so image size is consistent
+            SizedBox(
+              height: 36, // Fixed height for 2 lines of text
+              child: Hero(
+                tag: HeroTags.radioTitle + (radioStation.uri ?? radioStation.itemId) + suffix,
+                child: Material(
+                  color: Colors.transparent,
+                  child: Text(
+                    radioStation.name,
+                    maxLines: 2,
+                    overflow: TextOverflow.ellipsis,
+                    textAlign: TextAlign.center,
+                    style: textTheme.titleSmall?.copyWith(
+                      color: colorScheme.onSurface,
+                      fontWeight: FontWeight.w500,
+                      height: 1.15,
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/widgets/radio_station_row.dart

@@ -0,0 +1,193 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import '../models/media_item.dart';
+import '../providers/music_assistant_provider.dart';
+import '../services/debug_logger.dart';
+import 'radio_station_card.dart';
+
+class RadioStationRow extends StatefulWidget {
+  final String title;
+  final Future<List<MediaItem>> Function() loadRadioStations;
+  final String? heroTagSuffix;
+  final double? rowHeight;
+  final List<MediaItem>? Function()? getCachedRadioStations;
+
+  const RadioStationRow({
+    super.key,
+    required this.title,
+    required this.loadRadioStations,
+    this.heroTagSuffix,
+    this.rowHeight,
+    this.getCachedRadioStations,
+  });
+
+  @override
+  State<RadioStationRow> createState() => _RadioStationRowState();
+}
+
+class _RadioStationRowState extends State<RadioStationRow> with AutomaticKeepAliveClientMixin {
+  List<MediaItem> _radioStations = [];
+  bool _isLoading = true;
+  bool _hasLoaded = false;
+
+  static final _logger = DebugLogger();
+
+  @override
+  bool get wantKeepAlive => true;
+
+  @override
+  void initState() {
+    super.initState();
+    // Get cached data synchronously BEFORE first build (no spinner flash)
+    final cached = widget.getCachedRadioStations?.call();
+    if (cached != null && cached.isNotEmpty) {
+      _radioStations = cached;
+      _isLoading = false;
+    }
+    _loadRadioStations();
+  }
+
+  Future<void> _loadRadioStations() async {
+    if (_hasLoaded) return;
+    _hasLoaded = true;
+
+    // Load fresh data
+    try {
+      final freshStations = await widget.loadRadioStations();
+      if (mounted && freshStations.isNotEmpty) {
+        setState(() {
+          _radioStations = freshStations;
+          _isLoading = false;
+        });
+        // Pre-cache images for smooth hero animations
+        _precacheRadioImages(freshStations);
+      }
+    } catch (e) {
+      // Silent failure - keep showing cached data
+    }
+
+    if (mounted && _isLoading) {
+      setState(() => _isLoading = false);
+    }
+  }
+
+  void _precacheRadioImages(List<MediaItem> stations) {
+    if (!mounted) return;
+    final maProvider = context.read<MusicAssistantProvider>();
+
+    final stationsToCache = stations.take(10);
+
+    for (final station in stationsToCache) {
+      final imageUrl = maProvider.api?.getImageUrl(station, size: 256);
+      if (imageUrl != null) {
+        precacheImage(
+          CachedNetworkImageProvider(imageUrl),
+          context,
+        ).catchError((_) => false);
+      }
+    }
+  }
+
+  Widget _buildContent(double contentHeight, ColorScheme colorScheme) {
+    // Only show loading if we have no data at all
+    if (_radioStations.isEmpty && _isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    if (_radioStations.isEmpty) {
+      return Center(
+        child: Text(
+          'No radio stations found',
+          style: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
+        ),
+      );
+    }
+
+    // Card layout: circle image + name below (same as ArtistRow)
+    // Text area: 8px gap + ~36px for 2-line name = ~44px
+    const textAreaHeight = 44.0;
+    final imageSize = contentHeight - textAreaHeight;
+    final cardWidth = imageSize; // Card width = image width (circle)
+    final itemExtent = cardWidth + 16; // width + horizontal margins
+
+    return ScrollConfiguration(
+      behavior: const _StretchScrollBehavior(),
+      child: ListView.builder(
+        scrollDirection: Axis.horizontal,
+        padding: const EdgeInsets.symmetric(horizontal: 12.0),
+        itemCount: _radioStations.length,
+        itemExtent: itemExtent,
+        cacheExtent: 500, // Preload ~3 items ahead for smoother scrolling
+        addAutomaticKeepAlives: false, // Row already uses AutomaticKeepAliveClientMixin
+        addRepaintBoundaries: false, // Cards already have RepaintBoundary
+        itemBuilder: (context, index) {
+          final station = _radioStations[index];
+          return Container(
+            key: ValueKey(station.uri ?? station.itemId),
+            width: cardWidth,
+            margin: const EdgeInsets.symmetric(horizontal: 8.0),
+            child: RadioStationCard(
+              radioStation: station,
+              heroTagSuffix: widget.heroTagSuffix,
+              imageCacheSize: 256,
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    _logger.startBuild('RadioStationRow:${widget.title}');
+    super.build(context); // Required for AutomaticKeepAliveClientMixin
+    final textTheme = Theme.of(context).textTheme;
+    final colorScheme = Theme.of(context).colorScheme;
+
+    // Total row height includes title + content (same as ArtistRow)
+    final totalHeight = widget.rowHeight ?? 207.0; // Default: 44 title + 163 content
+    const titleHeight = 44.0; // 12 top padding + ~24 text + 8 bottom padding
+    final contentHeight = totalHeight - titleHeight;
+
+    final result = RepaintBoundary(
+      child: SizedBox(
+        height: totalHeight,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Padding(
+              padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
+              child: Text(
+                widget.title,
+                style: textTheme.titleLarge?.copyWith(
+                  fontWeight: FontWeight.bold,
+                  color: colorScheme.onBackground,
+                ),
+              ),
+            ),
+            Expanded(
+              child: _buildContent(contentHeight, colorScheme),
+            ),
+          ],
+        ),
+      ),
+    );
+    _logger.endBuild('RadioStationRow:${widget.title}');
+    return result;
+  }
+}
+
+/// Custom scroll behavior that uses Android 12+ stretch overscroll effect
+class _StretchScrollBehavior extends ScrollBehavior {
+  const _StretchScrollBehavior();
+
+  @override
+  Widget buildOverscrollIndicator(
+      BuildContext context, Widget child, ScrollableDetails details) {
+    return StretchingOverscrollIndicator(
+      axisDirection: details.direction,
+      child: child,
+    );
+  }
+}

lib/widgets/series_row.dart

@@ -12,12 +12,15 @@ class SeriesRow extends StatefulWidget {
   final String title;
   final Future<List<AudiobookSeries>> Function() loadSeries;
   final double? rowHeight;
+  /// Optional: synchronous getter for cached data (for instant display)
+  final List<AudiobookSeries>? Function()? getCachedSeries;
 
   const SeriesRow({
     super.key,
     required this.title,
     required this.loadSeries,
     this.rowHeight,
+    this.getCachedSeries,
   });
 
   @override
@@ -25,8 +28,8 @@ class SeriesRow extends StatefulWidget {
 }
 
 class _SeriesRowState extends State<SeriesRow> with AutomaticKeepAliveClientMixin {
-  late Future<List<AudiobookSeries>> _seriesFuture;
-  List<AudiobookSeries>? _cachedSeries;
+  List<AudiobookSeries> _series = [];
+  bool _isLoading = true;
   bool _hasLoaded = false;
 
   // Cache for series cover images
@@ -43,16 +46,34 @@ class _SeriesRowState extends State<SeriesRow> with AutomaticKeepAliveClientMixi
   @override
   void initState() {
     super.initState();
-    _loadSeriesOnce();
+    // Get cached data synchronously BEFORE first build (no spinner flash)
+    final cached = widget.getCachedSeries?.call();
+    if (cached != null && cached.isNotEmpty) {
+      _series = cached;
+      _isLoading = false;
+    }
+    _loadSeries();
   }
 
-  void _loadSeriesOnce() {
-    if (!_hasLoaded) {
-      _seriesFuture = widget.loadSeries().then((series) {
-        _cachedSeries = series;
-        return series;
-      });
-      _hasLoaded = true;
+  Future<void> _loadSeries() async {
+    if (_hasLoaded) return;
+    _hasLoaded = true;
+
+    // Load fresh data (always update)
+    try {
+      final freshSeries = await widget.loadSeries();
+      if (mounted && freshSeries.isNotEmpty) {
+        setState(() {
+          _series = freshSeries;
+          _isLoading = false;
+        });
+      }
+    } catch (e) {
+      // Silent failure - keep showing cached data
+    }
+
+    if (mounted && _isLoading) {
+      setState(() => _isLoading = false);
     }
   }
 
@@ -78,8 +99,12 @@ class _SeriesRowState extends State<SeriesRow> with AutomaticKeepAliveClientMixi
             _seriesCovers[seriesId] = covers;
             _seriesBookCounts[seriesId] = books.length;
           });
-          // Extract colors asynchronously
-          _extractSeriesColors(seriesId, covers);
+          // Precache images for smooth hero animations
+          _precacheSeriesCovers(covers);
+          // Extract colors asynchronously (delayed to avoid jank during scroll)
+          Future.delayed(const Duration(milliseconds: 500), () {
+            if (mounted) _extractSeriesColors(seriesId, covers);
+          });
         }
       }
     } finally {
@@ -87,6 +112,17 @@ class _SeriesRowState extends State<SeriesRow> with AutomaticKeepAliveClientMixi
     }
   }
 
+  /// Precache series cover images for smooth hero animations
+  void _precacheSeriesCovers(List<String> covers) {
+    if (!mounted) return;
+    for (final url in covers) {
+      precacheImage(
+        CachedNetworkImageProvider(url),
+        context,
+      ).catchError((_) => false);
+    }
+  }
+
   /// Extract colors from series book covers for empty cell backgrounds
   Future<void> _extractSeriesColors(String seriesId, List<String> covers) async {
     if (_seriesExtractedColors.containsKey(seriesId) || covers.isEmpty) return;
@@ -127,10 +163,68 @@ class _SeriesRowState extends State<SeriesRow> with AutomaticKeepAliveClientMixi
 
   static final _logger = DebugLogger();
 
+  Widget _buildContent(double contentHeight, ColorScheme colorScheme, TextTheme textTheme, MusicAssistantProvider maProvider) {
+    // Only show loading if we have no data at all
+    if (_series.isEmpty && _isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    if (_series.isEmpty) {
+      return Center(
+        child: Text(
+          'No series found',
+          style: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
+        ),
+      );
+    }
+
+    const textAreaHeight = 44.0;
+    final artworkSize = contentHeight - textAreaHeight;
+    final cardWidth = artworkSize;
+    final itemExtent = cardWidth + 12;
+
+    return ScrollConfiguration(
+      behavior: const _StretchScrollBehavior(),
+      child: ListView.builder(
+        scrollDirection: Axis.horizontal,
+        padding: const EdgeInsets.symmetric(horizontal: 12.0),
+        itemCount: _series.length,
+        itemExtent: itemExtent,
+        cacheExtent: 500,
+        addAutomaticKeepAlives: false,
+        addRepaintBoundaries: false,
+        itemBuilder: (context, index) {
+          final s = _series[index];
+
+          // Load covers if not cached
+          if (!_seriesCovers.containsKey(s.id) && !_loadingCovers.contains(s.id)) {
+            WidgetsBinding.instance.addPostFrameCallback((_) {
+              _loadSeriesCovers(s.id, maProvider);
+            });
+          }
+
+          return Container(
+            key: ValueKey(s.id),
+            width: cardWidth,
+            margin: const EdgeInsets.symmetric(horizontal: 6.0),
+            child: _SeriesCard(
+              series: s,
+              covers: _seriesCovers[s.id],
+              cachedBookCount: _seriesBookCounts[s.id],
+              extractedColors: _seriesExtractedColors[s.id],
+              colorScheme: colorScheme,
+              textTheme: textTheme,
+            ),
+          );
+        },
+      ),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     _logger.startBuild('SeriesRow:${widget.title}');
-    super.build(context);
+    super.build(context); // Required for AutomaticKeepAliveClientMixin
     final textTheme = Theme.of(context).textTheme;
     final colorScheme = Theme.of(context).colorScheme;
     final maProvider = context.read<MusicAssistantProvider>();
@@ -156,73 +250,7 @@ class _SeriesRowState extends State<SeriesRow> with AutomaticKeepAliveClientMixi
               ),
             ),
             Expanded(
-              child: FutureBuilder<List<AudiobookSeries>>(
-                future: _seriesFuture,
-                builder: (context, snapshot) {
-                  final series = snapshot.data ?? _cachedSeries;
-
-                  if (series == null && snapshot.connectionState == ConnectionState.waiting) {
-                    return const Center(child: CircularProgressIndicator());
-                  }
-
-                  if (snapshot.hasError && series == null) {
-                    return Center(
-                      child: Text('Error: ${snapshot.error}'),
-                    );
-                  }
-
-                  if (series == null || series.isEmpty) {
-                    return Center(
-                      child: Text(
-                        'No series found',
-                        style: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
-                      ),
-                    );
-                  }
-
-                  const textAreaHeight = 44.0;
-                  final artworkSize = contentHeight - textAreaHeight;
-                  final cardWidth = artworkSize;
-                  final itemExtent = cardWidth + 12;
-
-                  return ScrollConfiguration(
-                    behavior: const _StretchScrollBehavior(),
-                    child: ListView.builder(
-                      scrollDirection: Axis.horizontal,
-                      padding: const EdgeInsets.symmetric(horizontal: 12.0),
-                      itemCount: series.length,
-                      itemExtent: itemExtent,
-                      cacheExtent: 500,
-                      addAutomaticKeepAlives: false,
-                      addRepaintBoundaries: false,
-                      itemBuilder: (context, index) {
-                        final s = series[index];
-
-                        // Load covers if not cached
-                        if (!_seriesCovers.containsKey(s.id) && !_loadingCovers.contains(s.id)) {
-                          WidgetsBinding.instance.addPostFrameCallback((_) {
-                            _loadSeriesCovers(s.id, maProvider);
-                          });
-                        }
-
-                        return Container(
-                          key: ValueKey(s.id),
-                          width: cardWidth,
-                          margin: const EdgeInsets.symmetric(horizontal: 6.0),
-                          child: _SeriesCard(
-                            series: s,
-                            covers: _seriesCovers[s.id],
-                            cachedBookCount: _seriesBookCounts[s.id],
-                            extractedColors: _seriesExtractedColors[s.id],
-                            colorScheme: colorScheme,
-                            textTheme: textTheme,
-                          ),
-                        );
-                      },
-                    ),
-                  );
-                },
-              ),
+              child: _buildContent(contentHeight, colorScheme, textTheme, maProvider),
             ),
           ],
         ),
@@ -286,49 +314,14 @@ class _SeriesCard extends StatelessWidget {
           // Use AspectRatio to guarantee square cover
           Hero(
             tag: heroTag,
-            // PERF: Use flightShuttleBuilder to avoid animating complex grid
-            // during hero flight. Show cached first cover image instead.
-            flightShuttleBuilder: (flightContext, animation, direction, fromContext, toContext) {
-              // Use first cover as simple placeholder during flight
-              final heroChild = toContext.widget as Hero;
-              return AnimatedBuilder(
-                animation: animation,
-                builder: (context, child) {
-                  return ClipRRect(
-                    borderRadius: BorderRadius.circular(8 + 4 * animation.value),
-                    child: child,
-                  );
-                },
-                child: covers != null && covers!.isNotEmpty
-                    ? CachedNetworkImage(
-                        imageUrl: covers!.first,
-                        fit: BoxFit.cover,
-                        fadeInDuration: Duration.zero,
-                        fadeOutDuration: Duration.zero,
-                        placeholder: (_, __) => Container(
-                          color: colorScheme.surfaceContainerHighest,
-                        ),
-                        errorWidget: (_, __, ___) => Container(
-                          color: colorScheme.surfaceContainerHighest,
-                        ),
-                      )
-                    : Container(
-                        color: colorScheme.surfaceContainerHighest,
-                        child: Center(
-                          child: Icon(
-                            Icons.collections_bookmark_rounded,
-                            size: 48,
-                            color: colorScheme.onSurfaceVariant.withOpacity(0.5),
-                          ),
-                        ),
-                      ),
-              );
-            },
-            child: AspectRatio(
-              aspectRatio: 1,
-              child: ClipRRect(
-                borderRadius: BorderRadius.circular(8),
-                child: _buildCoverGrid(),
+            // RepaintBoundary caches the rendered grid for smooth animation
+            child: RepaintBoundary(
+              child: AspectRatio(
+                aspectRatio: 1,
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(12), // Match detail screen
+                  child: _buildCoverGrid(),
+                ),
               ),
             ),
           ),

lib/widgets/track_row.dart

@@ -9,12 +9,15 @@ class TrackRow extends StatefulWidget {
   final String title;
   final Future<List<Track>> Function() loadTracks;
   final double? rowHeight;
+  /// Optional: synchronous getter for cached data (for instant display)
+  final List<Track>? Function()? getCachedTracks;
 
   const TrackRow({
     super.key,
     required this.title,
     required this.loadTracks,
     this.rowHeight,
+    this.getCachedTracks,
   });
 
   @override
@@ -22,8 +25,8 @@ class TrackRow extends StatefulWidget {
 }
 
 class _TrackRowState extends State<TrackRow> with AutomaticKeepAliveClientMixin {
-  late Future<List<Track>> _tracksFuture;
-  List<Track>? _cachedTracks;
+  List<Track> _tracks = [];
+  bool _isLoading = true;
   bool _hasLoaded = false;
 
   @override
@@ -32,25 +35,111 @@ class _TrackRowState extends State<TrackRow> with AutomaticKeepAliveClientMixin
   @override
   void initState() {
     super.initState();
-    _loadTracksOnce();
+    // Get cached data synchronously BEFORE first build (no spinner flash)
+    final cached = widget.getCachedTracks?.call();
+    if (cached != null && cached.isNotEmpty) {
+      _tracks = cached;
+      _isLoading = false;
+    }
+    _loadTracks();
   }
 
-  void _loadTracksOnce() {
-    if (!_hasLoaded) {
-      _tracksFuture = widget.loadTracks().then((tracks) {
-        _cachedTracks = tracks;
-        return tracks;
-      });
-      _hasLoaded = true;
+  Future<void> _loadTracks() async {
+    if (_hasLoaded) return;
+    _hasLoaded = true;
+
+    // Load fresh data (always update)
+    try {
+      final freshTracks = await widget.loadTracks();
+      if (mounted && freshTracks.isNotEmpty) {
+        setState(() {
+          _tracks = freshTracks;
+          _isLoading = false;
+        });
+        // Pre-cache images for smooth scrolling
+        _precacheTrackImages(freshTracks);
+      }
+    } catch (e) {
+      // Silent failure - keep showing cached data
+    }
+
+    if (mounted && _isLoading) {
+      setState(() => _isLoading = false);
+    }
+  }
+
+  void _precacheTrackImages(List<Track> tracks) {
+    if (!mounted) return;
+    final maProvider = context.read<MusicAssistantProvider>();
+
+    final tracksToCache = tracks.take(10);
+
+    for (final track in tracksToCache) {
+      final imageUrl = maProvider.api?.getImageUrl(track, size: 256);
+      if (imageUrl != null) {
+        precacheImage(
+          CachedNetworkImageProvider(imageUrl),
+          context,
+        ).catchError((_) => false);
+      }
     }
   }
 
   static final _logger = DebugLogger();
 
+  Widget _buildContent(double contentHeight, ColorScheme colorScheme) {
+    // Only show loading if we have no data at all
+    if (_tracks.isEmpty && _isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    if (_tracks.isEmpty) {
+      return Center(
+        child: Text(
+          'No tracks found',
+          style: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
+        ),
+      );
+    }
+
+    // Card layout: square artwork + text below
+    // Text area: 8px gap + ~18px title + ~18px artist = ~44px
+    const textAreaHeight = 44.0;
+    final artworkSize = contentHeight - textAreaHeight;
+    final cardWidth = artworkSize; // Card width = artwork width (square)
+    final itemExtent = cardWidth + 12;
+
+    return ScrollConfiguration(
+      behavior: const _StretchScrollBehavior(),
+      child: ListView.builder(
+        scrollDirection: Axis.horizontal,
+        padding: const EdgeInsets.symmetric(horizontal: 12.0),
+        itemCount: _tracks.length,
+        itemExtent: itemExtent,
+        cacheExtent: 500, // Preload ~3 items ahead for smoother scrolling
+        addAutomaticKeepAlives: false, // Row already uses AutomaticKeepAliveClientMixin
+        addRepaintBoundaries: false, // Cards already have RepaintBoundary
+        itemBuilder: (context, index) {
+          final track = _tracks[index];
+          return Container(
+            key: ValueKey(track.uri ?? track.itemId),
+            width: cardWidth,
+            margin: const EdgeInsets.symmetric(horizontal: 6.0),
+            child: _TrackCard(
+              track: track,
+              tracks: _tracks,
+              index: index,
+            ),
+          );
+        },
+      ),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     _logger.startBuild('TrackRow:${widget.title}');
-    super.build(context);
+    super.build(context); // Required for AutomaticKeepAliveClientMixin
     final textTheme = Theme.of(context).textTheme;
     final colorScheme = Theme.of(context).colorScheme;
 
@@ -76,64 +165,7 @@ class _TrackRowState extends State<TrackRow> with AutomaticKeepAliveClientMixin
             ),
           ),
           Expanded(
-            child: FutureBuilder<List<Track>>(
-              future: _tracksFuture,
-              builder: (context, snapshot) {
-                final tracks = snapshot.data ?? _cachedTracks;
-
-                if (tracks == null && snapshot.connectionState == ConnectionState.waiting) {
-                  return const Center(child: CircularProgressIndicator());
-                }
-
-                if (snapshot.hasError && tracks == null) {
-                  return Center(
-                    child: Text('Error: ${snapshot.error}'),
-                  );
-                }
-
-                if (tracks == null || tracks.isEmpty) {
-                  return Center(
-                    child: Text(
-                      'No tracks found',
-                      style: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
-                    ),
-                  );
-                }
-
-                // Card layout: square artwork + text below
-                // Text area: 8px gap + ~18px title + ~18px artist = ~44px
-                const textAreaHeight = 44.0;
-                final artworkSize = contentHeight - textAreaHeight;
-                final cardWidth = artworkSize; // Card width = artwork width (square)
-                final itemExtent = cardWidth + 12;
-
-                return ScrollConfiguration(
-                  behavior: const _StretchScrollBehavior(),
-                  child: ListView.builder(
-                    scrollDirection: Axis.horizontal,
-                    padding: const EdgeInsets.symmetric(horizontal: 12.0),
-                    itemCount: tracks.length,
-                    itemExtent: itemExtent,
-                    cacheExtent: 500, // Preload ~3 items ahead for smoother scrolling
-                    addAutomaticKeepAlives: false, // Row already uses AutomaticKeepAliveClientMixin
-                    addRepaintBoundaries: false, // Cards already have RepaintBoundary
-                    itemBuilder: (context, index) {
-                      final track = tracks[index];
-                      return Container(
-                        key: ValueKey(track.uri ?? track.itemId),
-                        width: cardWidth,
-                        margin: const EdgeInsets.symmetric(horizontal: 6.0),
-                        child: _TrackCard(
-                          track: track,
-                          tracks: tracks,
-                          index: index,
-                        ),
-                      );
-                    },
-                  ),
-                );
-              },
-            ),
+            child: _buildContent(contentHeight, colorScheme),
           ),
           ],
         ),

lib/widgets/volume_control.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
 import 'package:flutter_volume_controller/flutter_volume_controller.dart';
 import '../providers/music_assistant_provider.dart';
@@ -11,8 +12,9 @@ import '../services/settings_service.dart';
 /// For MA players: controls player volume via API
 class VolumeControl extends StatefulWidget {
   final bool compact;
+  final Color? accentColor;
 
-  const VolumeControl({super.key, this.compact = false});
+  const VolumeControl({super.key, this.compact = false, this.accentColor});
 
   @override
   State<VolumeControl> createState() => _VolumeControlState();
@@ -25,11 +27,34 @@ class _VolumeControlState extends State<VolumeControl> {
   StreamSubscription? _volumeListener;
   String? _localPlayerId;
   bool _isLocalPlayer = false;
+  bool _isDragging = false;
+
+  // Live volume update state
+  int _lastVolumeUpdateTime = 0;
+  static const int _volumeThrottleMs = 150;
+  static const int _precisionThrottleMs = 50;
+
+  // Precision mode state
+  bool _inPrecisionMode = false;
+  Timer? _precisionTimer;
+  Offset? _lastDragPosition;
+  double _lastLocalX = 0.0;
+  bool _precisionModeEnabled = true;
+  double _precisionZoomCenter = 0.0;
+  double _precisionStartX = 0.0;
+  static const int _precisionTriggerMs = 800;
+  static const double _precisionStillnessThreshold = 5.0;
+  static const double _precisionSensitivity = 0.1; // 10% range in precision mode
+
+  // Button tap indicator state
+  bool _showButtonIndicator = false;
+  Timer? _buttonIndicatorTimer;
 
   @override
   void initState() {
     super.initState();
     _initLocalPlayer();
+    _loadSettings();
   }
 
   Future<void> _initLocalPlayer() async {
@@ -43,7 +68,7 @@ class _VolumeControlState extends State<VolumeControl> {
     }
 
     _volumeListener = FlutterVolumeController.addListener((volume) {
-      if (mounted && _isLocalPlayer) {
+      if (mounted && _isLocalPlayer && !_isDragging) {
         setState(() {
           _systemVolume = volume;
         });
@@ -51,12 +76,99 @@ class _VolumeControlState extends State<VolumeControl> {
     });
   }
 
+  Future<void> _loadSettings() async {
+    final precisionEnabled = await SettingsService.getVolumePrecisionMode();
+    if (mounted) {
+      setState(() {
+        _precisionModeEnabled = precisionEnabled;
+      });
+    }
+  }
+
+  void _enterPrecisionMode() {
+    if (_inPrecisionMode) return;
+    HapticFeedback.mediumImpact();
+    setState(() {
+      _inPrecisionMode = true;
+      _precisionZoomCenter = _pendingVolume ?? 0.5;
+      _precisionStartX = _lastLocalX;
+    });
+  }
+
+  void _exitPrecisionMode() {
+    _precisionTimer?.cancel();
+    _precisionTimer = null;
+    if (_inPrecisionMode) {
+      setState(() {
+        _inPrecisionMode = false;
+      });
+    }
+  }
+
   @override
   void dispose() {
     _volumeListener?.cancel();
+    _precisionTimer?.cancel();
+    _buttonIndicatorTimer?.cancel();
     super.dispose();
   }
 
+  Future<void> _adjustVolume(MusicAssistantProvider maProvider, String playerId, double currentVolume, int delta) async {
+    final newVolume = ((currentVolume * 100).round() + delta).clamp(0, 100);
+
+    // Show indicator briefly on button tap
+    _buttonIndicatorTimer?.cancel();
+    setState(() {
+      _showButtonIndicator = true;
+      _pendingVolume = newVolume / 100.0;
+    });
+    _buttonIndicatorTimer = Timer(const Duration(milliseconds: 800), () {
+      if (mounted) {
+        setState(() {
+          _showButtonIndicator = false;
+          _pendingVolume = null;
+        });
+      }
+    });
+
+    if (_isLocalPlayer) {
+      _logger.log('Volume: Setting system volume to $newVolume%');
+      try {
+        await FlutterVolumeController.setVolume(newVolume / 100.0);
+        if (mounted) {
+          setState(() {
+            _systemVolume = newVolume / 100.0;
+          });
+        }
+      } catch (e) {
+        _logger.log('Volume: Error setting system volume - $e');
+      }
+    } else {
+      _logger.log('Volume: Setting to $newVolume%');
+      try {
+        await maProvider.setVolume(playerId, newVolume);
+      } catch (e) {
+        _logger.log('Volume: Error - $e');
+      }
+    }
+  }
+
+  void _sendVolumeUpdate(MusicAssistantProvider maProvider, String playerId, double volume) {
+    final now = DateTime.now().millisecondsSinceEpoch;
+    final throttleMs = _inPrecisionMode ? _precisionThrottleMs : _volumeThrottleMs;
+
+    if (now - _lastVolumeUpdateTime >= throttleMs) {
+      _lastVolumeUpdateTime = now;
+      final volumeLevel = (volume * 100).round();
+
+      if (_isLocalPlayer) {
+        FlutterVolumeController.setVolume(volume);
+      } else {
+        maProvider.setVolume(playerId, volumeLevel);
+      }
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     final maProvider = context.watch<MusicAssistantProvider>();
@@ -68,118 +180,262 @@ class _VolumeControlState extends State<VolumeControl> {
 
     _isLocalPlayer = _localPlayerId != null && player.playerId == _localPlayerId;
 
-    final currentVolume = _isLocalPlayer
-        ? (_pendingVolume ?? (_systemVolume ?? 0.5))
-        : (_pendingVolume ?? player.volume.toDouble()) / 100.0;
-    final isMuted = _isLocalPlayer ? false : player.isMuted;
+    // Use pending volume during drag or button tap to prevent stale state issues
+    final currentVolume = (_isDragging || _showButtonIndicator)
+        ? (_pendingVolume ?? (_isLocalPlayer ? (_systemVolume ?? 0.5) : player.volume.toDouble() / 100.0))
+        : _isLocalPlayer
+            ? (_systemVolume ?? 0.5)
+            : player.volume.toDouble() / 100.0;
+
+    // Use accent color if provided, otherwise fall back to theme primary
+    final accentColor = widget.accentColor ?? Theme.of(context).colorScheme.primary;
 
     if (widget.compact) {
       return IconButton(
         icon: Icon(
-          isMuted ? Icons.volume_off : Icons.volume_up,
+          currentVolume < 0.01
+              ? Icons.volume_off
+              : currentVolume < 0.3
+                  ? Icons.volume_down
+                  : Icons.volume_up,
           color: Colors.white70,
         ),
         onPressed: () async {
-          try {
-            await maProvider.setMute(player.playerId, !isMuted);
-          } catch (e) {
-            // Error already logged by provider
-          }
+          // In compact mode, toggle between 0 and 50%
+          final newVolume = currentVolume < 0.01 ? 50 : 0;
+          await _adjustVolume(maProvider, player.playerId, newVolume / 100.0, 0);
         },
       );
     }
 
     return Row(
       children: [
+        // Volume decrease button
         IconButton(
-          icon: Icon(
-            isMuted
-                ? Icons.volume_off
-                : currentVolume < 0.3
-                    ? Icons.volume_down
-                    : Icons.volume_up,
+          icon: const Icon(
+            Icons.volume_down,
             color: Colors.white70,
           ),
-          onPressed: () async {
-            try {
-              await maProvider.setMute(player.playerId, !isMuted);
-            } catch (e) {
-              // Error already logged by provider
-            }
-          },
+          onPressed: () => _adjustVolume(maProvider, player.playerId, currentVolume, -1),
         ),
+        // Slider with floating teardrop indicator
         Expanded(
           child: SizedBox(
-            height: 48, // Increase touch target height
-            child: SliderTheme(
-              data: SliderThemeData(
-                trackHeight: 2,
-                thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 6),
-                overlayShape: const RoundSliderOverlayShape(overlayRadius: 20),
-                activeTrackColor: Colors.white,
-                inactiveTrackColor: Colors.white.withOpacity(0.3),
-                thumbColor: Colors.white,
-                overlayColor: Colors.white.withOpacity(0.2),
-              ),
-              child: Slider(
-              value: currentVolume.clamp(0.0, 1.0),
-              onChanged: (value) {
-                setState(() {
-                  _pendingVolume = _isLocalPlayer ? value : value * 100;
-                });
+            height: 48,
+            child: LayoutBuilder(
+              builder: (context, constraints) {
+                final sliderWidth = constraints.maxWidth;
+                // Calculate thumb position to match Flutter Slider's internal positioning
+                // The Slider uses overlayRadius as padding on each side for the track
+                const overlayRadius = 20.0; // Must match SliderThemeData overlayShape
+                final thumbPosition = overlayRadius +
+                    (currentVolume.clamp(0.0, 1.0) * (sliderWidth - 2 * overlayRadius));
+
+                return Stack(
+                  clipBehavior: Clip.none,
+                  children: [
+                    // The slider with gesture detection for precision mode
+                    GestureDetector(
+                      onHorizontalDragStart: (details) {
+                        setState(() {
+                          _isDragging = true;
+                          _pendingVolume = currentVolume;
+                          _lastDragPosition = details.globalPosition;
+                          _lastLocalX = details.localPosition.dx;
+                        });
+                      },
+                      onHorizontalDragUpdate: (details) {
+                        if (!_isDragging) return;
+
+                        final currentPosition = details.globalPosition;
+
+                        // Check for stillness to trigger precision mode
+                        if (_precisionModeEnabled && _lastDragPosition != null) {
+                          final movement = (currentPosition - _lastDragPosition!).distance;
+
+                          if (movement < _precisionStillnessThreshold) {
+                            // Finger is still - start precision timer
+                            if (_precisionTimer == null && !_inPrecisionMode) {
+                              _precisionTimer = Timer(
+                                Duration(milliseconds: _precisionTriggerMs),
+                                _enterPrecisionMode,
+                              );
+                            }
+                          } else {
+                            // Finger moved - cancel timer
+                            _precisionTimer?.cancel();
+                            _precisionTimer = null;
+                          }
+                        }
+                        _lastDragPosition = currentPosition;
+                        _lastLocalX = details.localPosition.dx;
+
+                        double newVolume;
+
+                        if (_inPrecisionMode) {
+                          // PRECISION MODE: Movement from entry point maps to zoomed range
+                          final offsetX = details.localPosition.dx - _precisionStartX;
+                          final normalizedOffset = offsetX / sliderWidth;
+                          final volumeChange = normalizedOffset * _precisionSensitivity;
+                          newVolume = (_precisionZoomCenter + volumeChange).clamp(0.0, 1.0);
+                        } else {
+                          // NORMAL MODE: Position-based (like standard slider)
+                          newVolume = (details.localPosition.dx / sliderWidth).clamp(0.0, 1.0);
+                        }
+
+                        if ((newVolume - (_pendingVolume ?? 0)).abs() > 0.001) {
+                          setState(() {
+                            _pendingVolume = newVolume;
+                          });
+                          _sendVolumeUpdate(maProvider, player.playerId, newVolume);
+                        }
+                      },
+                      onHorizontalDragEnd: (details) {
+                        if (!_isDragging) return;
+
+                        // Send final volume
+                        final finalVolume = _pendingVolume ?? currentVolume;
+                        final volumeLevel = (finalVolume * 100).round();
+
+                        if (_isLocalPlayer) {
+                          FlutterVolumeController.setVolume(finalVolume);
+                          _systemVolume = finalVolume;
+                        } else {
+                          maProvider.setVolume(player.playerId, volumeLevel);
+                        }
+
+                        _exitPrecisionMode();
+                        _lastDragPosition = null;
+                        setState(() {
+                          _isDragging = false;
+                          _pendingVolume = null;
+                        });
+                      },
+                      child: SliderTheme(
+                        data: SliderThemeData(
+                          trackHeight: 2,
+                          thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 6),
+                          overlayShape: const RoundSliderOverlayShape(overlayRadius: 20),
+                          activeTrackColor: _inPrecisionMode ? accentColor : Colors.white,
+                          inactiveTrackColor: Colors.white.withOpacity(0.3),
+                          thumbColor: _inPrecisionMode ? accentColor : Colors.white,
+                          overlayColor: (_inPrecisionMode ? accentColor : Colors.white).withOpacity(0.2),
+                        ),
+                        child: AbsorbPointer(
+                          // AbsorbPointer prevents Slider from handling gestures
+                          // Our GestureDetector handles everything for live updates
+                          child: Slider(
+                            value: currentVolume.clamp(0.0, 1.0),
+                            onChanged: (_) {},
+                          ),
+                        ),
+                      ),
+                    ),
+                    // Floating teardrop indicator (visible when dragging or button tap)
+                    if (_isDragging || _showButtonIndicator)
+                      Positioned(
+                        left: thumbPosition - 16,
+                        top: -28,
+                        child: CustomPaint(
+                          size: const Size(32, 32),
+                          painter: _TeardropPainter(
+                            color: _inPrecisionMode ? accentColor : Colors.white,
+                            volume: (currentVolume * 100).round(),
+                          ),
+                        ),
+                      ),
+                  ],
+                );
               },
-              onChangeEnd: (value) async {
-                if (_isLocalPlayer) {
-                  _logger.log('Volume: Setting system volume to ${(value * 100).round()}%');
-                  try {
-                    await FlutterVolumeController.setVolume(value);
-                    _systemVolume = value;
-                  } catch (e) {
-                    _logger.log('Volume: Error setting system volume - $e');
-                  } finally {
-                    if (mounted) {
-                      setState(() {
-                        _pendingVolume = null;
-                      });
-                    }
-                  }
-                } else {
-                  final volumeLevel = (value * 100).round();
-                  _logger.log('Volume: Setting to $volumeLevel%');
-                  try {
-                    if (isMuted) {
-                      _logger.log('Volume: Unmuting player first');
-                      await maProvider.setMute(player.playerId, false);
-                    }
-                    await maProvider.setVolume(player.playerId, volumeLevel);
-                    _logger.log('Volume: Set to $volumeLevel%');
-                  } catch (e) {
-                    _logger.log('Volume: Error - $e');
-                  } finally {
-                    if (mounted) {
-                      setState(() {
-                        _pendingVolume = null;
-                      });
-                    }
-                  }
-                }
-              },
-            ),
             ),
           ),
         ),
-        SizedBox(
-          width: 40,
-          child: Text(
-            '${(currentVolume * 100).round()}%',
-            style: TextStyle(
-              color: Colors.grey[400],
-              fontSize: 12,
-            ),
-            textAlign: TextAlign.center,
+        // Volume increase button
+        IconButton(
+          icon: const Icon(
+            Icons.volume_up,
+            color: Colors.white70,
           ),
+          onPressed: () => _adjustVolume(maProvider, player.playerId, currentVolume, 1),
         ),
       ],
     );
   }
 }
+
+/// Custom painter for upside-down teardrop volume indicator
+class _TeardropPainter extends CustomPainter {
+  final Color color;
+  final int volume;
+
+  _TeardropPainter({required this.color, required this.volume});
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final paint = Paint()
+      ..color = color
+      ..style = PaintingStyle.fill;
+
+    final center = Offset(size.width / 2, size.height / 2);
+    final radius = size.width / 2 - 2;
+
+    // Draw upside-down teardrop shape
+    final path = Path();
+
+    // Start at bottom point (the tip pointing down toward slider)
+    path.moveTo(center.dx, size.height - 2);
+
+    // Curve up to the left side of the circle
+    path.quadraticBezierTo(
+      center.dx - radius * 0.8,
+      center.dy + radius * 0.3,
+      center.dx - radius,
+      center.dy - radius * 0.2,
+    );
+
+    // Arc around the top (the bulb)
+    path.arcToPoint(
+      Offset(center.dx + radius, center.dy - radius * 0.2),
+      radius: Radius.circular(radius),
+      clockwise: true,
+    );
+
+    // Curve down to the bottom point
+    path.quadraticBezierTo(
+      center.dx + radius * 0.8,
+      center.dy + radius * 0.3,
+      center.dx,
+      size.height - 2,
+    );
+
+    path.close();
+    canvas.drawPath(path, paint);
+
+    // Draw the volume number (no % symbol)
+    final textColor = color.computeLuminance() > 0.5 ? Colors.black87 : Colors.white;
+    final textPainter = TextPainter(
+      text: TextSpan(
+        text: '$volume',
+        style: TextStyle(
+          color: textColor,
+          fontSize: 11,
+          fontWeight: FontWeight.w600,
+        ),
+      ),
+      textDirection: TextDirection.ltr,
+    );
+    textPainter.layout();
+
+    // Position text in the center of the bulb (slightly above center)
+    final textOffset = Offset(
+      center.dx - textPainter.width / 2,
+      center.dy - radius * 0.4 - textPainter.height / 2,
+    );
+    textPainter.paint(canvas, textOffset);
+  }
+
+  @override
+  bool shouldRepaint(covariant _TeardropPainter oldDelegate) {
+    return oldDelegate.color != color || oldDelegate.volume != volume;
+  }
+}

pubspec.yaml

@@ -1,7 +1,7 @@
 name: ensemble
 description: A minimalistic Music Assistant client built with Flutter
 publish_to: 'none'
-version: 2.8.4-beta+42
+version: 2.8.7-beta+45
 
 environment:
   sdk: '>=3.0.0 <4.0.0'