From 87d0147ad213a33899ac774655e3e6ac926a2b1c Mon Sep 17 00:00:00 2001
From: Frederik Feichtmeier <frederik.feichtmeier@gmail.com>
Date: Fri, 30 Aug 2024 00:44:24 +0200
Subject: [PATCH] feat: improve android styling and sizes (#902)

* feat: improve android styling and sizes

* fix: use primary color less

* fix: update macos/windows/android theme
---
 lib/app/view/app.dart                         |  2 +-
 lib/app/view/scaffold.dart                    |  6 +-
 lib/common/view/audio_card.dart               |  7 +-
 lib/common/view/audio_card_bottom.dart        |  8 +-
 lib/common/view/audio_tile.dart               | 22 ++++-
 lib/common/view/avatar_play_button.dart       |  4 +-
 lib/common/view/cover_background.dart         | 11 +--
 lib/common/view/explore_online_popup.dart     |  1 +
 lib/common/view/header_bar.dart               | 11 ++-
 lib/common/view/sliver_audio_tile_list.dart   |  3 +
 lib/common/view/theme.dart                    | 52 +++++++++--
 lib/l10n/app_de.arb                           |  2 +
 lib/l10n/app_en.arb                           |  2 +
 lib/local_audio/view/album_page.dart          | 43 ++++-----
 lib/local_audio/view/album_view.dart          |  3 +-
 lib/local_audio/view/artist_page.dart         | 39 ++++----
 lib/player/view/bottom_player.dart            | 21 +++--
 lib/player/view/full_height_player.dart       | 44 +++++-----
 lib/player/view/player_main_controls.dart     |  7 +-
 lib/player/view/player_view.dart              |  3 +-
 lib/player/view/queue_button.dart             | 44 ++++++----
 lib/player/view/repeat_button.dart            | 13 +--
 lib/player/view/shuffle_button.dart           | 13 ++-
 lib/playlists/view/playlist_page.dart         | 78 ++++++++--------
 lib/podcasts/view/download_button.dart        |  1 +
 lib/podcasts/view/podcast_audio_tile.dart     | 82 +++++++++--------
 lib/podcasts/view/podcast_page.dart           | 33 +++----
 lib/podcasts/view/podcast_sub_button.dart     |  6 +-
 ...ess.dart => podcast_tile_play_button.dart} | 59 +++++++------
 ...ogress.dart => podcast_tile_progress.dart} | 27 +++---
 .../view/podcasts_collection_body.dart        |  4 +-
 lib/radio/view/radio_history_tile.dart        | 14 ++-
 lib/radio/view/radio_page_star_button.dart    | 13 +--
 lib/radio/view/station_card.dart              |  6 +-
 lib/radio/view/station_page.dart              | 23 +++--
 .../view/sliver_podcast_search_results.dart   |  5 +-
 needs_translation.json                        | 40 +++++++++
 pubspec.lock                                  | 88 +++++++++----------
 pubspec.yaml                                  |  4 +-
 39 files changed, 487 insertions(+), 357 deletions(-)
 rename lib/podcasts/view/{avatar_with_progress.dart => podcast_tile_play_button.dart} (54%)
 rename lib/podcasts/view/{audio_progress.dart => podcast_tile_progress.dart} (63%)

diff --git a/lib/app/view/app.dart b/lib/app/view/app.dart
index d6d377312..be2cb41aa 100644
--- a/lib/app/view/app.dart
+++ b/lib/app/view/app.dart
@@ -1,7 +1,7 @@
 import 'dart:ui';
 
 import 'package:flutter/material.dart';
-import 'package:phoenix_theme/phoenix_theme.dart' hide ColorX, isMobile;
+import 'package:phoenix_theme/phoenix_theme.dart' hide ColorX;
 import 'package:system_theme/system_theme.dart';
 import 'package:watch_it/watch_it.dart';
 import 'package:yaru/yaru.dart';
diff --git a/lib/app/view/scaffold.dart b/lib/app/view/scaffold.dart
index e6920252f..aea90fdf0 100644
--- a/lib/app/view/scaffold.dart
+++ b/lib/app/view/scaffold.dart
@@ -82,7 +82,9 @@ class MobileNavigationBar extends StatelessWidget with WatchItMixin {
     final libraryModel = di<LibraryModel>();
 
     return NavigationBar(
-      height: 60,
+      backgroundColor: context.t.cardColor,
+      height: 45,
+      indicatorColor: Colors.transparent,
       selectedIndex: switch (selectedPageId) {
         kSearchPageId => 0,
         kLocalAudioPageId => 1,
@@ -106,7 +108,7 @@ class MobileNavigationBar extends StatelessWidget with WatchItMixin {
         NavigationDestination(
           icon: Icon(Iconz().localAudio),
           selectedIcon: Icon(Iconz().localAudioFilled),
-          label: context.l10n.localAudio,
+          label: context.l10n.local,
         ),
         NavigationDestination(
           icon: Icon(Iconz().radio),
diff --git a/lib/common/view/audio_card.dart b/lib/common/view/audio_card.dart
index cc3cd0f7b..eb44bea65 100644
--- a/lib/common/view/audio_card.dart
+++ b/lib/common/view/audio_card.dart
@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:shimmer/shimmer.dart';
 import 'package:yaru/yaru.dart';
 
-import '../../constants.dart';
 import '../../extensions/build_context_x.dart';
 import '../../extensions/theme_data_x.dart';
 import 'icons.dart';
@@ -75,7 +74,7 @@ class _AudioCardState extends State<AudioCard> {
                     bottom: 10,
                     right: 10,
                     child: CircleAvatar(
-                      radius: avatarIconSize,
+                      radius: avatarIconRadius,
                       backgroundColor: theme.colorScheme.primary,
                       child: IconButton(
                         onPressed: widget.onPlay,
@@ -132,8 +131,8 @@ class _AudioCard extends StatelessWidget {
     final light = theme.isLight;
 
     return SizedBox(
-      height: height ?? kAudioCardDimension - (isMobile ? 10 : 0),
-      width: width ?? kAudioCardDimension,
+      height: height ?? audioCardDimension,
+      width: width ?? audioCardDimension,
       child: InkWell(
         onTap: onTap,
         onHover: onHover,
diff --git a/lib/common/view/audio_card_bottom.dart b/lib/common/view/audio_card_bottom.dart
index 5f1e5b013..fcbe94ddc 100644
--- a/lib/common/view/audio_card_bottom.dart
+++ b/lib/common/view/audio_card_bottom.dart
@@ -2,9 +2,9 @@ import 'package:flutter/material.dart';
 import 'package:shimmer/shimmer.dart';
 import 'package:yaru/yaru.dart';
 
-import '../../constants.dart';
 import '../../extensions/build_context_x.dart';
 import '../../extensions/theme_data_x.dart';
+import 'theme.dart';
 
 class AudioCardBottom extends StatelessWidget {
   const AudioCardBottom({
@@ -24,11 +24,11 @@ class AudioCardBottom extends StatelessWidget {
     final light = theme.isLight;
 
     return SizedBox(
-      width: kAudioCardDimension,
+      width: audioCardDimension,
       child: Tooltip(
         message: text ?? '',
         child: Container(
-          width: kAudioCardDimension,
+          width: audioCardDimension,
           margin: const EdgeInsets.all(1),
           padding: const EdgeInsets.symmetric(
             vertical: 5,
@@ -39,7 +39,7 @@ class AudioCardBottom extends StatelessWidget {
                   borderRadius: BorderRadius.circular(5),
                   child: SizedBox(
                     height: 15,
-                    width: kAudioCardDimension - 20,
+                    width: audioCardDimension - 20,
                     child: Shimmer.fromColors(
                       baseColor: theme.cardColor,
                       highlightColor: light
diff --git a/lib/common/view/audio_tile.dart b/lib/common/view/audio_tile.dart
index b090e0a7f..6bc87c0a0 100644
--- a/lib/common/view/audio_tile.dart
+++ b/lib/common/view/audio_tile.dart
@@ -30,6 +30,7 @@ class AudioTile extends StatefulWidget with WatchItStatefulWidgetMixin {
     this.startPlaylist,
     required this.audioPageType,
     required this.showLeading,
+    this.selectedColor,
   });
 
   final String pageId;
@@ -45,6 +46,7 @@ class AudioTile extends StatefulWidget with WatchItStatefulWidgetMixin {
   final LibraryModel libraryModel;
   final void Function(Audio audio) insertIntoQueue;
   final bool showLeading;
+  final Color? selectedColor;
 
   @override
   State<AudioTile> createState() => _AudioTileState();
@@ -57,6 +59,7 @@ class _AudioTileState extends State<AudioTile> {
   Widget build(BuildContext context) {
     final theme = context.t;
     final liked = watchPropertyValue((LibraryModel m) => m.liked(widget.audio));
+    final selectedColor = widget.selectedColor ?? theme.contrastyPrimary;
     final subTitle = switch (widget.audioPageType) {
       AudioPageType.artist => widget.audio.album ?? context.l10n.unknown,
       _ => widget.audio.artist ?? context.l10n.unknown,
@@ -83,7 +86,7 @@ class _AudioTileState extends State<AudioTile> {
         leading: leading,
         selected: widget.selected,
         selectedColor: widget.isPlayerPlaying
-            ? theme.contrastyPrimary
+            ? selectedColor
             : theme.colorScheme.onSurface,
         selectedTileColor: theme.colorScheme.onSurface.withOpacity(0.05),
         contentPadding: kModernAudioTilePadding,
@@ -122,6 +125,7 @@ class _AudioTileState extends State<AudioTile> {
           pageId: widget.pageId,
           audioPageType: widget.audioPageType,
           insertIntoQueue: widget.insertIntoQueue,
+          selectedColor: selectedColor,
         ),
       ),
     );
@@ -139,6 +143,7 @@ class _AudioTileTrail extends StatelessWidget with WatchItMixin {
     required this.insertIntoQueue,
     required this.hovered,
     required this.liked,
+    required this.selectedColor,
   });
 
   final Audio audio;
@@ -150,6 +155,7 @@ class _AudioTileTrail extends StatelessWidget with WatchItMixin {
   final void Function(Audio audio) insertIntoQueue;
   final bool hovered;
   final bool liked;
+  final Color selectedColor;
 
   @override
   Widget build(BuildContext context) {
@@ -173,8 +179,14 @@ class _AudioTileTrail extends StatelessWidget with WatchItMixin {
         Opacity(
           opacity: hovered || selected || liked ? 1 : 0,
           child: switch (audio.audioType) {
-            AudioType.radio => RadioLikeIcon(audio: audio),
-            AudioType.local => LikeIcon(audio: audio),
+            AudioType.radio => RadioLikeIcon(
+                audio: audio,
+                color: selected && isPlayerPlaying ? selectedColor : null,
+              ),
+            AudioType.local => LikeIcon(
+                audio: audio,
+                color: selected && isPlayerPlaying ? selectedColor : null,
+              ),
             _ => SizedBox.square(
                 dimension: context.t.buttonTheme.height,
               ),
@@ -190,7 +202,9 @@ class _AudioTileTrail extends StatelessWidget with WatchItMixin {
               alignment: Alignment.centerRight,
               child: Text(
                 Duration(milliseconds: audio.durationMs!.toInt()).formattedTime,
-                style: context.t.textTheme.labelMedium,
+                style: context.t.textTheme.labelMedium?.copyWith(
+                  color: selected && isPlayerPlaying ? selectedColor : null,
+                ),
               ),
             ),
           ),
diff --git a/lib/common/view/avatar_play_button.dart b/lib/common/view/avatar_play_button.dart
index 36e57c33d..91c2994cc 100644
--- a/lib/common/view/avatar_play_button.dart
+++ b/lib/common/view/avatar_play_button.dart
@@ -30,9 +30,9 @@ class AvatarPlayButton extends StatelessWidget with WatchItMixin {
         isPlayerPlaying && pageIsQueue ? Iconz().pause : Iconz().playFilled;
 
     return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 10),
+      padding: bigPlayButtonPadding,
       child: CircleAvatar(
-        radius: bigPlayButtonSize,
+        radius: bigPlayButtonRadius,
         backgroundColor: theme.colorScheme.inverseSurface,
         child: IconButton(
           tooltip: context.l10n.playAll,
diff --git a/lib/common/view/cover_background.dart b/lib/common/view/cover_background.dart
index 27771de49..24fc0b1d0 100644
--- a/lib/common/view/cover_background.dart
+++ b/lib/common/view/cover_background.dart
@@ -1,20 +1,21 @@
-import '../../constants.dart';
 import 'package:flutter/material.dart';
 
+import 'theme.dart';
+
 class CoverBackground extends StatelessWidget {
   const CoverBackground({
     super.key,
-    this.dimension = kAudioCardDimension,
+    this.dimension,
   });
 
-  final double dimension;
+  final double? dimension;
 
   @override
   Widget build(BuildContext context) {
     return Image.asset(
       'assets/images/media-optical.png',
-      height: dimension,
-      width: dimension,
+      height: dimension ?? audioCardDimension,
+      width: dimension ?? audioCardDimension,
     );
   }
 }
diff --git a/lib/common/view/explore_online_popup.dart b/lib/common/view/explore_online_popup.dart
index cd0434b9a..0d55c1ca9 100644
--- a/lib/common/view/explore_online_popup.dart
+++ b/lib/common/view/explore_online_popup.dart
@@ -20,6 +20,7 @@ class ExploreOnlinePopup extends StatelessWidget with WatchItMixin {
     return PopupMenuButton(
       enabled: isOnline,
       tooltip: context.l10n.searchOnline,
+      padding: EdgeInsets.zero,
       itemBuilder: (c) => [
         PopupMenuItem(
           padding: const EdgeInsets.only(left: 5),
diff --git a/lib/common/view/header_bar.dart b/lib/common/view/header_bar.dart
index 225b5cb42..29bc9c9a5 100644
--- a/lib/common/view/header_bar.dart
+++ b/lib/common/view/header_bar.dart
@@ -1,7 +1,7 @@
 import 'dart:io';
 
 import 'package:flutter/material.dart';
-import 'package:phoenix_theme/phoenix_theme.dart' hide isMobile;
+import 'package:phoenix_theme/phoenix_theme.dart';
 import 'package:watch_it/watch_it.dart';
 import 'package:yaru/yaru.dart';
 
@@ -48,7 +48,8 @@ class HeaderBar extends StatelessWidget
 
     Widget? leading;
 
-    if (includeSidebarButton &&
+    if (!isMobile &&
+        includeSidebarButton &&
         !context.showMasterPanel &&
         masterScaffoldKey.currentState?.isDrawerOpen == false) {
       leading = const SidebarButton();
@@ -56,7 +57,11 @@ class HeaderBar extends StatelessWidget
       if (includeBackButton && canPop) {
         leading = const NavBackButton();
       } else {
-        leading = null;
+        leading = isMobile
+            ? const SizedBox(
+                width: 60,
+              )
+            : null;
       }
     }
 
diff --git a/lib/common/view/sliver_audio_tile_list.dart b/lib/common/view/sliver_audio_tile_list.dart
index 43dcdde4f..2d7648285 100644
--- a/lib/common/view/sliver_audio_tile_list.dart
+++ b/lib/common/view/sliver_audio_tile_list.dart
@@ -16,6 +16,7 @@ class SliverAudioTileList extends StatelessWidget with WatchItMixin {
     this.padding,
     this.onSubTitleTab,
     required this.audioPageType,
+    this.selectedColor,
   });
 
   final List<Audio> audios;
@@ -23,6 +24,7 @@ class SliverAudioTileList extends StatelessWidget with WatchItMixin {
   final AudioPageType audioPageType;
   final void Function(String text)? onSubTitleTab;
   final EdgeInsetsGeometry? padding;
+  final Color? selectedColor;
 
   @override
   Widget build(BuildContext context) {
@@ -58,6 +60,7 @@ class SliverAudioTileList extends StatelessWidget with WatchItMixin {
               insertIntoQueue: playerModel.insertIntoQueue,
               pageId: pageId,
               libraryModel: libraryModel,
+              selectedColor: selectedColor,
             );
           },
         ),
diff --git a/lib/common/view/theme.dart b/lib/common/view/theme.dart
index 37b61c07e..08fd4cda1 100644
--- a/lib/common/view/theme.dart
+++ b/lib/common/view/theme.dart
@@ -28,6 +28,7 @@ ThemeData? yaruDarkWithTweaks(YaruThemeData yaru) {
     cardColor: yaru.darkTheme?.cardColor.scale(
       lightness: -0.2,
     ),
+    iconButtonTheme: iconButtonTheme(yaru.darkTheme),
   );
 }
 
@@ -43,6 +44,25 @@ ThemeData? yaruLightWithTweaks(YaruThemeData yaru) {
     cardColor: yaru.theme?.dividerColor.scale(
       lightness: -0.01,
     ),
+    iconButtonTheme: iconButtonTheme(yaru.theme),
+  );
+}
+
+IconButtonThemeData iconButtonTheme(ThemeData? data) {
+  return IconButtonThemeData(
+    style: data?.iconButtonTheme.style?.copyWith(
+      iconSize: const WidgetStatePropertyAll(kYaruIconSize),
+      iconColor: WidgetStateProperty.resolveWith(
+        (s) => s.contains(WidgetState.disabled)
+            ? data.disabledColor
+            : data.colorScheme.onSurface,
+      ),
+      backgroundColor: WidgetStateProperty.resolveWith(
+        (s) => s.contains(WidgetState.selected)
+            ? data.colorScheme.onSurface.withOpacity(0.1)
+            : Colors.transparent,
+      ),
+    ),
   );
 }
 
@@ -200,13 +220,16 @@ Color? chipSelectionColor(ThemeData theme, bool loading) {
   return yaruStyled ? (loading ? theme.colorScheme.outline : null) : null;
 }
 
-double get podcastProgressSize => yaruStyled ? 34 : 45;
-
 double get likeButtonWidth => yaruStyled ? 62 : 70;
 
-double? get avatarIconSize => yaruStyled ? kYaruTitleBarItemHeight / 2 : null;
+double get progressStrokeWidth => 3.0;
+
+double get avatarIconRadius => (yaruStyled ? kYaruTitleBarItemHeight : 38) / 2;
+
+double get bigPlayButtonRadius => yaruStyled ? 22 : 23;
 
-double get bigPlayButtonSize => 25;
+EdgeInsets get bigPlayButtonPadding =>
+    EdgeInsets.symmetric(horizontal: yaruStyled ? 2.5 : 5);
 
 FontWeight get smallTextFontWeight =>
     yaruStyled ? FontWeight.w100 : FontWeight.w400;
@@ -238,4 +261,23 @@ EdgeInsets get countryPillPadding => yaruStyled
       )
     : const EdgeInsets.only(top: 11, bottom: 11, left: 15, right: 15);
 
-double get inputHeight => yaruStyled ? kYaruTitleBarItemHeight : 36;
+double get inputHeight => isMobile
+    ? 40
+    : yaruStyled
+        ? kYaruTitleBarItemHeight
+        : 36;
+
+double get audioCardDimension => kAudioCardDimension - (isMobile ? 15 : 0);
+
+double get bottomPlayerHeight => isMobile ? 80.0 : 90.0;
+
+List<Widget> space({double gap = 5, required Iterable<Widget> children}) =>
+    children
+        .expand(
+          (item) sync* {
+            yield SizedBox(width: gap);
+            yield item;
+          },
+        )
+        .skip(1)
+        .toList();
diff --git a/lib/l10n/app_de.arb b/lib/l10n/app_de.arb
index 74dc77a46..8e15cc3da 100644
--- a/lib/l10n/app_de.arb
+++ b/lib/l10n/app_de.arb
@@ -18,6 +18,7 @@
     "addToFavorites": "Zu Favoriten hinzufügen",
     "removeFromFavorites": "Aus Favoriten entfernen",
     "share": "Teilen",
+    "local": "Lokal",
     "localAudio": "Lokale Audiosammlung",
     "localAudioDescription": "Deine lokale Audiosammlung.",
     "localAudioSubtitle": "Keine Internetverbindung benötigt",
@@ -304,6 +305,7 @@
     "reorder": "Neuanordnen",
     "move": "Bewegen",
     "pinAlbum": "Album an Seitenleiste pinnen",
+    "unPinAlbum": "Album von Seitenleiste lösen",
     "playAll": "Alles abspielen",
     "hearingHistory": "Hörverlauf",
     "emptyHearingHistory": "Du hast noch keinem Radiosender in dieser Sitzung zugehört.",
diff --git a/lib/l10n/app_en.arb b/lib/l10n/app_en.arb
index e26e6c645..e1511143f 100644
--- a/lib/l10n/app_en.arb
+++ b/lib/l10n/app_en.arb
@@ -18,6 +18,7 @@
     "addToFavorites": "Add to favorites",
     "removeFromFavorites": "Remove from favorites",
     "share": "Share",
+    "local": "Local",
     "localAudio": "Local Audio",
     "localAudioDescription": "Your music collection, stored on your computer.",
     "localAudioSubtitle": "No internet connection needed",
@@ -304,6 +305,7 @@
     "reorder": "Reorder",
     "move": "Move",
     "pinAlbum": "Pin album to sidebar",
+    "unPinAlbum": "Unpin album from sidebar",
     "playAll": "Play all",
     "hearingHistory": "Hearing history",
     "emptyHearingHistory": "You did not listen to radio in this app session yet",
diff --git a/lib/local_audio/view/album_page.dart b/lib/local_audio/view/album_page.dart
index 8a8c76af6..eb1f10ef6 100644
--- a/lib/local_audio/view/album_page.dart
+++ b/lib/local_audio/view/album_page.dart
@@ -145,27 +145,30 @@ class AlbumPageControlButton extends StatelessWidget {
     final pinnedAlbum = libraryModel.isPinnedAlbum(id);
     return Row(
       mainAxisSize: MainAxisSize.min,
-      children: [
-        IconButton(
-          tooltip: context.l10n.pinAlbum,
-          isSelected: libraryModel.isPinnedAlbum(id),
-          icon: Icon(
-            pinnedAlbum ? Iconz().pinFilled : Iconz().pin,
-            color: pinnedAlbum ? context.t.colorScheme.primary : null,
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: space(
+        children: [
+          IconButton(
+            tooltip:
+                pinnedAlbum ? context.l10n.unPinAlbum : context.l10n.pinAlbum,
+            isSelected: libraryModel.isPinnedAlbum(id),
+            icon: Icon(
+              pinnedAlbum ? Iconz().pinFilled : Iconz().pin,
+            ),
+            onPressed: () {
+              if (libraryModel.isPinnedAlbum(id)) {
+                libraryModel.removePinnedAlbum(id);
+              } else {
+                libraryModel.addPinnedAlbum(id, album);
+              }
+            },
           ),
-          onPressed: () {
-            if (libraryModel.isPinnedAlbum(id)) {
-              libraryModel.removePinnedAlbum(id);
-            } else {
-              libraryModel.addPinnedAlbum(id, album);
-            }
-          },
-        ),
-        AvatarPlayButton(audios: album, pageId: id),
-        ExploreOnlinePopup(
-          text: '${album.firstOrNull?.artist} - ${album.firstOrNull?.album}',
-        ),
-      ],
+          AvatarPlayButton(audios: album, pageId: id),
+          ExploreOnlinePopup(
+            text: '${album.firstOrNull?.artist} - ${album.firstOrNull?.album}',
+          ),
+        ],
+      ),
     );
   }
 }
diff --git a/lib/local_audio/view/album_view.dart b/lib/local_audio/view/album_view.dart
index 70db365e9..c55dc6010 100644
--- a/lib/local_audio/view/album_view.dart
+++ b/lib/local_audio/view/album_view.dart
@@ -8,7 +8,6 @@ import '../../common/view/cover_background.dart';
 import '../../common/view/no_search_result_page.dart';
 import '../../common/view/sliver_fill_remaining_progress.dart';
 import '../../common/view/theme.dart';
-import '../../constants.dart';
 import '../../library/library_model.dart';
 import '../../player/player_model.dart';
 import '../local_audio_model.dart';
@@ -71,7 +70,7 @@ class AlbumCard extends StatelessWidget {
       bottom: AudioCardBottom(text: album),
       image: id != null && path != null
           ? LocalCover(
-              dimension: kAudioCardDimension,
+              dimension: audioCardDimension,
               albumId: id,
               path: path,
               fallback: fallback,
diff --git a/lib/local_audio/view/artist_page.dart b/lib/local_audio/view/artist_page.dart
index 8e18d791d..e4befec89 100644
--- a/lib/local_audio/view/artist_page.dart
+++ b/lib/local_audio/view/artist_page.dart
@@ -18,7 +18,6 @@ import '../../common/view/sliver_audio_page_control_panel.dart';
 import '../../common/view/sliver_audio_tile_list.dart';
 import '../../common/view/theme.dart';
 import '../../constants.dart';
-import '../../extensions/build_context_x.dart';
 import '../../l10n/l10n.dart';
 import '../../library/library_model.dart';
 import '../../search/search_model.dart';
@@ -165,27 +164,27 @@ class _ArtistPageControlPanel extends StatelessWidget with WatchItMixin {
     final setUseGridView = di<LocalAudioModel>().setUseArtistGridView;
     return Row(
       mainAxisSize: MainAxisSize.min,
-      children: [
-        IconButton(
-          icon: Icon(
-            Iconz().grid,
-            color: useGridView ? context.t.colorScheme.primary : null,
+      children: space(
+        children: [
+          IconButton(
+            icon: Icon(
+              Iconz().grid,
+            ),
+            isSelected: useGridView,
+            onPressed: () => setUseGridView(true),
           ),
-          isSelected: useGridView,
-          onPressed: () => setUseGridView(true),
-        ),
-        IconButton(
-          icon: Icon(
-            Iconz().list,
-            color: !useGridView ? context.t.colorScheme.primary : null,
+          IconButton(
+            icon: Icon(
+              Iconz().list,
+            ),
+            isSelected: !useGridView,
+            onPressed: () => setUseGridView(false),
           ),
-          isSelected: !useGridView,
-          onPressed: () => setUseGridView(false),
-        ),
-        AvatarPlayButton(audios: audios, pageId: pageId),
-        LikeAllIcon(audios: audios),
-        ExploreOnlinePopup(text: pageId),
-      ],
+          AvatarPlayButton(audios: audios, pageId: pageId),
+          LikeAllIcon(audios: audios),
+          ExploreOnlinePopup(text: pageId),
+        ],
+      ),
     );
   }
 }
diff --git a/lib/player/view/bottom_player.dart b/lib/player/view/bottom_player.dart
index 28e5ebbeb..86b33a25b 100644
--- a/lib/player/view/bottom_player.dart
+++ b/lib/player/view/bottom_player.dart
@@ -7,6 +7,7 @@ import '../../app/connectivity_model.dart';
 import '../../common/data/audio.dart';
 import '../../common/view/icons.dart';
 import '../../common/view/like_icon.dart';
+import '../../common/view/theme.dart';
 import '../../extensions/build_context_x.dart';
 import '../../l10n/l10n.dart';
 import '../../player/player_model.dart';
@@ -19,8 +20,6 @@ import 'player_track.dart';
 import 'queue_button.dart';
 import 'volume_popup.dart';
 
-const kBottomPlayerHeight = 90.0;
-
 class BottomPlayer extends StatelessWidget with WatchItMixin {
   const BottomPlayer({
     super.key,
@@ -44,13 +43,14 @@ class BottomPlayer extends StatelessWidget with WatchItMixin {
     );
 
     final player = SizedBox(
-      height: kBottomPlayerHeight,
+      height: bottomPlayerHeight,
       child: Column(
         children: [
-          PlayerTrack(
-            active: active,
-            bottomPlayer: true,
-          ),
+          if (!isMobile)
+            PlayerTrack(
+              active: active,
+              bottomPlayer: true,
+            ),
           InkWell(
             onTap: () => appModel.setFullWindowMode(true),
             child: Padding(
@@ -64,7 +64,7 @@ class BottomPlayer extends StatelessWidget with WatchItMixin {
                       borderRadius: BorderRadius.circular(4),
                       child: BottomPlayerImage(
                         audio: audio,
-                        size: kBottomPlayerHeight - 24,
+                        size: bottomPlayerHeight - 24,
                         videoController: model.controller,
                         isVideo: isVideo,
                         isOnline: isOnline,
@@ -131,6 +131,11 @@ class BottomPlayer extends StatelessWidget with WatchItMixin {
               ),
             ),
           ),
+          if (isMobile)
+            PlayerTrack(
+              active: active,
+              bottomPlayer: true,
+            ),
         ],
       ),
     );
diff --git a/lib/player/view/full_height_player.dart b/lib/player/view/full_height_player.dart
index ab9f1fd8f..e18089188 100644
--- a/lib/player/view/full_height_player.dart
+++ b/lib/player/view/full_height_player.dart
@@ -65,10 +65,10 @@ class FullHeightPlayer extends StatelessWidget with WatchItMixin {
           const SizedBox(
             height: kYaruPagePadding,
           ),
-          const SizedBox(
+          SizedBox(
             height: kYaruPagePadding,
-            width: 400,
-            child: PlayerTrack(),
+            width: playerWithSidePanel ? 400 : 350,
+            child: const PlayerTrack(),
           ),
           const SizedBox(
             height: kYaruPagePadding,
@@ -81,23 +81,27 @@ class FullHeightPlayer extends StatelessWidget with WatchItMixin {
         alignment: Alignment.topRight,
         children: [
           Center(
-            child: Row(
-              mainAxisSize: MainAxisSize.min,
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                SizedBox(width: 490, child: column),
-                if (playerWithSidePanel)
-                  audio?.audioType == AudioType.radio
-                      ? const SizedBox(
-                          width: 400,
-                          height: 500,
-                          child: RadioHistoryList(
-                            simpleList: true,
-                          ),
-                        )
-                      : const QueueBody(advancedList: false),
-              ],
-            ),
+            child: playerWithSidePanel
+                ? Row(
+                    mainAxisSize: MainAxisSize.min,
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      SizedBox(width: 490, child: column),
+                      audio?.audioType == AudioType.radio
+                          ? const SizedBox(
+                              width: 400,
+                              height: 500,
+                              child: RadioHistoryList(
+                                simpleList: true,
+                              ),
+                            )
+                          : QueueBody(
+                              advancedList: false,
+                              selectedColor: theme.colorScheme.onSurface,
+                            ),
+                    ],
+                  )
+                : column,
           ),
           FullHeightPlayerTopControls(
             iconColor: iconColor,
diff --git a/lib/player/view/player_main_controls.dart b/lib/player/view/player_main_controls.dart
index f77c846ef..3026fab8c 100644
--- a/lib/player/view/player_main_controls.dart
+++ b/lib/player/view/player_main_controls.dart
@@ -38,7 +38,10 @@ class PlayerMainControls extends StatelessWidget with WatchItMixin {
 
     final children = <Widget>[
       if (showShuffleAndRepeat)
-        ShuffleButton(active: active)
+        ShuffleButton(
+          active: active,
+          iconColor: defaultColor,
+        )
       else if (audio?.audioType == AudioType.podcast)
         SeekButton(
           active: active,
@@ -58,7 +61,7 @@ class PlayerMainControls extends StatelessWidget with WatchItMixin {
         ),
       _flex,
       CircleAvatar(
-        radius: avatarIconSize,
+        radius: avatarIconRadius,
         backgroundColor: avatarColor ?? theme.colorScheme.inverseSurface,
         child: PlayButton(
           iconColor: iconColor ?? theme.colorScheme.onInverseSurface,
diff --git a/lib/player/view/player_view.dart b/lib/player/view/player_view.dart
index ecb769a34..faa2f8ffc 100644
--- a/lib/player/view/player_view.dart
+++ b/lib/player/view/player_view.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:watch_it/watch_it.dart';
+import 'package:yaru/yaru.dart';
 
 import '../../app/app_model.dart';
 import '../../common/view/theme.dart';
@@ -46,7 +47,7 @@ class _PlayerViewState extends State<PlayerView> {
   Widget build(BuildContext context) {
     final theme = context.t;
     final c = watchPropertyValue((PlayerModel m) => m.color);
-    final color = getPlayerBg(c, theme.cardColor);
+    final color = isMobile ? theme.cardColor : getPlayerBg(c, theme.cardColor);
 
     Widget player;
     if (widget.mode != PlayerPosition.bottom) {
diff --git a/lib/player/view/queue_button.dart b/lib/player/view/queue_button.dart
index e615fd8d9..aa4d86130 100644
--- a/lib/player/view/queue_button.dart
+++ b/lib/player/view/queue_button.dart
@@ -75,9 +75,11 @@ class QueueBody extends StatefulWidget with WatchItStatefulWidgetMixin {
   const QueueBody({
     super.key,
     this.advancedList = true,
+    this.selectedColor,
   });
 
   final bool advancedList;
+  final Color? selectedColor;
 
   @override
   State<QueueBody> createState() => _QueueBodyState();
@@ -178,6 +180,7 @@ class _QueueBodyState extends State<QueueBody> {
                           queue: queue,
                           audio: audio,
                           selected: selected,
+                          selectedColor: widget.selectedColor,
                         ),
                       );
                     },
@@ -197,6 +200,7 @@ class _QueueTile extends StatelessWidget {
     required this.queue,
     required this.audio,
     required this.selected,
+    this.selectedColor,
   });
 
   final String? queueName;
@@ -204,40 +208,46 @@ class _QueueTile extends StatelessWidget {
   final Audio audio;
   final bool selected;
   final bool advancedTile;
+  final Color? selectedColor;
 
   @override
   Widget build(BuildContext context) {
+    var onTap = advancedTile
+        ? null
+        : queueName == null
+            ? null
+            : () => di<PlayerModel>().startPlaylist(
+                  listName: queueName!,
+                  audios: queue,
+                  index: queue.indexOf(audio),
+                );
     return ListTile(
       shape: advancedTile
           ? null
           : RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
-      onTap: advancedTile
-          ? null
-          : queueName == null
-              ? null
-              : () => di<PlayerModel>().startPlaylist(
-                    listName: queueName!,
-                    audios: queue,
-                    index: queue.indexOf(audio),
-                  ),
+      onTap: onTap,
       leading: advancedTile
           ? IconButton(
               onPressed:
                   selected ? null : () => di<PlayerModel>().remove(audio),
               icon: Icon(Iconz().close),
             )
-          : null,
+          : Visibility(
+              visible: selected,
+              child: const Text('>'),
+            ),
       contentPadding:
           advancedTile ? null : const EdgeInsets.only(right: 10, left: 0),
       selected: selected,
+      selectedColor: selectedColor,
       key: key,
-      title: Padding(
-        padding: EdgeInsets.only(
-          left: advancedTile ? 0 : 20,
-          right: 20,
-        ),
-        child: Text(audio.title ?? ''),
-      ),
+      title: Text(audio.title ?? ''),
+      trailing: advancedTile
+          ? null
+          : Visibility(
+              visible: selected,
+              child: const Text('<'),
+            ),
     );
   }
 }
diff --git a/lib/player/view/repeat_button.dart b/lib/player/view/repeat_button.dart
index 734ed625b..6f80a71b8 100644
--- a/lib/player/view/repeat_button.dart
+++ b/lib/player/view/repeat_button.dart
@@ -2,8 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:watch_it/watch_it.dart';
 
 import '../../common/view/icons.dart';
-import '../../extensions/build_context_x.dart';
-
 import '../../l10n/l10n.dart';
 import '../player_model.dart';
 
@@ -19,21 +17,14 @@ class RepeatButton extends StatelessWidget with WatchItMixin {
 
   @override
   Widget build(BuildContext context) {
-    final theme = context.t;
     final setRepeatSingle = di<PlayerModel>().setRepeatSingle;
     final repeatSingle = watchPropertyValue((PlayerModel m) => m.repeatSingle);
 
     return IconButton(
+      isSelected: repeatSingle,
       color: iconColor,
       tooltip: context.l10n.repeat,
-      icon: Icon(
-        Iconz().repeatSingle,
-        color: !active
-            ? theme.disabledColor
-            : (repeatSingle
-                ? theme.colorScheme.primary
-                : theme.colorScheme.onSurface),
-      ),
+      icon: Icon(Iconz().repeatSingle),
       onPressed: !active ? null : () => setRepeatSingle(!repeatSingle),
     );
   }
diff --git a/lib/player/view/shuffle_button.dart b/lib/player/view/shuffle_button.dart
index 5bef8171e..2a2a90cf4 100644
--- a/lib/player/view/shuffle_button.dart
+++ b/lib/player/view/shuffle_button.dart
@@ -1,33 +1,30 @@
 import 'package:flutter/material.dart';
 import 'package:watch_it/watch_it.dart';
 
-import '../../extensions/build_context_x.dart';
-import '../../l10n/l10n.dart';
 import '../../common/view/icons.dart';
+import '../../l10n/l10n.dart';
 import '../player_model.dart';
 
 class ShuffleButton extends StatelessWidget with WatchItMixin {
   const ShuffleButton({
     super.key,
     required this.active,
+    this.iconColor,
   });
 
   final bool active;
+  final Color? iconColor;
 
   @override
   Widget build(BuildContext context) {
-    final theme = context.t;
     final shuffle = watchPropertyValue((PlayerModel m) => m.shuffle);
 
     return IconButton(
+      isSelected: shuffle,
       tooltip: context.l10n.shuffle,
+      color: iconColor,
       icon: Icon(
         Iconz().shuffle,
-        color: !active
-            ? theme.disabledColor
-            : (shuffle
-                ? theme.colorScheme.primary
-                : theme.colorScheme.onSurface),
       ),
       onPressed: !active ? null : () => di<PlayerModel>().setShuffle(!shuffle),
     );
diff --git a/lib/playlists/view/playlist_page.dart b/lib/playlists/view/playlist_page.dart
index 0bf6fb4ee..1b3e628af 100644
--- a/lib/playlists/view/playlist_page.dart
+++ b/lib/playlists/view/playlist_page.dart
@@ -342,51 +342,51 @@ class _PlaylistControlPanel extends StatelessWidget with WatchItMixin {
     final libraryModel = di<LibraryModel>();
     return Row(
       mainAxisAlignment: MainAxisAlignment.center,
-      children: [
-        IconButton(
-          tooltip: context.l10n.editPlaylist,
-          icon: Icon(Iconz().pen),
-          onPressed: () => showDialog(
-            context: context,
-            builder: (context) => AlertDialog(
-              content: SizedBox(
-                height: 200,
-                width: 500,
-                child: PlaylistContent(
-                  playlistName: pageId,
-                  initialValue: pageId,
-                  allowDelete: true,
-                  allowRename: true,
-                  libraryModel: libraryModel,
+      children: space(
+        children: [
+          IconButton(
+            tooltip: context.l10n.editPlaylist,
+            icon: Icon(Iconz().pen),
+            onPressed: () => showDialog(
+              context: context,
+              builder: (context) => AlertDialog(
+                content: SizedBox(
+                  height: 200,
+                  width: 500,
+                  child: PlaylistContent(
+                    playlistName: pageId,
+                    initialValue: pageId,
+                    allowDelete: true,
+                    allowRename: true,
+                    libraryModel: libraryModel,
+                  ),
                 ),
               ),
             ),
           ),
-        ),
-        IconButton(
-          tooltip: context.l10n.clearPlaylist,
-          icon: Icon(Iconz().clearAll),
-          onPressed: () => libraryModel.clearPlaylist(pageId),
-        ),
-        AvatarPlayButton(audios: audios, pageId: pageId),
-        IconButton(
-          tooltip: context.l10n.add,
-          icon: Icon(Iconz().plus),
-          onPressed: () => showDialog(
-            context: context,
-            builder: (context) => PlaylistAddAudiosDialog(playlistId: pageId),
+          IconButton(
+            tooltip: context.l10n.clearPlaylist,
+            icon: Icon(Iconz().clearAll),
+            onPressed: () => libraryModel.clearPlaylist(pageId),
           ),
-        ),
-        IconButton(
-          tooltip: context.l10n.move,
-          isSelected: allowReorder,
-          onPressed: () => di<LocalAudioModel>().setAllowReorder(!allowReorder),
-          icon: Icon(
-            Iconz().reorder,
-            color: allowReorder ? context.t.colorScheme.primary : null,
+          AvatarPlayButton(audios: audios, pageId: pageId),
+          IconButton(
+            tooltip: context.l10n.add,
+            icon: Icon(Iconz().plus),
+            onPressed: () => showDialog(
+              context: context,
+              builder: (context) => PlaylistAddAudiosDialog(playlistId: pageId),
+            ),
           ),
-        ),
-      ],
+          IconButton(
+            tooltip: context.l10n.move,
+            isSelected: allowReorder,
+            onPressed: () =>
+                di<LocalAudioModel>().setAllowReorder(!allowReorder),
+            icon: Icon(Iconz().reorder),
+          ),
+        ],
+      ),
     );
   }
 }
diff --git a/lib/podcasts/view/download_button.dart b/lib/podcasts/view/download_button.dart
index 22df55589..2dae8f3fb 100644
--- a/lib/podcasts/view/download_button.dart
+++ b/lib/podcasts/view/download_button.dart
@@ -36,6 +36,7 @@ class DownloadButton extends StatelessWidget with WatchItMixin {
       alignment: Alignment.center,
       children: [
         Progress(
+          padding: EdgeInsets.zero,
           value: value == null || value == 1.0 ? 0 : value,
           backgroundColor: Colors.transparent,
         ),
diff --git a/lib/podcasts/view/podcast_audio_tile.dart b/lib/podcasts/view/podcast_audio_tile.dart
index ec8bb4302..db542b750 100644
--- a/lib/podcasts/view/podcast_audio_tile.dart
+++ b/lib/podcasts/view/podcast_audio_tile.dart
@@ -14,7 +14,7 @@ import '../../extensions/duration_x.dart';
 import '../../extensions/int_x.dart';
 import '../../l10n/l10n.dart';
 import '../../player/player_model.dart';
-import 'avatar_with_progress.dart';
+import 'podcast_tile_play_button.dart';
 import 'download_button.dart';
 
 class PodcastAudioTile extends StatelessWidget {
@@ -67,7 +67,7 @@ class PodcastAudioTile extends StatelessWidget {
             crossAxisAlignment: CrossAxisAlignment.center,
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
-              AvatarWithProgress(
+              PodcastTilePlayButton(
                 selected: selected,
                 audio: audio,
                 isPlayerPlaying: isPlayerPlaying,
@@ -91,7 +91,7 @@ class PodcastAudioTile extends StatelessWidget {
         alignment: Alignment.centerLeft,
         child: Padding(
           padding: EdgeInsets.only(
-            left: podcastProgressSize + 25,
+            left: (avatarIconRadius * 2) + 25,
             right: 60,
           ),
           child: Column(
@@ -102,41 +102,46 @@ class PodcastAudioTile extends StatelessWidget {
               ),
               Align(
                 alignment: Alignment.centerLeft,
-                child: Wrap(
-                  spacing: 5,
-                  children: [
-                    DownloadButton(
-                      audio: audio,
-                      addPodcast: addPodcast,
+                child: Padding(
+                  padding: const EdgeInsets.symmetric(vertical: 5),
+                  child: Row(
+                    children: space(
+                      children: [
+                        DownloadButton(
+                          audio: audio,
+                          addPodcast: addPodcast,
+                        ),
+                        ShareButton(
+                          active: true,
+                          audio: audio,
+                        ),
+                        IconButton(
+                          tooltip: context.l10n.insertIntoQueue,
+                          onPressed: () {
+                            final text =
+                                '${audio.title != null ? '${audio.album} - ' : ''}${audio.title ?? ''}';
+                            playerModel.insertIntoQueue(audio);
+                            showSnackBar(
+                              context: context,
+                              content:
+                                  Text(context.l10n.insertedIntoQueue(text)),
+                            );
+                          },
+                          icon: Icon(Iconz().insertIntoQueue),
+                        ),
+                        IconButton(
+                          tooltip: context.l10n.replayEpisode,
+                          onPressed: audio.url == null
+                              ? null
+                              : () => playerModel
+                                ..removeLastPosition(audio.url!)
+                                ..setPosition(Duration.zero)
+                                ..seek(),
+                          icon: Icon(Iconz().replay),
+                        ),
+                      ],
                     ),
-                    ShareButton(
-                      active: true,
-                      audio: audio,
-                    ),
-                    IconButton(
-                      tooltip: context.l10n.insertIntoQueue,
-                      onPressed: () {
-                        final text =
-                            '${audio.title != null ? '${audio.album} - ' : ''}${audio.title ?? ''}';
-                        playerModel.insertIntoQueue(audio);
-                        showSnackBar(
-                          context: context,
-                          content: Text(context.l10n.insertedIntoQueue(text)),
-                        );
-                      },
-                      icon: Icon(Iconz().insertIntoQueue),
-                    ),
-                    IconButton(
-                      tooltip: context.l10n.replayEpisode,
-                      onPressed: audio.url == null
-                          ? null
-                          : () => playerModel
-                            ..removeLastPosition(audio.url!)
-                            ..setPosition(Duration.zero)
-                            ..seek(),
-                      icon: Icon(Iconz().replay),
-                    ),
-                  ],
+                  ),
                 ),
               ),
             ],
@@ -247,7 +252,8 @@ class _Description extends StatelessWidget {
         );
       },
       child: _createHtml(
-        color: theme.colorScheme.onSurface.scale(lightness: -0.2),
+        color:
+            theme.colorScheme.onSurface.scale(lightness: -0.2, saturation: -1),
         maxLines: 5,
         paddings: HtmlPaddings.all(5),
       ),
diff --git a/lib/podcasts/view/podcast_page.dart b/lib/podcasts/view/podcast_page.dart
index 8ba621606..c58f61691 100644
--- a/lib/podcasts/view/podcast_page.dart
+++ b/lib/podcasts/view/podcast_page.dart
@@ -139,21 +139,24 @@ class PodcastPage extends StatelessWidget with WatchItMixin {
                 SliverAudioPageControlPanel(
                   controlPanel: Row(
                     mainAxisAlignment: MainAxisAlignment.center,
-                    children: [
-                      PodcastReplayButton(audios: episodesWithDownloads),
-                      const PodcastTimerButton(),
-                      PodcastSubButton(
-                        audios: episodesWithDownloads,
-                        pageId: pageId,
-                      ),
-                      AvatarPlayButton(
-                        audios: episodesWithDownloads,
-                        pageId: pageId,
-                      ),
-                      PodcastRefreshButton(pageId: pageId),
-                      PodcastReorderButton(feedUrl: pageId),
-                      ExploreOnlinePopup(text: title),
-                    ],
+                    children: space(
+                      children: [
+                        if (!isMobile)
+                          PodcastReplayButton(audios: episodesWithDownloads),
+                        const PodcastTimerButton(),
+                        PodcastSubButton(
+                          audios: episodesWithDownloads,
+                          pageId: pageId,
+                        ),
+                        AvatarPlayButton(
+                          audios: episodesWithDownloads,
+                          pageId: pageId,
+                        ),
+                        PodcastRefreshButton(pageId: pageId),
+                        PodcastReorderButton(feedUrl: pageId),
+                        if (!isMobile) ExploreOnlinePopup(text: title),
+                      ],
+                    ),
                   ),
                 ),
                 SliverPadding(
diff --git a/lib/podcasts/view/podcast_sub_button.dart b/lib/podcasts/view/podcast_sub_button.dart
index a6aa94619..c2467defa 100644
--- a/lib/podcasts/view/podcast_sub_button.dart
+++ b/lib/podcasts/view/podcast_sub_button.dart
@@ -4,7 +4,6 @@ import 'package:watch_it/watch_it.dart';
 import '../../common/data/audio.dart';
 import '../../common/view/icons.dart';
 import '../../common/view/progress.dart';
-import '../../extensions/build_context_x.dart';
 import '../../l10n/l10n.dart';
 import '../../library/library_model.dart';
 import '../podcast_model.dart';
@@ -21,7 +20,6 @@ class PodcastSubButton extends StatelessWidget with WatchItMixin {
 
   @override
   Widget build(BuildContext context) {
-    final theme = context.t;
     final libraryModel = di<LibraryModel>();
 
     final subscribed =
@@ -30,6 +28,7 @@ class PodcastSubButton extends StatelessWidget with WatchItMixin {
         watchPropertyValue((PodcastModel m) => m.checkingForUpdates);
 
     return IconButton(
+      isSelected: subscribed,
       tooltip: subscribed
           ? context.l10n.removeFromCollection
           : context.l10n.addToCollection,
@@ -37,9 +36,6 @@ class PodcastSubButton extends StatelessWidget with WatchItMixin {
           ? const SideBarProgress()
           : Icon(
               subscribed ? Iconz().removeFromLibrary : Iconz().addToLibrary,
-              color: subscribed
-                  ? theme.colorScheme.primary
-                  : theme.colorScheme.onSurface,
             ),
       onPressed: checkingForUpdates
           ? null
diff --git a/lib/podcasts/view/avatar_with_progress.dart b/lib/podcasts/view/podcast_tile_play_button.dart
similarity index 54%
rename from lib/podcasts/view/avatar_with_progress.dart
rename to lib/podcasts/view/podcast_tile_play_button.dart
index 98dddcc7e..a6a7fa684 100644
--- a/lib/podcasts/view/avatar_with_progress.dart
+++ b/lib/podcasts/view/podcast_tile_play_button.dart
@@ -6,10 +6,10 @@ import '../../common/view/icons.dart';
 import '../../common/view/theme.dart';
 import '../../extensions/build_context_x.dart';
 import '../../player/player_model.dart';
-import 'audio_progress.dart';
+import 'podcast_tile_progress.dart';
 
-class AvatarWithProgress extends StatelessWidget {
-  const AvatarWithProgress({
+class PodcastTilePlayButton extends StatelessWidget {
+  const PodcastTilePlayButton({
     super.key,
     required this.selected,
     required this.audio,
@@ -32,7 +32,7 @@ class AvatarWithProgress extends StatelessWidget {
     return Stack(
       alignment: Alignment.center,
       children: [
-        AudioProgress(
+        PodcastTileProgress(
           selected: selected,
           lastPosition: playerModel.getLastPosition(audio.url),
           duration: audio.durationMs == null
@@ -40,35 +40,38 @@ class AvatarWithProgress extends StatelessWidget {
               : Duration(milliseconds: audio.durationMs!.toInt()),
         ),
         CircleAvatar(
-          radius: avatarIconSize,
+          radius: avatarIconRadius,
           backgroundColor: selected
               ? theme.colorScheme.primary.withOpacity(0.08)
               : theme.colorScheme.onSurface.withOpacity(0.09),
-          child: IconButton(
-            icon: (isPlayerPlaying && selected)
-                ? Icon(
-                    Iconz().pause,
-                  )
-                : Padding(
-                    padding: appleStyled
-                        ? const EdgeInsets.only(left: 3)
-                        : EdgeInsets.zero,
-                    child: Icon(Iconz().playFilled),
-                  ),
-            onPressed: () {
-              if (selected) {
-                if (isPlayerPlaying) {
-                  playerModel.pause();
+          child: SizedBox.square(
+            dimension: avatarIconRadius * 2,
+            child: IconButton(
+              icon: (isPlayerPlaying && selected)
+                  ? Icon(
+                      Iconz().pause,
+                    )
+                  : Padding(
+                      padding: appleStyled
+                          ? const EdgeInsets.only(left: 3)
+                          : EdgeInsets.zero,
+                      child: Icon(Iconz().playFilled),
+                    ),
+              onPressed: () {
+                if (selected) {
+                  if (isPlayerPlaying) {
+                    playerModel.pause();
+                  } else {
+                    playerModel.resume();
+                  }
                 } else {
-                  playerModel.resume();
+                  playerModel.safeLastPosition().then((value) {
+                    startPlaylist?.call();
+                    removeUpdate?.call();
+                  });
                 }
-              } else {
-                playerModel.safeLastPosition().then((value) {
-                  startPlaylist?.call();
-                  removeUpdate?.call();
-                });
-              }
-            },
+              },
+            ),
           ),
         ),
       ],
diff --git a/lib/podcasts/view/audio_progress.dart b/lib/podcasts/view/podcast_tile_progress.dart
similarity index 63%
rename from lib/podcasts/view/audio_progress.dart
rename to lib/podcasts/view/podcast_tile_progress.dart
index a57028214..64511c153 100644
--- a/lib/podcasts/view/audio_progress.dart
+++ b/lib/podcasts/view/podcast_tile_progress.dart
@@ -6,8 +6,8 @@ import '../../common/view/theme.dart';
 import '../../extensions/build_context_x.dart';
 import '../../player/player_model.dart';
 
-class AudioProgress extends StatelessWidget with WatchItMixin {
-  const AudioProgress({
+class PodcastTileProgress extends StatelessWidget with WatchItMixin {
+  const PodcastTileProgress({
     super.key,
     this.lastPosition,
     this.duration,
@@ -35,19 +35,16 @@ class AudioProgress extends StatelessWidget with WatchItMixin {
     bool sliderActive = dur.inSeconds > 0 && dur.inSeconds >= pos.inSeconds;
 
     return RepaintBoundary(
-      child: SizedBox(
-        height: podcastProgressSize,
-        width: podcastProgressSize,
-        child: Progress(
-          color: selected
-              ? theme.colorScheme.primary.withOpacity(0.9)
-              : theme.colorScheme.primary.withOpacity(0.4),
-          value: sliderActive
-              ? (pos.inSeconds.toDouble() / dur.inSeconds.toDouble())
-              : 0,
-          backgroundColor: Colors.transparent,
-          strokeWidth: 3,
-        ),
+      child: Progress(
+        padding: EdgeInsets.zero,
+        color: selected
+            ? theme.colorScheme.primary.withOpacity(0.9)
+            : theme.colorScheme.primary.withOpacity(0.4),
+        value: sliderActive
+            ? (pos.inSeconds.toDouble() / dur.inSeconds.toDouble())
+            : 0,
+        backgroundColor: Colors.transparent,
+        strokeWidth: progressStrokeWidth,
       ),
     );
   }
diff --git a/lib/podcasts/view/podcasts_collection_body.dart b/lib/podcasts/view/podcasts_collection_body.dart
index 8a3873409..43ad1b52f 100644
--- a/lib/podcasts/view/podcasts_collection_body.dart
+++ b/lib/podcasts/view/podcasts_collection_body.dart
@@ -127,8 +127,8 @@ class PodcastsCollectionBody extends StatelessWidget with WatchItMixin {
                       final image = SafeNetworkImage(
                         url: artworkUrl600,
                         fit: BoxFit.cover,
-                        height: kAudioCardDimension,
-                        width: kAudioCardDimension,
+                        height: audioCardDimension,
+                        width: audioCardDimension,
                       );
 
                       return AudioCard(
diff --git a/lib/radio/view/radio_history_tile.dart b/lib/radio/view/radio_history_tile.dart
index a6241862e..928379deb 100644
--- a/lib/radio/view/radio_history_tile.dart
+++ b/lib/radio/view/radio_history_tile.dart
@@ -34,10 +34,15 @@ class RadioHistoryTile extends StatelessWidget with PlayerMixin {
     return ListTile(
       key: ValueKey(entry.value.icyTitle),
       selected: selected,
-      selectedColor: context.t.contrastyPrimary,
+      selectedColor: simpleTile
+          ? context.t.colorScheme.onSurface
+          : context.t.contrastyPrimary,
       contentPadding: const EdgeInsets.symmetric(horizontal: kYaruPagePadding),
       leading: simpleTile
-          ? null
+          ? Visibility(
+              visible: selected,
+              child: const Text('>'),
+            )
           : IcyImage(
               key: ValueKey(entry.value.icyTitle),
               height: yaruStyled ? 34 : 40,
@@ -45,7 +50,10 @@ class RadioHistoryTile extends StatelessWidget with PlayerMixin {
               mpvMetaData: entry.value,
             ),
       trailing: simpleTile
-          ? null
+          ? Visibility(
+              visible: selected,
+              child: const Text('<'),
+            )
           : IconButton(
               tooltip: context.l10n.metadata,
               onPressed: () => showDialog(
diff --git a/lib/radio/view/radio_page_star_button.dart b/lib/radio/view/radio_page_star_button.dart
index f703cee50..b09d00cd0 100644
--- a/lib/radio/view/radio_page_star_button.dart
+++ b/lib/radio/view/radio_page_star_button.dart
@@ -1,11 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:watch_it/watch_it.dart';
 
-import '../../extensions/build_context_x.dart';
+import '../../common/data/audio.dart';
+import '../../common/view/icons.dart';
 import '../../l10n/l10n.dart';
 import '../../library/library_model.dart';
-import '../../common/view/icons.dart';
-import '../../common/data/audio.dart';
 
 class RadioPageStarButton extends StatelessWidget with WatchItMixin {
   const RadioPageStarButton({super.key, required this.station});
@@ -20,6 +19,7 @@ class RadioPageStarButton extends StatelessWidget with WatchItMixin {
     );
 
     return IconButton(
+      isSelected: isStarred,
       tooltip: isStarred
           ? context.l10n.removeFromCollection
           : context.l10n.addToCollection,
@@ -28,12 +28,7 @@ class RadioPageStarButton extends StatelessWidget with WatchItMixin {
           : isStarred
               ? () => libraryModel.unStarStation(station.url!)
               : () => libraryModel.addStarredStation(station.url!, [station]),
-      icon: Iconz().getAnimatedStar(
-        isStarred,
-        isStarred
-            ? context.t.colorScheme.primary
-            : context.t.colorScheme.onSurface,
-      ),
+      icon: Iconz().getAnimatedStar(isStarred),
     );
   }
 }
diff --git a/lib/radio/view/station_card.dart b/lib/radio/view/station_card.dart
index c73f65ce5..5bbea79a7 100644
--- a/lib/radio/view/station_card.dart
+++ b/lib/radio/view/station_card.dart
@@ -5,7 +5,7 @@ import '../../common/data/audio.dart';
 import '../../common/view/audio_card.dart';
 import '../../common/view/audio_card_bottom.dart';
 import '../../common/view/safe_network_image.dart';
-import '../../constants.dart';
+import '../../common/view/theme.dart';
 import '../../library/library_model.dart';
 import 'radio_fall_back_icon.dart';
 import 'station_page.dart';
@@ -48,8 +48,8 @@ class StationCard extends StatelessWidget {
           errorIcon: RadioFallBackIcon(station: station),
           url: station?.imageUrl,
           fit: BoxFit.scaleDown,
-          height: kAudioCardDimension,
-          width: kAudioCardDimension,
+          height: audioCardDimension,
+          width: audioCardDimension,
         ),
       ),
     );
diff --git a/lib/radio/view/station_page.dart b/lib/radio/view/station_page.dart
index 45e34672e..9233d04cd 100644
--- a/lib/radio/view/station_page.dart
+++ b/lib/radio/view/station_page.dart
@@ -14,7 +14,6 @@ import '../../common/view/search_button.dart';
 import '../../common/view/sliver_audio_page_control_panel.dart';
 import '../../common/view/theme.dart';
 import '../../constants.dart';
-import '../../extensions/build_context_x.dart';
 import '../../l10n/l10n.dart';
 import '../../library/library_model.dart';
 import '../../search/search_model.dart';
@@ -123,18 +122,18 @@ class _StationPageControlPanel extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Row(
-      mainAxisAlignment: context.smallWindow
-          ? MainAxisAlignment.center
-          : MainAxisAlignment.start,
+      mainAxisAlignment: MainAxisAlignment.center,
       mainAxisSize: MainAxisSize.min,
-      children: [
-        RadioPageStarButton(station: station),
-        AvatarPlayButton(
-          audios: [station],
-          pageId: station.url!,
-        ),
-        RadioPageCopyHistoryButton(station: station),
-      ],
+      children: space(
+        children: [
+          RadioPageStarButton(station: station),
+          AvatarPlayButton(
+            audios: [station],
+            pageId: station.url!,
+          ),
+          RadioPageCopyHistoryButton(station: station),
+        ],
+      ),
     );
   }
 }
diff --git a/lib/search/view/sliver_podcast_search_results.dart b/lib/search/view/sliver_podcast_search_results.dart
index 33b69dbc8..d4205c8b2 100644
--- a/lib/search/view/sliver_podcast_search_results.dart
+++ b/lib/search/view/sliver_podcast_search_results.dart
@@ -10,7 +10,6 @@ import '../../common/view/offline_page.dart';
 import '../../common/view/progress.dart';
 import '../../common/view/safe_network_image.dart';
 import '../../common/view/theme.dart';
-import '../../constants.dart';
 import '../../l10n/l10n.dart';
 import '../../podcasts/podcast_model.dart';
 import '../../podcasts/podcast_utils.dart';
@@ -82,8 +81,8 @@ class _SliverPodcastSearchResultsState
         final image = SafeNetworkImage(
           url: art,
           fit: BoxFit.cover,
-          height: kAudioCardDimension,
-          width: kAudioCardDimension,
+          height: audioCardDimension,
+          width: audioCardDimension,
         );
 
         return AudioCard(
diff --git a/needs_translation.json b/needs_translation.json
index 50ade0e45..aacbe8b21 100644
--- a/needs_translation.json
+++ b/needs_translation.json
@@ -1,5 +1,7 @@
 {
   "cs": [
+    "local",
+    "unPinAlbum",
     "radioTagDisclaimerTitle",
     "radioTagDisclaimerSubTitle",
     "podcastFeedLoadingTimeout",
@@ -270,7 +272,9 @@
   ],
 
   "da": [
+    "local",
     "insertedIntoQueue",
+    "unPinAlbum",
     "duration",
     "radioTagDisclaimerTitle",
     "radioTagDisclaimerSubTitle",
@@ -557,6 +561,7 @@
     "addToFavorites",
     "removeFromFavorites",
     "share",
+    "local",
     "genre",
     "year",
     "albumArtist",
@@ -715,6 +720,7 @@
     "reorder",
     "move",
     "pinAlbum",
+    "unPinAlbum",
     "playAll",
     "hearingHistory",
     "emptyHearingHistory",
@@ -1004,6 +1010,8 @@
   ],
 
   "fr": [
+    "local",
+    "unPinAlbum",
     "alwaysAsk",
     "hideToTray",
     "closeBtnAction",
@@ -1265,6 +1273,8 @@
   ],
 
   "it": [
+    "local",
+    "unPinAlbum",
     "alwaysAsk",
     "hideToTray",
     "closeBtnAction",
@@ -1541,6 +1551,7 @@
     "addToFavorites",
     "removeFromFavorites",
     "share",
+    "local",
     "genre",
     "year",
     "albumArtist",
@@ -1727,6 +1738,7 @@
     "reorder",
     "move",
     "pinAlbum",
+    "unPinAlbum",
     "playAll",
     "hearingHistory",
     "emptyHearingHistory",
@@ -2031,12 +2043,14 @@
     "addToFavorites",
     "removeFromFavorites",
     "share",
+    "local",
     "stations",
     "copyToClipBoard",
     "insertedIntoQueue",
     "reorder",
     "move",
     "pinAlbum",
+    "unPinAlbum",
     "playAll",
     "hearingHistory",
     "emptyHearingHistory",
@@ -2341,6 +2355,7 @@
     "addToFavorites",
     "removeFromFavorites",
     "share",
+    "local",
     "genre",
     "year",
     "albumArtist",
@@ -2498,6 +2513,7 @@
     "reorder",
     "move",
     "pinAlbum",
+    "unPinAlbum",
     "playAll",
     "hearingHistory",
     "emptyHearingHistory",
@@ -2802,6 +2818,7 @@
     "addToFavorites",
     "removeFromFavorites",
     "share",
+    "local",
     "genre",
     "year",
     "albumArtist",
@@ -2959,6 +2976,7 @@
     "reorder",
     "move",
     "pinAlbum",
+    "unPinAlbum",
     "playAll",
     "hearingHistory",
     "emptyHearingHistory",
@@ -3250,8 +3268,10 @@
   "ru": [
     "fullScreen",
     "leaveFullScreen",
+    "local",
     "copyToClipBoard",
     "insertedIntoQueue",
+    "unPinAlbum",
     "language",
     "duration",
     "radioTagDisclaimerTitle",
@@ -3524,6 +3544,8 @@
   ],
 
   "sk": [
+    "local",
+    "unPinAlbum",
     "radioTagDisclaimerTitle",
     "radioTagDisclaimerSubTitle",
     "podcastFeedLoadingTimeout",
@@ -3809,6 +3831,7 @@
     "addToFavorites",
     "removeFromFavorites",
     "share",
+    "local",
     "genre",
     "year",
     "albumArtist",
@@ -3956,6 +3979,7 @@
     "reorder",
     "move",
     "pinAlbum",
+    "unPinAlbum",
     "playAll",
     "hearingHistory",
     "emptyHearingHistory",
@@ -4245,6 +4269,8 @@
   ],
 
   "tr": [
+    "local",
+    "unPinAlbum",
     "radioTagDisclaimerTitle",
     "radioTagDisclaimerSubTitle",
     "podcastFeedLoadingTimeout",
@@ -4514,7 +4540,19 @@
     "regionZimbabwe"
   ],
 
+  "zh": [
+    "local",
+    "unPinAlbum"
+  ],
+
+  "zh_CN": [
+    "local",
+    "unPinAlbum"
+  ],
+
   "zh_HK": [
+    "local",
+    "unPinAlbum",
     "schedulePlaybackStopTimer",
     "alwaysAsk",
     "hideToTray",
@@ -4777,6 +4815,8 @@
   ],
 
   "zh_TW": [
+    "local",
+    "unPinAlbum",
     "schedulePlaybackStopTimer",
     "alwaysAsk",
     "hideToTray",
diff --git a/pubspec.lock b/pubspec.lock
index 423a3de73..120629bd3 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -219,10 +219,10 @@ packages:
     dependency: "direct main"
     description:
       name: cached_network_image
-      sha256: "4a5d8d2c728b0f3d0245f69f921d7be90cae4c2fd5288f773088672c0893f819"
+      sha256: "7c1183e361e5c8b0a0f21a28401eecdbde252441106a9816400dd4c2b2424916"
       url: "https://pub.dev"
     source: hosted
-    version: "3.4.0"
+    version: "3.4.1"
   cached_network_image_platform_interface:
     dependency: transitive
     description:
@@ -235,10 +235,10 @@ packages:
     dependency: transitive
     description:
       name: cached_network_image_web
-      sha256: "6322dde7a5ad92202e64df659241104a43db20ed594c41ca18de1014598d7996"
+      sha256: "980842f4e8e2535b8dbd3d5ca0b1f0ba66bf61d14cc3a17a9b4788a3685ba062"
       url: "https://pub.dev"
     source: hosted
-    version: "1.3.0"
+    version: "1.3.1"
   characters:
     dependency: transitive
     description:
@@ -443,10 +443,10 @@ packages:
     dependency: transitive
     description:
       name: file_selector_android
-      sha256: "77f23eb5916fd0875946720d1f286f809a28a867d4882db6ac2cf053e2d5f7c6"
+      sha256: b8c9717a0177ca6fa035554b82cd6c83b838ddc66b7704eb6df0f77f027ecc90
       url: "https://pub.dev"
     source: hosted
-    version: "0.5.1+6"
+    version: "0.5.1+7"
   file_selector_ios:
     dependency: transitive
     description:
@@ -565,10 +565,10 @@ packages:
     dependency: "direct main"
     description:
       name: flutter_tabler_icons
-      sha256: "27b257b577f0f982c2ffbe57d5892c3ceac3fedc2917f0e3cec2de4a045525b3"
+      sha256: "4b74a899bf6d1ead67a3bc129f7f2be0213c72aa7bcbf4cd46dcaaa6196fd2c6"
       url: "https://pub.dev"
     source: hosted
-    version: "1.36.0"
+    version: "1.37.0"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -831,10 +831,10 @@ packages:
     dependency: "direct main"
     description:
       name: media_kit
-      sha256: "3289062540e3b8b9746e5c50d95bd78a9289826b7227e253dff806d002b9e67a"
+      sha256: "1f1deee148533d75129a6f38251ff8388e33ee05fc2d20a6a80e57d6051b7b62"
       url: "https://pub.dev"
     source: hosted
-    version: "1.1.10+1"
+    version: "1.1.11"
   media_kit_libs_android_video:
     dependency: transitive
     description:
@@ -871,18 +871,18 @@ packages:
     dependency: "direct main"
     description:
       name: media_kit_libs_video
-      sha256: "3688e0c31482074578652bf038ce6301a5d21e1eda6b54fc3117ffeb4bdba067"
+      sha256: "20bb4aefa8fece282b59580e1cd8528117297083a6640c98c2e98cfc96b93288"
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.4"
+    version: "1.0.5"
   media_kit_libs_windows_video:
     dependency: transitive
     description:
       name: media_kit_libs_windows_video
-      sha256: "7bace5f35d9afcc7f9b5cdadb7541d2191a66bb3fc71bfa11c1395b3360f6122"
+      sha256: "32654572167825c42c55466f5d08eee23ea11061c84aa91b09d0e0f69bdd0887"
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.9"
+    version: "1.0.10"
   media_kit_native_event_loop:
     dependency: "direct overridden"
     description:
@@ -913,18 +913,18 @@ packages:
     dependency: "direct main"
     description:
       name: mime
-      sha256: "2e123074287cc9fd6c09de8336dae606d1ddb88d9ac47358826db698c176a1f2"
+      sha256: "801fd0b26f14a4a58ccb09d5892c3fbdeff209594300a542492cf13fba9d247a"
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.5"
+    version: "1.0.6"
   mime_type:
     dependency: "direct main"
     description:
       name: mime_type
-      sha256: "2ad6e67d3d2de9ac0f8ef5352d998fd103cb21351ae8c02fb0c78b079b37d275"
+      sha256: d652b613e84dac1af28030a9fba82c0999be05b98163f9e18a0849c6e63838bb
       url: "https://pub.dev"
     source: hosted
-    version: "1.0.0"
+    version: "1.0.1"
   mockito:
     dependency: "direct main"
     description:
@@ -1057,11 +1057,11 @@ packages:
     dependency: "direct main"
     description:
       path: "."
-      ref: "61c5b11fad871ee655b512c79118a2590bf5df29"
-      resolved-ref: "61c5b11fad871ee655b512c79118a2590bf5df29"
-      url: "https://github.com/Feichtmeier/phoenix_theme"
+      ref: acf9bf1e05a110d890e83ae333f6822299fbbb5e
+      resolved-ref: acf9bf1e05a110d890e83ae333f6822299fbbb5e
+      url: "https://github.com/ubuntu-flutter-community/phoenix_theme"
     source: git
-    version: "0.0.1"
+    version: "1.0.0"
   pixel_snap:
     dependency: transitive
     description:
@@ -1146,10 +1146,10 @@ packages:
     dependency: transitive
     description:
       name: puppeteer
-      sha256: de3f921154e5d336b14cdc05b674ac3db5701a5338f3cb0042868a5146f16e67
+      sha256: a6752d4f09b510ae41911bfd0997f957e723d38facf320dd9ee0e5661108744a
       url: "https://pub.dev"
     source: hosted
-    version: "3.12.0"
+    version: "3.13.0"
   radio_browser_api:
     dependency: "direct main"
     description:
@@ -1274,10 +1274,10 @@ packages:
     dependency: transitive
     description:
       name: shared_preferences_android
-      sha256: a7e8467e9181cef109f601e3f65765685786c1a738a83d7fbbde377589c0d974
+      sha256: "480ba4345773f56acda9abf5f50bd966f581dac5d514e5fc4a18c62976bbba7e"
       url: "https://pub.dev"
     source: hosted
-    version: "2.3.1"
+    version: "2.3.2"
   shared_preferences_foundation:
     dependency: transitive
     description:
@@ -1399,10 +1399,10 @@ packages:
     dependency: transitive
     description:
       name: sqflite_common
-      sha256: c5e5b2a142a893a752cb36ae5888680248686725a54afceff31f9a3a76bc53c2
+      sha256: "7b41b6c3507854a159e24ae90a8e3e9cc01eb26a477c118d6dca065b5f55453e"
       url: "https://pub.dev"
     source: hosted
-    version: "2.5.4+1"
+    version: "2.5.4+2"
   stack_trace:
     dependency: transitive
     description:
@@ -1447,26 +1447,26 @@ packages:
     dependency: transitive
     description:
       name: super_clipboard
-      sha256: "74098001413e075cc53dee72b68c32eaffc10709df41806800393abaa6dac9d5"
+      sha256: "71d2a81e0e3a8c5d6339715a42f8dd42c6def02c0c805a23d45611010de39fbe"
       url: "https://pub.dev"
     source: hosted
-    version: "0.8.19"
+    version: "0.8.20"
   super_drag_and_drop:
     dependency: "direct main"
     description:
       name: super_drag_and_drop
-      sha256: "20f4318a6c9e81a76cc090a0f2d845157ff4f3619ed784e3235324a45ce34507"
+      sha256: "334a4f1dd6cc9ed1d0279ed25d199e74beec9751be5fe1d80637bf298ca8a92c"
       url: "https://pub.dev"
     source: hosted
-    version: "0.8.19"
+    version: "0.8.20"
   super_native_extensions:
     dependency: transitive
     description:
       name: super_native_extensions
-      sha256: c24676825c9f3ae844676a843d45ad186f2270539ffe72be4277753e46d14e29
+      sha256: "9d674b8c71e16f586b3967e67a6faa83c35e3d9ea4f64bca8551badfddf992cb"
       url: "https://pub.dev"
     source: hosted
-    version: "0.8.19"
+    version: "0.8.20"
   synchronized:
     dependency: transitive
     description:
@@ -1479,18 +1479,18 @@ packages:
     dependency: "direct main"
     description:
       name: system_theme
-      sha256: a32db6caa3a5129d02c03443121662959fba7ec1a8b01c78ee9a42718fbb3ef6
+      sha256: "676f8e5bdbf17d5b1267592370810df8cdfaa01d3a2e121b22bd4ea30e63f17c"
       url: "https://pub.dev"
     source: hosted
-    version: "3.0.0"
+    version: "3.1.0"
   system_theme_web:
     dependency: transitive
     description:
       name: system_theme_web
-      sha256: "7566f5a928f6d28d7a60c97bea8a851d1c6bc9b86a4df2366230a97458489219"
+      sha256: "900c92c5c050ce58048f241ef9a17e5cd8629808325a05b473dc62a6e99bae77"
       url: "https://pub.dev"
     source: hosted
-    version: "0.0.2"
+    version: "0.0.3"
   term_glyph:
     dependency: transitive
     description:
@@ -1559,10 +1559,10 @@ packages:
     dependency: transitive
     description:
       name: url_launcher_android
-      sha256: f0c73347dfcfa5b3db8bc06e1502668265d39c08f310c29bff4e28eea9699f79
+      sha256: e35a698ac302dd68e41f73250bd9517fe3ab5fa4f18fe4647a0872db61bacbab
       url: "https://pub.dev"
     source: hosted
-    version: "6.3.9"
+    version: "6.3.10"
   url_launcher_ios:
     dependency: transitive
     description:
@@ -1679,18 +1679,18 @@ packages:
     dependency: transitive
     description:
       name: web
-      sha256: "97da13628db363c635202ad97068d47c5b8aa555808e7a9411963c533b449b27"
+      sha256: d43c1d6b787bf0afad444700ae7f4db8827f701bc61c255ac8d328c6f4d52062
       url: "https://pub.dev"
     source: hosted
-    version: "0.5.1"
+    version: "1.0.0"
   web_socket_channel:
     dependency: transitive
     description:
       name: web_socket_channel
-      sha256: "58c6666b342a38816b2e7e50ed0f1e261959630becd4c879c4f26bfa14aa5a42"
+      sha256: d88238e5eac9a42bb43ca4e721edba3c08c6354d4a53063afaa568516217621b
       url: "https://pub.dev"
     source: hosted
-    version: "2.4.5"
+    version: "2.4.0"
   win32:
     dependency: "direct main"
     description:
diff --git a/pubspec.yaml b/pubspec.yaml
index 4e10e0fdc..5ddb469e9 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -58,8 +58,8 @@ dependencies:
   path_provider: ^2.1.2
   phoenix_theme:
     git:
-      url: https://github.com/Feichtmeier/phoenix_theme
-      ref: 61c5b11fad871ee655b512c79118a2590bf5df29
+      url: https://github.com/ubuntu-flutter-community/phoenix_theme
+      ref: acf9bf1e05a110d890e83ae333f6822299fbbb5e
   pls: ^1.1.0
   podcast_search: ^0.7.2
   radio_browser_api: ^2.0.0