Bump version to 2.4.1-beta+26

The root cause: second tap is smooth because image is cached,
but first tap shows grey flash because image isn't cached yet.

Recent Albums works perfectly because those images are already
cached from when the user played those albums.

Fix: Pre-cache the first 10 album/artist images when the row
loads, so they're ready in cache before the user taps.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

.github/workflows/build-apk.yml

@@ -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
 

l10n.yaml

@@ -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

lib/database/database.dart

@@ -93,12 +93,72 @@ 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
+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()();
+}
+
+@DriftDatabase(tables: [Profiles, RecentlyPlayed, LibraryCache, SyncMetadata, PlaybackState, CachedPlayers, CachedQueue])
 class AppDatabase extends _$AppDatabase {
   AppDatabase([QueryExecutor? executor]) : super(executor ?? _openConnection());
 
   @override
-  int get schemaVersion => 1;
+  int get schemaVersion => 2;
 
   @override
   MigrationStrategy get migration {
@@ -107,7 +167,12 @@ 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);
+        }
       },
     );
   }
@@ -327,4 +392,136 @@ 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();
+  }
 }

lib/l10n/app_de.arb

@@ -0,0 +1,284 @@
+{
+  "@@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",
+  "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",
+
+  "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",
+  "playerSelected": "Ausgewählt",
+  "actionQueuedForSync": "Wird synchronisiert wenn online",
+  "pendingOfflineActions": "{count} ausstehende Synchronisierung"
+}

lib/l10n/app_es.arb

@@ -0,0 +1,480 @@
+{
+  "@@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",
+  "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",
+  "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 de 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",
+  "playerSelected": "Seleccionado",
+  "actionQueuedForSync": "Se sincronizará cuando esté en línea",
+  "pendingOfflineActions": "{count} sincronización pendiente"
+}

lib/main.dart

@@ -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';
@@ -87,6 +90,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 +105,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 +172,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 +211,10 @@ class _MusicAssistantAppState extends State<MusicAssistantApp> with WidgetsBindi
       providers: [
         ChangeNotifierProvider.value(value: _musicProvider),
         ChangeNotifierProvider.value(value: _themeProvider),
+        ChangeNotifierProvider.value(value: _localeProvider),
       ],
-      child: Consumer<ThemeProvider>(
+      child: Consumer2<ThemeProvider, LocaleProvider>(
-        builder: (context, themeProvider, _) {
+        builder: (context, themeProvider, localeProvider, _) {
           return FutureBuilder<(ColorScheme, ColorScheme)?>(
             future: themeProvider.useMaterialTheme
                 ? SystemThemeHelper.getSystemColorSchemes()
@@ -215,9 +230,9 @@ class _MusicAssistantAppState extends State<MusicAssistantApp> with WidgetsBindi
                 lightColorScheme = light;
                 darkColorScheme = dark;
               } else {
-                // Use brand color schemes
+                // Use custom color from theme provider
-                lightColorScheme = brandLightColorScheme;
+                lightColorScheme = generateLightColorScheme(themeProvider.customColor);
-                darkColorScheme = brandDarkColorScheme;
+                darkColorScheme = generateDarkColorScheme(themeProvider.customColor);
               }
 
               return SystemUIWrapper(
@@ -228,6 +243,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),

lib/models/media_item.dart

@@ -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,

lib/providers/connection_provider.dart

@@ -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();
   }

lib/providers/locale_provider.dart

@@ -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;
+    }
+  }
+}

lib/providers/player_provider.dart

@@ -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';

lib/screens/album_details_screen.dart

@@ -10,16 +10,20 @@ import '../services/metadata_service.dart';
 import '../services/debug_logger.dart';
 import '../services/recently_played_service.dart';
 import '../widgets/global_player_overlay.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
@@ -36,7 +40,11 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
   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
@@ -45,29 +53,31 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
     _isFavorite = widget.album.favorite ?? false;
     _loadTracks();
     _loadAlbumDescription();
-    _refreshFavoriteStatus();
 
-    // CRITICAL FIX: Defer color extraction until after the transition completes
+    // CRITICAL FIX: Defer both fresh data loading AND color extraction until
-    // This prevents expensive palette extraction during hero animation
+    // after the hero animation completes. This prevents:
-    // Wait for the first frame to be painted, then extract colors
+    // 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 +85,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 +120,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
@@ -131,17 +144,18 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
         }
 
         _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,
@@ -157,32 +171,41 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
         }
 
         _logger.log('Removing from favorites: libraryItemId=$libraryItemId');
-        await maProvider.api!.removeFromFavorites('album', libraryItemId);
+        success = await maProvider.removeFromFavorites(
+          mediaType: 'album',
+          libraryItemId: libraryItemId,
+        );
       }
 
-      setState(() {
+      if (success) {
-        _isFavorite = newState;
+        // Optimistically update UI regardless of online/offline state
-      });
+        setState(() {
+          _isFavorite = newState;
+        });
 
-      // Invalidate home cache so the home screen shows updated favorite status
+        // Invalidate home cache so the home screen shows updated favorite status
-      maProvider.invalidateHomeCache();
+        maProvider.invalidateHomeCache();
 
-      if (mounted) {
+        if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
+          final isOffline = !maProvider.isConnected;
-          SnackBar(
+          ScaffoldMessenger.of(context).showSnackBar(
-            content: Text(
+            SnackBar(
-              _isFavorite ? 'Added to favorites' : 'Removed from favorites',
+              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),
           ),
         );
@@ -195,11 +218,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 +239,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
@@ -235,40 +263,49 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
           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
+      if (success) {
-      setState(() {
+        // Optimistically update local state
-        _tracks[trackIndex] = Track(
+        setState(() {
-          itemId: track.itemId,
+          _tracks[trackIndex] = Track(
-          provider: track.provider,
+            itemId: track.itemId,
-          name: track.name,
+            provider: track.provider,
-          uri: track.uri,
+            name: track.name,
-          favorite: !currentFavorite,
+            uri: track.uri,
-          artists: track.artists,
+            favorite: !currentFavorite,
-          album: track.album,
+            artists: track.artists,
-          duration: track.duration,
+            album: track.album,
-          providerMappings: track.providerMappings,
+            duration: track.duration,
-        );
+            providerMappings: track.providerMappings,
-      });
+          );
+        });
 
-      if (mounted) {
+        if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
+          final isOffline = !maProvider.isConnected;
-          SnackBar(
+          ScaffoldMessenger.of(context).showSnackBar(
-            content: Text(
+            SnackBar(
-              !currentFavorite ? 'Added to favorites' : 'Removed from favorites',
+              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 +315,46 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
 
   Future<void> _loadTracks() async {
     final provider = context.read<MusicAssistantProvider>();
-    final tracks = await provider.getAlbumTracksWithCache(
+    final cacheKey = '${widget.album.provider}_${widget.album.itemId}';
-      widget.album.provider,
-      widget.album.itemId,
-    );
 
-    if (mounted) {
+    // 1. Show cached data immediately (if available)
-      setState(() {
+    final cachedTracks = provider.getCachedAlbumTracks(cacheKey);
-        _tracks = tracks;
+    if (cachedTracks != null && cachedTracks.isNotEmpty) {
-        _isLoading = false;
+      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 +367,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 +393,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 +429,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(
-                padding: EdgeInsets.all(32.0),
+                padding: const EdgeInsets.all(32.0),
-                child: Text('No players available'),
+                child: Text(S.of(context)!.noPlayersAvailable),
               )
             else
               Flexible(
@@ -397,9 +464,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(
+                              SnackBar(
-                                content: Text('Album added to queue'),
+                                content: Text(S.of(context)!.albumAddedToQueue),
-                                duration: Duration(seconds: 1),
+                                duration: const Duration(seconds: 1),
                               ),
                             );
                           }
@@ -442,14 +509,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(
-                padding: EdgeInsets.all(32.0),
+                padding: const EdgeInsets.all(32.0),
-                child: Text('No players available'),
+                child: Text(S.of(context)!.noPlayersAvailable),
               )
             else
               Flexible(
@@ -476,9 +543,9 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
                           );
                           if (mounted) {
                             ScaffoldMessenger.of(context).showSnackBar(
-                              const SnackBar(
+                              SnackBar(
-                                content: Text('Tracks added to queue'),
+                                content: Text(S.of(context)!.tracksAddedToQueue),
-                                duration: Duration(seconds: 1),
+                                duration: const Duration(seconds: 1),
                               ),
                             );
                           }
@@ -594,9 +661,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?>(
+    // Use _displayAlbum which has fresh data with images if available
-      (provider) => provider.getImageUrl(widget.album, size: 512),
+    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,
     );
@@ -763,7 +833,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,
@@ -837,7 +907,7 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
                   ),
                   const SizedBox(height: 24),
                   Text(
-                    'Tracks',
+                    S.of(context)!.tracks,
                     style: textTheme.titleLarge?.copyWith(
                       color: colorScheme.onBackground,
                       fontWeight: FontWeight.bold,
@@ -858,7 +928,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,
@@ -1089,14 +1159,14 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
           children: [
             const SizedBox(height: 16),
             Text(
-              'Play on...',
+              S.of(context)!.playOn,
               style: Theme.of(context).textTheme.titleLarge,
             ),
             const SizedBox(height: 16),
             Expanded(
               child: players.isEmpty
-                  ? const Center(
+                  ? Center(
-                      child: Text('No players available'),
+                      child: Text(S.of(context)!.noPlayersAvailable),
                     )
                   : ListView.builder(
                       padding: EdgeInsets.only(bottom: bottomPadding + 16),

lib/screens/artist_details_screen.dart

@@ -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;
@@ -154,10 +155,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;
@@ -176,7 +177,11 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
         }
 
         _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;
 
@@ -198,31 +203,39 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
         }
 
         _logger.log('Removing artist from favorites: libraryItemId=$libraryItemId');
-        await maProvider.api!.removeFromFavorites('artist', libraryItemId);
+        success = await maProvider.removeFromFavorites(
+          mediaType: 'artist',
+          libraryItemId: libraryItemId,
+        );
       }
 
-      setState(() {
+      if (success) {
-        _isFavorite = newState;
+        setState(() {
-      });
+          _isFavorite = newState;
+        });
 
-      maProvider.invalidateHomeCache();
+        maProvider.invalidateHomeCache();
 
-      if (mounted) {
+        if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
+          final isOffline = !maProvider.isConnected;
-          SnackBar(
+          ScaffoldMessenger.of(context).showSnackBar(
-            content: Text(
+            SnackBar(
-              _isFavorite ? 'Added to favorites' : 'Removed from favorites',
+              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),
           ),
         );
@@ -236,7 +249,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
 
     if (selectedPlayer == null) {
       ScaffoldMessenger.of(context).showSnackBar(
-        const SnackBar(content: Text('No player selected')),
+        SnackBar(content: Text(S.of(context)!.noPlayerSelected)),
       );
       return;
     }
@@ -246,7 +259,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
       if (mounted) {
         ScaffoldMessenger.of(context).showSnackBar(
           SnackBar(
-            content: Text('Starting ${widget.artist.name} radio'),
+            content: Text(S.of(context)!.startingRadio(widget.artist.name)),
             duration: const Duration(seconds: 1),
           ),
         );
@@ -256,7 +269,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,
           ),
         );
@@ -282,14 +295,14 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             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(
-                padding: EdgeInsets.all(32.0),
+                padding: const EdgeInsets.all(32.0),
-                child: Text('No players available'),
+                child: Text(S.of(context)!.noPlayersAvailable),
               )
             else
               Flexible(
@@ -311,7 +324,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 +334,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,
                               ),
                             );
@@ -345,7 +358,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
 
     if (selectedPlayer == null) {
       ScaffoldMessenger.of(context).showSnackBar(
-        const SnackBar(content: Text('No player selected')),
+        SnackBar(content: Text(S.of(context)!.noPlayerSelected)),
       );
       return;
     }
@@ -356,7 +369,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
       if (mounted) {
         ScaffoldMessenger.of(context).showSnackBar(
           SnackBar(
-            content: Text('Added ${widget.artist.name} radio to queue'),
+            content: Text(S.of(context)!.addedRadioToQueue(widget.artist.name)),
             duration: const Duration(seconds: 1),
           ),
         );
@@ -366,7 +379,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
       if (mounted) {
         ScaffoldMessenger.of(context).showSnackBar(
           SnackBar(
-            content: Text('Failed to add to queue: $e'),
+            content: Text(S.of(context)!.failedToAddToQueue(e.toString())),
             backgroundColor: Colors.red,
           ),
         );
@@ -426,23 +439,54 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
   Future<void> _loadArtistAlbums() async {
     final provider = context.read<MusicAssistantProvider>();
 
-    // Use cached artist albums method
+    // 1. Show cached data immediately (if available)
-    final allAlbums = await provider.getArtistAlbumsWithCache(widget.artist.name);
+    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) {
+      if (mounted) {
-      // Separate library albums from provider-only albums
+        setState(() {
-      final libraryAlbums = allAlbums.where((a) => a.inLibrary).toList();
+          _albums = libraryAlbums;
-      final providerOnlyAlbums = allAlbums.where((a) => !a.inLibrary).toList();
+          _providerAlbums = providerOnlyAlbums;
+          _sortAlbums();
+          _isLoading = false;
+        });
+      }
+    }
 
-      setState(() {
+    // 2. Fetch fresh data in background (silent refresh)
-        _albums = libraryAlbums;
+    try {
-        _providerAlbums = providerOnlyAlbums;
+      final allAlbums = await provider.getArtistAlbumsWithCache(
-        _sortAlbums(); // Apply saved sort order
+        widget.artist.name,
-        _isLoading = false;
+        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
@@ -509,10 +553,12 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                         height: 200,
                         color: colorScheme.surfaceVariant,
                         child: imageUrl != null
-                            ? Image.network(
+                            ? CachedNetworkImage(
-                                imageUrl,
+                                imageUrl: imageUrl,
                                 fit: BoxFit.cover,
-                                errorBuilder: (_, __, ___) => Icon(
+                                fadeInDuration: Duration.zero,
+                                fadeOutDuration: Duration.zero,
+                                errorWidget: (_, __, ___) => Icon(
                                   Icons.person_rounded,
                                   size: 100,
                                   color: colorScheme.onSurfaceVariant,
@@ -583,7 +629,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                           child: ElevatedButton.icon(
                             onPressed: _startArtistRadio,
                             icon: const Icon(Icons.radio),
-                            label: const Text('Radio'),
+                            label: Text(S.of(context)!.radio),
                             style: ElevatedButton.styleFrom(
                               backgroundColor: colorScheme.primary,
                               foregroundColor: colorScheme.onPrimary,
@@ -669,7 +715,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 +732,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 +746,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 +764,10 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                           size: 20,
                         ),
                         tooltip: _viewMode == 'grid2'
-                            ? '3-column grid'
+                            ? S.of(context)!.threeColumnGrid
                             : _viewMode == 'grid3'
-                                ? 'List view'
+                                ? S.of(context)!.listView
-                                : '2-column grid',
+                                : S.of(context)!.twoColumnGrid,
                         onPressed: _cycleViewMode,
                         visualDensity: VisualDensity.compact,
                         padding: EdgeInsets.zero,
@@ -742,7 +788,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 +803,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 +820,10 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                             size: 20,
                           ),
                           tooltip: _viewMode == 'grid2'
-                              ? '3-column grid'
+                              ? S.of(context)!.threeColumnGrid
                               : _viewMode == 'grid3'
-                                  ? 'List view'
+                                  ? S.of(context)!.listView
-                                  : '2-column grid',
+                                  : S.of(context)!.twoColumnGrid,
                           onPressed: _cycleViewMode,
                           visualDensity: VisualDensity.compact,
                           padding: EdgeInsets.zero,
@@ -816,6 +862,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
             child: AlbumDetailsScreen(
               album: album,
               heroTagSuffix: heroSuffix,
+              initialImageUrl: imageUrl,
             ),
           ),
         );
@@ -832,12 +879,14 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                 child: Container(
                   color: colorScheme.surfaceVariant,
                   child: imageUrl != null
-                      ? Image.network(
+                      ? CachedNetworkImage(
-                          imageUrl,
+                          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 +988,12 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
           height: 56,
           color: colorScheme.surfaceVariant,
           child: imageUrl != null
-              ? Image.network(
+              ? CachedNetworkImage(
-                  imageUrl,
+                  imageUrl: imageUrl,
                   fit: BoxFit.cover,
-                  errorBuilder: (_, __, ___) => Icon(
+                  fadeInDuration: Duration.zero,
+                  fadeOutDuration: Duration.zero,
+                  errorWidget: (_, __, ___) => Icon(
                     Icons.album_rounded,
                     color: colorScheme.onSurfaceVariant,
                   ),
@@ -978,6 +1029,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
             child: AlbumDetailsScreen(
               album: album,
               heroTagSuffix: 'artist_albums',
+              initialImageUrl: imageUrl,
             ),
           ),
         );

lib/screens/audiobook_author_screen.dart

@@ -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'
+                              ? S.of(context)!.listView
-                              : '2-column grid',
+                              : 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'
+        book.narratorsString != S.of(context)!.unknownNarrator
-            ? 'Narrated by ${book.narratorsString}'
+            ? 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,
         ),
       ),
     );

lib/screens/audiobook_detail_screen.dart

@@ -10,15 +10,19 @@ 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 +122,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;
@@ -140,7 +144,11 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
         }
 
         _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;
 
@@ -161,29 +169,37 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
         }
 
         _logger.log('Removing audiobook from favorites: libraryItemId=$libraryItemId');
-        await maProvider.api!.removeFromFavorites('audiobook', libraryItemId);
+        success = await maProvider.removeFromFavorites(
+          mediaType: 'audiobook',
+          libraryItemId: libraryItemId,
+        );
       }
 
-      setState(() {
+      if (success) {
-        _isFavorite = newState;
+        setState(() {
-      });
+          _isFavorite = newState;
+        });
 
-      if (mounted) {
+        if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
+          final isOffline = !maProvider.isConnected;
-          SnackBar(
+          ScaffoldMessenger.of(context).showSnackBar(
-            content: Text(
+            SnackBar(
-              _isFavorite ? 'Added to favorites' : 'Removed from favorites',
+              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),
           ),
         );
@@ -215,13 +231,13 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
           children: [
             const SizedBox(height: 16),
             Text(
-              'Play on...',
+              S.of(context)!.playOn,
               style: Theme.of(context).textTheme.titleLarge,
             ),
             const SizedBox(height: 16),
             Expanded(
               child: players.isEmpty
-                  ? const Center(child: Text('No players available'))
+                  ? Center(child: Text(S.of(context)!.noPlayersAvailable))
                   : ListView.builder(
                       padding: EdgeInsets.only(bottom: bottomPadding + 16),
                       itemCount: players.length,
@@ -287,7 +303,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 +313,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 +354,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 +364,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 +378,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 +408,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 +418,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 +429,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,
@@ -489,7 +507,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
                             size: 20,
                           ),
                           const SizedBox(width: 12),
-                          const Text('Mark as Finished'),
+                          Text(S.of(context)!.markAsFinished),
                         ],
                       ),
                     ),
@@ -503,7 +521,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
                             size: 20,
                           ),
                           const SizedBox(width: 12),
-                          const Text('Mark as Unplayed'),
+                          Text(S.of(context)!.markAsUnplayed),
                         ],
                       ),
                     ),
@@ -527,6 +545,8 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
                               ? CachedNetworkImage(
                                   imageUrl: imageUrl,
                                   fit: BoxFit.cover,
+                                  fadeInDuration: Duration.zero,
+                                  fadeOutDuration: Duration.zero,
                                   placeholder: (_, __) => Center(
                                     child: Icon(
                                       MdiIcons.bookOutline,
@@ -580,17 +600,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 +644,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 +682,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 +760,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 +791,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,
@@ -815,7 +835,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 +873,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 +934,7 @@ class _AudiobookDetailScreenState extends State<AudiobookDetailScreen> {
           ),
           subtitle: isInProgress
               ? Text(
-                  'In progress',
+                  S.of(context)!.inProgress,
                   style: textTheme.bodySmall?.copyWith(
                     color: colorScheme.primary,
                   ),
@@ -972,7 +992,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),
                             ],
                           ),
                         ),

lib/screens/audiobook_series_screen.dart

@@ -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,6 +271,7 @@ 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,
@@ -335,8 +337,8 @@ class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {
                   const SizedBox(height: 8),
                   Text(
                     _isLoading
-                        ? 'Loading...'
+                        ? l10n.loading
-                        : '${_audiobooks.length} ${_audiobooks.length == 1 ? 'book' : 'books'}',
+                        : l10n.bookCount(_audiobooks.length),
                     style: textTheme.bodyLarge?.copyWith(
                       color: colorScheme.onSurface.withOpacity(0.7),
                     ),
@@ -353,7 +355,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 +369,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 +387,10 @@ class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {
                       size: 20,
                     ),
                     tooltip: _viewMode == 'grid2'
-                        ? '3-column grid'
+                        ? S.of(context)!.threeColumnGrid
                         : _viewMode == 'grid3'
-                            ? 'List view'
+                            ? S.of(context)!.listView
-                            : '2-column grid',
+                            : S.of(context)!.twoColumnGrid,
                     onPressed: _cycleViewMode,
                     visualDensity: VisualDensity.compact,
                     padding: EdgeInsets.zero,
@@ -416,7 +418,7 @@ class _AudiobookSeriesScreenState extends State<AudiobookSeriesScreen> {
                     const SizedBox(height: 16),
                     ElevatedButton(
                       onPressed: _loadSeriesBooks,
-                      child: const Text('Retry'),
+                      child: Text(l10n.retry),
                     ),
                   ],
                 ),
@@ -432,7 +434,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),
                     ),
                   ],
@@ -515,6 +517,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 +635,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 +655,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 +714,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 +750,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 +798,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 +817,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,
         ),
       ),
     );

lib/screens/debug_log_screen.dart

@@ -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(
+      SnackBar(
-        content: Text('Logs copied to clipboard'),
+        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(
+      SnackBar(
-        content: Text('Logs cleared'),
+        content: Text(S.of(context)!.logsCleared),
-        duration: Duration(seconds: 1),
+        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(
+                          Text(
-                            '← This device',
+                            S.of(context)!.thisDevice,
-                            style: TextStyle(color: Colors.green, fontSize: 11, fontWeight: FontWeight.bold),
+                            style: const TextStyle(color: Colors.green, fontSize: 11, fontWeight: FontWeight.bold),
                           ),
                         if (isGhost && !isCorrupt)
-                          const Text(
+                          Text(
-                            '⚠️ Ghost player (duplicate)',
+                            S.of(context)!.ghostPlayer,
-                            style: TextStyle(color: Colors.red, fontSize: 11),
+                            style: const TextStyle(color: Colors.red, fontSize: 11),
                           ),
                         if (isCorrupt)
-                          const Text(
+                          Text(
-                            '⚠️ Unavailable/Corrupt',
+                            S.of(context)!.unavailableCorrupt,
-                            style: TextStyle(color: Colors.orange, fontSize: 11),
+                            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(
+        title: Text(
-          'Debug Logs',
+          S.of(context)!.debugLogs,
-          style: TextStyle(
+          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),
+                  leading: const Icon(Icons.speaker_group_rounded),
-                  title: Text('View All Players'),
+                  title: Text(S.of(context)!.viewAllPlayers),
                   dense: true,
                 ),
               ),
-              const PopupMenuItem(
+              PopupMenuItem(
                 value: 'copy_logs',
                 child: ListTile(
-                  leading: Icon(Icons.copy_rounded),
+                  leading: const Icon(Icons.copy_rounded),
-                  title: Text('Copy Logs'),
+                  title: Text(S.of(context)!.copyLogs),
                   dense: true,
                 ),
               ),
-              const PopupMenuItem(
+              PopupMenuItem(
                 value: 'clear_logs',
                 child: ListTile(
-                  leading: Icon(Icons.delete_rounded),
+                  leading: const Icon(Icons.delete_rounded),
-                  title: Text('Clear Logs'),
+                  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',
+                      S.of(context)!.noLogsYet,
-                      style: TextStyle(
+                      style: const TextStyle(
                         color: Colors.white54,
                         fontSize: 16,
                       ),

lib/screens/home_screen.dart

@@ -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();

lib/screens/library_albums_screen.dart

@@ -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,6 +57,7 @@ class LibraryAlbumsScreen extends StatelessWidget {
 
     if (albums.isEmpty) {
       return EmptyState.albums(
+        context: context,
         onRefresh: () => context.read<MusicAssistantProvider>().loadLibrary(),
       );
     }

lib/screens/library_artists_screen.dart

@@ -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,6 +59,7 @@ class LibraryArtistsScreen extends StatelessWidget {
 
     if (artists.isEmpty) {
       return EmptyState.artists(
+        context: context,
         onRefresh: () => context.read<MusicAssistantProvider>().loadLibrary(),
       );
     }

lib/screens/library_playlists_screen.dart

@@ -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});
@@ -59,7 +60,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,14 +75,16 @@ 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(
@@ -138,8 +141,8 @@ class _LibraryPlaylistsScreenState extends State<LibraryPlaylistsScreen> {
         ),
         subtitle: Text(
           playlist.trackCount != null
-              ? '${playlist.trackCount} tracks'
+              ? '${playlist.trackCount} ${S.of(context)!.tracks}'
-              : playlist.owner ?? 'Playlist',
+              : playlist.owner ?? S.of(context)!.playlist,
           style: textTheme.bodySmall?.copyWith(
             color: colorScheme.onSurface.withOpacity(0.7),
           ),

lib/screens/library_tracks_screen.dart

@@ -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;
     }

lib/screens/login_screen.dart

@@ -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;
@@ -452,7 +453,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 +501,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 +513,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 +540,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 +552,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 +575,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 +583,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 +595,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 +640,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 +653,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 +699,8 @@ class _LoginScreenState extends State<LoginScreen> {
                           children: [
                             Text(
                               _isTailscaleUrl(_serverUrlController.text)
-                                  ? 'Tailscale VPN Connection'
+                                  ? S.of(context)!.tailscaleVpnConnection
-                                  : 'Unencrypted Connection',
+                                  : S.of(context)!.unencryptedConnection,
                               style: TextStyle(
                                 color: _isTailscaleUrl(_serverUrlController.text)
                                     ? colorScheme.onSecondaryContainer
@@ -712,10 +713,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'
+                                        ? S.of(context)!.httpsFailedUsingHttp
-                                        : 'HTTP connection - data is not encrypted',
+                                        : S.of(context)!.httpNotEncrypted,
                                 style: TextStyle(
                                   color: (_isTailscaleUrl(_serverUrlController.text)
                                       ? colorScheme.onSecondaryContainer
@@ -736,7 +737,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 +745,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 +757,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 +778,7 @@ class _LoginScreenState extends State<LoginScreen> {
                 ],
 
                 Text(
-                  'Username',
+                  S.of(context)!.username,
                   style: textTheme.titleMedium?.copyWith(
                     color: colorScheme.onBackground,
                     fontWeight: FontWeight.w500,
@@ -790,7 +791,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 +811,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 +823,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 +913,9 @@ class _LoginScreenState extends State<LoginScreen> {
                             ),
                           ),
                           const SizedBox(width: 12),
-                          const Text(
+                          Text(
-                            'Detecting authentication...',
+                            S.of(context)!.detectingAuth,
-                            style: TextStyle(
+                            style: const TextStyle(
                               fontSize: 16,
                               fontWeight: FontWeight.bold,
                             ),
@@ -931,7 +932,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,

lib/screens/new_home_screen.dart

@@ -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()),
@@ -196,7 +198,8 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
                   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,
                             ),
@@ -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,
         );

lib/screens/new_library_screen.dart

@@ -18,6 +18,7 @@ import '../services/settings_service.dart';
 import '../services/metadata_service.dart';
 import '../services/debug_logger.dart';
 import '../services/sync_service.dart';
+import '../l10n/app_localizations.dart';
 import 'album_details_screen.dart';
 import 'artist_details_screen.dart';
 import 'playlist_details_screen.dart';
@@ -652,6 +653,8 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
 
   @override
   Widget build(BuildContext context) {
+    final l10n = S.of(context)!;
+
     // Use Selector for targeted rebuilds - only rebuild when connection state changes
     return Selector<MusicAssistantProvider, bool>(
       selector: (_, provider) => provider.isConnected,
@@ -669,7 +672,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
               backgroundColor: Colors.transparent,
               elevation: 0,
               title: Text(
-                'Library',
+                l10n.library,
                 style: textTheme.titleLarge?.copyWith(
                   color: colorScheme.onBackground,
                   fontWeight: FontWeight.w300,
@@ -679,6 +682,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
               actions: const [PlayerSelector()],
             ),
             body: DisconnectedState.withSettingsAction(
+              context: context,
               onSettings: () => Navigator.push(
                 context,
                 MaterialPageRoute(builder: (context) => const SettingsScreen()),
@@ -727,7 +731,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
                           indicatorWeight: 3,
                           labelStyle: const TextStyle(fontWeight: FontWeight.w600, fontSize: 14),
                           unselectedLabelStyle: const TextStyle(fontWeight: FontWeight.w400, fontSize: 14),
-                          tabs: _buildTabs(),
+                          tabs: _buildTabs(l10n),
                         ),
                       ),
                       // Favorites + Layout buttons on the right
@@ -738,7 +742,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
                           size: 20,
                         ),
                         onPressed: () => _toggleFavoritesMode(!_showFavoritesOnly),
-                        tooltip: _showFavoritesOnly ? 'Show all' : 'Show favorites only',
+                        tooltip: _showFavoritesOnly ? l10n.showAll : l10n.showFavoritesOnly,
                         visualDensity: VisualDensity.compact,
                         padding: EdgeInsets.zero,
                         constraints: const BoxConstraints(minWidth: 36, minHeight: 36),
@@ -750,7 +754,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
                           size: 20,
                         ),
                         onPressed: _cycleCurrentViewMode,
-                        tooltip: 'Change view',
+                        tooltip: l10n.changeView,
                         visualDensity: VisualDensity.compact,
                         padding: EdgeInsets.zero,
                         constraints: const BoxConstraints(minWidth: 36, minHeight: 36),
@@ -765,7 +769,8 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
           body: Column(
             children: [
               // Connecting banner when showing cached data
-              if (!isConnected && syncService.hasCache)
+              // Hide when we have cached players - UI is functional during background reconnect
+              if (!isConnected && syncService.hasCache && !context.read<MusicAssistantProvider>().hasCachedPlayers)
                 Container(
                   width: double.infinity,
                   padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
@@ -783,7 +788,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
                       ),
                       const SizedBox(width: 8),
                       Text(
-                        'Connecting...',
+                        l10n.connecting,
                         style: textTheme.bodySmall?.copyWith(
                           color: colorScheme.onPrimaryContainer,
                         ),
@@ -794,7 +799,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
               Expanded(
                 child: TabBarView(
                   controller: _tabController,
-                  children: _buildTabViews(context),
+                  children: _buildTabViews(context, l10n),
                 ),
               ),
             ],
@@ -858,54 +863,53 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
   }
 
   // ============ CONTEXTUAL TABS ============
-  List<Tab> _buildTabs() {
+  List<Tab> _buildTabs(S l10n) {
     switch (_selectedMediaType) {
       case LibraryMediaType.music:
         return [
-          const Tab(text: 'Artists'),
+          Tab(text: l10n.artists),
-          const Tab(text: 'Albums'),
+          Tab(text: l10n.albums),
-          if (_showFavoritesOnly) const Tab(text: 'Tracks'),
+          if (_showFavoritesOnly) Tab(text: l10n.tracks),
-          const Tab(text: 'Playlists'),
+          Tab(text: l10n.playlists),
         ];
       case LibraryMediaType.books:
-        return const [
+        return [
-          Tab(text: 'Authors'),
+          Tab(text: l10n.authors),
-          Tab(text: 'All Books'),
+          Tab(text: l10n.books),
-          Tab(text: 'Series'),
+          Tab(text: l10n.series),
         ];
       case LibraryMediaType.podcasts:
-        return const [
+        return [
-          Tab(text: 'Shows'),
+          Tab(text: l10n.shows),
         ];
     }
   }
 
-  List<Widget> _buildTabViews(BuildContext context) {
+  List<Widget> _buildTabViews(BuildContext context, S l10n) {
     switch (_selectedMediaType) {
       case LibraryMediaType.music:
         return [
-          _buildArtistsTab(context),
+          _buildArtistsTab(context, l10n),
-          _buildAlbumsTab(context),
+          _buildAlbumsTab(context, l10n),
-          if (_showFavoritesOnly) _buildTracksTab(context),
+          if (_showFavoritesOnly) _buildTracksTab(context, l10n),
-          _buildPlaylistsTab(context),
+          _buildPlaylistsTab(context, l10n),
         ];
       case LibraryMediaType.books:
         return [
-          _buildBooksAuthorsTab(context),
+          _buildBooksAuthorsTab(context, l10n),
-          _buildAllBooksTab(context),
+          _buildAllBooksTab(context, l10n),
-          _buildSeriesTab(context),
+          _buildSeriesTab(context, l10n),
         ];
       case LibraryMediaType.podcasts:
         return [
-          _buildPodcastsComingSoonTab(context),
+          _buildPodcastsComingSoonTab(context, l10n),
         ];
     }
   }
 
   // ============ BOOKS TABS ============
-  Widget _buildBooksAuthorsTab(BuildContext context) {
+  Widget _buildBooksAuthorsTab(BuildContext context, S l10n) {
     final colorScheme = Theme.of(context).colorScheme;
-    final textTheme = Theme.of(context).textTheme;
 
     if (_isLoadingAudiobooks) {
       return Center(child: CircularProgressIndicator(color: colorScheme.primary));
@@ -919,15 +923,17 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     if (audiobooks.isEmpty) {
       if (_showFavoritesOnly) {
         return EmptyState.custom(
+          context: context,
           icon: Icons.favorite_border,
-          title: 'No favorite audiobooks',
+          title: l10n.noFavoriteAudiobooks,
-          subtitle: 'Tap the heart on an audiobook to add it to favorites',
+          subtitle: l10n.tapHeartAudiobook,
         );
       }
       return EmptyState.custom(
+        context: context,
         icon: MdiIcons.bookOutline,
-        title: 'No audiobooks',
+        title: l10n.noAudiobooks,
-        subtitle: 'Add audiobooks to your library to see them here',
+        subtitle: l10n.addAudiobooksHint,
         onRefresh: () => _loadAudiobooks(),
       );
     }
@@ -956,7 +962,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
               itemCount: sortedAuthors.length,
               padding: EdgeInsets.only(left: 8, right: 8, top: 8, bottom: BottomSpacing.withMiniPlayer),
               itemBuilder: (context, index) {
-                return _buildAuthorListTile(sortedAuthors[index], authorMap[sortedAuthors[index]]!);
+                return _buildAuthorListTile(sortedAuthors[index], authorMap[sortedAuthors[index]]!, l10n);
               },
             )
           : GridView.builder(
@@ -973,13 +979,13 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
               ),
               itemCount: sortedAuthors.length,
               itemBuilder: (context, index) {
-                return _buildAuthorCard(sortedAuthors[index], authorMap[sortedAuthors[index]]!);
+                return _buildAuthorCard(sortedAuthors[index], authorMap[sortedAuthors[index]]!, l10n);
               },
             ),
     );
   }
 
-  Widget _buildAuthorListTile(String authorName, List<Audiobook> books) {
+  Widget _buildAuthorListTile(String authorName, List<Audiobook> books, S l10n) {
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
     final authorImageUrl = _authorImages[authorName];
@@ -999,6 +1005,8 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
                     fit: BoxFit.cover,
                     width: 48,
                     height: 48,
+                    fadeInDuration: Duration.zero,
+                    fadeOutDuration: Duration.zero,
                     placeholder: (_, __) => Text(
                       authorName.isNotEmpty ? authorName[0].toUpperCase() : '?',
                       style: TextStyle(
@@ -1036,16 +1044,16 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
         overflow: TextOverflow.ellipsis,
       ),
       subtitle: Text(
-        '${books.length} ${books.length == 1 ? 'audiobook' : 'audiobooks'}',
+        '${books.length} ${books.length == 1 ? l10n.audiobookSingular : l10n.audiobooks}',
         style: textTheme.bodySmall?.copyWith(
           color: colorScheme.onSurface.withOpacity(0.6),
         ),
       ),
-      onTap: () => _navigateToAuthor(authorName, books, heroTagSuffix: 'library$heroSuffix'),
+      onTap: () => _navigateToAuthor(authorName, books, heroTagSuffix: 'library$heroSuffix', initialAuthorImageUrl: authorImageUrl),
     );
   }
 
-  Widget _buildAuthorCard(String authorName, List<Audiobook> books) {
+  Widget _buildAuthorCard(String authorName, List<Audiobook> books, S l10n) {
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
     final authorImageUrl = _authorImages[authorName];
@@ -1053,7 +1061,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
 
     // Match music artist card layout
     return GestureDetector(
-      onTap: () => _navigateToAuthor(authorName, books, heroTagSuffix: 'library$heroSuffix'),
+      onTap: () => _navigateToAuthor(authorName, books, heroTagSuffix: 'library$heroSuffix', initialAuthorImageUrl: authorImageUrl),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.center,
         children: [
@@ -1082,6 +1090,8 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
                                 fit: BoxFit.cover,
                                 width: size,
                                 height: size,
+                                fadeInDuration: Duration.zero,
+                                fadeOutDuration: Duration.zero,
                                 placeholder: (_, __) => Center(
                                   child: Text(
                                     authorName.isNotEmpty ? authorName[0].toUpperCase() : '?',
@@ -1136,7 +1146,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     );
   }
 
-  void _navigateToAuthor(String authorName, List<Audiobook> books, {String? heroTagSuffix}) {
+  void _navigateToAuthor(String authorName, List<Audiobook> books, {String? heroTagSuffix, String? initialAuthorImageUrl}) {
     Navigator.push(
       context,
       FadeSlidePageRoute(
@@ -1144,6 +1154,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
           authorName: authorName,
           audiobooks: books,
           heroTagSuffix: heroTagSuffix,
+          initialAuthorImageUrl: initialAuthorImageUrl,
         ),
       ),
     );
@@ -1216,23 +1227,24 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
               ),
             )
           : null,
-      onTap: () => _navigateToAudiobook(book, heroTagSuffix: 'library$heroSuffix'),
+      onTap: () => _navigateToAudiobook(book, heroTagSuffix: 'library$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,
         ),
       ),
     );
   }
 
-  Widget _buildAllBooksTab(BuildContext context) {
+  Widget _buildAllBooksTab(BuildContext context, S l10n) {
     final colorScheme = Theme.of(context).colorScheme;
     final maProvider = context.read<MusicAssistantProvider>();
 
@@ -1248,15 +1260,17 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     if (audiobooks.isEmpty) {
       if (_showFavoritesOnly) {
         return EmptyState.custom(
+          context: context,
           icon: Icons.favorite_border,
-          title: 'No favorite audiobooks',
+          title: l10n.noFavoriteAudiobooks,
-          subtitle: 'Tap the heart on an audiobook to add it to favorites',
+          subtitle: l10n.tapHeartAudiobook,
         );
       }
       return EmptyState.custom(
+        context: context,
         icon: MdiIcons.bookOutline,
-        title: 'No audiobooks',
+        title: l10n.noAudiobooks,
-        subtitle: 'Add audiobooks to your library to see them here',
+        subtitle: l10n.addAudiobooksHint,
         onRefresh: () => _loadAudiobooks(),
       );
     }
@@ -1317,7 +1331,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     final heroSuffix = _showFavoritesOnly ? '_fav' : '';
 
     return GestureDetector(
-      onTap: () => _navigateToAudiobook(book, heroTagSuffix: 'library$heroSuffix'),
+      onTap: () => _navigateToAudiobook(book, heroTagSuffix: 'library$heroSuffix', initialImageUrl: imageUrl),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
@@ -1338,6 +1352,8 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
                           ? CachedNetworkImage(
                               imageUrl: imageUrl,
                               fit: BoxFit.cover,
+                              fadeInDuration: Duration.zero,
+                              fadeOutDuration: Duration.zero,
                               placeholder: (_, __) => const SizedBox(),
                               errorWidget: (_, __, ___) => Center(
                                 child: Icon(
@@ -1405,7 +1421,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     );
   }
 
-  Widget _buildSeriesTab(BuildContext context) {
+  Widget _buildSeriesTab(BuildContext context, S l10n) {
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
     final maProvider = context.read<MusicAssistantProvider>();
@@ -1419,7 +1435,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
             CircularProgressIndicator(color: colorScheme.primary),
             const SizedBox(height: 16),
             Text(
-              'Loading series...',
+              l10n.loading,
               style: TextStyle(
                 color: colorScheme.onSurface.withOpacity(0.6),
                 fontSize: 14,
@@ -1452,7 +1468,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
                       ),
                       const SizedBox(height: 16),
                       Text(
-                        'No Series Found',
+                        l10n.noSeriesFound,
                         style: TextStyle(
                           color: colorScheme.onSurface,
                           fontSize: 20,
@@ -1462,8 +1478,8 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
                       const SizedBox(height: 8),
                       Text(
                         _seriesLoaded
-                            ? 'No series available from your audiobook library.\nPull to refresh.'
+                            ? l10n.noSeriesAvailable
-                            : 'Pull down to load series\nfrom Music Assistant',
+                            : l10n.pullToLoadSeries,
                         textAlign: TextAlign.center,
                         style: TextStyle(
                           color: colorScheme.onSurface.withOpacity(0.6),
@@ -1473,7 +1489,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
                       const SizedBox(height: 24),
                       FilledButton.tonal(
                         onPressed: _loadSeries,
-                        child: const Text('Load Series'),
+                        child: Text(l10n.loadSeries),
                       ),
                     ],
                   ),
@@ -1497,7 +1513,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
               itemCount: _series.length,
               padding: EdgeInsets.only(left: 8, right: 8, top: 8, bottom: BottomSpacing.withMiniPlayer),
               itemBuilder: (context, index) {
-                return _buildSeriesListTile(context, _series[index], maProvider);
+                return _buildSeriesListTile(context, _series[index], maProvider, l10n);
               },
             )
           : GridView.builder(
@@ -1512,13 +1528,13 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
               itemCount: _series.length,
               itemBuilder: (context, index) {
                 final series = _series[index];
-                return _buildSeriesCard(context, series, maProvider, maxCoverGridSize: _seriesViewMode == 'grid3' ? 2 : 3);
+                return _buildSeriesCard(context, series, maProvider, l10n, maxCoverGridSize: _seriesViewMode == 'grid3' ? 2 : 3);
               },
             ),
     );
   }
 
-  Widget _buildSeriesListTile(BuildContext context, AudiobookSeries series, MusicAssistantProvider maProvider) {
+  Widget _buildSeriesListTile(BuildContext context, AudiobookSeries series, MusicAssistantProvider maProvider, S l10n) {
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
 
@@ -1576,7 +1592,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
           final count = series.bookCount ?? _seriesBookCounts[series.id];
           if (count == null) return const SizedBox.shrink();
           return Text(
-            '$count ${count == 1 ? 'book' : 'books'}',
+            '$count ${count == 1 ? l10n.book : l10n.books}',
             style: textTheme.bodySmall?.copyWith(
               color: colorScheme.onSurface.withOpacity(0.7),
             ),
@@ -1599,7 +1615,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     );
   }
 
-  Widget _buildSeriesCard(BuildContext context, AudiobookSeries series, MusicAssistantProvider maProvider, {int maxCoverGridSize = 3}) {
+  Widget _buildSeriesCard(BuildContext context, AudiobookSeries series, MusicAssistantProvider maProvider, S l10n, {int maxCoverGridSize = 3}) {
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
 
@@ -1661,7 +1677,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
               return Padding(
                 padding: const EdgeInsets.only(top: 2),
                 child: Text(
-                  '$count ${count == 1 ? 'book' : 'books'}',
+                  '$count ${count == 1 ? l10n.book : l10n.books}',
                   style: textTheme.bodySmall?.copyWith(
                     color: colorScheme.onSurface.withOpacity(0.7),
                   ),
@@ -1833,7 +1849,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
   }
 
   // ============ PODCASTS TAB (Placeholder) ============
-  Widget _buildPodcastsComingSoonTab(BuildContext context) {
+  Widget _buildPodcastsComingSoonTab(BuildContext context, S l10n) {
     final colorScheme = Theme.of(context).colorScheme;
     return Center(
       child: Column(
@@ -1846,7 +1862,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
           ),
           const SizedBox(height: 16),
           Text(
-            'Podcasts',
+            l10n.podcasts,
             style: TextStyle(
               color: colorScheme.onSurface,
               fontSize: 20,
@@ -1855,7 +1871,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
           ),
           const SizedBox(height: 8),
           Text(
-            'Podcast support coming soon',
+            l10n.podcastSupportComingSoon,
             style: TextStyle(
               color: colorScheme.onSurface.withOpacity(0.6),
               fontSize: 14,
@@ -1867,7 +1883,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
   }
 
   // ============ ARTISTS TAB ============
-  Widget _buildArtistsTab(BuildContext context) {
+  Widget _buildArtistsTab(BuildContext context, S l10n) {
     // Use Selector for targeted rebuilds - only rebuild when artists or loading state changes
     return Selector<MusicAssistantProvider, (List<Artist>, bool)>(
       selector: (_, provider) => (provider.artists, provider.isLoading),
@@ -1887,12 +1903,14 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
         if (artists.isEmpty) {
           if (_showFavoritesOnly) {
             return EmptyState.custom(
+              context: context,
               icon: Icons.favorite_border,
-              title: 'No favorite artists',
+              title: l10n.noFavoriteArtists,
-              subtitle: 'Tap the heart on an artist to add them to favorites',
+              subtitle: l10n.tapHeartArtist,
             );
           }
           return EmptyState.artists(
+            context: context,
             onRefresh: () => context.read<MusicAssistantProvider>().loadLibrary(),
           );
         }
@@ -2050,7 +2068,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
   }
 
   // ============ ALBUMS TAB ============
-  Widget _buildAlbumsTab(BuildContext context) {
+  Widget _buildAlbumsTab(BuildContext context, S l10n) {
     // Use Selector for targeted rebuilds - only rebuild when albums or loading state changes
     return Selector<MusicAssistantProvider, (List<Album>, bool)>(
       selector: (_, provider) => (provider.albums, provider.isLoading),
@@ -2070,12 +2088,14 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
         if (albums.isEmpty) {
           if (_showFavoritesOnly) {
             return EmptyState.custom(
+              context: context,
               icon: Icons.favorite_border,
-              title: 'No favorite albums',
+              title: l10n.noFavoriteAlbums,
-              subtitle: 'Tap the heart on an album to add it to favorites',
+              subtitle: l10n.tapHeartAlbum,
             );
           }
           return EmptyState.albums(
+            context: context,
             onRefresh: () => context.read<MusicAssistantProvider>().loadLibrary(),
           );
         }
@@ -2176,7 +2196,10 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
         Navigator.push(
           context,
           FadeSlidePageRoute(
-            child: AlbumDetailsScreen(album: album),
+            child: AlbumDetailsScreen(
+              album: album,
+              initialImageUrl: imageUrl,
+            ),
           ),
         );
       },
@@ -2184,7 +2207,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
   }
 
   // ============ PLAYLISTS TAB ============
-  Widget _buildPlaylistsTab(BuildContext context) {
+  Widget _buildPlaylistsTab(BuildContext context, S l10n) {
     final colorScheme = Theme.of(context).colorScheme;
 
     if (_isLoadingPlaylists) {
@@ -2194,12 +2217,13 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     if (_playlists.isEmpty) {
       if (_showFavoritesOnly) {
         return EmptyState.custom(
+          context: context,
           icon: Icons.favorite_border,
-          title: 'No favorite playlists',
+          title: l10n.noFavoritePlaylists,
-          subtitle: 'Tap the heart on a playlist to add it to favorites',
+          subtitle: l10n.tapHeartPlaylist,
         );
       }
-      return EmptyState.playlists(onRefresh: () => _loadPlaylists());
+      return EmptyState.playlists(context: context, onRefresh: () => _loadPlaylists());
     }
 
     return RefreshIndicator(
@@ -2216,7 +2240,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
               padding: EdgeInsets.only(left: 8, right: 8, top: 8, bottom: BottomSpacing.navBarOnly),
               itemBuilder: (context, index) {
                 final playlist = _playlists[index];
-                return _buildPlaylistTile(context, playlist);
+                return _buildPlaylistTile(context, playlist, l10n);
               },
             )
           : GridView.builder(
@@ -2234,13 +2258,13 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
               itemCount: _playlists.length,
               itemBuilder: (context, index) {
                 final playlist = _playlists[index];
-                return _buildPlaylistGridCard(context, playlist);
+                return _buildPlaylistGridCard(context, playlist, l10n);
               },
             ),
     );
   }
 
-  Widget _buildPlaylistTile(BuildContext context, Playlist playlist) {
+  Widget _buildPlaylistTile(BuildContext context, Playlist playlist, S l10n) {
     final provider = context.read<MusicAssistantProvider>();
     final imageUrl = provider.api?.getImageUrl(playlist, size: 128);
     final colorScheme = Theme.of(context).colorScheme;
@@ -2274,8 +2298,8 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
       ),
       subtitle: Text(
         playlist.trackCount != null
-            ? '${playlist.trackCount} tracks'
+            ? '${playlist.trackCount} ${l10n.tracks}'
-            : playlist.owner ?? 'Playlist',
+            : playlist.owner ?? l10n.playlist,
         style: textTheme.bodySmall?.copyWith(color: colorScheme.onSurface.withOpacity(0.7)),
         maxLines: 1,
         overflow: TextOverflow.ellipsis,
@@ -2299,7 +2323,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     );
   }
 
-  Widget _buildPlaylistGridCard(BuildContext context, Playlist playlist) {
+  Widget _buildPlaylistGridCard(BuildContext context, Playlist playlist, S l10n) {
     final provider = context.read<MusicAssistantProvider>();
     final imageUrl = provider.api?.getImageUrl(playlist, size: 256);
     final colorScheme = Theme.of(context).colorScheme;
@@ -2363,8 +2387,8 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
           ),
           Text(
             playlist.trackCount != null
-                ? '${playlist.trackCount} tracks'
+                ? '${playlist.trackCount} ${l10n.tracks}'
-                : playlist.owner ?? 'Playlist',
+                : playlist.owner ?? l10n.playlist,
             style: textTheme.bodySmall?.copyWith(
               color: colorScheme.onSurface.withOpacity(0.7),
             ),
@@ -2377,7 +2401,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
   }
 
   // ============ TRACKS TAB (favorites only) ============
-  Widget _buildTracksTab(BuildContext context) {
+  Widget _buildTracksTab(BuildContext context, S l10n) {
     final colorScheme = Theme.of(context).colorScheme;
 
     if (_isLoadingTracks) {
@@ -2386,9 +2410,10 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
 
     if (_favoriteTracks.isEmpty) {
       return EmptyState.custom(
+        context: context,
         icon: Icons.favorite_border,
-        title: 'No favorite tracks',
+        title: l10n.noFavoriteTracks,
-        subtitle: 'Long-press a track and tap the heart to add it to favorites',
+        subtitle: l10n.longPressTrackHint,
       );
     }
 
@@ -2474,7 +2499,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
         final player = maProvider.selectedPlayer;
         if (player == null) {
           ScaffoldMessenger.of(context).showSnackBar(
-            const SnackBar(content: Text('No player selected')),
+            SnackBar(content: Text(S.of(context)!.noPlayerSelected)),
           );
           return;
         }

lib/screens/playlist_details_screen.dart

@@ -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(
+    final cacheKey = '${widget.provider}_${widget.itemId}';
-      widget.provider,
-      widget.itemId,
-    );
 
-    if (mounted) {
+    // 1. Show cached data immediately (if available)
-      setState(() {
+    final cachedTracks = maProvider.getCachedPlaylistTracks(cacheKey);
-        _tracks = tracks;
+    if (cachedTracks != null && cachedTracks.isNotEmpty) {
-        _isLoading = false;
+      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(
+                  Text(
-                    'Tracks',
+                    S.of(context)!.tracks,
-                    style: TextStyle(
+                    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(
+                SnackBar(
-                  content: Text('Playing track'),
+                  content: Text(S.of(context)!.playingTrack),
-                  duration: Duration(seconds: 1),
+                  duration: const Duration(seconds: 1),
                 ),
               );
             }

lib/screens/queue_screen.dart

@@ -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);

lib/screens/search_screen.dart

@@ -12,6 +12,7 @@ import '../widgets/common/disconnected_state.dart';
 import '../widgets/artist_avatar.dart';
 import 'album_details_screen.dart';
 import 'artist_details_screen.dart';
+import '../l10n/app_localizations.dart';
 
 class SearchScreen extends StatefulWidget {
   const SearchScreen({super.key});
@@ -140,7 +141,7 @@ class SearchScreenState extends State<SearchScreen> {
         setState(() {
           _isSearching = false;
           _hasSearched = true;
-          _searchError = 'Search failed. Please check your connection.';
+          _searchError = S.of(context)!.searchFailed;
         });
         if (keepFocus && _focusNode.hasFocus) {
           _focusNode.requestFocus();
@@ -166,7 +167,7 @@ class SearchScreenState extends State<SearchScreen> {
           cursorColor: colorScheme.primary,
           textInputAction: TextInputAction.search,
           decoration: InputDecoration(
-            hintText: 'Search music...',
+            hintText: S.of(context)!.searchMusic,
             hintStyle: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
             border: InputBorder.none,
             suffixIcon: _searchController.text.isNotEmpty
@@ -191,7 +192,7 @@ class SearchScreenState extends State<SearchScreen> {
         ),
       ),
       body: !maProvider.isConnected
-          ? DisconnectedState.simple()
+          ? DisconnectedState.simple(context)
           : _buildSearchContent(),
     );
   }
@@ -199,7 +200,12 @@ class SearchScreenState extends State<SearchScreen> {
   Widget _buildSearchContent() {
     final colorScheme = Theme.of(context).colorScheme;
 
-    if (_isSearching) {
+    // Show cached results even while searching - only show spinner if no cached results
+    final hasCachedResults = _searchResults['artists']?.isNotEmpty == true ||
+                             _searchResults['albums']?.isNotEmpty == true ||
+                             _searchResults['tracks']?.isNotEmpty == true;
+
+    if (_isSearching && !hasCachedResults) {
       return Center(
         child: CircularProgressIndicator(color: colorScheme.primary),
       );
@@ -217,7 +223,7 @@ class SearchScreenState extends State<SearchScreen> {
             ),
             const SizedBox(height: 16),
             Text(
-              'Search for artists, albums, or tracks',
+              S.of(context)!.searchForContent,
               style: TextStyle(
                 color: colorScheme.onBackground.withOpacity(0.5),
                 fontSize: 16,
@@ -250,7 +256,7 @@ class SearchScreenState extends State<SearchScreen> {
             const SizedBox(height: 16),
             FilledButton.tonal(
               onPressed: () => _performSearch(_searchController.text),
-              child: const Text('Retry'),
+              child: Text(S.of(context)!.retry),
             ),
           ],
         ),
@@ -264,7 +270,7 @@ class SearchScreenState extends State<SearchScreen> {
     final hasResults = artists.isNotEmpty || albums.isNotEmpty || tracks.isNotEmpty;
 
     if (!hasResults) {
-      return EmptyState.search();
+      return EmptyState.search(context: context);
     }
 
     return Column(
@@ -275,23 +281,23 @@ class SearchScreenState extends State<SearchScreen> {
           padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
           child: Row(
             children: [
-              _buildFilterChip('All', 'all'),
+              _buildFilterChip(S.of(context)!.all, 'all'),
               const SizedBox(width: 8),
               if (artists.isNotEmpty) ...[
-                _buildFilterChip('Artists', 'artists'),
+                _buildFilterChip(S.of(context)!.artists, 'artists'),
                 const SizedBox(width: 8),
               ],
               if (albums.isNotEmpty) ...[
-                _buildFilterChip('Albums', 'albums'),
+                _buildFilterChip(S.of(context)!.albums, 'albums'),
                 const SizedBox(width: 8),
               ],
               if (tracks.isNotEmpty) ...[
-                _buildFilterChip('Tracks', 'tracks'),
+                _buildFilterChip(S.of(context)!.tracks, 'tracks'),
               ],
             ],
           ),
         ),
-        
+
         // Results
         Expanded(
           child: Builder(
@@ -336,7 +342,7 @@ class SearchScreenState extends State<SearchScreen> {
     // Add artists section
     if ((_activeFilter == 'all' || _activeFilter == 'artists') && artists.isNotEmpty) {
       if (_activeFilter == 'all') {
-        items.add(_ListItem.header('Artists', artists.length));
+        items.add(_ListItem.header(S.of(context)!.artists, artists.length));
       }
       for (final artist in artists) {
         items.add(_ListItem.artist(artist));
@@ -347,7 +353,7 @@ class SearchScreenState extends State<SearchScreen> {
     // Add albums section
     if ((_activeFilter == 'all' || _activeFilter == 'albums') && albums.isNotEmpty) {
       if (_activeFilter == 'all') {
-        items.add(_ListItem.header('Albums', albums.length));
+        items.add(_ListItem.header(S.of(context)!.albums, albums.length));
       }
       for (final album in albums) {
         items.add(_ListItem.album(album));
@@ -358,7 +364,7 @@ class SearchScreenState extends State<SearchScreen> {
     // Add tracks section
     if ((_activeFilter == 'all' || _activeFilter == 'tracks') && tracks.isNotEmpty) {
       if (_activeFilter == 'all') {
-        items.add(_ListItem.header('Tracks', tracks.length));
+        items.add(_ListItem.header(S.of(context)!.tracks, tracks.length));
       }
       for (final track in tracks) {
         items.add(_ListItem.track(track));
@@ -428,7 +434,7 @@ class SearchScreenState extends State<SearchScreen> {
         overflow: TextOverflow.ellipsis,
       ),
       subtitle: Text(
-        'Artist',
+        S.of(context)!.artist,
         style: TextStyle(color: colorScheme.onSurface.withOpacity(0.6), fontSize: 12),
       ),
         onTap: () {
@@ -490,7 +496,10 @@ class SearchScreenState extends State<SearchScreen> {
           Navigator.push(
             context,
             MaterialPageRoute(
-              builder: (context) => AlbumDetailsScreen(album: album),
+              builder: (context) => AlbumDetailsScreen(
+                album: album,
+                initialImageUrl: imageUrl,
+              ),
             ),
           );
         },
@@ -556,7 +565,7 @@ class SearchScreenState extends State<SearchScreen> {
 
     if (maProvider.selectedPlayer == null) {
       ScaffoldMessenger.of(context).showSnackBar(
-        const SnackBar(content: Text('No player selected')),
+        SnackBar(content: Text(S.of(context)!.noPlayerSelected)),
       );
       return;
     }

lib/screens/settings_screen.dart

@@ -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,9 @@ class _SettingsScreenState extends State<SettingsScreen> {
   // Audiobook libraries
   List<Map<String, String>> _discoveredLibraries = [];
   Map<String, bool> _libraryEnabled = {};
+  // Player settings
+  bool _preferLocalPlayer = false;
+  bool _smartSortPlayers = false;
 
   @override
   void initState() {
@@ -79,6 +85,10 @@ 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();
+
     if (mounted) {
       setState(() {
         _showRecentAlbums = showRecent;
@@ -93,6 +103,8 @@ class _SettingsScreenState extends State<SettingsScreen> {
         _homeRowOrder = rowOrder;
         _discoveredLibraries = discovered;
         _libraryEnabled = libraryEnabled;
+        _preferLocalPlayer = preferLocal;
+        _smartSortPlayers = smartSort;
       });
     }
   }
@@ -106,25 +118,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 +246,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 +265,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
               );
             },
             color: colorScheme.onBackground,
-            tooltip: 'Debug Logs',
+            tooltip: S.of(context)!.debugLogs,
           ),
         ],
       ),
@@ -308,9 +321,9 @@ class _SettingsScreenState extends State<SettingsScreen> {
               child: FilledButton.tonalIcon(
                 onPressed: _disconnect,
                 icon: const Icon(Icons.logout_rounded),
-                label: const Text(
+                label: Text(
-                  'Disconnect',
+                  S.of(context)!.disconnect,
-                  style: TextStyle(
+                  style: const TextStyle(
                     fontSize: 16,
                     fontWeight: FontWeight.w500,
                   ),
@@ -329,7 +342,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 +353,14 @@ class _SettingsScreenState extends State<SettingsScreen> {
             Container(
               padding: const EdgeInsets.all(16),
               decoration: BoxDecoration(
-                color: colorScheme.surfaceVariant.withOpacity(0.3),
+                color: colorScheme.surfaceVariant.withOpacity(0.5),
-                borderRadius: BorderRadius.circular(12),
+                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 +371,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'),
+                              label: Text(S.of(context)!.light),
-                              icon: Icon(Icons.light_mode_rounded),
+                              icon: const Icon(Icons.light_mode_rounded),
                             ),
                             ButtonSegment<ThemeMode>(
                               value: ThemeMode.dark,
-                              label: Text('Dark'),
+                              label: Text(S.of(context)!.dark),
-                              icon: Icon(Icons.dark_mode_rounded),
+                              icon: const Icon(Icons.dark_mode_rounded),
                             ),
                             ButtonSegment<ThemeMode>(
                               value: ThemeMode.system,
-                              label: Text('System'),
+                              label: Text(S.of(context)!.system),
-                              icon: Icon(Icons.auto_mode_rounded),
+                              icon: const Icon(Icons.auto_mode_rounded),
                             ),
                           ],
                           selected: {themeProvider.themeMode},
@@ -384,7 +397,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 +406,9 @@ class _SettingsScreenState extends State<SettingsScreen> {
                               return colorScheme.onSurfaceVariant;
                             }),
                             side: WidgetStateProperty.all(BorderSide.none),
+                            shape: WidgetStateProperty.all(
+                              RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+                            ),
                           ),
                         ),
                       );
@@ -404,6 +420,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 +491,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 +521,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 +541,167 @@ class _SettingsScreenState extends State<SettingsScreen> {
 
             const SizedBox(height: 32),
 
+            // Language section
+            Text(
+              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),
+
             // Home Screen section
             Text(
-              'Home Screen',
+              S.of(context)!.homeScreen,
               style: textTheme.titleMedium?.copyWith(
                 color: colorScheme.onBackground,
                 fontWeight: FontWeight.bold,
@@ -474,7 +709,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
             ),
             const SizedBox(height: 8),
             Text(
-              'Choose which rows to display on the home screen',
+              S.of(context)!.chooseHomeScreenRows,
               style: textTheme.bodySmall?.copyWith(
                 color: colorScheme.onBackground.withOpacity(0.6),
               ),
@@ -551,7 +786,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 +794,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 +805,8 @@ class _SettingsScreenState extends State<SettingsScreen> {
               controller: _lastFmApiKeyController,
               style: TextStyle(color: colorScheme.onSurface),
               decoration: InputDecoration(
-                labelText: 'Last.fm API Key',
+                labelText: S.of(context)!.lastFmApiKey,
-                hintText: 'Get free key at last.fm/api',
+                hintText: S.of(context)!.lastFmApiKeyHint,
                 hintStyle: TextStyle(color: colorScheme.onSurface.withOpacity(0.38)),
                 filled: true,
                 fillColor: colorScheme.surfaceVariant.withOpacity(0.3),
@@ -607,8 +842,8 @@ class _SettingsScreenState extends State<SettingsScreen> {
               controller: _audioDbApiKeyController,
               style: TextStyle(color: colorScheme.onSurface),
               decoration: InputDecoration(
-                labelText: 'TheAudioDB API Key',
+                labelText: S.of(context)!.theAudioDbApiKey,
-                hintText: 'Use "2" for free tier or premium key',
+                hintText: S.of(context)!.theAudioDbApiKeyHint,
                 hintStyle: TextStyle(color: colorScheme.onSurface.withOpacity(0.38)),
                 filled: true,
                 fillColor: colorScheme.surfaceVariant.withOpacity(0.3),
@@ -643,7 +878,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 +886,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 +903,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 +921,9 @@ class _SettingsScreenState extends State<SettingsScreen> {
                             await SettingsService.toggleAbsLibrary(path, value);
                             if (mounted) {
                               ScaffoldMessenger.of(context).showSnackBar(
-                                const SnackBar(
+                                SnackBar(
-                                  content: Text('Pull to refresh the library to apply changes'),
+                                  content: Text(S.of(context)!.pullToRefresh),
-                                  duration: Duration(seconds: 2),
+                                  duration: const Duration(seconds: 2),
                                 ),
                               );
                             }
@@ -723,7 +958,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 +1007,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;
     }
   }
+
 }

lib/services/auth/auth_manager.dart

@@ -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,22 @@ 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');
+  }
+
   /// 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 +204,50 @@ class AuthManager {
 
       _logger.log('Checking MA API at: $apiUrl');
 
-      // Try to get server info - this tells us if auth is required
+      // Use IOClient to control redirect behavior for local IPs
-      // Note: The command is just 'info', not 'server/info'
+      final isLocalIp = _isLocalIpAddress(uri.host);
-      final response = await http.post(
+      http.Response response;
-        apiUrl,
+
-        headers: {'Content-Type': 'application/json'},
+      if (isLocalIp) {
-        body: jsonEncode({
+        // For local IPs, don't follow redirects - handle them explicitly
-          'command': 'info',
+        final client = HttpClient();
-        }),
+        try {
-      ).timeout(const Duration(seconds: 5));
+          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 +307,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 uri = Uri.parse(serverUrl);
-      final testUrl = serverUrl;
+      _logger.log('No-auth test URL: $serverUrl');
-      _logger.log('No-auth test URL: $testUrl');
 
-      final response = await http.get(
+      final isLocalIp = _isLocalIpAddress(uri.host);
-        Uri.parse(testUrl),
+      int statusCode;
-        // Don't follow redirects - we want to see if server requires auth
-      ).timeout(const Duration(seconds: 10));
 
-      _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;
       }
 

lib/services/cache_service.dart

@@ -1,4 +1,5 @@
 import '../models/media_item.dart';
+import '../models/player.dart';
 import '../services/debug_logger.dart';
 import '../constants/timings.dart';
 
@@ -28,6 +29,8 @@ class CacheService {
   final Map<String, DateTime> _searchCacheTime = {};
 
   // Player list caching
+  List<Player>? _cachedPlayers;
+  Player? _cachedSelectedPlayer;
   DateTime? _playersLastFetched;
 
   // Player track cache (for smooth swipe transitions)
@@ -219,6 +222,26 @@ 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];
 
@@ -249,6 +272,8 @@ class CacheService {
   void clearAll() {
     invalidateHomeCache();
     clearAllDetailCaches();
+    _cachedPlayers = null;
+    _cachedSelectedPlayer = null;
     _playersLastFetched = null;
   }
 }

lib/services/database_service.dart

@@ -156,4 +156,70 @@ class DatabaseService {
 
   /// Clear all cached data (useful for logout)
   Future<void> clearAllCache() => db.clearAllCache();
+
+  // ============================================
+  // 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);
 }

lib/services/music_assistant_api.dart

@@ -1069,16 +1069,14 @@ class MusicAssistantAPI {
         return [];
       }
 
-      // Batch fetch track details using parallel requests (max 5 concurrent)
+      // Step 1: Fetch tracks in batches and collect unique album URIs
-      final seenAlbumIds = <String>{};
+      final seenAlbumUris = <String>{};
-      final albums = <Album>[];
+      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 +1085,52 @@ 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 albumData = fullTrack?['album'] as Map<String, dynamic>?;
+            final albumUri = albumData?['uri'] as String?;
 
-            if (albumData != null) {
+            if (albumUri != null && !seenAlbumUris.contains(albumUri)) {
-              final albumId = albumData['item_id']?.toString() ?? albumData['uri']?.toString();
+              seenAlbumUris.add(albumUri);
-              if (albumId != null && !seenAlbumIds.contains(albumId)) {
+              albumUris.add(albumUri);
-                seenAlbumIds.add(albumId);
-                albums.add(Album.fromJson(albumData));
-              }
             }
           } 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');
@@ -2302,89 +2325,15 @@ class MusicAssistantAPI {
     return _eventStreams['sendspin_player']!.stream;
   }
 
-  /// Get Sendspin connection info for a player
+  // NOTE: The following Sendspin API methods were removed because they don't exist in MA:
-  /// Returns connection details including:
+  // - getSendspinConnectionInfo (sendspin/connection_info)
-  /// - local_ws_url: Direct WebSocket URL (e.g., ws://192.168.4.120:8927/sendspin)
+  // - sendspinOffer (sendspin/webrtc_offer)
-  /// - ice_servers: List of ICE/TURN servers for WebRTC fallback
+  // - sendspinAnswer (sendspin/webrtc_answer)
-  /// - player_id: The player's ID
+  // - sendspinIceCandidate (sendspin/ice_candidate)
-  Future<Map<String, dynamic>?> getSendspinConnectionInfo(String playerId) async {
+  //
-    try {
+  // Sendspin connection is handled directly via WebSocket to:
-      _logger.log('Sendspin: Getting connection info for player $playerId');
+  // - Local: ws://{server-ip}:8927/sendspin
-
+  // - External: wss://{server}/sendspin (via MA's proxy with auth)
-      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
-    }
-  }
 
   /// Update Sendspin player state
   /// Similar to updateBuiltinPlayerState but for Sendspin protocol

lib/services/offline_action_queue.dart

@@ -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';
+}

lib/services/recently_played_service.dart

@@ -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}');
@@ -151,6 +154,12 @@ class RecentlyPlayedService {
           } catch (_) {}
         }
 
+        // 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(
           itemId: item.mediaId,
           provider: metadata?['provider'] ?? 'library',
@@ -160,6 +169,7 @@ class RecentlyPlayedService {
           artists: item.artistName != null
               ? [Artist(itemId: '', provider: '', name: item.artistName!)]
               : null,
+          metadata: albumMetadata,
         ));
 
         if (albums.length >= limit) break;

lib/services/sendspin_service.dart

@@ -84,8 +84,16 @@ class SendspinService {
 
   bool _isDisposed = false;
 
+  // Auth token for proxy authentication (MA 2.7.1+)
+  String? _authToken;
+
   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 {
@@ -105,18 +113,18 @@ 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: Local network connections (ws://ip:8927/sendspin) are handled
-      // Note: We would need local_ws_url from getSendspinConnectionInfo API
+      // by the provider calling connectWithUrl() directly, not by this method.
-      // For now, skip this step and fall back to WebRTC (handled by provider)
 
       if (!connected) {
-        _logger.log('Sendspin: External connection failed, WebRTC fallback needed');
+        _logger.log('Sendspin: External proxy connection failed');
         _updateState(SendspinConnectionState.error);
         return false;
       }
@@ -158,10 +166,11 @@ class SendspinService {
   }
 
   /// 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 +185,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 +260,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 +348,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':

lib/services/settings_service.dart

@@ -15,12 +15,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';
@@ -265,6 +268,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,6 +366,28 @@ 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
   static String _makePlayerName(String ownerName) {
     // Handle possessive: "Chris" -> "Chris' Phone", "Mom" -> "Mom's Phone"

lib/theme/app_theme.dart

@@ -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}) {

lib/widgets/album_card.dart

@@ -97,6 +97,7 @@ class _AlbumCardState extends State<AlbumCard> {
               child: AlbumDetailsScreen(
                 album: widget.album,
                 heroTagSuffix: widget.heroTagSuffix,
+                initialImageUrl: imageUrl,
               ),
             ),
           );
@@ -119,7 +120,8 @@ class _AlbumCardState extends State<AlbumCard> {
                             fit: BoxFit.cover,
                             memCacheWidth: 256,
                             memCacheHeight: 256,
-                            fadeInDuration: const Duration(milliseconds: 150),
+                            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)

lib/widgets/album_row.dart

@@ -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> _albums = [];
-  List<Album>? _cachedAlbums; // Keep last loaded data to prevent flash
+  bool _isLoading = true;
   bool _hasLoaded = false;
 
   @override
@@ -34,21 +38,117 @@ class _AlbumRowState extends State<AlbumRow> with AutomaticKeepAliveClientMixin
   @override
   void initState() {
     super.initState();
-    _loadAlbumsOnce();
+    _loadAlbums();
   }
 
-  void _loadAlbumsOnce() {
+  Future<void> _loadAlbums() async {
-    if (!_hasLoaded) {
+    if (_hasLoaded) return;
-      _albumsFuture = widget.loadAlbums().then((albums) {
+    _hasLoaded = true;
-        _cachedAlbums = albums;
+
-        return albums;
+    // 1. Try to get cached data synchronously for instant display
-      });
+    final cachedAlbums = widget.getCachedAlbums?.call();
-      _hasLoaded = true;
+    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(
+        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,
+            ),
+          );
+        },
+      ),
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     _logger.startBuild('AlbumRow:${widget.title}');
@@ -78,65 +178,7 @@ class _AlbumRowState extends State<AlbumRow> with AutomaticKeepAliveClientMixin
             ),
           ),
           Expanded(
-            child: FutureBuilder<List<Album>>(
+            child: _buildContent(contentHeight, colorScheme),
-              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,
-                        ),
-                      );
-                    },
-                  ),
-                );
-              },
-            ),
           ),
           ],
         ),

lib/widgets/artist_avatar.dart

@@ -100,6 +100,8 @@ class _ArtistAvatarState extends State<ArtistAvatar> {
           width: widget.radius * 2,
           height: widget.radius * 2,
           fit: BoxFit.cover,
+          fadeInDuration: Duration.zero,
+          fadeOutDuration: Duration.zero,
           placeholder: (context, url) => Container(
             color: colorScheme.surfaceVariant,
             child: Icon(Icons.person_rounded, color: colorScheme.onSurfaceVariant),

lib/widgets/artist_card.dart

@@ -100,49 +100,50 @@ class _ArtistCardState extends State<ArtistCard> {
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.center,
           children: [
-            // Artist image - circular, constrained to be a proper circle
+            // Artist image - circular
-            Expanded(
+            // PERF: Use AspectRatio instead of LayoutBuilder to provide fixed geometry
-              child: Center(
+            // before Hero animation starts. This prevents grey icon flash caused by
-                child: LayoutBuilder(
+            // dynamic sizing inside the Hero widget.
-                  builder: (context, constraints) {
+            AspectRatio(
-                    // Use the smaller dimension to ensure a circle
+              aspectRatio: 1.0,
-                    final size = constraints.maxWidth < constraints.maxHeight
+              child: Hero(
-                        ? constraints.maxWidth
+                tag: HeroTags.artistImage + (widget.artist.uri ?? widget.artist.itemId) + suffix,
-                        : constraints.maxHeight;
+                child: ClipOval(
-                    return Hero(
+                  child: Container(
-                      tag: HeroTags.artistImage + (widget.artist.uri ?? widget.artist.itemId) + suffix,
+                    color: colorScheme.surfaceVariant,
-                      child: ClipOval(
+                    child: imageUrl != null
-                        child: Container(
+                        ? CachedNetworkImage(
-                          width: size,
+                            imageUrl: imageUrl,
-                          height: size,
+                            fit: BoxFit.cover,
-                          color: colorScheme.surfaceVariant,
+                            memCacheWidth: 256,
-                          child: imageUrl != null
+                            memCacheHeight: 256,
-                              ? CachedNetworkImage(
+                            fadeInDuration: Duration.zero,
-                                  imageUrl: imageUrl,
+                            fadeOutDuration: Duration.zero,
-                                  fit: BoxFit.cover,
+                            placeholder: (context, url) => const SizedBox(),
-                                  memCacheWidth: 256,
+                            errorWidget: (context, url, error) {
-                                  memCacheHeight: 256,
+                              // Try fallback on error (only for MA URLs, not fallback URLs)
-                                  fadeInDuration: const Duration(milliseconds: 150),
+                              if (!_maImageFailed && url == maImageUrl) {
-                                  placeholder: (context, url) => const SizedBox(),
+                                WidgetsBinding.instance.addPostFrameCallback((_) {
-                                  errorWidget: (context, url, error) {
+                                  _onImageError();
-                                    // Try fallback on error (only for MA URLs, not fallback URLs)
+                                });
-                                    if (!_maImageFailed && url == maImageUrl) {
+                              }
-                                      WidgetsBinding.instance.addPostFrameCallback((_) {
+                              return Center(
-                                        _onImageError();
+                                child: Icon(
-                                      });
+                                  Icons.person_rounded,
-                                    }
+                                  size: 64,
-                                    return Icon(
+                                  color: colorScheme.onSurfaceVariant,
-                                      Icons.person_rounded,
+                                ),
-                                      size: size * 0.55,
+                              );
-                                      color: colorScheme.onSurfaceVariant,
+                            },
-                                    );
+                          )
-                                  },
+                        : Center(
-                                )
+                            child: Icon(
-                              : Icon(Icons.person_rounded, size: size * 0.55, color: colorScheme.onSurfaceVariant),
+                              Icons.person_rounded,
-                        ),
+                              size: 64,
-                      ),
+                              color: colorScheme.onSurfaceVariant,
-                    );
+                            ),
-                  },
+                          ),
+                  ),
                 ),
               ),
             ),

lib/widgets/artist_row.dart

@@ -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> _artists = [];
-  List<Artist>? _cachedArtists; // Keep last loaded data to prevent flash
+  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() {
+  Future<void> _loadArtists() async {
-    if (!_hasLoaded) {
+    if (_hasLoaded) return;
-      _artistsFuture = widget.loadArtists().then((artists) {
+    _hasLoaded = true;
-        _cachedArtists = artists;
+
-        return artists;
+    // 1. Try to get cached data synchronously for instant display
-      });
+    final cachedArtists = widget.getCachedArtists?.call();
-      _hasLoaded = true;
+    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>>(
+            child: _buildContent(contentHeight, colorScheme),
-              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,
-                        ),
-                      );
-                    },
-                  ),
-                );
-              },
-            ),
           ),
           ],
         ),

lib/widgets/audiobook_row.dart

@@ -173,6 +173,7 @@ class _AudiobookCard extends StatelessWidget {
             child: AudiobookDetailScreen(
               audiobook: audiobook,
               heroTagSuffix: heroTagSuffix,
+              initialImageUrl: imageUrl,
             ),
           ),
         );
@@ -195,6 +196,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,

lib/widgets/common/disconnected_state.dart

@@ -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(
+  factory DisconnectedState.simple(BuildContext context) => DisconnectedState(
-        title: 'Not connected to Music Assistant',
+        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',
+        title: S.of(context)!.notConnected,
-        actionLabel: 'Configure Server',
+        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',
+        title: S.of(context)!.notConnectedTitle,
-        subtitle: 'Connect to your Music Assistant server to start listening',
+        subtitle: S.of(context)!.connectHint,
-        actionLabel: 'Configure Server',
+        actionLabel: S.of(context)!.configureServer,
         actionIcon: Icons.settings_rounded,
         onAction: onSettings,
         iconSize: 80,

lib/widgets/common/empty_state.dart

@@ -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(
+  factory EmptyState.artists({VoidCallback? onRefresh, required BuildContext context}) {
-        icon: Icons.person_outline_rounded,
+    final s = S.of(context)!;
-        message: 'No artists found',
+    return EmptyState(
-        actionLabel: onRefresh != null ? 'Refresh' : null,
+      icon: Icons.person_outline_rounded,
-        onAction: onRefresh,
+      message: s.noArtistsFound,
-      );
+      actionLabel: onRefresh != null ? s.refresh : null,
+      onAction: onRefresh,
+    );
+  }
 
   /// Creates an empty state for albums
-  factory EmptyState.albums({VoidCallback? onRefresh}) => EmptyState(
+  factory EmptyState.albums({VoidCallback? onRefresh, required BuildContext context}) {
-        icon: Icons.album_outlined,
+    final s = S.of(context)!;
-        message: 'No albums found',
+    return EmptyState(
-        actionLabel: onRefresh != null ? 'Refresh' : null,
+      icon: Icons.album_outlined,
-        onAction: onRefresh,
+      message: s.noAlbumsFound,
-      );
+      actionLabel: onRefresh != null ? s.refresh : null,
+      onAction: onRefresh,
+    );
+  }
 
   /// Creates an empty state for tracks
-  factory EmptyState.tracks({VoidCallback? onRefresh}) => EmptyState(
+  factory EmptyState.tracks({VoidCallback? onRefresh, required BuildContext context}) {
-        icon: Icons.music_note_outlined,
+    final s = S.of(context)!;
-        message: 'No tracks found',
+    return EmptyState(
-        actionLabel: onRefresh != null ? 'Refresh' : null,
+      icon: Icons.music_note_outlined,
-        onAction: onRefresh,
+      message: s.noTracksFound,
-      );
+      actionLabel: onRefresh != null ? s.refresh : null,
+      onAction: onRefresh,
+    );
+  }
 
   /// Creates an empty state for playlists
-  factory EmptyState.playlists({VoidCallback? onRefresh}) => EmptyState(
+  factory EmptyState.playlists({VoidCallback? onRefresh, required BuildContext context}) {
-        icon: Icons.playlist_play_rounded,
+    final s = S.of(context)!;
-        message: 'No playlists found',
+    return EmptyState(
-        actionLabel: onRefresh != null ? 'Refresh' : null,
+      icon: Icons.playlist_play_rounded,
-        onAction: onRefresh,
+      message: s.noPlaylistsFound,
-      );
+      actionLabel: onRefresh != null ? s.refresh : null,
+      onAction: onRefresh,
+    );
+  }
 
   /// Creates an empty state for queue
-  factory EmptyState.queue() => const EmptyState(
+  factory EmptyState.queue({required BuildContext context}) {
-        icon: Icons.queue_music,
+    final s = S.of(context)!;
-        message: 'Queue is empty',
+    return EmptyState(
-      );
+      icon: Icons.queue_music,
+      message: s.queueIsEmpty,
+    );
+  }
 
   /// Creates an empty state for search results
-  factory EmptyState.search() => const EmptyState(
+  factory EmptyState.search({required BuildContext context}) {
-        icon: Icons.search_off_rounded,
+    final s = S.of(context)!;
-        message: 'No results found',
+    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,

lib/widgets/expandable_player.dart

@@ -10,10 +10,12 @@ import '../models/player.dart';
 import '../services/animation_debugger.dart';
 import '../theme/palette_helper.dart';
 import '../theme/theme_provider.dart';
+import '../l10n/app_localizations.dart';
 import 'animated_icon_button.dart';
 import 'global_player_overlay.dart';
 import 'volume_control.dart';
 import 'player/player_widgets.dart';
+import 'player/mini_player_content.dart';
 
 /// A unified player widget that seamlessly expands from mini to full-screen.
 ///
@@ -24,9 +26,17 @@ class ExpandablePlayer extends StatefulWidget {
   /// Slide offset for hiding the mini player (0.0 = visible, 1.0 = hidden below screen)
   final double slideOffset;
 
+  /// Bounce offset for the player reveal animation (moves mini player down slightly)
+  final double bounceOffset;
+
+  /// Callback when swipe-down gesture triggers player reveal
+  final VoidCallback? onRevealPlayers;
+
   const ExpandablePlayer({
     super.key,
     this.slideOffset = 0.0,
+    this.bounceOffset = 0.0,
+    this.onRevealPlayers,
   });
 
   @override
@@ -90,6 +100,18 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
   String? _lastMeasuredTrackName;
   double? _lastMeasuredTitleWidth;
 
+  // Gesture-driven expansion state
+  bool _isVerticalDragging = false;
+  double _dragStartY = 0;
+  double _dragStartValue = 0;
+
+  // Maximum drag distance for full expand/collapse
+  static const double _maxDragDistance = 300.0;
+
+  // Thresholds for committing expand/collapse
+  static const double _commitPositionThreshold = 0.3; // 30% progress
+  static const double _commitVelocityThreshold = 800.0; // px/s
+
   @override
   void initState() {
     super.initState();
@@ -97,6 +119,8 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
       duration: const Duration(milliseconds: 300),
       vsync: this,
     );
+
+    // Simple curved animation - performant and smooth
     _expandAnimation = CurvedAnimation(
       parent: _controller,
       curve: Curves.easeOutCubic,
@@ -127,7 +151,9 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
     );
 
     _controller.addStatusListener((status) {
-      if (status == AnimationStatus.forward) {
+      // PERF: Load queue after animation completes, not during
+      // This prevents network I/O from competing with animation frames
+      if (status == AnimationStatus.completed) {
         _loadQueue();
       } else if (status == AnimationStatus.dismissed) {
         // Close queue panel when player collapses
@@ -181,23 +207,94 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
     AnimationDebugger.recordFrame(_controller.value);
   }
 
+  // Animation durations - asymmetric for snappier collapse
+  static const Duration _expandDuration = Duration(milliseconds: 280);
+  static const Duration _collapseDuration = Duration(milliseconds: 200);
+
   void expand() {
+    if (_isVerticalDragging) return;
     AnimationDebugger.startSession('playerExpand');
+    _controller.duration = _expandDuration;
     _controller.forward().then((_) {
       AnimationDebugger.endSession();
     });
   }
 
   void collapse() {
+    if (_isVerticalDragging) return;
     AnimationDebugger.startSession('playerCollapse');
     // Instantly hide queue panel when collapsing to avoid visual glitches
     // during Android's predictive back gesture
     _queuePanelController.value = 0;
+    _controller.duration = _collapseDuration;
     _controller.reverse().then((_) {
       AnimationDebugger.endSession();
     });
   }
 
+  /// Handle vertical drag start - begin gesture-driven expansion
+  void _handleVerticalDragStart(DragStartDetails details) {
+    _isVerticalDragging = true;
+    _dragStartY = details.globalPosition.dy;
+    _dragStartValue = _controller.value;
+    _controller.stop(); // Stop any running animation
+  }
+
+  /// Handle vertical drag update - finger tracking
+  void _handleVerticalDragUpdate(DragUpdateDetails details) {
+    if (!_isVerticalDragging) return;
+
+    final dragDelta = _dragStartY - details.globalPosition.dy;
+    // Swipe up = positive delta = expand (increase value)
+    // Swipe down = negative delta = collapse (decrease value)
+    final normalizedDelta = dragDelta / _maxDragDistance;
+    final newValue = (_dragStartValue + normalizedDelta).clamp(0.0, 1.0);
+
+    _controller.value = newValue;
+  }
+
+  /// Handle vertical drag end - decide to commit or snap back
+  void _handleVerticalDragEnd(DragEndDetails details) {
+    if (!_isVerticalDragging) return;
+    _isVerticalDragging = false;
+
+    final velocity = details.primaryVelocity ?? 0;
+    final currentValue = _controller.value;
+
+    // Determine direction based on velocity first, then position
+    bool shouldExpand;
+    if (velocity.abs() > _commitVelocityThreshold) {
+      // High velocity: use velocity direction (negative = swipe up = expand)
+      shouldExpand = velocity < 0;
+    } else if (currentValue > _commitPositionThreshold && currentValue < (1 - _commitPositionThreshold)) {
+      // In the middle zone: use velocity direction if any, otherwise snap to nearest
+      shouldExpand = velocity < 0 || (velocity == 0 && currentValue > 0.5);
+    } else {
+      // Near edges: commit to nearest endpoint
+      shouldExpand = currentValue > 0.5;
+    }
+
+    // Animate to target with appropriate duration
+    if (shouldExpand) {
+      if (currentValue < 1.0) {
+        AnimationDebugger.startSession('playerExpand');
+        _controller.duration = _expandDuration;
+        _controller.forward().then((_) {
+          AnimationDebugger.endSession();
+        });
+      }
+    } else {
+      if (currentValue > 0.0) {
+        AnimationDebugger.startSession('playerCollapse');
+        _queuePanelController.value = 0;
+        _controller.duration = _collapseDuration;
+        _controller.reverse().then((_) {
+          AnimationDebugger.endSession();
+        });
+      }
+    }
+  }
+
   bool get isExpanded => _controller.value > 0.5;
 
   double get expansionProgress => _controller.value;
@@ -226,24 +323,49 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
   Future<void> _loadQueue() async {
     if (_isLoadingQueue) return;
 
-    setState(() => _isLoadingQueue = true);
-
     final maProvider = context.read<MusicAssistantProvider>();
     final player = maProvider.selectedPlayer;
 
-    if (player != null && maProvider.api != null) {
+    if (player == null) {
-      final queue = await maProvider.api!.getQueue(player.playerId);
+      if (mounted) setState(() => _isLoadingQueue = false);
-      if (mounted) {
+      return;
-        setState(() {
+    }
-          _queue = queue;
+
-          _isLoadingQueue = false;
+    // 1. Show cached queue immediately (if available)
-        });
+    final cachedQueue = await maProvider.getCachedQueue(player.playerId);
-      }
+    if (cachedQueue != null && cachedQueue.items.isNotEmpty && mounted) {
+      setState(() {
+        _queue = cachedQueue;
+        _isLoadingQueue = false;
+      });
     } else {
-      if (mounted) {
+      setState(() => _isLoadingQueue = true);
-        setState(() => _isLoadingQueue = false);
+    }
+
+    // 2. Fetch fresh queue in background
+    if (maProvider.api != null) {
+      try {
+        final freshQueue = await maProvider.getQueue(player.playerId);
+        if (mounted && freshQueue != null) {
+          // Only update if queue changed
+          final queueChanged = _queue == null ||
+              _queue!.items.length != freshQueue.items.length ||
+              _queue!.currentIndex != freshQueue.currentIndex;
+          if (queueChanged) {
+            setState(() {
+              _queue = freshQueue;
+              _isLoadingQueue = false;
+            });
+          }
+        }
+      } catch (e) {
+        // Silent failure - keep showing cached queue
       }
     }
+
+    if (mounted && _isLoadingQueue) {
+      setState(() => _isLoadingQueue = false);
+    }
   }
 
   Future<void> _extractColors(String imageUrl) async {
@@ -323,14 +445,15 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
     }
   }
 
-  /// Toggle favorite status for current track
+  /// Toggle favorite status for current track (with offline queuing support)
   Future<void> _toggleCurrentTrackFavorite(dynamic currentTrack) async {
     if (currentTrack == null) return;
 
     final maProvider = context.read<MusicAssistantProvider>();
-    if (maProvider.api == null) return;
 
     try {
+      bool success;
+
       if (_isCurrentTrackFavorite) {
         // Remove from favorites - need library_item_id (numeric)
         int? libraryItemId;
@@ -352,7 +475,10 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
         }
 
         if (libraryItemId != null) {
-          await maProvider.api!.removeFromFavorites('track', libraryItemId);
+          success = await maProvider.removeFromFavorites(
+            mediaType: 'track',
+            libraryItemId: libraryItemId,
+          );
         } else {
           throw Exception('Could not determine library ID for this track');
         }
@@ -385,22 +511,43 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
           }
         }
 
-        await maProvider.api!.addToFavorites('track', actualItemId, actualProvider);
+        success = await maProvider.addToFavorites(
+          mediaType: 'track',
+          itemId: actualItemId,
+          provider: actualProvider,
+        );
       }
 
-      // Toggle local state
+      if (success) {
-      setState(() {
+        // Toggle local state
-        _isCurrentTrackFavorite = !_isCurrentTrackFavorite;
+        setState(() {
-      });
+          _isCurrentTrackFavorite = !_isCurrentTrackFavorite;
+        });
 
-      // Invalidate home cache so favorites are updated
+        // Invalidate home cache so favorites are updated
-      maProvider.invalidateHomeCache();
+        maProvider.invalidateHomeCache();
+
+        // Show feedback (different message if offline)
+        if (mounted) {
+          final isOffline = !maProvider.isConnected;
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(
+              content: Text(
+                isOffline
+                    ? S.of(context)!.actionQueuedForSync
+                    : (_isCurrentTrackFavorite ? S.of(context)!.addedToFavorites : S.of(context)!.removedFromFavorites),
+              ),
+              duration: const Duration(seconds: 1),
+            ),
+          );
+        }
+      }
     } catch (e) {
       // Show error feedback
       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),
           ),
         );
@@ -849,9 +996,10 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
     final bottomOffset = bottomNavSpace + _collapsedMargin;
     final width = screenSize.width - (_collapsedMargin * 2);
 
-    // Apply slide offset for hiding
+    // Apply slide offset for hiding and bounce offset for reveal animation
     final slideDownAmount = widget.slideOffset * (_collapsedHeight + bottomOffset + 20);
-    final adjustedBottomOffset = bottomOffset - slideDownAmount;
+    final bounceDownAmount = widget.bounceOffset;
+    final adjustedBottomOffset = bottomOffset - slideDownAmount - bounceDownAmount;
 
     final availablePlayers = _getAvailablePlayersSorted(maProvider);
     final hasMultiplePlayers = availablePlayers.length > 1;
@@ -860,7 +1008,13 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
       left: _collapsedMargin,
       right: _collapsedMargin,
       bottom: adjustedBottomOffset,
-      child: DeviceSelectorBar(
+      child: GestureDetector(
+        onVerticalDragUpdate: (details) {
+          if (details.primaryDelta! > 5 && widget.onRevealPlayers != null) {
+            widget.onRevealPlayers!();
+          }
+        },
+        child: DeviceSelectorBar(
         selectedPlayer: selectedPlayer,
         peekPlayer: _peekPlayer,
         hasMultiplePlayers: hasMultiplePlayers,
@@ -896,6 +1050,7 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
           _handleHorizontalDragEnd(details, maProvider);
         },
       ),
+      ),
     );
   }
 
@@ -953,11 +1108,14 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
     final expandedHeight = screenSize.height - bottomNavSpace;
 
     // Apply slide offset to hide mini player (slides down off-screen)
-    // Only apply when collapsed (t == 0), don't affect expanded state
+    // Apply bounce offset for reveal animation (small downward movement)
+    // Smoothly fade out offsets as animation progresses (continuous, no discontinuity)
     final slideDownAmount = widget.slideOffset * (_collapsedHeight + collapsedBottomOffset + 20);
-    final slideAdjustedBottomOffset = t < 0.1
+    final bounceDownAmount = widget.bounceOffset;
-        ? collapsedBottomOffset - slideDownAmount
+    // Fade out slide/bounce effects smoothly over first 15% of animation
-        : _lerpDouble(collapsedBottomOffset, expandedBottomOffset, t);
+    final offsetFade = (1.0 - (t / 0.15)).clamp(0.0, 1.0);
+    final baseBottomOffset = _lerpDouble(collapsedBottomOffset, expandedBottomOffset, t);
+    final slideAdjustedBottomOffset = baseBottomOffset - (slideDownAmount + bounceDownAmount) * offsetFade;
 
     final collapsedWidth = screenSize.width - (_collapsedMargin * 2);
     final width = _lerpDouble(collapsedWidth, screenSize.width, t);
@@ -996,20 +1154,18 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
     final expandedArtTop = topPadding + headerHeight + 16;
     final artTop = _lerpDouble(collapsedArtTop, expandedArtTop, t);
 
-    // Typography - clear hierarchy
+    // Typography - uses shared MiniPlayerLayout constants for collapsed state
-    // Title: bold, prominent (24px)
+    final titleFontSize = _lerpDouble(MiniPlayerLayout.primaryFontSize, 24.0, t);
-    // Artist: medium weight, secondary (18px expanded, was 16px)
+    final artistFontSize = _lerpDouble(MiniPlayerLayout.secondaryFontSize, 18.0, t);
-    // Album: light, tertiary (15px expanded, was 13px)
-    final titleFontSize = _lerpDouble(16.0, 24.0, t);
-    final artistFontSize = _lerpDouble(14.0, 18.0, t); // Increased from 16 to 18
 
-    final collapsedTitleLeft = _collapsedArtSize + 8; // Reduced from 12 to 8 (4px less)
     final expandedTitleLeft = contentPadding;
-    final titleLeft = _lerpDouble(collapsedTitleLeft, expandedTitleLeft, t);
+    final titleLeft = _lerpDouble(MiniPlayerLayout.textLeft, expandedTitleLeft, t);
 
-    final collapsedTitleTop = (_collapsedHeight - 36) / 2; // Centered vertically (adjusted for increased track/artist gap)
+    final collapsedTitleTop = MiniPlayerLayout.primaryTop;
 
-    final collapsedTitleWidth = screenSize.width - _collapsedArtSize - 150;
+    // Controls: 36 (prev) + 34 (play) + 36 (next) + 8 (right margin) = 114px from widget right
+    // For 8px gap: text ends at widgetWidth - 114 - 8 = widgetWidth - 122
+    final collapsedTitleWidth = collapsedWidth - MiniPlayerLayout.textLeft - 122;
     final expandedTitleWidth = screenSize.width - (contentPadding * 2);
     final titleWidth = _lerpDouble(collapsedTitleWidth, expandedTitleWidth, t);
 
@@ -1066,7 +1222,7 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
     final titleTop = _lerpDouble(collapsedTitleTop, expandedTitleTop, t);
 
     // Artist positioned dynamically based on actual title height
-    final collapsedArtistTop = collapsedTitleTop + 22; // Increased gap from 18 to 22
+    final collapsedArtistTop = MiniPlayerLayout.secondaryTop;
     final expandedArtistTop = expandedTitleTop + expandedTitleHeight + titleToArtistGap;
     final artistTop = _lerpDouble(collapsedArtistTop, expandedArtistTop, t);
 
@@ -1098,7 +1254,8 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
     final selectedPlayerId = selectedPlayer.playerId;
 
     // Calculate slide offset for mini player content (only when collapsed)
-    final miniPlayerSlideOffset = t < 0.1 ? _slideOffset * collapsedWidth : 0.0;
+    // Smoothly fade out horizontal slide offset (for device switching) as animation progresses
+    final miniPlayerSlideOffset = _slideOffset * collapsedWidth * offsetFade;
 
     return Positioned(
       left: horizontalMargin,
@@ -1109,13 +1266,47 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
         behavior: HitTestBehavior.translucent,
         // Only handle tap when collapsed - when expanded, let children handle their own taps
         onTap: isExpanded ? null : expand,
-        onVerticalDragUpdate: (details) {
+        onVerticalDragStart: (details) {
-          if (details.primaryDelta! < -10 && !isExpanded) {
+          // For expanded player or queue panel: start tracking immediately
-            expand();
+          // For collapsed player: defer decision until we know swipe direction
-          } else if (details.primaryDelta! > 10 && isExpanded && !isQueuePanelOpen) {
+          if (isExpanded || isQueuePanelOpen) {
-            collapse();
+            _handleVerticalDragStart(details);
           }
         },
+        onVerticalDragUpdate: (details) {
+          final delta = details.primaryDelta ?? 0;
+
+          // Handle queue panel close
+          if (isQueuePanelOpen && delta > 0) {
+            _toggleQueuePanel();
+            return;
+          }
+
+          // Collapsed + not yet tracking: decide based on direction
+          if (!isExpanded && !_isVerticalDragging) {
+            if (delta > 5 && widget.onRevealPlayers != null) {
+              // Swipe down → show player reveal
+              widget.onRevealPlayers!();
+              return;
+            } else if (delta < -5) {
+              // Swipe up → start expand tracking
+              _handleVerticalDragStart(DragStartDetails(
+                globalPosition: details.globalPosition,
+                localPosition: details.localPosition,
+              ));
+            } else {
+              // Not enough movement yet, wait for more
+              return;
+            }
+          }
+
+          // Gesture-driven expand/collapse
+          _handleVerticalDragUpdate(details);
+        },
+        onVerticalDragEnd: (details) {
+          // Finish gesture-driven expansion
+          _handleVerticalDragEnd(details);
+        },
         onHorizontalDragStart: (details) {
           _horizontalDragStartX = details.globalPosition.dx;
         },
@@ -1172,61 +1363,54 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
                 // Shows played portion with brighter color, unplayed with darker
                 // Starts after album art so progress is visible
                 // Slides with content during swipe, hidden during transition if peek available
+                // GPU PERF: Use conditional rendering + color alpha instead of Opacity
+                // to avoid double saveLayer (Opacity + ClipRRect)
                 if (t < 0.5 && currentTrack?.duration != null && !(_inTransition && t < 0.1 && _peekPlayer != null))
                   Positioned(
-                    left: _collapsedArtSize + miniPlayerSlideOffset,
+                      left: _collapsedArtSize + miniPlayerSlideOffset,
-                    top: 0,
+                      top: 0,
-                    width: width - _collapsedArtSize,
+                      width: width - _collapsedArtSize,
-                    bottom: 0,
+                      bottom: 0,
-                    child: ValueListenableBuilder<int>(
+                      child: ValueListenableBuilder<int>(
-                      valueListenable: _progressNotifier,
+                        valueListenable: _progressNotifier,
-                      builder: (context, elapsedSeconds, _) {
+                        builder: (context, elapsedSeconds, _) {
-                        final totalSeconds = currentTrack!.duration!.inSeconds;
+                          final totalSeconds = currentTrack!.duration!.inSeconds;
-                        if (totalSeconds <= 0) return const SizedBox.shrink();
+                          if (totalSeconds <= 0) return const SizedBox.shrink();
-                        final progress = (elapsedSeconds / totalSeconds).clamp(0.0, 1.0);
+                          final progress = (elapsedSeconds / totalSeconds).clamp(0.0, 1.0);
-                        // Fade out as we expand
+                          // Fade out as we expand - use color alpha instead of Opacity widget
-                        final progressOpacity = (1.0 - (t / 0.5)).clamp(0.0, 1.0);
+                          final progressOpacity = (1.0 - (t / 0.5)).clamp(0.0, 1.0);
-                        final progressAreaWidth = width - _collapsedArtSize;
+                          final progressAreaWidth = width - _collapsedArtSize;
-                        return Opacity(
+                          return ClipRRect(
-                          opacity: progressOpacity,
-                          child: ClipRRect(
                             borderRadius: BorderRadius.only(
                               topRight: Radius.circular(borderRadius),
                               bottomRight: Radius.circular(borderRadius),
                             ),
+                            clipBehavior: Clip.hardEdge,
                             child: Align(
                               alignment: Alignment.centerLeft,
                               child: Container(
                                 width: progressAreaWidth * progress,
                                 height: height,
-                                color: collapsedBg,
+                                color: collapsedBg.withOpacity(progressOpacity),
                               ),
                             ),
-                          ),
+                          );
-                        );
+                        },
-                      },
+                      ),
                     ),
-                  ),
 
                 // Peek player content (shows when dragging OR during transition)
                 // Show when: actively dragging (slideOffset != 0) OR in transition state
                 // Must have peek data to render
                 if (t < 0.1 && _peekPlayer != null && (_slideOffset.abs() > 0.01 || _inTransition))
                   _buildPeekContent(
-                    maProvider: maProvider,
+                    context: context,
                     peekPlayer: _peekPlayer,
                     peekImageUrl: _peekImageUrl,
                     slideOffset: _slideOffset,
                     containerWidth: collapsedWidth,
-                    artSize: _collapsedArtSize,
+                    backgroundColor: collapsedBg,
-                    titleLeft: collapsedTitleLeft,
-                    titleTop: collapsedTitleTop,
-                    titleWidth: collapsedTitleWidth,
-                    artistTop: collapsedArtistTop,
-                    titleFontSize: 16.0,
-                    artistFontSize: 14.0,
                     textColor: textColor,
-                    colorScheme: colorScheme,
                   ),
 
                 // Album art - with slide animation when collapsed
@@ -1298,12 +1482,13 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
                         style: TextStyle(
                           color: textColor,
                           fontSize: titleFontSize,
-                          fontWeight: t > 0.5 ? FontWeight.w600 : FontWeight.w500,
+                          fontWeight: t > 0.5 ? FontWeight.w600 : MiniPlayerLayout.primaryFontWeight,
                           letterSpacing: t > 0.5 ? -0.5 : 0,
-                          height: 1.2,
+                          height: t > 0.5 ? 1.2 : null, // Only use line height when expanded
                         ),
                         textAlign: t > 0.5 ? TextAlign.center : TextAlign.left,
                         maxLines: t > 0.5 ? 2 : 1,
+                        softWrap: t > 0.5, // false in collapsed to ensure ellipsis truncation
                         overflow: TextOverflow.ellipsis,
                       ),
                     ),
@@ -1322,15 +1507,16 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
                       width: titleWidth,
                       child: Text(
                         maProvider.isPlayingAudiobook
-                            ? (maProvider.currentAudiobook?.authorsString ?? 'Unknown Author')
+                            ? (maProvider.currentAudiobook?.authorsString ?? S.of(context)!.unknownAuthor)
                             : currentTrack.artistsString,
                         style: TextStyle(
-                          color: textColor.withOpacity(t > 0.5 ? 0.7 : 0.6),
+                          color: textColor.withOpacity(t > 0.5 ? 0.7 : MiniPlayerLayout.secondaryTextOpacity),
                           fontSize: artistFontSize,
                           fontWeight: t > 0.5 ? FontWeight.w400 : FontWeight.normal,
                         ),
                         textAlign: t > 0.5 ? TextAlign.center : TextAlign.left,
                         maxLines: 1,
+                        softWrap: t > 0.5, // false in collapsed to ensure ellipsis truncation
                         overflow: TextOverflow.ellipsis,
                       ),
                     ),
@@ -1382,7 +1568,7 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
                           ),
                           const SizedBox(width: 6),
                           Text(
-                            maProvider.currentAudioFormat ?? 'PCM Audio',
+                            maProvider.currentAudioFormat ?? S.of(context)!.pcmAudio,
                             style: TextStyle(
                               color: primaryColor.withOpacity(0.7),
                               fontSize: 12,
@@ -1438,7 +1624,7 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
                                           } catch (e) {
                                             if (mounted) {
                                               ScaffoldMessenger.of(context).showSnackBar(
-                                                SnackBar(content: Text('Error seeking: $e')),
+                                                SnackBar(content: Text(S.of(context)!.errorSeeking(e.toString()))),
                                               );
                                             }
                                           } finally {
@@ -1705,157 +1891,49 @@ class ExpandablePlayerState extends State<ExpandablePlayer>
   }
 
   /// Build the peek player content that slides in from the edge during drag
+  /// Uses shared MiniPlayerContent for consistency
   Widget _buildPeekContent({
-    required MusicAssistantProvider maProvider,
+    required BuildContext context,
     required dynamic peekPlayer,
     required String? peekImageUrl,
     required double slideOffset,
     required double containerWidth,
-    required double artSize,
+    required Color backgroundColor,
-    required double titleLeft,
-    required double titleTop,
-    required double titleWidth,
-    required double artistTop,
-    required double titleFontSize,
-    required double artistFontSize,
     required Color textColor,
-    required ColorScheme colorScheme,
   }) {
     // Calculate sliding position
-    // During transition (_inTransition = true), peek should be at center (offset 0)
-    // When sliding left (negative offset), peek comes from right
-    // When sliding right (positive offset), peek comes from left
-
     double peekBaseOffset;
 
     if (_inTransition && slideOffset.abs() < 0.01) {
-      // During transition with slideOffset at 0, show peek at center
       peekBaseOffset = 0.0;
     } else {
       final isFromRight = slideOffset < 0;
       final peekProgress = slideOffset.abs();
-
-      // Position calculation:
-      // From right: starts at containerWidth (off right edge), moves to 0 as progress increases
-      // From left: starts at -containerWidth (off left edge), moves to 0 as progress increases
       peekBaseOffset = isFromRight
-          ? containerWidth * (1 - peekProgress)  // Slides in from right
+          ? containerWidth * (1 - peekProgress)
-          : -containerWidth * (1 - peekProgress); // Slides in from left
+          : -containerWidth * (1 - peekProgress);
     }
 
-    // Check if peek player has a track - if not, show device info instead
+    // Check if peek player has a track
     final hasTrack = _peekTrack != null && peekImageUrl != null;
-    final peekTrackName = hasTrack ? _peekTrack!.name : (peekPlayer?.name ?? 'Unknown');
+    final peekTrackName = hasTrack ? _peekTrack!.name : (peekPlayer?.name ?? S.of(context)!.unknown);
-    final peekArtistName = hasTrack ? (_peekTrack!.artistsString ?? '') : 'Swipe to switch device';
+    final peekArtistName = hasTrack ? (_peekTrack!.artistsString ?? '') : S.of(context)!.swipeToSwitchDevice;
 
-    return Stack(
+    return Transform.translate(
-      children: [
+      offset: Offset(peekBaseOffset, 0),
-        // Peek album art / device icon
+      child: MiniPlayerContent(
-        Positioned(
+        primaryText: peekTrackName,
-          left: peekBaseOffset,
+        secondaryText: peekArtistName,
-          top: 0,
+        imageUrl: hasTrack ? peekImageUrl : null,
-          child: Container(
+        playerName: peekPlayer?.name ?? '',
-            width: artSize,
+        backgroundColor: backgroundColor,
-            height: artSize,
+        textColor: textColor,
-            decoration: BoxDecoration(
+        width: containerWidth,
-              color: colorScheme.surfaceContainerHighest,
+        slideOffset: 0, // Transform handles positioning
-            ),
-            child: hasTrack
-                ? CachedNetworkImage(
-                    imageUrl: peekImageUrl!,
-                    fit: BoxFit.cover,
-                    memCacheWidth: 256,
-                    memCacheHeight: 256,
-                    fadeInDuration: Duration.zero,
-                    fadeOutDuration: Duration.zero,
-                    placeholderFadeInDuration: Duration.zero,
-                    placeholder: (_, __) => _buildMiniPlaceholderArt(colorScheme),
-                    errorWidget: (_, __, ___) => _buildMiniPlaceholderArt(colorScheme),
-                  )
-                : _buildDeviceIcon(peekPlayer?.name ?? '', artSize, colorScheme),
-          ),
-        ),
-
-        // Peek track title / device name
-        Positioned(
-          left: titleLeft + peekBaseOffset,
-          top: titleTop,
-          child: SizedBox(
-            width: titleWidth,
-            child: Text(
-              peekTrackName,
-              style: TextStyle(
-                color: textColor,
-                fontSize: titleFontSize,
-                fontWeight: FontWeight.w500,
-                height: 1.2,
-              ),
-              maxLines: 1,
-              overflow: TextOverflow.ellipsis,
-            ),
-          ),
-        ),
-
-        // Peek artist name / device hint
-        Positioned(
-          left: titleLeft + peekBaseOffset,
-          top: artistTop,
-          child: SizedBox(
-            width: titleWidth,
-            child: Text(
-              peekArtistName,
-              style: TextStyle(
-                color: textColor.withOpacity(0.6),
-                fontSize: artistFontSize,
-              ),
-              maxLines: 1,
-              overflow: TextOverflow.ellipsis,
-            ),
-          ),
-        ),
-      ],
-    );
-  }
-
-  /// Build device icon for non-playing peek player
-  Widget _buildDeviceIcon(String playerName, double size, ColorScheme colorScheme) {
-    final nameLower = playerName.toLowerCase();
-    IconData icon;
-    if (nameLower.contains('phone') || nameLower.contains('ensemble')) {
-      icon = Icons.phone_android_rounded;
-    } else if (nameLower.contains('group') || nameLower.contains('all')) {
-      icon = Icons.speaker_group_rounded;
-    } else if (nameLower.contains('tv') || nameLower.contains('television')) {
-      icon = Icons.tv_rounded;
-    } else if (nameLower.contains('cast') || nameLower.contains('chromecast')) {
-      icon = Icons.cast_rounded;
-    } else {
-      icon = Icons.speaker_rounded;
-    }
-
-    return Container(
-      color: colorScheme.surfaceContainerHighest,
-      child: Center(
-        child: Icon(
-          icon,
-          color: colorScheme.onSurfaceVariant,
-          size: size * 0.5,
-        ),
       ),
     );
   }
 
-  /// Simplified placeholder for mini player peek
-  Widget _buildMiniPlaceholderArt(ColorScheme colorScheme) {
-    return Container(
-      color: colorScheme.surfaceContainerHighest,
-      child: Icon(
-        Icons.music_note_rounded,
-        color: colorScheme.onSurfaceVariant,
-        size: 24,
-      ),
-    );
-  }
 
   /// Build peek player progress bar that slides in during swipe
   Widget _buildPeekProgressBar({

lib/widgets/global_player_overlay.dart

@@ -1,9 +1,12 @@
 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 '../theme/theme_provider.dart';
 import 'expandable_player.dart';
+import 'player/player_reveal_overlay.dart';
 
 /// Cached color with contrast adjustment
 /// Avoids expensive HSL conversions during scroll
@@ -110,13 +113,51 @@ 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 the bounce animation on mini player (called when overlay dismiss starts)
+  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;
 
+  // Controller for player reveal animation with bounce
+  late AnimationController _bounceController;
+  late Animation<double> _bounceAnimation;
+
+  // State for player reveal overlay
+  bool _isRevealVisible = false;
+
+  // Use ValueNotifier instead of setState for bounce offset
+  // This prevents full widget tree rebuilds during animation
+  final _bounceOffsetNotifier = ValueNotifier<double>(0.0);
+
+  // Key for the reveal overlay
+  final _revealKey = GlobalKey<PlayerRevealOverlayState>();
+
   @override
   void initState() {
     super.initState();
@@ -129,11 +170,31 @@ class _GlobalPlayerOverlayState extends State<GlobalPlayerOverlay>
       curve: Curves.easeOutCubic,
       reverseCurve: Curves.easeInCubic,
     );
+
+    // Bounce animation - quick dip down then back up
+    _bounceController = AnimationController(
+      duration: const Duration(milliseconds: 200),
+      vsync: this,
+    );
+    _bounceAnimation = CurvedAnimation(
+      parent: _bounceController,
+      curve: Curves.easeOut,
+    );
+
+    // Use ValueNotifier instead of setState to avoid full widget rebuilds
+    // This isolates the rebuild to only the widgets that depend on bounce offset
+    _bounceController.addListener(() {
+      final t = _bounceAnimation.value;
+      // Sine curve: 0 -> 1 -> 0 as t goes 0 -> 0.5 -> 1
+      _bounceOffsetNotifier.value = 10.0 * (t < 0.5 ? t * 2 : (1.0 - t) * 2);
+    });
   }
 
   @override
   void dispose() {
     _slideController.dispose();
+    _bounceController.dispose();
+    _bounceOffsetNotifier.dispose();
     super.dispose();
   }
 
@@ -145,12 +206,55 @@ class _GlobalPlayerOverlayState extends State<GlobalPlayerOverlay>
     }
   }
 
+  void _showPlayerReveal() {
+    if (_isRevealVisible) return;
+    if (GlobalPlayerOverlay.isPlayerExpanded) {
+      GlobalPlayerOverlay.collapsePlayer();
+    }
+    HapticFeedback.mediumImpact();
+    _bounceController.reset();
+    setState(() {
+      _isRevealVisible = true;
+    });
+    _bounceController.forward();
+  }
+
+  void _hidePlayerReveal() {
+    if (!_isRevealVisible) return;
+    _bounceOffsetNotifier.value = 0;
+    setState(() {
+      _isRevealVisible = 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
+    // Note: dismiss() triggers the bounce animation internally
+    _revealKey.currentState?.dismiss();
+  }
+
+  /// Trigger bounce animation on mini player
+  void _triggerBounce() {
+    _bounceController.reset();
+    _bounceController.forward();
+  }
+
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
     final colorScheme = theme.colorScheme;
 
-    return Stack(
+    // Handle back gesture at top level - dismiss device list if visible
+    return PopScope(
+      canPop: !_isRevealVisible,
+      onPopInvokedWithResult: (didPop, result) {
+        if (!didPop && _isRevealVisible) {
+          _dismissPlayerReveal();
+        }
+      },
+      child: Stack(
       children: [
         // The main app content (Navigator, screens, etc.)
         // Add bottom padding to account for bottom nav + mini player
@@ -206,26 +310,26 @@ class _GlobalPlayerOverlayState extends State<GlobalPlayerOverlay>
                       type: BottomNavigationBarType.fixed,
                       selectedFontSize: 12,
                       unselectedFontSize: 12,
-                      items: const [
+                      items: [
                         BottomNavigationBarItem(
-                          icon: Icon(Icons.home_outlined),
+                          icon: const Icon(Icons.home_outlined),
-                          activeIcon: Icon(Icons.home_rounded),
+                          activeIcon: const Icon(Icons.home_rounded),
-                          label: 'Home',
+                          label: S.of(context)!.home,
                         ),
                         BottomNavigationBarItem(
-                          icon: Icon(Icons.library_music_outlined),
+                          icon: const Icon(Icons.library_music_outlined),
-                          activeIcon: Icon(Icons.library_music_rounded),
+                          activeIcon: const Icon(Icons.library_music_rounded),
-                          label: 'Library',
+                          label: S.of(context)!.library,
                         ),
                         BottomNavigationBarItem(
-                          icon: Icon(Icons.search_rounded),
+                          icon: const Icon(Icons.search_rounded),
-                          activeIcon: Icon(Icons.search_rounded),
+                          activeIcon: const Icon(Icons.search_rounded),
-                          label: 'Search',
+                          label: S.of(context)!.search,
                         ),
                         BottomNavigationBarItem(
-                          icon: Icon(Icons.settings_outlined),
+                          icon: const Icon(Icons.settings_outlined),
-                          activeIcon: Icon(Icons.settings_rounded),
+                          activeIcon: const Icon(Icons.settings_rounded),
-                          label: 'Settings',
+                          label: S.of(context)!.settings,
                         ),
                       ],
                     ),
@@ -258,7 +362,16 @@ class _GlobalPlayerOverlayState extends State<GlobalPlayerOverlay>
             },
           ),
         ),
-        // Global player overlay - slides down when hidden, renders ON TOP of bottom nav
+        // Player reveal overlay - renders BELOW mini player so cards slide behind it
+        if (_isRevealVisible)
+          PlayerRevealOverlay(
+            key: _revealKey,
+            onDismiss: _hidePlayerReveal,
+            miniPlayerBottom: BottomSpacing.navBarHeight + MediaQuery.of(context).padding.bottom + 12,
+            miniPlayerHeight: 64,
+          ),
+
+        // 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: (_, provider) => (
@@ -270,20 +383,28 @@ class _GlobalPlayerOverlayState extends State<GlobalPlayerOverlay>
             if (!state.isConnected || !state.hasPlayer) {
               return const SizedBox.shrink();
             }
-            return AnimatedBuilder(
+            // Combine slide and bounce animations with ValueListenableBuilder
-              animation: _slideAnimation,
+            // This prevents full widget tree rebuilds - only ExpandablePlayer updates
-              child: ExpandablePlayer(key: globalPlayerKey, slideOffset: 0),
+            return ValueListenableBuilder<double>(
-              builder: (context, staticChild) {
+              valueListenable: _bounceOffsetNotifier,
-                // Only slideOffset changes during animation, player widget stays same
+              builder: (context, bounceOffset, _) {
-                return ExpandablePlayer(
+                return AnimatedBuilder(
-                  key: globalPlayerKey,
+                  animation: _slideAnimation,
-                  slideOffset: _slideAnimation.value,
+                  builder: (context, _) {
+                    return ExpandablePlayer(
+                      key: globalPlayerKey,
+                      slideOffset: _slideAnimation.value,
+                      bounceOffset: bounceOffset,
+                      onRevealPlayers: _showPlayerReveal,
+                    );
+                  },
                 );
               },
             );
           },
         ),
       ],
+      ),
     );
   }
 }

lib/widgets/player/chapters_panel.dart

@@ -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',
+      title: S.of(context)!.noChapters,
-      subtitle: 'This audiobook has no chapter information',
+      subtitle: S.of(context)!.noChapterInfo,
     );
   }
 

lib/widgets/player/device_selector_bar.dart

@@ -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 {
@@ -34,6 +35,8 @@ class DeviceSelectorBar extends StatelessWidget {
 
   @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 +55,18 @@ 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(
+                MiniPlayerContent(
-                  offset: Offset(slideOffset * width, 0),
+                  primaryText: selectedPlayer.name,
-                  child: Padding(
+                  secondaryText: swipeHint,
-                    padding: Spacing.paddingH16,
+                  imageUrl: null,
-                    child: Row(
+                  playerName: selectedPlayer.name,
-                      children: [
+                  backgroundColor: backgroundColor,
-                        Icon(
+                  textColor: textColor,
-                          _getPlayerIcon(selectedPlayer.name),
+                  width: width,
-                          color: textColor,
+                  slideOffset: slideOffset,
-                          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,
-                                  ),
-                                ),
-                            ],
-                          ),
-                        ),
-                      ],
-                    ),
-                  ),
                 ),
               ],
             ),
@@ -106,7 +77,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 +88,16 @@ class DeviceSelectorBar extends StatelessWidget {
 
     return Transform.translate(
       offset: Offset(peekBaseOffset, 0),
-      child: Padding(
+      child: MiniPlayerContent(
-        padding: Spacing.paddingH16,
+        primaryText: peekPlayer.name,
-        child: Row(
+        secondaryText: swipeHint,
-          children: [
+        imageUrl: null,
-            Icon(
+        playerName: peekPlayer.name,
-              _getPlayerIcon(peekPlayer.name),
+        backgroundColor: backgroundColor,
-              color: textColor,
+        textColor: textColor,
-              size: IconSizes.md,
+        width: width,
-            ),
+        slideOffset: 0, // No additional slide - Transform handles positioning
-            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,
-                      ),
-                    ),
-                ],
-              ),
-            ),
-          ],
-        ),
       ),
     );
   }
-
-  /// 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;
-    }
-  }
 }

lib/widgets/player/mini_player_content.dart

@@ -0,0 +1,189 @@
+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 = 64.0;
+  static const double artSize = 64.0;
+  static const double textLeftOffset = 10.0; // Gap between art and text
+  static const double textLeft = artSize + textLeftOffset; // 74px
+  static const double primaryTop = 13.0;
+  static const double secondaryTop = 33.0;
+  static const double textRightPadding = 12.0;
+  static const double iconSize = 28.0;
+  static const double iconOpacity = 0.4;
+  static const double secondaryTextOpacity = 0.6;
+  static const double primaryFontSize = 16.0;
+  static const double secondaryFontSize = 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;
+
+  /// 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 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;
+
+  const MiniPlayerContent({
+    super.key,
+    required this.primaryText,
+    this.secondaryText,
+    this.imageUrl,
+    required this.playerName,
+    required this.backgroundColor,
+    required this.textColor,
+    required this.width,
+    this.slideOffset = 0.0,
+    this.showProgress = false,
+    this.progress = 0.0,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final hasSecondaryLine = secondaryText != null && secondaryText!.isNotEmpty;
+    final slidePixels = slideOffset * width;
+
+    // Calculate text width (leaves room for right padding)
+    final textWidth = width - MiniPlayerLayout.textLeft - MiniPlayerLayout.textRightPadding;
+
+    // Darkened background for icon area (matches DeviceSelectorBar)
+    final iconAreaBackground = Color.lerp(backgroundColor, Colors.black, 0.15)!;
+
+    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
+          Positioned(
+            left: slidePixels,
+            top: 0,
+            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
+                ? MiniPlayerLayout.primaryTop
+                : (MiniPlayerLayout.height - MiniPlayerLayout.primaryFontSize) / 2,
+            right: MiniPlayerLayout.textRightPadding - slidePixels,
+            child: Text(
+              primaryText,
+              style: TextStyle(
+                color: textColor,
+                fontSize: MiniPlayerLayout.primaryFontSize,
+                fontWeight: MiniPlayerLayout.primaryFontWeight,
+              ),
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+
+          // Secondary text line
+          if (hasSecondaryLine)
+            Positioned(
+              left: MiniPlayerLayout.textLeft + slidePixels,
+              top: MiniPlayerLayout.secondaryTop,
+              right: MiniPlayerLayout.textRightPadding - slidePixels,
+              child: Text(
+                secondaryText!,
+                style: TextStyle(
+                  color: textColor.withOpacity(MiniPlayerLayout.secondaryTextOpacity),
+                  fontSize: MiniPlayerLayout.secondaryFontSize,
+                ),
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+
+  /// 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;
+    }
+  }
+}

lib/widgets/player/player_card.dart

@@ -0,0 +1,233 @@
+import 'package:flutter/material.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.
+class PlayerCard extends StatelessWidget {
+  final dynamic player;
+  final dynamic trackInfo;
+  final String? albumArtUrl;
+  final bool isSelected;
+  final bool isPlaying;
+  final Color backgroundColor;
+  final Color textColor;
+  final VoidCallback onTap;
+  final VoidCallback? onPlayPause;
+  final VoidCallback? onSkipNext;
+  final VoidCallback? onPower;
+
+  const PlayerCard({
+    super.key,
+    required this.player,
+    this.trackInfo,
+    this.albumArtUrl,
+    required this.isSelected,
+    required this.isPlaying,
+    required this.backgroundColor,
+    required this.textColor,
+    required this.onTap,
+    this.onPlayPause,
+    this.onSkipNext,
+    this.onPower,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    // Match mini player dimensions
+    const double cardHeight = Dimensions.miniPlayerHeight; // 64px
+    const double artSize = cardHeight;
+    const double borderRadius = Radii.xl; // 16px - same as mini player
+
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        height: cardHeight,
+        decoration: BoxDecoration(
+          color: 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: albumArtUrl != null
+                  ? CachedNetworkImage(
+                      imageUrl: 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(
+                            player.name,
+                            style: TextStyle(
+                              color: 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: 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 (player.available && player.powered && trackInfo != null) ...[
+              // Play/Pause - slight nudge right
+              Transform.translate(
+                offset: const Offset(3, 0),
+                child: SizedBox(
+                  width: 28,
+                  height: 28,
+                  child: IconButton(
+                    icon: Icon(
+                      isPlaying ? Icons.pause_rounded : Icons.play_arrow_rounded,
+                      color: textColor,
+                      size: 28,
+                    ),
+                    onPressed: 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: textColor,
+                    size: 28,
+                  ),
+                  onPressed: onSkipNext,
+                  padding: EdgeInsets.zero,
+                  constraints: const BoxConstraints(),
+                ),
+              ),
+            ],
+            // Power button - smallest
+            if (player.available)
+              IconButton(
+                icon: Icon(
+                  Icons.power_settings_new_rounded,
+                  color: player.powered ? textColor : textColor.withOpacity(0.5),
+                  size: 20,
+                ),
+                onPressed: onPower,
+                padding: EdgeInsets.zero,
+                constraints: const BoxConstraints(),
+              ),
+
+            const SizedBox(width: 4),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildSpeakerIcon() {
+    // Darker shade of the card background to match album art square
+    final iconBgColor = Color.lerp(backgroundColor, Colors.black, 0.15)!;
+    return Container(
+      color: iconBgColor,
+      child: Center(
+        child: Icon(
+          Icons.speaker_rounded,
+          color: textColor.withOpacity(0.4),
+          size: 28,
+        ),
+      ),
+    );
+  }
+
+  Color _getStatusColor() {
+    if (!player.available) {
+      return Colors.grey.withOpacity(0.5);
+    }
+    if (!player.powered) {
+      return Colors.grey;
+    }
+    if (isPlaying) {
+      return Colors.green;
+    }
+    if (trackInfo != null) {
+      return Colors.orange; // Has content but paused
+    }
+    return Colors.grey.shade400; // Idle
+  }
+
+  String _getSubtitle(BuildContext context) {
+    if (!player.available) {
+      return S.of(context)!.playerStateUnavailable;
+    }
+    if (!player.powered) {
+      return S.of(context)!.playerStateOff;
+    }
+    if (trackInfo != null) {
+      return trackInfo.name ?? S.of(context)!.playerStateIdle;
+    }
+    return S.of(context)!.playerStateIdle;
+  }
+}

lib/widgets/player/player_controls.dart

@@ -55,14 +55,13 @@ class PlayerControls extends StatelessWidget {
       mainAxisAlignment: isExpanded ? MainAxisAlignment.center : MainAxisAlignment.end,
       children: [
         // Shuffle (expanded only)
-        if (isExpanded)
+        // GPU PERF: Use color alpha instead of Opacity to avoid saveLayer
-          Opacity(
+        if (isExpanded && expandedElementsOpacity > 0.1)
-            opacity: expandedElementsOpacity,
+          _buildSecondaryButton(
-            child: _buildSecondaryButton(
+            icon: Icons.shuffle_rounded,
-              icon: Icons.shuffle_rounded,
+            color: (shuffle == true ? primaryColor : textColor.withOpacity(0.5))
-              color: shuffle == true ? primaryColor : textColor.withOpacity(0.5),
+                .withOpacity(expandedElementsOpacity),
-              onPressed: isLoadingQueue ? null : onToggleShuffle,
+            onPressed: isLoadingQueue ? null : onToggleShuffle,
-            ),
           ),
         if (isExpanded) SizedBox(width: _lerpDouble(0, 20, t)),
 
@@ -90,17 +89,16 @@ class PlayerControls extends StatelessWidget {
         ),
 
         // Repeat (expanded only)
+        // GPU PERF: Use color alpha instead of Opacity to avoid saveLayer
         if (isExpanded) SizedBox(width: _lerpDouble(0, 20, t)),
-        if (isExpanded)
+        if (isExpanded && expandedElementsOpacity > 0.1)
-          Opacity(
+          _buildSecondaryButton(
-            opacity: expandedElementsOpacity,
+            icon: repeatMode == 'one' ? Icons.repeat_one_rounded : Icons.repeat_rounded,
-            child: _buildSecondaryButton(
+            color: (repeatMode != null && repeatMode != 'off'
-              icon: repeatMode == 'one' ? Icons.repeat_one_rounded : Icons.repeat_rounded,
+                    ? primaryColor
-              color: repeatMode != null && repeatMode != 'off'
+                    : textColor.withOpacity(0.5))
-                  ? primaryColor
+                .withOpacity(expandedElementsOpacity),
-                  : textColor.withOpacity(0.5),
+            onPressed: isLoadingQueue ? null : onCycleRepeat,
-              onPressed: isLoadingQueue ? null : onCycleRepeat,
-            ),
           ),
       ],
     );

lib/widgets/player/player_reveal_overlay.dart

@@ -0,0 +1,307 @@
+import 'dart:async';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:provider/provider.dart';
+import '../../providers/music_assistant_provider.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;
+
+  const PlayerRevealOverlay({
+    super.key,
+    required this.onDismiss,
+    required this.miniPlayerBottom,
+    required this.miniPlayerHeight,
+  });
+
+  @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;
+
+  // Cache extracted colors per player for per-device accent colors
+  final Map<String, ColorScheme?> _playerColors = {};
+
+  @override
+  void initState() {
+    super.initState();
+
+    _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();
+    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 settle 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();
+    });
+  }
+
+  void _handleVerticalDragUpdate(DragUpdateDetails details) {
+    setState(() {
+      _isDragging = true;
+      // Negate delta so swipe down = cards move down (toward dismissal)
+      _dragOffset -= details.primaryDelta ?? 0;
+      // Clamp: allow moving down (positive) freely, limit moving up to 20px
+      _dragOffset = _dragOffset.clamp(-20.0, double.infinity);
+    });
+  }
+
+  void _handleVerticalDragEnd(DragEndDetails details) {
+    final velocity = details.primaryVelocity ?? 0;
+
+    // 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;
+
+        return AnimatedBuilder(
+          animation: _revealAnimation,
+          builder: (context, child) {
+            final t = _revealAnimation.value;
+
+            return Stack(
+              children: [
+                // Backdrop - tap to dismiss
+                Positioned.fill(
+                  child: GestureDetector(
+                    onTap: dismiss,
+                    child: Container(
+                      color: Colors.black.withOpacity(0.6 * _backdropAnimation.value),
+                    ),
+                  ),
+                ),
+
+                // 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: [
+                        // Build player cards - all slide from behind mini player
+                        ...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,
+                                backgroundColor: cardBgColor,
+                                textColor: cardTextColor,
+                                onTap: () {
+                                  HapticFeedback.mediumImpact();
+                                  maProvider.selectPlayer(player);
+                                  dismiss();
+                                },
+                                onPlayPause: () {
+                                  if (isPlaying) {
+                                    maProvider.pausePlayer(player.playerId);
+                                  } else {
+                                    maProvider.resumePlayer(player.playerId);
+                                  }
+                                },
+                                onSkipNext: () {
+                                  maProvider.nextTrack(player.playerId);
+                                },
+                                onPower: () {
+                                  maProvider.togglePower(player.playerId);
+                                },
+                              ),
+                            ),
+                          );
+                        }),
+                      ],
+                    ),
+                  ),
+                ),
+              ],
+            );
+          },
+        );
+      },
+    );
+  }
+}

lib/widgets/player/queue_panel.dart

@@ -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() {
+  Widget _buildEmptyState(BuildContext context) {
-    return EmptyState.queue();
+    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),

lib/widgets/player_selector.dart

@@ -4,6 +4,7 @@ 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 +18,56 @@ class PlayerSelector extends StatelessWidget {
     final availablePlayers = maProvider.availablePlayers;
     final colorScheme = Theme.of(context).colorScheme;
 
+    // Count players that are currently playing
+    final playingCount = availablePlayers.where((p) => p.state == 'playing').length;
+
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 8.0),
-      child: Material(
+      child: Badge(
-        color: colorScheme.primaryContainer,
+        isLabelVisible: playingCount > 0,
-        borderRadius: BorderRadius.circular(8),
+        backgroundColor: colorScheme.tertiary,
-        child: InkWell(
+        textColor: colorScheme.onTertiary,
-          onTap: () => _showPlayerSelector(context, maProvider, availablePlayers),
+        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(
+          child: InkWell(
-            padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
+            onTap: () => _showPlayerSelector(context, maProvider, availablePlayers),
-            child: Row(
+            borderRadius: BorderRadius.circular(8),
-              mainAxisSize: MainAxisSize.min,
+            child: Padding(
-              children: [
+              padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
-                if (selectedPlayer != null) ...[
+              child: Row(
-                  ConstrainedBox(
+                mainAxisSize: MainAxisSize.min,
-                    constraints: const BoxConstraints(maxWidth: 120),
+                children: [
-                    child: Text(
+                  if (selectedPlayer != null) ...[
-                      selectedPlayer.name,
+                    ConstrainedBox(
-                      style: TextStyle(
+                      constraints: const BoxConstraints(maxWidth: 120),
-                        color: colorScheme.onPrimaryContainer,
+                      child: Text(
-                        fontWeight: FontWeight.w600,
+                        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 +80,8 @@ class PlayerSelector extends StatelessWidget {
     MusicAssistantProvider provider,
     List players,
   ) {
-    // Collapse player if expanded before showing sheet
+    // Use the new player reveal animation
-    if (GlobalPlayerOverlay.isPlayerExpanded) {
+    GlobalPlayerOverlay.showPlayerReveal();
-      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();
-    });
   }
 }
 
@@ -182,7 +180,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)),
                               ),
                             )
@@ -304,12 +302,12 @@ class _PlayerSelectorSheetState extends State<_PlayerSelectorSheet> {
                                                   Expanded(
                                                     child: Text(
                                                       !player.available
-                                                          ? 'Unavailable'
+                                                          ? S.of(context)!.playerStateUnavailable
                                                           : !isOn
-                                                              ? 'Off'
+                                                              ? S.of(context)!.playerStateOff
                                                               : hasContent && playerTrack != null
                                                                   ? playerTrack.name
-                                                                  : 'Idle',
+                                                                  : S.of(context)!.playerStateIdle,
                                                       style: TextStyle(
                                                         color: player.available
                                                             ? colorScheme.onSurfaceVariant
@@ -329,7 +327,7 @@ class _PlayerSelectorSheetState extends State<_PlayerSelectorSheet> {
                                                         borderRadius: BorderRadius.circular(4),
                                                       ),
                                                       child: Text(
-                                                        'Selected',
+                                                        S.of(context)!.playerSelected,
                                                         style: TextStyle(
                                                           color: colorScheme.primary,
                                                           fontSize: 10,

lib/widgets/series_row.dart

@@ -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(
+          FadeSlidePageRoute(
-            builder: (context) => AudiobookSeriesScreen(
+            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,
                         ),

lib/widgets/track_row.dart

@@ -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,

pubspec.yaml

@@ -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.4.1-beta+26
 
 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
@@ -54,6 +57,7 @@ dev_dependencies:
   drift_dev: ^2.22.1
 
 flutter:
+  generate: true
   uses-material-design: true
 
   assets: