Fix black screen bug when Material You theme enabled (#37 )

Override Material You ColorScheme backgrounds with app's preferred colors. Material You generates unpredictable background values that could cause black screen or inconsistent navigation bar colors. - Force dark background to 0xFF1a1a1a - Force dark surface to 0xFF2a2a2a - Force light background to 0xFFFAFAFA Bump version to 2.8.3-beta+40 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Bump version to 2.8.2-beta+39
2026-01-05 15:27:46 +00:00 · 2026-01-05 14:18:41 +00:00 · 2026-01-05 14:03:17 +00:00 · 2026-01-05 13:15:07 +00:00 · 2026-01-05 13:09:57 +00:00 · 2026-01-05 12:39:53 +00:00
79 changed files with 19049 additions and 2759 deletions
@@ -41,6 +41,9 @@ jobs:
      - name: Generate code (Drift database)
        run: dart run build_runner build --delete-conflicting-outputs

+      - name: Generate localizations
+        run: flutter gen-l10n
+
      - name: Generate launcher icons
        run: flutter pub run flutter_launcher_icons

@@ -0,0 +1,391 @@
+# Ensemble Codebase Intensive Audit Prompt
+
+## Overview
+
+You are tasked with conducting an intensive, comprehensive audit of the **Ensemble** Flutter application - a Music Assistant client for Android with multi-device synchronization, local playback, and Sendspin raw audio streaming capabilities.
+
+**Codebase Statistics:**
+- 90 Dart files, ~40,583 lines of code
+- 18 screens, 27 services, 6 providers
+- Architecture: Provider pattern with ChangeNotifier
+- Audio: just_audio + flutter_pcm_sound + audio_service
+- Networking: WebSocket (JSON-RPC) + HTTP + Sendspin binary protocol
+
+---
+
+## Audit Scope
+
+Perform a thorough audit covering ALL of the following areas. For each issue found, provide:
+1. **File path and line number(s)**
+2. **Severity**: CRITICAL / HIGH / MEDIUM / LOW
+3. **Description** of the issue
+4. **Impact** if left unfixed
+5. **Recommended fix** with code example where applicable
+
+---
+
+## SECTION 1: SECURITY AUDIT
+
+### 1.1 Credential Storage (CRITICAL PRIORITY)
+Audit `/lib/services/settings_service.dart` for:
+- [ ] Plaintext password storage in SharedPreferences (lines 209-222)
+- [ ] Auth tokens stored without encryption
+- [ ] Serialized credentials in JSON format (lines 169-190)
+
+**Expected Finding:** Credentials stored insecurely. Recommend flutter_secure_storage.
+
+### 1.2 Certificate Validation
+Audit `/lib/services/auth/auth_manager.dart` for:
+- [ ] HTTPS redirect handling for local IPs
+- [ ] Certificate validation disabled scenarios
+- [ ] MITM vulnerability exposure
+
+### 1.3 Authentication Strategies
+Audit all files in `/lib/services/auth/`:
+- [ ] `basic_auth_strategy.dart` - Base64 encoding (not encryption)
+- [ ] `authelia_strategy.dart` - Session cookie handling, timing attack (line 159)
+- [ ] `ma_auth_strategy.dart` - Token refresh mechanism
+- [ ] `no_auth_strategy.dart` - Public server exposure
+
+### 1.4 Input Validation
+Audit `/lib/services/music_assistant_api.dart`:
+- [ ] URI construction without validation (lines 1346-1360)
+- [ ] Provider/itemId injection risks
+- [ ] WebSocket message validation
+
+### 1.5 Information Disclosure
+- [ ] Debug logs exposing sensitive data (check all `_logger.log()` calls)
+- [ ] Server version exposure via `server_info`
+- [ ] Error messages leaking technical details
+
+---
+
+## SECTION 2: MEMORY MANAGEMENT AUDIT
+
+### 2.1 Static Memory Leaks
+Audit `/lib/models/player.dart`:
+- [ ] `_playerCreationTimes` static map (lines 96-144) - grows unbounded
+- [ ] Cleanup only removes 50 of 100+ entries
+
+### 2.2 Unbounded Caches
+Audit `/lib/services/cache_service.dart`:
+- [ ] `_albumTracksCache` - no size limit
+- [ ] `_artistAlbumsCache` - no TTL expiration
+- [ ] `_searchCache` - never evicted
+- [ ] `_playerTrackCache` - only cleared on disconnect
+
+### 2.3 Stream/Timer Cleanup
+Audit `/lib/providers/music_assistant_provider.dart`:
+- [ ] `_playerStateTimer` disposal (line 4435-4445)
+- [ ] `_notificationPositionTimer` multiple creation paths (lines 2925-2940)
+- [ ] `_localPlayerEventSubscription` cleanup
+- [ ] `_playerUpdatedEventSubscription` cleanup
+- [ ] `_playerAddedEventSubscription` cleanup
+
+Audit `/lib/services/hardware_volume_service.dart`:
+- [ ] `_volumeUpController` never closed (lines 74-85)
+- [ ] `_volumeDownController` never closed
+
+### 2.4 Stream Subscription Leaks
+Audit `/lib/providers/music_assistant_provider.dart`:
+- [ ] `_api!.connectionState.listen()` - subscription not stored
+- [ ] Old subscriptions not cancelled before new API instance
+
+---
+
+## SECTION 3: RACE CONDITION AUDIT
+
+### 3.1 Player State Dual Updates
+Audit `/lib/providers/music_assistant_provider.dart`:
+- [ ] Timer polling (every 5s) vs WebSocket events racing
+- [ ] `_updatePlayerState()` called from both paths
+- [ ] No mutex/lock protection
+
+### 3.2 Async Method Reentrancy
+Audit `selectPlayer()` method:
+- [ ] `async` method without guard against concurrent calls
+- [ ] `_selectedPlayer` modified before and after `await`
+- [ ] State could change during await
+
+### 3.3 Fire-and-Forget Operations
+Search for `unawaited(` and `() async {` patterns:
+- [ ] `_persistPlaybackState()` - database save not awaited
+- [ ] Pause operations fire-and-forget (lines 3876-3894)
+- [ ] Preload operations (line 2707)
+
+### 3.4 PCM Player State Machine
+Audit `/lib/services/pcm_audio_player.dart`:
+- [ ] 9-state machine with complex transitions (lines 32-37)
+- [ ] Auto-recovery race condition (lines 215-229)
+- [ ] Feed loop during pause transition (lines 174-179)
+
+---
+
+## SECTION 4: ERROR HANDLING AUDIT
+
+### 4.1 Silent Exception Handlers (CRITICAL)
+Find all instances of:
+```dart
+} catch (e) {}
+} catch (_) {}
+```
+
+Known locations:
+- [ ] `music_assistant_provider.dart` (multiple)
+- [ ] `player_provider.dart` (3 instances)
+- [ ] `recently_played_service.dart`
+
+### 4.2 Missing Error Recovery
+- [ ] No exponential backoff on connection retry
+- [ ] No retry logic for failed API calls
+- [ ] WebSocket timeout handling (30 seconds - too long?)
+
+### 4.3 Null Safety Violations
+Find all `!` (null assertion) operators:
+- [ ] `search_screen.dart` (20+ instances)
+- [ ] `models/media_item.dart`
+- [ ] `models/player.dart`
+- [ ] `item.mediaItem! as Artist` patterns
+
+---
+
+## SECTION 5: ARCHITECTURAL ISSUES
+
+### 5.1 God Class
+Audit `/lib/providers/music_assistant_provider.dart`:
+- [ ] 4,469 lines - violates Single Responsibility
+- [ ] 386 conditional branches
+- [ ] Mixing: connection, players, library, sync, audio, position tracking
+
+**Recommend splitting into:**
+- ConnectionProvider (~500 LOC)
+- PlayerManager (~800 LOC)
+- LibraryProvider (~1000 LOC)
+- LocalPlaybackManager (~600 LOC)
+
+### 5.2 Oversized Widget Files
+- [ ] `expandable_player.dart` - 2,485 lines (should be <500)
+- [ ] `global_player_overlay.dart` - 737 lines
+- [ ] `new_library_screen.dart` - 2,521 lines
+
+### 5.3 Global Key Anti-Pattern
+Audit `/lib/widgets/global_player_overlay.dart`:
+- [ ] `globalPlayerKey` for state access
+- [ ] `_overlayStateKey` for overlay state
+- [ ] Should use Provider/context instead
+
+### 5.4 Primitive Obsession
+- [ ] View modes as strings ('grid2', 'grid3', 'list')
+- [ ] Media types as strings ('track', 'album', 'artist')
+- [ ] Should be strongly-typed enums
+
+---
+
+## SECTION 6: CODE QUALITY ISSUES
+
+### 6.1 Testing (CRITICAL)
+- [ ] **ZERO test files exist** - confirm this
+- [ ] No unit tests, widget tests, or integration tests
+- [ ] flutter_test dependency exists but unused
+
+### 6.2 Hardcoded Values
+Find and document all:
+- [ ] Color hex codes (50+ instances of `Color(0xFF...`)
+- [ ] Duration values not using `Timings` constants
+- [ ] Magic numbers (16, 4, 5, 100, 50)
+- [ ] String literals for media types
+
+### 6.3 Mixed Async Patterns
+- [ ] `.then()` chains alongside async/await
+- [ ] `.whenComplete()` usage
+- [ ] Consolidate to async/await
+
+### 6.4 Dead Code
+- [ ] `@Deprecated` methods still implemented
+- [ ] `animation_debugger.dart` - dev-only?
+- [ ] Unused imports
+
+### 6.5 TODO Comments
+Document all actionable TODOs:
+- [ ] `queue_screen.dart:214` - queue item removal
+- [ ] `audiobook_detail_screen.dart:261,312` - progress sync
+- [ ] `music_assistant_provider.dart:793,799` - playlist modification
+
+---
+
+## SECTION 7: UI/UX AUDIT
+
+### 7.1 Accessibility (CRITICAL)
+Audit for missing:
+- [ ] `Semantics` widgets on interactive elements
+- [ ] `Tooltip` on icon buttons
+- [ ] Screen reader support
+- [ ] Touch target sizes (minimum 48dp)
+- [ ] Color contrast validation (WCAG AA)
+
+### 7.2 Performance Issues
+Audit `/lib/widgets/expandable_player.dart`:
+- [ ] No `RepaintBoundary` wrappers
+- [ ] 55+ `setState()` calls
+- [ ] 3 AnimationControllers with multiple listeners
+- [ ] Title height cache invalidation (lines 118+)
+
+### 7.3 Double Opacity Bug
+Audit `/lib/widgets/player/player_controls.dart`:
+```dart
+color: (shuffle == true ? primaryColor : textColor.withOpacity(0.5))
+    .withOpacity(expandedElementsOpacity),
+```
+- [ ] Double `.withOpacity()` application
+
+### 7.4 Missing Features
+- [ ] No landscape orientation support
+- [ ] No tablet layout optimization
+- [ ] No loading skeleton animations
+- [ ] No haptic feedback (except one location)
+
+---
+
+## SECTION 8: AUDIO PLAYBACK AUDIT
+
+### 8.1 Position Interpolation
+Audit `/lib/services/position_tracker.dart`:
+- [ ] No timeout on anchor updates - unbounded drift possible
+- [ ] Duration interpolation can exceed track duration
+- [ ] Stale timestamp handling (>30 seconds)
+
+### 8.2 Sendspin Protocol
+Audit `/lib/services/sendspin_service.dart`:
+- [ ] Proxy auth retry without deduplication (lines 188-209)
+- [ ] WebSocket binary frame parsing
+- [ ] Clock synchronization accuracy
+
+### 8.3 Audio Resource Cleanup
+Audit `/lib/services/audio/massiv_audio_handler.dart`:
+- [ ] Audio session interrupt listeners not disposed
+- [ ] Audio focus not explicitly released
+
+### 8.4 Mixed Playback Modes
+- [ ] just_audio initialized but unused during Sendspin
+- [ ] Resource allocation for unused player
+- [ ] Potential audio focus conflicts
+
+---
+
+## SECTION 9: NETWORKING AUDIT
+
+### 9.1 WebSocket Lifecycle
+Audit `/lib/services/music_assistant_api.dart`:
+- [ ] Heartbeat interval (30s) - appropriate?
+- [ ] Reconnection logic and timing
+- [ ] Pending request cleanup on disconnect
+
+### 9.2 Caching Strategy
+- [ ] No incremental/delta sync (full library every 5 minutes)
+- [ ] Cache staleness not communicated to UI
+- [ ] No query result pagination (fetches up to 5000 items)
+
+### 9.3 Rate Limiting
+- [ ] No client-side rate limiting
+- [ ] Search requests not throttled
+- [ ] Could overload server
+
+### 9.4 Offline Support
+Audit `/lib/services/offline_action_queue.dart`:
+- [ ] Queue execution not atomic (lines 118-130)
+- [ ] Action could execute twice on crash
+- [ ] Queue stored unencrypted
+
+---
+
+## SECTION 10: DATABASE AUDIT
+
+### 10.1 Schema Review
+Audit `/lib/database/database.dart`:
+- [ ] Table indexes for query performance
+- [ ] Foreign key constraints
+- [ ] Migration strategy
+
+### 10.2 Query Patterns
+- [ ] N+1 query prevention
+- [ ] Transaction usage for atomic operations
+- [ ] Connection pooling
+
+### 10.3 Data Consistency
+- [ ] Tier 1 (DB) vs Tier 2 (API sync) race conditions
+- [ ] User modifications during background sync
+- [ ] Conflict resolution strategy
+
+---
+
+## Deliverables
+
+After completing the audit, provide:
+
+### 1. Executive Summary
+- Overall code quality score (1-10)
+- Top 5 critical issues requiring immediate attention
+- Estimated technical debt in developer-hours
+
+### 2. Issue Tracker
+Create a prioritized list of all issues found:
+| ID | Severity | Category | File:Line | Description | Effort |
+|----|----------|----------|-----------|-------------|--------|
+
+### 3. Recommended Roadmap
+Sprint-based plan to address findings:
+- Sprint 1 (Immediate): Security fixes, silent exception handlers
+- Sprint 2-3: God class decomposition, test infrastructure
+- Sprint 4-6: Memory leak fixes, accessibility
+- Long-term: Performance optimization, monitoring
+
+### 4. Code Examples
+For each CRITICAL and HIGH severity issue, provide:
+- Current problematic code
+- Recommended refactored code
+- Migration steps
+
+---
+
+## Files to Prioritize
+
+Start your audit with these critical files:
+
+1. `/lib/providers/music_assistant_provider.dart` (4,469 LOC) - God class
+2. `/lib/services/settings_service.dart` - Credential storage
+3. `/lib/services/music_assistant_api.dart` (2,929 LOC) - Networking
+4. `/lib/widgets/expandable_player.dart` (2,485 LOC) - UI complexity
+5. `/lib/services/auth/` directory - Security
+6. `/lib/models/player.dart` - Memory leaks
+7. `/lib/services/cache_service.dart` - Unbounded caches
+8. `/lib/services/position_tracker.dart` - Audio sync issues
+
+---
+
+## Known Critical Issues (Pre-Identified)
+
+These issues have been identified and MUST be verified and documented:
+
+1. **CRITICAL: Plaintext credential storage** - SharedPreferences without encryption
+2. **CRITICAL: Zero test coverage** - No unit, widget, or integration tests
+3. **CRITICAL: 4,469 line god class** - MusicAssistantProvider violates SRP
+4. **CRITICAL: Silent exception handlers** - `catch (e) {}` patterns
+5. **HIGH: Static memory leak** - `_playerCreationTimes` unbounded growth
+6. **HIGH: Race conditions** - Player state polling vs events
+7. **HIGH: No accessibility** - Missing Semantics, screen reader support
+8. **HIGH: Certificate validation disabled** - MITM vulnerability for local IPs
+9. **MEDIUM: Double opacity bug** - `.withOpacity().withOpacity()` in player controls
+10. **MEDIUM: Position tracker drift** - No timeout on anchor updates
+
+---
+
+## Audit Execution Notes
+
+- Use `Grep` tool to search for patterns across the codebase
+- Use `Read` tool to examine specific file sections
+- Document line numbers for all findings
+- Provide code snippets for context
+- Cross-reference related issues across files
+- Verify pre-identified issues exist and document their exact locations
+
+**Total estimated audit time: 4-6 hours for thorough coverage**
@@ -0,0 +1,419 @@
+# Ensemble Codebase - Comprehensive Audit Report
+
+**Audit Date:** 2026-01-01
+**Codebase:** Ensemble Flutter App (Music Assistant Client)
+**Version:** 2.7.3-beta+35
+**Total Lines of Code:** ~40,583 Dart
+**Files Analyzed:** 90 Dart files
+
+---
+
+## Executive Summary
+
+### Overall Code Quality Score: 5.5/10
+
+The Ensemble codebase demonstrates **strong architectural foundations** with a well-organized service layer, effective caching strategies, and sophisticated audio handling. However, the audit revealed **critical security vulnerabilities**, **zero test coverage**, and significant **technical debt** that must be addressed before production release.
+
+### Critical Statistics
+
+| Metric | Value | Status |
+|--------|-------|--------|
+| Test Coverage | 0% | CRITICAL |
+| God Class Size | 4,469 LOC | CRITICAL |
+| Silent Exception Handlers | 7 | CRITICAL |
+| Plaintext Credentials | 4 locations | CRITICAL |
+| Memory Leak Locations | 6 | HIGH |
+| Race Conditions | 4 | HIGH |
+| Accessibility (Semantics) | 0 widgets | CRITICAL |
+
+---
+
+## Issue Summary by Severity
+
+| Severity | Count | Categories |
+|----------|-------|------------|
+| **CRITICAL** | 12 | Security, Testing, Architecture, Accessibility |
+| **HIGH** | 18 | Memory, Race Conditions, Networking, Audio |
+| **MEDIUM** | 22 | Error Handling, UI, Caching, Code Quality |
+| **LOW** | 14 | Naming, Documentation, Minor Improvements |
+
+---
+
+## CRITICAL ISSUES (Immediate Action Required)
+
+### 1. Plaintext Credential Storage
+**File:** `/lib/services/settings_service.dart`
+**Lines:** 131-143, 147-159, 169-190, 209-222
+
+Passwords and auth tokens stored in SharedPreferences without encryption.
+
+```dart
+// VULNERABLE CODE
+static Future<void> setPassword(String? password) async {
+  final prefs = await SharedPreferences.getInstance();
+  await prefs.setString(_keyPassword, password);  // PLAINTEXT!
+}
+```
+
+**Fix:** Use `flutter_secure_storage` for all sensitive data.
+
+---
+
+### 2. Zero Test Coverage
+**Location:** Entire codebase
+
+No unit tests, widget tests, or integration tests exist. The `flutter_test` dependency is unused.
+
+**Impact:** Cannot safely refactor, high regression risk, no confidence in correctness.
+
+**Fix:** Establish test infrastructure immediately. Start with:
+- Unit tests for `MusicAssistantAPI`, `CacheService`, `ErrorHandler`
+- Widget tests for player controls
+- Integration tests for playback flows
+
+---
+
+### 3. God Class - MusicAssistantProvider
+**File:** `/lib/providers/music_assistant_provider.dart`
+**Size:** 4,469 lines, ~140 methods, 744 conditional branches
+
+Single class handles: connection, players, library, cache, audio, sync, offline queue.
+
+**Fix:** Split into:
+- `ConnectionManager` (~500 LOC)
+- `PlayerManager` (~800 LOC)
+- `LibraryCacheService` (~600 LOC)
+- `SendspinManager` (~400 LOC)
+- `MusicAssistantProvider` - Facade composing above (~800 LOC)
+
+---
+
+### 4. Zero Accessibility Support
+**Files:** `/lib/widgets/`, `/lib/screens/` (all)
+
+- **0** `Semantics` widgets
+- **0** `semanticLabel` properties
+- **1** `Tooltip` (entire app)
+- Screen readers cannot navigate the app
+
+**Fix:** Add Semantics to all interactive elements:
+```dart
+Semantics(
+  button: true,
+  label: isPlaying ? 'Pause playback' : 'Play',
+  child: IconButton(...)
+)
+```
+
+---
+
+### 5. Silent Exception Handlers
+**Locations:** 7 instances across codebase
+
+| File | Line | Code |
+|------|------|------|
+| player_provider.dart | 567, 575, 584 | `catch (e) {}` |
+| music_assistant_provider.dart | 2690 | `catch (e) {}` |
+| music_assistant_api.dart | 2542 | `catch (e) {}` |
+| recently_played_service.dart | 154, 206 | `catch (_) {}` |
+
+**Fix:** Add logging or use `firstWhereOrNull` instead of try/catch around `firstWhere`.
+
+---
+
+### 6. Audio Session Listeners Not Disposed
+**File:** `/lib/services/audio/massiv_audio_handler.dart`
+**Lines:** 45-73
+
+Stream subscriptions created but never cancelled - causes memory leaks and zombie listeners.
+
+**Fix:** Store subscriptions and cancel in dispose():
+```dart
+StreamSubscription? _interruptionSubscription;
+_interruptionSubscription = session.interruptionEventStream.listen(...);
+
+void dispose() {
+  _interruptionSubscription?.cancel();
+}
+```
+
+---
+
+## HIGH SEVERITY ISSUES
+
+### 7. Connection State Subscription Not Stored
+**File:** `/lib/providers/music_assistant_provider.dart:575-614`
+
+The `connectionState.listen()` return value is not stored - causes listener accumulation on reconnect.
+
+---
+
+### 8. Player State Race Condition
+**File:** `/lib/providers/music_assistant_provider.dart`
+
+Timer polling (every 5s) and WebSocket events can race to update `_selectedPlayer` and `_currentTrack` without mutex protection.
+
+---
+
+### 9. Async Method Reentrancy
+**File:** `/lib/providers/music_assistant_provider.dart:2713-2841`
+
+`selectPlayer()` is `void async` with no guard against concurrent calls. Multiple rapid player switches can interleave.
+
+---
+
+### 10. Unbounded Search Cache
+**File:** `/lib/services/cache_service.dart:31-32`
+
+`_searchCache` map has no size limit or proactive TTL eviction. Grows indefinitely with user searches.
+
+---
+
+### 11. Static Memory Leak
+**File:** `/lib/models/player.dart:96, 139-144`
+
+`_playerCreationTimes` static map cleanup only removes 50 of 100+ entries, allowing unbounded growth.
+
+---
+
+### 12. No Database Indexes
+**File:** `/lib/database/database.dart`
+
+No secondary indexes defined. Query performance degrades as database grows.
+
+---
+
+### 13. No Incremental Sync
+**File:** `/lib/services/sync_service.dart:150-165`
+
+Full library fetch (up to 4000 items) on every sync instead of delta updates.
+
+---
+
+### 14. Offline Queue Not Atomic
+**File:** `/lib/services/offline_action_queue.dart:80-108`
+
+Queue persistence happens after all processing - crash during processing loses successful actions.
+
+---
+
+### 15. Auth Retry Without Deduplication
+**File:** `/lib/services/sendspin_service.dart:189-209`
+
+Multiple auth messages can be sent during rapid reconnection attempts.
+
+---
+
+### 16. Pending Requests Not Completed on Disconnect
+**File:** `/lib/services/music_assistant_api.dart:2911`
+
+`_pendingRequests.clear()` abandons Completers without completing them with errors.
+
+---
+
+### 17. HTTP Fallback for Local IPs
+**File:** `/lib/services/auth/auth_manager.dart:51-58`
+
+HTTPS failures silently fall back to HTTP on local networks - MITM vulnerability.
+
+---
+
+### 18. Certificate Validation Bypassed
+**File:** `/lib/services/auth/auth_manager.dart:210-236`
+
+HTTPS redirects explicitly refused for local IPs due to expected certificate failures.
+
+---
+
+## MEDIUM SEVERITY ISSUES
+
+### 19. Double Opacity Bug
+**File:** `/lib/widgets/player/player_controls.dart:62-63, 99-100`
+
+```dart
+// BUG: .withOpacity(0.5).withOpacity(expandedElementsOpacity) compounds opacity
+color: (shuffle == true ? primaryColor : textColor.withOpacity(0.5))
+    .withOpacity(expandedElementsOpacity),
+```
+
+---
+
+### 20. Mixed Async Patterns
+**Locations:** 13 instances
+
+`.then()` chains mixed with `async/await` throughout the codebase.
+
+---
+
+### 21. Hardcoded Colors
+**Locations:** 55 instances
+
+`Color(0xFF604CEC)`, `Color(0xFF1a1a1a)` scattered across theme files and widgets.
+
+---
+
+### 22. View Modes as Strings
+**Locations:** 80+ instances
+
+`'grid2'`, `'grid3'`, `'list'` should be enums.
+
+---
+
+### 23. Fire-and-Forget Pause Commands
+**File:** `/lib/providers/music_assistant_provider.dart:3875-3894`
+
+Server pause command uses `unawaited()` - errors are silently lost.
+
+---
+
+### 24. Position Tracker Anchor Timeout Missing
+**File:** `/lib/services/position_tracker.dart:24-26`
+
+No timeout on stale anchor - interpolation can drift indefinitely.
+
+---
+
+### 25. PCM Buffer No Overflow Protection
+**File:** `/lib/services/pcm_audio_player.dart:68, 236-247`
+
+Audio buffer grows unbounded if data arrives faster than consumption.
+
+---
+
+### 26. No Client-Side Rate Limiting
+**Location:** App-wide
+
+No throttling on API requests during rapid user interactions.
+
+---
+
+### 27. Portrait-Only Lock
+**File:** `/lib/main.dart:64-68`
+
+No landscape orientation support.
+
+---
+
+### 28. Touch Targets Below 48dp
+**Files:** player_controls.dart, queue_panel.dart, player_card.dart
+
+Multiple buttons at 28x28 and 44x44 instead of minimum 48x48.
+
+---
+
+### 29. WCAG Contrast Not Validated
+**File:** `/lib/theme/palette_helper.dart`
+
+Uses 0.4 threshold instead of proper WCAG 4.5:1 contrast ratio calculation.
+
+---
+
+### 30. StreamControllers Not Closed
+**File:** `/lib/services/hardware_volume_service.dart:18-19, 74-85`
+
+`_volumeUpController` and `_volumeDownController` never closed in dispose().
+
+---
+
+## LOW SEVERITY ISSUES
+
+### 31-34. Naming Inconsistencies
+Mixed patterns: `_isLoading` vs `_isLoadingPlaylists`, various cache variable names.
+
+### 35-38. Missing TODO Implementations
+6 actionable TODOs identified (queue removal, audiobook progress sync, playlist modification).
+
+### 39-42. Dead/Unused Code
+- `@Deprecated` methods still implemented
+- `library_stats.dart` appears unused
+- `animation_debugger.dart` disabled by default
+
+### 43-44. Minor Documentation Gaps
+Missing method documentation, no architecture diagram.
+
+---
+
+## Recommended Remediation Roadmap
+
+### Sprint 1 (Week 1-2): Security & Critical Fixes
+1. Migrate credentials to `flutter_secure_storage`
+2. Add logging to all silent catch blocks
+3. Store connection state subscription
+4. Fix audio session listener disposal
+5. Add basic test infrastructure (10% coverage target)
+
+### Sprint 2 (Week 3-4): Memory & Race Conditions
+6. Add mutex to player state updates
+7. Add reentrancy guard to `selectPlayer()`
+8. Implement bounded caches with LRU eviction
+9. Fix static memory leak in Player model
+10. Store and cancel all stream subscriptions
+
+### Sprint 3 (Week 5-6): Architecture Refactoring
+11. Split `MusicAssistantProvider` into 5 smaller classes
+12. Split `expandable_player.dart` into component widgets
+13. Replace GlobalKey anti-patterns with Provider
+14. Convert string constants to enums
+15. Extract hardcoded colors to constants file
+
+### Sprint 4 (Week 7-8): Accessibility & UI
+16. Add Semantics to all interactive elements
+17. Increase touch targets to 48dp minimum
+18. Implement WCAG contrast validation
+19. Fix double opacity bug
+20. Add landscape orientation support
+
+### Sprint 5 (Week 9-10): Performance & Polish
+21. Add database indexes
+22. Implement incremental sync
+23. Add client-side rate limiting
+24. Fix atomic offline queue processing
+25. Achieve 30% test coverage target
+
+---
+
+## Files Requiring Most Attention
+
+| File | LOC | Issues | Priority |
+|------|-----|--------|----------|
+| `music_assistant_provider.dart` | 4,469 | 12 | CRITICAL |
+| `settings_service.dart` | 811 | 4 | CRITICAL |
+| `expandable_player.dart` | 2,485 | 6 | HIGH |
+| `music_assistant_api.dart` | 2,929 | 5 | HIGH |
+| `cache_service.dart` | 370 | 4 | HIGH |
+| `massiv_audio_handler.dart` | 296 | 2 | CRITICAL |
+| `player.dart` | 422 | 2 | HIGH |
+| `auth_manager.dart` | 300 | 3 | HIGH |
+
+---
+
+## Estimated Technical Debt
+
+| Category | Effort (Dev-Days) |
+|----------|-------------------|
+| Security Fixes | 3-5 |
+| Test Infrastructure | 10-15 |
+| Architecture Refactoring | 15-20 |
+| Memory Leak Fixes | 3-5 |
+| Accessibility | 5-8 |
+| UI/UX Polish | 3-5 |
+| Performance | 5-8 |
+| **Total** | **44-66 dev-days** |
+
+---
+
+## Conclusion
+
+The Ensemble app has a solid foundation with well-designed patterns for caching, audio handling, and multi-device synchronization. However, **critical security vulnerabilities** (plaintext credentials), **zero test coverage**, and a **4,469-line god class** represent significant risks that must be addressed before any production deployment.
+
+The most urgent priorities are:
+1. **Secure credential storage** - immediate security risk
+2. **Add test infrastructure** - enables safe refactoring
+3. **Split the god class** - enables maintainability
+4. **Add accessibility** - legal/compliance requirement
+
+With focused effort over 8-10 weeks, the codebase can be brought to production-quality standards.
+
+---
+
+*Audit conducted using 6 parallel specialized sub-agents analyzing security, memory management, race conditions, architecture, UI/UX, and audio/networking.*
@@ -0,0 +1,119 @@
+# Ensemble Codebase Audit Prompt
+
+Run this prompt with Claude Code to perform a comprehensive audit of the Ensemble Flutter app.
+
+---
+
+## Prompt
+
+You are performing a comprehensive code audit on the Ensemble Flutter app. This is a music/audiobook/podcast player app with 93+ Dart files.
+
+**CRITICAL RULES:**
+1. DO NOT remove or break any existing functionality
+2. All changes must be on the current branch: `audit/code-quality-review`
+3. Run `flutter analyze` after each set of changes to verify no regressions
+4. Commit changes in logical, reviewable chunks
+
+**AUDIT PHASES:**
+
+### Phase 1: Code Quality Analysis (Read-Only)
+First, analyze the codebase without making changes. Create a report covering:
+
+1. **Large File Analysis** - Review these files for refactoring opportunities:
+   - `lib/screens/new_library_screen.dart` (122KB)
+   - `lib/screens/search_screen.dart` (129KB)
+   - `lib/widgets/expandable_player.dart` (107KB)
+   - `lib/screens/album_details_screen.dart` (48KB)
+   - `lib/screens/artist_details_screen.dart` (45KB)
+
+2. **Pattern Inconsistencies** - Look for:
+   - Inconsistent naming conventions (camelCase vs snake_case)
+   - Mixed widget composition patterns
+   - Inconsistent error handling approaches
+   - Duplicate code across screens/widgets
+
+3. **Performance Red Flags** - Identify:
+   - Unnecessary rebuilds (missing const constructors)
+   - Heavy computations in build methods
+   - Missing list item caching (ListView.builder vs ListView)
+   - Inefficient state management patterns
+
+4. **Scroll Performance Issues** - Specifically audit:
+   - ScrollController usage and disposal
+   - Sliver implementations
+   - AnimatedBuilder/AnimatedWidget usage
+   - Image loading in scrollable lists
+   - Any jank-inducing patterns
+
+### Phase 2: Quick Wins (Low Risk, High Impact)
+Apply these fixes first:
+
+1. Add missing `const` constructors throughout
+2. Fix any `flutter analyze` warnings
+3. Remove dead code and unused imports
+4. Standardize formatting with `dart format`
+
+### Phase 3: Scroll Animation Optimization
+Focus on smoother scrolling:
+
+1. **Image Optimization**
+   - Ensure CachedNetworkImage is used consistently
+   - Add appropriate cacheWidth/cacheHeight
+   - Implement proper placeholder/error widgets
+
+2. **List Performance**
+   - Convert any ListView to ListView.builder where appropriate
+   - Add itemExtent where possible for fixed-height items
+   - Implement AutomaticKeepAliveClientMixin where needed
+   - Consider RepaintBoundary for complex list items
+
+3. **Animation Smoothing**
+   - Use `Curves.easeOutCubic` or similar for scroll-linked animations
+   - Ensure animations run at 60fps (avoid heavy computations during animation)
+   - Review CustomScrollView/Sliver implementations
+
+### Phase 4: Code Consistency Improvements
+
+1. **Widget Extraction**
+   - Extract repeated UI patterns into reusable widgets
+   - Ensure extracted widgets follow existing naming patterns
+
+2. **State Management**
+   - Verify Provider usage is consistent
+   - Check for proper disposal of controllers/streams
+
+3. **Error Handling**
+   - Standardize try/catch patterns
+   - Ensure consistent loading/error state UI
+
+### Phase 5: Verification
+
+After all changes:
+1. Run `flutter analyze` - must pass with 0 issues
+2. Run `flutter test` if tests exist
+3. Create a summary of all changes made
+4. List any recommendations that were NOT implemented (too risky)
+
+---
+
+## Execution Instructions
+
+```bash
+# Start the audit
+cd /home/home-server/Ensemble
+git checkout audit/code-quality-review
+
+# After each phase, commit your changes
+git add -A && git commit -m "Audit Phase X: [description]"
+
+# Verify no regressions
+flutter analyze
+```
+
+---
+
+## Expected Deliverables
+
+1. `AUDIT_REPORT.md` - Findings from Phase 1
+2. Multiple commits with clear messages for each phase
+3. `AUDIT_SUMMARY.md` - Final summary of all changes and remaining recommendations
@@ -0,0 +1,136 @@
+# Ensemble Flutter App - Code Audit Report
+
+**Date:** January 4, 2026
+**Branch:** `audit/code-quality-review`
+**Files Audited:** 93 Dart files
+
+---
+
+## Executive Summary
+
+The codebase is generally well-maintained with good existing performance optimizations (RepaintBoundary, ListView.builder, cacheExtent settings). Key improvement areas identified:
+
+| Category | Issues Found | Priority |
+|----------|-------------|----------|
+| Deprecated APIs | 20 instances | HIGH |
+| Missing const constructors | 100+ instances | MEDIUM |
+| Image cache parameters | 7 locations | MEDIUM |
+| Code duplication | 8 view mode functions | LOW |
+| Color constants | 3 files with duplicates | LOW |
+
+---
+
+## 1. CRITICAL: Deprecated API Usage
+
+### `colorScheme.background` (20 instances)
+Flutter Material 3 deprecates `ColorScheme.background`. Replace with `colorScheme.surface`.
+
+**Files affected:**
+- lib/main.dart:335, 336
+- lib/screens/library_artists_screen.dart:21
+- lib/screens/new_home_screen.dart:121
+- lib/screens/artist_details_screen.dart:708, 720
+- lib/screens/library_playlists_screen.dart:53
+- lib/screens/library_tracks_screen.dart:19
+- lib/screens/login_screen.dart:489
+- lib/screens/new_library_screen.dart:933, 957, 1020, 1021
+- lib/screens/album_details_screen.dart:807, 819
+- lib/screens/library_albums_screen.dart:19
+- lib/screens/search_screen.dart:427, 738, 739
+- lib/screens/settings_screen.dart:245
+
+---
+
+## 2. HIGH: Missing const Constructors
+
+### EdgeInsets.zero (64 instances)
+High-impact optimization - used extensively in button padding.
+
+**Key files:**
+- lib/screens/album_details_screen.dart (12 instances)
+- lib/screens/artist_details_screen.dart (8 instances)
+- lib/screens/audiobook_detail_screen.dart (3 instances)
+- lib/screens/audiobook_series_screen.dart (2 instances)
+- lib/screens/audiobook_author_screen.dart (2 instances)
+
+### BorderRadius.circular (40+ instances)
+Cannot use `const BorderRadius.circular()` directly. Alternative: `const BorderRadius.all(Radius.circular(X))`.
+
+---
+
+## 3. MEDIUM: Scroll Performance - Missing Image Cache Parameters
+
+### CachedNetworkImage without memCacheWidth/Height
+
+**lib/screens/new_library_screen.dart:**
+- Line 1395-1402: Author image (48x48) - missing cache params
+- Line 1480-1486: Author card image - missing cache params
+- Line 1572-1580: Audiobook cover (56x56) - missing cache params
+- Line 1740-1745: Audiobook grid cover - missing cache params
+- Line 1959-1969: Playlist cover (56x56) - missing cache params
+- Line 2143-2152: Playlist grid covers - missing cache params
+- Line 2973-2981: Album cover (56x56) - missing cache params
+
+**Note:** DecorationImage with CachedNetworkImageProvider cannot have cache size specified (structural Flutter limitation).
+
+---
+
+## 4. LOW: Code Duplication
+
+### View Mode Cycling Functions (8 nearly identical functions)
+**File:** lib/screens/new_library_screen.dart
+
+Functions that follow identical switch/case pattern:
+- `_cycleArtistsViewMode()` (line 184)
+- `_cycleAlbumsViewMode()` (line 200)
+- `_cyclePlaylistsViewMode()` (line 216)
+- `_cycleAuthorsViewMode()` (line 232)
+- `_cycleAudiobooksViewMode()` (line 248)
+- `_cycleSeriesViewMode()` (line 286)
+- `_cycleRadioViewMode()` (line 303)
+- `_cyclePodcastsViewMode()` (line 319)
+
+**Recommendation:** Create generic utility function.
+
+### Duplicated Color Constants (3 files)
+Series fallback colors defined identically in:
+- lib/widgets/series_row.dart:246-253
+- lib/screens/audiobook_series_screen.dart:466-473
+- lib/screens/new_library_screen.dart:2112-2119
+
+**Recommendation:** Extract to lib/constants/colors.dart
+
+---
+
+## 5. POSITIVE FINDINGS (Already Optimized)
+
+- **RepaintBoundary**: Properly implemented in all list item widgets
+- **ListView.builder**: Used consistently with cacheExtent: 1000
+- **ScrollController disposal**: All 8+ controllers properly disposed
+- **Animation patterns**: Proper listener cleanup in expandable_player.dart
+- **Debounced operations**: Color extraction debounced to 300ms
+
+---
+
+## Recommended Action Plan
+
+### Phase 1: Quick Wins (Low Risk)
+1. Replace `colorScheme.background` with `colorScheme.surface` (20 locations)
+2. Add `const` to EdgeInsets.zero instances
+
+### Phase 2: Image Optimization
+1. Add memCacheWidth/memCacheHeight to CachedNetworkImage instances in new_library_screen.dart
+
+### Phase 3: Code Cleanup (Optional)
+1. Extract view mode cycling to utility function
+2. Centralize color constants
+
+---
+
+## Files by Complexity
+
+| File | Lines | Status |
+|------|-------|--------|
+| lib/screens/search_screen.dart | 3,489 | Good structure, minor fixes needed |
+| lib/screens/new_library_screen.dart | 3,351 | Good performance, some duplication |
+| lib/widgets/expandable_player.dart | 2,577 | Well-optimized animations |
@@ -0,0 +1,57 @@
+# Audit Summary
+
+**Branch:** `audit/code-quality-review`
+**Date:** January 4, 2026
+
+## Changes Applied
+
+### Phase 1: Analysis Complete
+- Created `AUDIT_REPORT.md` with comprehensive findings
+- 4 parallel subagents analyzed const constructors, scroll performance, code duplication, and dead code
+
+### Phase 2: Deprecated API Fixes (18 files)
+- Replaced all `colorScheme.background` with `colorScheme.surface` (Material 3 compliance)
+
+**Files modified:**
+- lib/screens/library_artists_screen.dart
+- lib/screens/library_albums_screen.dart
+- lib/screens/library_playlists_screen.dart
+- lib/screens/library_tracks_screen.dart
+- lib/screens/artist_details_screen.dart
+- lib/screens/new_home_screen.dart
+- lib/screens/login_screen.dart
+- lib/screens/settings_screen.dart
+- lib/screens/album_details_screen.dart
+- lib/screens/search_screen.dart
+- lib/screens/new_library_screen.dart
+
+### Phase 3: Scroll Performance Optimization
+- Added `memCacheWidth` and `memCacheHeight` to CachedNetworkImage instances
+
+**lib/screens/new_library_screen.dart:**
+- Line 1400-1401: Author list tile image (128x128 cache)
+- Line 1487-1488: Author grid card image (256x256 cache)
+- Line 1577-1578: Audiobook list tile cover (256x256 cache)
+- Line 1749-1750: Audiobook grid cover (512x512 cache)
+- Line 1970-1971: Series list tile cover (256x256 cache)
+- Line 2986-2987: Album list tile cover (256x256 cache)
+
+## Recommendations NOT Implemented (Low Priority)
+
+These were identified but NOT changed to preserve functionality:
+
+1. **View mode cycling refactor** - 8 similar functions could be consolidated
+2. **Color constant extraction** - Duplicated colors in 3 files
+3. **EdgeInsets.zero const** - 64 instances (build-time only, minimal impact)
+4. **BorderRadius.circular const** - 40+ instances
+
+## Verification
+
+Changes should be verified by:
+1. GitHub Actions build (triggered automatically)
+2. Manual UI testing of scroll smoothness
+3. Verify no visual regressions in dark/light themes
+
+## Build Trigger
+
+GitHub Actions workflow triggered on branch `audit/code-quality-review`
@@ -0,0 +1,52 @@
+# Search Improvements
+
+Branch: `feature/search-improvements`
+
+## Completed
+
+- [x] Add playlists and audiobooks to search results
+  - Parse from MA API response
+  - Filter chips for each type
+  - Tile builders with navigation to detail screens
+
+- [x] Unified Relevance-Based "All" Results
+  - Scoring algorithm implemented:
+    - Exact match: 100 points
+    - Starts with query: 80 points
+    - Contains query (word boundary): 60 points
+    - Contains query (anywhere): 40 points
+    - Fuzzy match: 20 points
+    - Bonus for library items (albums): +10 points
+    - Bonus for favorites: +5 points
+    - Secondary field matching (artist name in albums/tracks)
+  - Merged all results into single sorted list
+  - Type indicators in subtitle (e.g., "Artist • Album")
+
+- [x] Smart Cross-Referencing
+  - Extracts unique artists from matched tracks/albums
+  - Filters to artists whose name contains query words (min 3 chars)
+  - Adds cross-referenced artists with lower relevance score (25)
+  - Avoids duplicates with direct search results
+
+- [x] Past Searches Row
+  - Added SearchHistory table to database (schema v4)
+  - Saves successful searches (deduplicated, max 10)
+  - Displays as ActionChips in empty state
+  - Clicking chip performs that search
+
+## Remaining Ideas (Lower Priority)
+
+- **Library-only toggle:** Add switch to filter search to library items only (MA API supports this)
+- **Voice search:** Add microphone button if platform supports speech recognition
+- **Search suggestions:** Typeahead from library as user types
+- **Quick actions:** Long-press result for play/queue options without navigating
+- **Clear history in settings:** Add option to clear search history
+
+## Files Modified
+
+| File | Changes |
+|------|---------|
+| `lib/database/database.dart` | Added SearchHistory table, schema v4 |
+| `lib/services/database_service.dart` | Added search history methods |
+| `lib/screens/search_screen.dart` | Relevance scoring, cross-refs, history UI |
+| `lib/l10n/app_en.arb` | Added localization strings |
@@ -0,0 +1,5 @@
+arb-dir: lib/l10n
+template-arb-file: app_en.arb
+output-localization-file: app_localizations.dart
+synthetic-package: false
+output-class: S
@@ -25,4 +25,7 @@ class HeroTags {

  /// Audiobook author image hero tag prefix
  static const String authorImage = 'author_image_';
+
+  /// Podcast cover hero tag prefix
+  static const String podcastCover = 'podcast_cover_';
 }
@@ -25,6 +25,8 @@ class Profiles extends Table {
 }

 /// Recently played items - scoped by profile
+@TableIndex(name: 'idx_recently_played_profile', columns: {#profileUsername})
+@TableIndex(name: 'idx_recently_played_profile_played', columns: {#profileUsername, #playedAt})
 class RecentlyPlayed extends Table {
  /// Auto-incrementing ID
  IntColumn get id => integer().autoIncrement()();
@@ -55,6 +57,8 @@ class RecentlyPlayed extends Table {
 }

 /// Cached library items for fast startup
+@TableIndex(name: 'idx_library_cache_type', columns: {#itemType})
+@TableIndex(name: 'idx_library_cache_type_deleted', columns: {#itemType, #isDeleted})
 class LibraryCache extends Table {
  /// Composite key: provider + item_id
  TextColumn get cacheKey => text()();
@@ -93,12 +97,101 @@ class SyncMetadata extends Table {
  Set<Column> get primaryKey => {syncType};
 }

-@DriftDatabase(tables: [Profiles, RecentlyPlayed, LibraryCache, SyncMetadata])
+/// Persisted playback state - survives app restarts and disconnects
+class PlaybackState extends Table {
+  /// Always 'current' - single row table
+  TextColumn get id => text().withDefault(const Constant('current'))();
+
+  /// Selected player ID
+  TextColumn get playerId => text().nullable()();
+
+  /// Selected player name (for display if player unavailable)
+  TextColumn get playerName => text().nullable()();
+
+  /// Current track as JSON
+  TextColumn get currentTrackJson => text().nullable()();
+
+  /// Current position in seconds
+  RealColumn get positionSeconds => real().withDefault(const Constant(0.0))();
+
+  /// Whether playback was active
+  BoolColumn get isPlaying => boolean().withDefault(const Constant(false))();
+
+  /// When this state was saved
+  DateTimeColumn get savedAt => dateTime()();
+
+  @override
+  Set<Column> get primaryKey => {id};
+}
+
+/// Cached player list - for instant display on app resume
+class CachedPlayers extends Table {
+  /// Player ID from Music Assistant
+  TextColumn get playerId => text()();
+
+  /// Player data as JSON
+  TextColumn get playerJson => text()();
+
+  /// Current track for this player as JSON (for mini player display)
+  TextColumn get currentTrackJson => text().nullable()();
+
+  /// When this was last updated
+  DateTimeColumn get lastUpdated => dateTime()();
+
+  @override
+  Set<Column> get primaryKey => {playerId};
+}
+
+/// Cached queue items for selected player
+@TableIndex(name: 'idx_cached_queue_player', columns: {#playerId})
+@TableIndex(name: 'idx_cached_queue_player_position', columns: {#playerId, #position})
+class CachedQueue extends Table {
+  /// Auto-incrementing ID for ordering
+  IntColumn get id => integer().autoIncrement()();
+
+  /// Player ID this queue belongs to
+  TextColumn get playerId => text()();
+
+  /// Queue item as JSON
+  TextColumn get itemJson => text()();
+
+  /// Position in queue
+  IntColumn get position => integer()();
+}
+
+/// Cached home row data for instant display on startup
+class HomeRowCache extends Table {
+  /// Row type: 'recent_albums', 'discover_artists', 'discover_albums'
+  TextColumn get rowType => text()();
+
+  /// Serialized list of items as JSON array
+  TextColumn get itemsJson => text()();
+
+  /// When this was last updated
+  DateTimeColumn get lastUpdated => dateTime()();
+
+  @override
+  Set<Column> get primaryKey => {rowType};
+}
+
+/// Search history for quick access to recent searches
+class SearchHistory extends Table {
+  /// Auto-incrementing ID
+  IntColumn get id => integer().autoIncrement()();
+
+  /// The search query
+  TextColumn get query => text()();
+
+  /// When the search was performed
+  DateTimeColumn get searchedAt => dateTime()();
+}
+
+@DriftDatabase(tables: [Profiles, RecentlyPlayed, LibraryCache, SyncMetadata, PlaybackState, CachedPlayers, CachedQueue, HomeRowCache, SearchHistory])
 class AppDatabase extends _$AppDatabase {
  AppDatabase([QueryExecutor? executor]) : super(executor ?? _openConnection());

  @override
-  int get schemaVersion => 1;
+  int get schemaVersion => 5;

  @override
  MigrationStrategy get migration {
@@ -107,7 +200,32 @@ class AppDatabase extends _$AppDatabase {
        await m.createAll();
      },
      onUpgrade: (Migrator m, int from, int to) async {
-        // Future migrations will go here
+        // Migration from v1 to v2: Add playback state, cached players, cached queue tables
+        if (from < 2) {
+          await m.createTable(playbackState);
+          await m.createTable(cachedPlayers);
+          await m.createTable(cachedQueue);
+        }
+        // Migration from v2 to v3: Add home row cache table
+        if (from < 3) {
+          await m.createTable(homeRowCache);
+        }
+        // Migration from v3 to v4: Add search history table
+        if (from < 4) {
+          await m.createTable(searchHistory);
+        }
+        // Migration from v4 to v5: Add indexes for query performance
+        if (from < 5) {
+          // RecentlyPlayed indexes
+          await customStatement('CREATE INDEX IF NOT EXISTS idx_recently_played_profile ON recently_played (profile_username)');
+          await customStatement('CREATE INDEX IF NOT EXISTS idx_recently_played_profile_played ON recently_played (profile_username, played_at)');
+          // LibraryCache indexes
+          await customStatement('CREATE INDEX IF NOT EXISTS idx_library_cache_type ON library_cache (item_type)');
+          await customStatement('CREATE INDEX IF NOT EXISTS idx_library_cache_type_deleted ON library_cache (item_type, is_deleted)');
+          // CachedQueue indexes
+          await customStatement('CREATE INDEX IF NOT EXISTS idx_cached_queue_player ON cached_queue (player_id)');
+          await customStatement('CREATE INDEX IF NOT EXISTS idx_cached_queue_player_position ON cached_queue (player_id, position)');
+        }
      },
    );
  }
@@ -327,4 +445,209 @@ class AppDatabase extends _$AppDatabase {
    if (lastSync == null) return true;
    return DateTime.now().difference(lastSync) > maxAge;
  }
+
+  // ============================================
+  // Playback State Operations
+  // ============================================
+
+  /// Save current playback state
+  Future<void> savePlaybackState({
+    String? playerId,
+    String? playerName,
+    String? currentTrackJson,
+    double positionSeconds = 0.0,
+    bool isPlaying = false,
+  }) async {
+    await into(playbackState).insertOnConflictUpdate(PlaybackStateCompanion.insert(
+      id: const Value('current'),
+      playerId: Value(playerId),
+      playerName: Value(playerName),
+      currentTrackJson: Value(currentTrackJson),
+      positionSeconds: Value(positionSeconds),
+      isPlaying: Value(isPlaying),
+      savedAt: DateTime.now(),
+    ));
+  }
+
+  /// Get saved playback state
+  Future<PlaybackStateData?> getPlaybackState() async {
+    return (select(playbackState)..where((p) => p.id.equals('current')))
+        .getSingleOrNull();
+  }
+
+  /// Clear playback state
+  Future<void> clearPlaybackState() async {
+    await delete(playbackState).go();
+  }
+
+  // ============================================
+  // Cached Players Operations
+  // ============================================
+
+  /// Cache a player with its current track
+  Future<void> cachePlayer({
+    required String playerId,
+    required String playerJson,
+    String? currentTrackJson,
+  }) async {
+    await into(cachedPlayers).insertOnConflictUpdate(CachedPlayersCompanion.insert(
+      playerId: playerId,
+      playerJson: playerJson,
+      currentTrackJson: Value(currentTrackJson),
+      lastUpdated: DateTime.now(),
+    ));
+  }
+
+  /// Cache multiple players at once
+  Future<void> cachePlayers(List<Map<String, dynamic>> players) async {
+    await transaction(() async {
+      for (final player in players) {
+        await into(cachedPlayers).insertOnConflictUpdate(CachedPlayersCompanion.insert(
+          playerId: player['playerId'] as String,
+          playerJson: player['playerJson'] as String,
+          currentTrackJson: Value(player['currentTrackJson'] as String?),
+          lastUpdated: DateTime.now(),
+        ));
+      }
+    });
+  }
+
+  /// Get all cached players
+  Future<List<CachedPlayer>> getCachedPlayers() async {
+    return (select(cachedPlayers)
+      ..orderBy([(p) => OrderingTerm.desc(p.lastUpdated)]))
+      .get();
+  }
+
+  /// Get a specific cached player
+  Future<CachedPlayer?> getCachedPlayer(String playerId) async {
+    return (select(cachedPlayers)..where((p) => p.playerId.equals(playerId)))
+        .getSingleOrNull();
+  }
+
+  /// Update cached track for a player
+  Future<void> updateCachedPlayerTrack(String playerId, String? trackJson) async {
+    await (update(cachedPlayers)..where((p) => p.playerId.equals(playerId)))
+        .write(CachedPlayersCompanion(
+          currentTrackJson: Value(trackJson),
+          lastUpdated: Value(DateTime.now()),
+        ));
+  }
+
+  /// Clear all cached players
+  Future<void> clearCachedPlayers() async {
+    await delete(cachedPlayers).go();
+  }
+
+  // ============================================
+  // Cached Queue Operations
+  // ============================================
+
+  /// Save queue for a player
+  Future<void> saveQueue(String playerId, List<String> itemJsonList) async {
+    await transaction(() async {
+      // Clear existing queue for this player
+      await (delete(cachedQueue)..where((q) => q.playerId.equals(playerId))).go();
+
+      // Insert new queue items
+      for (var i = 0; i < itemJsonList.length; i++) {
+        await into(cachedQueue).insert(CachedQueueCompanion.insert(
+          playerId: playerId,
+          itemJson: itemJsonList[i],
+          position: i,
+        ));
+      }
+    });
+  }
+
+  /// Get cached queue for a player
+  Future<List<CachedQueueData>> getCachedQueue(String playerId) async {
+    return (select(cachedQueue)
+      ..where((q) => q.playerId.equals(playerId))
+      ..orderBy([(q) => OrderingTerm.asc(q.position)]))
+      .get();
+  }
+
+  /// Clear queue for a player
+  Future<void> clearCachedQueue(String playerId) async {
+    await (delete(cachedQueue)..where((q) => q.playerId.equals(playerId))).go();
+  }
+
+  /// Clear all cached queues
+  Future<void> clearAllCachedQueues() async {
+    await delete(cachedQueue).go();
+  }
+
+  // ============================================
+  // Home Row Cache Operations
+  // ============================================
+
+  /// Save home row data
+  Future<void> saveHomeRowCache(String rowType, String itemsJson) async {
+    await into(homeRowCache).insertOnConflictUpdate(
+      HomeRowCacheCompanion(
+        rowType: Value(rowType),
+        itemsJson: Value(itemsJson),
+        lastUpdated: Value(DateTime.now()),
+      ),
+    );
+  }
+
+  /// Get cached home row data
+  Future<HomeRowCacheData?> getHomeRowCache(String rowType) async {
+    return (select(homeRowCache)..where((h) => h.rowType.equals(rowType)))
+        .getSingleOrNull();
+  }
+
+  /// Clear all home row cache
+  Future<void> clearHomeRowCache() async {
+    await delete(homeRowCache).go();
+  }
+
+  // ============================================
+  // Search History Operations
+  // ============================================
+
+  /// Save a search query to history (deduplicates and limits to 10)
+  Future<void> saveSearchQuery(String query) async {
+    final trimmedQuery = query.trim();
+    if (trimmedQuery.isEmpty) return;
+
+    await transaction(() async {
+      // Delete existing entry with same query (case-insensitive)
+      await (delete(searchHistory)
+            ..where((s) => s.query.lower().equals(trimmedQuery.toLowerCase())))
+          .go();
+
+      // Insert the new search
+      await into(searchHistory).insert(SearchHistoryCompanion.insert(
+        query: trimmedQuery,
+        searchedAt: DateTime.now(),
+      ));
+
+      // Keep only the 10 most recent searches
+      final allSearches = await (select(searchHistory)
+            ..orderBy([(s) => OrderingTerm.desc(s.searchedAt)]))
+          .get();
+
+      if (allSearches.length > 10) {
+        final toDelete = allSearches.skip(10).map((s) => s.id).toList();
+        await (delete(searchHistory)..where((s) => s.id.isIn(toDelete))).go();
+      }
+    });
+  }
+
+  /// Get recent search queries (up to 10, most recent first)
+  Future<List<String>> getRecentSearches() async {
+    final searches = await (select(searchHistory)
+          ..orderBy([(s) => OrderingTerm.desc(s.searchedAt)])
+          ..limit(10))
+        .get();
+    return searches.map((s) => s.query).toList();
+  }
+
+  /// Clear all search history
+  Future<void> clearSearchHistory() async {
+    await delete(searchHistory).go();
+  }
 }
@@ -0,0 +1,298 @@
+{
+  "@@locale": "de",
+
+  "appTitle": "Ensemble",
+  "connecting": "Verbinde...",
+  "connected": "Verbunden",
+  "disconnected": "Getrennt",
+
+  "serverAddress": "Serveradresse",
+  "serverAddressHint": "z.B. music.example.com oder 192.168.1.100",
+  "yourName": "Dein Name",
+  "yourFirstName": "Dein Vorname",
+  "portOptional": "Port (Optional)",
+  "portHint": "z.B. 8095 oder leer lassen",
+  "portDescription": "Leer lassen bei Reverse Proxy oder Standardports. 8095 eingeben bei Direktverbindung.",
+
+  "username": "Benutzername",
+  "password": "Passwort",
+  "detectAndConnect": "Erkennen & Verbinden",
+  "connect": "Verbinden",
+  "disconnect": "Trennen",
+
+  "authServerUrlOptional": "Auth-Server URL (Optional)",
+  "authServerUrlHint": "z.B. auth.example.com (wenn abweichend vom Server)",
+  "authServerUrlDescription": "Leer lassen, wenn Authentifizierung auf demselben Server",
+  "detectedAuthType": "Erkannt: {authType}",
+  "serverRequiresAuth": "Dieser Server erfordert Authentifizierung",
+
+  "tailscaleVpnConnection": "Tailscale VPN-Verbindung",
+  "unencryptedConnection": "Unverschlusselte Verbindung",
+  "usingHttpOverTailscale": "HTTP uber Tailscale (verschlusselter Tunnel)",
+  "httpsFailedUsingHttp": "HTTPS fehlgeschlagen, verwende HTTP",
+  "httpNotEncrypted": "HTTP-Verbindung - Daten sind nicht verschlusselt",
+
+  "pleaseEnterServerAddress": "Bitte gib deine Music Assistant Serveradresse ein",
+  "pleaseEnterName": "Bitte gib deinen Namen ein",
+  "pleaseEnterValidPort": "Bitte gib eine gultige Portnummer ein (1-65535)",
+  "pleaseEnterCredentials": "Bitte gib Benutzername und Passwort ein",
+  "authFailed": "Authentifizierung fehlgeschlagen. Bitte uberprufe deine Anmeldedaten.",
+  "maLoginFailed": "Music Assistant Anmeldung fehlgeschlagen. Bitte uberprufe deine Anmeldedaten.",
+  "connectionFailed": "Verbindung zum Server fehlgeschlagen. Bitte uberprufe die Adresse und versuche es erneut.",
+  "detectingAuth": "Erkenne Authentifizierung...",
+  "cannotDetermineAuth": "Authentifizierungsanforderungen konnten nicht ermittelt werden. Bitte uberprufe die Server-URL.",
+
+  "noAuthentication": "Keine Authentifizierung",
+  "httpBasicAuth": "HTTP Basic Auth",
+  "authelia": "Authelia",
+  "musicAssistantLogin": "Music Assistant Anmeldung",
+
+  "pressBackToMinimize": "Erneut drucken zum Minimieren",
+
+  "recentlyPlayed": "Zuletzt gespielt",
+  "discoverArtists": "Kunstler entdecken",
+  "discoverAlbums": "Alben entdecken",
+  "continueListening": "Weiterhoren",
+  "discoverAudiobooks": "Horbücher entdecken",
+  "discoverSeries": "Serien entdecken",
+  "favoriteAlbums": "Lieblingsalben",
+  "favoriteArtists": "Lieblingskünstler",
+  "favoriteTracks": "Lieblingssongs",
+
+  "searchMusic": "Musik suchen...",
+  "searchForContent": "Nach Künstlern, Alben oder Songs suchen",
+  "retry": "Wiederholen",
+  "all": "Alle",
+  "artists": "Künstler",
+  "albums": "Alben",
+  "tracks": "Songs",
+  "playlists": "Wiedergabelisten",
+  "audiobooks": "Hörbücher",
+  "music": "Musik",
+  "radio": "Radio",
+  "stations": "Sender",
+  "selectLibrary": "Bibliothek auswählen",
+  "noRadioStations": "Keine Radiosender",
+  "addRadioStationsHint": "Füge Radiosender in Music Assistant hinzu",
+  "searchFailed": "Suche fehlgeschlagen. Bitte überprüfe deine Verbindung.",
+
+  "queue": "Warteschlange",
+  "playerQueue": "{playerName} Warteschlange",
+  "noPlayerSelected": "Kein Player ausgewählt",
+  "undo": "Rückgängig",
+  "removedItem": "{itemName} entfernt",
+
+  "settings": "Einstellungen",
+  "debugLogs": "Debug-Protokolle",
+  "themeMode": "Design",
+  "light": "Hell",
+  "dark": "Dunkel",
+  "system": "System",
+  "pullToRefresh": "Ziehe zum Aktualisieren der Bibliothek",
+  "viewDebugLogs": "Debug-Protokolle anzeigen",
+
+  "viewAllPlayers": "Alle Player anzeigen",
+  "copyLogs": "Protokolle kopieren",
+  "clearLogs": "Protokolle löschen",
+  "copyList": "Liste kopieren",
+  "close": "Schließen",
+  "allPlayersCount": "Alle Player ({count})",
+  "errorLoadingPlayers": "Fehler beim Laden der Player: {error}",
+  "logsCopied": "Protokolle in Zwischenablage kopiert",
+  "logsCleared": "Protokolle gelöscht",
+  "playerListCopied": "Playerliste in Zwischenablage kopiert!",
+  "noLogsYet": "Noch keine Protokolle",
+  "infoPlus": "Info+",
+  "warnings": "Warnungen",
+  "errors": "Fehler",
+  "showingEntries": "Zeige {filtered} von {total} Einträgen",
+  "thisDevice": "Dieses Gerät",
+  "ghostPlayer": "Geist-Player (Duplikat)",
+  "unavailableCorrupt": "Nicht verfügbar/Beschädigt",
+  "playerId": "ID: {id}",
+  "playerInfo": "Verfügbar: {available} | Anbieter: {provider}",
+  "shareBugReport": "Fehlerbericht teilen",
+  "moreOptions": "Weitere Optionen",
+
+  "failedToUpdateFavorite": "Favorit konnte nicht aktualisiert werden: {error}",
+  "noPlayersAvailable": "Keine Player verfügbar",
+  "albumAddedToQueue": "Album zur Warteschlange hinzugefügt",
+  "tracksAddedToQueue": "Songs zur Warteschlange hinzugefügt",
+  "play": "Abspielen",
+  "noPlayersFound": "Keine Player gefunden",
+
+  "startingRadio": "Starte {name} Radio",
+  "failedToStartRadio": "Radio konnte nicht gestartet werden: {error}",
+  "startingRadioOnPlayer": "Starte {name} Radio auf {playerName}",
+  "addedRadioToQueue": "{name} Radio zur Warteschlange hinzugefügt",
+  "failedToAddToQueue": "Konnte nicht zur Warteschlange hinzufügen: {error}",
+  "radio": "Radio",
+  "inLibrary": "In Bibliothek",
+  "noAlbumsFound": "Keine Alben gefunden",
+
+  "playing": "Spiele {name}",
+  "playingTrack": "Spiele Song",
+  "nowPlaying": "Wird gespielt",
+
+  "markedAsFinished": "{name} als beendet markiert",
+  "failedToMarkFinished": "Konnte nicht als beendet markieren: {error}",
+  "markedAsUnplayed": "{name} als ungespielt markiert",
+  "failedToMarkUnplayed": "Konnte nicht als ungespielt markieren: {error}",
+  "failedToPlay": "Abspielen fehlgeschlagen: {error}",
+  "markAsFinished": "Als beendet markieren",
+  "markAsUnplayed": "Als ungespielt markieren",
+  "byAuthor": "Von {author}",
+
+  "audiobookCount": "{count} Hörbuch/Hörbücher",
+  "loading": "Laden...",
+  "bookCount": "{count} Buch/Bücher",
+  "books": "Bücher",
+
+  "noFavoriteAudiobooks": "Keine Lieblingshörbücher",
+  "tapHeartAudiobook": "Tippe auf das Herz bei einem Hörbuch, um es zu Favoriten hinzuzufügen",
+  "noAudiobooks": "Keine Hörbücher",
+  "addAudiobooksHint": "Füge Hörbücher zu deiner Bibliothek hinzu, um sie hier zu sehen",
+
+  "noFavoriteArtists": "Keine Lieblingskünstler",
+  "tapHeartArtist": "Tippe auf das Herz bei einem Künstler, um ihn zu Favoriten hinzuzufügen",
+  "noFavoriteAlbums": "Keine Lieblingsalben",
+  "tapHeartAlbum": "Tippe auf das Herz bei einem Album, um es zu Favoriten hinzuzufügen",
+  "noFavoritePlaylists": "Keine Lieblings-Wiedergabelisten",
+  "tapHeartPlaylist": "Tippe auf das Herz bei einer Wiedergabeliste, um sie zu Favoriten hinzuzufügen",
+  "noFavoriteTracks": "Keine Lieblingssongs",
+  "longPressTrackHint": "Halte einen Song gedrückt und tippe auf das Herz, um ihn zu Favoriten hinzuzufügen",
+  "loadSeries": "Serien laden",
+
+  "notConnected": "Nicht mit Music Assistant verbunden",
+  "notConnectedTitle": "Nicht verbunden",
+  "connectHint": "Verbinde dich mit deinem Music Assistant Server, um Musik zu hören",
+  "configureServer": "Server konfigurieren",
+
+  "noArtistsFound": "Keine Künstler gefunden",
+  "noTracksFound": "Keine Songs gefunden",
+  "noPlaylistsFound": "Keine Wiedergabelisten gefunden",
+  "queueIsEmpty": "Warteschlange ist leer",
+  "noResultsFound": "Keine Ergebnisse gefunden",
+  "refresh": "Aktualisieren",
+
+  "debugConsole": "Debug-Konsole",
+  "copy": "Kopieren",
+  "clear": "Löschen",
+  "noLogsToCopy": "Keine Protokolle zum Kopieren",
+  "noDebugLogsYet": "Noch keine Debug-Protokolle. Versuche Authentifizierung zu erkennen.",
+  "showDebug": "Debug anzeigen",
+  "hideDebug": "Debug ausblenden",
+
+  "chapters": "Kapitel",
+  "noChapters": "Keine Kapitel",
+  "noChapterInfo": "Dieses Hörbuch hat keine Kapitelinformationen",
+
+  "errorSeeking": "Fehler beim Spulen: {error}",
+  "error": "Fehler: {error}",
+
+  "home": "Start",
+  "library": "Bibliothek",
+
+  "homeScreen": "Startbildschirm",
+  "metadataApis": "Metadaten-APIs",
+  "theme": "Design",
+  "materialYou": "Material You",
+  "adaptiveTheme": "Adaptives Design",
+
+  "language": "Sprache",
+  "english": "Englisch",
+  "german": "Deutsch",
+  "spanish": "Spanisch",
+
+  "noTracksInPlaylist": "Keine Songs in Wiedergabeliste",
+  "sortAlphabetically": "Alphabetisch sortieren",
+  "sortByYear": "Nach Jahr sortieren",
+  "sortBySeriesOrder": "Nach Serienreihenfolge sortieren",
+  "listView": "Listenansicht",
+  "gridView": "Rasteransicht",
+  "noBooksInSeries": "Keine Bücher in dieser Serie gefunden",
+  "artist": "Künstler",
+  "showRecentlyPlayedAlbums": "Kürzlich gespielte Alben anzeigen",
+  "showRandomArtists": "Zufällige Künstler zum Entdecken anzeigen",
+  "showRandomAlbums": "Zufällige Alben zum Entdecken anzeigen",
+  "showAudiobooksInProgress": "Hörbücher in Bearbeitung anzeigen",
+  "showRandomAudiobooks": "Zufällige Hörbücher zum Entdecken anzeigen",
+  "showRandomSeries": "Zufällige Hörbuchserien zum Entdecken anzeigen",
+  "showFavoriteAlbums": "Lieblingsalben anzeigen",
+  "showFavoriteArtists": "Lieblingskünstler anzeigen",
+  "showFavoriteTracks": "Lieblingssongs anzeigen",
+  "extractColorsFromArtwork": "Farben aus Album- und Künstlercover extrahieren",
+  "chooseHomeScreenRows": "Wähle welche Zeilen auf dem Startbildschirm angezeigt werden",
+  "addedToFavorites": "Zu Favoriten hinzugefügt",
+  "removedFromFavorites": "Aus Favoriten entfernt",
+  "unknown": "Unbekannt",
+  "noUpcomingTracks": "Keine weiteren Songs",
+  "showAll": "Alle anzeigen",
+  "showFavoritesOnly": "Nur Favoriten anzeigen",
+  "changeView": "Ansicht ändern",
+  "authors": "Autoren",
+  "series": "Serien",
+  "shows": "Sendungen",
+  "podcasts": "Podcasts",
+  "podcastSupportComingSoon": "Podcast-Unterstützung kommt bald",
+  "playlist": "Wiedergabeliste",
+  "connectionError": "Verbindungsfehler",
+  "twoColumnGrid": "2-Spalten-Raster",
+  "threeColumnGrid": "3-Spalten-Raster",
+  "fromProviders": "Von Anbietern",
+
+  "resume": "Fortsetzen",
+  "about": "Über",
+  "inProgress": "In Bearbeitung",
+  "narratedBy": "Gesprochen von {narrators}",
+  "unknownNarrator": "Unbekannter Sprecher",
+  "unknownAuthor": "Unbekannter Autor",
+  "loadingChapters": "Lade Kapitel...",
+  "noChapterInfoAvailable": "Keine Kapitelinformationen verfügbar",
+  "percentComplete": "{percent}% abgeschlossen",
+  "theAudioDbApiKey": "TheAudioDB API-Schlüssel",
+  "theAudioDbApiKeyHint": "\"2\" für kostenlosen Zugang oder Premium-Schlüssel",
+  "audiobookLibraries": "Hörbuch-Bibliotheken",
+  "chooseAudiobookLibraries": "Wähle welche Audiobookshelf-Bibliotheken einbezogen werden",
+  "unknownLibrary": "Unbekannte Bibliothek",
+  "noSeriesFound": "Keine Serien gefunden",
+  "ensembleBugReport": "Ensemble Fehlerbericht",
+  "byOwner": "Von {owner}",
+  "noSeriesAvailable": "Keine Serien in deiner Hörbuch-Bibliothek verfügbar.\nZiehe zum Aktualisieren.",
+  "pullToLoadSeries": "Ziehe nach unten um Serien\nvon Music Assistant zu laden",
+
+  "search": "Suche",
+  "metadataApisDescription": "Künstlerbilder werden automatisch von Deezer abgerufen. Füge unten API-Schlüssel für Künstlerbiografien und Albenbeschreibungen hinzu.",
+  "lastFmApiKey": "Last.fm API-Schlüssel",
+  "lastFmApiKeyHint": "Kostenlosen Schlüssel auf last.fm/api holen",
+  "swipeToSwitchDevice": "Wischen um Gerät zu wechseln",
+  "chapterNumber": "Kapitel {number}",
+  "pcmAudio": "PCM-Audio",
+  "playOn": "Abspielen auf...",
+  "addAlbumToQueueOn": "Album zur Warteschlange hinzufügen auf...",
+  "addToQueueOn": "Zur Warteschlange hinzufügen auf...",
+  "startRadioOn": "{name} Radio starten auf...",
+  "book": "Buch",
+  "audiobookSingular": "Hörbuch",
+  "trackCount": "{count} {count, plural, =1{Song} other{Songs}}",
+  "materialYouDescription": "Systemfarben verwenden (Android 12+)",
+  "accentColor": "Akzentfarbe",
+  "players": "Geräte",
+  "preferLocalPlayer": "Lokales Gerät bevorzugen",
+  "preferLocalPlayerDescription": "Dieses Gerät immer zuerst auswählen, wenn verfügbar",
+  "smartSortPlayers": "Intelligente Sortierung",
+  "smartSortPlayersDescription": "Nach Status sortieren (spielt, an, aus) statt alphabetisch",
+  "playerStateUnavailable": "Nicht verfügbar",
+  "playerStateOff": "Aus",
+  "playerStateIdle": "Inaktiv",
+  "playerStateExternalSource": "Externe Quelle",
+  "playerSelected": "Ausgewählt",
+  "actionQueuedForSync": "Wird synchronisiert wenn online",
+  "pendingOfflineActions": "{count} ausstehende Synchronisierung",
+  "hintsAndTips": "Tipps & Hinweise",
+  "showHints": "Hinweise anzeigen",
+  "showHintsDescription": "Hilfreiche Tipps zum Entdecken von Funktionen anzeigen",
+  "pullToSelectPlayers": "Ziehen um Geräte auszuwählen",
+  "holdToSync": "Gedrückt halten zum Sync",
+  "swipeToAdjustVolume": "Wischen für Lautstärke"
+}
@@ -0,0 +1,494 @@
+{
+  "@@locale": "es",
+
+  "appTitle": "Ensemble",
+  "connecting": "Conectando...",
+  "connected": "Conectado",
+  "disconnected": "Desconectado",
+  "serverAddress": "Dirección del servidor",
+  "serverAddressHint": "ej., music.example.com o 192.168.1.100",
+  "yourName": "Tu nombre",
+  "yourFirstName": "Tu nombre de pila",
+  "portOptional": "Puerto (Opcional)",
+  "portHint": "ej., 8095 o dejar en blanco",
+  "portDescription": "Dejar en blanco para proxy inverso o puertos estándar. Introduce 8095 para conexión directa.",
+  "username": "Usuario",
+  "password": "Contraseña",
+  "detectAndConnect": "Detectar y conectar",
+  "connect": "Conectar",
+  "disconnect": "Desconectar",
+  "authServerUrlOptional": "URL del servidor de autenticación (Opcional)",
+  "authServerUrlHint": "ej., auth.example.com (si es diferente del servidor)",
+  "authServerUrlDescription": "Dejar vacío si la autenticación está en el mismo servidor",
+  "detectedAuthType": "Detectado: {authType}",
+  "@detectedAuthType": {
+    "placeholders": {
+      "authType": {
+        "type": "String"
+      }
+    }
+  },
+  "serverRequiresAuth": "Este servidor requiere autenticación",
+  "tailscaleVpnConnection": "Conexión VPN Tailscale",
+  "unencryptedConnection": "Conexión sin cifrar",
+  "usingHttpOverTailscale": "Usando HTTP sobre Tailscale (túnel cifrado)",
+  "httpsFailedUsingHttp": "HTTPS falló, usando HTTP como alternativa",
+  "httpNotEncrypted": "Conexión HTTP - los datos no están cifrados",
+  "pleaseEnterServerAddress": "Por favor, introduce la dirección de tu servidor Music Assistant",
+  "pleaseEnterName": "Por favor, introduce tu nombre",
+  "pleaseEnterValidPort": "Por favor, introduce un número de puerto válido (1-65535)",
+  "pleaseEnterCredentials": "Por favor, introduce usuario y contraseña",
+  "authFailed": "Autenticación fallida. Por favor, verifica tus credenciales.",
+  "maLoginFailed": "Inicio de sesión en Music Assistant fallido. Por favor, verifica tus credenciales.",
+  "connectionFailed": "No se pudo conectar al servidor. Por favor, verifica la dirección e inténtalo de nuevo.",
+  "detectingAuth": "Detectando autenticación...",
+  "cannotDetermineAuth": "No se pueden determinar los requisitos de autenticación. Por favor, verifica la URL del servidor.",
+  "noAuthentication": "Sin autenticación",
+  "httpBasicAuth": "Autenticación HTTP Basic",
+  "authelia": "Authelia",
+  "musicAssistantLogin": "Inicio de sesión de Music Assistant",
+  "pressBackToMinimize": "Presiona atrás de nuevo para minimizar",
+  "recentlyPlayed": "Reproducido recientemente",
+  "discoverArtists": "Descubrir artistas",
+  "discoverAlbums": "Descubrir álbumes",
+  "continueListening": "Continuar escuchando",
+  "discoverAudiobooks": "Descubrir audiolibros",
+  "discoverSeries": "Descubrir series",
+  "favoriteAlbums": "Álbumes favoritos",
+  "favoriteArtists": "Artistas favoritos",
+  "favoriteTracks": "Canciones favoritas",
+  "searchMusic": "Buscar música...",
+  "searchForContent": "Buscar artistas, álbumes o canciones",
+  "retry": "Reintentar",
+  "all": "Todo",
+  "artists": "Artistas",
+  "albums": "Álbumes",
+  "tracks": "Canciones",
+  "playlists": "Listas de reproducción",
+  "audiobooks": "Audiolibros",
+  "music": "Música",
+  "radio": "Radio",
+  "stations": "Emisoras",
+  "selectLibrary": "Seleccionar Biblioteca",
+  "noRadioStations": "No hay emisoras de radio",
+  "addRadioStationsHint": "Añade emisoras de radio en Music Assistant",
+  "searchFailed": "Búsqueda fallida. Por favor, verifica tu conexión.",
+  "queue": "Cola",
+  "playerQueue": "Cola de {playerName}",
+  "@playerQueue": {
+    "placeholders": {
+      "playerName": {
+        "type": "String"
+      }
+    }
+  },
+  "noPlayerSelected": "Ningún reproductor seleccionado",
+  "undo": "Deshacer",
+  "removedItem": "Eliminado {itemName}",
+  "@removedItem": {
+    "placeholders": {
+      "itemName": {
+        "type": "String"
+      }
+    }
+  },
+  "settings": "Ajustes",
+  "debugLogs": "Registros de depuración",
+  "themeMode": "Modo de tema",
+  "light": "Claro",
+  "dark": "Oscuro",
+  "system": "Sistema",
+  "pullToRefresh": "Desliza hacia abajo para actualizar la biblioteca y aplicar los cambios",
+  "viewDebugLogs": "Ver registros de depuración",
+  "viewAllPlayers": "Ver todos los reproductores",
+  "copyLogs": "Copiar registros",
+  "clearLogs": "Borrar registros",
+  "copyList": "Copiar lista",
+  "close": "Cerrar",
+  "allPlayersCount": "Todos los reproductores ({count})",
+  "@allPlayersCount": {
+    "placeholders": {
+      "count": {
+        "type": "int"
+      }
+    }
+  },
+  "errorLoadingPlayers": "Error al cargar reproductores: {error}",
+  "@errorLoadingPlayers": {
+    "placeholders": {
+      "error": {
+        "type": "String"
+      }
+    }
+  },
+  "logsCopied": "Registros copiados al portapapeles",
+  "logsCleared": "Registros borrados",
+  "playerListCopied": "Lista de reproductores copiada al portapapeles",
+  "noLogsYet": "Aún no hay registros",
+  "infoPlus": "Info+",
+  "warnings": "Advertencias",
+  "errors": "Errores",
+  "showingEntries": "Mostrando {filtered} de {total} entradas",
+  "@showingEntries": {
+    "placeholders": {
+      "filtered": {
+        "type": "int"
+      },
+      "total": {
+        "type": "int"
+      }
+    }
+  },
+  "thisDevice": "Este dispositivo",
+  "ghostPlayer": "Reproductor fantasma (duplicado)",
+  "unavailableCorrupt": "No disponible/Corrupto",
+  "playerId": "ID: {id}",
+  "@playerId": {
+    "placeholders": {
+      "id": {
+        "type": "String"
+      }
+    }
+  },
+  "playerInfo": "Disponible: {available} | Proveedor: {provider}",
+  "@playerInfo": {
+    "placeholders": {
+      "available": {
+        "type": "String"
+      },
+      "provider": {
+        "type": "String"
+      }
+    }
+  },
+  "shareBugReport": "Compartir informe de errores",
+  "moreOptions": "Más opciones",
+  "failedToUpdateFavorite": "Error al actualizar favorito: {error}",
+  "@failedToUpdateFavorite": {
+    "placeholders": {
+      "error": {
+        "type": "String"
+      }
+    }
+  },
+  "noPlayersAvailable": "No hay reproductores disponibles",
+  "albumAddedToQueue": "Álbum añadido a la cola",
+  "tracksAddedToQueue": "Canciones añadidas a la cola",
+  "play": "Reproducir",
+  "noPlayersFound": "No se encontraron reproductores",
+  "startingRadio": "Iniciando radio de {name}",
+  "@startingRadio": {
+    "placeholders": {
+      "name": {
+        "type": "String"
+      }
+    }
+  },
+  "failedToStartRadio": "Error al iniciar radio: {error}",
+  "@failedToStartRadio": {
+    "placeholders": {
+      "error": {
+        "type": "String"
+      }
+    }
+  },
+  "startingRadioOnPlayer": "Iniciando radio de {name} en {playerName}",
+  "@startingRadioOnPlayer": {
+    "placeholders": {
+      "name": {
+        "type": "String"
+      },
+      "playerName": {
+        "type": "String"
+      }
+    }
+  },
+  "addedRadioToQueue": "Radio de {name} añadida a la cola",
+  "@addedRadioToQueue": {
+    "placeholders": {
+      "name": {
+        "type": "String"
+      }
+    }
+  },
+  "failedToAddToQueue": "Error al añadir a la cola: {error}",
+  "@failedToAddToQueue": {
+    "placeholders": {
+      "error": {
+        "type": "String"
+      }
+    }
+  },
+  "radio": "Radio",
+  "inLibrary": "En la biblioteca",
+  "noAlbumsFound": "No se encontraron álbumes",
+  "playing": "Reproduciendo {name}",
+  "@playing": {
+    "placeholders": {
+      "name": {
+        "type": "String"
+      }
+    }
+  },
+  "playingTrack": "Reproduciendo canción",
+  "nowPlaying": "Reproduciendo ahora",
+  "markedAsFinished": "{name} marcado como terminado",
+  "@markedAsFinished": {
+    "placeholders": {
+      "name": {
+        "type": "String"
+      }
+    }
+  },
+  "failedToMarkFinished": "Error al marcar como terminado: {error}",
+  "@failedToMarkFinished": {
+    "placeholders": {
+      "error": {
+        "type": "String"
+      }
+    }
+  },
+  "markedAsUnplayed": "{name} marcado como no reproducido",
+  "@markedAsUnplayed": {
+    "placeholders": {
+      "name": {
+        "type": "String"
+      }
+    }
+  },
+  "failedToMarkUnplayed": "Error al marcar como no reproducido: {error}",
+  "@failedToMarkUnplayed": {
+    "placeholders": {
+      "error": {
+        "type": "String"
+      }
+    }
+  },
+  "failedToPlay": "Error al reproducir: {error}",
+  "@failedToPlay": {
+    "placeholders": {
+      "error": {
+        "type": "String"
+      }
+    }
+  },
+  "markAsFinished": "Marcar como terminado",
+  "markAsUnplayed": "Marcar como no reproducido",
+  "byAuthor": "Por {author}",
+  "@byAuthor": {
+    "placeholders": {
+      "author": {
+        "type": "String"
+      }
+    }
+  },
+  "audiobookCount": "{count} audiolibro(s)",
+  "@audiobookCount": {
+    "placeholders": {
+      "count": {
+        "type": "int"
+      }
+    }
+  },
+  "loading": "Cargando...",
+  "bookCount": "{count} libro(s)",
+  "@bookCount": {
+    "placeholders": {
+      "count": {
+        "type": "int"
+      }
+    }
+  },
+  "books": "Libros",
+  "noFavoriteAudiobooks": "No hay audiolibros favoritos",
+  "tapHeartAudiobook": "Toca el corazón en un audiolibro para añadirlo a favoritos",
+  "noAudiobooks": "No hay audiolibros",
+  "addAudiobooksHint": "Añade audiolibros a tu biblioteca para verlos aquí",
+  "noFavoriteArtists": "No hay artistas favoritos",
+  "tapHeartArtist": "Toca el corazón en un artista para añadirlo a favoritos",
+  "noFavoriteAlbums": "No hay álbumes favoritos",
+  "tapHeartAlbum": "Toca el corazón en un álbum para añadirlo a favoritos",
+  "noFavoritePlaylists": "No hay listas de reproducción favoritas",
+  "tapHeartPlaylist": "Toca el corazón en una lista para añadirla a favoritos",
+  "noFavoriteTracks": "No hay canciones favoritas",
+  "longPressTrackHint": "Mantén presionada una canción y toca el corazón para añadirla a favoritos",
+  "loadSeries": "Cargar series",
+  "notConnected": "No conectado a Music Assistant",
+  "notConnectedTitle": "No conectado",
+  "connectHint": "Conéctate a tu servidor Music Assistant para empezar a escuchar",
+  "configureServer": "Configurar servidor",
+  "noArtistsFound": "No se encontraron artistas",
+  "noTracksFound": "No se encontraron canciones",
+  "noPlaylistsFound": "No se encontraron listas de reproducción",
+  "queueIsEmpty": "La cola está vacía",
+  "noResultsFound": "No se encontraron resultados",
+  "refresh": "Actualizar",
+  "debugConsole": "Consola de depuración",
+  "copy": "Copiar",
+  "clear": "Borrar",
+  "noLogsToCopy": "No hay registros para copiar",
+  "noDebugLogsYet": "Aún no hay registros de depuración. Intenta detectar autenticación.",
+  "showDebug": "Mostrar depuración",
+  "hideDebug": "Ocultar depuración",
+  "chapters": "Capítulos",
+  "noChapters": "Sin capítulos",
+  "noChapterInfo": "Este audiolibro no tiene información de capítulos",
+  "errorSeeking": "Error al buscar: {error}",
+  "@errorSeeking": {
+    "placeholders": {
+      "error": {
+        "type": "String"
+      }
+    }
+  },
+  "error": "Error: {error}",
+  "@error": {
+    "placeholders": {
+      "error": {
+        "type": "String"
+      }
+    }
+  },
+  "home": "Inicio",
+  "library": "Biblioteca",
+  "homeScreen": "Pantalla de inicio",
+  "metadataApis": "APIs de metadatos",
+  "theme": "Tema",
+  "materialYou": "Material You",
+  "adaptiveTheme": "Tema adaptativo",
+  "language": "Idioma",
+  "english": "Inglés",
+  "german": "Alemán",
+  "spanish": "Español",
+  "noTracksInPlaylist": "No hay canciones en la lista",
+  "sortAlphabetically": "Ordenar alfabéticamente",
+  "sortByYear": "Ordenar por año",
+  "sortBySeriesOrder": "Ordenar por orden de serie",
+  "listView": "Vista de lista",
+  "gridView": "Vista de cuadrícula",
+  "noBooksInSeries": "No se encontraron libros en esta serie",
+  "artist": "Artista",
+  "showRecentlyPlayedAlbums": "Mostrar álbumes reproducidos recientemente",
+  "showRandomArtists": "Mostrar artistas aleatorios para descubrir",
+  "showRandomAlbums": "Mostrar álbumes aleatorios para descubrir",
+  "showAudiobooksInProgress": "Mostrar audiolibros en progreso",
+  "showRandomAudiobooks": "Mostrar audiolibros aleatorios para descubrir",
+  "showRandomSeries": "Mostrar series de audiolibros aleatorias para descubrir",
+  "showFavoriteAlbums": "Mostrar una fila de tus álbumes favoritos",
+  "showFavoriteArtists": "Mostrar una fila de tus artistas favoritos",
+  "showFavoriteTracks": "Mostrar una fila de tus canciones favoritas",
+  "extractColorsFromArtwork": "Extraer colores de las portadas de álbumes y artistas",
+  "chooseHomeScreenRows": "Elige qué filas mostrar en la pantalla de inicio",
+  "addedToFavorites": "Añadido a favoritos",
+  "removedFromFavorites": "Eliminado de favoritos",
+  "unknown": "Desconocido",
+  "noUpcomingTracks": "No hay canciones próximas",
+  "showAll": "Mostrar todo",
+  "showFavoritesOnly": "Mostrar solo favoritos",
+  "changeView": "Cambiar vista",
+  "authors": "Autores",
+  "series": "Series",
+  "shows": "Programas",
+  "podcasts": "Podcasts",
+  "podcastSupportComingSoon": "Soporte de podcasts próximamente",
+  "playlist": "Lista de reproducción",
+  "connectionError": "Error de conexión",
+  "twoColumnGrid": "Cuadrícula de 2 columnas",
+  "threeColumnGrid": "Cuadrícula de 3 columnas",
+  "fromProviders": "De proveedores",
+  "resume": "Continuar",
+  "about": "Acerca de",
+  "inProgress": "En progreso",
+  "narratedBy": "Narrado por {narrators}",
+  "@narratedBy": {
+    "placeholders": {
+      "narrators": {
+        "type": "String"
+      }
+    }
+  },
+  "unknownNarrator": "Narrador desconocido",
+  "unknownAuthor": "Autor desconocido",
+  "loadingChapters": "Cargando capítulos...",
+  "noChapterInfoAvailable": "No hay información de capítulos disponible",
+  "percentComplete": "{percent}% completado",
+  "@percentComplete": {
+    "placeholders": {
+      "percent": {
+        "type": "int"
+      }
+    }
+  },
+  "theAudioDbApiKey": "Clave API de TheAudioDB",
+  "theAudioDbApiKeyHint": "Usa \"2\" para nivel gratuito o clave premium",
+  "audiobookLibraries": "Bibliotecas de audiolibros",
+  "chooseAudiobookLibraries": "Elige qué bibliotecas de Audiobookshelf incluir",
+  "unknownLibrary": "Biblioteca desconocida",
+  "noSeriesFound": "No se encontraron series",
+  "ensembleBugReport": "Informe de errores de Ensemble",
+  "byOwner": "Por {owner}",
+  "@byOwner": {
+    "placeholders": {
+      "owner": {
+        "type": "String"
+      }
+    }
+  },
+  "noSeriesAvailable": "No hay series disponibles en tu biblioteca de audiolibros.\nDesliza para actualizar.",
+  "pullToLoadSeries": "Desliza hacia abajo para cargar series\ndesde Music Assistant",
+  "search": "Buscar",
+  "metadataApisDescription": "Las imágenes de artistas se obtienen automáticamente de Deezer. Añade claves API a continuación para biografías de artistas y descripciones de álbumes.",
+  "lastFmApiKey": "Clave API de Last.fm",
+  "lastFmApiKeyHint": "Obtén una clave gratuita en last.fm/api",
+  "swipeToSwitchDevice": "Desliza para cambiar dispositivo",
+  "chapterNumber": "Capítulo {number}",
+  "@chapterNumber": {
+    "placeholders": {
+      "number": {
+        "type": "int"
+      }
+    }
+  },
+  "pcmAudio": "Audio PCM",
+  "playOn": "Reproducir en...",
+  "addAlbumToQueueOn": "Añadir álbum a la cola en...",
+  "addToQueueOn": "Añadir a la cola en...",
+  "startRadioOn": "Iniciar radio de {name} en...",
+  "@startRadioOn": {
+    "placeholders": {
+      "name": {
+        "type": "String"
+      }
+    }
+  },
+  "book": "libro",
+  "audiobookSingular": "audiolibro",
+  "trackCount": "{count} {count, plural, =1{canción} other{canciones}}",
+  "@trackCount": {
+    "placeholders": {
+      "count": {
+        "type": "int"
+      }
+    }
+  },
+  "materialYouDescription": "Usar colores del sistema (Android 12+)",
+  "accentColor": "Color de acento",
+  "players": "Dispositivos",
+  "preferLocalPlayer": "Preferir dispositivo local",
+  "preferLocalPlayerDescription": "Seleccionar siempre este dispositivo primero cuando esté disponible",
+  "smartSortPlayers": "Orden inteligente",
+  "smartSortPlayersDescription": "Ordenar por estado (reproduciendo, encendido, apagado) en lugar de alfabéticamente",
+  "playerStateUnavailable": "No disponible",
+  "playerStateOff": "Apagado",
+  "playerStateIdle": "Inactivo",
+  "playerStateExternalSource": "Fuente Externa",
+  "playerSelected": "Seleccionado",
+  "actionQueuedForSync": "Se sincronizará cuando esté en línea",
+  "pendingOfflineActions": "{count} sincronización pendiente",
+  "hintsAndTips": "Consejos y Sugerencias",
+  "showHints": "Mostrar Sugerencias",
+  "showHintsDescription": "Mostrar consejos útiles para descubrir funciones",
+  "pullToSelectPlayers": "Desliza para seleccionar dispositivos",
+  "holdToSync": "Mantén presionado para sync",
+  "swipeToAdjustVolume": "Desliza para ajustar volumen"
+}
@@ -3,6 +3,9 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
 import 'package:audio_service/audio_service.dart';
+import 'package:flutter_localizations/flutter_localizations.dart';
+import 'l10n/app_localizations.dart';
+import 'providers/locale_provider.dart';
 import 'providers/music_assistant_provider.dart';
 import 'providers/navigation_provider.dart';
 import 'screens/home_screen.dart';
@@ -37,6 +40,10 @@ Future<void> main() async {
  // Migrate existing ownerName to profile (one-time for existing users)
  await ProfileService.instance.migrateFromOwnerName();

+  // Migrate credentials to secure storage (one-time for existing users)
+  await SettingsService.migrateToSecureStorage();
+  _logger.log('🔐 Secure storage migration complete');
+
  // Load library from cache for instant startup
  await SyncService.instance.loadFromCache();
  _logger.log('📦 Library cache loaded');
@@ -87,6 +94,7 @@ class MusicAssistantApp extends StatefulWidget {
 class _MusicAssistantAppState extends State<MusicAssistantApp> with WidgetsBindingObserver {
  late MusicAssistantProvider _musicProvider;
  late ThemeProvider _themeProvider;
+  late LocaleProvider _localeProvider;
  final _hardwareVolumeService = HardwareVolumeService();
  StreamSubscription? _volumeUpSub;
  StreamSubscription? _volumeDownSub;
@@ -101,6 +109,7 @@ class _MusicAssistantAppState extends State<MusicAssistantApp> with WidgetsBindi
    super.initState();
    _musicProvider = MusicAssistantProvider();
    _themeProvider = ThemeProvider();
+    _localeProvider = LocaleProvider();
    WidgetsBinding.instance.addObserver(this);
    _initHardwareVolumeControl();
    // Listen to player selection changes to toggle volume interception
@@ -167,11 +176,20 @@ class _MusicAssistantAppState extends State<MusicAssistantApp> with WidgetsBindi
  @override
  Future<bool> didPopRoute() async {
    // Intercept back button at app level - runs BEFORE Navigator processes it
-    // If player is expanded, collapse it and consume the back gesture
+    // Priority order: device list > expanded player > normal navigation
+
+    // Device list has highest priority - dismiss it first
+    if (GlobalPlayerOverlay.isPlayerRevealVisible) {
+      GlobalPlayerOverlay.dismissPlayerReveal();
+      return true; // We handled it, don't let Navigator process it
+    }
+
+    // Then check expanded player
    if (GlobalPlayerOverlay.isPlayerExpanded) {
      GlobalPlayerOverlay.collapsePlayer();
      return true; // We handled it, don't let Navigator process it
    }
+
    // Let Navigator handle the back gesture normally
    return super.didPopRoute();
  }
@@ -197,9 +215,10 @@ class _MusicAssistantAppState extends State<MusicAssistantApp> with WidgetsBindi
      providers: [
        ChangeNotifierProvider.value(value: _musicProvider),
        ChangeNotifierProvider.value(value: _themeProvider),
+        ChangeNotifierProvider.value(value: _localeProvider),
      ],
-      child: Consumer<ThemeProvider>(
-        builder: (context, themeProvider, _) {
+      child: Consumer2<ThemeProvider, LocaleProvider>(
+        builder: (context, themeProvider, localeProvider, _) {
          return FutureBuilder<(ColorScheme, ColorScheme)?>(
            future: themeProvider.useMaterialTheme
                ? SystemThemeHelper.getSystemColorSchemes()
@@ -210,14 +229,21 @@ class _MusicAssistantAppState extends State<MusicAssistantApp> with WidgetsBindi
              ColorScheme? darkColorScheme;

              if (themeProvider.useMaterialTheme && snapshot.hasData && snapshot.data != null) {
-                // Use system color schemes
+                // Use system color schemes, but override background to match app design
+                // Material You doesn't set background consistently, causing black screen issues
                final (light, dark) = snapshot.data!;
-                lightColorScheme = light;
-                darkColorScheme = dark;
+                lightColorScheme = light.copyWith(
+                  surface: light.surface,
+                  background: const Color(0xFFFAFAFA), // App's preferred light background
+                );
+                darkColorScheme = dark.copyWith(
+                  surface: const Color(0xFF2a2a2a), // App's preferred dark surface
+                  background: const Color(0xFF1a1a1a), // App's preferred dark background
+                );
              } else {
-                // Use brand color schemes
-                lightColorScheme = brandLightColorScheme;
-                darkColorScheme = brandDarkColorScheme;
+                // Use custom color from theme provider
+                lightColorScheme = generateLightColorScheme(themeProvider.customColor);
+                darkColorScheme = generateDarkColorScheme(themeProvider.customColor);
              }

              return SystemUIWrapper(
@@ -228,6 +254,15 @@ class _MusicAssistantAppState extends State<MusicAssistantApp> with WidgetsBindi
                  navigatorKey: navigationProvider.navigatorKey,
                  title: 'Ensemble',
                  debugShowCheckedModeBanner: false,
+                  // Localization
+                  localizationsDelegates: const [
+                    S.delegate,
+                    GlobalMaterialLocalizations.delegate,
+                    GlobalWidgetsLocalizations.delegate,
+                    GlobalCupertinoLocalizations.delegate,
+                  ],
+                  supportedLocales: S.supportedLocales,
+                  locale: localeProvider.locale,
                  themeMode: themeProvider.themeMode,
                  theme: AppTheme.lightTheme(colorScheme: lightColorScheme),
                  darkTheme: AppTheme.darkTheme(colorScheme: darkColorScheme),
@@ -324,7 +359,16 @@ class _SystemUIWrapperState extends State<SystemUIWrapper> {
  }
 }

-/// Startup widget that checks if user is logged in and auto-connects
+/// Startup widget that checks if user is logged in and auto-connects.
+///
+/// CRITICAL: This widget is the single source of truth for the startup transition.
+/// It loads settings FIRST (before connection), then waits for the appropriate
+/// conditions before showing HomeScreen. This eliminates the race condition between
+/// AppStartup and GlobalPlayerOverlay that caused the home screen flash.
+///
+/// For first-time users: Holds dark screen until connected + player selected,
+/// so the welcome overlay can appear seamlessly.
+/// For returning users: Transitions as soon as connection is established.
 class AppStartup extends StatefulWidget {
  const AppStartup({super.key});

@@ -337,9 +381,32 @@ class _AppStartupState extends State<AppStartup> {
  String? _savedServerUrl;
  bool _connectionAttempted = false;

+  // Welcome system state - loaded FIRST before connection check
+  bool _settingsLoaded = false;
+  bool _hasCompletedOnboarding = true; // Default to true (no welcome needed)
+
  @override
  void initState() {
    super.initState();
+    _loadSettingsFirst();
+  }
+
+  /// Load settings BEFORE checking connection.
+  /// This ensures we know if this is a first-time user before transitioning.
+  Future<void> _loadSettingsFirst() async {
+    // Load onboarding state first - this is critical for determining
+    // when to transition to HomeScreen
+    _hasCompletedOnboarding = await SettingsService.getHasCompletedOnboarding();
+
+    if (!mounted) return;
+
+    setState(() {
+      _settingsLoaded = true;
+    });
+
+    _logger.log('🚀 AppStartup: Settings loaded, hasCompletedOnboarding=$_hasCompletedOnboarding');
+
+    // Now check connection
    _checkAndConnect();
  }

@@ -364,14 +431,30 @@ class _AppStartupState extends State<AppStartup> {
      // Just wait for it to complete or timeout
      _logger.log('🚀 AppStartup: Waiting for provider auto-connection to $serverUrl');

+      // For first-time users, we need to wait for both connection AND player selection
+      // so the welcome overlay can appear immediately without home screen flash.
+      // For returning users, just wait for connection.
+      final needsWelcome = !_hasCompletedOnboarding;
+
      // Give the provider time to connect (it restores credentials and connects in _initialize)
      // Check connection state periodically
      for (var i = 0; i < 20; i++) {
        await Future.delayed(const Duration(milliseconds: 250));
-        if (provider.isConnected) {
-          _logger.log('🚀 AppStartup: Connection established');
-          break;
+
+        if (needsWelcome) {
+          // First-time user: wait for connection + player selection
+          if (provider.isConnected && provider.selectedPlayer != null) {
+            _logger.log('🚀 AppStartup: First-time user ready (connected + player selected)');
+            break;
+          }
+        } else {
+          // Returning user: just wait for connection
+          if (provider.isConnected) {
+            _logger.log('🚀 AppStartup: Connection established');
+            break;
+          }
        }
+
        if (provider.connectionState == MAConnectionState.error) {
          _logger.log('🚀 AppStartup: Connection failed with error');
          break;
@@ -398,7 +481,8 @@ class _AppStartupState extends State<AppStartup> {
  @override
  Widget build(BuildContext context) {
    // Show loading while checking settings or connecting
-    if (!_connectionAttempted || _isConnecting) {
+    // CRITICAL: Don't transition until settings are loaded - this prevents the race
+    if (!_settingsLoaded || !_connectionAttempted || _isConnecting) {
      return Scaffold(
        backgroundColor: const Color(0xFF1a1a1a),
        body: Center(
@@ -110,7 +110,8 @@ class MediaItem {
      'media_type': mediaType.name,
      if (sortName != null) 'sort_name': sortName,
      if (uri != null) 'uri': uri,
-      if (providerMappings != null) 'provider_mappings': providerMappings,
+      if (providerMappings != null)
+        'provider_mappings': providerMappings!.map((m) => m.toJson()).toList(),
      if (metadata != null) 'metadata': metadata,
      if (favorite != null) 'favorite': favorite,
      if (position != null) 'position': position,
@@ -12,6 +12,11 @@ class Player {
  final bool? volumeMuted;
  final double? elapsedTime; // Seconds elapsed in current track
  final double? elapsedTimeLastUpdated; // Unix timestamp when elapsed_time was last updated
+  final List<String>? groupMembers; // List of player IDs in sync group (includes self)
+  final String? syncedTo; // Player ID this player is synced to (null if leader or not synced)
+  final String? activeSource; // The currently active source for this player
+  final bool isExternalSource; // True when an external source (optical, Spotify, etc.) is active
+  final String? appId; // The app_id from MA - 'music_assistant' when MA is playing, else external source

  Player({
    required this.playerId,
@@ -25,6 +30,11 @@ class Player {
    this.volumeMuted,
    this.elapsedTime,
    this.elapsedTimeLastUpdated,
+    this.groupMembers,
+    this.syncedTo,
+    this.activeSource,
+    this.isExternalSource = false,
+    this.appId,
  });

  /// Create a copy of this Player with some fields replaced
@@ -40,6 +50,11 @@ class Player {
    bool? volumeMuted,
    double? elapsedTime,
    double? elapsedTimeLastUpdated,
+    List<String>? groupMembers,
+    String? syncedTo,
+    String? activeSource,
+    bool? isExternalSource,
+    String? appId,
  }) {
    return Player(
      playerId: playerId ?? this.playerId,
@@ -53,6 +68,11 @@ class Player {
      volumeMuted: volumeMuted ?? this.volumeMuted,
      elapsedTime: elapsedTime ?? this.elapsedTime,
      elapsedTimeLastUpdated: elapsedTimeLastUpdated ?? this.elapsedTimeLastUpdated,
+      groupMembers: groupMembers ?? this.groupMembers,
+      syncedTo: syncedTo ?? this.syncedTo,
+      activeSource: activeSource ?? this.activeSource,
+      isExternalSource: isExternalSource ?? this.isExternalSource,
+      appId: appId ?? this.appId,
    );
  }

@@ -61,8 +81,37 @@ class Player {
  bool get isMuted => volumeMuted ?? false;
  int get volume => volumeLevel ?? 0;

+  // Group properties
+  // A player is grouped if it's a leader with members OR a child synced to another
+  bool get isGrouped => (groupMembers != null && groupMembers!.length > 1) || syncedTo != null;
+  bool get isGroupLeader => groupMembers != null && groupMembers!.length > 1 && syncedTo == null;
+  bool get isGroupChild => syncedTo != null;
+
+  // A player is manually synced if it's synced TO another player (child of a sync group)
+  // This excludes pre-configured MA speaker groups which have groupMembers but no syncedTo
+  // Used for yellow border highlight - only shows for players the user manually synced
+  bool get isManuallySynced => syncedTo != null;
+
  // Track when this Player object was created (for local interpolation fallback)
  static final Map<String, double> _playerCreationTimes = {};
+  static const int _maxCreationTimesEntries = 50;
+
+  /// Clean up old creation time entries using LRU eviction
+  static void _cleanupCreationTimes() {
+    if (_playerCreationTimes.length <= _maxCreationTimesEntries) return;
+
+    // Sort by timestamp value (oldest first) for true LRU eviction
+    final sortedEntries = _playerCreationTimes.entries.toList()
+      ..sort((a, b) => a.value.compareTo(b.value));
+
+    // Remove oldest entries until we're at target size
+    final entriesToRemove = sortedEntries.take(
+      _playerCreationTimes.length - _maxCreationTimesEntries,
+    );
+    for (final entry in entriesToRemove) {
+      _playerCreationTimes.remove(entry.key);
+    }
+  }

  // Calculate current elapsed time (interpolated if playing)
  double get currentElapsedTime {
@@ -104,13 +153,8 @@ class Player {
    if (!_playerCreationTimes.containsKey(creationKey)) {
      // First time seeing this elapsed_time - record when we saw it
      _playerCreationTimes[creationKey] = now;
-      // Clean up old entries to prevent memory leak
-      if (_playerCreationTimes.length > 100) {
-        final keysToRemove = _playerCreationTimes.keys.take(50).toList();
-        for (final key in keysToRemove) {
-          _playerCreationTimes.remove(key);
-        }
-      }
+      // Clean up old entries to prevent memory leak (LRU eviction)
+      _cleanupCreationTimes();
    }

    final creationTime = _playerCreationTimes[creationKey]!;
@@ -164,6 +208,68 @@ class Player {
    elapsedTime ??= topLevelElapsedTime;
    elapsedTimeLastUpdated ??= topLevelLastUpdated;

+    // Parse group members - MA returns this as a list of player IDs
+    final groupMembersList = json['group_members'] as List<dynamic>?;
+    final groupMembers = groupMembersList?.map((e) => e.toString()).toList();
+
+    // Parse synced_to - the player ID this player is synced to
+    final syncedTo = json['synced_to'] as String?;
+
+    // Parse active_source - the currently active source for this player
+    final activeSource = json['active_source'] as String?;
+
+    // Detect external source (optical, Spotify, AirPlay, etc.)
+    // Primary indicator: app_id - if not 'music_assistant', it's an external source
+    // Secondary indicators: URI patterns and media_type
+    bool isExternalSource = false;
+
+    // Check app_id first - this is the most reliable indicator for DLNA players
+    // When MA is playing: app_id = 'music_assistant'
+    // When external source: app_id = 'http', 'spotify', etc.
+    final appId = json['app_id'] as String?;
+    if (appId != null && appId.isNotEmpty && appId != 'music_assistant') {
+      // app_id is set but not 'music_assistant' - external source is active
+      isExternalSource = true;
+    }
+
+    // Also check current_media for additional external source indicators
+    if (!isExternalSource && json.containsKey('current_media')) {
+      final currentMedia = json['current_media'] as Map<String, dynamic>?;
+      if (currentMedia != null) {
+        final uri = currentMedia['uri'] as String?;
+        final mediaType = currentMedia['media_type'] as String?;
+
+        // External source indicators:
+        // 1. URI is a simple identifier like 'optical', 'line_in', 'bluetooth', 'hdmi'
+        // 2. URI starts with external protocols: 'spotify://', 'airplay://', etc.
+        // 3. Media type is 'unknown' (MA doesn't recognize the source)
+        if (uri != null) {
+          final uriLower = uri.toLowerCase();
+          // Simple external source identifiers (no :// or /)
+          final isSimpleExternalId = !uri.contains('://') && !uri.contains('/') &&
+              (uriLower == 'optical' || uriLower == 'line_in' || uriLower == 'bluetooth' ||
+               uriLower == 'hdmi' || uriLower == 'tv' || uriLower == 'aux' ||
+               uriLower == 'coaxial' || uriLower == 'toslink');
+          // External streaming protocols
+          final isExternalProtocol = uriLower.startsWith('spotify://') ||
+              uriLower.startsWith('airplay://') ||
+              uriLower.startsWith('cast://') ||
+              uriLower.startsWith('bluetooth://');
+
+          isExternalSource = isSimpleExternalId || isExternalProtocol;
+        }
+
+        // Also check media_type - 'unknown' often indicates external source
+        if (!isExternalSource && mediaType == 'unknown') {
+          // If media_type is unknown and URI doesn't look like MA content, it's external
+          final uri = currentMedia['uri'] as String?;
+          if (uri != null && !uri.startsWith('library://') && !uri.contains('://track/')) {
+            isExternalSource = true;
+          }
+        }
+      }
+    }
+
    return Player(
      playerId: json['player_id'] as String,
      name: json['name'] as String,
@@ -176,6 +282,11 @@ class Player {
      volumeMuted: json['volume_muted'] as bool?,
      elapsedTime: elapsedTime,
      elapsedTimeLastUpdated: elapsedTimeLastUpdated,
+      groupMembers: groupMembers,
+      syncedTo: syncedTo,
+      activeSource: activeSource,
+      isExternalSource: isExternalSource,
+      appId: appId,
    );
  }

@@ -192,6 +303,11 @@ class Player {
      if (volumeMuted != null) 'volume_muted': volumeMuted,
      if (elapsedTime != null) 'elapsed_time': elapsedTime,
      if (elapsedTimeLastUpdated != null) 'elapsed_time_last_updated': elapsedTimeLastUpdated,
+      if (groupMembers != null) 'group_members': groupMembers,
+      if (syncedTo != null) 'synced_to': syncedTo,
+      if (activeSource != null) 'active_source': activeSource,
+      'is_external_source': isExternalSource,
+      if (appId != null) 'app_id': appId,
    };
  }
 }
@@ -189,7 +189,9 @@ class ConnectionProvider with ChangeNotifier {
            _logger.log('✅ MA authentication successful');
            onAuthenticated?.call();
          } else if (state == MAConnectionState.disconnected) {
-            _cacheService.clearAll();
+            // DON'T clear caches on disconnect - keep showing cached data
+            // This allows instant UI display when app resumes or reconnects
+            // Caches will be refreshed when connection is restored
            onDisconnected?.call();
          }
        },
@@ -215,6 +217,12 @@ class ConnectionProvider with ChangeNotifier {
  Future<void> disconnect() async {
    await _api?.disconnect();
    _connectionState = MAConnectionState.disconnected;
+    // DON'T clear caches on disconnect - keep showing cached data for instant reconnect
+    notifyListeners();
+  }
+
+  /// Clear all caches and state (for logout or server change)
+  void clearCachesOnLogout() {
    _cacheService.clearAll();
    notifyListeners();
  }
@@ -4,6 +4,7 @@ import '../services/music_assistant_api.dart';
 import '../services/debug_logger.dart';
 import '../services/error_handler.dart';
 import '../services/cache_service.dart';
+import '../services/settings_service.dart';
 import '../constants/timings.dart';

 /// Provider for managing library data (artists, albums, tracks, playlists)
@@ -138,8 +139,12 @@ class LibraryProvider with ChangeNotifier {
      _error = null;
      notifyListeners();

+      // Read artist filter setting - when ON, only fetch artists that have albums
+      final showOnlyArtistsWithAlbums = await SettingsService.getShowOnlyArtistsWithAlbums();
+      _logger.log('🎨 loadLibrary using albumArtistsOnly: $showOnlyArtistsWithAlbums');
+
      final results = await Future.wait([
-        _api!.getArtists(limit: LibraryConstants.maxLibraryItems),
+        _api!.getArtists(limit: LibraryConstants.maxLibraryItems, albumArtistsOnly: showOnlyArtistsWithAlbums),
        _api!.getAlbums(limit: LibraryConstants.maxLibraryItems),
        _api!.getTracks(limit: LibraryConstants.maxLibraryItems),
      ]);
@@ -166,10 +171,14 @@ class LibraryProvider with ChangeNotifier {
      _error = null;
      notifyListeners();

+      // Read artist filter setting - when ON, only fetch artists that have albums
+      final showOnlyArtistsWithAlbums = await SettingsService.getShowOnlyArtistsWithAlbums();
+
      _artists = await _api!.getArtists(
        limit: limit ?? LibraryConstants.maxLibraryItems,
        offset: offset,
        search: search,
+        albumArtistsOnly: showOnlyArtistsWithAlbums,
      );

      _isLoading = false;
@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+import '../services/settings_service.dart';
+
+class LocaleProvider extends ChangeNotifier {
+  Locale? _locale; // null = system default
+
+  LocaleProvider() {
+    _loadLocale();
+  }
+
+  Locale? get locale => _locale;
+
+  Future<void> _loadLocale() async {
+    final savedLocale = await SettingsService.getLocale();
+    if (savedLocale != null) {
+      _locale = Locale(savedLocale);
+    }
+    notifyListeners();
+  }
+
+  Future<void> setLocale(Locale? locale) async {
+    _locale = locale;
+    await SettingsService.saveLocale(locale?.languageCode);
+    notifyListeners();
+  }
+
+  /// Returns the display name for a locale
+  static String getDisplayName(String? languageCode, BuildContext context) {
+    switch (languageCode) {
+      case 'en':
+        return 'English';
+      case 'de':
+        return 'Deutsch';
+      case null:
+        return 'System';
+      default:
+        return languageCode;
+    }
+  }
+}
@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'package:flutter/foundation.dart';
+import 'package:flutter/painting.dart';
 import '../models/media_item.dart';
 import '../models/player.dart';
 import '../services/music_assistant_api.dart';
@@ -558,28 +559,28 @@ class PlayerProvider with ChangeNotifier {
        if (playerToSelect == null) {
          final lastSelectedPlayerId = await SettingsService.getLastSelectedPlayerId();

+          // Priority 1: Last selected player
          if (lastSelectedPlayerId != null) {
-            try {
-              playerToSelect = _availablePlayers.firstWhere(
-                (p) => p.playerId == lastSelectedPlayerId && p.available,
-              );
-            } catch (e) {}
+            playerToSelect = _availablePlayers.cast<Player?>().firstWhere(
+              (p) => p!.playerId == lastSelectedPlayerId && p.available,
+              orElse: () => null,
+            );
          }

+          // Priority 2: Built-in (local) player
          if (playerToSelect == null && builtinPlayerId != null) {
-            try {
-              playerToSelect = _availablePlayers.firstWhere(
-                (p) => p.playerId == builtinPlayerId && p.available,
-              );
-            } catch (e) {}
+            playerToSelect = _availablePlayers.cast<Player?>().firstWhere(
+              (p) => p!.playerId == builtinPlayerId && p.available,
+              orElse: () => null,
+            );
          }

+          // Priority 3: Currently playing player (exclude external sources - not playing MA content)
          if (playerToSelect == null) {
-            try {
-              playerToSelect = _availablePlayers.firstWhere(
-                (p) => p.state == 'playing' && p.available,
-              );
-            } catch (e) {}
+            playerToSelect = _availablePlayers.cast<Player?>().firstWhere(
+              (p) => p!.state == 'playing' && p.available && !p.isExternalSource,
+              orElse: () => null,
+            );
          }

          if (playerToSelect == null) {
@@ -905,10 +906,10 @@ class PlayerProvider with ChangeNotifier {
    }
  }

-  Future<void> toggleShuffle(String queueId) async {
+  Future<void> toggleShuffle(String queueId, bool shuffleEnabled) async {
    if (_api == null) return;
    try {
-      await _api!.toggleShuffle(queueId);
+      await _api!.toggleShuffle(queueId, shuffleEnabled);
    } catch (e) {
      ErrorHandler.logError('Toggle shuffle', e);
      rethrow;
@@ -10,16 +10,21 @@ import '../services/metadata_service.dart';
 import '../services/debug_logger.dart';
 import '../services/recently_played_service.dart';
 import '../widgets/global_player_overlay.dart';
+import '../widgets/player_picker_sheet.dart';
+import '../l10n/app_localizations.dart';
 import 'artist_details_screen.dart';

 class AlbumDetailsScreen extends StatefulWidget {
  final Album album;
  final String? heroTagSuffix;
+  /// Initial image URL from the source (e.g., AlbumCard) for seamless hero animation
+  final String? initialImageUrl;

  const AlbumDetailsScreen({
-    super.key, 
+    super.key,
    required this.album,
    this.heroTagSuffix,
+    this.initialImageUrl,
  });

  @override
@@ -31,43 +36,51 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
  List<Track> _tracks = [];
  bool _isLoading = true;
  bool _isFavorite = false;
+  bool _isInLibrary = false;
  ColorScheme? _lightColorScheme;
  ColorScheme? _darkColorScheme;
  int? _expandedTrackIndex;
  bool _isDescriptionExpanded = false;
  String? _albumDescription;
-  
+  Album? _freshAlbum; // Full album data with image metadata
+
+  /// Get the best album data available (fresh with images, or widget.album as fallback)
+  Album get _displayAlbum => _freshAlbum ?? widget.album;
+
  String get _heroTagSuffix => widget.heroTagSuffix != null ? '_${widget.heroTagSuffix}' : '';

  @override
  void initState() {
    super.initState();
    _isFavorite = widget.album.favorite ?? false;
+    _isInLibrary = widget.album.inLibrary;
    _loadTracks();
    _loadAlbumDescription();
-    _refreshFavoriteStatus();

-    // CRITICAL FIX: Defer color extraction until after the transition completes
-    // This prevents expensive palette extraction during hero animation
-    // Wait for the first frame to be painted, then extract colors
+    // CRITICAL FIX: Defer both fresh data loading AND color extraction until
+    // after the hero animation completes. This prevents:
+    // 1. setState with new image URL during animation → grey icon flash
+    // 2. Expensive palette extraction blocking animation frames
    WidgetsBinding.instance.addPostFrameCallback((_) {
-      // Add small delay to ensure transition is complete
+      // 350ms matches FadeSlidePageRoute duration (300ms) + buffer
      Future.delayed(const Duration(milliseconds: 350), () {
        if (mounted) {
+          _loadFreshAlbumData();
          _extractColors();
        }
      });
    });
  }

-  Future<void> _refreshFavoriteStatus() async {
+  /// Load fresh album data from API to get full metadata including images
+  Future<void> _loadFreshAlbumData() async {
    final maProvider = context.read<MusicAssistantProvider>();
    if (maProvider.api == null) return;

    // Need a URI to fetch fresh album data
    final albumUri = widget.album.uri;
    if (albumUri == null || albumUri.isEmpty) {
-      _logger.log('Cannot refresh favorite status: album has no URI');
+      _logger.log('Cannot load fresh album: album has no URI');
      return;
    }

@@ -75,17 +88,20 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
      final freshAlbum = await maProvider.api!.getAlbumByUri(albumUri);
      if (freshAlbum != null && mounted) {
        setState(() {
+          _freshAlbum = freshAlbum;
          _isFavorite = freshAlbum.favorite ?? false;
        });
+        // Re-extract colors now that we have fresh album with images
+        _extractColors();
      }
    } catch (e) {
-      _logger.log('Error refreshing favorite status: $e');
+      _logger.log('Error loading fresh album data: $e');
    }
  }

  Future<void> _extractColors() async {
    final maProvider = context.read<MusicAssistantProvider>();
-    final imageUrl = maProvider.getImageUrl(widget.album, size: 512);
+    final imageUrl = maProvider.getImageUrl(_displayAlbum, size: 512);

    if (imageUrl == null) return;

@@ -107,10 +123,10 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick

  Future<void> _toggleFavorite() async {
    final maProvider = context.read<MusicAssistantProvider>();
-    if (maProvider.api == null) return;

    try {
      final newState = !_isFavorite;
+      bool success;

      if (newState) {
        // For adding: use the actual provider and itemId from provider_mappings
@@ -126,22 +142,24 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
              orElse: () => widget.album.providerMappings!.first,
            ),
          );
-          actualProvider = mapping.providerInstance;
+          // Use providerDomain (e.g., "spotify") not providerInstance (e.g., "spotify--xyz")
+          actualProvider = mapping.providerDomain;
          actualItemId = mapping.itemId;
        }

        _logger.log('Adding to favorites: provider=$actualProvider, itemId=$actualItemId');
-        await maProvider.api!.addToFavorites('album', actualItemId, actualProvider);
+        success = await maProvider.addToFavorites(
+          mediaType: 'album',
+          itemId: actualItemId,
+          provider: actualProvider,
+        );
      } else {
        // For removing: need the library_item_id (numeric)
-        // When provider is "library", itemId is the library ID as a string
-        // Otherwise, we need to find it from provider_mappings
        int? libraryItemId;

        if (widget.album.provider == 'library') {
          libraryItemId = int.tryParse(widget.album.itemId);
        } else if (widget.album.providerMappings != null) {
-          // Find the library mapping
          final libraryMapping = widget.album.providerMappings!.firstWhere(
            (m) => m.providerInstance == 'library',
            orElse: () => widget.album.providerMappings!.first,
@@ -156,33 +174,139 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
          throw Exception('Could not determine library ID for this album');
        }

-        _logger.log('Removing from favorites: libraryItemId=$libraryItemId');
-        await maProvider.api!.removeFromFavorites('album', libraryItemId);
+        success = await maProvider.removeFromFavorites(
+          mediaType: 'album',
+          libraryItemId: libraryItemId,
+        );
      }

-      setState(() {
-        _isFavorite = newState;
-      });
+      if (success) {
+        // Optimistically update UI regardless of online/offline state
+        setState(() {
+          _isFavorite = newState;
+        });

-      // Invalidate home cache so the home screen shows updated favorite status
-      maProvider.invalidateHomeCache();
+        // Invalidate home cache so the home screen shows updated favorite status
+        maProvider.invalidateHomeCache();

-      if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(
-            content: Text(
-              _isFavorite ? 'Added to favorites' : 'Removed from favorites',
+        if (mounted) {
+          final isOffline = !maProvider.isConnected;
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(
+              content: Text(
+                isOffline
+                    ? S.of(context)!.actionQueuedForSync
+                    : (_isFavorite ? S.of(context)!.addedToFavorites : S.of(context)!.removedFromFavorites),
+              ),
+              duration: const Duration(seconds: 1),
            ),
-            duration: const Duration(seconds: 1),
-          ),
-        );
+          );
+        }
      }
    } catch (e) {
      _logger.log('Error toggling favorite: $e');
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
-            content: Text('Failed to update favorite: $e'),
+            content: Text(S.of(context)!.failedToUpdateFavorite(e.toString())),
+            duration: const Duration(seconds: 2),
+          ),
+        );
+      }
+    }
+  }
+
+  /// Toggle library status
+  Future<void> _toggleLibrary() async {
+    final maProvider = context.read<MusicAssistantProvider>();
+
+    try {
+      final newState = !_isInLibrary;
+      bool success;
+
+      if (newState) {
+        // Add to library - MUST use non-library provider
+        String? actualProvider;
+        String? actualItemId;
+
+        if (widget.album.providerMappings != null && widget.album.providerMappings!.isNotEmpty) {
+          // For adding to library, we MUST use a non-library provider
+          final nonLibraryMapping = widget.album.providerMappings!.where(
+            (m) => m.providerInstance != 'library' && m.providerDomain != 'library',
+          ).firstOrNull;
+
+          if (nonLibraryMapping != null) {
+            actualProvider = nonLibraryMapping.providerDomain;
+            actualItemId = nonLibraryMapping.itemId;
+          }
+        }
+
+        // Fallback to item's own provider if no non-library mapping found
+        if (actualProvider == null || actualItemId == null) {
+          if (widget.album.provider != 'library') {
+            actualProvider = widget.album.provider;
+            actualItemId = widget.album.itemId;
+          } else {
+            // Item is library-only, can't add
+            _logger.log('Cannot add to library: album is library-only');
+            return;
+          }
+        }
+
+        _logger.log('Adding album to library: provider=$actualProvider, itemId=$actualItemId');
+        success = await maProvider.addToLibrary(
+          mediaType: 'album',
+          provider: actualProvider,
+          itemId: actualItemId,
+        );
+      } else {
+        // Remove from library
+        int? libraryItemId;
+        if (widget.album.provider == 'library') {
+          libraryItemId = int.tryParse(widget.album.itemId);
+        } else if (widget.album.providerMappings != null) {
+          final libraryMapping = widget.album.providerMappings!.firstWhere(
+            (m) => m.providerInstance == 'library',
+            orElse: () => widget.album.providerMappings!.first,
+          );
+          if (libraryMapping.providerInstance == 'library') {
+            libraryItemId = int.tryParse(libraryMapping.itemId);
+          }
+        }
+
+        if (libraryItemId == null) {
+          _logger.log('Cannot remove from library: no library ID found');
+          return;
+        }
+
+        success = await maProvider.removeFromLibrary(
+          mediaType: 'album',
+          libraryItemId: libraryItemId,
+        );
+      }
+
+      if (success) {
+        setState(() {
+          _isInLibrary = newState;
+        });
+
+        if (mounted) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(
+              content: Text(
+                _isInLibrary ? S.of(context)!.addedToLibrary : S.of(context)!.removedFromLibrary,
+              ),
+              duration: const Duration(seconds: 1),
+            ),
+          );
+        }
+      }
+    } catch (e) {
+      _logger.log('Error toggling album library: $e');
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Failed to update library: $e'),
            duration: const Duration(seconds: 2),
          ),
        );
@@ -195,11 +319,11 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick

    final track = _tracks[trackIndex];
    final maProvider = context.read<MusicAssistantProvider>();
-    if (maProvider.api == null) return;
-
    final currentFavorite = track.favorite ?? false;

    try {
+      bool success;
+
      if (currentFavorite) {
        // Remove from favorites - need library_item_id
        int? libraryItemId;
@@ -216,7 +340,12 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
        }

        if (libraryItemId != null) {
-          await maProvider.api!.removeFromFavorites('track', libraryItemId);
+          success = await maProvider.removeFromFavorites(
+            mediaType: 'track',
+            libraryItemId: libraryItemId,
+          );
+        } else {
+          success = false;
        }
      } else {
        // Add to favorites
@@ -231,44 +360,54 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
              orElse: () => track.providerMappings!.first,
            ),
          );
-          actualProvider = mapping.providerInstance;
+          // Use providerDomain (e.g., "spotify") not providerInstance (e.g., "spotify--xyz")
+          actualProvider = mapping.providerDomain;
          actualItemId = mapping.itemId;
        }

-        await maProvider.api!.addToFavorites('track', actualItemId, actualProvider);
+        success = await maProvider.addToFavorites(
+          mediaType: 'track',
+          itemId: actualItemId,
+          provider: actualProvider,
+        );
      }

-      // Update local state - create new track with toggled favorite
-      setState(() {
-        _tracks[trackIndex] = Track(
-          itemId: track.itemId,
-          provider: track.provider,
-          name: track.name,
-          uri: track.uri,
-          favorite: !currentFavorite,
-          artists: track.artists,
-          album: track.album,
-          duration: track.duration,
-          providerMappings: track.providerMappings,
-        );
-      });
+      if (success) {
+        // Optimistically update local state
+        setState(() {
+          _tracks[trackIndex] = Track(
+            itemId: track.itemId,
+            provider: track.provider,
+            name: track.name,
+            uri: track.uri,
+            favorite: !currentFavorite,
+            artists: track.artists,
+            album: track.album,
+            duration: track.duration,
+            providerMappings: track.providerMappings,
+          );
+        });

-      if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(
-            content: Text(
-              !currentFavorite ? 'Added to favorites' : 'Removed from favorites',
+        if (mounted) {
+          final isOffline = !maProvider.isConnected;
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(
+              content: Text(
+                isOffline
+                    ? S.of(context)!.actionQueuedForSync
+                    : (!currentFavorite ? S.of(context)!.addedToFavorites : S.of(context)!.removedFromFavorites),
+              ),
+              duration: const Duration(seconds: 1),
            ),
-            duration: const Duration(seconds: 1),
-          ),
-        );
+          );
+        }
      }
    } catch (e) {
      _logger.log('Error toggling track favorite: $e');
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
-            content: Text('Failed to update favorite: $e'),
+            content: Text(S.of(context)!.failedToUpdateFavorite(e.toString())),
            duration: const Duration(seconds: 2),
          ),
        );
@@ -278,16 +417,46 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick

  Future<void> _loadTracks() async {
    final provider = context.read<MusicAssistantProvider>();
-    final tracks = await provider.getAlbumTracksWithCache(
-      widget.album.provider,
-      widget.album.itemId,
-    );
+    final cacheKey = '${widget.album.provider}_${widget.album.itemId}';

-    if (mounted) {
-      setState(() {
-        _tracks = tracks;
-        _isLoading = false;
-      });
+    // 1. Show cached data immediately (if available)
+    final cachedTracks = provider.getCachedAlbumTracks(cacheKey);
+    if (cachedTracks != null && cachedTracks.isNotEmpty) {
+      if (mounted) {
+        setState(() {
+          _tracks = cachedTracks;
+          _isLoading = false;
+        });
+      }
+    }
+
+    // 2. Fetch fresh data in background (silent refresh)
+    try {
+      final freshTracks = await provider.getAlbumTracksWithCache(
+        widget.album.provider,
+        widget.album.itemId,
+        forceRefresh: cachedTracks != null, // Force refresh if we had cache
+      );
+
+      // 3. Update if we got different data
+      if (mounted && freshTracks.isNotEmpty) {
+        final tracksChanged = _tracks.length != freshTracks.length ||
+            (_tracks.isNotEmpty && freshTracks.isNotEmpty &&
+             _tracks.first.itemId != freshTracks.first.itemId);
+        if (tracksChanged || _tracks.isEmpty) {
+          setState(() {
+            _tracks = freshTracks;
+            _isLoading = false;
+          });
+        }
+      }
+    } catch (e) {
+      _logger.log('⚠️ Background refresh failed: $e');
+    }
+
+    // Ensure loading is false even if everything failed
+    if (mounted && _isLoading) {
+      setState(() => _isLoading = false);
    }
  }

@@ -300,7 +469,7 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
      // Use the selected player
      final player = maProvider.selectedPlayer;
      if (player == null) {
-        _showError('No player selected');
+        _showError(S.of(context)!.noPlayerSelected);
        return;
      }

@@ -326,7 +495,7 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
      // Use the selected player
      final player = maProvider.selectedPlayer;
      if (player == null) {
-        _showError('No player selected');
+        _showError(S.of(context)!.noPlayerSelected);
        return;
      }

@@ -362,14 +531,14 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
          children: [
            const SizedBox(height: 16),
            Text(
-              'Add album to queue on...',
+              S.of(context)!.addAlbumToQueueOn,
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 16),
            if (players.isEmpty)
-              const Padding(
-                padding: EdgeInsets.all(32.0),
-                child: Text('No players available'),
+              Padding(
+                padding: const EdgeInsets.all(32.0),
+                child: Text(S.of(context)!.noPlayersAvailable),
              )
            else
              Flexible(
@@ -397,9 +566,9 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
                          _logger.log('Album added to queue on ${player.name}');
                          if (mounted) {
                            ScaffoldMessenger.of(context).showSnackBar(
-                              const SnackBar(
-                                content: Text('Album added to queue'),
-                                duration: Duration(seconds: 1),
+                              SnackBar(
+                                content: Text(S.of(context)!.albumAddedToQueue),
+                                duration: const Duration(seconds: 1),
                              ),
                            );
                          }
@@ -442,14 +611,14 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
          children: [
            const SizedBox(height: 16),
            Text(
-              'Add to queue on...',
+              S.of(context)!.addToQueueOn,
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 16),
            if (players.isEmpty)
-              const Padding(
-                padding: EdgeInsets.all(32.0),
-                child: Text('No players available'),
+              Padding(
+                padding: const EdgeInsets.all(32.0),
+                child: Text(S.of(context)!.noPlayersAvailable),
              )
            else
              Flexible(
@@ -476,9 +645,9 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
                          );
                          if (mounted) {
                            ScaffoldMessenger.of(context).showSnackBar(
-                              const SnackBar(
-                                content: Text('Tracks added to queue'),
-                                duration: Duration(seconds: 1),
+                              SnackBar(
+                                content: Text(S.of(context)!.tracksAddedToQueue),
+                                duration: const Duration(seconds: 1),
                              ),
                            );
                          }
@@ -491,7 +660,7 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
                  },
                ),
              ),
-            const SizedBox(height: 16),
+            SizedBox(height: MediaQuery.of(context).padding.bottom + 16),
          ],
        ),
      ),
@@ -594,9 +763,12 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
  Widget build(BuildContext context) {
    // CRITICAL FIX: Use select() instead of watch() to reduce rebuilds
    // Only rebuild when specific properties change, not on every provider update
-    final imageUrl = context.select<MusicAssistantProvider, String?>(
-      (provider) => provider.getImageUrl(widget.album, size: 512),
+    // Use _displayAlbum which has fresh data with images if available
+    final providerImageUrl = context.select<MusicAssistantProvider, String?>(
+      (provider) => provider.getImageUrl(_displayAlbum, size: 512),
    );
+    // Use initialImageUrl as fallback for seamless hero animation
+    final imageUrl = providerImageUrl ?? widget.initialImageUrl;
    final adaptiveTheme = context.select<ThemeProvider, bool>(
      (provider) => provider.adaptiveTheme,
    );
@@ -633,10 +805,16 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
      },
      child: Scaffold(
        backgroundColor: colorScheme.background,
-        body: CustomScrollView(
+        body: LayoutBuilder(
+          builder: (context, constraints) {
+            // Responsive cover size: 70% of screen width, clamped between 200-320
+            final coverSize = (constraints.maxWidth * 0.7).clamp(200.0, 320.0);
+            final expandedHeight = coverSize + 70;
+
+            return CustomScrollView(
        slivers: [
          SliverAppBar(
-            expandedHeight: 350, // Increased height for bigger art
+            expandedHeight: expandedHeight,
            pinned: true,
            backgroundColor: colorScheme.background,
            leading: IconButton(
@@ -654,35 +832,50 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
                  const SizedBox(height: 60),
                  GestureDetector(
                    onTap: () => _showFullscreenArt(imageUrl),
-                    child: Hero(
-                      tag: HeroTags.albumCover + (widget.album.uri ?? widget.album.itemId) + _heroTagSuffix,
-                      child: Container(
-                        width: 280, // Increased size
-                        height: 280,
-                        decoration: BoxDecoration(
-                          color: colorScheme.surfaceVariant,
-                          borderRadius: BorderRadius.circular(16), // Slightly more rounded
-                          boxShadow: [
-                            BoxShadow(
-                              color: Colors.black.withOpacity(0.3),
-                              blurRadius: 20,
-                              offset: const Offset(0, 10),
-                            ),
-                          ],
-                          image: imageUrl != null
-                              ? DecorationImage(
-                                  image: CachedNetworkImageProvider(imageUrl),
-                                  fit: BoxFit.cover,
-                                )
-                              : null,
+                    // Shadow container (outside Hero for correct clipping)
+                    child: Container(
+                      decoration: BoxDecoration(
+                        borderRadius: BorderRadius.circular(12),
+                        boxShadow: [
+                          BoxShadow(
+                            color: Colors.black.withOpacity(0.3),
+                            blurRadius: 20,
+                            offset: const Offset(0, 10),
+                          ),
+                        ],
+                      ),
+                      child: Hero(
+                        tag: HeroTags.albumCover + (widget.album.uri ?? widget.album.itemId) + _heroTagSuffix,
+                        // FIXED: Match source structure - ClipRRect(12) → Container → CachedNetworkImage
+                        child: ClipRRect(
+                          borderRadius: BorderRadius.circular(12),
+                          child: Container(
+                            width: coverSize,
+                            height: coverSize,
+                            color: colorScheme.surfaceVariant,
+                            child: imageUrl != null
+                                ? CachedNetworkImage(
+                                    imageUrl: imageUrl,
+                                    fit: BoxFit.cover,
+                                    // Match source memCacheWidth for smooth Hero
+                                    memCacheWidth: 256,
+                                    memCacheHeight: 256,
+                                    fadeInDuration: Duration.zero,
+                                    fadeOutDuration: Duration.zero,
+                                    placeholder: (_, __) => const SizedBox(),
+                                    errorWidget: (_, __, ___) => Icon(
+                                      Icons.album_rounded,
+                                      size: coverSize * 0.43,
+                                      color: colorScheme.onSurfaceVariant,
+                                    ),
+                                  )
+                                : Icon(
+                                    Icons.album_rounded,
+                                    size: coverSize * 0.43,
+                                    color: colorScheme.onSurfaceVariant,
+                                  ),
+                          ),
                        ),
-                        child: imageUrl == null
-                            ? Icon(
-                                Icons.album_rounded,
-                                size: 120,
-                                color: colorScheme.onSurfaceVariant,
-                              )
-                            : null,
                      ),
                    ),
                  ),
@@ -692,7 +885,7 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
          ),
          SliverToBoxAdapter(
            child: Padding(
-              padding: const EdgeInsets.all(24.0),
+              padding: const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 12.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
@@ -763,7 +956,7 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
                          child: ElevatedButton.icon(
                            onPressed: _isLoading || _tracks.isEmpty ? null : _playAlbum,
                            icon: const Icon(Icons.play_arrow_rounded),
-                            label: const Text('Play'),
+                            label: Text(S.of(context)!.play),
                            style: ElevatedButton.styleFrom(
                              backgroundColor: colorScheme.primary,
                              foregroundColor: colorScheme.onPrimary,
@@ -833,17 +1026,32 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
                          ),
                        ),
                      ),
+
+                      const SizedBox(width: 12),
+
+                      // Library Button
+                      SizedBox(
+                        height: 50,
+                        width: 50,
+                        child: FilledButton.tonal(
+                          onPressed: _toggleLibrary,
+                          style: FilledButton.styleFrom(
+                            padding: EdgeInsets.zero,
+                            shape: RoundedRectangleBorder(
+                              borderRadius: BorderRadius.circular(12),
+                            ),
+                          ),
+                          child: Icon(
+                            _isInLibrary ? Icons.library_add_check : Icons.library_add,
+                            color: _isInLibrary
+                                ? colorScheme.primary
+                                : colorScheme.onSurfaceVariant,
+                          ),
+                        ),
+                      ),
                    ],
                  ),
                  const SizedBox(height: 24),
-                  Text(
-                    'Tracks',
-                    style: textTheme.titleLarge?.copyWith(
-                      color: colorScheme.onBackground,
-                      fontWeight: FontWeight.bold,
-                    ),
-                  ),
-                  const SizedBox(height: 12),
                ],
              ),
            ),
@@ -858,7 +1066,7 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
            SliverFillRemaining(
              child: Center(
                child: Text(
-                  'No tracks found',
+                  S.of(context)!.noTracksFound,
                  style: TextStyle(
                    color: colorScheme.onBackground.withOpacity(0.54),
                    fontSize: 16,
@@ -1010,118 +1218,71 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
            ),
          const SliverToBoxAdapter(child: SizedBox(height: 164)), // Space for bottom nav + mini player
        ],
-      ),
+      );
+          },
+        ),
      ),
    );
  }

  void _showPlayAlbumFromHereMenu(BuildContext context, int startIndex) {
    final maProvider = context.read<MusicAssistantProvider>();
-    final players = maProvider.availablePlayers;

-    _showPlayOnSheet(
-      context,
-      players,
-      onPlayerSelected: (player) {
+    GlobalPlayerOverlay.hidePlayer();
+
+    showPlayerPickerSheet(
+      context: context,
+      title: S.of(context)!.playOn,
+      players: maProvider.availablePlayers,
+      selectedPlayer: maProvider.selectedPlayer,
+      onPlayerSelected: (player) async {
        maProvider.selectPlayer(player);
-        maProvider.playTracks(
+        await maProvider.playTracks(
          player.playerId,
          _tracks,
          startIndex: startIndex,
        );
      },
-    );
+    ).whenComplete(() {
+      GlobalPlayerOverlay.showPlayer();
+    });
  }

  void _showPlayRadioMenu(BuildContext context, int trackIndex) {
    final maProvider = context.read<MusicAssistantProvider>();
-    final players = maProvider.availablePlayers;
    final track = _tracks[trackIndex];

-    _showPlayOnSheet(
-      context,
-      players,
-      onPlayerSelected: (player) {
+    GlobalPlayerOverlay.hidePlayer();
+
+    showPlayerPickerSheet(
+      context: context,
+      title: S.of(context)!.playOn,
+      players: maProvider.availablePlayers,
+      selectedPlayer: maProvider.selectedPlayer,
+      onPlayerSelected: (player) async {
        maProvider.selectPlayer(player);
-        maProvider.playRadio(player.playerId, track);
+        await maProvider.playRadio(player.playerId, track);
      },
-    );
+    ).whenComplete(() {
+      GlobalPlayerOverlay.showPlayer();
+    });
  }

  void _showPlayOnMenu(BuildContext context) {
    final maProvider = context.read<MusicAssistantProvider>();
-    final players = maProvider.availablePlayers;

-    _showPlayOnSheet(
-      context,
-      players,
-      onPlayerSelected: (player) {
-        maProvider.selectPlayer(player);
-        maProvider.playTracks(player.playerId, _tracks);
-      },
-    );
-  }
-
-  /// Shared "Play on..." bottom sheet with fixed height and scrollable list
-  void _showPlayOnSheet(
-    BuildContext context,
-    List players, {
-    required void Function(dynamic player) onPlayerSelected,
-  }) {
-    // Slide mini player down out of the way
    GlobalPlayerOverlay.hidePlayer();

-    final screenHeight = MediaQuery.of(context).size.height;
-    final bottomPadding = MediaQuery.of(context).padding.bottom;
-    final sheetHeight = (screenHeight * 0.45) + bottomPadding; // Fixed 45% + safe area
-
-    showModalBottomSheet(
+    showPlayerPickerSheet(
      context: context,
-      backgroundColor: Colors.transparent,
-      isScrollControlled: true,
-      builder: (context) => Container(
-        height: sheetHeight,
-        decoration: BoxDecoration(
-          color: Theme.of(context).colorScheme.surface,
-          borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
-        ),
-        child: Column(
-          children: [
-            const SizedBox(height: 16),
-            Text(
-              'Play on...',
-              style: Theme.of(context).textTheme.titleLarge,
-            ),
-            const SizedBox(height: 16),
-            Expanded(
-              child: players.isEmpty
-                  ? const Center(
-                      child: Text('No players available'),
-                    )
-                  : ListView.builder(
-                      padding: EdgeInsets.only(bottom: bottomPadding + 16),
-                      itemCount: players.length,
-                      itemBuilder: (context, index) {
-                        final player = players[index];
-                        return ListTile(
-                          leading: Icon(
-                            Icons.speaker,
-                            color: Theme.of(context).colorScheme.onSurface,
-                          ),
-                          title: Text(player.name),
-                          onTap: () {
-                            Navigator.pop(context);
-                            onPlayerSelected(player);
-                          },
-                        );
-                      },
-                    ),
-            ),
-          ],
-        ),
-      ),
+      title: S.of(context)!.playOn,
+      players: maProvider.availablePlayers,
+      selectedPlayer: maProvider.selectedPlayer,
+      onPlayerSelected: (player) async {
+        maProvider.selectPlayer(player);
+        await maProvider.playTracks(player.playerId, _tracks);
+      },
    ).whenComplete(() {
-      // Slide mini player back up when sheet is dismissed
      GlobalPlayerOverlay.showPlayer();
    });
  }
@@ -12,6 +12,7 @@ import '../services/metadata_service.dart';
 import '../services/settings_service.dart';
 import '../services/debug_logger.dart';
 import '../utils/page_transitions.dart';
+import '../l10n/app_localizations.dart';

 class ArtistDetailsScreen extends StatefulWidget {
  final Artist artist;
@@ -35,11 +36,13 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
  List<Album> _providerAlbums = [];
  bool _isLoading = true;
  bool _isFavorite = false;
+  bool _isInLibrary = false;
  ColorScheme? _lightColorScheme;
  ColorScheme? _darkColorScheme;
  bool _isDescriptionExpanded = false;
  String? _artistDescription;
  String? _artistImageUrl;
+  MusicAssistantProvider? _maProvider;

  // View preferences
  String _sortOrder = 'alpha'; // 'alpha' or 'year'
@@ -51,6 +54,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
  void initState() {
    super.initState();
    _isFavorite = widget.artist.favorite ?? false;
+    _isInLibrary = _checkIfInLibrary(widget.artist);
    // Use initial image URL immediately for smooth hero animation
    _artistImageUrl = widget.initialImageUrl;
    _loadViewPreferences();
@@ -65,11 +69,60 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
        if (mounted) {
          _loadArtistImage();
          // Note: _extractColors is called by _loadArtistImage after image loads
+
+          // CRITICAL FIX: Delay adding provider listener until AFTER Hero animation
+          // Adding it immediately causes rebuilds during animation (jank)
+          _maProvider = context.read<MusicAssistantProvider>();
+          _maProvider?.addListener(_onProviderChanged);
        }
      });
    });
  }

+  void _onProviderChanged() {
+    if (!mounted) return;
+    // Re-check library status when provider data changes
+    final newIsInLibrary = _checkIfInLibraryFromProvider();
+    if (newIsInLibrary != _isInLibrary) {
+      setState(() {
+        _isInLibrary = newIsInLibrary;
+      });
+    }
+  }
+
+  /// Check if artist is in library using provider's artists list
+  bool _checkIfInLibraryFromProvider() {
+    if (_maProvider == null) return _checkIfInLibrary(widget.artist);
+
+    final artistName = widget.artist.name.toLowerCase();
+    final artistUri = widget.artist.uri;
+
+    // Check if this artist exists in the provider's library
+    return _maProvider!.artists.any((a) {
+      // Match by URI if available
+      if (artistUri != null && a.uri == artistUri) return true;
+      // Match by name as fallback
+      if (a.name.toLowerCase() == artistName) return true;
+      // Check provider mappings for matching URIs
+      if (widget.artist.providerMappings != null) {
+        for (final mapping in widget.artist.providerMappings!) {
+          if (a.providerMappings?.any((m) =>
+            m.providerInstance == mapping.providerInstance &&
+            m.itemId == mapping.itemId) == true) {
+            return true;
+          }
+        }
+      }
+      return false;
+    });
+  }
+
+  @override
+  void dispose() {
+    _maProvider?.removeListener(_onProviderChanged);
+    super.dispose();
+  }
+
  Future<void> _loadViewPreferences() async {
    final sortOrder = await SettingsService.getArtistAlbumsSortOrder();
    final viewMode = await SettingsService.getArtistAlbumsViewMode();
@@ -154,10 +207,10 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {

  Future<void> _toggleFavorite() async {
    final maProvider = context.read<MusicAssistantProvider>();
-    if (maProvider.api == null) return;

    try {
      final newState = !_isFavorite;
+      bool success;

      if (newState) {
        String actualProvider = widget.artist.provider;
@@ -171,12 +224,17 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
              orElse: () => widget.artist.providerMappings!.first,
            ),
          );
-          actualProvider = mapping.providerInstance;
+          // Use providerDomain (e.g., "spotify") not providerInstance (e.g., "spotify--xyz")
+          actualProvider = mapping.providerDomain;
          actualItemId = mapping.itemId;
        }

        _logger.log('Adding artist to favorites: provider=$actualProvider, itemId=$actualItemId');
-        await maProvider.api!.addToFavorites('artist', actualItemId, actualProvider);
+        success = await maProvider.addToFavorites(
+          mediaType: 'artist',
+          itemId: actualItemId,
+          provider: actualProvider,
+        );
      } else {
        int? libraryItemId;

@@ -197,32 +255,39 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
          throw Exception('Could not determine library ID for this artist');
        }

-        _logger.log('Removing artist from favorites: libraryItemId=$libraryItemId');
-        await maProvider.api!.removeFromFavorites('artist', libraryItemId);
+        success = await maProvider.removeFromFavorites(
+          mediaType: 'artist',
+          libraryItemId: libraryItemId,
+        );
      }

-      setState(() {
-        _isFavorite = newState;
-      });
+      if (success) {
+        setState(() {
+          _isFavorite = newState;
+        });

-      maProvider.invalidateHomeCache();
+        maProvider.invalidateHomeCache();

-      if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(
-            content: Text(
-              _isFavorite ? 'Added to favorites' : 'Removed from favorites',
+        if (mounted) {
+          final isOffline = !maProvider.isConnected;
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(
+              content: Text(
+                isOffline
+                    ? S.of(context)!.actionQueuedForSync
+                    : (_isFavorite ? S.of(context)!.addedToFavorites : S.of(context)!.removedFromFavorites),
+              ),
+              duration: const Duration(seconds: 1),
            ),
-            duration: const Duration(seconds: 1),
-          ),
-        );
+          );
+        }
      }
    } catch (e) {
      _logger.log('Error toggling artist favorite: $e');
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
-            content: Text('Failed to update favorite: $e'),
+            content: Text(S.of(context)!.failedToUpdateFavorite(e.toString())),
            duration: const Duration(seconds: 2),
          ),
        );
@@ -230,66 +295,138 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
    }
  }

-  Future<void> _startArtistRadio() async {
-    final maProvider = context.read<MusicAssistantProvider>();
-    final selectedPlayer = maProvider.selectedPlayer;
+  /// Check if artist is in library
+  bool _checkIfInLibrary(Artist artist) {
+    if (artist.provider == 'library') return true;
+    return artist.providerMappings?.any((m) => m.providerInstance == 'library') ?? false;
+  }

-    if (selectedPlayer == null) {
-      ScaffoldMessenger.of(context).showSnackBar(
-        const SnackBar(content: Text('No player selected')),
-      );
-      return;
-    }
+  /// Toggle library status
+  Future<void> _toggleLibrary() async {
+    final maProvider = context.read<MusicAssistantProvider>();

    try {
-      await maProvider.playArtistRadio(selectedPlayer.playerId, widget.artist);
-      if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(
-            content: Text('Starting ${widget.artist.name} radio'),
-            duration: const Duration(seconds: 1),
-          ),
+      final newState = !_isInLibrary;
+      bool success;
+
+      if (newState) {
+        // Add to library - MUST use non-library provider
+        String? actualProvider;
+        String? actualItemId;
+
+        if (widget.artist.providerMappings != null && widget.artist.providerMappings!.isNotEmpty) {
+          // For adding to library, we MUST use a non-library provider
+          final nonLibraryMapping = widget.artist.providerMappings!.where(
+            (m) => m.providerInstance != 'library' && m.providerDomain != 'library',
+          ).firstOrNull;
+
+          if (nonLibraryMapping != null) {
+            actualProvider = nonLibraryMapping.providerDomain;
+            actualItemId = nonLibraryMapping.itemId;
+          }
+        }
+
+        // Fallback to item's own provider if no non-library mapping found
+        if (actualProvider == null || actualItemId == null) {
+          if (widget.artist.provider != 'library') {
+            actualProvider = widget.artist.provider;
+            actualItemId = widget.artist.itemId;
+          } else {
+            // Item is library-only, can't add
+            _logger.log('Cannot add to library: artist is library-only');
+            return;
+          }
+        }
+
+        _logger.log('Adding artist to library: provider=$actualProvider, itemId=$actualItemId');
+        success = await maProvider.addToLibrary(
+          mediaType: 'artist',
+          provider: actualProvider,
+          itemId: actualItemId,
+        );
+      } else {
+        // Remove from library
+        int? libraryItemId;
+        if (widget.artist.provider == 'library') {
+          libraryItemId = int.tryParse(widget.artist.itemId);
+        } else if (widget.artist.providerMappings != null) {
+          final libraryMapping = widget.artist.providerMappings!.firstWhere(
+            (m) => m.providerInstance == 'library',
+            orElse: () => widget.artist.providerMappings!.first,
+          );
+          if (libraryMapping.providerInstance == 'library') {
+            libraryItemId = int.tryParse(libraryMapping.itemId);
+          }
+        }
+
+        if (libraryItemId == null) {
+          _logger.log('Cannot remove from library: no library ID found');
+          return;
+        }
+
+        success = await maProvider.removeFromLibrary(
+          mediaType: 'artist',
+          libraryItemId: libraryItemId,
        );
      }
+
+      if (success) {
+        setState(() {
+          _isInLibrary = newState;
+        });
+
+        if (mounted) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(
+              content: Text(
+                _isInLibrary ? S.of(context)!.addedToLibrary : S.of(context)!.removedFromLibrary,
+              ),
+              duration: const Duration(seconds: 1),
+            ),
+          );
+        }
+      }
    } catch (e) {
-      _logger.log('Error starting artist radio: $e');
+      _logger.log('Error toggling artist library: $e');
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
-            content: Text('Failed to start radio: $e'),
-            backgroundColor: Colors.red,
+            content: Text('Failed to update library: $e'),
+            duration: const Duration(seconds: 2),
          ),
        );
      }
    }
  }

-  void _showPlayOnMenu(BuildContext context) {
+  void _showRadioMenu(BuildContext context) {
    final maProvider = context.read<MusicAssistantProvider>();
    final players = maProvider.availablePlayers;
-    final colorScheme = Theme.of(context).colorScheme;
+
+    // Slide mini player down out of the way
+    GlobalPlayerOverlay.hidePlayer();

    showModalBottomSheet(
      context: context,
-      backgroundColor: colorScheme.surface,
-      shape: const RoundedRectangleBorder(
-        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
-      ),
-      builder: (context) => Padding(
-        padding: const EdgeInsets.all(16.0),
+      backgroundColor: Colors.transparent,
+      builder: (context) => Container(
+        decoration: BoxDecoration(
+          color: Theme.of(context).colorScheme.surface,
+          borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
+        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
-          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
+            const SizedBox(height: 16),
            Text(
-              'Start ${widget.artist.name} radio on...',
+              S.of(context)!.startRadioOn(widget.artist.name),
              style: Theme.of(context).textTheme.titleLarge,
            ),
            const SizedBox(height: 16),
            if (players.isEmpty)
-              const Padding(
-                padding: EdgeInsets.all(32.0),
-                child: Text('No players available'),
+              Padding(
+                padding: const EdgeInsets.all(32.0),
+                child: Text(S.of(context)!.noPlayersAvailable),
              )
            else
              Flexible(
@@ -301,7 +438,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                    return ListTile(
                      leading: Icon(
                        Icons.speaker,
-                        color: colorScheme.onSurface,
+                        color: Theme.of(context).colorScheme.onSurface,
                      ),
                      title: Text(player.name),
                      onTap: () async {
@@ -311,7 +448,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                          if (mounted) {
                            ScaffoldMessenger.of(context).showSnackBar(
                              SnackBar(
-                                content: Text('Starting ${widget.artist.name} radio on ${player.name}'),
+                                content: Text(S.of(context)!.startingRadioOnPlayer(widget.artist.name, player.name)),
                                duration: const Duration(seconds: 1),
                              ),
                            );
@@ -321,7 +458,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                          if (mounted) {
                            ScaffoldMessenger.of(context).showSnackBar(
                              SnackBar(
-                                content: Text('Failed to start radio: $e'),
+                                content: Text(S.of(context)!.failedToStartRadio(e.toString())),
                                backgroundColor: Colors.red,
                              ),
                            );
@@ -332,46 +469,103 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                  },
                ),
              ),
-            const SizedBox(height: 16),
+            SizedBox(height: MediaQuery.of(context).padding.bottom + 16),
          ],
        ),
      ),
-    );
+    ).whenComplete(() {
+      // Slide mini player back up when sheet is dismissed
+      GlobalPlayerOverlay.showPlayer();
+    });
  }

-  Future<void> _addArtistRadioToQueue() async {
+  void _showAddToQueueMenu(BuildContext context) {
    final maProvider = context.read<MusicAssistantProvider>();
-    final selectedPlayer = maProvider.selectedPlayer;
+    final players = maProvider.availablePlayers;

-    if (selectedPlayer == null) {
-      ScaffoldMessenger.of(context).showSnackBar(
-        const SnackBar(content: Text('No player selected')),
-      );
-      return;
-    }
+    // Slide mini player down out of the way
+    GlobalPlayerOverlay.hidePlayer();

-    try {
-      // For adding to queue with radio mode, we use radio_mode but with 'add' option
-      await maProvider.api?.playArtistRadioToQueue(selectedPlayer.playerId, widget.artist);
-      if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(
-            content: Text('Added ${widget.artist.name} radio to queue'),
-            duration: const Duration(seconds: 1),
-          ),
-        );
-      }
-    } catch (e) {
-      _logger.log('Error adding artist radio to queue: $e');
-      if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(
-            content: Text('Failed to add to queue: $e'),
-            backgroundColor: Colors.red,
-          ),
-        );
-      }
-    }
+    showModalBottomSheet(
+      context: context,
+      backgroundColor: Colors.transparent,
+      builder: (context) => Container(
+        decoration: BoxDecoration(
+          color: Theme.of(context).colorScheme.surface,
+          borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
+        ),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            const SizedBox(height: 16),
+            Text(
+              S.of(context)!.addToQueueOn,
+              style: Theme.of(context).textTheme.titleLarge,
+            ),
+            const SizedBox(height: 16),
+            if (players.isEmpty)
+              Padding(
+                padding: const EdgeInsets.all(32.0),
+                child: Text(S.of(context)!.noPlayersAvailable),
+              )
+            else
+              Flexible(
+                child: ListView.builder(
+                  shrinkWrap: true,
+                  itemCount: players.length,
+                  itemBuilder: (context, index) {
+                    final player = players[index];
+                    return ListTile(
+                      leading: Icon(
+                        Icons.speaker,
+                        color: Theme.of(context).colorScheme.onSurface,
+                      ),
+                      title: Text(player.name),
+                      onTap: () async {
+                        Navigator.pop(context);
+                        final api = maProvider.api;
+                        if (api == null) {
+                          if (mounted) {
+                            ScaffoldMessenger.of(context).showSnackBar(
+                              SnackBar(content: Text(S.of(context)!.notConnected)),
+                            );
+                          }
+                          return;
+                        }
+                        try {
+                          await api.playArtistRadioToQueue(player.playerId, widget.artist);
+                          if (mounted) {
+                            ScaffoldMessenger.of(context).showSnackBar(
+                              SnackBar(
+                                content: Text(S.of(context)!.addedRadioToQueue(widget.artist.name)),
+                                duration: const Duration(seconds: 1),
+                              ),
+                            );
+                          }
+                        } catch (e) {
+                          _logger.log('Error adding artist radio to queue: $e');
+                          if (mounted) {
+                            ScaffoldMessenger.of(context).showSnackBar(
+                              SnackBar(
+                                content: Text(S.of(context)!.failedToAddToQueue(e.toString())),
+                                backgroundColor: Colors.red,
+                              ),
+                            );
+                          }
+                        }
+                      },
+                    );
+                  },
+                ),
+              ),
+            SizedBox(height: MediaQuery.of(context).padding.bottom + 16),
+          ],
+        ),
+      ),
+    ).whenComplete(() {
+      // Slide mini player back up when sheet is dismissed
+      GlobalPlayerOverlay.showPlayer();
+    });
  }

  Future<void> _loadArtistImage() async {
@@ -426,23 +620,54 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
  Future<void> _loadArtistAlbums() async {
    final provider = context.read<MusicAssistantProvider>();

-    // Use cached artist albums method
-    final allAlbums = await provider.getArtistAlbumsWithCache(widget.artist.name);
+    // 1. Show cached data immediately (if available)
+    final cachedAlbums = provider.getCachedArtistAlbums(widget.artist.name);
+    if (cachedAlbums != null && cachedAlbums.isNotEmpty) {
+      final libraryAlbums = cachedAlbums.where((a) => a.inLibrary).toList();
+      final providerOnlyAlbums = cachedAlbums.where((a) => !a.inLibrary).toList();

-    if (mounted) {
-      // Separate library albums from provider-only albums
-      final libraryAlbums = allAlbums.where((a) => a.inLibrary).toList();
-      final providerOnlyAlbums = allAlbums.where((a) => !a.inLibrary).toList();
+      if (mounted) {
+        setState(() {
+          _albums = libraryAlbums;
+          _providerAlbums = providerOnlyAlbums;
+          _sortAlbums();
+          _isLoading = false;
+        });
+      }
+    }

-      setState(() {
-        _albums = libraryAlbums;
-        _providerAlbums = providerOnlyAlbums;
-        _sortAlbums(); // Apply saved sort order
-        _isLoading = false;
-      });
+    // 2. Fetch fresh data in background (silent refresh)
+    try {
+      final allAlbums = await provider.getArtistAlbumsWithCache(
+        widget.artist.name,
+        forceRefresh: cachedAlbums != null,
+      );
+
+      if (mounted && allAlbums.isNotEmpty) {
+        // Check if data actually changed
+        final albumsChanged = _albums.length != allAlbums.where((a) => a.inLibrary).length;
+
+        if (albumsChanged || _albums.isEmpty) {
+          final libraryAlbums = allAlbums.where((a) => a.inLibrary).toList();
+          final providerOnlyAlbums = allAlbums.where((a) => !a.inLibrary).toList();
+
+          setState(() {
+            _albums = libraryAlbums;
+            _providerAlbums = providerOnlyAlbums;
+            _sortAlbums();
+            _isLoading = false;
+          });
+        }
+      }
+    } catch (e) {
+      // Silent failure - keep showing cached data
+    }
+
+    if (mounted && _isLoading) {
+      setState(() => _isLoading = false);
    }
  }
-  
+
  @override
  Widget build(BuildContext context) {
    // CRITICAL FIX: Use select() instead of watch() to reduce rebuilds
@@ -482,10 +707,16 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
      },
      child: Scaffold(
        backgroundColor: colorScheme.background,
-        body: CustomScrollView(
+        body: LayoutBuilder(
+          builder: (context, constraints) {
+            // Responsive cover size: 70% of screen width, clamped between 160-280 (smaller for circular artist image)
+            final coverSize = (constraints.maxWidth * 0.7).clamp(160.0, 280.0);
+            final expandedHeight = coverSize + 100;
+
+            return CustomScrollView(
          slivers: [
            SliverAppBar(
-              expandedHeight: 300,
+              expandedHeight: expandedHeight,
              pinned: true,
              backgroundColor: colorScheme.background,
              leading: IconButton(
@@ -505,22 +736,28 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                    tag: HeroTags.artistImage + (widget.artist.uri ?? widget.artist.itemId) + _heroTagSuffix,
                    child: ClipOval(
                      child: Container(
-                        width: 200,
-                        height: 200,
+                        width: coverSize,
+                        height: coverSize,
                        color: colorScheme.surfaceVariant,
                        child: imageUrl != null
-                            ? Image.network(
-                                imageUrl,
+                            ? CachedNetworkImage(
+                                imageUrl: imageUrl,
                                fit: BoxFit.cover,
-                                errorBuilder: (_, __, ___) => Icon(
+                                // Match source memCacheWidth for smooth Hero animation
+                                memCacheWidth: 256,
+                                memCacheHeight: 256,
+                                fadeInDuration: Duration.zero,
+                                fadeOutDuration: Duration.zero,
+                                placeholder: (_, __) => const SizedBox(),
+                                errorWidget: (_, __, ___) => Icon(
                                  Icons.person_rounded,
-                                  size: 100,
+                                  size: coverSize * 0.5,
                                  color: colorScheme.onSurfaceVariant,
                                ),
                              )
                            : Icon(
                                Icons.person_rounded,
-                                size: 100,
+                                size: coverSize * 0.5,
                                color: colorScheme.onSurfaceVariant,
                              ),
                      ),
@@ -581,9 +818,9 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                        child: SizedBox(
                          height: 50,
                          child: ElevatedButton.icon(
-                            onPressed: _startArtistRadio,
+                            onPressed: () => _showRadioMenu(context),
                            icon: const Icon(Icons.radio),
-                            label: const Text('Radio'),
+                            label: Text(S.of(context)!.radio),
                            style: ElevatedButton.styleFrom(
                              backgroundColor: colorScheme.primary,
                              foregroundColor: colorScheme.onPrimary,
@@ -594,23 +831,6 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                          ),
                        ),
                      ),
-                      const SizedBox(width: 12),
-
-                      // "Play on..." Button (Square)
-                      SizedBox(
-                        height: 50,
-                        width: 50,
-                        child: FilledButton.tonal(
-                          onPressed: () => _showPlayOnMenu(context),
-                          style: FilledButton.styleFrom(
-                            padding: EdgeInsets.zero,
-                            shape: RoundedRectangleBorder(
-                              borderRadius: BorderRadius.circular(12),
-                            ),
-                          ),
-                          child: const Icon(Icons.speaker_group_outlined),
-                        ),
-                      ),

                      const SizedBox(width: 12),

@@ -619,7 +839,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                        height: 50,
                        width: 50,
                        child: FilledButton.tonal(
-                          onPressed: _addArtistRadioToQueue,
+                          onPressed: () => _showAddToQueueMenu(context),
                          style: FilledButton.styleFrom(
                            padding: EdgeInsets.zero,
                            shape: RoundedRectangleBorder(
@@ -652,6 +872,29 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                          ),
                        ),
                      ),
+
+                      const SizedBox(width: 12),
+
+                      // Library Button
+                      SizedBox(
+                        height: 50,
+                        width: 50,
+                        child: FilledButton.tonal(
+                          onPressed: _toggleLibrary,
+                          style: FilledButton.styleFrom(
+                            padding: EdgeInsets.zero,
+                            shape: RoundedRectangleBorder(
+                              borderRadius: BorderRadius.circular(12),
+                            ),
+                          ),
+                          child: Icon(
+                            _isInLibrary ? Icons.library_add_check : Icons.library_add,
+                            color: _isInLibrary
+                                ? colorScheme.primary
+                                : colorScheme.onSurfaceVariant,
+                          ),
+                        ),
+                      ),
                    ],
                  ),
                  const SizedBox(height: 16),
@@ -669,7 +912,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
            SliverFillRemaining(
              child: Center(
                child: Text(
-                  'No albums found',
+                  S.of(context)!.noAlbumsFound,
                  style: TextStyle(
                    color: colorScheme.onBackground.withOpacity(0.54),
                    fontSize: 16,
@@ -686,7 +929,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                  child: Row(
                    children: [
                      Text(
-                        'In Library',
+                        S.of(context)!.inLibrary,
                        style: textTheme.titleLarge?.copyWith(
                          color: colorScheme.onBackground,
                          fontWeight: FontWeight.bold,
@@ -700,7 +943,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                          color: colorScheme.primary,
                          size: 20,
                        ),
-                        tooltip: _sortOrder == 'alpha' ? 'Sort by year' : 'Sort alphabetically',
+                        tooltip: _sortOrder == 'alpha' ? S.of(context)!.sortByYear : S.of(context)!.sortAlphabetically,
                        onPressed: _toggleSortOrder,
                        visualDensity: VisualDensity.compact,
                        padding: EdgeInsets.zero,
@@ -718,10 +961,10 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                          size: 20,
                        ),
                        tooltip: _viewMode == 'grid2'
-                            ? '3-column grid'
+                            ? S.of(context)!.threeColumnGrid
                            : _viewMode == 'grid3'
-                                ? 'List view'
-                                : '2-column grid',
+                                ? S.of(context)!.listView
+                                : S.of(context)!.twoColumnGrid,
                        onPressed: _cycleViewMode,
                        visualDensity: VisualDensity.compact,
                        padding: EdgeInsets.zero,
@@ -742,7 +985,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                  child: Row(
                    children: [
                      Text(
-                        'From Providers',
+                        S.of(context)!.fromProviders,
                        style: textTheme.titleLarge?.copyWith(
                          color: colorScheme.onBackground,
                          fontWeight: FontWeight.bold,
@@ -757,7 +1000,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                            color: colorScheme.primary,
                            size: 20,
                          ),
-                          tooltip: _sortOrder == 'alpha' ? 'Sort by year' : 'Sort alphabetically',
+                          tooltip: _sortOrder == 'alpha' ? S.of(context)!.sortByYear : S.of(context)!.sortAlphabetically,
                          onPressed: _toggleSortOrder,
                          visualDensity: VisualDensity.compact,
                          padding: EdgeInsets.zero,
@@ -774,10 +1017,10 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                            size: 20,
                          ),
                          tooltip: _viewMode == 'grid2'
-                              ? '3-column grid'
+                              ? S.of(context)!.threeColumnGrid
                              : _viewMode == 'grid3'
-                                  ? 'List view'
-                                  : '2-column grid',
+                                  ? S.of(context)!.listView
+                                  : S.of(context)!.twoColumnGrid,
                          onPressed: _cycleViewMode,
                          visualDensity: VisualDensity.compact,
                          padding: EdgeInsets.zero,
@@ -793,6 +1036,8 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
            ],
          ],
        ],
+        );
+          },
        ),
      ),
    );
@@ -816,6 +1061,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
            child: AlbumDetailsScreen(
              album: album,
              heroTagSuffix: heroSuffix,
+              initialImageUrl: imageUrl,
            ),
          ),
        );
@@ -832,12 +1078,14 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                child: Container(
                  color: colorScheme.surfaceVariant,
                  child: imageUrl != null
-                      ? Image.network(
-                          imageUrl,
+                      ? CachedNetworkImage(
+                          imageUrl: imageUrl,
                          fit: BoxFit.cover,
                          width: double.infinity,
                          height: double.infinity,
-                          errorBuilder: (_, __, ___) => Center(
+                          fadeInDuration: Duration.zero,
+                          fadeOutDuration: Duration.zero,
+                          errorWidget: (_, __, ___) => Center(
                            child: Icon(
                              Icons.album_rounded,
                              size: 64,
@@ -939,10 +1187,12 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
          height: 56,
          color: colorScheme.surfaceVariant,
          child: imageUrl != null
-              ? Image.network(
-                  imageUrl,
+              ? CachedNetworkImage(
+                  imageUrl: imageUrl,
                  fit: BoxFit.cover,
-                  errorBuilder: (_, __, ___) => Icon(
+                  fadeInDuration: Duration.zero,
+                  fadeOutDuration: Duration.zero,
+                  errorWidget: (_, __, ___) => Icon(
                    Icons.album_rounded,
                    color: colorScheme.onSurfaceVariant,
                  ),
@@ -978,6 +1228,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
            child: AlbumDetailsScreen(
              album: album,
              heroTagSuffix: 'artist_albums',
+              initialImageUrl: imageUrl,
            ),
          ),
        );
@@ -12,18 +12,21 @@ import '../services/metadata_service.dart';
 import '../services/debug_logger.dart';
 import '../utils/page_transitions.dart';
 import '../constants/hero_tags.dart';
+import '../l10n/app_localizations.dart';
 import 'audiobook_detail_screen.dart';

 class AudiobookAuthorScreen extends StatefulWidget {
  final String authorName;
  final List<Audiobook> audiobooks;
  final String? heroTagSuffix;
+  final String? initialAuthorImageUrl;

  const AudiobookAuthorScreen({
    super.key,
    required this.authorName,
    required this.audiobooks,
    this.heroTagSuffix,
+    this.initialAuthorImageUrl,
  });

  @override
@@ -47,6 +50,8 @@ class _AudiobookAuthorScreenState extends State<AudiobookAuthorScreen> {
  void initState() {
    super.initState();
    _audiobooks = List.from(widget.audiobooks);
+    // Use initial image URL immediately for smooth hero animation
+    _authorImageUrl = widget.initialAuthorImageUrl;
    _loadViewPreferences();
    _sortAudiobooks();
    _loadAuthorImage();
@@ -180,6 +185,8 @@ class _AudiobookAuthorScreenState extends State<AudiobookAuthorScreen> {
                                  fit: BoxFit.cover,
                                  width: 200,
                                  height: 200,
+                                  fadeInDuration: Duration.zero,
+                                  fadeOutDuration: Duration.zero,
                                  placeholder: (_, __) => Icon(
                                    MdiIcons.accountOutline,
                                    size: 100,
@@ -218,7 +225,7 @@ class _AudiobookAuthorScreenState extends State<AudiobookAuthorScreen> {
                    ),
                    const SizedBox(height: 8),
                    Text(
-                      '${_audiobooks.length} ${_audiobooks.length == 1 ? 'audiobook' : 'audiobooks'}',
+                      S.of(context)!.audiobookCount(_audiobooks.length),
                      style: textTheme.bodyLarge?.copyWith(
                        color: colorScheme.onSurface.withOpacity(0.7),
                      ),
@@ -234,7 +241,7 @@ class _AudiobookAuthorScreenState extends State<AudiobookAuthorScreen> {
                child: Row(
                  children: [
                    Text(
-                      'Audiobooks',
+                      S.of(context)!.audiobooks,
                      style: textTheme.titleLarge?.copyWith(
                        color: colorScheme.onSurface,
                        fontWeight: FontWeight.bold,
@@ -248,7 +255,7 @@ class _AudiobookAuthorScreenState extends State<AudiobookAuthorScreen> {
                        color: colorScheme.primary,
                        size: 20,
                      ),
-                      tooltip: _sortOrder == 'alpha' ? 'Sort by year' : 'Sort alphabetically',
+                      tooltip: _sortOrder == 'alpha' ? S.of(context)!.sortByYear : S.of(context)!.sortAlphabetically,
                      onPressed: _toggleSortOrder,
                      visualDensity: VisualDensity.compact,
                      padding: EdgeInsets.zero,
@@ -266,10 +273,10 @@ class _AudiobookAuthorScreenState extends State<AudiobookAuthorScreen> {
                        size: 20,
                      ),
                      tooltip: _viewMode == 'grid2'
-                          ? '3-column grid'
+                          ? S.of(context)!.threeColumnGrid
                          : _viewMode == 'grid3'
-                              ? 'List view'
-                              : '2-column grid',
+                              ? S.of(context)!.listView
+                              : S.of(context)!.twoColumnGrid,
                      onPressed: _cycleViewMode,
                      visualDensity: VisualDensity.compact,
                      padding: EdgeInsets.zero,
@@ -328,7 +335,7 @@ class _AudiobookAuthorScreenState extends State<AudiobookAuthorScreen> {
    final heroSuffix = 'author${_heroTagSuffix}';

    return InkWell(
-      onTap: () => _navigateToAudiobook(book, heroTagSuffix: heroSuffix),
+      onTap: () => _navigateToAudiobook(book, heroTagSuffix: heroSuffix, initialImageUrl: imageUrl),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
@@ -348,6 +355,8 @@ class _AudiobookAuthorScreenState extends State<AudiobookAuthorScreen> {
                              fit: BoxFit.cover,
                              width: double.infinity,
                              height: double.infinity,
+                              fadeInDuration: Duration.zero,
+                              fadeOutDuration: Duration.zero,
                              placeholder: (_, __) => Center(
                                child: Icon(
                                  MdiIcons.bookOutline,
@@ -405,9 +414,9 @@ class _AudiobookAuthorScreenState extends State<AudiobookAuthorScreen> {
              ),
            ),
          ),
-          if (book.narratorsString != 'Unknown Narrator')
+          if (book.narratorsString != S.of(context)!.unknownNarrator)
            Text(
-              'Narrated by ${book.narratorsString}',
+              S.of(context)!.narratedBy(book.narratorsString),
              style: textTheme.bodySmall?.copyWith(
                color: colorScheme.onSurface.withOpacity(0.6),
              ),
@@ -442,6 +451,8 @@ class _AudiobookAuthorScreenState extends State<AudiobookAuthorScreen> {
                    ? CachedNetworkImage(
                        imageUrl: imageUrl,
                        fit: BoxFit.cover,
+                        fadeInDuration: Duration.zero,
+                        fadeOutDuration: Duration.zero,
                        placeholder: (_, __) => Icon(
                          MdiIcons.bookOutline,
                          color: colorScheme.onSurfaceVariant,
@@ -488,8 +499,8 @@ class _AudiobookAuthorScreenState extends State<AudiobookAuthorScreen> {
        ),
      ),
      subtitle: Text(
-        book.narratorsString != 'Unknown Narrator'
-            ? 'Narrated by ${book.narratorsString}'
+        book.narratorsString != S.of(context)!.unknownNarrator
+            ? S.of(context)!.narratedBy(book.narratorsString)
            : book.duration != null
                ? _formatDuration(book.duration!)
                : '',
@@ -507,17 +518,18 @@ class _AudiobookAuthorScreenState extends State<AudiobookAuthorScreen> {
              ),
            )
          : null,
-      onTap: () => _navigateToAudiobook(book, heroTagSuffix: heroSuffix),
+      onTap: () => _navigateToAudiobook(book, heroTagSuffix: heroSuffix, initialImageUrl: imageUrl),
    );
  }

-  void _navigateToAudiobook(Audiobook book, {String? heroTagSuffix}) {
+  void _navigateToAudiobook(Audiobook book, {String? heroTagSuffix, String? initialImageUrl}) {
    Navigator.push(
      context,
      FadeSlidePageRoute(
        child: AudiobookDetailScreen(
          audiobook: book,
          heroTagSuffix: heroTagSuffix,
+          initialImageUrl: initialImageUrl,
        ),
      ),
    );
@@ -5,20 +5,25 @@ import 'package:material_design_icons_flutter/material_design_icons_flutter.dart
 import '../models/media_item.dart';
 import '../providers/music_assistant_provider.dart';
 import '../widgets/global_player_overlay.dart';
+import '../widgets/player_picker_sheet.dart';
 import '../theme/palette_helper.dart';
 import '../theme/theme_provider.dart';
 import '../services/debug_logger.dart';
 import '../services/recently_played_service.dart';
 import '../constants/hero_tags.dart';
+import '../l10n/app_localizations.dart';

 class AudiobookDetailScreen extends StatefulWidget {
  final Audiobook audiobook;
  final String? heroTagSuffix;
+  /// Initial image URL from the source for seamless hero animation
+  final String? initialImageUrl;

  const AudiobookDetailScreen({
    super.key,
    required this.audiobook,
    this.heroTagSuffix,
+    this.initialImageUrl,
  });

  @override
@@ -118,10 +123,10 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {

  Future<void> _toggleFavorite() async {
    final maProvider = context.read<MusicAssistantProvider>();
-    if (maProvider.api == null) return;

    try {
      final newState = !_isFavorite;
+      bool success;

      if (newState) {
        String actualProvider = widget.audiobook.provider;
@@ -135,12 +140,17 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
              orElse: () => widget.audiobook.providerMappings!.first,
            ),
          );
-          actualProvider = mapping.providerInstance;
+          // Use providerDomain (e.g., "spotify") not providerInstance (e.g., "spotify--xyz")
+          actualProvider = mapping.providerDomain;
          actualItemId = mapping.itemId;
        }

        _logger.log('Adding audiobook to favorites: provider=$actualProvider, itemId=$actualItemId');
-        await maProvider.api!.addToFavorites('audiobook', actualItemId, actualProvider);
+        success = await maProvider.addToFavorites(
+          mediaType: 'audiobook',
+          itemId: actualItemId,
+          provider: actualProvider,
+        );
      } else {
        int? libraryItemId;

@@ -160,30 +170,37 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
          throw Exception('Could not determine library ID for this audiobook');
        }

-        _logger.log('Removing audiobook from favorites: libraryItemId=$libraryItemId');
-        await maProvider.api!.removeFromFavorites('audiobook', libraryItemId);
+        success = await maProvider.removeFromFavorites(
+          mediaType: 'audiobook',
+          libraryItemId: libraryItemId,
+        );
      }

-      setState(() {
-        _isFavorite = newState;
-      });
+      if (success) {
+        setState(() {
+          _isFavorite = newState;
+        });

-      if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(
-            content: Text(
-              _isFavorite ? 'Added to favorites' : 'Removed from favorites',
+        if (mounted) {
+          final isOffline = !maProvider.isConnected;
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(
+              content: Text(
+                isOffline
+                    ? S.of(context)!.actionQueuedForSync
+                    : (_isFavorite ? S.of(context)!.addedToFavorites : S.of(context)!.removedFromFavorites),
+              ),
+              duration: const Duration(seconds: 1),
            ),
-            duration: const Duration(seconds: 1),
-          ),
-        );
+          );
+        }
      }
    } catch (e) {
      _logger.log('Error toggling audiobook favorite: $e');
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
-            content: Text('Failed to update favorite: $e'),
+            content: Text(S.of(context)!.failedToUpdateFavorite(e.toString())),
            duration: const Duration(seconds: 2),
          ),
        );
@@ -193,62 +210,22 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {

  void _showPlayOnMenu(BuildContext context) {
    final maProvider = context.read<MusicAssistantProvider>();
-    final players = maProvider.availablePlayers;

    GlobalPlayerOverlay.hidePlayer();

-    final screenHeight = MediaQuery.of(context).size.height;
-    final bottomPadding = MediaQuery.of(context).padding.bottom;
-    final sheetHeight = (screenHeight * 0.45) + bottomPadding;
-
-    showModalBottomSheet(
+    showPlayerPickerSheet(
      context: context,
-      backgroundColor: Colors.transparent,
-      isScrollControlled: true,
-      builder: (context) => Container(
-        height: sheetHeight,
-        decoration: BoxDecoration(
-          color: Theme.of(context).colorScheme.surface,
-          borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
-        ),
-        child: Column(
-          children: [
-            const SizedBox(height: 16),
-            Text(
-              'Play on...',
-              style: Theme.of(context).textTheme.titleLarge,
-            ),
-            const SizedBox(height: 16),
-            Expanded(
-              child: players.isEmpty
-                  ? const Center(child: Text('No players available'))
-                  : ListView.builder(
-                      padding: EdgeInsets.only(bottom: bottomPadding + 16),
-                      itemCount: players.length,
-                      itemBuilder: (context, index) {
-                        final player = players[index];
-                        return ListTile(
-                          leading: Icon(
-                            Icons.speaker,
-                            color: Theme.of(context).colorScheme.onSurface,
-                          ),
-                          title: Text(player.name),
-                          onTap: () async {
-                            Navigator.pop(context);
-                            maProvider.selectPlayer(player);
-                            maProvider.setCurrentAudiobook(_audiobook);
-                            await maProvider.api?.playAudiobook(
-                              player.playerId,
-                              widget.audiobook,
-                            );
-                          },
-                        );
-                      },
-                    ),
-            ),
-          ],
-        ),
-      ),
+      title: S.of(context)!.playOn,
+      players: maProvider.availablePlayers,
+      selectedPlayer: maProvider.selectedPlayer,
+      onPlayerSelected: (player) async {
+        maProvider.selectPlayer(player);
+        maProvider.setCurrentAudiobook(_audiobook);
+        await maProvider.api?.playAudiobook(
+          player.playerId,
+          widget.audiobook,
+        );
+      },
    ).whenComplete(() {
      GlobalPlayerOverlay.showPlayer();
    });
@@ -287,7 +264,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
-            content: Text('${_audiobook.name} marked as finished'),
+            content: Text(S.of(context)!.markedAsFinished(_audiobook.name)),
            duration: const Duration(seconds: 2),
          ),
        );
@@ -297,7 +274,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
-            content: Text('Failed to mark as finished: $e'),
+            content: Text(S.of(context)!.failedToMarkFinished(e.toString())),
            backgroundColor: Colors.red,
          ),
        );
@@ -338,7 +315,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
-            content: Text('${_audiobook.name} marked as unplayed'),
+            content: Text(S.of(context)!.markedAsUnplayed(_audiobook.name)),
            duration: const Duration(seconds: 2),
          ),
        );
@@ -348,7 +325,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
-            content: Text('Failed to mark as unplayed: $e'),
+            content: Text(S.of(context)!.failedToMarkUnplayed(e.toString())),
            backgroundColor: Colors.red,
          ),
        );
@@ -362,7 +339,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {

    if (selectedPlayer == null) {
      ScaffoldMessenger.of(context).showSnackBar(
-        const SnackBar(content: Text('No player selected')),
+        SnackBar(content: Text(S.of(context)!.noPlayerSelected)),
      );
      return;
    }
@@ -392,7 +369,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
-            content: Text('Playing ${widget.audiobook.name}'),
+            content: Text(S.of(context)!.playing(widget.audiobook.name)),
            duration: const Duration(seconds: 1),
          ),
        );
@@ -402,7 +379,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
-            content: Text('Failed to play: $e'),
+            content: Text(S.of(context)!.failedToPlay(e.toString())),
            backgroundColor: Colors.red,
          ),
        );
@@ -413,7 +390,9 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
  @override
  Widget build(BuildContext context) {
    final maProvider = context.read<MusicAssistantProvider>();
-    final imageUrl = maProvider.getImageUrl(widget.audiobook, size: 512);
+    final providerImageUrl = maProvider.getImageUrl(widget.audiobook, size: 512);
+    // Use initialImageUrl as fallback for seamless hero animation
+    final imageUrl = providerImageUrl ?? widget.initialImageUrl;

    final adaptiveTheme = context.select<ThemeProvider, bool>(
      (provider) => provider.adaptiveTheme,
@@ -448,10 +427,16 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
      },
      child: Scaffold(
        backgroundColor: colorScheme.surface,
-        body: CustomScrollView(
+        body: LayoutBuilder(
+          builder: (context, constraints) {
+            // Responsive cover size: 70% of screen width, clamped between 200-320
+            final coverSize = (constraints.maxWidth * 0.7).clamp(200.0, 320.0);
+            final expandedHeight = coverSize + 70;
+
+            return CustomScrollView(
          slivers: [
            SliverAppBar(
-              expandedHeight: 350,
+              expandedHeight: expandedHeight,
              pinned: true,
              backgroundColor: colorScheme.surface,
              leading: IconButton(
@@ -489,7 +474,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
                            size: 20,
                          ),
                          const SizedBox(width: 12),
-                          const Text('Mark as Finished'),
+                          Text(S.of(context)!.markAsFinished),
                        ],
                      ),
                    ),
@@ -503,7 +488,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
                            size: 20,
                          ),
                          const SizedBox(width: 12),
-                          const Text('Mark as Unplayed'),
+                          Text(S.of(context)!.markAsUnplayed),
                        ],
                      ),
                    ),
@@ -520,24 +505,29 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(8),
                        child: Container(
-                          width: 280,
-                          height: 280,
+                          width: coverSize,
+                          height: coverSize,
                          color: colorScheme.surfaceContainerHighest,
                          child: imageUrl != null
                              ? CachedNetworkImage(
                                  imageUrl: imageUrl,
                                  fit: BoxFit.cover,
+                                  // Match source memCacheWidth for smooth Hero animation
+                                  memCacheWidth: 256,
+                                  memCacheHeight: 256,
+                                  fadeInDuration: Duration.zero,
+                                  fadeOutDuration: Duration.zero,
                                  placeholder: (_, __) => Center(
                                    child: Icon(
                                      MdiIcons.bookOutline,
-                                      size: 120,
+                                      size: coverSize * 0.43,
                                      color: colorScheme.onSurfaceVariant,
                                    ),
                                  ),
                                  errorWidget: (_, __, ___) => Center(
                                    child: Icon(
                                      MdiIcons.bookOutline,
-                                      size: 120,
+                                      size: coverSize * 0.43,
                                      color: colorScheme.onSurfaceVariant,
                                    ),
                                  ),
@@ -545,7 +535,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
                              : Center(
                                  child: Icon(
                                    MdiIcons.bookOutline,
-                                    size: 120,
+                                    size: coverSize * 0.43,
                                    color: colorScheme.onSurfaceVariant,
                                  ),
                                ),
@@ -580,17 +570,17 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {

                    // Author
                    Text(
-                      'By ${book.authorsString}',
+                      S.of(context)!.byAuthor(book.authorsString),
                      style: textTheme.titleMedium?.copyWith(
                        color: colorScheme.onSurface.withOpacity(0.8),
                      ),
                    ),

                    // Narrator
-                    if (book.narratorsString != 'Unknown Narrator') ...[
+                    if (book.narratorsString != S.of(context)!.unknownNarrator) ...[
                      const SizedBox(height: 4),
                      Text(
-                        'Narrated by ${book.narratorsString}',
+                        S.of(context)!.narratedBy(book.narratorsString),
                        style: textTheme.bodyMedium?.copyWith(
                          color: colorScheme.onSurface.withOpacity(0.6),
                        ),
@@ -624,7 +614,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
                          ),
                          const SizedBox(width: 4),
                          Text(
-                            '${(book.progress * 100).toInt()}% complete',
+                            S.of(context)!.percentComplete((book.progress * 100).toInt()),
                            style: textTheme.bodyMedium?.copyWith(
                              color: colorScheme.primary,
                            ),
@@ -662,7 +652,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
                                startPositionMs: hasResumePosition ? book.resumePositionMs : null,
                              ),
                              icon: Icon(hasResumePosition ? Icons.play_arrow : Icons.play_arrow),
-                              label: Text(hasResumePosition ? 'Resume' : 'Play'),
+                              label: Text(hasResumePosition ? S.of(context)!.resume : S.of(context)!.play),
                              style: ElevatedButton.styleFrom(
                                backgroundColor: colorScheme.primary,
                                foregroundColor: colorScheme.onPrimary,
@@ -740,7 +730,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
                    if (book.description != null && book.description!.isNotEmpty) ...[
                      const SizedBox(height: 24),
                      Text(
-                        'About',
+                        S.of(context)!.about,
                        style: textTheme.titleLarge?.copyWith(
                          color: colorScheme.onSurface,
                          fontWeight: FontWeight.bold,
@@ -771,7 +761,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
                    // Chapters Header
                    const SizedBox(height: 24),
                    Text(
-                      'Chapters',
+                      S.of(context)!.chapters,
                      style: textTheme.titleLarge?.copyWith(
                        color: colorScheme.onSurface,
                        fontWeight: FontWeight.bold,
@@ -789,6 +779,8 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {

            const SliverToBoxAdapter(child: SizedBox(height: 140)),
          ],
+        );
+          },
        ),
      ),
    );
@@ -815,7 +807,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
                  ),
                  const SizedBox(height: 12),
                  Text(
-                    'Loading chapters...',
+                    S.of(context)!.loadingChapters,
                    style: textTheme.bodyMedium?.copyWith(
                      color: colorScheme.onSurface.withOpacity(0.6),
                    ),
@@ -853,7 +845,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
          padding: const EdgeInsets.all(24.0),
          child: Center(
            child: Text(
-              'No chapter information available',
+              S.of(context)!.noChapterInfoAvailable,
              style: textTheme.bodyMedium?.copyWith(
                color: colorScheme.onSurface.withOpacity(0.6),
              ),
@@ -914,7 +906,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
          ),
          subtitle: isInProgress
              ? Text(
-                  'In progress',
+                  S.of(context)!.inProgress,
                  style: textTheme.bodySmall?.copyWith(
                    color: colorScheme.primary,
                  ),
@@ -972,7 +964,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
                            children: [
                              const Icon(Icons.play_arrow, size: 20),
                              const SizedBox(width: 8),
-                              Text(isInProgress ? 'Resume' : 'Play'),
+                              Text(isInProgress ? S.of(context)!.resume : S.of(context)!.play),
                            ],
                          ),
                        ),
@@ -11,6 +11,7 @@ import '../services/debug_logger.dart';
 import '../utils/page_transitions.dart';
 import '../constants/hero_tags.dart';
 import 'audiobook_detail_screen.dart';
+import '../l10n/app_localizations.dart';

 class AudiobookSeriesScreen extends StatefulWidget {
  final AudiobookSeries series;
@@ -168,7 +169,7 @@ class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {

      if (maProvider.api == null) {
        setState(() {
-          _error = 'Not connected to Music Assistant';
+          _error = S.of(context)!.notConnected;
          _isLoading = false;
        });
        return;
@@ -270,14 +271,21 @@ class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {
    final colorScheme = Theme.of(context).colorScheme;
    final textTheme = Theme.of(context).textTheme;
    final maProvider = context.watch<MusicAssistantProvider>();
+    final l10n = S.of(context)!;

    return Scaffold(
      backgroundColor: colorScheme.surface,
-      body: CustomScrollView(
+      body: LayoutBuilder(
+        builder: (context, constraints) {
+          // Responsive cover size: 70% of screen width, clamped between 200-320
+          final coverSize = (constraints.maxWidth * 0.7).clamp(200.0, 320.0);
+          final expandedHeight = coverSize + 70;
+
+          return CustomScrollView(
        slivers: [
          // App bar with series cover collage (matches audiobook detail screen)
          SliverAppBar(
-            expandedHeight: 350,
+            expandedHeight: expandedHeight,
            pinned: true,
            backgroundColor: colorScheme.surface,
            leading: IconButton(
@@ -290,12 +298,12 @@ class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const SizedBox(height: 60),
-                  // Series cover collage - same size as audiobook detail cover
+                  // Series cover collage - responsive size
                  Hero(
                    tag: widget.heroTag ?? 'series_cover_${widget.series.id}',
                    child: Container(
-                      width: 280,
-                      height: 280,
+                      width: coverSize,
+                      height: coverSize,
                      decoration: BoxDecoration(
                        color: colorScheme.surfaceContainerHighest,
                        borderRadius: BorderRadius.circular(12),
@@ -335,8 +343,8 @@ class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {
                  const SizedBox(height: 8),
                  Text(
                    _isLoading
-                        ? 'Loading...'
-                        : '${_audiobooks.length} ${_audiobooks.length == 1 ? 'book' : 'books'}',
+                        ? l10n.loading
+                        : l10n.bookCount(_audiobooks.length),
                    style: textTheme.bodyLarge?.copyWith(
                      color: colorScheme.onSurface.withOpacity(0.7),
                    ),
@@ -353,7 +361,7 @@ class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {
              child: Row(
                children: [
                  Text(
-                    'Books',
+                    l10n.books,
                    style: textTheme.titleLarge?.copyWith(
                      color: colorScheme.onSurface,
                      fontWeight: FontWeight.bold,
@@ -367,7 +375,7 @@ class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {
                      color: colorScheme.primary,
                      size: 20,
                    ),
-                    tooltip: _sortOrder == 'series' ? 'Sort alphabetically' : 'Sort by series order',
+                    tooltip: _sortOrder == 'series' ? S.of(context)!.sortAlphabetically : S.of(context)!.sortBySeriesOrder,
                    onPressed: _toggleSortOrder,
                    visualDensity: VisualDensity.compact,
                    padding: EdgeInsets.zero,
@@ -385,10 +393,10 @@ class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {
                      size: 20,
                    ),
                    tooltip: _viewMode == 'grid2'
-                        ? '3-column grid'
+                        ? S.of(context)!.threeColumnGrid
                        : _viewMode == 'grid3'
-                            ? 'List view'
-                            : '2-column grid',
+                            ? S.of(context)!.listView
+                            : S.of(context)!.twoColumnGrid,
                    onPressed: _cycleViewMode,
                    visualDensity: VisualDensity.compact,
                    padding: EdgeInsets.zero,
@@ -416,7 +424,7 @@ class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {
                    const SizedBox(height: 16),
                    ElevatedButton(
                      onPressed: _loadSeriesBooks,
-                      child: const Text('Retry'),
+                      child: Text(l10n.retry),
                    ),
                  ],
                ),
@@ -432,7 +440,7 @@ class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {
                        size: 48, color: colorScheme.onSurfaceVariant),
                    const SizedBox(height: 16),
                    Text(
-                      'No books found in this series',
+                      S.of(context)!.noBooksInSeries,
                      style: TextStyle(color: colorScheme.onSurfaceVariant),
                    ),
                  ],
@@ -443,10 +451,12 @@ class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {
            _buildAudiobookSliver(maProvider),

          // Bottom padding for mini player
-          const SliverToBoxAdapter(
+          SliverToBoxAdapter(
            child: SizedBox(height: BottomSpacing.withMiniPlayer),
          ),
        ],
+      );
+        },
      ),
    );
  }
@@ -515,6 +525,8 @@ class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {
                      ? CachedNetworkImage(
                          imageUrl: coverUrl,
                          fit: BoxFit.cover,
+                          fadeInDuration: Duration.zero,
+                          fadeOutDuration: Duration.zero,
                          placeholder: (_, __) => Container(
                            color: colorScheme.surfaceContainerHighest,
                          ),
@@ -631,7 +643,7 @@ class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {
    final heroSuffix = 'series_${widget.series.id}';

    return InkWell(
-      onTap: () => _navigateToAudiobook(book, heroTagSuffix: heroSuffix),
+      onTap: () => _navigateToAudiobook(book, heroTagSuffix: heroSuffix, initialImageUrl: imageUrl),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
@@ -651,6 +663,8 @@ class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {
                              fit: BoxFit.cover,
                              width: double.infinity,
                              height: double.infinity,
+                              fadeInDuration: Duration.zero,
+                              fadeOutDuration: Duration.zero,
                              placeholder: (_, __) => Center(
                                child: Icon(
                                  MdiIcons.bookOutline,
@@ -708,7 +722,7 @@ class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {
              ),
            ),
          ),
-          if (book.authorsString.isNotEmpty && book.authorsString != 'Unknown Author')
+          if (book.authorsString.isNotEmpty && book.authorsString != S.of(context)!.unknownAuthor)
            Text(
              book.authorsString,
              style: textTheme.bodySmall?.copyWith(
@@ -744,6 +758,8 @@ class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {
                    ? CachedNetworkImage(
                        imageUrl: imageUrl,
                        fit: BoxFit.cover,
+                        fadeInDuration: Duration.zero,
+                        fadeOutDuration: Duration.zero,
                        placeholder: (_, __) => Icon(
                          MdiIcons.bookOutline,
                          color: colorScheme.onSurfaceVariant,
@@ -790,7 +806,7 @@ class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {
        ),
      ),
      subtitle: Text(
-        book.authorsString.isNotEmpty && book.authorsString != 'Unknown Author'
+        book.authorsString.isNotEmpty && book.authorsString != S.of(context)!.unknownAuthor
            ? book.authorsString
            : book.duration != null
                ? _formatDuration(book.duration!)
@@ -809,17 +825,18 @@ class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {
              ),
            )
          : null,
-      onTap: () => _navigateToAudiobook(book, heroTagSuffix: heroSuffix),
+      onTap: () => _navigateToAudiobook(book, heroTagSuffix: heroSuffix, initialImageUrl: imageUrl),
    );
  }

-  void _navigateToAudiobook(Audiobook book, {String? heroTagSuffix}) {
+  void _navigateToAudiobook(Audiobook book, {String? heroTagSuffix, String? initialImageUrl}) {
    Navigator.push(
      context,
      FadeSlidePageRoute(
        child: AudiobookDetailScreen(
          audiobook: book,
          heroTagSuffix: heroTagSuffix,
+          initialImageUrl: initialImageUrl,
        ),
      ),
    );
@@ -5,6 +5,7 @@ import 'package:share_plus/share_plus.dart';
 import '../services/debug_logger.dart';
 import '../providers/music_assistant_provider.dart';
 import '../widgets/global_player_overlay.dart';
+import '../l10n/app_localizations.dart';

 class DebugLogScreen extends StatefulWidget {
  const DebugLogScreen({super.key});
@@ -42,10 +43,10 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
  void _copyLogs() {
    Clipboard.setData(ClipboardData(text: _logger.getAllLogs()));
    ScaffoldMessenger.of(context).showSnackBar(
-      const SnackBar(
-        content: Text('Logs copied to clipboard'),
+      SnackBar(
+        content: Text(S.of(context)!.logsCopied),
        backgroundColor: Colors.green,
-        duration: Duration(seconds: 2),
+        duration: const Duration(seconds: 2),
      ),
    );
  }
@@ -58,7 +59,7 @@ class _DebugLogScreenState extends State<DebugLogScreen> {

      await Share.share(
        report,
-        subject: 'Ensemble Bug Report',
+        subject: S.of(context)!.ensembleBugReport,
      );
    } finally {
      if (mounted) {
@@ -72,9 +73,9 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
      _logger.clear();
    });
    ScaffoldMessenger.of(context).showSnackBar(
-      const SnackBar(
-        content: Text('Logs cleared'),
-        duration: Duration(seconds: 1),
+      SnackBar(
+        content: Text(S.of(context)!.logsCleared),
+        duration: const Duration(seconds: 1),
      ),
    );
  }
@@ -93,7 +94,7 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
        builder: (context) => AlertDialog(
          backgroundColor: const Color(0xFF2a2a2a),
          title: Text(
-            'All Players (${allPlayers.length})',
+            S.of(context)!.allPlayersCount(allPlayers.length),
            style: const TextStyle(color: Colors.white),
          ),
          content: SizedBox(
@@ -153,27 +154,27 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
-                          'ID: ${player.playerId}',
+                          S.of(context)!.playerId(player.playerId),
                          style: const TextStyle(color: Colors.white70, fontSize: 11),
                        ),
                        Text(
-                          'Available: ${player.available} | Provider: ${player.provider}',
+                          S.of(context)!.playerInfo(player.available.toString(), player.provider ?? 'unknown'),
                          style: const TextStyle(color: Colors.white70, fontSize: 11),
                        ),
                        if (isCurrentPlayer)
-                          const Text(
-                            '← This device',
-                            style: TextStyle(color: Colors.green, fontSize: 11, fontWeight: FontWeight.bold),
+                          Text(
+                            S.of(context)!.thisDevice,
+                            style: const TextStyle(color: Colors.green, fontSize: 11, fontWeight: FontWeight.bold),
                          ),
                        if (isGhost && !isCorrupt)
-                          const Text(
-                            '⚠️ Ghost player (duplicate)',
-                            style: TextStyle(color: Colors.red, fontSize: 11),
+                          Text(
+                            S.of(context)!.ghostPlayer,
+                            style: const TextStyle(color: Colors.red, fontSize: 11),
                          ),
                        if (isCorrupt)
-                          const Text(
-                            '⚠️ Unavailable/Corrupt',
-                            style: TextStyle(color: Colors.orange, fontSize: 11),
+                          Text(
+                            S.of(context)!.unavailableCorrupt,
+                            style: const TextStyle(color: Colors.orange, fontSize: 11),
                          ),
                      ],
                    ),
@@ -195,15 +196,15 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
                if (context.mounted) {
                  Navigator.pop(context);
                  ScaffoldMessenger.of(context).showSnackBar(
-                    const SnackBar(content: Text('Player list copied to clipboard!')),
+                    SnackBar(content: Text(S.of(context)!.playerListCopied)),
                  );
                }
              },
-              child: const Text('Copy List'),
+              child: Text(S.of(context)!.copyList),
            ),
            TextButton(
              onPressed: () => Navigator.pop(context),
-              child: const Text('Close'),
+              child: Text(S.of(context)!.close),
            ),
          ],
        ),
@@ -211,7 +212,7 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
-          SnackBar(content: Text('Error loading players: $e')),
+          SnackBar(content: Text(S.of(context)!.errorLoadingPlayers(e.toString()))),
        );
      }
    }
@@ -229,9 +230,9 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
          onPressed: () => Navigator.pop(context),
          color: Colors.white,
        ),
-        title: const Text(
-          'Debug Logs',
-          style: TextStyle(
+        title: Text(
+          S.of(context)!.debugLogs,
+          style: const TextStyle(
            color: Colors.white,
            fontSize: 20,
            fontWeight: FontWeight.w300,
@@ -256,11 +257,11 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
                  icon: const Icon(Icons.share_rounded),
                  onPressed: _shareBugReport,
                  color: Colors.white,
-                  tooltip: 'Share bug report',
+                  tooltip: S.of(context)!.shareBugReport,
                ),
          PopupMenuButton<String>(
            icon: const Icon(Icons.more_vert, color: Colors.white),
-            tooltip: 'More options',
+            tooltip: S.of(context)!.moreOptions,
            onSelected: (value) async {
              switch (value) {
                case 'show_players':
@@ -275,27 +276,27 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
              }
            },
            itemBuilder: (context) => [
-              const PopupMenuItem(
+              PopupMenuItem(
                value: 'show_players',
                child: ListTile(
-                  leading: Icon(Icons.speaker_group_rounded),
-                  title: Text('View All Players'),
+                  leading: const Icon(Icons.speaker_group_rounded),
+                  title: Text(S.of(context)!.viewAllPlayers),
                  dense: true,
                ),
              ),
-              const PopupMenuItem(
+              PopupMenuItem(
                value: 'copy_logs',
                child: ListTile(
-                  leading: Icon(Icons.copy_rounded),
-                  title: Text('Copy Logs'),
+                  leading: const Icon(Icons.copy_rounded),
+                  title: Text(S.of(context)!.copyLogs),
                  dense: true,
                ),
              ),
-              const PopupMenuItem(
+              PopupMenuItem(
                value: 'clear_logs',
                child: ListTile(
-                  leading: Icon(Icons.delete_rounded),
-                  title: Text('Clear Logs'),
+                  leading: const Icon(Icons.delete_rounded),
+                  title: Text(S.of(context)!.clearLogs),
                  dense: true,
                ),
              ),
@@ -317,20 +318,20 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
                  scrollDirection: Axis.horizontal,
                  child: Row(
                    children: [
-                      _buildFilterChip('All', LogLevel.debug),
+                      _buildFilterChip(S.of(context)!.all, LogLevel.debug),
                      const SizedBox(width: 8),
-                      _buildFilterChip('Info+', LogLevel.info),
+                      _buildFilterChip(S.of(context)!.infoPlus, LogLevel.info),
                      const SizedBox(width: 8),
-                      _buildFilterChip('Warnings', LogLevel.warning),
+                      _buildFilterChip(S.of(context)!.warnings, LogLevel.warning),
                      const SizedBox(width: 8),
-                      _buildFilterChip('Errors', LogLevel.error),
+                      _buildFilterChip(S.of(context)!.errors, LogLevel.error),
                    ],
                  ),
                ),
                const SizedBox(height: 8),
                // Stats
                Text(
-                  'Showing ${_filteredEntries.length} of ${_logger.entries.length} entries',
+                  S.of(context)!.showingEntries(_filteredEntries.length, _logger.entries.length),
                  style: const TextStyle(color: Colors.white54, fontSize: 11),
                ),
              ],
@@ -338,10 +339,10 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
          ),
          Expanded(
            child: _filteredEntries.isEmpty
-                ? const Center(
+                ? Center(
                    child: Text(
-                      'No logs yet',
-                      style: TextStyle(
+                      S.of(context)!.noLogsYet,
+                      style: const TextStyle(
                        color: Colors.white54,
                        fontSize: 16,
                      ),
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
+import '../l10n/app_localizations.dart';
 import '../providers/navigation_provider.dart';
 import '../widgets/global_player_overlay.dart';
 import 'new_home_screen.dart';
@@ -39,7 +40,7 @@ class _HomeScreenState extends State<HomeScreen> {
    ScaffoldMessenger.of(context).clearSnackBars();
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
-        content: const Text('Press back again to minimize'),
+        content: Text(S.of(context)!.pressBackToMinimize),
        duration: const Duration(seconds: 2),
        behavior: SnackBarBehavior.floating,
        margin: const EdgeInsets.only(bottom: 80, left: 16, right: 16),
@@ -61,6 +62,12 @@ class _HomeScreenState extends State<HomeScreen> {
          onPopInvokedWithResult: (didPop, result) {
            if (didPop) return;

+            // If player reveal (device list) is visible, dismiss it first (with animation)
+            if (GlobalPlayerOverlay.isPlayerRevealVisible) {
+              GlobalPlayerOverlay.dismissPlayerReveal();
+              return;
+            }
+
            // If global player is expanded, collapse it first
            if (GlobalPlayerOverlay.isPlayerExpanded) {
              GlobalPlayerOverlay.collapsePlayer();
@@ -4,6 +4,7 @@ import '../providers/music_assistant_provider.dart';
 import '../models/media_item.dart';
 import '../widgets/album_card.dart';
 import '../widgets/common/empty_state.dart';
+import '../l10n/app_localizations.dart';

 class LibraryAlbumsScreen extends StatelessWidget {
  const LibraryAlbumsScreen({super.key});
@@ -25,7 +26,7 @@ class LibraryAlbumsScreen extends StatelessWidget {
          color: colorScheme.onBackground,
        ),
        title: Text(
-          'Albums',
+          S.of(context)!.albums,
          style: textTheme.headlineSmall?.copyWith(
            color: colorScheme.onBackground,
            fontWeight: FontWeight.w300,
@@ -46,7 +47,9 @@ class LibraryAlbumsScreen extends StatelessWidget {
  Widget _buildAlbumsList(BuildContext context, List<Album> albums, bool isLoading) {
    final colorScheme = Theme.of(context).colorScheme;

-    if (isLoading) {
+    // Show cached data immediately if available, even while loading
+    // Only show spinner if we have no data at all AND we're loading
+    if (albums.isEmpty && isLoading) {
      return Center(
        child: CircularProgressIndicator(color: colorScheme.primary),
      );
@@ -54,13 +57,14 @@ class LibraryAlbumsScreen extends StatelessWidget {

    if (albums.isEmpty) {
      return EmptyState.albums(
+        context: context,
        onRefresh: () => context.read<MusicAssistantProvider>().loadLibrary(),
      );
    }

    return RefreshIndicator(
      color: colorScheme.primary,
-      backgroundColor: colorScheme.surface,
+      backgroundColor: colorScheme.background,
      onRefresh: () async {
        await context.read<MusicAssistantProvider>().loadLibrary();
      },
@@ -6,6 +6,7 @@ import '../utils/page_transitions.dart';
 import '../widgets/common/empty_state.dart';
 import '../widgets/artist_avatar.dart';
 import 'artist_details_screen.dart';
+import '../l10n/app_localizations.dart';

 class LibraryArtistsScreen extends StatelessWidget {
  const LibraryArtistsScreen({super.key});
@@ -27,7 +28,7 @@ class LibraryArtistsScreen extends StatelessWidget {
          color: colorScheme.onBackground,
        ),
        title: Text(
-          'Artists',
+          S.of(context)!.artists,
          style: textTheme.headlineSmall?.copyWith(
            color: colorScheme.onBackground,
            fontWeight: FontWeight.w300,
@@ -48,7 +49,9 @@ class LibraryArtistsScreen extends StatelessWidget {
  Widget _buildArtistsList(BuildContext context, List<Artist> artists, bool isLoading) {
    final colorScheme = Theme.of(context).colorScheme;

-    if (isLoading) {
+    // Show cached data immediately if available, even while loading
+    // Only show spinner if we have no data at all AND we're loading
+    if (artists.isEmpty && isLoading) {
      return Center(
        child: CircularProgressIndicator(color: colorScheme.primary),
      );
@@ -56,13 +59,14 @@ class LibraryArtistsScreen extends StatelessWidget {

    if (artists.isEmpty) {
      return EmptyState.artists(
+        context: context,
        onRefresh: () => context.read<MusicAssistantProvider>().loadLibrary(),
      );
    }

    return RefreshIndicator(
      color: colorScheme.primary,
-      backgroundColor: colorScheme.surface,
+      backgroundColor: colorScheme.background,
      onRefresh: () async {
        await context.read<MusicAssistantProvider>().loadLibrary();
      },
@@ -5,6 +5,7 @@ import '../providers/music_assistant_provider.dart';
 import '../models/media_item.dart';
 import '../widgets/common/empty_state.dart';
 import 'playlist_details_screen.dart';
+import '../l10n/app_localizations.dart';

 class LibraryPlaylistsScreen extends StatefulWidget {
  const LibraryPlaylistsScreen({super.key});
@@ -29,17 +30,11 @@ class _LibraryPlaylistsScreenState extends State<LibraryPlaylistsScreen> {
    });

    final maProvider = context.read<MusicAssistantProvider>();
-    if (maProvider.api != null) {
-      final playlists = await maProvider.api!.getPlaylists(limit: 100);
-      setState(() {
-        _playlists = playlists;
-        _isLoading = false;
-      });
-    } else {
-      setState(() {
-        _isLoading = false;
-      });
-    }
+    final playlists = await maProvider.getPlaylists(limit: 100);
+    setState(() {
+      _playlists = playlists;
+      _isLoading = false;
+    });
  }

  @override
@@ -59,7 +54,7 @@ class _LibraryPlaylistsScreenState extends State<LibraryPlaylistsScreen> {
          color: colorScheme.onBackground,
        ),
        title: Text(
-          'Playlists',
+          S.of(context)!.playlists,
          style: textTheme.headlineSmall?.copyWith(
            color: colorScheme.onBackground,
            fontWeight: FontWeight.w300,
@@ -74,19 +69,21 @@ class _LibraryPlaylistsScreenState extends State<LibraryPlaylistsScreen> {
  Widget _buildPlaylistsList(BuildContext context, MusicAssistantProvider provider) {
    final colorScheme = Theme.of(context).colorScheme;

-    if (_isLoading) {
+    // Show cached data immediately if available, even while loading
+    // Only show spinner if we have no data at all AND we're loading
+    if (_playlists.isEmpty && _isLoading) {
      return Center(
        child: CircularProgressIndicator(color: colorScheme.primary),
      );
    }

    if (_playlists.isEmpty) {
-      return EmptyState.playlists(onRefresh: _loadPlaylists);
+      return EmptyState.playlists(context: context, onRefresh: _loadPlaylists);
    }

    return RefreshIndicator(
      color: colorScheme.primary,
-      backgroundColor: colorScheme.surface,
+      backgroundColor: colorScheme.background,
      onRefresh: _loadPlaylists,
      child: ListView.builder(
        itemCount: _playlists.length,
@@ -138,8 +135,8 @@ class _LibraryPlaylistsScreenState extends State<LibraryPlaylistsScreen> {
        ),
        subtitle: Text(
          playlist.trackCount != null
-              ? '${playlist.trackCount} tracks'
-              : playlist.owner ?? 'Playlist',
+              ? '${playlist.trackCount} ${S.of(context)!.tracks}'
+              : playlist.owner ?? S.of(context)!.playlist,
          style: textTheme.bodySmall?.copyWith(
            color: colorScheme.onSurface.withOpacity(0.7),
          ),
@@ -4,6 +4,7 @@ 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 '../l10n/app_localizations.dart';

 class LibraryTracksScreen extends StatelessWidget {
  const LibraryTracksScreen({super.key});
@@ -25,7 +26,7 @@ class LibraryTracksScreen extends StatelessWidget {
          color: colorScheme.onBackground,
        ),
        title: Text(
-          'Tracks',
+          S.of(context)!.tracks,
          style: textTheme.headlineSmall?.copyWith(
            color: colorScheme.onBackground,
            fontWeight: FontWeight.w300,
@@ -41,14 +42,16 @@ class LibraryTracksScreen extends StatelessWidget {
      BuildContext context, MusicAssistantProvider provider) {
    final colorScheme = Theme.of(context).colorScheme;

-    if (provider.isLoading) {
+    // Show cached data immediately if available, even while loading
+    // Only show spinner if we have no data at all AND we're loading
+    if (provider.tracks.isEmpty && provider.isLoading) {
      return Center(
        child: CircularProgressIndicator(color: colorScheme.primary),
      );
    }

    if (provider.tracks.isEmpty) {
-      return EmptyState.tracks(onRefresh: provider.loadLibrary);
+      return EmptyState.tracks(context: context, onRefresh: provider.loadLibrary);
    }

    return ListView.builder(
@@ -129,7 +132,7 @@ class LibraryTracksScreen extends StatelessWidget {

    if (maProvider.selectedPlayer == null) {
      ScaffoldMessenger.of(context).showSnackBar(
-        const SnackBar(content: Text('No player selected')),
+        SnackBar(content: Text(S.of(context)!.noPlayerSelected)),
      );
      return;
    }
@@ -7,6 +7,7 @@ import '../services/profile_service.dart';
 import '../services/auth/auth_strategy.dart';
 import '../services/debug_logger.dart';
 import '../widgets/debug/debug_console.dart';
+import '../l10n/app_localizations.dart';
 import 'home_screen.dart';

 class LoginScreen extends StatefulWidget {
@@ -158,7 +159,7 @@ class _LoginScreenState extends State<LoginScreen> {
  Future<void> _detectAuthRequirements() async {
    if (_serverUrlController.text.trim().isEmpty) {
      setState(() {
-        _error = 'Please enter your Music Assistant server address';
+        _error = S.of(context)!.pleaseEnterServerAddress;
      });
      return;
    }
@@ -194,7 +195,7 @@ class _LoginScreenState extends State<LoginScreen> {

      if (strategy == null) {
        setState(() {
-          _error = 'Cannot determine authentication requirements. Please check server URL.';
+          _error = S.of(context)!.cannotDetermineAuth;
          _isDetectingAuth = false;
        });
        return;
@@ -230,13 +231,13 @@ class _LoginScreenState extends State<LoginScreen> {
  String _getAuthTypeName(String strategyName) {
    switch (strategyName) {
      case 'none':
-        return 'No Authentication';
+        return S.of(context)!.noAuthentication;
      case 'basic':
-        return 'HTTP Basic Auth';
+        return S.of(context)!.httpBasicAuth;
      case 'authelia':
-        return 'Authelia';
+        return S.of(context)!.authelia;
      case 'music_assistant':
-        return 'Music Assistant Login';
+        return S.of(context)!.musicAssistantLogin;
      default:
        return 'Unknown';
    }
@@ -260,7 +261,7 @@ class _LoginScreenState extends State<LoginScreen> {
  Future<void> _connect() async {
    if (_serverUrlController.text.trim().isEmpty) {
      setState(() {
-        _error = 'Please enter your Music Assistant server address';
+        _error = S.of(context)!.pleaseEnterServerAddress;
      });
      return;
    }
@@ -270,7 +271,7 @@ class _LoginScreenState extends State<LoginScreen> {
    final isMaAuth = _detectedAuthStrategy?.name == 'music_assistant';
    if (!isMaAuth && _ownerNameController.text.trim().isEmpty) {
      setState(() {
-        _error = 'Please enter your name';
+        _error = S.of(context)!.pleaseEnterName;
      });
      return;
    }
@@ -292,7 +293,7 @@ class _LoginScreenState extends State<LoginScreen> {
        portNum = int.tryParse(port);
        if (portNum == null || portNum < 1 || portNum > 65535) {
          setState(() {
-            _error = 'Please enter a valid port number (1-65535)';
+            _error = S.of(context)!.pleaseEnterValidPort;
            _isConnecting = false;
          });
          return;
@@ -324,7 +325,7 @@ class _LoginScreenState extends State<LoginScreen> {

        if (username.isEmpty || password.isEmpty) {
          setState(() {
-            _error = 'Please enter username and password';
+            _error = S.of(context)!.pleaseEnterCredentials;
            _isConnecting = false;
          });
          return;
@@ -350,7 +351,7 @@ class _LoginScreenState extends State<LoginScreen> {

        if (!success) {
          setState(() {
-            _error = 'Authentication failed. Please check your credentials.';
+            _error = S.of(context)!.authFailed;
            _isConnecting = false;
          });
          return;
@@ -384,7 +385,7 @@ class _LoginScreenState extends State<LoginScreen> {

        if (username.isEmpty || password.isEmpty) {
          setState(() {
-            _error = 'Please enter username and password';
+            _error = S.of(context)!.pleaseEnterCredentials;
            _isConnecting = false;
          });
          return;
@@ -408,7 +409,7 @@ class _LoginScreenState extends State<LoginScreen> {

          if (accessToken == null) {
            setState(() {
-              _error = 'Music Assistant login failed. Please check your credentials.';
+              _error = S.of(context)!.maLoginFailed;
              _isConnecting = false;
            });
            return;
@@ -442,6 +443,18 @@ class _LoginScreenState extends State<LoginScreen> {
      }

      if (provider.isConnected) {
+        // For first-time users, wait for player selection so the welcome
+        // overlay can appear immediately without home screen flash.
+        // This matches the logic in AppStartup._checkAndConnect().
+        final hasCompletedOnboarding = await SettingsService.getHasCompletedOnboarding();
+        if (!hasCompletedOnboarding) {
+          // First-time user: wait for connection + player selection
+          for (int i = 0; i < 20; i++) {
+            await Future.delayed(const Duration(milliseconds: 250));
+            if (provider.selectedPlayer != null) break;
+          }
+        }
+
        // Navigate to home screen
        if (mounted) {
          // Ensure keyboard is closed before navigating
@@ -452,7 +465,7 @@ class _LoginScreenState extends State<LoginScreen> {
        }
      } else {
        setState(() {
-          _error = 'Could not connect to server. Please check the address and try again.';
+          _error = S.of(context)!.connectionFailed;
          _isConnecting = false;
        });
      }
@@ -500,7 +513,7 @@ class _LoginScreenState extends State<LoginScreen> {

              // Server URL
              Text(
-                'Server Address',
+                S.of(context)!.serverAddress,
                style: textTheme.titleMedium?.copyWith(
                  color: colorScheme.onBackground,
                  fontWeight: FontWeight.w500,
@@ -512,7 +525,7 @@ class _LoginScreenState extends State<LoginScreen> {
                controller: _serverUrlController,
                style: TextStyle(color: colorScheme.onSurface),
                decoration: InputDecoration(
-                  hintText: 'e.g., music.example.com or 192.168.1.100',
+                  hintText: S.of(context)!.serverAddressHint,
                  hintStyle: TextStyle(color: colorScheme.onSurface.withOpacity(0.38)),
                  filled: true,
                  fillColor: colorScheme.surfaceVariant.withOpacity(0.3),
@@ -539,7 +552,7 @@ class _LoginScreenState extends State<LoginScreen> {
              if (_detectedAuthStrategy != null &&
                  _detectedAuthStrategy!.name != 'music_assistant') ...[
                Text(
-                  'Your Name',
+                  S.of(context)!.yourName,
                  style: textTheme.titleMedium?.copyWith(
                    color: colorScheme.onBackground,
                    fontWeight: FontWeight.w500,
@@ -551,7 +564,7 @@ class _LoginScreenState extends State<LoginScreen> {
                  controller: _ownerNameController,
                  style: TextStyle(color: colorScheme.onSurface),
                  decoration: InputDecoration(
-                    hintText: 'Your first name',
+                    hintText: S.of(context)!.yourFirstName,
                    hintStyle: TextStyle(color: colorScheme.onSurface.withOpacity(0.38)),
                    filled: true,
                    fillColor: colorScheme.surfaceVariant.withOpacity(0.3),
@@ -574,7 +587,7 @@ class _LoginScreenState extends State<LoginScreen> {

              // Port
              Text(
-                'Port (Optional)',
+                S.of(context)!.portOptional,
                style: textTheme.titleMedium?.copyWith(
                  color: colorScheme.onBackground,
                  fontWeight: FontWeight.w500,
@@ -582,7 +595,7 @@ class _LoginScreenState extends State<LoginScreen> {
              ),
              const SizedBox(height: 8),
              Text(
-                'Leave blank for reverse proxy or standard ports. Enter 8095 for direct connection.',
+                S.of(context)!.portDescription,
                style: TextStyle(
                  color: colorScheme.onBackground.withOpacity(0.6),
                  fontSize: 12,
@@ -594,7 +607,7 @@ class _LoginScreenState extends State<LoginScreen> {
                controller: _portController,
                style: TextStyle(color: colorScheme.onSurface),
                decoration: InputDecoration(
-                  hintText: 'e.g., 8095 or leave blank',
+                  hintText: S.of(context)!.portHint,
                  hintStyle: TextStyle(color: colorScheme.onSurface.withOpacity(0.38)),
                  filled: true,
                  fillColor: colorScheme.surfaceVariant.withOpacity(0.3),
@@ -639,7 +652,7 @@ class _LoginScreenState extends State<LoginScreen> {
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
-                              'Detected: $_detectedAuthType',
+                              S.of(context)!.detectedAuthType(_detectedAuthType!),
                              style: TextStyle(
                                color: needsAuth
                                    ? colorScheme.onPrimaryContainer
@@ -652,7 +665,7 @@ class _LoginScreenState extends State<LoginScreen> {
                              Padding(
                                padding: const EdgeInsets.only(top: 4),
                                child: Text(
-                                  'This server requires authentication',
+                                  S.of(context)!.serverRequiresAuth,
                                  style: TextStyle(
                                    color: colorScheme.onPrimaryContainer.withOpacity(0.7),
                                    fontSize: 12,
@@ -698,8 +711,8 @@ class _LoginScreenState extends State<LoginScreen> {
                          children: [
                            Text(
                              _isTailscaleUrl(_serverUrlController.text)
-                                  ? 'Tailscale VPN Connection'
-                                  : 'Unencrypted Connection',
+                                  ? S.of(context)!.tailscaleVpnConnection
+                                  : S.of(context)!.unencryptedConnection,
                              style: TextStyle(
                                color: _isTailscaleUrl(_serverUrlController.text)
                                    ? colorScheme.onSecondaryContainer
@@ -712,10 +725,10 @@ class _LoginScreenState extends State<LoginScreen> {
                              padding: const EdgeInsets.only(top: 4),
                              child: Text(
                                _isTailscaleUrl(_serverUrlController.text)
-                                    ? 'Using HTTP over Tailscale (encrypted tunnel)'
+                                    ? S.of(context)!.usingHttpOverTailscale
                                    : _usedHttpFallback
-                                        ? 'HTTPS failed, using HTTP fallback'
-                                        : 'HTTP connection - data is not encrypted',
+                                        ? S.of(context)!.httpsFailedUsingHttp
+                                        : S.of(context)!.httpNotEncrypted,
                                style: TextStyle(
                                  color: (_isTailscaleUrl(_serverUrlController.text)
                                      ? colorScheme.onSecondaryContainer
@@ -736,7 +749,7 @@ class _LoginScreenState extends State<LoginScreen> {
                // Auth Server URL (only for Authelia)
                if (_detectedAuthStrategy?.name == 'authelia') ...[
                  Text(
-                    'Auth Server URL (Optional)',
+                    S.of(context)!.authServerUrlOptional,
                    style: textTheme.titleMedium?.copyWith(
                      color: colorScheme.onBackground,
                      fontWeight: FontWeight.w500,
@@ -744,7 +757,7 @@ class _LoginScreenState extends State<LoginScreen> {
                  ),
                  const SizedBox(height: 8),
                  Text(
-                    'Leave empty if authentication is on the same server',
+                    S.of(context)!.authServerUrlDescription,
                    style: TextStyle(
                      color: colorScheme.onBackground.withOpacity(0.6),
                      fontSize: 12,
@@ -756,7 +769,7 @@ class _LoginScreenState extends State<LoginScreen> {
                    controller: _authServerUrlController,
                    style: TextStyle(color: colorScheme.onSurface),
                    decoration: InputDecoration(
-                      hintText: 'e.g., auth.example.com (if different from server)',
+                      hintText: S.of(context)!.authServerUrlHint,
                      hintStyle: TextStyle(color: colorScheme.onSurface.withOpacity(0.38)),
                      filled: true,
                      fillColor: colorScheme.surfaceVariant.withOpacity(0.3),
@@ -777,7 +790,7 @@ class _LoginScreenState extends State<LoginScreen> {
                ],

                Text(
-                  'Username',
+                  S.of(context)!.username,
                  style: textTheme.titleMedium?.copyWith(
                    color: colorScheme.onBackground,
                    fontWeight: FontWeight.w500,
@@ -790,7 +803,7 @@ class _LoginScreenState extends State<LoginScreen> {
                  focusNode: _usernameFocusNode,
                  style: TextStyle(color: colorScheme.onSurface),
                  decoration: InputDecoration(
-                    hintText: 'Username',
+                    hintText: S.of(context)!.username,
                    hintStyle: TextStyle(color: colorScheme.onSurface.withOpacity(0.38)),
                    filled: true,
                    fillColor: colorScheme.surfaceVariant.withOpacity(0.3),
@@ -810,7 +823,7 @@ class _LoginScreenState extends State<LoginScreen> {
                const SizedBox(height: 16),

                Text(
-                  'Password',
+                  S.of(context)!.password,
                  style: textTheme.titleMedium?.copyWith(
                    color: colorScheme.onBackground,
                    fontWeight: FontWeight.w500,
@@ -822,7 +835,7 @@ class _LoginScreenState extends State<LoginScreen> {
                  controller: _passwordController,
                  style: TextStyle(color: colorScheme.onSurface),
                  decoration: InputDecoration(
-                    hintText: 'Password',
+                    hintText: S.of(context)!.password,
                    hintStyle: TextStyle(color: colorScheme.onSurface.withOpacity(0.38)),
                    filled: true,
                    fillColor: colorScheme.surfaceVariant.withOpacity(0.3),
@@ -912,9 +925,9 @@ class _LoginScreenState extends State<LoginScreen> {
                            ),
                          ),
                          const SizedBox(width: 12),
-                          const Text(
-                            'Detecting authentication...',
-                            style: TextStyle(
+                          Text(
+                            S.of(context)!.detectingAuth,
+                            style: const TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                            ),
@@ -931,7 +944,7 @@ class _LoginScreenState extends State<LoginScreen> {
                            ),
                          )
                        : Text(
-                            _detectedAuthStrategy == null ? 'Detect & Connect' : 'Connect',
+                            _detectedAuthStrategy == null ? S.of(context)!.detectAndConnect : S.of(context)!.connect,
                            style: const TextStyle(
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart';
 import 'package:provider/provider.dart';
+import '../l10n/app_localizations.dart';
 import '../providers/music_assistant_provider.dart';
 import '../services/settings_service.dart';
 import '../services/debug_logger.dart';
@@ -179,6 +180,7 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
            // Only show disconnected state if we have no cached data at all
            if (!isConnected && !syncService.hasCache) {
              return DisconnectedState.full(
+                context: context,
                onSettings: () => Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const SettingsScreen()),
@@ -192,11 +194,12 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
                RefreshIndicator(
                  onRefresh: _onRefresh,
                  color: colorScheme.primary,
-                  backgroundColor: colorScheme.surface,
+                  backgroundColor: colorScheme.background,
                  child: _buildConnectedView(context, maProvider),
                ),
                // Connecting banner overlay (doesn't affect layout)
-                if (!isConnected && syncService.hasCache)
+                // Hide when we have cached players - UI is functional during background reconnect
+                if (!isConnected && syncService.hasCache && !maProvider.hasCachedPlayers)
                  Positioned(
                    top: 0,
                    left: 0,
@@ -217,7 +220,7 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
                          ),
                          const SizedBox(width: 8),
                          Text(
-                            'Connecting...',
+                            S.of(context)!.connecting,
                            style: Theme.of(context).textTheme.bodySmall?.copyWith(
                              color: colorScheme.onPrimaryContainer,
                            ),
@@ -243,7 +246,7 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
        // Simple calculation: available height divided by 3 rows
        // Each row includes its title, artwork, and info
        final availableHeight = constraints.maxHeight - BottomSpacing.withMiniPlayer;
-        final rowHeight = availableHeight / 3;
+        final rowHeight = (availableHeight + 8) / 3;

        // Use Android 12+ stretch overscroll effect
        return NotificationListener<ScrollNotification>(
@@ -299,31 +302,34 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
        if (!_showRecentAlbums) return null;
        return AlbumRow(
          key: const ValueKey('recent-albums'),
-          title: 'Recently Played',
+          title: S.of(context)!.recentlyPlayed,
          loadAlbums: () => provider.getRecentAlbumsWithCache(),
+          getCachedAlbums: () => provider.getCachedRecentAlbums(),
          rowHeight: rowHeight,
        );
      case 'discover-artists':
        if (!_showDiscoverArtists) return null;
        return ArtistRow(
          key: const ValueKey('discover-artists'),
-          title: 'Discover Artists',
+          title: S.of(context)!.discoverArtists,
          loadArtists: () => provider.getDiscoverArtistsWithCache(),
+          getCachedArtists: () => provider.getCachedDiscoverArtists(),
          rowHeight: rowHeight,
        );
      case 'discover-albums':
        if (!_showDiscoverAlbums) return null;
        return AlbumRow(
          key: const ValueKey('discover-albums'),
-          title: 'Discover Albums',
+          title: S.of(context)!.discoverAlbums,
          loadAlbums: () => provider.getDiscoverAlbumsWithCache(),
+          getCachedAlbums: () => provider.getCachedDiscoverAlbums(),
          rowHeight: rowHeight,
        );
      case 'continue-listening':
        if (!_showContinueListeningAudiobooks) return null;
        return AudiobookRow(
          key: const ValueKey('continue-listening'),
-          title: 'Continue Listening',
+          title: S.of(context)!.continueListening,
          loadAudiobooks: () => provider.getInProgressAudiobooks(),
          rowHeight: rowHeight,
        );
@@ -331,7 +337,7 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
        if (!_showDiscoverAudiobooks) return null;
        return AudiobookRow(
          key: const ValueKey('discover-audiobooks'),
-          title: 'Discover Audiobooks',
+          title: S.of(context)!.discoverAudiobooks,
          loadAudiobooks: () => provider.getDiscoverAudiobooks(),
          rowHeight: rowHeight,
        );
@@ -339,7 +345,7 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
        if (!_showDiscoverSeries) return null;
        return SeriesRow(
          key: const ValueKey('discover-series'),
-          title: 'Discover Series',
+          title: S.of(context)!.discoverSeries,
          loadSeries: () => provider.getDiscoverSeries(),
          rowHeight: rowHeight,
        );
@@ -347,7 +353,7 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
        if (!_showFavoriteAlbums) return null;
        return AlbumRow(
          key: const ValueKey('favorite-albums'),
-          title: 'Favorite Albums',
+          title: S.of(context)!.favoriteAlbums,
          loadAlbums: () => provider.getFavoriteAlbums(),
          rowHeight: rowHeight,
        );
@@ -355,7 +361,7 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
        if (!_showFavoriteArtists) return null;
        return ArtistRow(
          key: const ValueKey('favorite-artists'),
-          title: 'Favorite Artists',
+          title: S.of(context)!.favoriteArtists,
          loadArtists: () => provider.getFavoriteArtists(),
          rowHeight: rowHeight,
        );
@@ -363,7 +369,7 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
        if (!_showFavoriteTracks) return null;
        return TrackRow(
          key: const ValueKey('favorite-tracks'),
-          title: 'Favorite Tracks',
+          title: S.of(context)!.favoriteTracks,
          loadTracks: () => provider.getFavoriteTracks(),
          rowHeight: rowHeight,
        );
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import '../l10n/app_localizations.dart';
 import '../models/media_item.dart';
 import '../providers/music_assistant_provider.dart';
 import '../services/debug_logger.dart';
@@ -34,21 +35,48 @@ class _PlaylistDetailsScreenState extends State<PlaylistDetailsScreen> {
  }

  Future<void> _loadTracks() async {
-    setState(() {
-      _isLoading = true;
-    });
-
    final maProvider = context.read<MusicAssistantProvider>();
-    final tracks = await maProvider.getPlaylistTracksWithCache(
-      widget.provider,
-      widget.itemId,
-    );
+    final cacheKey = '${widget.provider}_${widget.itemId}';

-    if (mounted) {
-      setState(() {
-        _tracks = tracks;
-        _isLoading = false;
-      });
+    // 1. Show cached data immediately (if available)
+    final cachedTracks = maProvider.getCachedPlaylistTracks(cacheKey);
+    if (cachedTracks != null && cachedTracks.isNotEmpty) {
+      if (mounted) {
+        setState(() {
+          _tracks = cachedTracks;
+          _isLoading = false;
+        });
+      }
+    } else {
+      setState(() => _isLoading = true);
+    }
+
+    // 2. Fetch fresh data in background (silent refresh)
+    try {
+      final freshTracks = await maProvider.getPlaylistTracksWithCache(
+        widget.provider,
+        widget.itemId,
+        forceRefresh: cachedTracks != null,
+      );
+
+      // 3. Update if we got different data
+      if (mounted && freshTracks.isNotEmpty) {
+        final tracksChanged = _tracks.length != freshTracks.length ||
+            (_tracks.isNotEmpty && freshTracks.isNotEmpty &&
+             _tracks.first.itemId != freshTracks.first.itemId);
+        if (tracksChanged || _tracks.isEmpty) {
+          setState(() {
+            _tracks = freshTracks;
+            _isLoading = false;
+          });
+        }
+      }
+    } catch (e) {
+      // Silent failure - keep showing cached data
+    }
+
+    if (mounted && _isLoading) {
+      setState(() => _isLoading = false);
    }
  }

@@ -61,7 +89,7 @@ class _PlaylistDetailsScreenState extends State<PlaylistDetailsScreen> {
      // Use the selected player
      final player = maProvider.selectedPlayer;
      if (player == null) {
-        _showError('No player selected');
+        _showError(S.of(context)!.noPlayerSelected);
        return;
      }

@@ -77,7 +105,7 @@ class _PlaylistDetailsScreenState extends State<PlaylistDetailsScreen> {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
-            content: Text('Playing ${widget.playlist.name}'),
+            content: Text(S.of(context)!.playing(widget.playlist.name)),
            duration: const Duration(seconds: 2),
          ),
        );
@@ -195,7 +223,7 @@ class _PlaylistDetailsScreenState extends State<PlaylistDetailsScreen> {
                    child: ElevatedButton.icon(
                      onPressed: _isLoading ? null : _playPlaylist,
                      icon: const Icon(Icons.play_arrow_rounded),
-                      label: const Text('Play'),
+                      label: Text(S.of(context)!.play),
                      style: ElevatedButton.styleFrom(
                        backgroundColor: Colors.white,
                        foregroundColor: const Color(0xFF1a1a1a),
@@ -208,9 +236,9 @@ class _PlaylistDetailsScreenState extends State<PlaylistDetailsScreen> {
                  ),
                  const SizedBox(height: 24),
                  // Tracks header
-                  const Text(
-                    'Tracks',
-                    style: TextStyle(
+                  Text(
+                    S.of(context)!.tracks,
+                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                      fontWeight: FontWeight.bold,
@@ -230,7 +258,7 @@ class _PlaylistDetailsScreenState extends State<PlaylistDetailsScreen> {
                  ? SliverFillRemaining(
                      child: Center(
                        child: Text(
-                          'No tracks in playlist',
+                          S.of(context)!.noTracksInPlaylist,
                          style: TextStyle(
                            color: Colors.grey[600],
                            fontSize: 16,
@@ -327,7 +355,7 @@ class _PlaylistDetailsScreenState extends State<PlaylistDetailsScreen> {
        onPressed: () async {
          final player = maProvider.selectedPlayer;
          if (player == null) {
-            _showError('No player selected');
+            _showError(S.of(context)!.noPlayerSelected);
            return;
          }

@@ -336,9 +364,9 @@ class _PlaylistDetailsScreenState extends State<PlaylistDetailsScreen> {
            await maProvider.playTracks(player.playerId, _tracks, startIndex: index);
            if (mounted) {
              ScaffoldMessenger.of(context).showSnackBar(
-                const SnackBar(
-                  content: Text('Playing track'),
-                  duration: Duration(seconds: 1),
+                SnackBar(
+                  content: Text(S.of(context)!.playingTrack),
+                  duration: const Duration(seconds: 1),
                ),
              );
            }
@@ -0,0 +1,869 @@
+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 '../widgets/global_player_overlay.dart';
+import '../widgets/player_picker_sheet.dart';
+import '../theme/palette_helper.dart';
+import '../theme/theme_provider.dart';
+import '../services/debug_logger.dart';
+import '../constants/hero_tags.dart';
+import '../l10n/app_localizations.dart';
+
+class PodcastDetailScreen extends StatefulWidget {
+  final MediaItem podcast;
+  final String? heroTagSuffix;
+  final String? initialImageUrl;
+
+  const PodcastDetailScreen({
+    super.key,
+    required this.podcast,
+    this.heroTagSuffix,
+    this.initialImageUrl,
+  });
+
+  @override
+  State<PodcastDetailScreen> createState() => _PodcastDetailScreenState();
+}
+
+class _PodcastDetailScreenState extends State<PodcastDetailScreen> {
+  final _logger = DebugLogger();
+  ColorScheme? _lightColorScheme;
+  ColorScheme? _darkColorScheme;
+  List<MediaItem> _episodes = [];
+  bool _isLoadingEpisodes = false;
+  bool _isDescriptionExpanded = false;
+  bool _isInLibrary = false;
+  String? _expandedEpisodeId; // Track which episode is expanded for actions
+
+  String get _heroTagSuffix => widget.heroTagSuffix != null ? '_${widget.heroTagSuffix}' : '';
+
+  @override
+  void initState() {
+    super.initState();
+    _isInLibrary = _checkIfInLibrary(widget.podcast);
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      Future.delayed(const Duration(milliseconds: 350), () {
+        if (mounted) {
+          _extractColors();
+        }
+      });
+      _loadEpisodes();
+    });
+  }
+
+  /// Check if podcast is in library
+  bool _checkIfInLibrary(MediaItem podcast) {
+    if (podcast.provider == 'library') return true;
+    return podcast.providerMappings?.any((m) => m.providerInstance == 'library') ?? false;
+  }
+
+  /// Toggle library status
+  Future<void> _toggleLibrary() async {
+    final maProvider = context.read<MusicAssistantProvider>();
+
+    try {
+      final newState = !_isInLibrary;
+      bool success;
+
+      if (newState) {
+        // Add to library - MUST use non-library provider
+        String? actualProvider;
+        String? actualItemId;
+
+        if (widget.podcast.providerMappings != null && widget.podcast.providerMappings!.isNotEmpty) {
+          // For adding to library, we MUST use a non-library provider
+          final nonLibraryMapping = widget.podcast.providerMappings!.where(
+            (m) => m.providerInstance != 'library' && m.providerDomain != 'library',
+          ).firstOrNull;
+
+          if (nonLibraryMapping != null) {
+            actualProvider = nonLibraryMapping.providerDomain;
+            actualItemId = nonLibraryMapping.itemId;
+          }
+        }
+
+        // Fallback to item's own provider if no non-library mapping found
+        if (actualProvider == null || actualItemId == null) {
+          if (widget.podcast.provider != 'library') {
+            actualProvider = widget.podcast.provider;
+            actualItemId = widget.podcast.itemId;
+          } else {
+            // Item is library-only, can't add
+            _logger.log('Cannot add to library: podcast is library-only');
+            return;
+          }
+        }
+
+        _logger.log('Adding podcast to library: provider=$actualProvider, itemId=$actualItemId');
+        success = await maProvider.addToLibrary(
+          mediaType: 'podcast',
+          provider: actualProvider,
+          itemId: actualItemId,
+        );
+      } else {
+        // Remove from library
+        int? libraryItemId;
+        if (widget.podcast.provider == 'library') {
+          libraryItemId = int.tryParse(widget.podcast.itemId);
+        } else if (widget.podcast.providerMappings != null) {
+          final libraryMapping = widget.podcast.providerMappings!.firstWhere(
+            (m) => m.providerInstance == 'library',
+            orElse: () => widget.podcast.providerMappings!.first,
+          );
+          if (libraryMapping.providerInstance == 'library') {
+            libraryItemId = int.tryParse(libraryMapping.itemId);
+          }
+        }
+
+        if (libraryItemId == null) {
+          _logger.log('Cannot remove from library: no library ID found');
+          return;
+        }
+
+        success = await maProvider.removeFromLibrary(
+          mediaType: 'podcast',
+          libraryItemId: libraryItemId,
+        );
+      }
+
+      if (success) {
+        setState(() {
+          _isInLibrary = newState;
+        });
+
+        if (mounted) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(
+              content: Text(
+                _isInLibrary ? S.of(context)!.addedToLibrary : S.of(context)!.removedFromLibrary,
+              ),
+              duration: const Duration(seconds: 1),
+            ),
+          );
+        }
+      }
+    } catch (e) {
+      _logger.log('Error toggling podcast library: $e');
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Failed to update library: $e'),
+            duration: const Duration(seconds: 2),
+          ),
+        );
+      }
+    }
+  }
+
+  Future<void> _extractColors() async {
+    final maProvider = context.read<MusicAssistantProvider>();
+    // Use initialImageUrl first for consistency with hero animation
+    final imageUrl = widget.initialImageUrl ?? maProvider.getPodcastImageUrl(widget.podcast);
+
+    if (imageUrl != null) {
+      try {
+        final colorSchemes = await PaletteHelper.extractColorSchemes(
+          CachedNetworkImageProvider(imageUrl),
+        );
+        if (mounted && colorSchemes != null) {
+          setState(() {
+            _lightColorScheme = colorSchemes.$1;
+            _darkColorScheme = colorSchemes.$2;
+          });
+        }
+      } catch (e) {
+        _logger.log('🎙️ Error extracting colors: $e');
+      }
+    }
+  }
+
+  Future<void> _loadEpisodes() async {
+    if (_isLoadingEpisodes) return;
+
+    setState(() {
+      _isLoadingEpisodes = true;
+    });
+
+    try {
+      final maProvider = context.read<MusicAssistantProvider>();
+      if (maProvider.api != null) {
+        final episodes = await maProvider.api!.getPodcastEpisodes(
+          widget.podcast.itemId,
+          provider: widget.podcast.provider,
+        );
+
+        if (mounted) {
+          _logger.log('🎙️ Loaded ${episodes.length} episodes for ${widget.podcast.name}');
+          // Debug: Log first episode metadata to see available fields
+          if (episodes.isNotEmpty) {
+            final first = episodes.first;
+            _logger.log('🎙️ First episode metadata keys: ${first.metadata?.keys.toList()}');
+            _logger.log('🎙️ First episode metadata: ${first.metadata}');
+          }
+          setState(() {
+            _episodes = episodes;
+          });
+        }
+      }
+    } catch (e) {
+      _logger.log('🎙️ Error loading episodes: $e');
+    } finally {
+      if (mounted) {
+        setState(() {
+          _isLoadingEpisodes = false;
+        });
+      }
+    }
+  }
+
+  void _playEpisode(MediaItem episode) async {
+    final maProvider = context.read<MusicAssistantProvider>();
+    final selectedPlayer = maProvider.selectedPlayer;
+
+    if (selectedPlayer != null) {
+      try {
+        await maProvider.api?.playPodcastEpisode(selectedPlayer.playerId, episode);
+        if (mounted) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(
+              content: Text('Playing: ${episode.name}'),
+              duration: const Duration(seconds: 1),
+            ),
+          );
+        }
+      } catch (e) {
+        _logger.log('🎙️ Error playing episode: $e');
+        if (mounted) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(content: Text('Failed to play episode: $e')),
+          );
+        }
+      }
+    } else {
+      _showPlayOnMenu(context, episode);
+    }
+  }
+
+  void _showPlayOnMenu(BuildContext context, MediaItem episode) {
+    final maProvider = context.read<MusicAssistantProvider>();
+
+    GlobalPlayerOverlay.hidePlayer();
+
+    showPlayerPickerSheet(
+      context: context,
+      title: S.of(context)!.playOn,
+      players: maProvider.availablePlayers,
+      selectedPlayer: maProvider.selectedPlayer,
+      onPlayerSelected: (player) async {
+        maProvider.selectPlayer(player);
+        await maProvider.api?.playPodcastEpisode(player.playerId, episode);
+      },
+    ).whenComplete(() {
+      GlobalPlayerOverlay.showPlayer();
+    });
+  }
+
+  String _formatDuration(Duration? duration) {
+    if (duration == null || duration == Duration.zero) return '';
+    final hours = duration.inHours;
+    final minutes = duration.inMinutes.remainder(60);
+
+    if (hours > 0) {
+      return '${hours}h ${minutes}m';
+    }
+    return '${minutes} min';
+  }
+
+  /// Format release date from episode metadata
+  /// Tries various common field names for publication date
+  String? _formatReleaseDate(Map<String, dynamic>? metadata) {
+    if (metadata == null) return null;
+
+    // Try various common field names for publication date
+    dynamic dateValue = metadata['published'] ??
+        metadata['pub_date'] ??
+        metadata['release_date'] ??
+        metadata['aired'] ??
+        metadata['timestamp'];
+
+    if (dateValue == null) return null;
+
+    try {
+      DateTime? date;
+      if (dateValue is String) {
+        date = DateTime.tryParse(dateValue);
+      } else if (dateValue is int) {
+        // Unix timestamp
+        date = DateTime.fromMillisecondsSinceEpoch(dateValue * 1000);
+      }
+
+      if (date != null) {
+        // Format as "Jan 15, 2024"
+        final months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+        return '${months[date.month - 1]} ${date.day}, ${date.year}';
+      }
+    } catch (e) {
+      _logger.log('🎙️ Error parsing release date: $e');
+    }
+
+    return null;
+  }
+
+  /// Add episode to queue on current player
+  Future<void> _addToQueue(MediaItem episode) async {
+    final maProvider = context.read<MusicAssistantProvider>();
+    final selectedPlayer = maProvider.selectedPlayer;
+
+    if (selectedPlayer == null) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(content: Text(S.of(context)!.noPlayerSelected)),
+      );
+      return;
+    }
+
+    try {
+      // Convert MediaItem to Track for queue addition
+      final track = Track(
+        itemId: episode.itemId,
+        provider: episode.provider,
+        name: episode.name,
+        uri: episode.uri,
+        duration: episode.duration,
+        metadata: episode.metadata,
+      );
+      await maProvider.addTrackToQueue(selectedPlayer.playerId, track);
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text(S.of(context)!.addedToQueue),
+            duration: const Duration(seconds: 1),
+          ),
+        );
+      }
+    } catch (e) {
+      _logger.log('🎙️ Error adding episode to queue: $e');
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(content: Text(S.of(context)!.failedToAddToQueue(e.toString()))),
+        );
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // CRITICAL FIX: Use select() instead of watch() to prevent rebuilds during Hero animation
+    // watch() rebuilds on ANY provider change (library updates, etc.) causing animation jank
+    // select() only rebuilds when the specific podcast image URL changes
+    final providerImageUrl = context.select<MusicAssistantProvider, String?>(
+      (provider) => provider.getPodcastImageUrl(widget.podcast),
+    );
+    // Use initialImageUrl for seamless hero animation (same URL as source)
+    final imageUrl = widget.initialImageUrl ?? providerImageUrl;
+
+    final adaptiveTheme = context.select<ThemeProvider, bool>(
+      (provider) => provider.adaptiveTheme,
+    );
+    final adaptiveLightScheme = context.select<ThemeProvider, ColorScheme?>(
+      (provider) => provider.adaptiveLightScheme,
+    );
+    final adaptiveDarkScheme = context.select<ThemeProvider, ColorScheme?>(
+      (provider) => provider.adaptiveDarkScheme,
+    );
+
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+
+    ColorScheme? adaptiveScheme;
+    if (adaptiveTheme) {
+      adaptiveScheme = isDark
+          ? (_darkColorScheme ?? adaptiveDarkScheme)
+          : (_lightColorScheme ?? adaptiveLightScheme);
+    }
+    final colorScheme = adaptiveScheme ?? Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    final description = widget.podcast.metadata?['description'] as String?;
+    final author = widget.podcast.metadata?['author'] as String?;
+
+    return PopScope(
+      canPop: true,
+      onPopInvokedWithResult: (didPop, result) {
+        if (didPop) {
+          clearAdaptiveColorsOnBack(context);
+        }
+      },
+      child: Scaffold(
+        backgroundColor: colorScheme.surface,
+        body: LayoutBuilder(
+          builder: (context, constraints) {
+            final coverSize = (constraints.maxWidth * 0.7).clamp(200.0, 320.0);
+            final expandedHeight = coverSize + 70;
+
+            return CustomScrollView(
+              slivers: [
+                SliverAppBar(
+                  expandedHeight: expandedHeight,
+                  pinned: true,
+                  backgroundColor: colorScheme.surface,
+                  leading: IconButton(
+                    icon: const Icon(Icons.arrow_back_rounded),
+                    onPressed: () {
+                      clearAdaptiveColorsOnBack(context);
+                      Navigator.pop(context);
+                    },
+                    color: colorScheme.onSurface,
+                  ),
+                  flexibleSpace: FlexibleSpaceBar(
+                    background: Column(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        const SizedBox(height: 60),
+                        Hero(
+                          tag: HeroTags.podcastCover + (widget.podcast.uri ?? widget.podcast.itemId) + _heroTagSuffix,
+                          // Match audiobook pattern: ClipRRect + CachedNetworkImage for smooth hero
+                          child: ClipRRect(
+                            borderRadius: BorderRadius.circular(16),
+                            child: Container(
+                              width: coverSize,
+                              height: coverSize,
+                              color: colorScheme.surfaceContainerHighest,
+                              child: imageUrl != null
+                                  ? CachedNetworkImage(
+                                      imageUrl: imageUrl,
+                                      fit: BoxFit.cover,
+                                      // Match source memCacheWidth for smooth Hero animation
+                                      memCacheWidth: 256,
+                                      memCacheHeight: 256,
+                                      fadeInDuration: Duration.zero,
+                                      fadeOutDuration: Duration.zero,
+                                      placeholder: (_, __) => Center(
+                                        child: Icon(
+                                          MdiIcons.podcast,
+                                          size: coverSize * 0.43,
+                                          color: colorScheme.onSurfaceVariant,
+                                        ),
+                                      ),
+                                      errorWidget: (_, __, ___) => Center(
+                                        child: Icon(
+                                          MdiIcons.podcast,
+                                          size: coverSize * 0.43,
+                                          color: colorScheme.onSurfaceVariant,
+                                        ),
+                                      ),
+                                    )
+                                  : Center(
+                                      child: Icon(
+                                        MdiIcons.podcast,
+                                        size: coverSize * 0.43,
+                                        color: colorScheme.onSurfaceVariant,
+                                      ),
+                                    ),
+                            ),
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+                SliverToBoxAdapter(
+                  child: Padding(
+                    padding: const EdgeInsets.all(16),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.center,
+                      children: [
+                        // Podcast title
+                        Text(
+                          widget.podcast.name,
+                          style: textTheme.headlineSmall?.copyWith(
+                            fontWeight: FontWeight.bold,
+                            color: colorScheme.onSurface,
+                          ),
+                          textAlign: TextAlign.center,
+                        ),
+                        if (author != null) ...[
+                          const SizedBox(height: 4),
+                          Text(
+                            author,
+                            style: textTheme.bodyLarge?.copyWith(
+                              color: colorScheme.onSurface.withOpacity(0.7),
+                            ),
+                            textAlign: TextAlign.center,
+                          ),
+                        ],
+                        const SizedBox(height: 16),
+
+                        // Action buttons row
+                        Padding(
+                          padding: const EdgeInsets.symmetric(horizontal: 16),
+                          child: Row(
+                            children: [
+                              // Main Play Latest Episode Button
+                              Expanded(
+                                flex: 2,
+                                child: SizedBox(
+                                  height: 50,
+                                  child: ElevatedButton.icon(
+                                    onPressed: _isLoadingEpisodes || _episodes.isEmpty
+                                        ? null
+                                        : () => _playEpisode(_episodes.first),
+                                    icon: const Icon(Icons.play_arrow_rounded),
+                                    label: Text(S.of(context)!.play),
+                                    style: ElevatedButton.styleFrom(
+                                      backgroundColor: colorScheme.primary,
+                                      foregroundColor: colorScheme.onPrimary,
+                                      disabledBackgroundColor: colorScheme.primary.withOpacity(0.38),
+                                      disabledForegroundColor: colorScheme.onPrimary.withOpacity(0.38),
+                                      shape: RoundedRectangleBorder(
+                                        borderRadius: BorderRadius.circular(12),
+                                      ),
+                                    ),
+                                  ),
+                                ),
+                              ),
+                              const SizedBox(width: 12),
+                              // "Play on..." Button
+                              SizedBox(
+                                height: 50,
+                                width: 50,
+                                child: FilledButton.tonal(
+                                  onPressed: _isLoadingEpisodes || _episodes.isEmpty
+                                      ? null
+                                      : () => _showPlayOnMenu(context, _episodes.first),
+                                  style: FilledButton.styleFrom(
+                                    padding: EdgeInsets.zero,
+                                    shape: RoundedRectangleBorder(
+                                      borderRadius: BorderRadius.circular(12),
+                                    ),
+                                  ),
+                                  child: const Icon(Icons.speaker_group_outlined),
+                                ),
+                              ),
+                              const SizedBox(width: 12),
+                              // Library button
+                              SizedBox(
+                                height: 50,
+                                width: 50,
+                                child: FilledButton.tonal(
+                                  onPressed: _toggleLibrary,
+                                  style: FilledButton.styleFrom(
+                                    padding: EdgeInsets.zero,
+                                    shape: RoundedRectangleBorder(
+                                      borderRadius: BorderRadius.circular(12),
+                                    ),
+                                  ),
+                                  child: Icon(
+                                    _isInLibrary ? Icons.library_add_check : Icons.library_add,
+                                    color: _isInLibrary
+                                        ? colorScheme.primary
+                                        : colorScheme.onSurfaceVariant,
+                                  ),
+                                ),
+                              ),
+                            ],
+                          ),
+                        ),
+                        const SizedBox(height: 16),
+
+                        // Description
+                        if (description != null && description.isNotEmpty) ...[
+                          GestureDetector(
+                            onTap: () {
+                              setState(() {
+                                _isDescriptionExpanded = !_isDescriptionExpanded;
+                              });
+                            },
+                            child: AnimatedCrossFade(
+                              firstChild: Text(
+                                description,
+                                maxLines: 3,
+                                overflow: TextOverflow.ellipsis,
+                                style: textTheme.bodyMedium?.copyWith(
+                                  color: colorScheme.onSurface.withOpacity(0.7),
+                                ),
+                              ),
+                              secondChild: Text(
+                                description,
+                                style: textTheme.bodyMedium?.copyWith(
+                                  color: colorScheme.onSurface.withOpacity(0.7),
+                                ),
+                              ),
+                              crossFadeState: _isDescriptionExpanded
+                                  ? CrossFadeState.showSecond
+                                  : CrossFadeState.showFirst,
+                              duration: const Duration(milliseconds: 200),
+                            ),
+                          ),
+                          const SizedBox(height: 16),
+                        ],
+
+                        // Episodes header
+                        Row(
+                          children: [
+                            Text(
+                              S.of(context)!.episodes,
+                              style: textTheme.titleLarge?.copyWith(
+                                fontWeight: FontWeight.bold,
+                                color: colorScheme.onSurface,
+                              ),
+                            ),
+                            const SizedBox(width: 8),
+                            if (_episodes.isNotEmpty)
+                              Text(
+                                '(${_episodes.length})',
+                                style: textTheme.bodyLarge?.copyWith(
+                                  color: colorScheme.onSurface.withOpacity(0.5),
+                                ),
+                              ),
+                          ],
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+
+                // Episodes list
+                if (_isLoadingEpisodes)
+                  SliverToBoxAdapter(
+                    child: Center(
+                      child: Padding(
+                        padding: const EdgeInsets.all(32),
+                        child: CircularProgressIndicator(color: colorScheme.primary),
+                      ),
+                    ),
+                  )
+                else if (_episodes.isEmpty)
+                  SliverToBoxAdapter(
+                    child: Center(
+                      child: Padding(
+                        padding: const EdgeInsets.all(32),
+                        child: Column(
+                          children: [
+                            Icon(
+                              MdiIcons.microphoneOff,
+                              size: 48,
+                              color: colorScheme.onSurface.withOpacity(0.3),
+                            ),
+                            const SizedBox(height: 16),
+                            Text(
+                              'No episodes found',
+                              style: textTheme.bodyLarge?.copyWith(
+                                color: colorScheme.onSurface.withOpacity(0.5),
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                    ),
+                  )
+                else
+                  SliverList(
+                    delegate: SliverChildBuilderDelegate(
+                      (context, index) {
+                        final episode = _episodes[index];
+                        final episodeDescription = episode.metadata?['description'] as String?;
+                        final duration = episode.duration;
+                        final episodeId = episode.uri ?? episode.itemId;
+                        final isExpanded = _expandedEpisodeId == episodeId;
+                        final episodeImageUrl = context.read<MusicAssistantProvider>().getImageUrl(episode, size: 256);
+
+                        // Try to get release date from metadata
+                        final releaseDate = _formatReleaseDate(episode.metadata);
+
+                        return Column(
+                          children: [
+                            InkWell(
+                              onTap: () => _playEpisode(episode),
+                              onLongPress: () {
+                                setState(() {
+                                  _expandedEpisodeId = isExpanded ? null : episodeId;
+                                });
+                              },
+                              child: Padding(
+                                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+                                child: Row(
+                                  crossAxisAlignment: CrossAxisAlignment.start,
+                                  children: [
+                                    // Episode cover (bigger than before)
+                                    ClipRRect(
+                                      borderRadius: BorderRadius.circular(8),
+                                      child: Container(
+                                        width: 72,
+                                        height: 72,
+                                        color: colorScheme.surfaceContainerHighest,
+                                        child: episodeImageUrl != null
+                                            ? CachedNetworkImage(
+                                                imageUrl: episodeImageUrl,
+                                                fit: BoxFit.cover,
+                                                fadeInDuration: Duration.zero,
+                                                fadeOutDuration: Duration.zero,
+                                                placeholder: (_, __) => Icon(
+                                                  MdiIcons.podcast,
+                                                  size: 32,
+                                                  color: colorScheme.onSurfaceVariant,
+                                                ),
+                                                errorWidget: (_, __, ___) => Icon(
+                                                  MdiIcons.podcast,
+                                                  size: 32,
+                                                  color: colorScheme.onSurfaceVariant,
+                                                ),
+                                              )
+                                            : Icon(
+                                                MdiIcons.podcast,
+                                                size: 32,
+                                                color: colorScheme.onSurfaceVariant,
+                                              ),
+                                      ),
+                                    ),
+                                    const SizedBox(width: 12),
+                                    // Episode info
+                                    Expanded(
+                                      child: Column(
+                                        crossAxisAlignment: CrossAxisAlignment.start,
+                                        children: [
+                                          Text(
+                                            episode.name,
+                                            style: textTheme.titleSmall?.copyWith(
+                                              fontWeight: FontWeight.w500,
+                                            ),
+                                            maxLines: 2,
+                                            overflow: TextOverflow.ellipsis,
+                                          ),
+                                          if (episodeDescription != null && episodeDescription.isNotEmpty) ...[
+                                            const SizedBox(height: 4),
+                                            Text(
+                                              episodeDescription,
+                                              maxLines: isExpanded ? 100 : 2,
+                                              overflow: TextOverflow.ellipsis,
+                                              style: textTheme.bodySmall?.copyWith(
+                                                color: colorScheme.onSurface.withOpacity(0.6),
+                                              ),
+                                            ),
+                                          ],
+                                          const SizedBox(height: 6),
+                                          // Duration and release date row
+                                          Row(
+                                            children: [
+                                              if (duration != null && duration > Duration.zero) ...[
+                                                Icon(
+                                                  Icons.access_time,
+                                                  size: 14,
+                                                  color: colorScheme.onSurface.withOpacity(0.5),
+                                                ),
+                                                const SizedBox(width: 4),
+                                                Text(
+                                                  _formatDuration(duration),
+                                                  style: textTheme.bodySmall?.copyWith(
+                                                    color: colorScheme.onSurface.withOpacity(0.5),
+                                                  ),
+                                                ),
+                                              ],
+                                              if (duration != null && duration > Duration.zero && releaseDate != null)
+                                                Padding(
+                                                  padding: const EdgeInsets.symmetric(horizontal: 8),
+                                                  child: Text(
+                                                    '•',
+                                                    style: textTheme.bodySmall?.copyWith(
+                                                      color: colorScheme.onSurface.withOpacity(0.5),
+                                                    ),
+                                                  ),
+                                                ),
+                                              if (releaseDate != null)
+                                                Text(
+                                                  releaseDate,
+                                                  style: textTheme.bodySmall?.copyWith(
+                                                    color: colorScheme.onSurface.withOpacity(0.5),
+                                                  ),
+                                                ),
+                                            ],
+                                          ),
+                                        ],
+                                      ),
+                                    ),
+                                  ],
+                                ),
+                              ),
+                            ),
+                            // Expanded action buttons (matching album track style)
+                            AnimatedCrossFade(
+                              firstChild: const SizedBox.shrink(),
+                              secondChild: Padding(
+                                padding: const EdgeInsets.only(left: 100, right: 16, bottom: 12),
+                                child: Row(
+                                  children: [
+                                    // Play button
+                                    SizedBox(
+                                      height: 44,
+                                      width: 44,
+                                      child: FilledButton.tonal(
+                                        onPressed: () => _playEpisode(episode),
+                                        style: FilledButton.styleFrom(
+                                          padding: EdgeInsets.zero,
+                                          shape: RoundedRectangleBorder(
+                                            borderRadius: BorderRadius.circular(12),
+                                          ),
+                                        ),
+                                        child: const Icon(Icons.play_arrow, size: 20),
+                                      ),
+                                    ),
+                                    const SizedBox(width: 10),
+                                    // Play on... button
+                                    SizedBox(
+                                      height: 44,
+                                      width: 44,
+                                      child: FilledButton.tonal(
+                                        onPressed: () => _showPlayOnMenu(context, episode),
+                                        style: FilledButton.styleFrom(
+                                          padding: EdgeInsets.zero,
+                                          shape: RoundedRectangleBorder(
+                                            borderRadius: BorderRadius.circular(12),
+                                          ),
+                                        ),
+                                        child: const Icon(Icons.speaker_group_outlined, size: 20),
+                                      ),
+                                    ),
+                                    const SizedBox(width: 10),
+                                    // Add to queue button
+                                    SizedBox(
+                                      height: 44,
+                                      width: 44,
+                                      child: FilledButton.tonal(
+                                        onPressed: () => _addToQueue(episode),
+                                        style: FilledButton.styleFrom(
+                                          padding: EdgeInsets.zero,
+                                          shape: RoundedRectangleBorder(
+                                            borderRadius: BorderRadius.circular(12),
+                                          ),
+                                        ),
+                                        child: const Icon(Icons.playlist_add, size: 20),
+                                      ),
+                                    ),
+                                  ],
+                                ),
+                              ),
+                              crossFadeState: isExpanded
+                                  ? CrossFadeState.showSecond
+                                  : CrossFadeState.showFirst,
+                              duration: const Duration(milliseconds: 200),
+                            ),
+                          ],
+                        );
+                      },
+                      childCount: _episodes.length,
+                    ),
+                  ),
+
+                // Bottom padding for mini player
+                const SliverToBoxAdapter(
+                  child: SizedBox(height: 100),
+                ),
+              ],
+            );
+          },
+        ),
+      ),
+    );
+  }
+}
@@ -4,6 +4,7 @@ import '../providers/music_assistant_provider.dart';
 import '../models/player.dart';
 import '../services/debug_logger.dart';
 import '../widgets/common/empty_state.dart';
+import '../l10n/app_localizations.dart';

 class QueueScreen extends StatefulWidget {
  const QueueScreen({super.key});
@@ -51,7 +52,7 @@ class _QueueScreenState extends State<QueueScreen> {
        if (mounted) {
          setState(() {
            _isLoading = false;
-            _error = 'No player selected';
+            _error = S.of(context)!.noPlayerSelected;
          });
        }
      }
@@ -77,7 +78,7 @@ class _QueueScreenState extends State<QueueScreen> {
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: Text(
-          player != null ? '${player.name} Queue' : 'Queue',
+          player != null ? S.of(context)!.playerQueue(player.name) : S.of(context)!.queue,
          style: const TextStyle(
            color: Colors.white,
            fontSize: 20,
@@ -116,7 +117,7 @@ class _QueueScreenState extends State<QueueScreen> {
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: _loadQueue,
-              child: const Text('Retry'),
+              child: Text(S.of(context)!.retry),
            ),
          ],
        ),
@@ -131,7 +132,7 @@ class _QueueScreenState extends State<QueueScreen> {
            Icon(Icons.speaker_group, size: 64, color: Colors.grey[700]),
            const SizedBox(height: 16),
            Text(
-              'No player selected',
+              S.of(context)!.noPlayerSelected,
              style: TextStyle(color: Colors.grey[600], fontSize: 18),
            ),
          ],
@@ -140,7 +141,7 @@ class _QueueScreenState extends State<QueueScreen> {
    }

    if (_queue == null || _queue!.items.isEmpty) {
-      return EmptyState.queue();
+      return EmptyState.queue(context: context);
    }

    // Filter to show only current and upcoming items (not history)
@@ -148,9 +149,9 @@ class _QueueScreenState extends State<QueueScreen> {
    final upcomingItems = _queue!.items.sublist(currentIndex);

    if (upcomingItems.isEmpty) {
-      return const EmptyState(
+      return EmptyState(
        icon: Icons.queue_music,
-        message: 'No upcoming tracks',
+        message: S.of(context)!.noUpcomingTracks,
      );
    }

@@ -220,9 +221,9 @@ class _QueueScreenState extends State<QueueScreen> {

        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
-            content: Text('Removed ${item.track.name}'),
+            content: Text(S.of(context)!.removedItem(item.track.name)),
            action: SnackBarAction(
-              label: 'Undo',
+              label: S.of(context)!.undo,
              onPressed: () {
                setState(() {
                  _queue!.items.insert(index, item);
@@ -1,9 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import '../l10n/app_localizations.dart';
+import '../providers/locale_provider.dart';
 import '../providers/music_assistant_provider.dart';
 import '../services/music_assistant_api.dart';
 import '../services/settings_service.dart';
 import '../theme/theme_provider.dart';
+import '../theme/app_theme.dart';
 import '../widgets/global_player_overlay.dart';
 import 'debug_log_screen.dart';
 import 'login_screen.dart';
@@ -35,6 +38,13 @@ class _SettingsScreenState extends State<SettingsScreen> {
  // Audiobook libraries
  List<Map<String, String>> _discoveredLibraries = [];
  Map<String, bool> _libraryEnabled = {};
+  // Player settings
+  bool _preferLocalPlayer = false;
+  bool _smartSortPlayers = false;
+  // Hint settings
+  bool _showHints = true;
+  // Library settings
+  bool _showOnlyArtistsWithAlbums = false;

  @override
  void initState() {
@@ -79,6 +89,16 @@ class _SettingsScreenState extends State<SettingsScreen> {
      libraryEnabled[path] = enabled == null || enabled.contains(path);
    }

+    // Load player settings
+    final preferLocal = await SettingsService.getPreferLocalPlayer();
+    final smartSort = await SettingsService.getSmartSortPlayers();
+
+    // Load hint settings
+    final showHints = await SettingsService.getShowHints();
+
+    // Load library settings
+    final showOnlyArtistsWithAlbums = await SettingsService.getShowOnlyArtistsWithAlbums();
+
    if (mounted) {
      setState(() {
        _showRecentAlbums = showRecent;
@@ -93,6 +113,10 @@ class _SettingsScreenState extends State<SettingsScreen> {
        _homeRowOrder = rowOrder;
        _discoveredLibraries = discovered;
        _libraryEnabled = libraryEnabled;
+        _preferLocalPlayer = preferLocal;
+        _smartSortPlayers = smartSort;
+        _showHints = showHints;
+        _showOnlyArtistsWithAlbums = showOnlyArtistsWithAlbums;
      });
    }
  }
@@ -106,25 +130,26 @@ class _SettingsScreenState extends State<SettingsScreen> {

  // Helper to get row display info
  Map<String, String> _getRowInfo(String rowId) {
+    final s = S.of(context)!;
    switch (rowId) {
      case 'recent-albums':
-        return {'title': 'Recently Played', 'subtitle': 'Show recently played albums'};
+        return {'title': s.recentlyPlayed, 'subtitle': s.showRecentlyPlayedAlbums};
      case 'discover-artists':
-        return {'title': 'Discover Artists', 'subtitle': 'Show random artists to discover'};
+        return {'title': s.discoverArtists, 'subtitle': s.showRandomArtists};
      case 'discover-albums':
-        return {'title': 'Discover Albums', 'subtitle': 'Show random albums to discover'};
+        return {'title': s.discoverAlbums, 'subtitle': s.showRandomAlbums};
      case 'continue-listening':
-        return {'title': 'Continue Listening', 'subtitle': 'Show audiobooks in progress'};
+        return {'title': s.continueListening, 'subtitle': s.showAudiobooksInProgress};
      case 'discover-audiobooks':
-        return {'title': 'Discover Audiobooks', 'subtitle': 'Show random audiobooks to discover'};
+        return {'title': s.discoverAudiobooks, 'subtitle': s.showRandomAudiobooks};
      case 'discover-series':
-        return {'title': 'Discover Series', 'subtitle': 'Show random audiobook series to discover'};
+        return {'title': s.discoverSeries, 'subtitle': s.showRandomSeries};
      case 'favorite-albums':
-        return {'title': 'Favorite Albums', 'subtitle': 'Show a row of your favorite albums'};
+        return {'title': s.favoriteAlbums, 'subtitle': s.showFavoriteAlbums};
      case 'favorite-artists':
-        return {'title': 'Favorite Artists', 'subtitle': 'Show a row of your favorite artists'};
+        return {'title': s.favoriteArtists, 'subtitle': s.showFavoriteArtists};
      case 'favorite-tracks':
-        return {'title': 'Favorite Tracks', 'subtitle': 'Show a row of your favorite tracks'};
+        return {'title': s.favoriteTracks, 'subtitle': s.showFavoriteTracks};
      default:
        return {'title': rowId, 'subtitle': ''};
    }
@@ -233,7 +258,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
          color: colorScheme.onBackground,
        ),
        title: Text(
-          'Settings',
+          S.of(context)!.settings,
          style: textTheme.titleLarge?.copyWith(
            color: colorScheme.onBackground,
            fontWeight: FontWeight.w300,
@@ -252,7 +277,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
              );
            },
            color: colorScheme.onBackground,
-            tooltip: 'Debug Logs',
+            tooltip: S.of(context)!.debugLogs,
          ),
        ],
      ),
@@ -308,9 +333,9 @@ class _SettingsScreenState extends State<SettingsScreen> {
              child: FilledButton.tonalIcon(
                onPressed: _disconnect,
                icon: const Icon(Icons.logout_rounded),
-                label: const Text(
-                  'Disconnect',
-                  style: TextStyle(
+                label: Text(
+                  S.of(context)!.disconnect,
+                  style: const TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.w500,
                  ),
@@ -329,7 +354,7 @@ class _SettingsScreenState extends State<SettingsScreen> {

            // Theme section
            Text(
-              'Theme',
+              S.of(context)!.theme,
              style: textTheme.titleMedium?.copyWith(
                color: colorScheme.onBackground,
                fontWeight: FontWeight.bold,
@@ -340,14 +365,14 @@ class _SettingsScreenState extends State<SettingsScreen> {
            Container(
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
-                color: colorScheme.surfaceVariant.withOpacity(0.3),
-                borderRadius: BorderRadius.circular(12),
+                color: colorScheme.surfaceVariant.withOpacity(0.5),
+                borderRadius: BorderRadius.circular(8),
              ),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
-                    'Theme Mode',
+                    S.of(context)!.themeMode,
                    style: textTheme.bodySmall?.copyWith(
                      color: colorScheme.onSurfaceVariant,
                    ),
@@ -358,21 +383,21 @@ class _SettingsScreenState extends State<SettingsScreen> {
                      return SizedBox(
                        width: double.infinity,
                        child: SegmentedButton<ThemeMode>(
-                          segments: const [
+                          segments: [
                            ButtonSegment<ThemeMode>(
                              value: ThemeMode.light,
-                              label: Text('Light'),
-                              icon: Icon(Icons.light_mode_rounded),
+                              label: Text(S.of(context)!.light),
+                              icon: const Icon(Icons.light_mode_rounded),
                            ),
                            ButtonSegment<ThemeMode>(
                              value: ThemeMode.dark,
-                              label: Text('Dark'),
-                              icon: Icon(Icons.dark_mode_rounded),
+                              label: Text(S.of(context)!.dark),
+                              icon: const Icon(Icons.dark_mode_rounded),
                            ),
                            ButtonSegment<ThemeMode>(
                              value: ThemeMode.system,
-                              label: Text('System'),
-                              icon: Icon(Icons.auto_mode_rounded),
+                              label: Text(S.of(context)!.system),
+                              icon: const Icon(Icons.auto_mode_rounded),
                            ),
                          ],
                          selected: {themeProvider.themeMode},
@@ -384,7 +409,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
                              if (states.contains(WidgetState.selected)) {
                                return colorScheme.primaryContainer;
                              }
-                              return colorScheme.surfaceVariant.withOpacity(0.3);
+                              return colorScheme.surfaceVariant.withOpacity(0.5);
                            }),
                            foregroundColor: WidgetStateProperty.resolveWith((states) {
                              if (states.contains(WidgetState.selected)) {
@@ -393,6 +418,9 @@ class _SettingsScreenState extends State<SettingsScreen> {
                              return colorScheme.onSurfaceVariant;
                            }),
                            side: WidgetStateProperty.all(BorderSide.none),
+                            shape: WidgetStateProperty.all(
+                              RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+                            ),
                          ),
                        ),
                      );
@@ -404,6 +432,67 @@ class _SettingsScreenState extends State<SettingsScreen> {

            const SizedBox(height: 16),

+            // Accent color picker
+            Consumer<ThemeProvider>(
+              builder: (context, themeProvider, _) {
+                final isDisabled = themeProvider.useMaterialTheme;
+                return Container(
+                  padding: const EdgeInsets.all(16),
+                  decoration: BoxDecoration(
+                    color: colorScheme.surfaceVariant.withOpacity(0.3),
+                    borderRadius: BorderRadius.circular(12),
+                  ),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        S.of(context)!.accentColor,
+                        style: TextStyle(
+                          color: isDisabled
+                              ? colorScheme.onSurface.withOpacity(0.4)
+                              : colorScheme.onSurface,
+                          fontWeight: FontWeight.w500,
+                        ),
+                      ),
+                      const SizedBox(height: 12),
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                        children: accentColorOptions.map((color) {
+                          final isSelected = themeProvider.customColor.value == color.value;
+                          return GestureDetector(
+                            onTap: isDisabled ? null : () {
+                              themeProvider.setCustomColor(color);
+                            },
+                            child: AnimatedContainer(
+                              duration: const Duration(milliseconds: 200),
+                              curve: Curves.easeInOut,
+                              width: 40,
+                              height: 40,
+                              decoration: BoxDecoration(
+                                color: isDisabled ? color.withOpacity(0.3) : color,
+                                shape: BoxShape.circle,
+                                border: isSelected && !isDisabled
+                                    ? Border.all(color: colorScheme.onSurface, width: 3)
+                                    : null,
+                                boxShadow: isSelected && !isDisabled
+                                    ? [BoxShadow(color: color.withOpacity(0.5), blurRadius: 8, spreadRadius: 2)]
+                                    : null,
+                              ),
+                              child: isSelected && !isDisabled
+                                  ? Icon(Icons.check, color: Colors.white, size: 20)
+                                  : null,
+                            ),
+                          );
+                        }).toList(),
+                      ),
+                    ],
+                  ),
+                );
+              },
+            ),
+
+            const SizedBox(height: 16),
+
            Consumer<ThemeProvider>(
              builder: (context, themeProvider, _) {
                return Container(
@@ -414,11 +503,11 @@ class _SettingsScreenState extends State<SettingsScreen> {
                  ),
                  child: SwitchListTile(
                    title: Text(
-                      'Material You',
+                      S.of(context)!.materialYou,
                      style: TextStyle(color: colorScheme.onSurface),
                    ),
                    subtitle: Text(
-                      'Use system colors (Android 12+)',
+                      S.of(context)!.materialYouDescription,
                      style: TextStyle(color: colorScheme.onSurface.withOpacity(0.6), fontSize: 12),
                    ),
                    value: themeProvider.useMaterialTheme,
@@ -444,11 +533,11 @@ class _SettingsScreenState extends State<SettingsScreen> {
                  ),
                  child: SwitchListTile(
                    title: Text(
-                      'Adaptive Theme',
+                      S.of(context)!.adaptiveTheme,
                      style: TextStyle(color: colorScheme.onSurface),
                    ),
                    subtitle: Text(
-                      'Extract colors from album and artist artwork',
+                      S.of(context)!.extractColorsFromArtwork,
                      style: TextStyle(color: colorScheme.onSurface.withOpacity(0.6), fontSize: 12),
                    ),
                    value: themeProvider.adaptiveTheme,
@@ -464,9 +553,167 @@ class _SettingsScreenState extends State<SettingsScreen> {

            const SizedBox(height: 32),

-            // Home Screen section
+            // Language section
            Text(
-              'Home Screen',
+              S.of(context)!.language,
+              style: textTheme.titleMedium?.copyWith(
+                color: colorScheme.onBackground,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+            const SizedBox(height: 16),
+
+            Consumer<LocaleProvider>(
+              builder: (context, localeProvider, _) {
+                String getLanguageName(String? code) {
+                  switch (code) {
+                    case 'en':
+                      return 'English';
+                    case 'de':
+                      return 'Deutsch';
+                    case 'es':
+                      return 'Español';
+                    default:
+                      return S.of(context)!.system;
+                  }
+                }
+
+                return ListTile(
+                  contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
+                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+                  tileColor: colorScheme.surfaceVariant.withOpacity(0.5),
+                  leading: Icon(Icons.language_rounded, color: colorScheme.onSurfaceVariant),
+                  title: Text(S.of(context)!.language),
+                  subtitle: Text(
+                    getLanguageName(localeProvider.locale?.languageCode),
+                    style: TextStyle(color: colorScheme.primary),
+                  ),
+                  trailing: Icon(Icons.chevron_right, color: colorScheme.onSurfaceVariant),
+                  onTap: () {
+                    showDialog(
+                      context: context,
+                      builder: (dialogContext) {
+                        return AlertDialog(
+                          title: Text(S.of(context)!.language),
+                          content: Column(
+                            mainAxisSize: MainAxisSize.min,
+                            children: [
+                              RadioListTile<String?>(
+                                title: Text(S.of(context)!.system),
+                                subtitle: const Text('Auto'),
+                                value: null,
+                                groupValue: localeProvider.locale?.languageCode,
+                                onChanged: (value) {
+                                  localeProvider.setLocale(null);
+                                  Navigator.pop(dialogContext);
+                                },
+                              ),
+                              RadioListTile<String?>(
+                                title: const Text('English'),
+                                value: 'en',
+                                groupValue: localeProvider.locale?.languageCode,
+                                onChanged: (value) {
+                                  localeProvider.setLocale(const Locale('en'));
+                                  Navigator.pop(dialogContext);
+                                },
+                              ),
+                              RadioListTile<String?>(
+                                title: const Text('Deutsch'),
+                                value: 'de',
+                                groupValue: localeProvider.locale?.languageCode,
+                                onChanged: (value) {
+                                  localeProvider.setLocale(const Locale('de'));
+                                  Navigator.pop(dialogContext);
+                                },
+                              ),
+                              RadioListTile<String?>(
+                                title: const Text('Español'),
+                                value: 'es',
+                                groupValue: localeProvider.locale?.languageCode,
+                                onChanged: (value) {
+                                  localeProvider.setLocale(const Locale('es'));
+                                  Navigator.pop(dialogContext);
+                                },
+                              ),
+                            ],
+                          ),
+                        );
+                      },
+                    );
+                  },
+                );
+              },
+            ),
+
+            const SizedBox(height: 32),
+
+            // Player section
+            Text(
+              S.of(context)!.players,
+              style: textTheme.titleMedium?.copyWith(
+                color: colorScheme.onBackground,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+            const SizedBox(height: 16),
+
+            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(
+                  S.of(context)!.preferLocalPlayer,
+                  style: TextStyle(color: colorScheme.onSurface),
+                ),
+                subtitle: Text(
+                  S.of(context)!.preferLocalPlayerDescription,
+                  style: TextStyle(color: colorScheme.onSurface.withOpacity(0.6), fontSize: 12),
+                ),
+                value: _preferLocalPlayer,
+                onChanged: (value) {
+                  setState(() => _preferLocalPlayer = value);
+                  SettingsService.setPreferLocalPlayer(value);
+                },
+                activeColor: colorScheme.primary,
+                contentPadding: EdgeInsets.zero,
+              ),
+            ),
+
+            const SizedBox(height: 16),
+
+            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(
+                  S.of(context)!.smartSortPlayers,
+                  style: TextStyle(color: colorScheme.onSurface),
+                ),
+                subtitle: Text(
+                  S.of(context)!.smartSortPlayersDescription,
+                  style: TextStyle(color: colorScheme.onSurface.withOpacity(0.6), fontSize: 12),
+                ),
+                value: _smartSortPlayers,
+                onChanged: (value) {
+                  setState(() => _smartSortPlayers = value);
+                  SettingsService.setSmartSortPlayers(value);
+                },
+                activeColor: colorScheme.primary,
+                contentPadding: EdgeInsets.zero,
+              ),
+            ),
+
+            const SizedBox(height: 32),
+
+            // Hints & Tips section
+            Text(
+              S.of(context)!.hintsAndTips,
              style: textTheme.titleMedium?.copyWith(
                color: colorScheme.onBackground,
                fontWeight: FontWeight.bold,
@@ -474,7 +721,90 @@ class _SettingsScreenState extends State<SettingsScreen> {
            ),
            const SizedBox(height: 8),
            Text(
-              'Choose which rows to display on the home screen',
+              S.of(context)!.showHintsDescription,
+              style: textTheme.bodySmall?.copyWith(
+                color: colorScheme.onBackground.withOpacity(0.6),
+              ),
+            ),
+            const SizedBox(height: 16),
+
+            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(
+                  S.of(context)!.showHints,
+                  style: TextStyle(color: colorScheme.onSurface),
+                ),
+                value: _showHints,
+                onChanged: (value) {
+                  setState(() => _showHints = value);
+                  SettingsService.setShowHints(value);
+                },
+                activeColor: colorScheme.primary,
+                contentPadding: EdgeInsets.zero,
+              ),
+            ),
+
+            const SizedBox(height: 32),
+
+            // Library section
+            Text(
+              S.of(context)!.library,
+              style: textTheme.titleMedium?.copyWith(
+                color: colorScheme.onBackground,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+            const SizedBox(height: 16),
+            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(
+                  'Show only artists with albums',
+                  style: TextStyle(color: colorScheme.onSurface),
+                ),
+                subtitle: Text(
+                  'Hide artists that have no albums in your library',
+                  style: TextStyle(
+                    color: colorScheme.onSurface.withOpacity(0.6),
+                    fontSize: 12,
+                  ),
+                ),
+                value: _showOnlyArtistsWithAlbums,
+                onChanged: (value) async {
+                  setState(() => _showOnlyArtistsWithAlbums = value);
+                  await SettingsService.setShowOnlyArtistsWithAlbums(value);
+                  // Force sync library to apply the new filter at API level
+                  if (mounted) {
+                    context.read<MusicAssistantProvider>().forceLibrarySync();
+                  }
+                },
+                activeColor: colorScheme.primary,
+                contentPadding: EdgeInsets.zero,
+              ),
+            ),
+
+            const SizedBox(height: 32),
+
+            // Home Screen section
+            Text(
+              S.of(context)!.homeScreen,
+              style: textTheme.titleMedium?.copyWith(
+                color: colorScheme.onBackground,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+            const SizedBox(height: 8),
+            Text(
+              S.of(context)!.chooseHomeScreenRows,
              style: textTheme.bodySmall?.copyWith(
                color: colorScheme.onBackground.withOpacity(0.6),
              ),
@@ -551,7 +881,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
            const SizedBox(height: 32),

            Text(
-              'Metadata APIs (Optional)',
+              S.of(context)!.metadataApis,
              style: textTheme.titleMedium?.copyWith(
                color: colorScheme.onBackground,
                fontWeight: FontWeight.bold,
@@ -559,7 +889,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
            ),
            const SizedBox(height: 8),
            Text(
-              'Artist images are automatically fetched from Deezer. Add API keys below for artist biographies and album descriptions.',
+              S.of(context)!.metadataApisDescription,
              style: textTheme.bodySmall?.copyWith(
                color: colorScheme.onBackground.withOpacity(0.6),
              ),
@@ -570,8 +900,8 @@ class _SettingsScreenState extends State<SettingsScreen> {
              controller: _lastFmApiKeyController,
              style: TextStyle(color: colorScheme.onSurface),
              decoration: InputDecoration(
-                labelText: 'Last.fm API Key',
-                hintText: 'Get free key at last.fm/api',
+                labelText: S.of(context)!.lastFmApiKey,
+                hintText: S.of(context)!.lastFmApiKeyHint,
                hintStyle: TextStyle(color: colorScheme.onSurface.withOpacity(0.38)),
                filled: true,
                fillColor: colorScheme.surfaceVariant.withOpacity(0.3),
@@ -607,8 +937,8 @@ class _SettingsScreenState extends State<SettingsScreen> {
              controller: _audioDbApiKeyController,
              style: TextStyle(color: colorScheme.onSurface),
              decoration: InputDecoration(
-                labelText: 'TheAudioDB API Key',
-                hintText: 'Use "2" for free tier or premium key',
+                labelText: S.of(context)!.theAudioDbApiKey,
+                hintText: S.of(context)!.theAudioDbApiKeyHint,
                hintStyle: TextStyle(color: colorScheme.onSurface.withOpacity(0.38)),
                filled: true,
                fillColor: colorScheme.surfaceVariant.withOpacity(0.3),
@@ -643,7 +973,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
            // Audiobook Libraries section
            if (_discoveredLibraries.isNotEmpty) ...[
              Text(
-                'Audiobook Libraries',
+                S.of(context)!.audiobookLibraries,
                style: textTheme.titleMedium?.copyWith(
                  color: colorScheme.onBackground,
                  fontWeight: FontWeight.bold,
@@ -651,7 +981,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
              ),
              const SizedBox(height: 8),
              Text(
-                'Choose which Audiobookshelf libraries to include',
+                S.of(context)!.chooseAudiobookLibraries,
                style: textTheme.bodySmall?.copyWith(
                  color: colorScheme.onBackground.withOpacity(0.6),
                ),
@@ -668,7 +998,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
                    final index = entry.key;
                    final library = entry.value;
                    final path = library['path'] ?? '';
-                    final name = library['name'] ?? 'Unknown Library';
+                    final name = library['name'] ?? S.of(context)!.unknownLibrary;
                    final isEnabled = _libraryEnabled[path] ?? true;

                    return Column(
@@ -686,9 +1016,9 @@ class _SettingsScreenState extends State<SettingsScreen> {
                            await SettingsService.toggleAbsLibrary(path, value);
                            if (mounted) {
                              ScaffoldMessenger.of(context).showSnackBar(
-                                const SnackBar(
-                                  content: Text('Pull to refresh the library to apply changes'),
-                                  duration: Duration(seconds: 2),
+                                SnackBar(
+                                  content: Text(S.of(context)!.pullToRefresh),
+                                  duration: const Duration(seconds: 2),
                                ),
                              );
                            }
@@ -723,7 +1053,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
                  );
                },
                icon: const Icon(Icons.bug_report_rounded),
-                label: const Text('View Debug Logs'),
+                label: Text(S.of(context)!.viewDebugLogs),
                style: FilledButton.styleFrom(
                  backgroundColor: colorScheme.surfaceVariant.withOpacity(0.5),
                  foregroundColor: colorScheme.onSurfaceVariant,
@@ -772,17 +1102,19 @@ class _SettingsScreenState extends State<SettingsScreen> {
  }

  String _getStatusText(MAConnectionState state) {
+    final s = S.of(context)!;
    switch (state) {
      case MAConnectionState.connected:
      case MAConnectionState.authenticated:
-        return 'Connected';
+        return s.connected;
      case MAConnectionState.connecting:
      case MAConnectionState.authenticating:
-        return 'Connecting...';
+        return s.connecting;
      case MAConnectionState.error:
-        return 'Connection Error';
+        return s.connectionError;
      case MAConnectionState.disconnected:
-        return 'Disconnected';
+        return s.disconnected;
    }
  }
+
 }
@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'package:audio_service/audio_service.dart';
 import 'package:audio_session/audio_session.dart';
 import 'package:just_audio/just_audio.dart';
@@ -11,6 +12,12 @@ class MassivAudioHandler extends BaseAudioHandler with SeekHandler {
  final AuthManager authManager;
  final _logger = DebugLogger();

+  // Stream subscriptions for proper cleanup
+  StreamSubscription? _interruptionSubscription;
+  StreamSubscription? _becomingNoisySubscription;
+  StreamSubscription? _playbackEventSubscription;
+  StreamSubscription? _currentIndexSubscription;
+
  // Track current metadata separately from what's in the notification
  // This allows us to update the notification when metadata arrives late
  MediaItem? _currentMediaItem;
@@ -42,7 +49,7 @@ class MassivAudioHandler extends BaseAudioHandler with SeekHandler {
    await session.configure(const AudioSessionConfiguration.music());

    // Handle audio interruptions
-    session.interruptionEventStream.listen((event) {
+    _interruptionSubscription = session.interruptionEventStream.listen((event) {
      if (event.begin) {
        switch (event.type) {
          case AudioInterruptionType.duck:
@@ -68,15 +75,15 @@ class MassivAudioHandler extends BaseAudioHandler with SeekHandler {
    });

    // Handle becoming noisy (headphones unplugged)
-    session.becomingNoisyEventStream.listen((_) {
+    _becomingNoisySubscription = session.becomingNoisyEventStream.listen((_) {
      pause();
    });

    // Broadcast playback state changes
-    _player.playbackEventStream.listen(_broadcastState);
+    _playbackEventSubscription = _player.playbackEventStream.listen(_broadcastState);

    // Broadcast current media item changes
-    _player.currentIndexStream.listen((_) {
+    _currentIndexSubscription = _player.currentIndexStream.listen((_) {
      if (_currentMediaItem != null) {
        mediaItem.add(_currentMediaItem);
      }
@@ -293,4 +300,13 @@ class MassivAudioHandler extends BaseAudioHandler with SeekHandler {
  Stream<Duration?> get durationStream => _player.durationStream;

  MediaItem? get currentMediaItem => _currentMediaItem;
+
+  /// Dispose of resources and cancel all subscriptions
+  Future<void> dispose() async {
+    await _interruptionSubscription?.cancel();
+    await _becomingNoisySubscription?.cancel();
+    await _playbackEventSubscription?.cancel();
+    await _currentIndexSubscription?.cancel();
+    await _player.dispose();
+  }
 }
@@ -1,4 +1,5 @@
 import 'dart:convert';
+import 'dart:io';
 import 'package:http/http.dart' as http;
 import 'auth_strategy.dart';
 import 'no_auth_strategy.dart';
@@ -86,6 +87,23 @@ class AuthManager {
    return baseUrl;
  }

+  /// Check if a hostname is a local/private IP address
+  bool _isLocalIpAddress(String host) {
+    return host.startsWith('192.168.') ||
+        host.startsWith('10.') ||
+        host.startsWith('172.16.') ||
+        host.startsWith('172.17.') ||
+        host.startsWith('172.18.') ||
+        host.startsWith('172.19.') ||
+        host.startsWith('172.2') ||
+        host.startsWith('172.30.') ||
+        host.startsWith('172.31.') ||
+        host == 'localhost' ||
+        host.startsWith('127.') ||
+        host.endsWith('.local') ||
+        host.endsWith('.ts.net');
+  }
+
  /// Try to detect auth strategy for a given URL
  /// Returns the strategy if successful, null if connection failed
  Future<AuthStrategy?> _tryDetectAuth(String baseUrl) async {
@@ -187,15 +205,50 @@ class AuthManager {

      _logger.log('Checking MA API at: $apiUrl');

-      // Try to get server info - this tells us if auth is required
-      // Note: The command is just 'info', not 'server/info'
-      final response = await http.post(
-        apiUrl,
-        headers: {'Content-Type': 'application/json'},
-        body: jsonEncode({
-          'command': 'info',
-        }),
-      ).timeout(const Duration(seconds: 5));
+      // Use IOClient to control redirect behavior for local IPs
+      final isLocalIp = _isLocalIpAddress(uri.host);
+      http.Response response;
+
+      if (isLocalIp) {
+        // For local IPs, don't follow redirects - handle them explicitly
+        final client = HttpClient();
+        try {
+          final request = await client.postUrl(apiUrl);
+          request.followRedirects = false;
+          request.headers.set('Content-Type', 'application/json');
+          request.write(jsonEncode({'command': 'info'}));
+          final ioResponse = await request.close().timeout(const Duration(seconds: 5));
+
+          // Check for redirect to HTTPS
+          if (ioResponse.statusCode == 308 || ioResponse.statusCode == 301 || ioResponse.statusCode == 302) {
+            final location = ioResponse.headers.value('location');
+            _logger.log('Local IP redirects to: $location');
+            if (location != null && location.startsWith('https://')) {
+              _logger.log('⚠️ Server redirects HTTP to HTTPS - this may cause certificate issues for local IP');
+              // Don't follow the redirect - it will likely fail with cert error
+              // Instead, return null to trigger fallback logic
+              client.close();
+              return null;
+            }
+          }
+
+          final body = await ioResponse.transform(utf8.decoder).join();
+          response = http.Response(body, ioResponse.statusCode);
+          client.close();
+        } catch (e) {
+          client.close();
+          rethrow;
+        }
+      } else {
+        // For non-local URLs, use standard http.post which follows redirects
+        response = await http.post(
+          apiUrl,
+          headers: {'Content-Type': 'application/json'},
+          body: jsonEncode({
+            'command': 'info',
+          }),
+        ).timeout(const Duration(seconds: 5));
+      }

      _logger.log('MA API response: ${response.statusCode}');
      _logger.log('MA API body: ${response.body}');
@@ -255,21 +308,47 @@ class AuthManager {
  /// Test if server is accessible without authentication
  Future<bool> _canConnectWithoutAuth(String serverUrl) async {
    try {
-      // Test root endpoint - Music Assistant doesn't have /api/info
-      final testUrl = serverUrl;
-      _logger.log('No-auth test URL: $testUrl');
+      final uri = Uri.parse(serverUrl);
+      _logger.log('No-auth test URL: $serverUrl');

-      final response = await http.get(
-        Uri.parse(testUrl),
-        // Don't follow redirects - we want to see if server requires auth
-      ).timeout(const Duration(seconds: 10));
+      final isLocalIp = _isLocalIpAddress(uri.host);
+      int statusCode;

-      _logger.log('No-auth status: ${response.statusCode}');
+      if (isLocalIp) {
+        // For local IPs, don't follow redirects to avoid HTTPS cert issues
+        final client = HttpClient();
+        try {
+          final request = await client.getUrl(uri);
+          request.followRedirects = false;
+          final response = await request.close().timeout(const Duration(seconds: 10));
+          statusCode = response.statusCode;
+
+          // Check for redirect to HTTPS
+          if (statusCode == 308 || statusCode == 301 || statusCode == 302) {
+            final location = response.headers.value('location');
+            if (location != null && location.startsWith('https://')) {
+              _logger.log('⚠️ Local IP redirects to HTTPS: $location');
+              client.close();
+              return false; // Can't connect - would need HTTPS which has cert issues
+            }
+          }
+          client.close();
+        } catch (e) {
+          client.close();
+          rethrow;
+        }
+      } else {
+        // For non-local URLs, use standard http.get
+        final response = await http.get(uri).timeout(const Duration(seconds: 10));
+        statusCode = response.statusCode;
+      }
+
+      _logger.log('No-auth status: $statusCode');

      // 200 = no auth required
-      // 302/307 = redirect (probably to auth)
+      // 302/307/308 = redirect (probably to auth or HTTPS)
      // 401 = auth required
-      if (response.statusCode == 200) {
+      if (statusCode == 200) {
        return true;
      }

@@ -1,11 +1,20 @@
+import 'dart:convert';
 import '../models/media_item.dart';
+import '../models/player.dart';
 import '../services/debug_logger.dart';
+import '../services/database_service.dart';
 import '../constants/timings.dart';

 /// Centralized cache service for all app data caching
 /// This is a non-notifying service - it just stores and retrieves cached data
 class CacheService {
  final DebugLogger _logger = DebugLogger();
+  bool _homeRowsLoaded = false;
+
+  // Cache size limits to prevent unbounded memory growth
+  static const int _maxDetailCacheSize = 50; // Max albums/playlists/artists cached
+  static const int _maxSearchCacheSize = 20; // Max search queries cached
+  static const int _maxPlayerTrackCacheSize = 30; // Max player track associations

  // Home screen row caching
  List<Album>? _cachedRecentAlbums;
@@ -28,10 +37,13 @@ class CacheService {
  final Map<String, DateTime> _searchCacheTime = {};

  // Player list caching
+  List<Player>? _cachedPlayers;
+  Player? _cachedSelectedPlayer;
  DateTime? _playersLastFetched;

  // Player track cache (for smooth swipe transitions)
  final Map<String, Track?> _playerTrackCache = {};
+  final Map<String, DateTime> _playerTrackCacheTime = {};

  // ============================================================================
  // HOME SCREEN ROW CACHING
@@ -54,6 +66,8 @@ class CacheService {
    _cachedRecentAlbums = albums;
    _recentAlbumsLastFetched = DateTime.now();
    _logger.log('✅ Cached ${albums.length} recent albums');
+    // Persist to database for instant load on next launch
+    _persistHomeRowToDatabase('recent_albums', albums.map((a) => a.toJson()).toList());
  }

  /// Check if discover artists cache is valid
@@ -73,6 +87,8 @@ class CacheService {
    _cachedDiscoverArtists = artists;
    _discoverArtistsLastFetched = DateTime.now();
    _logger.log('✅ Cached ${artists.length} discover artists');
+    // Persist to database for instant load on next launch
+    _persistHomeRowToDatabase('discover_artists', artists.map((a) => a.toJson()).toList());
  }

  /// Check if discover albums cache is valid
@@ -92,6 +108,8 @@ class CacheService {
    _cachedDiscoverAlbums = albums;
    _discoverAlbumsLastFetched = DateTime.now();
    _logger.log('✅ Cached ${albums.length} discover albums');
+    // Persist to database for instant load on next launch
+    _persistHomeRowToDatabase('discover_albums', albums.map((a) => a.toJson()).toList());
  }

  /// Invalidate home screen cache (call on pull-to-refresh)
@@ -102,6 +120,22 @@ class CacheService {
    _logger.log('🗑️ Home screen cache invalidated');
  }

+  /// Invalidate home album caches (call when albums are added/removed from library)
+  void invalidateHomeAlbumCaches() {
+    _cachedRecentAlbums = null;
+    _recentAlbumsLastFetched = null;
+    _cachedDiscoverAlbums = null;
+    _discoverAlbumsLastFetched = null;
+    _logger.log('🗑️ Home album caches invalidated');
+  }
+
+  /// Invalidate home artist caches (call when artists are added/removed from library)
+  void invalidateHomeArtistCaches() {
+    _cachedDiscoverArtists = null;
+    _discoverArtistsLastFetched = null;
+    _logger.log('🗑️ Home artist caches invalidated');
+  }
+
  // ============================================================================
  // DETAIL SCREEN CACHING
  // ============================================================================
@@ -123,15 +157,23 @@ class CacheService {
  void setCachedAlbumTracks(String cacheKey, List<Track> tracks) {
    _albumTracksCache[cacheKey] = tracks;
    _albumTracksCacheTime[cacheKey] = DateTime.now();
+    _evictOldestEntries(_albumTracksCache, _albumTracksCacheTime, _maxDetailCacheSize);
    _logger.log('✅ Cached ${tracks.length} tracks for album $cacheKey');
  }

-  /// Invalidate album tracks cache
+  /// Invalidate album tracks cache for a specific album
  void invalidateAlbumTracksCache(String albumId) {
    _albumTracksCache.remove(albumId);
    _albumTracksCacheTime.remove(albumId);
  }

+  /// Invalidate all album tracks caches (call when tracks are added/removed from library)
+  void invalidateAllAlbumTracksCaches() {
+    _albumTracksCache.clear();
+    _albumTracksCacheTime.clear();
+    _logger.log('🗑️ All album tracks caches invalidated');
+  }
+
  /// Check if playlist tracks cache is valid
  bool isPlaylistTracksCacheValid(String cacheKey, {bool forceRefresh = false}) {
    if (forceRefresh) return false;
@@ -149,15 +191,23 @@ class CacheService {
  void setCachedPlaylistTracks(String cacheKey, List<Track> tracks) {
    _playlistTracksCache[cacheKey] = tracks;
    _playlistTracksCacheTime[cacheKey] = DateTime.now();
+    _evictOldestEntries(_playlistTracksCache, _playlistTracksCacheTime, _maxDetailCacheSize);
    _logger.log('✅ Cached ${tracks.length} tracks for playlist $cacheKey');
  }

-  /// Invalidate playlist tracks cache
+  /// Invalidate playlist tracks cache for a specific playlist
  void invalidatePlaylistTracksCache(String playlistId) {
    _playlistTracksCache.remove(playlistId);
    _playlistTracksCacheTime.remove(playlistId);
  }

+  /// Invalidate all playlist tracks caches (call when tracks are added/removed from library)
+  void invalidateAllPlaylistTracksCaches() {
+    _playlistTracksCache.clear();
+    _playlistTracksCacheTime.clear();
+    _logger.log('🗑️ All playlist tracks caches invalidated');
+  }
+
  /// Check if artist albums cache is valid
  bool isArtistAlbumsCacheValid(String cacheKey, {bool forceRefresh = false}) {
    if (forceRefresh) return false;
@@ -175,9 +225,17 @@ class CacheService {
  void setCachedArtistAlbums(String cacheKey, List<Album> albums) {
    _artistAlbumsCache[cacheKey] = albums;
    _artistAlbumsCacheTime[cacheKey] = DateTime.now();
+    _evictOldestEntries(_artistAlbumsCache, _artistAlbumsCacheTime, _maxDetailCacheSize);
    _logger.log('✅ Cached ${albums.length} albums for artist $cacheKey');
  }

+  /// Invalidate all artist albums caches (call when albums are added/removed from library)
+  void invalidateArtistAlbumsCache() {
+    _artistAlbumsCache.clear();
+    _artistAlbumsCacheTime.clear();
+    _logger.log('🗑️ Artist albums cache invalidated');
+  }
+
  // ============================================================================
  // SEARCH CACHING
  // ============================================================================
@@ -199,9 +257,17 @@ class CacheService {
  void setCachedSearchResults(String cacheKey, Map<String, List<MediaItem>> results) {
    _searchCache[cacheKey] = results;
    _searchCacheTime[cacheKey] = DateTime.now();
+    _evictOldestEntries(_searchCache, _searchCacheTime, _maxSearchCacheSize);
    _logger.log('✅ Cached search results for "$cacheKey"');
  }

+  /// Invalidate all search cache (call when library items change)
+  void invalidateSearchCache() {
+    _searchCache.clear();
+    _searchCacheTime.clear();
+    _logger.log('🗑️ Search cache invalidated');
+  }
+
  // ============================================================================
  // PLAYER CACHING
  // ============================================================================
@@ -219,12 +285,43 @@ class CacheService {
    _playersLastFetched = DateTime.now();
  }

+  /// Get cached players list
+  List<Player>? getCachedPlayers() => _cachedPlayers;
+
+  /// Set cached players list
+  void setCachedPlayers(List<Player> players) {
+    _cachedPlayers = players;
+    _playersLastFetched = DateTime.now();
+  }
+
+  /// Get cached selected player
+  Player? getCachedSelectedPlayer() => _cachedSelectedPlayer;
+
+  /// Set cached selected player
+  void setCachedSelectedPlayer(Player? player) {
+    _cachedSelectedPlayer = player;
+  }
+
+  /// Check if we have cached players (for instant UI display on app resume)
+  bool get hasCachedPlayers => _cachedPlayers != null && _cachedPlayers!.isNotEmpty;
+
  /// Get cached track for a player (used for smooth swipe transitions)
  Track? getCachedTrackForPlayer(String playerId) => _playerTrackCache[playerId];

+  /// Get all player IDs that have cached tracks
+  Iterable<String> getAllCachedPlayerIds() => _playerTrackCache.keys;
+
  /// Set cached track for a player
  void setCachedTrackForPlayer(String playerId, Track? track) {
    _playerTrackCache[playerId] = track;
+    _playerTrackCacheTime[playerId] = DateTime.now();
+    _evictOldestEntries(_playerTrackCache, _playerTrackCacheTime, _maxPlayerTrackCacheSize);
+  }
+
+  /// Clear cached track for a player (e.g., when external source is active)
+  void clearCachedTrackForPlayer(String playerId) {
+    _playerTrackCache.remove(playerId);
+    _playerTrackCacheTime.remove(playerId);
  }

  // ============================================================================
@@ -242,6 +339,7 @@ class CacheService {
    _searchCache.clear();
    _searchCacheTime.clear();
    _playerTrackCache.clear();
+    _playerTrackCacheTime.clear();
    _logger.log('🗑️ All detail caches cleared');
  }

@@ -249,6 +347,112 @@ class CacheService {
  void clearAll() {
    invalidateHomeCache();
    clearAllDetailCaches();
+    _cachedPlayers = null;
+    _cachedSelectedPlayer = null;
    _playersLastFetched = null;
  }
+
+  // ============================================================================
+  // DATABASE PERSISTENCE FOR HOME ROWS
+  // ============================================================================
+
+  /// Load home row data from database for instant display on startup
+  Future<void> loadHomeRowsFromDatabase() async {
+    if (_homeRowsLoaded) return;
+    _homeRowsLoaded = true;
+
+    try {
+      if (!DatabaseService.instance.isInitialized) return;
+
+      // Load recent albums
+      final recentData = await DatabaseService.instance.getHomeRowCache('recent_albums');
+      if (recentData != null) {
+        try {
+          final items = (jsonDecode(recentData.itemsJson) as List)
+              .map((json) => Album.fromJson(json as Map<String, dynamic>))
+              .toList();
+          _cachedRecentAlbums = items;
+          _recentAlbumsLastFetched = recentData.lastUpdated;
+          _logger.log('📦 Loaded ${items.length} recent albums from database');
+        } catch (e) {
+          _logger.log('⚠️ Failed to parse recent albums: $e');
+        }
+      }
+
+      // Load discover artists
+      final artistsData = await DatabaseService.instance.getHomeRowCache('discover_artists');
+      if (artistsData != null) {
+        try {
+          final items = (jsonDecode(artistsData.itemsJson) as List)
+              .map((json) => Artist.fromJson(json as Map<String, dynamic>))
+              .toList();
+          _cachedDiscoverArtists = items;
+          _discoverArtistsLastFetched = artistsData.lastUpdated;
+          _logger.log('📦 Loaded ${items.length} discover artists from database');
+        } catch (e) {
+          _logger.log('⚠️ Failed to parse discover artists: $e');
+        }
+      }
+
+      // Load discover albums
+      final albumsData = await DatabaseService.instance.getHomeRowCache('discover_albums');
+      if (albumsData != null) {
+        try {
+          final items = (jsonDecode(albumsData.itemsJson) as List)
+              .map((json) => Album.fromJson(json as Map<String, dynamic>))
+              .toList();
+          _cachedDiscoverAlbums = items;
+          _discoverAlbumsLastFetched = albumsData.lastUpdated;
+          _logger.log('📦 Loaded ${items.length} discover albums from database');
+        } catch (e) {
+          _logger.log('⚠️ Failed to parse discover albums: $e');
+        }
+      }
+    } catch (e) {
+      _logger.log('⚠️ Error loading home rows from database: $e');
+    }
+  }
+
+  /// Persist home row data to database (fire-and-forget)
+  void _persistHomeRowToDatabase(String rowType, List<Map<String, dynamic>> items) {
+    () async {
+      try {
+        if (!DatabaseService.instance.isInitialized) return;
+        await DatabaseService.instance.saveHomeRowCache(rowType, jsonEncode(items));
+        _logger.log('💾 Persisted $rowType to database');
+      } catch (e) {
+        _logger.log('⚠️ Failed to persist $rowType: $e');
+      }
+    }();
+  }
+
+  // ============================================================================
+  // LRU CACHE EVICTION
+  // ============================================================================
+
+  /// Evict oldest entries from cache maps to enforce size limit (LRU eviction)
+  /// Uses the timestamp map to determine which entries are oldest
+  void _evictOldestEntries<K, V>(
+    Map<K, V> cache,
+    Map<K, DateTime> cacheTime,
+    int maxSize,
+  ) {
+    if (cache.length <= maxSize) return;
+
+    // Sort keys by timestamp (oldest first)
+    final sortedKeys = cacheTime.keys.toList()
+      ..sort((a, b) => (cacheTime[a] ?? DateTime.now())
+          .compareTo(cacheTime[b] ?? DateTime.now()));
+
+    // Remove oldest entries until we're at maxSize
+    final keysToRemove = sortedKeys.take(cache.length - maxSize);
+    for (final key in keysToRemove) {
+      cache.remove(key);
+      cacheTime.remove(key);
+    }
+
+    if (keysToRemove.isNotEmpty) {
+      _logger.log('🗑️ LRU evicted ${keysToRemove.length} cache entries');
+    }
+  }
 }
@@ -156,4 +156,159 @@ class DatabaseService {

  /// Clear all cached data (useful for logout)
  Future<void> clearAllCache() => db.clearAllCache();
+
+  /// Clear cached items of a specific type (e.g., 'album', 'artist')
+  /// Used before re-syncing to remove stale items
+  Future<void> clearCacheForType(String itemType) => db.clearCache(itemType);
+
+  /// Mark a specific cached item as deleted
+  /// Used when removing items from library for immediate database update
+  Future<void> markCachedItemDeleted(String itemType, String itemId) {
+    return db.markItemsDeleted(itemType, [itemId]);
+  }
+
+  // ============================================
+  // Player Cache Convenience Methods
+  // ============================================
+
+  /// Save playback state for instant resume
+  Future<void> savePlaybackState({
+    String? playerId,
+    String? playerName,
+    String? currentTrackJson,
+    double positionSeconds = 0.0,
+    bool isPlaying = false,
+  }) {
+    return db.savePlaybackState(
+      playerId: playerId,
+      playerName: playerName,
+      currentTrackJson: currentTrackJson,
+      positionSeconds: positionSeconds,
+      isPlaying: isPlaying,
+    );
+  }
+
+  /// Get saved playback state
+  Future<PlaybackStateData?> getPlaybackState() => db.getPlaybackState();
+
+  /// Cache a player with optional track info
+  Future<void> cachePlayer({
+    required String playerId,
+    required String playerJson,
+    String? currentTrackJson,
+  }) {
+    return db.cachePlayer(
+      playerId: playerId,
+      playerJson: playerJson,
+      currentTrackJson: currentTrackJson,
+    );
+  }
+
+  /// Cache multiple players at once
+  Future<void> cachePlayers(List<Map<String, dynamic>> players) {
+    return db.cachePlayers(players);
+  }
+
+  /// Get all cached players
+  Future<List<CachedPlayer>> getCachedPlayers() => db.getCachedPlayers();
+
+  /// Update cached track for a player
+  Future<void> updateCachedPlayerTrack(String playerId, String? trackJson) {
+    return db.updateCachedPlayerTrack(playerId, trackJson);
+  }
+
+  /// Clear all cached players
+  Future<void> clearCachedPlayers() => db.clearCachedPlayers();
+
+  /// Save queue for a player
+  Future<void> saveQueue(String playerId, List<String> itemJsonList) {
+    return db.saveQueue(playerId, itemJsonList);
+  }
+
+  /// Get cached queue for a player
+  Future<List<CachedQueueData>> getCachedQueue(String playerId) {
+    return db.getCachedQueue(playerId);
+  }
+
+  /// Clear queue for a player
+  Future<void> clearCachedQueue(String playerId) => db.clearCachedQueue(playerId);
+
+  // ============================================
+  // Home Row Cache Convenience Methods
+  // ============================================
+
+  /// Save home row data (recent albums, discover artists, etc.)
+  Future<void> saveHomeRowCache(String rowType, String itemsJson) {
+    return db.saveHomeRowCache(rowType, itemsJson);
+  }
+
+  /// Get cached home row data
+  Future<HomeRowCacheData?> getHomeRowCache(String rowType) {
+    return db.getHomeRowCache(rowType);
+  }
+
+  /// Clear all home row cache
+  Future<void> clearHomeRowCache() => db.clearHomeRowCache();
+
+  // ============================================
+  // Search History Convenience Methods
+  // ============================================
+
+  /// Save a search query to history
+  Future<void> saveSearchQuery(String query) => db.saveSearchQuery(query);
+
+  /// Get recent search queries (up to 10)
+  Future<List<String>> getRecentSearches() => db.getRecentSearches();
+
+  /// Clear all search history
+  Future<void> clearSearchHistory() => db.clearSearchHistory();
+
+  // ============================================
+  // Cast-to-Sendspin Mapping Methods
+  // ============================================
+
+  static const String _sendspinMappingType = 'cast_sendspin_mapping';
+
+  /// Save a Cast UUID to Sendspin ID mapping
+  Future<void> saveCastToSendspinMapping(String castId, String sendspinId) {
+    _logger.log('💾 Persisting Cast->Sendspin mapping: $castId -> $sendspinId');
+    return db.cacheItem(
+      itemType: _sendspinMappingType,
+      itemId: castId,
+      data: jsonEncode({'sendspinId': sendspinId}),
+    );
+  }
+
+  /// Get persisted Sendspin ID for a Cast UUID
+  Future<String?> getSendspinIdForCast(String castId) async {
+    final item = await db.getCachedItem(_sendspinMappingType, castId);
+    if (item == null) return null;
+    try {
+      final data = jsonDecode(item.data) as Map<String, dynamic>;
+      return data['sendspinId'] as String?;
+    } catch (e) {
+      _logger.log('Error decoding Sendspin mapping: $e');
+      return null;
+    }
+  }
+
+  /// Load all persisted Cast-to-Sendspin mappings
+  Future<Map<String, String>> getAllCastToSendspinMappings() async {
+    final items = await db.getCachedItems(_sendspinMappingType);
+    final mappings = <String, String>{};
+    for (final item in items) {
+      try {
+        final data = jsonDecode(item.data) as Map<String, dynamic>;
+        final sendspinId = data['sendspinId'] as String?;
+        if (sendspinId != null) {
+          // The itemId is the Cast UUID
+          mappings[item.itemId] = sendspinId;
+        }
+      } catch (e) {
+        _logger.log('Error decoding Sendspin mapping: $e');
+      }
+    }
+    _logger.log('📦 Loaded ${mappings.length} Cast->Sendspin mappings from database');
+    return mappings;
+  }
 }
@@ -1,36 +1,99 @@
+import 'dart:io';
+import 'dart:ui' as ui;
+import 'package:device_info_plus/device_info_plus.dart';
 import 'package:shared_preferences/shared_preferences.dart';
-import 'package:uuid/uuid.dart';
 import 'debug_logger.dart';
+import 'settings_service.dart';

-/// Service to generate unique per-installation player IDs
-/// Simplified to match KMP client pattern: single storage key, lazy generation
-/// This prevents the critical bug where multiple devices of the same model
-/// would share the same player ID and trigger playback on all devices
+/// Service to generate unique per-device player IDs
+/// Uses stable device identifiers (ANDROID_ID) combined with MA username
+/// to create persistent player IDs that survive storage wipes and support
+/// multiple devices per account
 class DeviceIdService {
  static const String _keyLocalPlayerId = 'local_player_id';
  static final _logger = DebugLogger();
-  static const _uuid = Uuid();

-  /// Get or generate a unique player ID for this installation
-  /// ID is generated once and persisted across app restarts
-  /// Format: ensemble_<uuid>
-  ///
-  /// This matches the KMP client pattern: generate on first access, store once
-  static Future<String> getOrCreateDevicePlayerId() async {
-    final prefs = await SharedPreferences.getInstance();
+  // Cache stable device ID to avoid repeated platform calls
+  static String? _cachedStableDeviceId;

-    // Single source of truth - no complex migration logic
-    final existingId = prefs.getString(_keyLocalPlayerId);
-    if (existingId != null && existingId.startsWith('ensemble_')) {
-      _logger.log('Using existing player ID: $existingId');
-      return existingId;
+  /// Get stable device identifier that persists across storage wipes
+  /// - Android: Uses ANDROID_ID (persists until factory reset)
+  /// - iOS: Uses identifierForVendor (persists until app reinstall)
+  static Future<String> _getStableDeviceId() async {
+    if (_cachedStableDeviceId != null) {
+      return _cachedStableDeviceId!;
    }

-    // Generate new ID on first access
-    final playerId = 'ensemble_${_uuid.v4()}';
-    await prefs.setString(_keyLocalPlayerId, playerId);
-    _logger.log('Generated new player ID: $playerId');
-    return playerId;
+    final deviceInfo = DeviceInfoPlugin();
+
+    if (Platform.isAndroid) {
+      final android = await deviceInfo.androidInfo;
+      // ANDROID_ID is unique per device+user combo, persists across storage wipes
+      // Only resets on factory reset
+      _cachedStableDeviceId = android.id;
+    } else if (Platform.isIOS) {
+      final ios = await deviceInfo.iosInfo;
+      // identifierForVendor persists across app updates but resets on reinstall
+      _cachedStableDeviceId = ios.identifierForVendor ?? 'unknown_ios';
+    } else {
+      // Fallback for other platforms (web, desktop)
+      _cachedStableDeviceId = 'unknown_platform';
+    }
+
+    return _cachedStableDeviceId!;
+  }
+
+  /// Detect if device is a tablet based on screen size
+  /// Uses the standard 600dp threshold (shortest side >= 600 = tablet)
+  static bool get isTablet {
+    try {
+      final view = ui.PlatformDispatcher.instance.views.first;
+      final size = view.physicalSize / view.devicePixelRatio;
+      return size.shortestSide >= 600;
+    } catch (e) {
+      _logger.log('Failed to detect device type: $e');
+      return false; // Default to phone if detection fails
+    }
+  }
+
+  /// Get or generate a unique player ID for this device
+  /// Format: ensemble_{username}_{deviceId} or ensemble_{deviceId}
+  ///
+  /// Key behaviors:
+  /// - Uses stable device ID that survives storage wipes
+  /// - Includes MA username to support multiple devices per account
+  /// - Regenerates if username changes (user logged in with different account)
+  static Future<String> getOrCreateDevicePlayerId() async {
+    final prefs = await SharedPreferences.getInstance();
+    final stableDeviceId = await _getStableDeviceId();
+    final maUsername = await SettingsService.getUsername();
+
+    // Generate expected ID based on current username and device
+    // Use shorter device ID suffix (first 8 chars) to keep ID reasonable length
+    final deviceIdSuffix = stableDeviceId.length > 8
+        ? stableDeviceId.substring(0, 8)
+        : stableDeviceId;
+
+    final expectedId = maUsername != null && maUsername.isNotEmpty
+        ? 'ensemble_${maUsername}_$deviceIdSuffix'
+        : 'ensemble_$deviceIdSuffix';
+
+    // Check if we already have the correct ID
+    final existingId = prefs.getString(_keyLocalPlayerId);
+    if (existingId == expectedId) {
+      _logger.log('Using existing player ID: $expectedId');
+      return expectedId;
+    }
+
+    // ID needs to be updated (first login, username changed, or migration)
+    if (existingId != null) {
+      _logger.log('Updating player ID from $existingId to $expectedId');
+    } else {
+      _logger.log('Generated new player ID: $expectedId');
+    }
+
+    await prefs.setString(_keyLocalPlayerId, expectedId);
+    return expectedId;
  }

  /// Adopt an existing player ID (used when claiming a ghost player)
@@ -45,4 +108,12 @@ class DeviceIdService {
    final prefs = await SharedPreferences.getInstance();
    return prefs.getString(_keyLocalPlayerId) == null;
  }
+
+  /// Force regeneration of player ID on next call
+  /// Useful after login/logout to ensure ID matches current user
+  static Future<void> invalidateCachedId() async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.remove(_keyLocalPlayerId);
+    _logger.log('Invalidated cached player ID');
+  }
 }
@@ -82,5 +82,9 @@ class HardwareVolumeService {
    } catch (e) {
      _logger.error('Failed to stop volume button listening', context: 'VolumeService', error: e);
    }
+
+    // Close StreamControllers to prevent memory leaks
+    await _volumeUpController.close();
+    await _volumeDownController.close();
  }
 }
@@ -293,16 +293,10 @@ class MusicAssistantAPI {
      // Handle event
      final eventType = data['event'] as String?;
      if (eventType != null) {
-        _logger.log('Event received: $eventType');
-
        // Get the object_id (player_id for player events)
        final objectId = data['object_id'] as String?;
        final eventData = data['data'] as Map<String, dynamic>? ?? {};

-        // Debug: Log full data for player events
-        if (eventType == 'player_added' || eventType == 'player_updated' || eventType == 'builtin_player') {
-           _logger.log('Event data: ${jsonEncode(eventData)} (player_id: $objectId)');
-        }

        // Include object_id in event data so listeners can filter by player
        final enrichedData = {
@@ -498,6 +492,227 @@ class MusicAssistantAPI {
    }
  }

+  Future<List<MediaItem>> getRadioStations({
+    int? limit,
+    int? offset,
+    bool? favoriteOnly,
+  }) async {
+    try {
+      final response = await _sendCommand(
+        'music/radios/library_items',
+        args: {
+          if (limit != null) 'limit': limit,
+          if (offset != null) 'offset': offset,
+          if (favoriteOnly != null) 'favorite': favoriteOnly,
+        },
+      );
+
+      final items = response['items'] as List<dynamic>? ?? response['result'] as List<dynamic>?;
+      if (items == null) return [];
+
+      return items
+          .map((item) => MediaItem.fromJson(item as Map<String, dynamic>))
+          .toList();
+    } catch (e) {
+      _logger.log('Error getting radio stations: $e');
+      return [];
+    }
+  }
+
+  /// Search for radio stations globally (across all providers like TuneIn)
+  Future<List<MediaItem>> searchRadioStations(String query, {int limit = 25}) async {
+    try {
+      final response = await _sendCommand(
+        'music/search',
+        args: {
+          'search_query': query,
+          'media_types': ['radio'],
+          'limit': limit,
+        },
+      );
+
+      final result = response['result'] as Map<String, dynamic>?;
+      if (result == null) return [];
+
+      // Radio results might be under 'radios' or 'radio' key
+      final radios = (result['radios'] as List<dynamic>?) ??
+                     (result['radio'] as List<dynamic>?) ??
+                     [];
+
+      return radios
+          .map((item) => MediaItem.fromJson(item as Map<String, dynamic>))
+          .toList();
+    } catch (e) {
+      _logger.log('Error searching radio stations: $e');
+      return [];
+    }
+  }
+
+  // ============ PODCASTS ============
+
+  /// Get all podcasts from the library
+  Future<List<MediaItem>> getPodcasts({
+    int? limit,
+    int? offset,
+    bool? favoriteOnly,
+  }) async {
+    try {
+      final response = await _sendCommand(
+        'music/podcasts/library_items',
+        args: {
+          if (limit != null) 'limit': limit,
+          if (offset != null) 'offset': offset,
+          if (favoriteOnly != null) 'favorite': favoriteOnly,
+        },
+      );
+
+      final items = response['items'] as List<dynamic>? ?? response['result'] as List<dynamic>?;
+      if (items == null) return [];
+
+      return items
+          .map((item) => MediaItem.fromJson(item as Map<String, dynamic>))
+          .toList();
+    } catch (e) {
+      _logger.log('Error getting podcasts: $e');
+      return [];
+    }
+  }
+
+  /// Get episodes for a specific podcast
+  Future<List<MediaItem>> getPodcastEpisodes(String podcastId, {
+    String? provider,
+    int? limit,
+    int? offset,
+  }) async {
+    try {
+      final response = await _sendCommand(
+        'music/podcasts/podcast_episodes',
+        args: {
+          'item_id': podcastId,
+          if (provider != null) 'provider_instance_id_or_domain': provider,
+        },
+      );
+
+      final episodes = response['result'] as List<dynamic>?;
+      if (episodes != null && episodes.isNotEmpty) {
+        return episodes
+            .map((item) => MediaItem.fromJson(item as Map<String, dynamic>))
+            .toList();
+      }
+
+      return [];
+    } catch (e) {
+      _logger.log('Error getting podcast episodes: $e');
+      return [];
+    }
+  }
+
+  /// Get best available image URL for a podcast
+  /// Falls back to first episode's image if podcast image is unavailable or low quality
+  Future<String?> getPodcastCoverUrl(MediaItem podcast, {int size = 1024}) async {
+    // First try the podcast's own image
+    final podcastImage = getImageUrl(podcast, size: size);
+
+    // Check if podcast has images in metadata
+    final images = podcast.metadata?['images'] as List<dynamic>?;
+    if (images != null && images.isNotEmpty) {
+      // Podcast has images, use them
+      return podcastImage;
+    }
+
+    // No podcast image, try to get first episode's image
+    try {
+      final episodes = await getPodcastEpisodes(
+        podcast.itemId,
+        provider: podcast.provider,
+      );
+
+      if (episodes.isNotEmpty) {
+        final firstEpisode = episodes.first;
+        final episodeImage = getImageUrl(firstEpisode, size: size);
+        if (episodeImage != null) {
+          return episodeImage;
+        }
+      }
+    } catch (e) {
+      // Fall through to return podcast image
+    }
+
+    // Fall back to podcast image even if it might be low quality
+    return podcastImage;
+  }
+
+  /// Parse browse results into MediaItem episodes
+  List<MediaItem> _parseBrowseEpisodes(List<dynamic> items) {
+    final episodes = <MediaItem>[];
+    for (final item in items) {
+      if (item is Map<String, dynamic>) {
+        final name = item['name'] as String? ??
+                    item['label'] as String? ??
+                    'Episode';
+        final uri = item['uri'] as String? ?? item['path'] as String?;
+        final itemId = item['item_id'] as String? ?? uri ?? '';
+        final provider = item['provider'] as String? ?? 'library';
+
+        // Parse media type from string
+        final mediaTypeStr = item['media_type'] as String?;
+        MediaType mediaType = MediaType.track;
+        if (mediaTypeStr != null) {
+          mediaType = MediaType.values.firstWhere(
+            (e) => e.name == mediaTypeStr || e.name == mediaTypeStr.toLowerCase(),
+            orElse: () => MediaType.track,
+          );
+        }
+
+        // Get duration if available
+        Duration? duration;
+        final durationVal = item['duration'];
+        if (durationVal is int) {
+          duration = Duration(seconds: durationVal);
+        } else if (durationVal is double) {
+          duration = Duration(seconds: durationVal.toInt());
+        }
+
+        episodes.add(MediaItem(
+          itemId: itemId,
+          provider: provider,
+          name: name,
+          uri: uri,
+          metadata: item['metadata'] as Map<String, dynamic>?,
+          mediaType: mediaType,
+          duration: duration,
+        ));
+      }
+    }
+    return episodes;
+  }
+
+  /// Play a podcast episode
+  Future<void> playPodcastEpisode(String playerId, MediaItem episode) async {
+    try {
+      // Try episode.uri first, then construct from itemId
+      String uri;
+      if (episode.uri != null && episode.uri!.isNotEmpty) {
+        uri = episode.uri!;
+      } else {
+        // Construct URI based on media type
+        uri = 'library://podcast_episode/${episode.itemId}';
+      }
+
+      await _sendCommand(
+        'player_queues/play_media',
+        args: {
+          'queue_id': playerId,
+          'media': [uri],
+          'option': 'replace',
+        },
+      );
+    } catch (e) {
+      _logger.log('Error playing podcast episode: $e');
+      rethrow;
+    }
+  }
+
  Future<List<Audiobook>> getAudiobooks({
    int? limit,
    int? offset,
@@ -511,7 +726,6 @@ class MusicAssistantAPI {

      // If specific libraries are enabled, use browse API for filtering
      if (enabledLibraries != null && enabledLibraries.isNotEmpty) {
-        _logger.log('📚 Using browse API for library filtering (${enabledLibraries.length} libraries enabled)');
        return await _getAudiobooksFromBrowse(enabledLibraries, favoriteOnly: favoriteOnly);
      }

@@ -524,8 +738,6 @@ class MusicAssistantAPI {
        if (authorId != null) 'author_id': authorId,
      };

-      _logger.log('📚 Calling music/audiobooks/library_items with args: $args');
-
      final response = await _sendCommand(
        'music/audiobooks/library_items',
        args: args,
@@ -533,65 +745,21 @@ class MusicAssistantAPI {

      // Check for error in response
      if (response.containsKey('error_code')) {
-        _logger.log('📚 ERROR: ${response['error_code']} - ${response['details']}');
        return [];
      }

      final items = response['result'] as List<dynamic>?;
-      if (items == null) {
-        _logger.log('📚 Audiobooks: result is null');
-        return [];
-      }
-
-      _logger.log('📚 Audiobooks: found ${items.length} items from API');
-
-      // Log first item's structure including metadata to find chapters/series
-      if (items.isNotEmpty) {
-        final firstItem = items.first as Map<String, dynamic>;
-        _logger.log('📚 First item keys: ${firstItem.keys.toList()}');
-        _logger.log('📚 First item name: ${firstItem['name']}, media_type: ${firstItem['media_type']}');
-
-        // Log metadata contents - this is where chapters/series info likely lives
-        if (firstItem.containsKey('metadata')) {
-          final metadata = firstItem['metadata'] as Map<String, dynamic>?;
-          if (metadata != null) {
-            _logger.log('📚 METADATA keys: ${metadata.keys.toList()}');
-            for (final key in metadata.keys) {
-              final value = metadata[key];
-              if (value is List) {
-                _logger.log('📚   metadata[$key] (List, ${value.length}): ${value.take(2)}');
-              } else if (value is Map) {
-                _logger.log('📚   metadata[$key] (Map): ${(value as Map).keys.toList()}');
-              } else if (value != null) {
-                _logger.log('📚   metadata[$key]: $value');
-              }
-            }
-          }
-        }
-
-        // Check for chapters at top level too
-        if (firstItem.containsKey('chapters')) {
-          _logger.log('📚 CHAPTERS at top level: ${firstItem['chapters']}');
-        }
-      }
+      if (items == null) return [];

      final audiobooks = <Audiobook>[];
-      final parseErrors = <String>[];
-
      for (int i = 0; i < items.length; i++) {
        try {
          final book = Audiobook.fromJson(items[i] as Map<String, dynamic>);
          audiobooks.add(book);
        } catch (e) {
-          parseErrors.add('Item $i: $e');
+          // Skip items that fail to parse
        }
      }
-
-      if (parseErrors.isNotEmpty) {
-        _logger.log('📚 Parse errors (${parseErrors.length}): ${parseErrors.take(3).join(", ")}');
-      }
-
-      _logger.log('📚 Successfully parsed ${audiobooks.length}/${items.length} audiobooks');
      return audiobooks;
    } catch (e, stack) {
      _logger.log('Error getting audiobooks: $e');
@@ -691,6 +859,26 @@ class MusicAssistantAPI {
    }
  }

+  /// Play a radio station
+  Future<void> playRadioStation(String playerId, MediaItem station) async {
+    try {
+      final uri = station.uri ?? 'library://radio/${station.itemId}';
+      _logger.log('📻 Playing radio station: ${station.name} with URI: $uri');
+
+      await _sendCommand(
+        'player_queues/play_media',
+        args: {
+          'queue_id': playerId,
+          'media': [uri],
+          'option': 'replace',
+        },
+      );
+    } catch (e) {
+      _logger.log('Error playing radio station: $e');
+      rethrow;
+    }
+  }
+
  /// Get full audiobook details including chapters
  Future<Audiobook?> getAudiobookDetails(String provider, String itemId) async {
    try {
@@ -1051,6 +1239,7 @@ class MusicAssistantAPI {
      );

      final items = response['result'] as List<dynamic>?;
+      _logger.log('📋 recently_played_items returned ${items?.length ?? 0} items');
      if (items == null || items.isEmpty) {
        _logger.log('⚠️ No recently played tracks found');
        return [];
@@ -1060,6 +1249,8 @@ class MusicAssistantAPI {
      final trackUris = <String>[];
      for (final item in items) {
        final trackUri = (item as Map<String, dynamic>)['uri'] as String?;
+        final name = (item as Map<String, dynamic>)['name'] as String?;
+        _logger.log('  📀 Track: $name');
        if (trackUri != null) {
          trackUris.add(trackUri);
        }
@@ -1069,16 +1260,14 @@ class MusicAssistantAPI {
        return [];
      }

-      // Batch fetch track details using parallel requests (max 5 concurrent)
-      final seenAlbumIds = <String>{};
-      final albums = <Album>[];
+      // Step 1: Fetch tracks in batches and collect unique album URIs
+      final seenAlbumUris = <String>{};
+      final albumUris = <String>[];

-      // Process in batches to avoid overwhelming the server
      const batchSize = LibraryConstants.recentAlbumsBatchSize;
-      for (var i = 0; i < trackUris.length && albums.length < limit; i += batchSize) {
+      for (var i = 0; i < trackUris.length && albumUris.length < limit; i += batchSize) {
        final batch = trackUris.skip(i).take(batchSize).toList();

-        // Fetch batch in parallel
        final futures = batch.map((uri) => _sendCommand(
          'music/item_by_uri',
          args: {'uri': uri},
@@ -1087,27 +1276,57 @@ class MusicAssistantAPI {
        final results = await Future.wait(futures, eagerError: false);

        for (final trackResponse in results) {
-          if (albums.length >= limit) break;
+          if (albumUris.length >= limit) break;

          try {
            final fullTrack = trackResponse['result'] as Map<String, dynamic>?;
+            final trackName = fullTrack?['name'] as String?;
            final albumData = fullTrack?['album'] as Map<String, dynamic>?;
+            final albumUri = albumData?['uri'] as String?;
+            final albumName = albumData?['name'] as String?;

-            if (albumData != null) {
-              final albumId = albumData['item_id']?.toString() ?? albumData['uri']?.toString();
-              if (albumId != null && !seenAlbumIds.contains(albumId)) {
-                seenAlbumIds.add(albumId);
-                albums.add(Album.fromJson(albumData));
-              }
+            if (albumUri != null && !seenAlbumUris.contains(albumUri)) {
+              seenAlbumUris.add(albumUri);
+              albumUris.add(albumUri);
+              _logger.log('  📀 Found album: $albumName from track: $trackName');
+            } else if (albumUri == null) {
+              _logger.log('  ⚠️ Track "$trackName" has no album');
            }
          } catch (_) {
-            // Skip tracks that fail to parse
            continue;
          }
        }
      }

-      _logger.log('📚 Fetched ${albums.length} recent albums using ${(trackUris.length / batchSize).ceil()} batch requests');
+      if (albumUris.isEmpty) {
+        return [];
+      }
+
+      // Step 2: Fetch full album details (with images) for each album URI
+      final albums = <Album>[];
+      for (var i = 0; i < albumUris.length; i += batchSize) {
+        final batch = albumUris.skip(i).take(batchSize).toList();
+
+        final futures = batch.map((uri) => _sendCommand(
+          'music/item_by_uri',
+          args: {'uri': uri},
+        ).timeout(const Duration(seconds: 5), onTimeout: () => <String, dynamic>{'result': null}));
+
+        final results = await Future.wait(futures, eagerError: false);
+
+        for (final albumResponse in results) {
+          try {
+            final albumData = albumResponse['result'] as Map<String, dynamic>?;
+            if (albumData != null) {
+              albums.add(Album.fromJson(albumData));
+            }
+          } catch (_) {
+            continue;
+          }
+        }
+      }
+
+      _logger.log('📚 Fetched ${albums.length} recent albums with full details');
      return albums;
    } catch (e) {
      _logger.log('❌ Error getting recent albums: $e');
@@ -1340,20 +1559,38 @@ class MusicAssistantAPI {
  /// Remove item from favorites
  /// Requires the library_item_id (the numeric ID in the MA library)
  Future<void> removeFromFavorites(String mediaType, int libraryItemId) async {
-    try {
-      _logger.log('Removing from favorites: mediaType=$mediaType, libraryItemId=$libraryItemId');
+    await _sendCommand(
+      'music/favorites/remove_item',
+      args: {
+        'media_type': mediaType,
+        'library_item_id': libraryItemId,
+      },
+    );
+  }

-      await _sendCommand(
-        'music/favorites/remove_item',
-        args: {
-          'media_type': mediaType,
-          'library_item_id': libraryItemId,
-        },
-      );
-    } catch (e) {
-      _logger.log('Error removing from favorites: $e');
-      rethrow;
-    }
+  // Library
+  /// Add item to library using URI format
+  /// The item parameter should be a URI like "spotify://artist/4tZwfgrHOc3mvqYlEYSvVi"
+  Future<void> addItemToLibrary(String mediaType, String itemId, String provider) async {
+    final uri = '$provider://$mediaType/$itemId';
+    await _sendCommand(
+      'music/library/add_item',
+      args: {
+        'item': uri,
+      },
+    );
+  }
+
+  /// Remove item from library
+  /// Requires the library_item_id (the numeric ID in the MA library)
+  Future<void> removeItemFromLibrary(String mediaType, int libraryItemId) async {
+    await _sendCommand(
+      'music/library/remove_item',
+      args: {
+        'media_type': mediaType,
+        'library_item_id': libraryItemId,
+      },
+    );
  }

  // Search
@@ -1376,7 +1613,7 @@ class MusicAssistantAPI {

          final result = searchResponse['result'] as Map<String, dynamic>?;
          if (result == null) {
-            return <String, List<MediaItem>>{'artists': [], 'albums': [], 'tracks': []};
+            return <String, List<MediaItem>>{'artists': [], 'albums': [], 'tracks': [], 'playlists': [], 'audiobooks': [], 'radios': []};
          }

          // Parse results from the search response
@@ -1395,6 +1632,26 @@ class MusicAssistantAPI {
                  .toList() ??
              [];

+          final playlists = (result['playlists'] as List<dynamic>?)
+                  ?.map((item) => Playlist.fromJson(item as Map<String, dynamic>))
+                  .toList() ??
+              [];
+
+          final audiobooks = (result['audiobooks'] as List<dynamic>?)
+                  ?.map((item) => Audiobook.fromJson(item as Map<String, dynamic>))
+                  .toList() ??
+              [];
+
+          final radios = (result['radios'] as List<dynamic>?)
+                  ?.map((item) => MediaItem.fromJson(item as Map<String, dynamic>))
+                  .toList() ??
+              [];
+
+          final podcasts = (result['podcasts'] as List<dynamic>?)
+                  ?.map((item) => MediaItem.fromJson(item as Map<String, dynamic>))
+                  .toList() ??
+              [];
+
          // Deduplicate results by name
          // MA returns both library items and provider items for the same content
          // Prefer library items (provider='library') as they have all provider mappings
@@ -1402,18 +1659,57 @@ class MusicAssistantAPI {
            'artists': _deduplicateResults(artists),
            'albums': _deduplicateResults(albums),
            'tracks': _deduplicateResults(tracks),
+            'playlists': _deduplicateResults(playlists),
+            'audiobooks': _deduplicateResults(audiobooks),
+            'radios': _deduplicateResults(radios),
+            'podcasts': _deduplicateResults(podcasts),
          };
        } catch (e) {
          _logger.log('Error searching: $e');
-          return <String, List<MediaItem>>{'artists': [], 'albums': [], 'tracks': []};
+          return <String, List<MediaItem>>{'artists': [], 'albums': [], 'tracks': [], 'playlists': [], 'audiobooks': [], 'radios': [], 'podcasts': []};
        }
      },
    ).catchError((e) {
      _logger.log('Error searching after retries: $e');
-      return <String, List<MediaItem>>{'artists': [], 'albums': [], 'tracks': []};
+      return <String, List<MediaItem>>{'artists': [], 'albums': [], 'tracks': [], 'playlists': [], 'audiobooks': [], 'radios': [], 'podcasts': []};
    });
  }

+  /// Search for podcasts globally (across all providers)
+  Future<List<MediaItem>> searchPodcasts(String query, {int limit = 25}) async {
+    try {
+      _logger.log('🎙️ Searching podcasts for: $query');
+      final response = await _sendCommand(
+        'music/search',
+        args: {
+          'search_query': query,
+          'media_types': ['podcast'],
+          'limit': limit,
+        },
+      );
+
+      final result = response['result'] as Map<String, dynamic>?;
+      if (result == null) {
+        _logger.log('🎙️ Podcast search: no result');
+        return [];
+      }
+
+      // Podcast results might be under 'podcasts' or 'podcast' key
+      final podcasts = (result['podcasts'] as List<dynamic>?) ??
+                       (result['podcast'] as List<dynamic>?) ??
+                       [];
+
+      _logger.log('🎙️ Podcast search found ${podcasts.length} results');
+
+      return podcasts
+          .map((item) => MediaItem.fromJson(item as Map<String, dynamic>))
+          .toList();
+    } catch (e) {
+      _logger.log('🎙️ Error searching podcasts: $e');
+      return [];
+    }
+  }
+
  /// Deduplicate search results by name (case-insensitive)
  /// Prefers library items (provider='library') over provider-specific items
  /// since library items have complete provider mappings
@@ -1493,6 +1789,7 @@ class MusicAssistantAPI {
              currentIndex = queueResult['current_index'] as int?;
              shuffleEnabled = queueResult['shuffle_enabled'] as bool?;
              repeatMode = queueResult['repeat_mode'] as String?;
+              _logger.log('🔀 Queue metadata: shuffle_enabled=$shuffleEnabled, repeat_mode=$repeatMode');

              final currentItemData = queueResult['current_item'] as Map<String, dynamic>?;
              final currentItemName = currentItemData?['name'] as String?;
@@ -1579,6 +1876,105 @@ class MusicAssistantAPI {
    }
  }

+  /// Add a single track to the queue without starting playback
+  Future<void> addTrackToQueue(String playerId, Track track) async {
+    try {
+      final uri = _buildTrackUri(track);
+
+      await _sendCommand(
+        'player_queues/play_media',
+        args: {
+          'queue_id': playerId,
+          'media': [uri],
+          'option': 'add',  // Add to queue without starting
+        },
+      );
+    } catch (e) {
+      _logger.log('Error adding track to queue: $e');
+      rethrow;
+    }
+  }
+
+  /// Play album on player
+  Future<void> playAlbum(String playerId, Album album) async {
+    try {
+      final uri = album.uri ?? 'library://album/${album.itemId}';
+      _logger.log('💿 Playing album: ${album.name} with URI: $uri');
+
+      await _sendCommand(
+        'player_queues/play_media',
+        args: {
+          'queue_id': playerId,
+          'media': [uri],
+          'option': 'replace',
+        },
+      );
+    } catch (e) {
+      _logger.log('Error playing album: $e');
+      rethrow;
+    }
+  }
+
+  /// Add album tracks to queue
+  Future<void> addAlbumToQueue(String playerId, Album album) async {
+    try {
+      final uri = album.uri ?? 'library://album/${album.itemId}';
+      _logger.log('💿 Adding album to queue: ${album.name} with URI: $uri');
+
+      await _sendCommand(
+        'player_queues/play_media',
+        args: {
+          'queue_id': playerId,
+          'media': [uri],
+          'option': 'add',
+        },
+      );
+    } catch (e) {
+      _logger.log('Error adding album to queue: $e');
+      rethrow;
+    }
+  }
+
+  /// Add artist tracks to queue
+  Future<void> addArtistToQueue(String playerId, Artist artist) async {
+    try {
+      final uri = artist.uri ?? 'library://artist/${artist.itemId}';
+      _logger.log('🎤 Adding artist to queue: ${artist.name} with URI: $uri');
+
+      await _sendCommand(
+        'player_queues/play_media',
+        args: {
+          'queue_id': playerId,
+          'media': [uri],
+          'option': 'add',
+        },
+      );
+    } catch (e) {
+      _logger.log('Error adding artist to queue: $e');
+      rethrow;
+    }
+  }
+
+  /// Play playlist on player
+  Future<void> playPlaylist(String playerId, Playlist playlist) async {
+    try {
+      final uri = playlist.uri ?? 'library://playlist/${playlist.itemId}';
+      _logger.log('📝 Playing playlist: ${playlist.name} with URI: $uri');
+
+      await _sendCommand(
+        'player_queues/play_media',
+        args: {
+          'queue_id': playerId,
+          'media': [uri],
+          'option': 'replace',
+        },
+      );
+    } catch (e) {
+      _logger.log('Error playing playlist: $e');
+      rethrow;
+    }
+  }
+
  /// Play multiple tracks via queue
  /// If clearQueue is true, replaces the queue (default behavior)
  /// If startIndex is provided, only tracks from that index onwards will be queued
@@ -1973,12 +2369,51 @@ class MusicAssistantAPI {
    }
  }

+  /// Sync a player to a leader/group (temporary group)
+  /// The player will join the leader's sync group and play the same audio
+  Future<void> syncPlayerToLeader(String playerId, String leaderPlayerId) async {
+    try {
+      _logger.log('🔗 API syncPlayerToLeader called');
+      _logger.log('🔗 player_id: $playerId');
+      _logger.log('🔗 target_player: $leaderPlayerId');
+
+      final response = await _sendCommand(
+        'players/cmd/group',
+        args: {
+          'player_id': playerId,
+          'target_player': leaderPlayerId,
+        },
+      );
+      _logger.log('✅ Player synced successfully, response: $response');
+    } catch (e) {
+      _logger.log('❌ Error syncing player: $e');
+      rethrow;
+    }
+  }
+
+  /// Remove a player from its sync group
+  Future<void> unsyncPlayer(String playerId) async {
+    try {
+      _logger.log('🔓 Unsyncing player: $playerId');
+      await _sendCommand(
+        'players/cmd/ungroup',
+        args: {
+          'player_id': playerId,
+        },
+      );
+      _logger.log('✅ Player unsynced successfully');
+    } catch (e) {
+      _logger.log('Error unsyncing player: $e');
+      rethrow;
+    }
+  }
+
  /// Toggle shuffle mode for queue
-  Future<void> toggleShuffle(String queueId) async {
+  Future<void> toggleShuffle(String queueId, bool shuffleEnabled) async {
    try {
      await _sendCommand(
        'player_queues/shuffle',
-        args: {'queue_id': queueId},
+        args: {'queue_id': queueId, 'shuffle_enabled': shuffleEnabled},
      );
    } catch (e) {
      _logger.log('Error toggling shuffle: $e');
@@ -2045,6 +2480,22 @@ class MusicAssistantAPI {
    return _eventStreams['player_added']!.stream;
  }

+  /// Stream of media_item_added events (for refreshing library when items are added)
+  Stream<Map<String, dynamic>> get mediaItemAddedEvents {
+    if (!_eventStreams.containsKey('media_item_added')) {
+      _eventStreams['media_item_added'] = StreamController<Map<String, dynamic>>.broadcast();
+    }
+    return _eventStreams['media_item_added']!.stream;
+  }
+
+  /// Stream of media_item_deleted events (for refreshing library when items are removed)
+  Stream<Map<String, dynamic>> get mediaItemDeletedEvents {
+    if (!_eventStreams.containsKey('media_item_deleted')) {
+      _eventStreams['media_item_deleted'] = StreamController<Map<String, dynamic>>.broadcast();
+    }
+    return _eventStreams['media_item_deleted']!.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
@@ -2302,89 +2753,15 @@ class MusicAssistantAPI {
    return _eventStreams['sendspin_player']!.stream;
  }

-  /// Get Sendspin connection info for a player
-  /// Returns connection details including:
-  /// - local_ws_url: Direct WebSocket URL (e.g., ws://192.168.4.120:8927/sendspin)
-  /// - ice_servers: List of ICE/TURN servers for WebRTC fallback
-  /// - player_id: The player's ID
-  Future<Map<String, dynamic>?> getSendspinConnectionInfo(String playerId) async {
-    try {
-      _logger.log('Sendspin: Getting connection info for player $playerId');
-
-      final response = await _sendCommand(
-        'sendspin/connection_info',
-        args: {
-          'player_id': playerId,
-        },
-      );
-
-      final result = response['result'] as Map<String, dynamic>?;
-      if (result != null) {
-        _logger.log('Sendspin: Got connection info - local_ws_url: ${result['local_ws_url']}');
-        _logger.log('Sendspin: ICE servers count: ${(result['ice_servers'] as List?)?.length ?? 0}');
-      }
-
-      return result;
-    } catch (e) {
-      _logger.log('Sendspin: Error getting connection info: $e');
-      return null;
-    }
-  }
-
-  /// Send WebRTC offer to Sendspin server
-  /// Used when establishing WebRTC connection as fallback
-  Future<Map<String, dynamic>?> sendspinOffer(String playerId, String sdp) async {
-    try {
-      _logger.log('Sendspin: Sending WebRTC offer for player $playerId');
-
-      final response = await _sendCommand(
-        'sendspin/webrtc_offer',
-        args: {
-          'player_id': playerId,
-          'sdp': sdp,
-        },
-      );
-
-      return response['result'] as Map<String, dynamic>?;
-    } catch (e) {
-      _logger.log('Sendspin: Error sending WebRTC offer: $e');
-      return null;
-    }
-  }
-
-  /// Send WebRTC answer to Sendspin server
-  Future<void> sendspinAnswer(String playerId, String sdp) async {
-    try {
-      _logger.log('Sendspin: Sending WebRTC answer for player $playerId');
-
-      await _sendCommand(
-        'sendspin/webrtc_answer',
-        args: {
-          'player_id': playerId,
-          'sdp': sdp,
-        },
-      );
-    } catch (e) {
-      _logger.log('Sendspin: Error sending WebRTC answer: $e');
-      rethrow;
-    }
-  }
-
-  /// Send ICE candidate to Sendspin server
-  Future<void> sendspinIceCandidate(String playerId, Map<String, dynamic> candidate) async {
-    try {
-      await _sendCommand(
-        'sendspin/ice_candidate',
-        args: {
-          'player_id': playerId,
-          'candidate': candidate,
-        },
-      );
-    } catch (e) {
-      _logger.log('Sendspin: Error sending ICE candidate: $e');
-      // Don't rethrow - ICE candidate failures are common and non-fatal
-    }
-  }
+  // NOTE: The following Sendspin API methods were removed because they don't exist in MA:
+  // - getSendspinConnectionInfo (sendspin/connection_info)
+  // - sendspinOffer (sendspin/webrtc_offer)
+  // - sendspinAnswer (sendspin/webrtc_answer)
+  // - sendspinIceCandidate (sendspin/ice_candidate)
+  //
+  // Sendspin connection is handled directly via WebSocket to:
+  // - Local: ws://{server-ip}:8927/sendspin
+  // - External: wss://{server}/sendspin (via MA's proxy with auth)

  /// Update Sendspin player state
  /// Similar to updateBuiltinPlayerState but for Sendspin protocol
@@ -2520,6 +2897,7 @@ class MusicAssistantAPI {
          }
        }
      } catch (e) {
+        _logger.log('⚠️ Error parsing stream URI "$uri": $e');
      }
    }

@@ -2599,6 +2977,57 @@ class MusicAssistantAPI {
    return '$baseUrl/imageproxy?provider=${Uri.encodeComponent(provider ?? "")}&size=$size&fmt=jpeg&path=${Uri.encodeComponent(imagePath)}';
  }

+  // ==================== iTunes Artwork Lookup ====================
+
+  /// Search iTunes for a podcast and return high-res artwork URL
+  /// Returns null if not found or on error
+  Future<String?> getITunesPodcastArtwork(String podcastName) async {
+    try {
+      final searchTerm = Uri.encodeComponent(podcastName);
+      final url = 'https://itunes.apple.com/search?term=$searchTerm&entity=podcast&limit=1';
+
+      final client = HttpClient();
+      client.connectionTimeout = const Duration(seconds: 10);
+
+      final request = await client.getUrl(Uri.parse(url));
+      final response = await request.close();
+
+      if (response.statusCode != 200) {
+        _logger.log('🎨 iTunes search failed for "$podcastName": ${response.statusCode}');
+        return null;
+      }
+
+      final body = await response.transform(utf8.decoder).join();
+      final json = jsonDecode(body) as Map<String, dynamic>;
+
+      final results = json['results'] as List<dynamic>?;
+      if (results == null || results.isEmpty) {
+        _logger.log('🎨 No iTunes results for "$podcastName"');
+        return null;
+      }
+
+      final podcast = results.first as Map<String, dynamic>;
+      var artworkUrl = podcast['artworkUrl600'] as String?;
+
+      if (artworkUrl == null) {
+        artworkUrl = podcast['artworkUrl100'] as String?;
+      }
+
+      if (artworkUrl != null) {
+        // Use 800x800 - good quality without being excessive (was 1400x1400)
+        artworkUrl = artworkUrl
+            .replaceAll('600x600', '800x800')
+            .replaceAll('100x100', '800x800');
+        _logger.log('🎨 Found iTunes artwork for "$podcastName": $artworkUrl');
+      }
+
+      return artworkUrl;
+    } catch (e) {
+      _logger.log('🎨 iTunes lookup error for "$podcastName": $e');
+      return null;
+    }
+  }
+
  // ==================== Authentication Methods ====================

  /// Authenticate the WebSocket session with a token
@@ -2888,6 +3317,17 @@ class MusicAssistantAPI {
    _updateConnectionState(MAConnectionState.disconnected);
    await _channel?.sink.close();
    _channel = null;
+    // Complete all pending requests with an error before clearing
+    _cancelPendingRequests('Connection disconnected');
+  }
+
+  /// Cancel all pending requests with an error message
+  void _cancelPendingRequests(String reason) {
+    for (final entry in _pendingRequests.entries) {
+      if (!entry.value.isCompleted) {
+        entry.value.completeError(Exception(reason));
+      }
+    }
    _pendingRequests.clear();
  }

@@ -0,0 +1,138 @@
+import 'dart:convert';
+import 'package:shared_preferences/shared_preferences.dart';
+import 'debug_logger.dart';
+
+/// Represents a queued action that will be executed when connection is restored
+class QueuedAction {
+  final String type;
+  final Map<String, dynamic> params;
+  final DateTime queuedAt;
+
+  QueuedAction({
+    required this.type,
+    required this.params,
+    required this.queuedAt,
+  });
+
+  Map<String, dynamic> toJson() => {
+    'type': type,
+    'params': params,
+    'queuedAt': queuedAt.toIso8601String(),
+  };
+
+  factory QueuedAction.fromJson(Map<String, dynamic> json) => QueuedAction(
+    type: json['type'] as String,
+    params: json['params'] as Map<String, dynamic>,
+    queuedAt: DateTime.parse(json['queuedAt'] as String),
+  );
+}
+
+/// Service for queuing actions when offline and executing them when back online
+class OfflineActionQueue {
+  static OfflineActionQueue? _instance;
+  static OfflineActionQueue get instance => _instance ??= OfflineActionQueue._();
+
+  OfflineActionQueue._();
+
+  final _logger = DebugLogger();
+  static const _prefsKey = 'offline_action_queue';
+
+  List<QueuedAction> _queue = [];
+  bool _isProcessing = false;
+
+  /// Get the current queue (for display)
+  List<QueuedAction> get queue => List.unmodifiable(_queue);
+
+  /// Check if there are pending actions
+  bool get hasPendingActions => _queue.isNotEmpty;
+
+  /// Number of pending actions
+  int get pendingCount => _queue.length;
+
+  /// Initialize and load persisted queue
+  Future<void> initialize() async {
+    try {
+      final prefs = await SharedPreferences.getInstance();
+      final queueJson = prefs.getString(_prefsKey);
+      if (queueJson != null) {
+        final List<dynamic> decoded = jsonDecode(queueJson);
+        _queue = decoded.map((j) => QueuedAction.fromJson(j as Map<String, dynamic>)).toList();
+        _logger.log('📋 Loaded ${_queue.length} offline actions from storage');
+      }
+    } catch (e) {
+      _logger.log('⚠️ Error loading offline action queue: $e');
+    }
+  }
+
+  /// Queue an action for later execution
+  Future<void> queueAction(String type, Map<String, dynamic> params) async {
+    final action = QueuedAction(
+      type: type,
+      params: params,
+      queuedAt: DateTime.now(),
+    );
+    _queue.add(action);
+    await _persistQueue();
+    _logger.log('📋 Queued offline action: $type');
+  }
+
+  /// Process all queued actions (call when connection is restored)
+  Future<void> processQueue(Future<bool> Function(QueuedAction action) executor) async {
+    if (_isProcessing || _queue.isEmpty) return;
+
+    _isProcessing = true;
+    _logger.log('🔄 Processing ${_queue.length} offline actions...');
+
+    final processed = <QueuedAction>[];
+
+    for (final action in _queue) {
+      try {
+        final success = await executor(action);
+        if (success) {
+          processed.add(action);
+          _logger.log('✅ Processed offline action: ${action.type}');
+        } else {
+          _logger.log('⚠️ Failed to process offline action: ${action.type}');
+        }
+      } catch (e) {
+        _logger.log('❌ Error processing offline action: $e');
+      }
+    }
+
+    // Remove processed actions
+    _queue.removeWhere((a) => processed.contains(a));
+    await _persistQueue();
+
+    _isProcessing = false;
+    _logger.log('📋 ${processed.length} actions processed, ${_queue.length} remaining');
+  }
+
+  /// Clear all queued actions
+  Future<void> clearQueue() async {
+    _queue.clear();
+    await _persistQueue();
+    _logger.log('🗑️ Offline action queue cleared');
+  }
+
+  /// Persist queue to storage
+  Future<void> _persistQueue() async {
+    try {
+      final prefs = await SharedPreferences.getInstance();
+      if (_queue.isEmpty) {
+        await prefs.remove(_prefsKey);
+      } else {
+        final queueJson = jsonEncode(_queue.map((a) => a.toJson()).toList());
+        await prefs.setString(_prefsKey, queueJson);
+      }
+    } catch (e) {
+      _logger.log('⚠️ Error persisting offline action queue: $e');
+    }
+  }
+}
+
+/// Action types for offline queuing
+class OfflineActionTypes {
+  static const String toggleFavorite = 'toggle_favorite';
+  static const String addToPlaylist = 'add_to_playlist';
+  static const String removeFromPlaylist = 'remove_from_playlist';
+}
@@ -83,6 +83,11 @@ class PcmAudioPlayer {
  // Reduced from 8000 to 5000 frames (~104ms vs ~166ms) for faster response
  static const int _feedThreshold = 5000;

+  // Maximum buffer size to prevent memory overflow (~10 seconds of audio)
+  // At 48kHz stereo 16-bit: 192KB/sec, so ~2MB for 10 seconds
+  // Each chunk is ~4KB, so max ~500 chunks
+  static const int _maxBufferChunks = 500;
+
  // Stats
  int _framesPlayed = 0;
  int _bytesPlayed = 0;
@@ -201,6 +206,16 @@ class PcmAudioPlayer {
    return true;
  }

+  /// Safely add audio data to buffer with overflow protection
+  void _addToBuffer(Uint8List audioData) {
+    // If buffer is full, drop oldest chunks to make room
+    while (_audioBuffer.length >= _maxBufferChunks) {
+      _audioBuffer.removeAt(0);
+      _logger.log('⚠️ PcmAudioPlayer: Buffer overflow - dropping oldest chunk');
+    }
+    _audioBuffer.add(audioData);
+  }
+
  /// Handle incoming audio data from the stream
  void _onAudioData(Uint8List audioData) {
    // Ignore data if in error state
@@ -215,7 +230,7 @@ class PcmAudioPlayer {
      if (_state == PcmPlayerState.paused && !_isAutoRecovering) {
        _logger.log('PcmAudioPlayer: Audio arriving while paused - initiating auto-recovery');
        _isAutoRecovering = true;
-        _audioBuffer.add(audioData);
+        _addToBuffer(audioData);

        // Trigger async recovery
        _autoRecoverFromPause();
@@ -224,7 +239,7 @@ class PcmAudioPlayer {

      // If already recovering or in transitional state, buffer the data
      if (_isAutoRecovering) {
-        _audioBuffer.add(audioData);
+        _addToBuffer(audioData);
        return;
      }

@@ -232,8 +247,8 @@ class PcmAudioPlayer {
      return;
    }

-    // Add to buffer
-    _audioBuffer.add(audioData);
+    // Add to buffer with overflow protection
+    _addToBuffer(audioData);

    // Start playback if not already started
    if (!_isStarted && _state == PcmPlayerState.ready) {
@@ -24,6 +24,10 @@ class PositionTracker {
  double _anchorPosition = 0.0;  // Position in seconds at anchor time
  DateTime _anchorTime = DateTime.now();  // When we set the anchor

+  // Maximum time to interpolate from a stale anchor before capping
+  // After this, we stop adding time to prevent indefinite drift
+  static const Duration _maxAnchorAge = Duration(seconds: 30);
+
  // Interpolation timer
  Timer? _interpolationTimer;

@@ -43,7 +47,13 @@ class PositionTracker {
    }

    final now = DateTime.now();
-    final elapsed = now.difference(_anchorTime).inMilliseconds / 1000.0;
+    final anchorAge = now.difference(_anchorTime);
+
+    // Cap interpolation at max anchor age to prevent indefinite drift
+    // If anchor is stale, return last known position (anchor + max age)
+    final elapsed = anchorAge > _maxAnchorAge
+        ? _maxAnchorAge.inMilliseconds / 1000.0
+        : anchorAge.inMilliseconds / 1000.0;
    final interpolated = _anchorPosition + elapsed;

    // Cap at duration to prevent overflow
@@ -61,7 +71,12 @@ class PositionTracker {
    }

    final now = DateTime.now();
-    final elapsed = now.difference(_anchorTime).inMilliseconds / 1000.0;
+    final anchorAge = now.difference(_anchorTime);
+
+    // Cap interpolation at max anchor age to prevent indefinite drift
+    final elapsed = anchorAge > _maxAnchorAge
+        ? _maxAnchorAge.inMilliseconds / 1000.0
+        : anchorAge.inMilliseconds / 1000.0;
    final interpolated = _anchorPosition + elapsed;

    // Cap at duration
@@ -25,6 +25,8 @@ class RecentlyPlayedService {
    if (!_db.isInitialized) return;

    try {
+      // Store images metadata for instant artwork display
+      final images = album.metadata?['images'];
      await _db.addRecentlyPlayed(
        mediaId: album.itemId,
        mediaType: 'album',
@@ -33,6 +35,7 @@ class RecentlyPlayedService {
        metadata: {
          'provider': album.provider,
          'uri': album.uri,
+          if (images != null) 'images': images,
        },
      );
      _logger.log('📝 Recorded album play: ${album.name}');
@@ -148,7 +151,16 @@ class RecentlyPlayedService {
        if (item.metadata != null) {
          try {
            metadata = jsonDecode(item.metadata!) as Map<String, dynamic>;
-          } catch (_) {}
+          } catch (e) {
+            // Corrupted metadata JSON - log and continue with null metadata
+            _logger.log('⚠️ Error parsing album metadata for ${item.mediaId}: $e');
+          }
+        }
+
+        // Build metadata with images if available (for instant artwork display)
+        Map<String, dynamic>? albumMetadata;
+        if (metadata?['images'] != null) {
+          albumMetadata = {'images': metadata!['images']};
        }

        albums.add(Album(
@@ -160,6 +172,7 @@ class RecentlyPlayedService {
          artists: item.artistName != null
              ? [Artist(itemId: '', provider: '', name: item.artistName!)]
              : null,
+          metadata: albumMetadata,
        ));

        if (albums.length >= limit) break;
@@ -193,7 +206,10 @@ class RecentlyPlayedService {
        if (item.metadata != null) {
          try {
            metadata = jsonDecode(item.metadata!) as Map<String, dynamic>;
-          } catch (_) {}
+          } catch (e) {
+            // Corrupted metadata JSON - log and continue with null metadata
+            _logger.log('⚠️ Error parsing audiobook metadata for ${item.mediaId}: $e');
+          }
        }

        audiobooks.add(Audiobook(
@@ -0,0 +1,148 @@
+import 'package:flutter_secure_storage/flutter_secure_storage.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+import 'dart:convert';
+
+/// Service for securely storing sensitive data like passwords and tokens.
+/// Uses platform-specific secure storage (Keychain on iOS, EncryptedSharedPreferences on Android).
+class SecureStorageService {
+  static const _storage = FlutterSecureStorage(
+    aOptions: AndroidOptions(
+      encryptedSharedPreferences: true,
+    ),
+  );
+
+  // Keys for secure storage
+  static const String _keyAuthToken = 'secure_auth_token';
+  static const String _keyMaAuthToken = 'secure_ma_auth_token';
+  static const String _keyAuthCredentials = 'secure_auth_credentials';
+  static const String _keyPassword = 'secure_password';
+  static const String _keyAbsApiToken = 'secure_abs_api_token';
+
+  // Auth Token (for stream requests)
+  static Future<String?> getAuthToken() async {
+    return await _storage.read(key: _keyAuthToken);
+  }
+
+  static Future<void> setAuthToken(String? token) async {
+    if (token == null || token.isEmpty) {
+      await _storage.delete(key: _keyAuthToken);
+    } else {
+      await _storage.write(key: _keyAuthToken, value: token);
+    }
+  }
+
+  // Music Assistant Native Auth Token (long-lived token)
+  static Future<String?> getMaAuthToken() async {
+    return await _storage.read(key: _keyMaAuthToken);
+  }
+
+  static Future<void> setMaAuthToken(String? token) async {
+    if (token == null || token.isEmpty) {
+      await _storage.delete(key: _keyMaAuthToken);
+    } else {
+      await _storage.write(key: _keyMaAuthToken, value: token);
+    }
+  }
+
+  static Future<void> clearMaAuthToken() async {
+    await _storage.delete(key: _keyMaAuthToken);
+  }
+
+  // Auth Credentials (serialized auth strategy credentials)
+  static Future<Map<String, dynamic>?> getAuthCredentials() async {
+    final json = await _storage.read(key: _keyAuthCredentials);
+    if (json == null) return null;
+    try {
+      return jsonDecode(json) as Map<String, dynamic>;
+    } catch (e) {
+      return null;
+    }
+  }
+
+  static Future<void> setAuthCredentials(Map<String, dynamic> credentials) async {
+    await _storage.write(key: _keyAuthCredentials, value: jsonEncode(credentials));
+  }
+
+  static Future<void> clearAuthCredentials() async {
+    await _storage.delete(key: _keyAuthCredentials);
+  }
+
+  // Password
+  static Future<String?> getPassword() async {
+    return await _storage.read(key: _keyPassword);
+  }
+
+  static Future<void> setPassword(String? password) async {
+    if (password == null || password.isEmpty) {
+      await _storage.delete(key: _keyPassword);
+    } else {
+      await _storage.write(key: _keyPassword, value: password);
+    }
+  }
+
+  // Audiobookshelf API Token
+  static Future<String?> getAbsApiToken() async {
+    return await _storage.read(key: _keyAbsApiToken);
+  }
+
+  static Future<void> setAbsApiToken(String? token) async {
+    if (token == null || token.isEmpty) {
+      await _storage.delete(key: _keyAbsApiToken);
+    } else {
+      await _storage.write(key: _keyAbsApiToken, value: token);
+    }
+  }
+
+  /// Clear all secure storage (used during logout)
+  static Future<void> clearAll() async {
+    await _storage.deleteAll();
+  }
+
+  /// Migrate credentials from SharedPreferences to secure storage.
+  /// Call this once during app upgrade to migrate existing users.
+  static Future<void> migrateFromSharedPreferences() async {
+    // Import SharedPreferences for migration
+    final SharedPreferences prefs = await SharedPreferences.getInstance();
+
+    // Migrate auth token
+    final authToken = prefs.getString('auth_token');
+    if (authToken != null && authToken.isNotEmpty) {
+      await setAuthToken(authToken);
+      await prefs.remove('auth_token');
+    }
+
+    // Migrate MA auth token
+    final maAuthToken = prefs.getString('ma_auth_token');
+    if (maAuthToken != null && maAuthToken.isNotEmpty) {
+      await setMaAuthToken(maAuthToken);
+      await prefs.remove('ma_auth_token');
+    }
+
+    // Migrate auth credentials
+    final authCredentials = prefs.getString('auth_credentials');
+    if (authCredentials != null && authCredentials.isNotEmpty) {
+      try {
+        final decoded = jsonDecode(authCredentials) as Map<String, dynamic>;
+        await setAuthCredentials(decoded);
+        await prefs.remove('auth_credentials');
+      } catch (_) {
+        // Invalid JSON, just remove it
+        await prefs.remove('auth_credentials');
+      }
+    }
+
+    // Migrate password
+    final password = prefs.getString('password');
+    if (password != null && password.isNotEmpty) {
+      await setPassword(password);
+      await prefs.remove('password');
+    }
+
+    // Migrate ABS API token
+    final absApiToken = prefs.getString('abs_api_token');
+    if (absApiToken != null && absApiToken.isNotEmpty) {
+      await setAbsApiToken(absApiToken);
+      await prefs.remove('abs_api_token');
+    }
+  }
+}
@@ -84,14 +84,32 @@ class SendspinService {

  bool _isDisposed = false;

+  // Auth token for proxy authentication (MA 2.7.1+)
+  String? _authToken;
+
+  // Connection deduplication guard - prevents multiple concurrent auth attempts
+  Completer<bool>? _connectionInProgress;
+
  SendspinService(this.serverUrl);

+  /// Set the MA auth token for proxy authentication
+  void setAuthToken(String? token) {
+    _authToken = token;
+  }
+
  /// Initialize and connect to Sendspin server
  /// Uses persistent player ID and username-based naming
  Future<bool> connect() async {
    if (_isDisposed) return false;
    if (_state == SendspinConnectionState.connected) return true;

+    // Deduplicate concurrent connection attempts
+    if (_connectionInProgress != null) {
+      _logger.log('Sendspin: Connection already in progress, waiting...');
+      return _connectionInProgress!.future;
+    }
+    _connectionInProgress = Completer<bool>();
+
    _updateState(SendspinConnectionState.connecting);

    try {
@@ -105,26 +123,32 @@ class SendspinService {
      bool connected = false;

      // Strategy 1: If server is HTTPS, try external wss:// first
+      // Use proxy auth for MA 2.7.1+ - the proxy requires authentication before hello
      if (_isHttpsServer()) {
        final externalUrl = _buildExternalSendspinUrl();
        _logger.log('Sendspin: Trying external URL: $externalUrl');
-        connected = await _tryConnect(externalUrl, timeout: const Duration(seconds: 3));
+        connected = await _tryConnect(externalUrl, timeout: const Duration(seconds: 5), useProxyAuth: true);
      }

-      // Strategy 2: If external failed or server is HTTP, try local connection
-      // Note: We would need local_ws_url from getSendspinConnectionInfo API
-      // For now, skip this step and fall back to WebRTC (handled by provider)
+      // Note: Local network connections (ws://ip:8927/sendspin) are handled
+      // by the provider calling connectWithUrl() directly, not by this method.

      if (!connected) {
-        _logger.log('Sendspin: External connection failed, WebRTC fallback needed');
+        _logger.log('Sendspin: External proxy connection failed');
        _updateState(SendspinConnectionState.error);
+        _connectionInProgress?.complete(false);
+        _connectionInProgress = null;
        return false;
      }

+      _connectionInProgress?.complete(true);
+      _connectionInProgress = null;
      return true;
    } catch (e) {
      _logger.log('Sendspin: Connection error: $e');
      _updateState(SendspinConnectionState.error);
+      _connectionInProgress?.complete(false);
+      _connectionInProgress = null;
      return false;
    }
  }
@@ -134,6 +158,13 @@ class SendspinService {
    if (_isDisposed) return false;
    if (_state == SendspinConnectionState.connected) return true;

+    // Deduplicate concurrent connection attempts
+    if (_connectionInProgress != null) {
+      _logger.log('Sendspin: Connection already in progress, waiting...');
+      return _connectionInProgress!.future;
+    }
+    _connectionInProgress = Completer<bool>();
+
    _updateState(SendspinConnectionState.connecting);

    try {
@@ -146,22 +177,29 @@ class SendspinService {

      if (!connected) {
        _updateState(SendspinConnectionState.error);
+        _connectionInProgress?.complete(false);
+        _connectionInProgress = null;
        return false;
      }

+      _connectionInProgress?.complete(true);
+      _connectionInProgress = null;
      return true;
    } catch (e) {
      _logger.log('Sendspin: Connection error: $e');
      _updateState(SendspinConnectionState.error);
+      _connectionInProgress?.complete(false);
+      _connectionInProgress = null;
      return false;
    }
  }

  /// Attempt to connect to a specific WebSocket URL
-  Future<bool> _tryConnect(String url, {Duration timeout = const Duration(seconds: 5)}) async {
+  /// If useProxyAuth is true and we have an auth token, authenticate first (for MA 2.7.1+ proxy)
+  Future<bool> _tryConnect(String url, {Duration timeout = const Duration(seconds: 5), bool useProxyAuth = false}) async {
    try {
      // Connect to the base URL without query params - we send player info in hello message
-      _logger.log('Sendspin: Connecting to $url');
+      _logger.log('Sendspin: Connecting to $url${useProxyAuth ? ' (with proxy auth)' : ''}');

      // Create WebSocket connection
      final webSocket = await WebSocket.connect(url).timeout(timeout);
@@ -176,6 +214,29 @@ class SendspinService {
        onDone: _handleDone,
      );

+      // If using proxy auth (MA 2.7.1+), authenticate first
+      if (useProxyAuth && _authToken != null) {
+        _logger.log('Sendspin: Sending proxy auth with token');
+        _sendMessage({
+          'type': 'auth',
+          'token': _authToken,
+        }, allowDuringHandshake: true);
+
+        // Wait for auth_ok response
+        final authOk = await _waitForAuth().timeout(
+          const Duration(seconds: 5),
+          onTimeout: () => false,
+        );
+
+        if (!authOk) {
+          _logger.log('Sendspin: Proxy authentication failed or timed out');
+          await _channel?.sink.close();
+          _channel = null;
+          return false;
+        }
+        _logger.log('Sendspin: Proxy auth successful, proceeding with hello');
+      }
+
      // Send client/hello message immediately after connecting
      // This is required by the Sendspin protocol - server waits for this
      // Message format follows aiosendspin protocol spec
@@ -228,12 +289,18 @@ class SendspinService {

  /// Wait for server acknowledgment after connection
  Completer<bool>? _ackCompleter;
+  Completer<bool>? _authCompleter;

  Future<bool> _waitForAck() async {
    _ackCompleter = Completer<bool>();
    return _ackCompleter!.future;
  }

+  Future<bool> _waitForAuth() async {
+    _authCompleter = Completer<bool>();
+    return _authCompleter!.future;
+  }
+
  /// Handle incoming WebSocket messages
  /// WebSocket can send text frames (JSON control messages) or binary frames (PCM audio data)
  void _handleMessage(dynamic message) {
@@ -310,6 +377,14 @@ class SendspinService {
          onStreamEnd?.call();
          break;

+        case 'auth_ok':
+          // Proxy authentication successful (MA 2.7.1+)
+          _logger.log('Sendspin: Proxy authentication successful');
+          if (_authCompleter != null && !_authCompleter!.isCompleted) {
+            _authCompleter!.complete(true);
+          }
+          break;
+
        case 'ack':
        case 'connected':
        case 'registered':
@@ -472,8 +547,9 @@ class SendspinService {
    if (muted != null) _isMuted = muted;

    // Determine player state for Sendspin protocol
-    // 'synchronized' = ready/playing, 'idle' = not playing
-    final playerState = _isPlaying || _isPaused ? 'synchronized' : 'idle';
+    // Valid values: 'synchronized', 'error', 'external_source'
+    // When connected, we're always synchronized (ready to receive audio)
+    const playerState = 'synchronized';

    _sendMessage({
      'type': 'client/state',
@@ -534,7 +610,7 @@ class SendspinService {
    _sendMessage({
      'type': 'client/time',
      'payload': {
-        'timestamp': timestampMicroseconds,
+        'client_transmitted': timestampMicroseconds,
      },
    }, allowDuringHandshake: allowDuringHandshake);
  }
@@ -1,5 +1,7 @@
 import 'package:shared_preferences/shared_preferences.dart';
 import 'dart:convert';
+import 'device_id_service.dart';
+import 'secure_storage_service.dart';

 class SettingsService {
  static const String _keyServerUrl = 'server_url';
@@ -15,12 +17,15 @@ class SettingsService {
  static const String _keyUseMaterialTheme = 'use_material_theme';
  static const String _keyAdaptiveTheme = 'adaptive_theme';
  static const String _keyCustomColor = 'custom_color';
+  static const String _keyLocale = 'locale';
  static const String _keyLastFmApiKey = 'lastfm_api_key';
  static const String _keyTheAudioDbApiKey = 'theaudiodb_api_key';
  static const String _keyEnableLocalPlayback = 'enable_local_playback';
  static const String _keyLocalPlayerName = 'local_player_name';
  static const String _keyOwnerName = 'owner_name';
  static const String _keyLastSelectedPlayerId = 'last_selected_player_id';
+  static const String _keyPreferLocalPlayer = 'prefer_local_player';
+  static const String _keySmartSortPlayers = 'smart_sort_players';
  static const String _keyShowRecentAlbums = 'show_recent_albums';
  static const String _keyShowDiscoverArtists = 'show_discover_artists';
  static const String _keyShowDiscoverAlbums = 'show_discover_albums';
@@ -30,6 +35,7 @@ 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 _keyShowOnlyArtistsWithAlbums = 'show_only_artists_with_albums'; // Library artists filter
  static const String _keyHomeRowOrder = 'home_row_order'; // JSON list of row IDs

  // Default row order
@@ -61,6 +67,8 @@ class SettingsService {
  static const String _keyLibrarySeriesViewMode = 'library_series_view_mode'; // 'grid2', 'grid3', 'list'
  static const String _keySeriesAudiobooksSortOrder = 'series_audiobooks_sort_order'; // 'alpha' or 'year'
  static const String _keySeriesAudiobooksViewMode = 'series_audiobooks_view_mode'; // 'grid2', 'grid3', 'list'
+  static const String _keyLibraryRadioViewMode = 'library_radio_view_mode'; // 'grid2', 'grid3', 'list'
+  static const String _keyLibraryPodcastsViewMode = 'library_podcasts_view_mode'; // 'grid2', 'grid3', 'list'

  // Audiobookshelf Direct Integration Settings
  static const String _keyAbsServerUrl = 'abs_server_url';
@@ -71,6 +79,14 @@ class SettingsService {
  static const String _keyEnabledAbsLibraries = 'enabled_abs_libraries'; // JSON list of library paths
  static const String _keyDiscoveredAbsLibraries = 'discovered_abs_libraries'; // JSON list of {path, name}

+  // Hint System Settings
+  static const String _keyShowHints = 'show_hints'; // Master toggle for hints
+  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
+
+  // Podcast Cover Cache (iTunes URLs for high-res artwork)
+  static const String _keyPodcastCoverCache = 'podcast_cover_cache';
+
  static Future<String?> getServerUrl() async {
    final prefs = await SharedPreferences.getInstance();
    return prefs.getString(_keyServerUrl);
@@ -118,66 +134,44 @@ class SettingsService {
    }
  }

-  // Get authentication token for stream requests
+  // Get authentication token for stream requests (securely stored)
  static Future<String?> getAuthToken() async {
-    final prefs = await SharedPreferences.getInstance();
-    return prefs.getString(_keyAuthToken);
+    return await SecureStorageService.getAuthToken();
  }

-  // Set authentication token for stream requests
+  // Set authentication token for stream requests (securely stored)
  static Future<void> setAuthToken(String? token) async {
-    final prefs = await SharedPreferences.getInstance();
-    if (token == null || token.isEmpty) {
-      await prefs.remove(_keyAuthToken);
-    } else {
-      await prefs.setString(_keyAuthToken, token);
-    }
+    await SecureStorageService.setAuthToken(token);
  }

-  // Get Music Assistant native auth token (long-lived token)
+  // Get Music Assistant native auth token (long-lived token, securely stored)
  static Future<String?> getMaAuthToken() async {
-    final prefs = await SharedPreferences.getInstance();
-    return prefs.getString(_keyMaAuthToken);
+    return await SecureStorageService.getMaAuthToken();
  }

-  // Set Music Assistant native auth token (long-lived token)
+  // Set Music Assistant native auth token (long-lived token, securely stored)
  static Future<void> setMaAuthToken(String? token) async {
-    final prefs = await SharedPreferences.getInstance();
-    if (token == null || token.isEmpty) {
-      await prefs.remove(_keyMaAuthToken);
-    } else {
-      await prefs.setString(_keyMaAuthToken, token);
-    }
+    await SecureStorageService.setMaAuthToken(token);
  }

  // Clear Music Assistant native auth token
  static Future<void> clearMaAuthToken() async {
-    final prefs = await SharedPreferences.getInstance();
-    await prefs.remove(_keyMaAuthToken);
+    await SecureStorageService.clearMaAuthToken();
  }

-  // Get authentication credentials (serialized auth strategy credentials)
+  // Get authentication credentials (serialized auth strategy credentials, securely stored)
  static Future<Map<String, dynamic>?> getAuthCredentials() async {
-    final prefs = await SharedPreferences.getInstance();
-    final json = prefs.getString(_keyAuthCredentials);
-    if (json == null) return null;
-    try {
-      return jsonDecode(json) as Map<String, dynamic>;
-    } catch (e) {
-      return null;
-    }
+    return await SecureStorageService.getAuthCredentials();
  }

-  // Set authentication credentials (serialized auth strategy credentials)
+  // Set authentication credentials (serialized auth strategy credentials, securely stored)
  static Future<void> setAuthCredentials(Map<String, dynamic> credentials) async {
-    final prefs = await SharedPreferences.getInstance();
-    await prefs.setString(_keyAuthCredentials, jsonEncode(credentials));
+    await SecureStorageService.setAuthCredentials(credentials);
  }

  // Clear authentication credentials
  static Future<void> clearAuthCredentials() async {
-    final prefs = await SharedPreferences.getInstance();
-    await prefs.remove(_keyAuthCredentials);
+    await SecureStorageService.clearAuthCredentials();
  }

  // Get username for authentication
@@ -196,20 +190,14 @@ class SettingsService {
    }
  }

-  // Get password for authentication
+  // Get password for authentication (securely stored)
  static Future<String?> getPassword() async {
-    final prefs = await SharedPreferences.getInstance();
-    return prefs.getString(_keyPassword);
+    return await SecureStorageService.getPassword();
  }

-  // Set password for authentication
+  // Set password for authentication (securely stored)
  static Future<void> setPassword(String? password) async {
-    final prefs = await SharedPreferences.getInstance();
-    if (password == null || password.isEmpty) {
-      await prefs.remove(_keyPassword);
-    } else {
-      await prefs.setString(_keyPassword, password);
-    }
+    await SecureStorageService.setPassword(password);
  }

  // Get built-in player ID (persistent UUID for this device)
@@ -265,6 +253,21 @@ class SettingsService {
    await prefs.setString(_keyCustomColor, color);
  }

+  // Locale (null = system default)
+  static Future<String?> getLocale() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyLocale);
+  }
+
+  static Future<void> saveLocale(String? locale) async {
+    final prefs = await SharedPreferences.getInstance();
+    if (locale == null) {
+      await prefs.remove(_keyLocale);
+    } else {
+      await prefs.setString(_keyLocale, locale);
+    }
+  }
+
  // Metadata API Keys
  static Future<String?> getLastFmApiKey() async {
    final prefs = await SharedPreferences.getInstance();
@@ -348,19 +351,50 @@ class SettingsService {
    }
  }

+  // Prefer Local Player - always select local player first when available
+  static Future<bool> getPreferLocalPlayer() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getBool(_keyPreferLocalPlayer) ?? false;
+  }
+
+  static Future<void> setPreferLocalPlayer(bool prefer) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_keyPreferLocalPlayer, prefer);
+  }
+
+  // Smart Sort Players - sort by status (playing > on > off) instead of alphabetically
+  static Future<bool> getSmartSortPlayers() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getBool(_keySmartSortPlayers) ?? false;
+  }
+
+  static Future<void> setSmartSortPlayers(bool smartSort) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_keySmartSortPlayers, smartSort);
+  }
+
  // Helper to create player name with possessive apostrophe
+  // Automatically detects Phone vs Tablet based on screen size
  static String _makePlayerName(String ownerName) {
-    // Handle possessive: "Chris" -> "Chris' Phone", "Mom" -> "Mom's Phone"
+    final deviceType = DeviceIdService.isTablet ? 'Tablet' : 'Phone';
+    // Handle possessive: "Chris" -> "Chris' Tablet", "Mom" -> "Mom's Phone"
    if (ownerName.toLowerCase().endsWith('s')) {
-      return "$ownerName' Phone";
+      return "$ownerName' $deviceType";
    } else {
-      return "$ownerName's Phone";
+      return "$ownerName's $deviceType";
    }
  }

  static Future<void> clearSettings() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.clear();
+    await SecureStorageService.clearAll(); // Also clear secure storage
+  }
+
+  /// Migrate credentials from old SharedPreferences storage to secure storage.
+  /// Should be called once during app startup for existing users.
+  static Future<void> migrateToSecureStorage() async {
+    await SecureStorageService.migrateFromSharedPreferences();
  }

  // Home Screen Row Settings (Main rows - default on)
@@ -456,6 +490,17 @@ class SettingsService {
    await prefs.setBool(_keyShowFavoriteTracks, show);
  }

+  // Library Artists Filter - show only artists that have albums in library
+  static Future<bool> getShowOnlyArtistsWithAlbums() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getBool(_keyShowOnlyArtistsWithAlbums) ?? false;
+  }
+
+  static Future<void> setShowOnlyArtistsWithAlbums(bool show) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_keyShowOnlyArtistsWithAlbums, show);
+  }
+
  // Home Row Order
  static Future<List<String>> getHomeRowOrder() async {
    final prefs = await SharedPreferences.getInstance();
@@ -593,6 +638,26 @@ class SettingsService {
    await prefs.setString(_keyLibrarySeriesViewMode, mode);
  }

+  static Future<String> getLibraryRadioViewMode() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyLibraryRadioViewMode) ?? 'list';
+  }
+
+  static Future<void> setLibraryRadioViewMode(String mode) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keyLibraryRadioViewMode, mode);
+  }
+
+  static Future<String> getLibraryPodcastsViewMode() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyLibraryPodcastsViewMode) ?? 'grid2';
+  }
+
+  static Future<void> setLibraryPodcastsViewMode(String mode) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keyLibraryPodcastsViewMode, mode);
+  }
+
  // View Mode Settings - Series Audiobooks (series detail screen)
  static Future<String> getSeriesAudiobooksSortOrder() async {
    final prefs = await SharedPreferences.getInstance();
@@ -626,13 +691,11 @@ class SettingsService {
  }

  static Future<String?> getAbsApiToken() async {
-    final prefs = await SharedPreferences.getInstance();
-    return prefs.getString(_keyAbsApiToken);
+    return await SecureStorageService.getAbsApiToken();
  }

  static Future<void> setAbsApiToken(String token) async {
-    final prefs = await SharedPreferences.getInstance();
-    await prefs.setString(_keyAbsApiToken, token);
+    await SecureStorageService.setAbsApiToken(token);
  }

  static Future<bool> getAbsEnabled() async {
@@ -648,8 +711,8 @@ class SettingsService {
  static Future<void> clearAbsSettings() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.remove(_keyAbsServerUrl);
-    await prefs.remove(_keyAbsApiToken);
    await prefs.remove(_keyAbsEnabled);
+    await SecureStorageService.setAbsApiToken(null); // Clear from secure storage
  }

  // Audiobookshelf Library Settings (via MA browse API)
@@ -722,4 +785,71 @@ class SettingsService {

    await setEnabledAbsLibraries(enabled);
  }
+
+  // Hint System Settings
+
+  /// Get whether hints are enabled (default: true)
+  static Future<bool> getShowHints() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getBool(_keyShowHints) ?? true;
+  }
+
+  /// Set whether hints are enabled
+  static Future<void> setShowHints(bool show) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_keyShowHints, show);
+  }
+
+  /// Check if user has ever used the player reveal gesture
+  static Future<bool> getHasUsedPlayerReveal() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getBool(_keyHasUsedPlayerReveal) ?? false;
+  }
+
+  /// Mark that user has used the player reveal gesture
+  static Future<void> setHasUsedPlayerReveal(bool hasUsed) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_keyHasUsedPlayerReveal, hasUsed);
+  }
+
+  /// Check if user has completed onboarding (seen welcome screen)
+  static Future<bool> getHasCompletedOnboarding() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getBool(_keyHasCompletedOnboarding) ?? false;
+  }
+
+  /// Mark that user has completed onboarding
+  static Future<void> setHasCompletedOnboarding(bool completed) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_keyHasCompletedOnboarding, completed);
+  }
+
+  // Podcast Cover Cache (iTunes URLs for high-res artwork)
+  // Stored as JSON: {"podcastId": "itunesUrl", ...}
+
+  /// Get cached podcast cover URLs (iTunes high-res)
+  static Future<Map<String, String>> getPodcastCoverCache() async {
+    final prefs = await SharedPreferences.getInstance();
+    final json = prefs.getString(_keyPodcastCoverCache);
+    if (json == null) return {};
+    try {
+      final decoded = jsonDecode(json) as Map<String, dynamic>;
+      return decoded.map((key, value) => MapEntry(key, value as String));
+    } catch (_) {
+      return {};
+    }
+  }
+
+  /// Save podcast cover cache
+  static Future<void> setPodcastCoverCache(Map<String, String> cache) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keyPodcastCoverCache, jsonEncode(cache));
+  }
+
+  /// Add a single podcast cover to cache (for incremental updates)
+  static Future<void> addPodcastCoverToCache(String podcastId, String url) async {
+    final cache = await getPodcastCoverCache();
+    cache[podcastId] = url;
+    await setPodcastCoverCache(cache);
+  }
 }
@@ -5,6 +5,7 @@ import '../models/media_item.dart';
 import 'database_service.dart';
 import 'debug_logger.dart';
 import 'music_assistant_api.dart';
+import 'settings_service.dart';

 /// Sync status for UI indicators
 enum SyncStatus {
@@ -150,10 +151,14 @@ class SyncService with ChangeNotifier {
    try {
      _logger.log('🔄 Starting background library sync...');

+      // Read artist filter setting - when ON, only fetch artists that have albums
+      final showOnlyArtistsWithAlbums = await SettingsService.getShowOnlyArtistsWithAlbums();
+      _logger.log('🎨 Sync using albumArtistsOnly: $showOnlyArtistsWithAlbums');
+
      // Fetch fresh data from MA API (in parallel for speed)
      final results = await Future.wait([
        api.getAlbums(limit: 1000),
-        api.getArtists(limit: 1000),
+        api.getArtists(limit: 1000, albumArtistsOnly: showOnlyArtistsWithAlbums),
        api.getAudiobooks(limit: 1000),
        api.getPlaylists(limit: 1000),
      ]);
@@ -166,6 +171,12 @@ class SyncService with ChangeNotifier {
      _logger.log('📥 Fetched ${albums.length} albums, ${artists.length} artists, '
                  '${audiobooks.length} audiobooks, ${playlists.length} playlists from MA');

+      // Clear old cache before saving fresh data (removes stale items)
+      await _db.clearCacheForType('album');
+      await _db.clearCacheForType('artist');
+      await _db.clearCacheForType('audiobook');
+      await _db.clearCacheForType('playlist');
+
      // Save to database cache
      await _saveAlbumsToCache(albums);
      await _saveArtistsToCache(artists);
@@ -4,7 +4,17 @@ import 'package:flutter/material.dart';
 const Color brandPrimaryColor = Color(0xFF1a1a1a);
 const Color brandAccentColor = Color(0xFF604CEC);

-// Brand color schemes
+// Predefined accent colors for custom theme selection
+const List<Color> accentColorOptions = [
+  Color(0xFF604CEC), // Purple (default)
+  Color(0xFF2196F3), // Blue
+  Color(0xFF009688), // Teal
+  Color(0xFFFF5722), // Deep Orange
+  Color(0xFFE91E63), // Pink
+  Color(0xFF4CAF50), // Green
+];
+
+// Brand color schemes (default)
 final ColorScheme brandLightColorScheme = ColorScheme.fromSeed(
  seedColor: brandAccentColor,
  brightness: Brightness.light,
@@ -21,6 +31,27 @@ final ColorScheme brandDarkColorScheme = ColorScheme.fromSeed(
  background: const Color(0xFF1a1a1a),
 );

+// Generate color schemes from a custom seed color
+ColorScheme generateLightColorScheme(Color seedColor) {
+  return ColorScheme.fromSeed(
+    seedColor: seedColor,
+    brightness: Brightness.light,
+    background: const Color(0xFFFAFAFA),
+    onBackground: const Color(0xFF1a1a1a),
+    surface: const Color(0xFFFFFFFF),
+    onSurface: const Color(0xFF1a1a1a),
+  );
+}
+
+ColorScheme generateDarkColorScheme(Color seedColor) {
+  return ColorScheme.fromSeed(
+    seedColor: seedColor,
+    brightness: Brightness.dark,
+    surface: const Color(0xFF2a2a2a),
+    background: const Color(0xFF1a1a1a),
+  );
+}
+
 class AppTheme {
  // Generate light theme
  static ThemeData lightTheme({ColorScheme? colorScheme}) {
@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:cached_network_image/cached_network_image.dart';
@@ -13,12 +14,16 @@ class AlbumCard extends StatefulWidget {
  final Album album;
  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 AlbumCard({
    super.key,
    required this.album,
    this.onTap,
    this.heroTagSuffix,
+    this.imageCacheSize,
  });

  @override
@@ -30,6 +35,10 @@ class _AlbumCardState extends State<AlbumCard> {
  bool _triedFallback = false;
  bool _maImageFailed = false;
  String? _cachedMaImageUrl;
+  Timer? _fallbackTimer;
+
+  /// Delay before fetching fallback images to avoid requests during fast scroll
+  static const _fallbackDelay = Duration(milliseconds: 200);

  @override
  void initState() {
@@ -37,6 +46,12 @@ class _AlbumCardState extends State<AlbumCard> {
    _initFallbackImage();
  }

+  @override
+  void dispose() {
+    _fallbackTimer?.cancel();
+    super.dispose();
+  }
+
  void _initFallbackImage() {
    // Check if MA has an image after first build, then fetch fallback if needed
    WidgetsBinding.instance.addPostFrameCallback((_) {
@@ -47,6 +62,16 @@ class _AlbumCardState extends State<AlbumCard> {

      if (maImageUrl == null && !_triedFallback) {
        _triedFallback = true;
+        _scheduleFallbackFetch();
+      }
+    });
+  }
+
+  /// Schedule fallback fetch with delay to avoid requests during fast scroll
+  void _scheduleFallbackFetch() {
+    _fallbackTimer?.cancel();
+    _fallbackTimer = Timer(_fallbackDelay, () {
+      if (mounted) {
        _fetchFallbackImage();
      }
    });
@@ -69,7 +94,7 @@ class _AlbumCardState extends State<AlbumCard> {
    if (!_triedFallback && !_maImageFailed) {
      _maImageFailed = true;
      _triedFallback = true;
-      _fetchFallbackImage();
+      _scheduleFallbackFetch();
    }
  }

@@ -86,6 +111,9 @@ class _AlbumCardState extends State<AlbumCard> {
    // Use fallback if MA image failed or wasn't available
    final imageUrl = (_maImageFailed || maImageUrl == null) ? _fallbackImageUrl : maImageUrl;

+    // PERF: Use appropriate cache size based on display size
+    final cacheSize = widget.imageCacheSize ?? 256;
+
    return RepaintBoundary(
      child: GestureDetector(
        onTap: widget.onTap ?? () {
@@ -97,6 +125,7 @@ class _AlbumCardState extends State<AlbumCard> {
              child: AlbumDetailsScreen(
                album: widget.album,
                heroTagSuffix: widget.heroTagSuffix,
+                initialImageUrl: imageUrl,
              ),
            ),
          );
@@ -117,9 +146,10 @@ class _AlbumCardState extends State<AlbumCard> {
                        ? CachedNetworkImage(
                            imageUrl: imageUrl,
                            fit: BoxFit.cover,
-                            memCacheWidth: 256,
-                            memCacheHeight: 256,
-                            fadeInDuration: const Duration(milliseconds: 150),
+                            memCacheWidth: cacheSize,
+                            memCacheHeight: cacheSize,
+                            fadeInDuration: Duration.zero,
+                            fadeOutDuration: Duration.zero,
                            placeholder: (context, url) => const SizedBox(),
                            errorWidget: (context, url, error) {
                              // Try fallback on error (only for MA URLs, not fallback URLs)
@@ -1,5 +1,6 @@
 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';
@@ -10,6 +11,8 @@ class AlbumRow extends StatefulWidget {
  final Future<List<Album>> Function() loadAlbums;
  final String? heroTagSuffix;
  final double? rowHeight;
+  /// Optional: synchronous getter for cached data (for instant display)
+  final List<Album>? Function()? getCachedAlbums;

  const AlbumRow({
    super.key,
@@ -17,6 +20,7 @@ class AlbumRow extends StatefulWidget {
    required this.loadAlbums,
    this.heroTagSuffix,
    this.rowHeight,
+    this.getCachedAlbums,
  });

  @override
@@ -24,8 +28,8 @@ class AlbumRow extends StatefulWidget {
 }

 class _AlbumRowState extends State<AlbumRow> with AutomaticKeepAliveClientMixin {
-  late Future<List<Album>> _albumsFuture;
-  List<Album>? _cachedAlbums; // Keep last loaded data to prevent flash
+  List<Album> _albums = [];
+  bool _isLoading = true;
  bool _hasLoaded = false;

  @override
@@ -34,21 +38,121 @@ class _AlbumRowState extends State<AlbumRow> with AutomaticKeepAliveClientMixin
  @override
  void initState() {
    super.initState();
-    _loadAlbumsOnce();
+    _loadAlbums();
  }

-  void _loadAlbumsOnce() {
-    if (!_hasLoaded) {
-      _albumsFuture = widget.loadAlbums().then((albums) {
-        _cachedAlbums = albums;
-        return albums;
-      });
-      _hasLoaded = true;
+  Future<void> _loadAlbums() async {
+    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)
+    try {
+      final freshAlbums = await widget.loadAlbums();
+      if (mounted && freshAlbums.isNotEmpty) {
+        setState(() {
+          _albums = freshAlbums;
+          _isLoading = false;
+        });
+        // Pre-cache images for smooth hero animations
+        _precacheAlbumImages(freshAlbums);
+      }
+    } catch (e) {
+      // Silent failure - keep showing cached data
+    }
+
+    if (mounted && _isLoading) {
+      setState(() => _isLoading = false);
+    }
+  }
+
+  /// Pre-cache album images so hero animations are smooth on first tap
+  void _precacheAlbumImages(List<Album> albums) {
+    if (!mounted) return;
+    final maProvider = context.read<MusicAssistantProvider>();
+
+    // Only precache first ~10 visible items to avoid excessive network/memory use
+    final albumsToCache = albums.take(10);
+
+    for (final album in albumsToCache) {
+      final imageUrl = maProvider.api?.getImageUrl(album, size: 256);
+      if (imageUrl != null) {
+        // Use CachedNetworkImageProvider to warm the cache
+        precacheImage(
+          CachedNetworkImageProvider(imageUrl),
+          context,
+        ).catchError((_) {
+          // Silently ignore precache errors
+          return false;
+        });
+      }
    }
  }

  static final _logger = DebugLogger();

+  Widget _buildContent(double contentHeight, ColorScheme colorScheme) {
+    // Only show loading if we have no data at all
+    if (_albums.isEmpty && _isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    if (_albums.isEmpty) {
+      return Center(
+        child: Text(
+          'No albums 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; // 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: _albums.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 album = _albums[index];
+          return Padding(
+            padding: const EdgeInsets.only(bottom: 4.0),
+            child: Container(
+              key: ValueKey(album.uri ?? album.itemId),
+              width: cardWidth,
+              margin: const EdgeInsets.symmetric(horizontal: 6.0),
+              child: AlbumCard(
+                album: album,
+                heroTagSuffix: widget.heroTagSuffix,
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+
  @override
  Widget build(BuildContext context) {
    _logger.startBuild('AlbumRow:${widget.title}');
@@ -78,65 +182,7 @@ class _AlbumRowState extends State<AlbumRow> with AutomaticKeepAliveClientMixin
            ),
          ),
          Expanded(
-            child: FutureBuilder<List<Album>>(
-              future: _albumsFuture,
-              builder: (context, snapshot) {
-                // Use cached data immediately if available (prevents flash on rebuild)
-                final albums = snapshot.data ?? _cachedAlbums;
-
-                // Only show loading if we have no data at all
-                if (albums == null && snapshot.connectionState == ConnectionState.waiting) {
-                  return const Center(child: CircularProgressIndicator());
-                }
-
-                if (snapshot.hasError && albums == null) {
-                  return Center(
-                    child: Text('Error: ${snapshot.error}'),
-                  );
-                }
-
-                if (albums == null || albums.isEmpty) {
-                  return Center(
-                    child: Text(
-                      'No albums 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; // width + horizontal margins
-
-                return ScrollConfiguration(
-                  behavior: const _StretchScrollBehavior(),
-                  child: ListView.builder(
-                    scrollDirection: Axis.horizontal,
-                    padding: const EdgeInsets.symmetric(horizontal: 12.0),
-                    itemCount: albums.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 album = albums[index];
-                      return Container(
-                        key: ValueKey(album.uri ?? album.itemId),
-                        width: cardWidth,
-                        margin: const EdgeInsets.symmetric(horizontal: 6.0),
-                        child: AlbumCard(
-                          album: album,
-                          heroTagSuffix: widget.heroTagSuffix,
-                        ),
-                      );
-                    },
-                  ),
-                );
-              },
-            ),
+            child: _buildContent(contentHeight, colorScheme),
          ),
          ],
        ),
@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:provider/provider.dart';
@@ -32,6 +33,10 @@ class _ArtistAvatarState extends State<ArtistAvatar> {
  String? _fallbackImageUrl;
  bool _triedFallback = false;
  bool _maImageFailed = false;
+  Timer? _fallbackTimer;
+
+  /// Delay before fetching fallback images to avoid requests during fast scroll
+  static const _fallbackDelay = Duration(milliseconds: 200);

  @override
  void initState() {
@@ -39,6 +44,12 @@ class _ArtistAvatarState extends State<ArtistAvatar> {
    _loadImage();
  }

+  @override
+  void dispose() {
+    _fallbackTimer?.cancel();
+    super.dispose();
+  }
+
  Future<void> _loadImage() async {
    final provider = context.read<MusicAssistantProvider>();

@@ -56,14 +67,23 @@ class _ArtistAvatarState extends State<ArtistAvatar> {
      return;
    }

-    // Fallback to external sources (MA returned null)
-    _fetchFallbackImage();
+    // Fallback to external sources (MA returned null) - with delay
+    _scheduleFallbackFetch();
+  }
+
+  /// Schedule fallback fetch with delay to avoid requests during fast scroll
+  void _scheduleFallbackFetch() {
+    if (_triedFallback) return;
+    _triedFallback = true;
+    _fallbackTimer?.cancel();
+    _fallbackTimer = Timer(_fallbackDelay, () {
+      if (mounted) {
+        _fetchFallbackImage();
+      }
+    });
  }

  Future<void> _fetchFallbackImage() async {
-    if (_triedFallback) return;
-    _triedFallback = true;
-
    final fallbackUrl = await MetadataService.getArtistImageUrl(widget.artist.name);
    _fallbackImageUrl = fallbackUrl;

@@ -79,7 +99,7 @@ class _ArtistAvatarState extends State<ArtistAvatar> {
    // When MA image fails to load, try Deezer fallback
    if (!_maImageFailed) {
      _maImageFailed = true;
-      _fetchFallbackImage();
+      _scheduleFallbackFetch();
    }
  }

@@ -100,6 +120,11 @@ class _ArtistAvatarState extends State<ArtistAvatar> {
          width: widget.radius * 2,
          height: widget.radius * 2,
          fit: BoxFit.cover,
+          // PERF: Use imageSize for memory cache to reduce decode overhead
+          memCacheWidth: widget.imageSize,
+          memCacheHeight: widget.imageSize,
+          fadeInDuration: Duration.zero,
+          fadeOutDuration: Duration.zero,
          placeholder: (context, url) => Container(
            color: colorScheme.surfaceVariant,
            child: Icon(Icons.person_rounded, color: colorScheme.onSurfaceVariant),
@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:cached_network_image/cached_network_image.dart';
@@ -14,14 +15,16 @@ class ArtistCard extends StatefulWidget {
  final Artist artist;
  final VoidCallback? onTap;
  final String? heroTagSuffix;
-  final double? imageSize;
+  /// Image decode size in pixels. Defaults to 256.
+  /// Use smaller values (e.g., 128) for list views, larger for grids.
+  final int? imageCacheSize;

  const ArtistCard({
    super.key,
    required this.artist,
    this.onTap,
    this.heroTagSuffix,
-    this.imageSize,
+    this.imageCacheSize,
  });

  @override
@@ -34,6 +37,10 @@ class _ArtistCardState extends State<ArtistCard> {
  bool _triedFallback = false;
  bool _maImageFailed = false;
  String? _cachedMaImageUrl;
+  Timer? _fallbackTimer;
+
+  /// Delay before fetching fallback images to avoid requests during fast scroll
+  static const _fallbackDelay = Duration(milliseconds: 200);

  @override
  void initState() {
@@ -42,6 +49,12 @@ class _ArtistCardState extends State<ArtistCard> {
    _initFallbackImage();
  }

+  @override
+  void dispose() {
+    _fallbackTimer?.cancel();
+    super.dispose();
+  }
+
  void _initFallbackImage() {
    // We'll check if MA has an image after first build, then fetch fallback if needed
    WidgetsBinding.instance.addPostFrameCallback((_) {
@@ -52,7 +65,17 @@ class _ArtistCardState extends State<ArtistCard> {

      if (maImageUrl == null && !_triedFallback) {
        _triedFallback = true;
-        _logger.debug('No MA image for "${widget.artist.name}", trying fallback', context: 'ArtistCard');
+        _logger.debug('No MA image for "${widget.artist.name}", scheduling fallback', context: 'ArtistCard');
+        _scheduleFallbackFetch();
+      }
+    });
+  }
+
+  /// Schedule fallback fetch with delay to avoid requests during fast scroll
+  void _scheduleFallbackFetch() {
+    _fallbackTimer?.cancel();
+    _fallbackTimer = Timer(_fallbackDelay, () {
+      if (mounted) {
        _fetchFallbackImage();
      }
    });
@@ -63,8 +86,8 @@ class _ArtistCardState extends State<ArtistCard> {
    if (!_triedFallback && !_maImageFailed) {
      _maImageFailed = true;
      _triedFallback = true;
-      _logger.debug('MA image failed for "${widget.artist.name}", trying fallback', context: 'ArtistCard');
-      _fetchFallbackImage();
+      _logger.debug('MA image failed for "${widget.artist.name}", scheduling fallback', context: 'ArtistCard');
+      _scheduleFallbackFetch();
    }
  }

@@ -81,6 +104,9 @@ class _ArtistCardState extends State<ArtistCard> {
    // Use fallback if MA image failed or wasn't available
    final imageUrl = (_maImageFailed || maImageUrl == null) ? _fallbackImageUrl : maImageUrl;

+    // PERF: Use appropriate cache size based on display size
+    final cacheSize = widget.imageCacheSize ?? 256;
+
    return RepaintBoundary(
      child: GestureDetector(
        onTap: widget.onTap ?? () {
@@ -100,49 +126,50 @@ class _ArtistCardState extends State<ArtistCard> {
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
-            // Artist image - circular, constrained to be a proper circle
-            Expanded(
-              child: Center(
-                child: LayoutBuilder(
-                  builder: (context, constraints) {
-                    // Use the smaller dimension to ensure a circle
-                    final size = constraints.maxWidth < constraints.maxHeight
-                        ? constraints.maxWidth
-                        : constraints.maxHeight;
-                    return Hero(
-                      tag: HeroTags.artistImage + (widget.artist.uri ?? widget.artist.itemId) + suffix,
-                      child: ClipOval(
-                        child: Container(
-                          width: size,
-                          height: size,
-                          color: colorScheme.surfaceVariant,
-                          child: imageUrl != null
-                              ? CachedNetworkImage(
-                                  imageUrl: imageUrl,
-                                  fit: BoxFit.cover,
-                                  memCacheWidth: 256,
-                                  memCacheHeight: 256,
-                                  fadeInDuration: const Duration(milliseconds: 150),
-                                  placeholder: (context, url) => const SizedBox(),
-                                  errorWidget: (context, url, error) {
-                                    // Try fallback on error (only for MA URLs, not fallback URLs)
-                                    if (!_maImageFailed && url == maImageUrl) {
-                                      WidgetsBinding.instance.addPostFrameCallback((_) {
-                                        _onImageError();
-                                      });
-                                    }
-                                    return Icon(
-                                      Icons.person_rounded,
-                                      size: size * 0.55,
-                                      color: colorScheme.onSurfaceVariant,
-                                    );
-                                  },
-                                )
-                              : Icon(Icons.person_rounded, size: size * 0.55, color: colorScheme.onSurfaceVariant),
-                        ),
-                      ),
-                    );
-                  },
+            // Artist image - circular
+            // PERF: Use AspectRatio instead of LayoutBuilder to provide fixed geometry
+            // before Hero animation starts. This prevents grey icon flash caused by
+            // dynamic sizing inside the Hero widget.
+            AspectRatio(
+              aspectRatio: 1.0,
+              child: Hero(
+                tag: HeroTags.artistImage + (widget.artist.uri ?? widget.artist.itemId) + suffix,
+                child: ClipOval(
+                  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) {
+                              // Try fallback on error (only for MA URLs, not fallback URLs)
+                              if (!_maImageFailed && url == maImageUrl) {
+                                WidgetsBinding.instance.addPostFrameCallback((_) {
+                                  _onImageError();
+                                });
+                              }
+                              return Center(
+                                child: Icon(
+                                  Icons.person_rounded,
+                                  size: 64,
+                                  color: colorScheme.onSurfaceVariant,
+                                ),
+                              );
+                            },
+                          )
+                        : Center(
+                            child: Icon(
+                              Icons.person_rounded,
+                              size: 64,
+                              color: colorScheme.onSurfaceVariant,
+                            ),
+                          ),
+                  ),
                ),
              ),
            ),
@@ -162,6 +189,7 @@ class _ArtistCardState extends State<ArtistCard> {
                  style: textTheme.titleSmall?.copyWith(
                    color: colorScheme.onSurface,
                    fontWeight: FontWeight.w500,
+                    height: 1.15,
                  ),
                ),
              ),
@@ -1,5 +1,6 @@
 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';
@@ -10,6 +11,8 @@ class ArtistRow extends StatefulWidget {
  final Future<List<Artist>> Function() loadArtists;
  final String? heroTagSuffix;
  final double? rowHeight;
+  /// Optional: synchronous getter for cached data (for instant display)
+  final List<Artist>? Function()? getCachedArtists;

  const ArtistRow({
    super.key,
@@ -17,6 +20,7 @@ class ArtistRow extends StatefulWidget {
    required this.loadArtists,
    this.heroTagSuffix,
    this.rowHeight,
+    this.getCachedArtists,
  });

  @override
@@ -24,8 +28,8 @@ class ArtistRow extends StatefulWidget {
 }

 class _ArtistRowState extends State<ArtistRow> with AutomaticKeepAliveClientMixin {
-  late Future<List<Artist>> _artistsFuture;
-  List<Artist>? _cachedArtists; // Keep last loaded data to prevent flash
+  List<Artist> _artists = [];
+  bool _isLoading = true;
  bool _hasLoaded = false;

  @override
@@ -34,21 +38,117 @@ class _ArtistRowState extends State<ArtistRow> with AutomaticKeepAliveClientMixi
  @override
  void initState() {
    super.initState();
-    _loadArtistsOnce();
+    _loadArtists();
  }

-  void _loadArtistsOnce() {
-    if (!_hasLoaded) {
-      _artistsFuture = widget.loadArtists().then((artists) {
-        _cachedArtists = artists;
-        return artists;
-      });
-      _hasLoaded = true;
+  Future<void> _loadArtists() async {
+    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)
+    try {
+      final freshArtists = await widget.loadArtists();
+      if (mounted && freshArtists.isNotEmpty) {
+        setState(() {
+          _artists = freshArtists;
+          _isLoading = false;
+        });
+        // Pre-cache images for smooth hero animations
+        _precacheArtistImages(freshArtists);
+      }
+    } catch (e) {
+      // Silent failure - keep showing cached data
+    }
+
+    if (mounted && _isLoading) {
+      setState(() => _isLoading = false);
+    }
+  }
+
+  /// Pre-cache artist images so hero animations are smooth on first tap
+  void _precacheArtistImages(List<Artist> artists) {
+    if (!mounted) return;
+    final maProvider = context.read<MusicAssistantProvider>();
+
+    // Only precache first ~10 visible items to avoid excessive network/memory use
+    final artistsToCache = artists.take(10);
+
+    for (final artist in artistsToCache) {
+      final imageUrl = maProvider.api?.getImageUrl(artist, size: 256);
+      if (imageUrl != null) {
+        // Use CachedNetworkImageProvider to warm the cache
+        precacheImage(
+          CachedNetworkImageProvider(imageUrl),
+          context,
+        ).catchError((_) {
+          // Silently ignore precache errors
+          return false;
+        });
+      }
    }
  }

  static final _logger = DebugLogger();

+  Widget _buildContent(double contentHeight, ColorScheme colorScheme) {
+    // Only show loading if we have no data at all
+    if (_artists.isEmpty && _isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    if (_artists.isEmpty) {
+      return Center(
+        child: Text(
+          'No artists found',
+          style: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
+        ),
+      );
+    }
+
+    // Card layout: circle image + name below
+    // 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: _artists.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 artist = _artists[index];
+          return Container(
+            key: ValueKey(artist.uri ?? artist.itemId),
+            width: cardWidth,
+            margin: const EdgeInsets.symmetric(horizontal: 8.0),
+            child: ArtistCard(
+              artist: artist,
+              heroTagSuffix: widget.heroTagSuffix,
+            ),
+          );
+        },
+      ),
+    );
+  }
+
  @override
  Widget build(BuildContext context) {
    _logger.startBuild('ArtistRow:${widget.title}');
@@ -78,65 +178,7 @@ class _ArtistRowState extends State<ArtistRow> with AutomaticKeepAliveClientMixi
            ),
          ),
          Expanded(
-            child: FutureBuilder<List<Artist>>(
-              future: _artistsFuture,
-              builder: (context, snapshot) {
-                // Use cached data immediately if available (prevents flash on rebuild)
-                final artists = snapshot.data ?? _cachedArtists;
-
-                // Only show loading if we have no data at all
-                if (artists == null && snapshot.connectionState == ConnectionState.waiting) {
-                  return const Center(child: CircularProgressIndicator());
-                }
-
-                if (snapshot.hasError && artists == null) {
-                  return Center(
-                    child: Text('Error: ${snapshot.error}'),
-                  );
-                }
-
-                if (artists == null || artists.isEmpty) {
-                  return Center(
-                    child: Text(
-                      'No artists found',
-                      style: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
-                    ),
-                  );
-                }
-
-                // Card layout: circle image + name below
-                // 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: artists.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 artist = artists[index];
-                      return Container(
-                        key: ValueKey(artist.uri ?? artist.itemId),
-                        width: cardWidth,
-                        margin: const EdgeInsets.symmetric(horizontal: 8.0),
-                        child: ArtistCard(
-                          artist: artist,
-                          heroTagSuffix: widget.heroTagSuffix,
-                        ),
-                      );
-                    },
-                  ),
-                );
-              },
-            ),
+            child: _buildContent(contentHeight, colorScheme),
          ),
          ],
        ),
@@ -31,6 +31,7 @@ class _AudiobookRowState extends State<AudiobookRow> with AutomaticKeepAliveClie
  late Future<List<Audiobook>> _audiobooksFuture;
  List<Audiobook>? _cachedAudiobooks;
  bool _hasLoaded = false;
+  bool _hasPrecachedAudiobooks = false;

  @override
  bool get wantKeepAlive => true;
@@ -45,12 +46,38 @@ class _AudiobookRowState extends State<AudiobookRow> with AutomaticKeepAliveClie
    if (!_hasLoaded) {
      _audiobooksFuture = widget.loadAudiobooks().then((audiobooks) {
        _cachedAudiobooks = audiobooks;
+        // Pre-cache images for smooth Hero animations
+        _precacheAudiobookImages(audiobooks);
        return audiobooks;
      });
      _hasLoaded = true;
    }
  }

+  /// Pre-cache audiobook images so Hero animations are smooth on first tap
+  void _precacheAudiobookImages(List<Audiobook> audiobooks) {
+    if (!mounted || _hasPrecachedAudiobooks) return;
+    _hasPrecachedAudiobooks = true;
+
+    final maProvider = context.read<MusicAssistantProvider>();
+
+    // Only precache first ~10 visible items
+    final audiobooksToCache = audiobooks.take(10);
+
+    for (final audiobook in audiobooksToCache) {
+      final imageUrl = maProvider.api?.getImageUrl(audiobook, size: 256);
+      if (imageUrl != null) {
+        precacheImage(
+          CachedNetworkImageProvider(imageUrl),
+          context,
+        ).catchError((_) {
+          // Silently ignore precache errors
+          return false;
+        });
+      }
+    }
+  }
+
  static final _logger = DebugLogger();

  @override
@@ -173,6 +200,7 @@ class _AudiobookCard extends StatelessWidget {
            child: AudiobookDetailScreen(
              audiobook: audiobook,
              heroTagSuffix: heroTagSuffix,
+              initialImageUrl: imageUrl,
            ),
          ),
        );
@@ -195,6 +223,11 @@ class _AudiobookCard extends StatelessWidget {
                          ? CachedNetworkImage(
                              imageUrl: imageUrl,
                              fit: BoxFit.cover,
+                              // PERF: Duration.zero for hero-wrapped images
+                              fadeInDuration: Duration.zero,
+                              fadeOutDuration: Duration.zero,
+                              memCacheWidth: 256,
+                              memCacheHeight: 256,
                              placeholder: (_, __) => Center(
                                child: Icon(
                                  MdiIcons.bookOutline,
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import '../../l10n/app_localizations.dart';
 import '../../theme/design_tokens.dart';

 /// A reusable widget for displaying disconnected/offline state.
@@ -21,29 +22,31 @@ class DisconnectedState extends StatelessWidget {
  });

  /// Simple disconnected state without action button
-  factory DisconnectedState.simple() => const DisconnectedState(
-        title: 'Not connected to Music Assistant',
+  factory DisconnectedState.simple(BuildContext context) => DisconnectedState(
+        title: S.of(context)!.notConnected,
      );

  /// Disconnected state with settings button for navigation
  factory DisconnectedState.withSettingsAction({
+    required BuildContext context,
    required VoidCallback onSettings,
  }) =>
      DisconnectedState(
-        title: 'Not connected to Music Assistant',
-        actionLabel: 'Configure Server',
+        title: S.of(context)!.notConnected,
+        actionLabel: S.of(context)!.configureServer,
        actionIcon: Icons.settings_rounded,
        onAction: onSettings,
      );

  /// Full disconnected state with title, subtitle, and action (for home screen)
  factory DisconnectedState.full({
+    required BuildContext context,
    required VoidCallback onSettings,
  }) =>
      DisconnectedState(
-        title: 'Not Connected',
-        subtitle: 'Connect to your Music Assistant server to start listening',
-        actionLabel: 'Configure Server',
+        title: S.of(context)!.notConnectedTitle,
+        subtitle: S.of(context)!.connectHint,
+        actionLabel: S.of(context)!.configureServer,
        actionIcon: Icons.settings_rounded,
        onAction: onSettings,
        iconSize: 80,
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import '../../l10n/app_localizations.dart';
 import '../../theme/design_tokens.dart';

 /// A reusable empty state widget for displaying when no data is available.
@@ -21,48 +22,66 @@ class EmptyState extends StatelessWidget {
  });

  /// Creates an empty state for artists
-  factory EmptyState.artists({VoidCallback? onRefresh}) => EmptyState(
-        icon: Icons.person_outline_rounded,
-        message: 'No artists found',
-        actionLabel: onRefresh != null ? 'Refresh' : null,
-        onAction: onRefresh,
-      );
+  factory EmptyState.artists({VoidCallback? onRefresh, required BuildContext context}) {
+    final s = S.of(context)!;
+    return EmptyState(
+      icon: Icons.person_outline_rounded,
+      message: s.noArtistsFound,
+      actionLabel: onRefresh != null ? s.refresh : null,
+      onAction: onRefresh,
+    );
+  }

  /// Creates an empty state for albums
-  factory EmptyState.albums({VoidCallback? onRefresh}) => EmptyState(
-        icon: Icons.album_outlined,
-        message: 'No albums found',
-        actionLabel: onRefresh != null ? 'Refresh' : null,
-        onAction: onRefresh,
-      );
+  factory EmptyState.albums({VoidCallback? onRefresh, required BuildContext context}) {
+    final s = S.of(context)!;
+    return EmptyState(
+      icon: Icons.album_outlined,
+      message: s.noAlbumsFound,
+      actionLabel: onRefresh != null ? s.refresh : null,
+      onAction: onRefresh,
+    );
+  }

  /// Creates an empty state for tracks
-  factory EmptyState.tracks({VoidCallback? onRefresh}) => EmptyState(
-        icon: Icons.music_note_outlined,
-        message: 'No tracks found',
-        actionLabel: onRefresh != null ? 'Refresh' : null,
-        onAction: onRefresh,
-      );
+  factory EmptyState.tracks({VoidCallback? onRefresh, required BuildContext context}) {
+    final s = S.of(context)!;
+    return EmptyState(
+      icon: Icons.music_note_outlined,
+      message: s.noTracksFound,
+      actionLabel: onRefresh != null ? s.refresh : null,
+      onAction: onRefresh,
+    );
+  }

  /// Creates an empty state for playlists
-  factory EmptyState.playlists({VoidCallback? onRefresh}) => EmptyState(
-        icon: Icons.playlist_play_rounded,
-        message: 'No playlists found',
-        actionLabel: onRefresh != null ? 'Refresh' : null,
-        onAction: onRefresh,
-      );
+  factory EmptyState.playlists({VoidCallback? onRefresh, required BuildContext context}) {
+    final s = S.of(context)!;
+    return EmptyState(
+      icon: Icons.playlist_play_rounded,
+      message: s.noPlaylistsFound,
+      actionLabel: onRefresh != null ? s.refresh : null,
+      onAction: onRefresh,
+    );
+  }

  /// Creates an empty state for queue
-  factory EmptyState.queue() => const EmptyState(
-        icon: Icons.queue_music,
-        message: 'Queue is empty',
-      );
+  factory EmptyState.queue({required BuildContext context}) {
+    final s = S.of(context)!;
+    return EmptyState(
+      icon: Icons.queue_music,
+      message: s.queueIsEmpty,
+    );
+  }

  /// Creates an empty state for search results
-  factory EmptyState.search() => const EmptyState(
-        icon: Icons.search_off_rounded,
-        message: 'No results found',
-      );
+  factory EmptyState.search({required BuildContext context}) {
+    final s = S.of(context)!;
+    return EmptyState(
+      icon: Icons.search_off_rounded,
+      message: s.noResultsFound,
+    );
+  }

  /// Creates a custom empty state with title and subtitle
  factory EmptyState.custom({
@@ -70,12 +89,14 @@ class EmptyState extends StatelessWidget {
    required String title,
    String? subtitle,
    VoidCallback? onRefresh,
+    required BuildContext context,
  }) =>
      _CustomEmptyState(
        icon: icon,
        title: title,
        subtitle: subtitle,
        onRefresh: onRefresh,
+        context: context,
      );

  @override
@@ -126,17 +147,20 @@ class _CustomEmptyState extends EmptyState {
  final String title;
  final String? subtitle;
  final VoidCallback? onRefresh;
+  final BuildContext context;

  const _CustomEmptyState({
    required super.icon,
    required this.title,
    this.subtitle,
    this.onRefresh,
+    required this.context,
  }) : super(message: title);

  @override
  Widget build(BuildContext context) {
    final colorScheme = Theme.of(context).colorScheme;
+    final s = S.of(context)!;

    return Center(
      child: Padding(
@@ -175,7 +199,7 @@ class _CustomEmptyState extends EmptyState {
              ElevatedButton.icon(
                onPressed: onRefresh,
                icon: const Icon(Icons.refresh_rounded),
-                label: const Text('Refresh'),
+                label: Text(s.refresh),
                style: ElevatedButton.styleFrom(
                  backgroundColor: colorScheme.surfaceVariant,
                  foregroundColor: colorScheme.onSurfaceVariant,
@@ -1,9 +1,16 @@
+import 'dart:async';
+import 'dart:ui';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
+import '../l10n/app_localizations.dart';
 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';

 /// Cached color with contrast adjustment
 /// Avoids expensive HSL conversions during scroll
@@ -50,14 +57,14 @@ class BottomSpacing {
  /// Height of the bottom navigation bar
  static const double navBarHeight = 56.0;

-  /// Height of mini player when visible (64px height + 12px margin)
-  static const double miniPlayerHeight = 76.0;
+  /// Height of mini player when visible (height + 12px margin)
+  static double get miniPlayerHeight => MiniPlayerLayout.height + 12.0;

  /// Space needed when only nav bar is visible (with some extra padding)
  static const double navBarOnly = navBarHeight + 16.0;

  /// Space needed when mini player is also visible
-  static const double withMiniPlayer = navBarHeight + miniPlayerHeight + 22.0;
+  static double get withMiniPlayer => navBarHeight + miniPlayerHeight + 22.0;
 }

 /// ValueNotifier for player expansion progress (0.0 to 1.0) and background color
@@ -110,13 +117,74 @@ class GlobalPlayerOverlay extends StatefulWidget {
  static void showPlayer() {
    _overlayStateKey.currentState?._setHidden(false);
  }
+
+  /// Show the player reveal overlay with bounce animation
+  static void showPlayerReveal() {
+    _overlayStateKey.currentState?._showPlayerReveal();
+  }
+
+  /// Hide the player reveal overlay (no animation - used as callback from overlay)
+  static void hidePlayerReveal() {
+    _overlayStateKey.currentState?._hidePlayerReveal();
+  }
+
+  /// Dismiss the player reveal overlay with animation (for back gesture)
+  static void dismissPlayerReveal() {
+    _overlayStateKey.currentState?._dismissPlayerReveal();
+  }
+
+  /// Trigger single bounce on mini player (called when device selector collapses)
+  static void triggerBounce() {
+    _overlayStateKey.currentState?._triggerBounce();
+  }
+
+  /// Check if the player reveal is currently visible
+  static bool get isPlayerRevealVisible =>
+      _overlayStateKey.currentState?._isRevealVisible ?? false;
 }

 class _GlobalPlayerOverlayState extends State<GlobalPlayerOverlay>
-    with SingleTickerProviderStateMixin {
+    with TickerProviderStateMixin {
  late AnimationController _slideController;
  late Animation<double> _slideAnimation;

+  // Single bounce controller for device selector expand/collapse
+  late AnimationController _singleBounceController;
+
+  // Double bounce controller for hint
+  late AnimationController _doubleBounceController;
+
+  // State for player reveal overlay
+  bool _isRevealVisible = false;
+
+  // State for interactive hint mode (blur backdrop + wait for user action)
+  bool _isHintModeActive = false;
+  Timer? _hintBounceTimer;
+
+  // Track if player reveal was triggered from onboarding (for showing extra hints)
+  bool _isOnboardingReveal = false;
+
+  // Bounce offset for mini player (used by both single and double bounce)
+  final _bounceOffsetNotifier = ValueNotifier<double>(0.0);
+
+  // Hint system state
+  // NOTE: AppStartup now handles the settings loading gate. It waits for:
+  // - First-time users: connected + player selected before showing HomeScreen
+  // - Returning users: connected before showing HomeScreen
+  // This eliminates the race condition that caused home screen flash.
+  bool _showHints = true;
+  bool _hasCompletedOnboarding = false; // First-use welcome screen
+  bool _hintTriggered = false; // Prevent multiple triggers per session
+  bool _settingsLoaded = false; // True once settings have been loaded from storage
+  bool _miniPlayerHintsReady = false; // True once connected with player (can show hints)
+  final _hintOpacityNotifier = ValueNotifier<double>(0.0);
+
+  // Welcome content fade-in animation
+  late AnimationController _welcomeFadeController;
+
+  // Key for the reveal overlay
+  final _revealKey = GlobalKey<PlayerRevealOverlayState>();
+
  @override
  void initState() {
    super.initState();
@@ -129,11 +197,135 @@ class _GlobalPlayerOverlayState extends State<GlobalPlayerOverlay>
      curve: Curves.easeOutCubic,
      reverseCurve: Curves.easeInCubic,
    );
+
+    // Single bounce for device selector expand/collapse
+    _singleBounceController = AnimationController(
+      duration: const Duration(milliseconds: 400),
+      vsync: this,
+    );
+    _singleBounceController.addListener(() {
+      final t = Curves.easeOut.transform(_singleBounceController.value);
+      // Single bounce: up to 10px then back to 0
+      if (t < 0.5) {
+        _bounceOffsetNotifier.value = 10.0 * (t * 2);           // 0 -> 10
+      } else {
+        _bounceOffsetNotifier.value = 10.0 * ((1.0 - t) * 2);   // 10 -> 0
+      }
+    });
+
+    // Hint bounce - single gentle bounce to draw attention
+    _doubleBounceController = AnimationController(
+      duration: const Duration(milliseconds: 600),
+      vsync: this,
+    );
+    _doubleBounceController.addListener(() {
+      final t = Curves.easeOut.transform(_doubleBounceController.value);
+      // Single bounce: up 20px then back down
+      if (t < 0.5) {
+        _bounceOffsetNotifier.value = 20.0 * (t * 2);           // 0 -> 20
+      } else {
+        _bounceOffsetNotifier.value = 20.0 * ((1.0 - t) * 2);   // 20 -> 0
+      }
+    });
+
+    // Welcome content fade-in
+    _welcomeFadeController = AnimationController(
+      duration: const Duration(milliseconds: 800),
+      vsync: this,
+    );
+
+    // Load hint settings and start welcome immediately if needed
+    _loadHintSettings();
+  }
+
+  Future<void> _loadHintSettings() async {
+    _showHints = await SettingsService.getShowHints();
+    _hasCompletedOnboarding = await SettingsService.getHasCompletedOnboarding();
+    if (!mounted) return;
+
+    setState(() {
+      _settingsLoaded = true;
+    });
+
+    // If first-time user and already connected (AppStartup waited for us),
+    // start welcome screen immediately - no race condition possible
+    if (!_hasCompletedOnboarding && !_hintTriggered) {
+      final provider = context.read<MusicAssistantProvider>();
+      if (provider.isConnected && provider.selectedPlayer != null) {
+        _miniPlayerHintsReady = true;
+        _startWelcomeScreen();
+        _startMiniPlayerBounce();
+      }
+    }
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    // Check if we should enable mini player hints now that we have connection
+    _checkConnectionForMiniPlayerHints();
+  }
+
+  /// Check connection state and start welcome screen if appropriate.
+  /// This is called from multiple places:
+  /// 1. didChangeDependencies() - when widget first builds
+  /// 2. _loadHintSettings() - when settings finish loading
+  /// 3. build() - when provider state changes (via post-frame callback)
+  void _checkConnectionForMiniPlayerHints() {
+    if (_hintTriggered || !mounted || !_settingsLoaded) return;
+    if (_hasCompletedOnboarding) return; // Not first-time user
+
+    final provider = context.read<MusicAssistantProvider>();
+    if (provider.isConnected && provider.selectedPlayer != null) {
+      // Connected with a player - start welcome screen now
+      _miniPlayerHintsReady = true;
+      _startWelcomeScreen();
+      // Start the bounce animation now that mini player is visible
+      _startMiniPlayerBounce();
+    }
+  }
+
+  /// Start the bounce animation for mini player hints
+  void _startMiniPlayerBounce() {
+    if (!_isHintModeActive || !mounted) return;
+    _doubleBounceController.reset();
+    _doubleBounceController.forward();
+
+    // Repeat bounce every 2 seconds
+    _hintBounceTimer?.cancel();
+    _hintBounceTimer = Timer.periodic(const Duration(seconds: 2), (_) {
+      if (_isHintModeActive && mounted) {
+        _doubleBounceController.reset();
+        _doubleBounceController.forward();
+      }
+    });
+  }
+
+  /// Start the welcome screen with fade-in animation
+  void _startWelcomeScreen() {
+    if (_hintTriggered) return;
+    _hintTriggered = true;
+
+    // Activate hint mode immediately (blur backdrop visible)
+    setState(() {
+      _isHintModeActive = true;
+    });
+
+    // Fade in welcome content (logo + title)
+    _welcomeFadeController.forward();
+
+    // Mini player bounce is started separately once connected via _startMiniPlayerBounce()
  }

  @override
  void dispose() {
+    _hintBounceTimer?.cancel();
    _slideController.dispose();
+    _singleBounceController.dispose();
+    _doubleBounceController.dispose();
+    _welcomeFadeController.dispose();
+    _bounceOffsetNotifier.dispose();
+    _hintOpacityNotifier.dispose();
    super.dispose();
  }

@@ -145,12 +337,121 @@ class _GlobalPlayerOverlayState extends State<GlobalPlayerOverlay>
    }
  }

+  void _showPlayerReveal() {
+    if (_isRevealVisible) return;
+    if (GlobalPlayerOverlay.isPlayerExpanded) {
+      GlobalPlayerOverlay.collapsePlayer();
+    }
+    HapticFeedback.mediumImpact();
+
+    // Track if coming from hint mode (for onboarding hints in player selector)
+    final wasInHintMode = _isHintModeActive;
+
+    // End hint mode if active (user learned the gesture!)
+    _hintBounceTimer?.cancel();
+    _hintBounceTimer = null;
+    _hintOpacityNotifier.value = 0.0;
+    _isHintModeActive = false;
+
+    // Mark onboarding as completed if coming from welcome screen
+    if (wasInHintMode) {
+      SettingsService.setHasCompletedOnboarding(true);
+    }
+
+    // Trigger single bounce on expand
+    _singleBounceController.reset();
+    _singleBounceController.forward();
+
+    setState(() {
+      _isRevealVisible = true;
+      _isOnboardingReveal = wasInHintMode;
+    });
+  }
+
+  void _hidePlayerReveal() {
+    if (!_isRevealVisible) return;
+    _bounceOffsetNotifier.value = 0;
+    setState(() {
+      _isRevealVisible = false;
+      _isOnboardingReveal = false;
+    });
+  }
+
+  /// Dismiss with animation (for back gesture) - calls overlay's dismiss method
+  void _dismissPlayerReveal() {
+    if (!_isRevealVisible) return;
+    // Call the overlay's dismiss method which has the slide animation
+    _revealKey.currentState?.dismiss();
+  }
+
+  /// Trigger single bounce on mini player (called when device selector collapses)
+  void _triggerBounce() {
+    _singleBounceController.reset();
+    _singleBounceController.forward();
+  }
+
+  /// End hint mode (called when user taps skip button)
+  void _endHintMode() {
+    if (!_isHintModeActive) return;
+    _hintBounceTimer?.cancel();
+    _hintBounceTimer = null;
+    _hintOpacityNotifier.value = 0.0;
+    _bounceOffsetNotifier.value = 0.0;
+    // Mark onboarding as completed (first use only)
+    SettingsService.setHasCompletedOnboarding(true);
+    setState(() {
+      _isHintModeActive = false;
+    });
+  }
+
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final colorScheme = theme.colorScheme;

-    return Stack(
+    // Watch provider to trigger rebuilds when connection state changes
+    final provider = context.watch<MusicAssistantProvider>();
+
+    // Compute whether this is a first-time user ready for welcome screen.
+    // This is SYNCHRONOUS - no setState needed - so it works in the same frame.
+    final isFirstTimeUserReady = _settingsLoaded &&
+        !_hasCompletedOnboarding &&
+        provider.isConnected &&
+        provider.selectedPlayer != null;
+
+    // Show welcome backdrop if:
+    // 1. Already in hint mode (_isHintModeActive), OR
+    // 2. First-time user ready but hint mode not started yet (!_hintTriggered)
+    // This ensures backdrop appears IMMEDIATELY when HomeScreen renders,
+    // preventing the flash. Welcome content fades in after via animation.
+    final shouldShowWelcomeBackdrop = _isHintModeActive ||
+        (isFirstTimeUserReady && !_hintTriggered);
+
+    // Trigger hint mode if conditions are met (for animations, bounce, etc)
+    if (isFirstTimeUserReady && !_hintTriggered) {
+      // Schedule for post-frame to avoid setState during build
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        if (mounted && !_hintTriggered) {
+          _miniPlayerHintsReady = true;
+          _startWelcomeScreen();
+          _startMiniPlayerBounce();
+        }
+      });
+    }
+
+    // Handle back gesture at top level - dismiss hint mode or device list if visible
+    return PopScope(
+      canPop: !_isRevealVisible && !_isHintModeActive,
+      onPopInvokedWithResult: (didPop, result) {
+        if (!didPop) {
+          if (_isHintModeActive) {
+            _endHintMode();
+          } else if (_isRevealVisible) {
+            _dismissPlayerReveal();
+          }
+        }
+      },
+      child: Stack(
      children: [
        // The main app content (Navigator, screens, etc.)
        // Add bottom padding to account for bottom nav + mini player
@@ -159,14 +460,18 @@ class _GlobalPlayerOverlayState extends State<GlobalPlayerOverlay>
          child: widget.child,
        ),
        // Global persistent bottom navigation bar - positioned at bottom
-        Positioned(
-          left: 0,
-          right: 0,
-          bottom: 0,
-          child: ListenableBuilder(
-            listenable: navigationProvider,
-            builder: (context, _) {
-              return Consumer<ThemeProvider>(
+        // Hide when: not connected, no player selected, OR showing welcome screen
+        // For first-time users, selectedPlayer becomes non-null at the same time
+        // as shouldShowWelcomeBackdrop becomes true, preventing any gap.
+        if (provider.isConnected && provider.selectedPlayer != null && !shouldShowWelcomeBackdrop)
+          Positioned(
+            left: 0,
+            right: 0,
+            bottom: 0,
+            child: ListenableBuilder(
+              listenable: navigationProvider,
+              builder: (context, _) {
+                return Consumer<ThemeProvider>(
                builder: (context, themeProvider, _) {
                  // Use adaptive primary color for bottom nav when adaptive theme is enabled
                  final sourceColor = themeProvider.adaptiveTheme
@@ -206,26 +511,26 @@ class _GlobalPlayerOverlayState extends State<GlobalPlayerOverlay>
                      type: BottomNavigationBarType.fixed,
                      selectedFontSize: 12,
                      unselectedFontSize: 12,
-                      items: const [
+                      items: [
                        BottomNavigationBarItem(
-                          icon: Icon(Icons.home_outlined),
-                          activeIcon: Icon(Icons.home_rounded),
-                          label: 'Home',
+                          icon: const Icon(Icons.home_outlined),
+                          activeIcon: const Icon(Icons.home_rounded),
+                          label: S.of(context)!.home,
                        ),
                        BottomNavigationBarItem(
-                          icon: Icon(Icons.library_music_outlined),
-                          activeIcon: Icon(Icons.library_music_rounded),
-                          label: 'Library',
+                          icon: const Icon(Icons.library_music_outlined),
+                          activeIcon: const Icon(Icons.library_music_rounded),
+                          label: S.of(context)!.library,
                        ),
                        BottomNavigationBarItem(
-                          icon: Icon(Icons.search_rounded),
-                          activeIcon: Icon(Icons.search_rounded),
-                          label: 'Search',
+                          icon: const Icon(Icons.search_rounded),
+                          activeIcon: const Icon(Icons.search_rounded),
+                          label: S.of(context)!.search,
                        ),
                        BottomNavigationBarItem(
-                          icon: Icon(Icons.settings_outlined),
-                          activeIcon: Icon(Icons.settings_rounded),
-                          label: 'Settings',
+                          icon: const Icon(Icons.settings_outlined),
+                          activeIcon: const Icon(Icons.settings_rounded),
+                          label: S.of(context)!.settings,
                        ),
                      ],
                    ),
@@ -255,35 +560,180 @@ class _GlobalPlayerOverlayState extends State<GlobalPlayerOverlay>
                  );
                },
              );
-            },
+              },
+            ),
          ),
-        ),
-        // Global player overlay - slides down when hidden, renders ON TOP of bottom nav
+        // Blur backdrop for device selector (reveal mode) - static, no animation
+        if (_isRevealVisible && !_isHintModeActive)
+          Positioned.fill(
+            child: GestureDetector(
+              behavior: HitTestBehavior.opaque,
+              onTap: _dismissPlayerReveal,
+              child: BackdropFilter(
+                filter: ImageFilter.blur(sigmaX: 8.0, sigmaY: 8.0),
+                child: Container(
+                  color: colorScheme.surface.withOpacity(0.5),
+                ),
+              ),
+            ),
+          ),
+
+        // Welcome/hint backdrop - shows IMMEDIATELY when first-time user is ready.
+        // Uses computed `shouldShowWelcomeBackdrop` which is true BEFORE _isHintModeActive,
+        // preventing the 1-frame gap where home screen would be visible.
+        if (shouldShowWelcomeBackdrop)
+          Positioned.fill(
+            child: TweenAnimationBuilder<double>(
+              // Hold solid for 2s, then fade to 0.5 over 1s
+              tween: Tween<double>(begin: 1.0, end: 0.5),
+              duration: const Duration(seconds: 3),
+              curve: const Interval(0.67, 1.0, curve: Curves.easeOut),
+              builder: (context, opacity, child) {
+                return BackdropFilter(
+                  filter: ImageFilter.blur(sigmaX: 8.0, sigmaY: 8.0),
+                  child: Container(
+                    // Use same dark color as connection screen for seamless transition
+                    color: const Color(0xFF1a1a1a).withOpacity(opacity),
+                  ),
+                );
+              },
+            ),
+          ),
+
+        // Welcome message during hint mode - two positioned sections with fade-in
+        // Top section: Logo and Welcome title (stays fixed at top area)
+        if (_isHintModeActive)
+          Positioned(
+            left: 24,
+            right: 24,
+            // Position logo section high up - about 1/3 from top
+            top: MediaQuery.of(context).size.height * 0.15,
+            child: FadeTransition(
+              opacity: CurvedAnimation(
+                parent: _welcomeFadeController,
+                curve: Curves.easeOut,
+              ),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  // Ensemble logo - same as settings screen
+                  Image.asset(
+                    'assets/images/ensemble_icon_transparent.png',
+                    width: MediaQuery.of(context).size.width * 0.5,
+                    fit: BoxFit.contain,
+                  ),
+                  const SizedBox(height: 24),
+                  // Welcome title
+                  Text(
+                    S.of(context)!.welcomeToEnsemble,
+                    style: theme.textTheme.headlineSmall?.copyWith(
+                      color: Colors.white,
+                      fontWeight: FontWeight.bold,
+                    ),
+                    textAlign: TextAlign.center,
+                  ),
+                ],
+              ),
+            ),
+          ),
+
+        // Bottom section: Hint text and Skip button (only show once mini player is visible)
+        if (_isHintModeActive && _miniPlayerHintsReady)
+          Positioned(
+            left: 24,
+            right: 24,
+            // Position so skip button is ~32px above mini player, matching skip-to-miniplayer gap
+            // Use viewPadding to match BottomNavigationBar's height calculation
+            bottom: BottomSpacing.navBarHeight + BottomSpacing.miniPlayerHeight + MediaQuery.of(context).viewPadding.bottom + 32,
+            child: FadeTransition(
+              opacity: CurvedAnimation(
+                parent: _welcomeFadeController,
+                curve: Curves.easeOut,
+              ),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  // Hint text
+                  Text(
+                    S.of(context)!.welcomeMessage,
+                    style: theme.textTheme.bodyLarge?.copyWith(
+                      color: Colors.white,
+                      fontSize: 16,
+                      height: 1.4,
+                    ),
+                    textAlign: TextAlign.center,
+                  ),
+                  const SizedBox(height: 32),
+                  // Skip button - same gap above as below to mini player
+                  TextButton(
+                    onPressed: _endHintMode,
+                    child: Text(
+                      S.of(context)!.skip,
+                      style: TextStyle(
+                        color: Colors.white.withOpacity(0.7),
+                        fontSize: 14,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+
+        // Player reveal overlay - renders BELOW mini player so cards slide behind it
+        if (_isRevealVisible)
+          PlayerRevealOverlay(
+            key: _revealKey,
+            onDismiss: _hidePlayerReveal,
+            // Use viewPadding to match BottomNavigationBar's height calculation
+            miniPlayerBottom: BottomSpacing.navBarHeight + MediaQuery.of(context).viewPadding.bottom + 12,
+            miniPlayerHeight: 64,
+            showOnboardingHints: _isOnboardingReveal,
+          ),
+
+        // Global player overlay - renders ON TOP so cards slide behind it
        // Use Selector instead of Consumer to avoid rebuilds during animation
-        Selector<MusicAssistantProvider, ({bool isConnected, bool hasPlayer})>(
+        Selector<MusicAssistantProvider, ({bool isConnected, bool hasPlayer, bool hasTrack})>(
          selector: (_, provider) => (
            isConnected: provider.isConnected,
            hasPlayer: provider.selectedPlayer != null,
+            hasTrack: provider.currentTrack != null,
          ),
          builder: (context, state, child) {
            // Only show player if connected and has a selected player
            if (!state.isConnected || !state.hasPlayer) {
              return const SizedBox.shrink();
            }
-            return AnimatedBuilder(
-              animation: _slideAnimation,
-              child: ExpandablePlayer(key: globalPlayerKey, slideOffset: 0),
-              builder: (context, staticChild) {
-                // Only slideOffset changes during animation, player widget stays same
-                return ExpandablePlayer(
-                  key: globalPlayerKey,
-                  slideOffset: _slideAnimation.value,
+
+            // Combine slide, bounce, and hint animations with ValueListenableBuilders
+            // This prevents full widget tree rebuilds - only ExpandablePlayer updates
+            return ValueListenableBuilder<double>(
+              valueListenable: _bounceOffsetNotifier,
+              builder: (context, bounceOffset, _) {
+                return ValueListenableBuilder<double>(
+                  valueListenable: _hintOpacityNotifier,
+                  builder: (context, hintOpacity, _) {
+                    return AnimatedBuilder(
+                      animation: _slideAnimation,
+                      builder: (context, _) {
+                        return ExpandablePlayer(
+                          key: globalPlayerKey,
+                          slideOffset: _slideAnimation.value,
+                          bounceOffset: bounceOffset,
+                          onRevealPlayers: _showPlayerReveal,
+                          isDeviceRevealVisible: _isRevealVisible,
+                          isHintVisible: hintOpacity > 0,
+                        );
+                      },
+                    );
+                  },
                );
              },
            );
          },
        ),
      ],
+      ),
    );
  }
 }
@@ -0,0 +1,255 @@
+import 'package:flutter/material.dart';
+
+/// A scrollbar that shows a letter popup when dragging, for fast navigation
+/// through alphabetically sorted lists.
+class LetterScrollbar extends StatefulWidget {
+  /// The scrollable child widget (ListView, GridView, etc.)
+  final Widget child;
+
+  /// The scroll controller for the child
+  final ScrollController controller;
+
+  /// List of items to extract letters from (must be sorted alphabetically)
+  /// Each item's first character is used to determine the letter
+  final List<String> items;
+
+  /// Callback when user taps/drags to a specific index
+  final void Function(int index)? onScrollToIndex;
+
+  /// Callback when drag state changes (for disabling scroll-to-hide)
+  final void Function(bool isDragging)? onDragStateChanged;
+
+  const LetterScrollbar({
+    super.key,
+    required this.child,
+    required this.controller,
+    required this.items,
+    this.onScrollToIndex,
+    this.onDragStateChanged,
+  });
+
+  @override
+  State<LetterScrollbar> createState() => _LetterScrollbarState();
+}
+
+class _LetterScrollbarState extends State<LetterScrollbar> {
+  bool _isDragging = false;
+  String _currentLetter = '';
+  double _dragPosition = 0;
+  double _scrollFraction = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    widget.controller.addListener(_onScrollChanged);
+  }
+
+  @override
+  void dispose() {
+    widget.controller.removeListener(_onScrollChanged);
+    super.dispose();
+  }
+
+  void _onScrollChanged() {
+    if (!_isDragging && widget.controller.hasClients) {
+      final position = widget.controller.position;
+      if (position.maxScrollExtent > 0) {
+        final newFraction = (position.pixels / position.maxScrollExtent).clamp(0.0, 1.0);
+        // PERF: Only rebuild if fraction changed by more than 1% to reduce rebuilds
+        if ((newFraction - _scrollFraction).abs() > 0.01) {
+          setState(() {
+            _scrollFraction = newFraction;
+          });
+        }
+      }
+    }
+  }
+
+  // Build a map of letter -> first index for that letter
+  Map<String, int> get _letterIndexMap {
+    final map = <String, int>{};
+    for (int i = 0; i < widget.items.length; i++) {
+      final item = widget.items[i];
+      if (item.isNotEmpty) {
+        final letter = item[0].toUpperCase();
+        if (!map.containsKey(letter)) {
+          map[letter] = i;
+        }
+      }
+    }
+    return map;
+  }
+
+  String _getLetterAtPosition(double position, double maxHeight) {
+    if (widget.items.isEmpty || maxHeight <= 0) return '';
+
+    // Calculate which item index corresponds to this position
+    final fraction = (position / maxHeight).clamp(0.0, 1.0);
+    final index = (fraction * (widget.items.length - 1)).round();
+
+    if (index >= 0 && index < widget.items.length) {
+      final item = widget.items[index];
+      if (item.isNotEmpty) {
+        return item[0].toUpperCase();
+      }
+    }
+    return '';
+  }
+
+  void _scrollToLetter(String letter) {
+    final letterMap = _letterIndexMap;
+    if (letterMap.containsKey(letter)) {
+      final index = letterMap[letter]!;
+      if (widget.onScrollToIndex != null) {
+        widget.onScrollToIndex!(index);
+      } else {
+        // Estimate scroll position based on index
+        // This is approximate - works better with fixed height items
+        final scrollController = widget.controller;
+        if (scrollController.hasClients) {
+          final maxScroll = scrollController.position.maxScrollExtent;
+          final fraction = index / widget.items.length;
+          final targetScroll = (fraction * maxScroll).clamp(0.0, maxScroll);
+
+          // Update scroll fraction immediately for smooth thumb tracking
+          setState(() {
+            _scrollFraction = fraction;
+          });
+
+          scrollController.jumpTo(targetScroll);
+        }
+      }
+    }
+  }
+
+  void _handleDragStart(DragStartDetails details) {
+    setState(() {
+      _isDragging = true;
+      _dragPosition = details.localPosition.dy;
+    });
+    widget.onDragStateChanged?.call(true);
+    _updateLetterAndScroll(details.localPosition.dy);
+  }
+
+  void _handleDragUpdate(DragUpdateDetails details) {
+    setState(() {
+      _dragPosition = details.localPosition.dy;
+    });
+    _updateLetterAndScroll(details.localPosition.dy);
+  }
+
+  void _handleDragEnd(DragEndDetails details) {
+    setState(() {
+      _isDragging = false;
+    });
+    widget.onDragStateChanged?.call(false);
+  }
+
+  void _updateLetterAndScroll(double position) {
+    final renderBox = context.findRenderObject() as RenderBox?;
+    if (renderBox != null) {
+      final height = renderBox.size.height;
+      final letter = _getLetterAtPosition(position, height);
+      if (letter.isNotEmpty && letter != _currentLetter) {
+        setState(() {
+          _currentLetter = letter;
+        });
+        _scrollToLetter(letter);
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Stack(
+      children: [
+        // The scrollable content
+        widget.child,
+
+        // The draggable scrollbar area (right edge) - wider grab area
+        Positioned(
+          right: 0,
+          top: 0,
+          bottom: 0,
+          width: 32, // Wider grab area
+          child: GestureDetector(
+            onVerticalDragStart: _handleDragStart,
+            onVerticalDragUpdate: _handleDragUpdate,
+            onVerticalDragEnd: _handleDragEnd,
+            onTapDown: (details) {
+              _handleDragStart(DragStartDetails(
+                localPosition: details.localPosition,
+                globalPosition: details.globalPosition,
+              ));
+            },
+            onTapUp: (_) {
+              setState(() {
+                _isDragging = false;
+              });
+              widget.onDragStateChanged?.call(false);
+            },
+            behavior: HitTestBehavior.translucent,
+            child: LayoutBuilder(
+              builder: (context, constraints) {
+                final trackHeight = constraints.maxHeight;
+                final thumbHeight = _isDragging ? 60.0 : 40.0;
+                final availableTrack = trackHeight - thumbHeight;
+                final thumbTop = availableTrack * _scrollFraction;
+
+                return Stack(
+                  children: [
+                    // Thumb that tracks scroll position - use AnimatedPositioned for smooth motion
+                    AnimatedPositioned(
+                      duration: const Duration(milliseconds: 50),
+                      curve: Curves.linear,
+                      top: thumbTop,
+                      right: 4,
+                      child: AnimatedContainer(
+                        duration: const Duration(milliseconds: 100),
+                        width: _isDragging ? 6 : 4,
+                        height: thumbHeight,
+                        decoration: BoxDecoration(
+                          color: _isDragging
+                              ? colorScheme.primary
+                              : colorScheme.onSurface.withOpacity(0.3),
+                          borderRadius: BorderRadius.circular(3),
+                        ),
+                      ),
+                    ),
+                  ],
+                );
+              },
+            ),
+          ),
+        ),
+
+        // The letter popup bubble
+        if (_isDragging && _currentLetter.isNotEmpty)
+          Positioned(
+            right: 48,
+            top: _dragPosition - 28,
+            child: Material(
+              elevation: 4,
+              color: colorScheme.primaryContainer,
+              borderRadius: BorderRadius.circular(8),
+              child: Container(
+                width: 56,
+                height: 56,
+                alignment: Alignment.center,
+                child: Text(
+                  _currentLetter,
+                  style: TextStyle(
+                    color: colorScheme.onPrimaryContainer,
+                    fontSize: 28,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+              ),
+            ),
+          ),
+      ],
+    );
+  }
+}
@@ -3,6 +3,7 @@ import '../../providers/music_assistant_provider.dart';
 import '../../models/media_item.dart' show Audiobook, Chapter;
 import '../../theme/design_tokens.dart';
 import '../common/empty_state.dart';
+import '../../l10n/app_localizations.dart';

 /// Panel that displays audiobook chapters for navigation
 class ChaptersPanel extends StatelessWidget {
@@ -58,7 +59,7 @@ class ChaptersPanel extends StatelessWidget {
                ),
                const Spacer(),
                Text(
-                  'Chapters',
+                  S.of(context)!.chapters,
                  style: TextStyle(
                    color: textColor,
                    fontSize: 18,
@@ -75,7 +76,7 @@ class ChaptersPanel extends StatelessWidget {
          // Chapters list
          Expanded(
            child: chapters.isEmpty
-                ? _buildEmptyState()
+                ? _buildEmptyState(context)
                : _buildChaptersList(chapters, currentChapterIndex),
          ),
        ],
@@ -83,11 +84,12 @@ class ChaptersPanel extends StatelessWidget {
    );
  }

-  Widget _buildEmptyState() {
+  Widget _buildEmptyState(BuildContext context) {
    return EmptyState.custom(
+      context: context,
      icon: Icons.bookmark_outline_rounded,
-      title: 'No chapters',
-      subtitle: 'This audiobook has no chapter information',
+      title: S.of(context)!.noChapters,
+      subtitle: S.of(context)!.noChapterInfo,
    );
  }

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
-import '../../theme/design_tokens.dart';
+import '../../l10n/app_localizations.dart';
+import 'mini_player_content.dart';

 /// A compact device selector bar shown when no track is playing
 class DeviceSelectorBar extends StatelessWidget {
@@ -15,6 +16,7 @@ class DeviceSelectorBar extends StatelessWidget {
  final GestureDragStartCallback? onHorizontalDragStart;
  final GestureDragUpdateCallback? onHorizontalDragUpdate;
  final GestureDragEndCallback? onHorizontalDragEnd;
+  final VoidCallback? onPowerToggle;

  const DeviceSelectorBar({
    super.key,
@@ -30,10 +32,13 @@ class DeviceSelectorBar extends StatelessWidget {
    this.onHorizontalDragStart,
    this.onHorizontalDragUpdate,
    this.onHorizontalDragEnd,
+    this.onPowerToggle,
  });

  @override
  Widget build(BuildContext context) {
+    final swipeHint = hasMultiplePlayers ? S.of(context)!.swipeToSwitchDevice : null;
+
    return GestureDetector(
      onHorizontalDragStart: hasMultiplePlayers ? onHorizontalDragStart : null,
      onHorizontalDragUpdate: hasMultiplePlayers ? onHorizontalDragUpdate : null,
@@ -52,50 +57,21 @@ class DeviceSelectorBar extends StatelessWidget {
              children: [
                // Peek player content (shows when dragging)
                if (slideOffset.abs() > 0.01 && peekPlayer != null)
-                  _buildPeekContent(),
+                  _buildPeekContent(context, swipeHint),

                // Current player content
-                Transform.translate(
-                  offset: Offset(slideOffset * width, 0),
-                  child: Padding(
-                    padding: Spacing.paddingH16,
-                    child: Row(
-                      children: [
-                        Icon(
-                          _getPlayerIcon(selectedPlayer.name),
-                          color: textColor,
-                          size: IconSizes.md,
-                        ),
-                        Spacing.hGap12,
-                        Expanded(
-                          child: Column(
-                            mainAxisAlignment: MainAxisAlignment.center,
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              Text(
-                                selectedPlayer.name,
-                                style: TextStyle(
-                                  color: textColor,
-                                  fontSize: 16,
-                                  fontWeight: FontWeight.w500,
-                                ),
-                                maxLines: 1,
-                                overflow: TextOverflow.ellipsis,
-                              ),
-                              if (hasMultiplePlayers)
-                                Text(
-                                  'Swipe to switch device',
-                                  style: TextStyle(
-                                    color: textColor.withOpacity(0.6),
-                                    fontSize: 12,
-                                  ),
-                                ),
-                            ],
-                          ),
-                        ),
-                      ],
-                    ),
-                  ),
+                MiniPlayerContent(
+                  primaryText: selectedPlayer.name,
+                  secondaryText: swipeHint,
+                  imageUrl: null,
+                  playerName: selectedPlayer.name,
+                  backgroundColor: backgroundColor,
+                  textColor: textColor,
+                  width: width,
+                  slideOffset: slideOffset,
+                  isHint: swipeHint != null,
+                  onPowerToggle: onPowerToggle,
+                  isPoweredOn: selectedPlayer.powered,
                ),
              ],
            ),
@@ -106,7 +82,7 @@ class DeviceSelectorBar extends StatelessWidget {
  }

  /// Build peek player content that slides in from the edge
-  Widget _buildPeekContent() {
+  Widget _buildPeekContent(BuildContext context, String? swipeHint) {
    final isFromRight = slideOffset < 0;
    final peekProgress = slideOffset.abs();

@@ -117,61 +93,17 @@ class DeviceSelectorBar extends StatelessWidget {

    return Transform.translate(
      offset: Offset(peekBaseOffset, 0),
-      child: Padding(
-        padding: Spacing.paddingH16,
-        child: Row(
-          children: [
-            Icon(
-              _getPlayerIcon(peekPlayer.name),
-              color: textColor,
-              size: IconSizes.md,
-            ),
-            Spacing.hGap12,
-            Expanded(
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Text(
-                    peekPlayer.name,
-                    style: TextStyle(
-                      color: textColor,
-                      fontSize: 16,
-                      fontWeight: FontWeight.w500,
-                    ),
-                    maxLines: 1,
-                    overflow: TextOverflow.ellipsis,
-                  ),
-                  if (hasMultiplePlayers)
-                    Text(
-                      'Swipe to switch device',
-                      style: TextStyle(
-                        color: textColor.withOpacity(0.6),
-                        fontSize: 12,
-                      ),
-                    ),
-                ],
-              ),
-            ),
-          ],
-        ),
+      child: MiniPlayerContent(
+        primaryText: peekPlayer.name,
+        secondaryText: swipeHint,
+        imageUrl: null,
+        playerName: peekPlayer.name,
+        backgroundColor: backgroundColor,
+        textColor: textColor,
+        width: width,
+        slideOffset: 0, // No additional slide - Transform handles positioning
+        isHint: swipeHint != null,
      ),
    );
  }
-
-  /// Get appropriate icon for player based on name
-  IconData _getPlayerIcon(String playerName) {
-    final nameLower = playerName.toLowerCase();
-    if (nameLower.contains('phone') || nameLower.contains('ensemble')) {
-      return Icons.phone_android_rounded;
-    } else if (nameLower.contains('group')) {
-      return Icons.speaker_group_rounded;
-    } else if (nameLower.contains('tv') || nameLower.contains('television')) {
-      return Icons.tv_rounded;
-    } else if (nameLower.contains('cast') || nameLower.contains('chromecast')) {
-      return Icons.cast_rounded;
-    } else {
-      return Icons.speaker_rounded;
-    }
-  }
 }
@@ -0,0 +1,290 @@
+import 'package:flutter/material.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+
+/// Shared constants for mini player layout
+class MiniPlayerLayout {
+  static const double height = 72.0;
+  static const double artSize = 72.0;
+  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 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
+  static const double primaryTop2Line = 14.0; // 24 - (18/2) = 15, adjusted to 14
+  static const double secondaryTop2Line = 40.0; // raised slightly from 42
+  static const double textRightPadding = 12.0;
+  static const double powerButtonSize = 40.0; // Power button tap area
+  static const double iconSize = 28.0;
+  static const double iconOpacity = 0.4;
+  static const double secondaryTextOpacity = 0.6;
+  static const double primaryFontSize = 16.0; // 3-line playing mode
+  static const double primaryFontSize2Line = 18.0; // larger for 2-line off mode
+  static const double secondaryFontSize = 14.0;
+  static const double tertiaryFontSize = 14.0;
+  static const FontWeight primaryFontWeight = FontWeight.w500;
+}
+
+/// Unified mini player content widget used by:
+/// - DeviceSelectorBar (non-playing state)
+/// - ExpandablePlayer collapsed state (playing state)
+/// - Peek content during swipe gestures
+class MiniPlayerContent extends StatelessWidget {
+  /// Primary text line (track name or device name)
+  final String primaryText;
+
+  /// Secondary text line (artist name or "Swipe to switch device")
+  /// If null, primary text will be vertically centered
+  final String? secondaryText;
+
+  /// Tertiary text line (player name when playing)
+  /// If provided, uses 3-line layout; if null, uses centered 2-line layout
+  final String? tertiaryText;
+
+  /// Album art URL - if null, shows device icon
+  final String? imageUrl;
+
+  /// Player name for icon selection when no image
+  final String playerName;
+
+  /// Background color for the content area
+  final Color backgroundColor;
+
+  /// Text color
+  final Color textColor;
+
+  /// Width of the content area
+  final double width;
+
+  /// Horizontal slide offset for swipe animation (-1 to 1)
+  final double slideOffset;
+
+  /// Whether secondary text is a hint (shows lightbulb icon)
+  final bool isHint;
+
+  /// Whether to show the progress bar overlay (for playing state)
+  final bool showProgress;
+
+  /// Progress value 0.0 to 1.0 (only used if showProgress is true)
+  final double progress;
+
+  /// Callback for power button tap (only shown in 2-line mode when provided)
+  final VoidCallback? onPowerToggle;
+
+  /// Whether the player is currently powered on
+  final bool isPoweredOn;
+
+  const MiniPlayerContent({
+    super.key,
+    required this.primaryText,
+    this.secondaryText,
+    this.tertiaryText,
+    this.imageUrl,
+    required this.playerName,
+    required this.backgroundColor,
+    required this.textColor,
+    required this.width,
+    this.slideOffset = 0.0,
+    this.isHint = false,
+    this.showProgress = false,
+    this.progress = 0.0,
+    this.onPowerToggle,
+    this.isPoweredOn = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final hasSecondaryLine = secondaryText != null && secondaryText!.isNotEmpty;
+    final hasTertiaryLine = tertiaryText != null && tertiaryText!.isNotEmpty;
+    final is2LineMode = !hasTertiaryLine;
+    final showPowerButton = is2LineMode && onPowerToggle != null;
+    final slidePixels = slideOffset * width;
+
+    // Use 3-line layout when tertiary exists, 2-line centered otherwise
+    final primaryTop = hasTertiaryLine ? MiniPlayerLayout.primaryTop : MiniPlayerLayout.primaryTop2Line;
+    final secondaryTop = hasTertiaryLine ? MiniPlayerLayout.secondaryTop : MiniPlayerLayout.secondaryTop2Line;
+
+    // Calculate right padding (extra space for power button in 2-line mode)
+    final rightPadding = showPowerButton
+        ? MiniPlayerLayout.powerButtonSize + 8.0
+        : MiniPlayerLayout.textRightPadding;
+
+    // Darkened background for icon area (matches DeviceSelectorBar)
+    final iconAreaBackground = Color.lerp(backgroundColor, Colors.black, 0.15)!;
+
+    // Font size for primary text (larger in 2-line mode)
+    final primaryFontSize = is2LineMode
+        ? MiniPlayerLayout.primaryFontSize2Line
+        : MiniPlayerLayout.primaryFontSize;
+
+    return SizedBox(
+      width: width,
+      height: MiniPlayerLayout.height,
+      child: Stack(
+        clipBehavior: Clip.hardEdge,
+        children: [
+          // Progress bar background (only for playing state)
+          if (showProgress && progress > 0)
+            Positioned(
+              left: MiniPlayerLayout.artSize + slidePixels,
+              top: 0,
+              bottom: 0,
+              width: (width - MiniPlayerLayout.artSize) * progress,
+              child: Container(color: backgroundColor),
+            ),
+
+          // Art / Icon area - centered vertically
+          Positioned(
+            left: slidePixels,
+            top: (MiniPlayerLayout.height - MiniPlayerLayout.artSize) / 2,
+            child: SizedBox(
+              width: MiniPlayerLayout.artSize,
+              height: MiniPlayerLayout.artSize,
+              child: imageUrl != null
+                  ? CachedNetworkImage(
+                      imageUrl: imageUrl!,
+                      fit: BoxFit.cover,
+                      memCacheWidth: 256,
+                      memCacheHeight: 256,
+                      fadeInDuration: Duration.zero,
+                      fadeOutDuration: Duration.zero,
+                      placeholder: (_, __) => _buildIconArea(iconAreaBackground),
+                      errorWidget: (_, __, ___) => _buildIconArea(iconAreaBackground),
+                    )
+                  : _buildIconArea(iconAreaBackground),
+            ),
+          ),
+
+          // Primary text line
+          Positioned(
+            left: MiniPlayerLayout.textLeft + slidePixels,
+            top: hasSecondaryLine
+                ? primaryTop
+                : (MiniPlayerLayout.height - primaryFontSize) / 2,
+            right: rightPadding - slidePixels,
+            child: Text(
+              primaryText,
+              style: TextStyle(
+                color: textColor,
+                fontSize: primaryFontSize,
+                fontWeight: MiniPlayerLayout.primaryFontWeight,
+              ),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+
+          // Secondary text line (with optional hint icon)
+          if (hasSecondaryLine)
+            Positioned(
+              left: MiniPlayerLayout.textLeft + slidePixels,
+              top: secondaryTop,
+              right: rightPadding - slidePixels,
+              child: isHint
+                  ? Row(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        Icon(
+                          Icons.lightbulb_outline,
+                          size: 14,
+                          color: textColor.withOpacity(MiniPlayerLayout.secondaryTextOpacity),
+                        ),
+                        const SizedBox(width: 4),
+                        Flexible(
+                          child: Text(
+                            secondaryText!,
+                            style: TextStyle(
+                              color: textColor.withOpacity(MiniPlayerLayout.secondaryTextOpacity),
+                              fontSize: MiniPlayerLayout.secondaryFontSize,
+                            ),
+                            maxLines: 1,
+                            overflow: TextOverflow.ellipsis,
+                          ),
+                        ),
+                      ],
+                    )
+                  : Text(
+                      secondaryText!,
+                      style: TextStyle(
+                        color: textColor.withOpacity(MiniPlayerLayout.secondaryTextOpacity),
+                        fontSize: MiniPlayerLayout.secondaryFontSize,
+                      ),
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                    ),
+            ),
+
+          // Tertiary text line (player name, only for 3-line layout)
+          if (hasTertiaryLine)
+            Positioned(
+              left: MiniPlayerLayout.textLeft + slidePixels,
+              top: MiniPlayerLayout.tertiaryTop,
+              right: MiniPlayerLayout.textRightPadding - slidePixels,
+              child: Text(
+                tertiaryText!,
+                style: TextStyle(
+                  color: textColor,
+                  fontSize: MiniPlayerLayout.tertiaryFontSize,
+                ),
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+              ),
+            ),
+
+          // Power button (only for 2-line mode when callback provided)
+          // Matches PlayerCard power button style
+          if (showPowerButton)
+            Positioned(
+              right: 8.0 - slidePixels,
+              top: 0,
+              bottom: 0,
+              child: Center(
+                child: IconButton(
+                  onPressed: onPowerToggle,
+                  icon: Icon(
+                    Icons.power_settings_new_rounded,
+                    color: isPoweredOn ? textColor : textColor.withOpacity(0.5),
+                    size: 20,
+                  ),
+                  padding: EdgeInsets.zero,
+                  constraints: const BoxConstraints(),
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+
+  /// Build the icon area with device-appropriate icon
+  Widget _buildIconArea(Color background) {
+    return Container(
+      color: background,
+      child: Center(
+        child: Icon(
+          _getPlayerIcon(playerName),
+          color: textColor.withOpacity(MiniPlayerLayout.iconOpacity),
+          size: MiniPlayerLayout.iconSize,
+        ),
+      ),
+    );
+  }
+
+  /// Get appropriate icon based on player name
+  static IconData _getPlayerIcon(String playerName) {
+    final nameLower = playerName.toLowerCase();
+    if (nameLower.contains('phone') || nameLower.contains('ensemble') || nameLower.contains('mobile')) {
+      return Icons.phone_android_rounded;
+    } else if (nameLower.contains('group') || nameLower.contains('sync') || nameLower.contains('all')) {
+      return Icons.speaker_group_rounded;
+    } else if (nameLower.contains('tv') || nameLower.contains('television')) {
+      return Icons.tv_rounded;
+    } else if (nameLower.contains('cast') || nameLower.contains('chromecast')) {
+      return Icons.cast_rounded;
+    } else {
+      return Icons.speaker_rounded;
+    }
+  }
+}
@@ -0,0 +1,378 @@
+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';
+
+/// 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.
+/// Supports horizontal swipe to adjust volume with a two-tone overlay.
+class PlayerCard extends StatefulWidget {
+  final dynamic player;
+  final dynamic trackInfo;
+  final String? albumArtUrl;
+  final bool isSelected;
+  final bool isPlaying;
+  final bool isGrouped;
+  final Color backgroundColor;
+  final Color textColor;
+  final VoidCallback onTap;
+  final VoidCallback? onLongPress;
+  final VoidCallback? onPlayPause;
+  final VoidCallback? onSkipNext;
+  final VoidCallback? onPower;
+  final ValueChanged<double>? onVolumeChange;
+
+  // Pastel yellow for grouped players
+  static const Color groupBorderColor = Color(0xFFFFF59D);
+
+  const PlayerCard({
+    super.key,
+    required this.player,
+    this.trackInfo,
+    this.albumArtUrl,
+    required this.isSelected,
+    required this.isPlaying,
+    this.isGrouped = false,
+    required this.backgroundColor,
+    required this.textColor,
+    required this.onTap,
+    this.onLongPress,
+    this.onPlayPause,
+    this.onSkipNext,
+    this.onPower,
+    this.onVolumeChange,
+  });
+
+  @override
+  State<PlayerCard> createState() => _PlayerCardState();
+}
+
+class _PlayerCardState extends State<PlayerCard> {
+  bool _isDraggingVolume = false;
+  double _dragVolumeLevel = 0.0;
+  double _cardWidth = 0.0;
+  int _lastVolumeUpdateTime = 0;
+  static const int _volumeThrottleMs = 150; // Only send volume updates every 150ms
+
+  @override
+  Widget build(BuildContext context) {
+    // Match mini player dimensions
+    const double cardHeight = Dimensions.miniPlayerHeight;
+    const double artSize = cardHeight;
+    const double borderRadius = Radii.xl; // 16px - same as mini player
+
+    // Colors for volume overlay (same as mini player progress bar)
+    final filledColor = widget.backgroundColor;
+    final unfilledColor = Color.lerp(widget.backgroundColor, Colors.black, 0.3)!;
+
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        _cardWidth = constraints.maxWidth;
+
+        return GestureDetector(
+          onTap: _isDraggingVolume ? null : widget.onTap,
+          onLongPress: _isDraggingVolume ? null : widget.onLongPress,
+          onHorizontalDragStart: _onDragStart,
+          onHorizontalDragUpdate: _onDragUpdate,
+          onHorizontalDragEnd: _onDragEnd,
+          onHorizontalDragCancel: _onDragCancel,
+          // Use Stack to render border ON TOP of content, preventing album art clipping
+          child: Stack(
+            children: [
+              // Main card content (hidden when dragging volume)
+              if (!_isDraggingVolume)
+                _buildCardContent(cardHeight, artSize, borderRadius),
+
+              // Volume overlay (shown when dragging)
+              if (_isDraggingVolume)
+                Container(
+                  height: cardHeight,
+                  decoration: BoxDecoration(
+                    color: unfilledColor,
+                    borderRadius: BorderRadius.circular(borderRadius),
+                    boxShadow: [
+                      BoxShadow(
+                        color: Colors.black.withOpacity(0.2),
+                        blurRadius: 8,
+                        offset: const Offset(0, 2),
+                      ),
+                    ],
+                  ),
+                  clipBehavior: Clip.antiAlias,
+                  child: Align(
+                    alignment: Alignment.centerLeft,
+                    child: FractionallySizedBox(
+                      widthFactor: _dragVolumeLevel.clamp(0.0, 1.0),
+                      heightFactor: 1.0,
+                      child: Container(
+                        decoration: BoxDecoration(
+                          color: filledColor,
+                          borderRadius: BorderRadius.only(
+                            topLeft: Radius.circular(borderRadius),
+                            bottomLeft: Radius.circular(borderRadius),
+                          ),
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+
+              // Border overlay - renders ON TOP to prevent clipping by album art
+              if (widget.isGrouped)
+                Positioned.fill(
+                  child: Container(
+                    decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(borderRadius),
+                      border: Border.all(color: PlayerCard.groupBorderColor, width: 1.5),
+                    ),
+                  ),
+                ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+
+  Widget _buildCardContent(double cardHeight, double artSize, double borderRadius) {
+    return Container(
+      height: cardHeight,
+      decoration: BoxDecoration(
+        color: widget.backgroundColor,
+        borderRadius: BorderRadius.circular(borderRadius),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withOpacity(0.2),
+            blurRadius: 8,
+            offset: const Offset(0, 2),
+          ),
+        ],
+      ),
+      clipBehavior: Clip.antiAlias,
+      child: Row(
+        children: [
+          // Album art or speaker icon - same size for consistent text alignment
+          SizedBox(
+            width: artSize,
+            height: artSize,
+            child: widget.albumArtUrl != null
+                ? CachedNetworkImage(
+                    imageUrl: widget.albumArtUrl!,
+                    fit: BoxFit.cover,
+                    memCacheWidth: 128,
+                    memCacheHeight: 128,
+                    fadeInDuration: Duration.zero,
+                    fadeOutDuration: Duration.zero,
+                    placeholder: (_, __) => _buildSpeakerIcon(),
+                    errorWidget: (_, __, ___) => _buildSpeakerIcon(),
+                  )
+                : _buildSpeakerIcon(),
+          ),
+
+          // Player info
+          Expanded(
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 12),
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  // Player name
+                  Row(
+                    children: [
+                      // Status indicator
+                      Container(
+                        width: 8,
+                        height: 8,
+                        margin: const EdgeInsets.only(right: 8),
+                        decoration: BoxDecoration(
+                          shape: BoxShape.circle,
+                          color: _getStatusColor(),
+                        ),
+                      ),
+                      Expanded(
+                        child: Text(
+                          widget.player.name,
+                          style: TextStyle(
+                            color: widget.textColor,
+                            fontSize: 16,
+                            fontWeight: FontWeight.w500,
+                            fontFamily: 'Roboto',
+                            decoration: TextDecoration.none,
+                          ),
+                          maxLines: 1,
+                          overflow: TextOverflow.ellipsis,
+                        ),
+                      ),
+                    ],
+                  ),
+                  const SizedBox(height: 2),
+                  // Track name or status
+                  Text(
+                    _getSubtitle(context),
+                    style: TextStyle(
+                      color: widget.textColor.withOpacity(0.6),
+                      fontSize: 14,
+                      fontFamily: 'Roboto',
+                      decoration: TextDecoration.none,
+                    ),
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                ],
+              ),
+            ),
+          ),
+
+          // Transport controls - compact sizing to align with mini player
+          // Play/Pause and Next only shown when powered with content
+          if (widget.player.available && widget.player.powered && widget.trackInfo != null) ...[
+            // Play/Pause - slight nudge right
+            // Touch target increased to 44dp for accessibility (icon remains 28)
+            Transform.translate(
+              offset: const Offset(3, 0),
+              child: SizedBox(
+                width: 44,
+                height: 44,
+                child: IconButton(
+                  icon: Icon(
+                    widget.isPlaying ? Icons.pause_rounded : Icons.play_arrow_rounded,
+                    color: widget.textColor,
+                    size: 28,
+                  ),
+                  onPressed: widget.onPlayPause,
+                  padding: EdgeInsets.zero,
+                ),
+              ),
+            ),
+            // Skip next - nudged right to close gap with power
+            Transform.translate(
+              offset: const Offset(6, 0),
+              child: IconButton(
+                icon: Icon(
+                  Icons.skip_next_rounded,
+                  color: widget.textColor,
+                  size: 28,
+                ),
+                onPressed: widget.onSkipNext,
+                padding: EdgeInsets.zero,
+                constraints: const BoxConstraints(),
+              ),
+            ),
+          ],
+          // Power button - smallest
+          if (widget.player.available)
+            IconButton(
+              icon: Icon(
+                Icons.power_settings_new_rounded,
+                color: widget.player.powered ? widget.textColor : widget.textColor.withOpacity(0.5),
+                size: 20,
+              ),
+              onPressed: widget.onPower,
+              padding: EdgeInsets.zero,
+              constraints: const BoxConstraints(),
+            ),
+
+          const SizedBox(width: 4),
+        ],
+      ),
+    );
+  }
+
+  void _onDragStart(DragStartDetails details) {
+    // Get current volume from player
+    final currentVolume = (widget.player.volumeLevel ?? 0).toDouble() / 100.0;
+    setState(() {
+      _isDraggingVolume = true;
+      _dragVolumeLevel = currentVolume;
+    });
+    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;
+
+    final newVolume = (_dragVolumeLevel + volumeDelta).clamp(0.0, 1.0);
+
+    // Always update visual
+    if ((newVolume - _dragVolumeLevel).abs() > 0.001) {
+      setState(() {
+        _dragVolumeLevel = newVolume;
+      });
+
+      // Throttle API calls to prevent flooding
+      final now = DateTime.now().millisecondsSinceEpoch;
+      if (now - _lastVolumeUpdateTime >= _volumeThrottleMs) {
+        _lastVolumeUpdateTime = now;
+        widget.onVolumeChange?.call(newVolume);
+      }
+    }
+  }
+
+  void _onDragEnd(DragEndDetails details) {
+    // Send final volume on release
+    widget.onVolumeChange?.call(_dragVolumeLevel);
+    setState(() {
+      _isDraggingVolume = false;
+    });
+    HapticFeedback.lightImpact();
+  }
+
+  void _onDragCancel() {
+    setState(() {
+      _isDraggingVolume = false;
+    });
+  }
+
+  Widget _buildSpeakerIcon() {
+    // Darker shade of the card background to match album art square
+    final iconBgColor = Color.lerp(widget.backgroundColor, Colors.black, 0.15)!;
+    return Container(
+      color: iconBgColor,
+      child: Center(
+        child: Icon(
+          Icons.speaker_rounded,
+          color: widget.textColor.withOpacity(0.4),
+          size: 28,
+        ),
+      ),
+    );
+  }
+
+  Color _getStatusColor() {
+    if (!widget.player.available) {
+      return Colors.grey.withOpacity(0.5);
+    }
+    if (!widget.player.powered) {
+      return Colors.grey;
+    }
+    if (widget.isPlaying) {
+      return Colors.green;
+    }
+    if (widget.trackInfo != null) {
+      return Colors.orange; // Has content but paused
+    }
+    return Colors.grey.shade400; // Idle
+  }
+
+  String _getSubtitle(BuildContext context) {
+    if (!widget.player.available) {
+      return S.of(context)!.playerStateUnavailable;
+    }
+    if (!widget.player.powered) {
+      return S.of(context)!.playerStateOff;
+    }
+    if (widget.trackInfo != null) {
+      return widget.trackInfo.name ?? S.of(context)!.playerStateIdle;
+    }
+    return S.of(context)!.playerStateIdle;
+  }
+}
@@ -55,24 +55,29 @@ class PlayerControls extends StatelessWidget {
      mainAxisAlignment: isExpanded ? MainAxisAlignment.center : MainAxisAlignment.end,
      children: [
        // Shuffle (expanded only)
-        if (isExpanded)
-          Opacity(
-            opacity: expandedElementsOpacity,
-            child: _buildSecondaryButton(
-              icon: Icons.shuffle_rounded,
-              color: shuffle == true ? primaryColor : textColor.withOpacity(0.5),
-              onPressed: isLoadingQueue ? null : onToggleShuffle,
-            ),
+        // GPU PERF: Use color alpha instead of Opacity to avoid saveLayer
+        if (isExpanded && expandedElementsOpacity > 0.1)
+          _buildSecondaryButton(
+            icon: Icons.shuffle_rounded,
+            // Fix: compute final opacity once to avoid multiplicative opacity bug
+            color: shuffle == true
+                ? primaryColor.withOpacity(expandedElementsOpacity)
+                : textColor.withOpacity(0.5 * expandedElementsOpacity),
+            onPressed: isLoadingQueue ? null : onToggleShuffle,
          ),
        if (isExpanded) SizedBox(width: _lerpDouble(0, 20, t)),

        // Previous
-        _buildControlButton(
-          icon: Icons.skip_previous_rounded,
-          color: textColor,
-          size: skipButtonSize,
-          onPressed: onPrevious,
-          useAnimation: isExpanded,
+        Semantics(
+          button: true,
+          label: 'Previous track',
+          child: _buildControlButton(
+            icon: Icons.skip_previous_rounded,
+            color: textColor,
+            size: skipButtonSize,
+            onPressed: onPrevious,
+            useAnimation: isExpanded,
+          ),
        ),
        SizedBox(width: _lerpDouble(0, 20, t)),

@@ -81,26 +86,29 @@ class PlayerControls extends StatelessWidget {
        SizedBox(width: _lerpDouble(0, 20, t)),

        // Next
-        _buildControlButton(
-          icon: Icons.skip_next_rounded,
-          color: textColor,
-          size: skipButtonSize,
-          onPressed: onNext,
-          useAnimation: isExpanded,
+        Semantics(
+          button: true,
+          label: 'Next track',
+          child: _buildControlButton(
+            icon: Icons.skip_next_rounded,
+            color: textColor,
+            size: skipButtonSize,
+            onPressed: onNext,
+            useAnimation: isExpanded,
+          ),
        ),

        // Repeat (expanded only)
+        // GPU PERF: Use color alpha instead of Opacity to avoid saveLayer
        if (isExpanded) SizedBox(width: _lerpDouble(0, 20, t)),
-        if (isExpanded)
-          Opacity(
-            opacity: expandedElementsOpacity,
-            child: _buildSecondaryButton(
-              icon: repeatMode == 'one' ? Icons.repeat_one_rounded : Icons.repeat_rounded,
-              color: repeatMode != null && repeatMode != 'off'
-                  ? primaryColor
-                  : textColor.withOpacity(0.5),
-              onPressed: isLoadingQueue ? null : onCycleRepeat,
-            ),
+        if (isExpanded && expandedElementsOpacity > 0.1)
+          _buildSecondaryButton(
+            icon: repeatMode == 'one' ? Icons.repeat_one_rounded : Icons.repeat_rounded,
+            // Fix: compute final opacity once to avoid multiplicative opacity bug
+            color: (repeatMode != null && repeatMode != 'off')
+                ? primaryColor.withOpacity(expandedElementsOpacity)
+                : textColor.withOpacity(0.5 * expandedElementsOpacity),
+            onPressed: isLoadingQueue ? null : onCycleRepeat,
          ),
      ],
    );
@@ -153,21 +161,26 @@ class PlayerControls extends StatelessWidget {
    final bgColor = Color.lerp(Colors.transparent, primaryColor, progress);
    final iconColor = Color.lerp(textColor, backgroundColor, progress);

-    return GestureDetector(
-      onLongPress: onStop,
-      child: Container(
-        width: playButtonContainerSize,
-        height: playButtonContainerSize,
-        decoration: BoxDecoration(
-          color: bgColor,
-          shape: BoxShape.circle,
-        ),
-        child: IconButton(
-          icon: Icon(isPlaying ? Icons.pause_rounded : Icons.play_arrow_rounded),
-          color: iconColor,
-          iconSize: playButtonSize,
-          onPressed: onPlayPause,
-          padding: EdgeInsets.zero,
+    return Semantics(
+      button: true,
+      label: isPlaying ? 'Pause' : 'Play',
+      hint: 'Long press to stop',
+      child: GestureDetector(
+        onLongPress: onStop,
+        child: Container(
+          width: playButtonContainerSize,
+          height: playButtonContainerSize,
+          decoration: BoxDecoration(
+            color: bgColor,
+            shape: BoxShape.circle,
+          ),
+          child: IconButton(
+            icon: Icon(isPlaying ? Icons.pause_rounded : Icons.play_arrow_rounded),
+            color: iconColor,
+            iconSize: playButtonSize,
+            onPressed: onPlayPause,
+            padding: EdgeInsets.zero,
+          ),
        ),
      ),
    );
@@ -0,0 +1,510 @@
+import 'dart:async';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:provider/provider.dart';
+import '../../l10n/app_localizations.dart';
+import '../../providers/music_assistant_provider.dart';
+import '../../services/settings_service.dart';
+import '../../theme/design_tokens.dart';
+import '../../theme/theme_provider.dart';
+import '../../theme/palette_helper.dart';
+import '../../constants/timings.dart';
+import '../global_player_overlay.dart';
+import 'player_card.dart';
+
+/// Overlay that reveals all available players with a staggered slide-up animation.
+/// Triggered by swiping down on the mini player or tapping the device button.
+class PlayerRevealOverlay extends StatefulWidget {
+  final VoidCallback onDismiss;
+  final double miniPlayerBottom; // Bottom position of mini player
+  final double miniPlayerHeight;
+  final bool showOnboardingHints; // Show additional hints for first-time users
+
+  const PlayerRevealOverlay({
+    super.key,
+    required this.onDismiss,
+    required this.miniPlayerBottom,
+    required this.miniPlayerHeight,
+    this.showOnboardingHints = false,
+  });
+
+  @override
+  State<PlayerRevealOverlay> createState() => PlayerRevealOverlayState();
+}
+
+class PlayerRevealOverlayState extends State<PlayerRevealOverlay>
+    with TickerProviderStateMixin {
+  late AnimationController _revealController;
+  late Animation<double> _revealAnimation;
+  late Animation<double> _backdropAnimation;
+
+  Timer? _refreshTimer;
+
+  // Track vertical drag for dismissal
+  double _dragOffset = 0;
+  bool _isDragging = false;
+
+  // Scroll controller for when player list overflows
+  final ScrollController _scrollController = ScrollController();
+  bool _isScrollable = false;
+
+  // Cache extracted colors per player for per-device accent colors
+  final Map<String, ColorScheme?> _playerColors = {};
+
+  // Hint system
+  bool _showHints = true;
+
+  @override
+  void initState() {
+    super.initState();
+
+    // Load hint settings
+    SettingsService.getShowHints().then((value) {
+      if (mounted) setState(() => _showHints = value);
+    });
+
+    _revealController = AnimationController(
+      vsync: this,
+    );
+
+    // Quick smooth animation with subtle overshoot
+    _revealAnimation = CurvedAnimation(
+      parent: _revealController,
+      curve: Curves.easeOutCubic,
+      reverseCurve: Curves.easeInCubic,
+    );
+
+    _backdropAnimation = CurvedAnimation(
+      parent: _revealController,
+      curve: const Interval(0.0, 0.4, curve: Curves.easeOut),
+    );
+
+    // Preload all player track info and extract colors
+    _preloadColorsForPlayers();
+
+    // Start reveal animation
+    _revealController.duration = const Duration(milliseconds: 200);
+    _revealController.forward();
+
+    // Auto-refresh player data
+    _refreshTimer = Timer.periodic(Timings.playerPollingInterval, (_) {
+      if (mounted) {
+        final provider = context.read<MusicAssistantProvider>();
+        provider.refreshPlayers();
+        provider.preloadAllPlayerTracks().then((_) => _preloadColorsForPlayers());
+      }
+    });
+  }
+
+  /// Extract accent colors from album art for each player
+  Future<void> _preloadColorsForPlayers() async {
+    final maProvider = context.read<MusicAssistantProvider>();
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+
+    await maProvider.preloadAllPlayerTracks();
+
+    final players = maProvider.availablePlayers;
+    for (final player in players) {
+      if (_playerColors.containsKey(player.playerId)) continue;
+
+      final track = maProvider.getCachedTrackForPlayer(player.playerId);
+      if (track == null) continue;
+
+      final imageUrl = maProvider.getImageUrl(track, size: 128);
+      if (imageUrl == null) continue;
+
+      try {
+        final imageProvider = NetworkImage(imageUrl);
+        final schemes = await PaletteHelper.extractColorSchemes(imageProvider);
+        if (mounted && schemes != null) {
+          final colorScheme = isDark ? schemes.$2 : schemes.$1;
+          setState(() {
+            _playerColors[player.playerId] = colorScheme;
+          });
+        }
+      } catch (_) {
+        // Ignore color extraction errors
+      }
+    }
+  }
+
+  @override
+  void dispose() {
+    _revealController.dispose();
+    _refreshTimer?.cancel();
+    _scrollController.dispose();
+    super.dispose();
+  }
+
+  /// Animate reveal (called from parent)
+  void reveal() {
+    _revealController.duration = const Duration(milliseconds: 200);
+    _revealController.forward();
+  }
+
+  /// Animate dismissal and call callback when done
+  void dismiss() {
+    // Trigger single bounce on mini player when cards are ~70% collapsed
+    // This creates the effect of cards "landing" on the mini player
+    bool bounceFired = false;
+    void checkBounce() {
+      if (!bounceFired && _revealController.value < 0.3) {
+        bounceFired = true;
+        GlobalPlayerOverlay.triggerBounce();
+      }
+    }
+
+    _revealController.duration = const Duration(milliseconds: 150);
+    _revealController.addListener(checkBounce);
+    _revealController.reverse().then((_) {
+      _revealController.removeListener(checkBounce);
+      widget.onDismiss();
+    });
+  }
+
+  /// Check if scroll is at top (or not scrollable)
+  bool get _isAtTop {
+    if (!_isScrollable) return true;
+    if (!_scrollController.hasClients) return true;
+    return _scrollController.offset <= 0;
+  }
+
+  void _handleVerticalDragUpdate(DragUpdateDetails details) {
+    final delta = details.primaryDelta ?? 0;
+
+    // If scrollable and not at top, let scroll handle it
+    if (_isScrollable && !_isAtTop) {
+      // Scroll the list
+      if (_scrollController.hasClients) {
+        final newOffset = _scrollController.offset - delta;
+        _scrollController.jumpTo(newOffset.clamp(0.0, _scrollController.position.maxScrollExtent));
+      }
+      return;
+    }
+
+    // At top: check if trying to scroll down (view more) or dismiss
+    if (_isScrollable && delta < 0 && _scrollController.hasClients) {
+      // Swiping up (delta negative) = scroll down to see more players
+      final newOffset = _scrollController.offset - delta;
+      _scrollController.jumpTo(newOffset.clamp(0.0, _scrollController.position.maxScrollExtent));
+      return;
+    }
+
+    // Only process dismiss gesture when swiping DOWN (positive delta = finger moving down)
+    // Ignore swipe up when not scrollable - cards should stay fixed
+    if (delta <= 0) return;
+
+    // Swiping down = dismiss gesture
+    setState(() {
+      _isDragging = true;
+      _dragOffset += delta;
+    });
+  }
+
+  void _handleVerticalDragEnd(DragEndDetails details) {
+    final velocity = details.primaryVelocity ?? 0;
+
+    // If not dragging (was scrolling), don't dismiss
+    if (!_isDragging) return;
+
+    // Dismiss if dragged down enough or with enough velocity
+    if (_dragOffset > 100 || velocity > 500) {
+      HapticFeedback.lightImpact();
+      // Reset drag offset before dismiss so animation starts from correct position
+      setState(() {
+        _isDragging = false;
+        _dragOffset = 0;
+      });
+      dismiss();
+    } else {
+      // Spring back
+      setState(() {
+        _isDragging = false;
+        _dragOffset = 0;
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final themeProvider = context.watch<ThemeProvider>();
+    final colorScheme = Theme.of(context).colorScheme;
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+
+    // Back gesture is handled at GlobalPlayerOverlay level
+    return Consumer<MusicAssistantProvider>(
+      builder: (context, maProvider, child) {
+        final allPlayers = maProvider.availablePlayers;
+        final selectedPlayer = maProvider.selectedPlayer;
+        final currentTrack = maProvider.currentTrack;
+
+        // Filter out the selected player - it's already shown in the mini player
+        final players = allPlayers
+            .where((p) => p.playerId != selectedPlayer?.playerId)
+            .toList();
+
+        // Default card colors - used when player doesn't have extracted colors
+        final defaultBgColor = colorScheme.primaryContainer;
+        final defaultTextColor = colorScheme.onPrimaryContainer;
+
+        // Calculate total stack height for animation
+        const cardHeight = 64.0;
+        const cardSpacing = 12.0;
+        final totalStackHeight = players.length * cardHeight + (players.length - 1) * cardSpacing;
+
+        // Calculate max available height (80% of screen minus mini player area)
+        final screenHeight = MediaQuery.of(context).size.height;
+        final statusBarHeight = MediaQuery.of(context).padding.top;
+        final bottomPadding = widget.miniPlayerBottom + widget.miniPlayerHeight + 20;
+        final maxListHeight = (screenHeight - statusBarHeight - bottomPadding) * 0.8;
+
+        // Determine if scrolling is needed
+        final needsScroll = totalStackHeight > maxListHeight;
+        // Update scrollable state (used by gesture handlers)
+        WidgetsBinding.instance.addPostFrameCallback((_) {
+          if (_isScrollable != needsScroll) {
+            _isScrollable = needsScroll;
+          }
+        });
+
+        return AnimatedBuilder(
+          animation: _revealAnimation,
+          builder: (context, child) {
+            final t = _revealAnimation.value;
+
+            return Stack(
+              children: [
+                // Backdrop - tap to dismiss (darkness handled by GlobalPlayerOverlay)
+                Positioned.fill(
+                  child: GestureDetector(
+                    onTap: dismiss,
+                    behavior: HitTestBehavior.opaque,
+                    child: const SizedBox.expand(),
+                  ),
+                ),
+
+                // Player cards - positioned above mini player
+                Positioned(
+                  left: 12,
+                  right: 12,
+                  bottom: widget.miniPlayerBottom + widget.miniPlayerHeight + 8 - _dragOffset,
+                  child: GestureDetector(
+                    onVerticalDragUpdate: _handleVerticalDragUpdate,
+                    onVerticalDragEnd: _handleVerticalDragEnd,
+                    child: Column(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        // Hint above player list - different for onboarding vs regular use
+                        // Onboarding: show first-time hint (how to select)
+                        // Regular: show sync hint (tap and hold to sync)
+                        if (players.isNotEmpty && (_showHints || widget.showOnboardingHints))
+                          Builder(
+                            builder: (context) {
+                              // Calculate slide offset to match the topmost card
+                              const baseOffset = 80.0;
+                              final hintDistanceToTravel = baseOffset + (players.length * (cardHeight + cardSpacing));
+                              final hintSlideOffset = hintDistanceToTravel * (1.0 - t);
+
+                              // Show different hint for onboarding vs regular use
+                              final isOnboarding = widget.showOnboardingHints;
+
+                              Widget buildHintRow(IconData icon, String text) {
+                                return Row(
+                                  mainAxisSize: MainAxisSize.min,
+                                  children: [
+                                    Icon(
+                                      icon,
+                                      size: 18,
+                                      color: colorScheme.onSurface.withOpacity(0.7),
+                                    ),
+                                    const SizedBox(width: 6),
+                                    Text(
+                                      text,
+                                      style: TextStyle(
+                                        color: colorScheme.onSurface.withOpacity(0.7),
+                                        fontSize: 16,
+                                        fontWeight: FontWeight.w500,
+                                      ),
+                                    ),
+                                  ],
+                                );
+                              }
+
+                              return Transform.translate(
+                                offset: Offset(0, hintSlideOffset),
+                                child: Padding(
+                                  padding: const EdgeInsets.only(bottom: 12),
+                                  child: Material(
+                                    type: MaterialType.transparency,
+                                    child: isOnboarding
+                                        ? buildHintRow(Icons.touch_app_outlined, S.of(context)!.selectPlayerHint)
+                                        : Column(
+                                            mainAxisSize: MainAxisSize.min,
+                                            children: [
+                                              buildHintRow(Icons.lightbulb_outline, S.of(context)!.holdToSync),
+                                              const SizedBox(height: 4),
+                                              buildHintRow(Icons.lightbulb_outline, S.of(context)!.swipeToAdjustVolume),
+                                            ],
+                                          ),
+                                  ),
+                                ),
+                              );
+                            },
+                          ),
+                        // 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
+                        if (needsScroll)
+                          ConstrainedBox(
+                            constraints: BoxConstraints(maxHeight: maxListHeight),
+                            child: ListView.builder(
+                              controller: _scrollController,
+                              physics: const ClampingScrollPhysics(),
+                              itemCount: players.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;
+
+                                // 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 distanceToTravel = baseOffset + (reverseIndex * (cardHeight + cardSpacing));
+                                final slideOffset = distanceToTravel * (1.0 - t);
+
+                                return Transform.translate(
+                                  offset: Offset(0, slideOffset),
+                                  child: Padding(
+                                    padding: const EdgeInsets.only(bottom: cardSpacing),
+                                    child: PlayerCard(
+                                      player: player,
+                                      trackInfo: playerTrack,
+                                      albumArtUrl: albumArtUrl,
+                                      isSelected: false,
+                                      isPlaying: isPlaying,
+                                      isGrouped: maProvider.isPlayerManuallySynced(player.playerId),
+                                      backgroundColor: cardBgColor,
+                                      textColor: cardTextColor,
+                                      onTap: () {
+                                        HapticFeedback.mediumImpact();
+                                        maProvider.selectPlayer(player);
+                                        dismiss();
+                                      },
+                                      onLongPress: () {
+                                        HapticFeedback.mediumImpact();
+                                        maProvider.togglePlayerSync(player.playerId);
+                                      },
+                                      onPlayPause: () {
+                                        if (isPlaying) {
+                                          maProvider.pausePlayer(player.playerId);
+                                        } else {
+                                          maProvider.resumePlayer(player.playerId);
+                                        }
+                                      },
+                                      onSkipNext: () => maProvider.nextTrack(player.playerId),
+                                      onPower: () => maProvider.togglePower(player.playerId),
+                                      onVolumeChange: (volume) => maProvider.setVolume(player.playerId, (volume * 100).round()),
+                                    ),
+                                  ),
+                                );
+                              },
+                            ),
+                          )
+                        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;
+
+                          // 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 distanceToTravel = baseOffset + (reverseIndex * (cardHeight + cardSpacing));
+
+                          // Use the elastic animation value directly (already has bounce)
+                          final slideOffset = distanceToTravel * (1.0 - t);
+
+                          return Transform.translate(
+                            offset: Offset(0, slideOffset),
+                            child: Padding(
+                              padding: const EdgeInsets.only(bottom: 12),
+                              child: PlayerCard(
+                                player: player,
+                                trackInfo: playerTrack,
+                                albumArtUrl: albumArtUrl,
+                                isSelected: false,
+                                isPlaying: isPlaying,
+                                isGrouped: maProvider.isPlayerManuallySynced(player.playerId),
+                                backgroundColor: cardBgColor,
+                                textColor: cardTextColor,
+                                onTap: () {
+                                  HapticFeedback.mediumImpact();
+                                  maProvider.selectPlayer(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);
+                                },
+                                onPlayPause: () {
+                                  if (isPlaying) {
+                                    maProvider.pausePlayer(player.playerId);
+                                  } else {
+                                    maProvider.resumePlayer(player.playerId);
+                                  }
+                                },
+                                onSkipNext: () {
+                                  maProvider.nextTrack(player.playerId);
+                                },
+                                onPower: () {
+                                  maProvider.togglePower(player.playerId);
+                                },
+                                onVolumeChange: (volume) => maProvider.setVolume(player.playerId, (volume * 100).round()),
+                              ),
+                            ),
+                          );
+                        }),
+                      ],
+                    ),
+                  ),
+                ),
+              ],
+            );
+          },
+        );
+      },
+    );
+  }
+}
@@ -70,7 +70,7 @@ class QueuePanel extends StatelessWidget {
            child: isLoading
                ? Center(child: CircularProgressIndicator(color: primaryColor))
                : queue == null || queue!.items.isEmpty
-                    ? _buildEmptyState()
+                    ? _buildEmptyState(context)
                    : _buildQueueList(),
          ),
        ],
@@ -78,8 +78,8 @@ class QueuePanel extends StatelessWidget {
    );
  }

-  Widget _buildEmptyState() {
-    return EmptyState.queue();
+  Widget _buildEmptyState(BuildContext context) {
+    return EmptyState.queue(context: context);
  }

  Widget _buildQueueList() {
@@ -118,6 +118,11 @@ class QueuePanel extends StatelessWidget {
                      ? 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),
@@ -0,0 +1,226 @@
+import 'package:flutter/material.dart';
+import '../models/player.dart';
+import '../l10n/app_localizations.dart';
+
+/// A themed bottom sheet for selecting a player.
+///
+/// Supports adaptive theming - pass [adaptiveColorScheme] to use colors
+/// extracted from album art, matching the detail screen backgrounds.
+class PlayerPickerSheet extends StatelessWidget {
+  final String title;
+  final List<Player> players;
+  final Player? selectedPlayer;
+  final ColorScheme? adaptiveColorScheme;
+  final Future<void> Function(Player player) onPlayerSelected;
+
+  const PlayerPickerSheet({
+    super.key,
+    required this.title,
+    required this.players,
+    this.selectedPlayer,
+    this.adaptiveColorScheme,
+    required this.onPlayerSelected,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final themeColorScheme = Theme.of(context).colorScheme;
+    final colorScheme = adaptiveColorScheme ?? themeColorScheme;
+
+    // Use surface container for slightly elevated look, or adaptive surface
+    final backgroundColor = adaptiveColorScheme?.surface ?? themeColorScheme.surfaceContainerHigh;
+    final onBackgroundColor = adaptiveColorScheme?.onSurface ?? themeColorScheme.onSurface;
+
+    return Container(
+      decoration: BoxDecoration(
+        color: backgroundColor,
+        borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
+      ),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          // Drag handle
+          Padding(
+            padding: const EdgeInsets.only(top: 12, bottom: 8),
+            child: Container(
+              width: 32,
+              height: 4,
+              decoration: BoxDecoration(
+                color: onBackgroundColor.withOpacity(0.3),
+                borderRadius: BorderRadius.circular(2),
+              ),
+            ),
+          ),
+
+          // Title
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
+            child: Text(
+              title,
+              style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                color: onBackgroundColor,
+              ),
+              textAlign: TextAlign.center,
+            ),
+          ),
+
+          const SizedBox(height: 8),
+
+          // Player list
+          if (players.isEmpty)
+            Padding(
+              padding: const EdgeInsets.all(32.0),
+              child: Text(
+                S.of(context)!.noPlayersAvailable,
+                style: TextStyle(color: onBackgroundColor.withOpacity(0.6)),
+              ),
+            )
+          else
+            Flexible(
+              child: ListView.builder(
+                shrinkWrap: true,
+                padding: const EdgeInsets.symmetric(horizontal: 8),
+                itemCount: players.length,
+                itemBuilder: (context, index) {
+                  final player = players[index];
+                  final isSelected = selectedPlayer?.playerId == player.playerId;
+
+                  return _PlayerTile(
+                    player: player,
+                    isSelected: isSelected,
+                    colorScheme: colorScheme,
+                    onBackgroundColor: onBackgroundColor,
+                    onTap: () => onPlayerSelected(player),
+                  );
+                },
+              ),
+            ),
+
+          SizedBox(height: MediaQuery.of(context).padding.bottom + 70),
+        ],
+      ),
+    );
+  }
+}
+
+class _PlayerTile extends StatelessWidget {
+  final Player player;
+  final bool isSelected;
+  final ColorScheme colorScheme;
+  final Color onBackgroundColor;
+  final VoidCallback onTap;
+
+  const _PlayerTile({
+    required this.player,
+    required this.isSelected,
+    required this.colorScheme,
+    required this.onBackgroundColor,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    // Status color based on player state
+    Color statusColor;
+    if (!player.available) {
+      statusColor = Colors.grey.withOpacity(0.5);
+    } else if (!player.powered) {
+      statusColor = Colors.grey;
+    } else if (player.state == 'playing') {
+      statusColor = Colors.green;
+    } else {
+      statusColor = Colors.orange; // Idle/paused but powered
+    }
+
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 2),
+      child: Material(
+        color: isSelected
+            ? colorScheme.primaryContainer.withOpacity(0.3)
+            : Colors.transparent,
+        borderRadius: BorderRadius.circular(12),
+        child: InkWell(
+          onTap: onTap,
+          borderRadius: BorderRadius.circular(12),
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+            child: Row(
+              children: [
+                // Status indicator
+                Container(
+                  width: 8,
+                  height: 8,
+                  decoration: BoxDecoration(
+                    shape: BoxShape.circle,
+                    color: statusColor,
+                  ),
+                ),
+                const SizedBox(width: 12),
+
+                // Speaker icon
+                Icon(
+                  Icons.speaker_rounded,
+                  color: isSelected
+                      ? colorScheme.primary
+                      : onBackgroundColor.withOpacity(0.7),
+                  size: 24,
+                ),
+                const SizedBox(width: 12),
+
+                // Player name
+                Expanded(
+                  child: Text(
+                    player.name,
+                    style: TextStyle(
+                      color: isSelected
+                          ? colorScheme.primary
+                          : onBackgroundColor,
+                      fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
+                      fontSize: 16,
+                    ),
+                  ),
+                ),
+
+                // Selected checkmark
+                if (isSelected)
+                  Icon(
+                    Icons.check_circle_rounded,
+                    color: colorScheme.primary,
+                    size: 20,
+                  ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// Shows the player picker bottom sheet with adaptive theming.
+///
+/// Returns the selected player, or null if dismissed.
+Future<void> showPlayerPickerSheet({
+  required BuildContext context,
+  required String title,
+  required List<Player> players,
+  Player? selectedPlayer,
+  ColorScheme? adaptiveColorScheme,
+  required Future<void> Function(Player player) onPlayerSelected,
+}) {
+  return showModalBottomSheet(
+    context: context,
+    backgroundColor: Colors.transparent,
+    isScrollControlled: true,
+    builder: (context) => PlayerPickerSheet(
+      title: title,
+      players: players,
+      selectedPlayer: selectedPlayer,
+      adaptiveColorScheme: adaptiveColorScheme,
+      onPlayerSelected: (player) async {
+        Navigator.pop(context);
+        await onPlayerSelected(player);
+      },
+    ),
+  );
+}
@@ -1,9 +1,11 @@
 import 'dart:async';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
 import 'package:provider/provider.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import '../constants/timings.dart';
+import '../l10n/app_localizations.dart';
 import '../providers/music_assistant_provider.dart';
 import 'global_player_overlay.dart'; // For isPlayerExpanded and collapsePlayer

@@ -17,40 +19,61 @@ class PlayerSelector extends StatelessWidget {
    final availablePlayers = maProvider.availablePlayers;
    final colorScheme = Theme.of(context).colorScheme;

+    // Count players that are currently playing MA content (excluding selected player)
+    // User already sees if selected player is playing, badge shows "other" activity
+    // Exclude external sources (Spotify Connect, TV optical, etc.) - they're not playing MA content
+    final selectedPlayerId = selectedPlayer?.playerId;
+    final playingCount = availablePlayers
+        .where((p) => p.state == 'playing' && p.playerId != selectedPlayerId && !p.isExternalSource)
+        .length;
+
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
-      child: Material(
-        color: colorScheme.primaryContainer,
-        borderRadius: BorderRadius.circular(8),
-        child: InkWell(
-          onTap: () => _showPlayerSelector(context, maProvider, availablePlayers),
+      child: Badge(
+        isLabelVisible: playingCount > 0,
+        backgroundColor: colorScheme.tertiary,
+        textColor: colorScheme.onTertiary,
+        label: Text(
+          playingCount.toString(),
+          style: TextStyle(
+            fontWeight: FontWeight.w900,
+            fontSize: 11,
+            color: colorScheme.onTertiary,
+          ),
+        ),
+        child: Material(
+          color: colorScheme.primaryContainer,
          borderRadius: BorderRadius.circular(8),
-          child: Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
-            child: Row(
-              mainAxisSize: MainAxisSize.min,
-              children: [
-                if (selectedPlayer != null) ...[
-                  ConstrainedBox(
-                    constraints: const BoxConstraints(maxWidth: 120),
-                    child: Text(
-                      selectedPlayer.name,
-                      style: TextStyle(
-                        color: colorScheme.onPrimaryContainer,
-                        fontWeight: FontWeight.w600,
+          child: InkWell(
+            onTap: () => _showPlayerSelector(context, maProvider, availablePlayers),
+            borderRadius: BorderRadius.circular(8),
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  if (selectedPlayer != null) ...[
+                    ConstrainedBox(
+                      constraints: const BoxConstraints(maxWidth: 120),
+                      child: Text(
+                        selectedPlayer.name,
+                        style: TextStyle(
+                          color: colorScheme.onPrimaryContainer,
+                          fontWeight: FontWeight.w600,
+                        ),
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
                      ),
-                      maxLines: 1,
-                      overflow: TextOverflow.ellipsis,
                    ),
+                    const SizedBox(width: 8),
+                  ],
+                  Icon(
+                    MdiIcons.castAudio,
+                    color: colorScheme.onPrimaryContainer,
+                    size: 20,
                  ),
-                  const SizedBox(width: 8),
                ],
-                Icon(
-                  MdiIcons.castAudio,
-                  color: colorScheme.onPrimaryContainer,
-                  size: 20,
-                ),
-              ],
+              ),
            ),
          ),
        ),
@@ -63,27 +86,8 @@ class PlayerSelector extends StatelessWidget {
    MusicAssistantProvider provider,
    List players,
  ) {
-    // Collapse player if expanded before showing sheet
-    if (GlobalPlayerOverlay.isPlayerExpanded) {
-      GlobalPlayerOverlay.collapsePlayer();
-    }
-
-    // Slide mini player down out of the way
-    GlobalPlayerOverlay.hidePlayer();
-
-    // Show the bottom sheet
-    showModalBottomSheet(
-      context: context,
-      backgroundColor: Colors.transparent,
-      isScrollControlled: true,
-      isDismissible: true,
-      builder: (context) {
-        return _PlayerSelectorSheet();
-      },
-    ).whenComplete(() {
-      // Slide mini player back up when sheet is dismissed
-      GlobalPlayerOverlay.showPlayer();
-    });
+    // Use the new player reveal animation
+    GlobalPlayerOverlay.showPlayerReveal();
  }
 }

@@ -182,7 +186,7 @@ class _PlayerSelectorSheetState extends State<_PlayerSelectorSheet> {
                      child: currentPlayers.isEmpty
                          ? Center(
                              child: Text(
-                                'No players available',
+                                S.of(context)!.noPlayersAvailable,
                                style: TextStyle(color: colorScheme.onSurface.withOpacity(0.54)),
                              ),
                            )
@@ -199,23 +203,34 @@ class _PlayerSelectorSheetState extends State<_PlayerSelectorSheet> {
                              // but still have track info - treat as "has content" for display
                              final isIdle = player.state == 'idle';

+                              // Check for external source (optical, Spotify, etc.)
+                              final isExternalSource = player.isExternalSource;
+
                              // Get track info - use current track for selected player, cache for others
-                              final playerTrack = isSelected
-                                  ? currentTrack
-                                  : maProvider.getCachedTrackForPlayer(player.playerId);
+                              // Skip track info for external sources
+                              final playerTrack = isExternalSource
+                                  ? null
+                                  : (isSelected
+                                      ? currentTrack
+                                      : maProvider.getCachedTrackForPlayer(player.playerId));

-                              // Player has content if playing, paused, or idle with cached track
-                              final hasContent = isPlaying || isPaused || (isIdle && playerTrack != null);
+                              // Player has content if playing, paused, or idle with cached track (but not external source)
+                              final hasContent = !isExternalSource && (isPlaying || isPaused || (isIdle && playerTrack != null));

-                              // Get album art for any player with content
+                              // Get album art for any player with content (skip for external source)
                              String? albumArtUrl;
-                              if (playerTrack != null && isOn && hasContent) {
+                              if (!isExternalSource && playerTrack != null && isOn && hasContent) {
                                albumArtUrl = maProvider.getImageUrl(
                                  playerTrack.album ?? playerTrack,
                                  size: 128,
                                );
                              }

+                              // Check if this player is manually synced (not a pre-configured group)
+                              final isGrouped = maProvider.isPlayerManuallySynced(player.playerId);
+                              // Pastel yellow for grouped players
+                              const groupBorderColor = Color(0xFFFFF59D);
+
                              return Padding(
                                padding: const EdgeInsets.only(bottom: 8),
                                child: InkWell(
@@ -223,6 +238,23 @@ class _PlayerSelectorSheetState extends State<_PlayerSelectorSheet> {
                                    maProvider.selectPlayer(player);
                                    Navigator.pop(context);
                                  },
+                                  onLongPress: () {
+                                    // Haptic feedback for sync action
+                                    HapticFeedback.mediumImpact();
+
+                                    // Show snackbar for visual feedback
+                                    ScaffoldMessenger.of(context).showSnackBar(
+                                      SnackBar(
+                                        content: Text('Syncing ${player.name}...'),
+                                        duration: const Duration(seconds: 2),
+                                      ),
+                                    );
+
+                                    // Long-press to sync/unsync player
+                                    debugPrint('🔗 Long-press on ${player.name} (${player.playerId})');
+                                    debugPrint('🔗 Player isGrouped: ${player.isGrouped}, groupMembers: ${player.groupMembers}');
+                                    maProvider.togglePlayerSync(player.playerId);
+                                  },
                                  borderRadius: BorderRadius.circular(16),
                                  child: Container(
                                    height: 72,
@@ -231,6 +263,9 @@ class _PlayerSelectorSheetState extends State<_PlayerSelectorSheet> {
                                          ? colorScheme.primary.withOpacity(0.15)
                                          : colorScheme.surfaceVariant.withOpacity(0.3),
                                      borderRadius: BorderRadius.circular(16),
+                                      border: isGrouped
+                                          ? Border.all(color: groupBorderColor, width: 1.5)
+                                          : null,
                                    ),
                                    child: Row(
                                      children: [
@@ -293,23 +328,27 @@ class _PlayerSelectorSheetState extends State<_PlayerSelectorSheet> {
                                                          ? colorScheme.onSurface.withOpacity(0.24)
                                                          : !isOn
                                                              ? colorScheme.onSurface.withOpacity(0.3)
-                                                              : isPlaying
-                                                                  ? Colors.green
-                                                                  : hasContent
-                                                                      ? Colors.orange // paused or idle with content
-                                                                      : colorScheme.onSurfaceVariant.withOpacity(0.5),
+                                                              : isExternalSource
+                                                                  ? Colors.cyan // external source (optical, Spotify, etc.)
+                                                                  : isPlaying
+                                                                      ? Colors.green
+                                                                      : hasContent
+                                                                          ? Colors.orange // paused or idle with content
+                                                                          : colorScheme.onSurfaceVariant.withOpacity(0.5),
                                                    ),
                                                  ),
                                                  const SizedBox(width: 6),
                                                  Expanded(
                                                    child: Text(
                                                      !player.available
-                                                          ? 'Unavailable'
+                                                          ? S.of(context)!.playerStateUnavailable
                                                          : !isOn
-                                                              ? 'Off'
-                                                              : hasContent && playerTrack != null
-                                                                  ? playerTrack.name
-                                                                  : 'Idle',
+                                                              ? S.of(context)!.playerStateOff
+                                                              : isExternalSource
+                                                                  ? S.of(context)!.playerStateExternalSource
+                                                                  : hasContent && playerTrack != null
+                                                                      ? playerTrack.name
+                                                                      : S.of(context)!.playerStateIdle,
                                                      style: TextStyle(
                                                        color: player.available
                                                            ? colorScheme.onSurfaceVariant
@@ -320,6 +359,35 @@ class _PlayerSelectorSheetState extends State<_PlayerSelectorSheet> {
                                                      overflow: TextOverflow.ellipsis,
                                                    ),
                                                  ),
+                                                  if (isGrouped) ...[
+                                                    const SizedBox(width: 8),
+                                                    Container(
+                                                      padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+                                                      decoration: BoxDecoration(
+                                                        color: groupBorderColor.withOpacity(0.3),
+                                                        borderRadius: BorderRadius.circular(4),
+                                                      ),
+                                                      child: Row(
+                                                        mainAxisSize: MainAxisSize.min,
+                                                        children: [
+                                                          Icon(
+                                                            Icons.link_rounded,
+                                                            size: 10,
+                                                            color: Colors.amber.shade800,
+                                                          ),
+                                                          const SizedBox(width: 3),
+                                                          Text(
+                                                            'Synced',
+                                                            style: TextStyle(
+                                                              color: Colors.amber.shade800,
+                                                              fontSize: 10,
+                                                              fontWeight: FontWeight.w600,
+                                                            ),
+                                                          ),
+                                                        ],
+                                                      ),
+                                                    ),
+                                                  ],
                                                  if (isSelected) ...[
                                                    const SizedBox(width: 8),
                                                    Container(
@@ -329,7 +397,7 @@ class _PlayerSelectorSheetState extends State<_PlayerSelectorSheet> {
                                                        borderRadius: BorderRadius.circular(4),
                                                      ),
                                                      child: Text(
-                                                        'Selected',
+                                                        S.of(context)!.playerSelected,
                                                        style: TextStyle(
                                                          color: colorScheme.primary,
                                                          fontSize: 10,
@@ -343,8 +411,8 @@ class _PlayerSelectorSheetState extends State<_PlayerSelectorSheet> {
                                            ],
                                          ),
                                        ),
-                                        // Play/Pause button
-                                        if (player.available && isOn)
+                                        // Play/Pause button (hidden for external sources - controls don't work)
+                                        if (player.available && isOn && !isExternalSource)
                                          IconButton(
                                            icon: Icon(
                                              isPlaying ? Icons.pause_rounded : Icons.play_arrow_rounded,
@@ -6,6 +6,7 @@ import '../models/media_item.dart';
 import '../providers/music_assistant_provider.dart';
 import '../services/debug_logger.dart';
 import '../screens/audiobook_series_screen.dart';
+import '../utils/page_transitions.dart';

 class SeriesRow extends StatefulWidget {
  final String title;
@@ -267,10 +268,11 @@ class _SeriesCard extends StatelessWidget {

    return GestureDetector(
      onTap: () {
+        // PERF: Use FadeSlidePageRoute for consistent hero animation timing
        Navigator.push(
          context,
-          MaterialPageRoute(
-            builder: (context) => AudiobookSeriesScreen(
+          FadeSlidePageRoute(
+            child: AudiobookSeriesScreen(
              series: series,
              heroTag: heroTag,
              initialCovers: covers,
@@ -284,6 +286,44 @@ 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(
@@ -373,6 +413,8 @@ class _SeriesCard extends StatelessWidget {
                    ? CachedNetworkImage(
                        imageUrl: coverUrl,
                        fit: BoxFit.cover,
+                        fadeInDuration: Duration.zero,
+                        fadeOutDuration: Duration.zero,
                        placeholder: (_, __) => Container(
                          color: colorScheme.surfaceContainerHighest,
                        ),
@@ -186,7 +186,9 @@ class _TrackCard extends StatelessWidget {
                          fit: BoxFit.cover,
                          memCacheWidth: 256,
                          memCacheHeight: 256,
-                          fadeInDuration: const Duration(milliseconds: 150),
+                          // PERF: Duration.zero for smooth scrolling
+                          fadeInDuration: Duration.zero,
+                          fadeOutDuration: Duration.zero,
                          placeholder: (context, url) => const SizedBox(),
                          errorWidget: (context, url, error) => Icon(
                            Icons.music_note_rounded,
@@ -1,7 +1,7 @@
 name: ensemble
 description: A minimalistic Music Assistant client built with Flutter
 publish_to: 'none'
-version: 2.2.1-beta+21
+version: 2.8.3-beta+40

 environment:
  sdk: '>=3.0.0 <4.0.0'
@@ -9,6 +9,9 @@ environment:
 dependencies:
  flutter:
    sdk: flutter
+  flutter_localizations:
+    sdk: flutter
+  intl: ^0.19.0

  # UI
  material_design_icons_flutter: ^7.0.7296
@@ -25,6 +28,7 @@ dependencies:

  # Storage
  shared_preferences: ^2.2.2
+  flutter_secure_storage: ^9.2.2
  drift: ^2.22.0
  drift_flutter: 0.2.0
  path_provider: ^2.1.5
@@ -54,6 +58,7 @@ dev_dependencies:
  drift_dev: ^2.22.1

 flutter:
+  generate: true
  uses-material-design: true

  assets: