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

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

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

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,

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

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,
+                ),
               ),
             ),
           ),

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,

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,
     );
   }
 }

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

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,15 +48,20 @@ class HeaderBar extends StatelessWidget
 
     Widget? leading;
 
-    if (includeSidebarButton &&
+    if (!isMobile &&
+        includeSidebarButton &&
         !context.showMasterPanel &&
         masterScaffoldKey.currentState?.isDrawerOpen == false) {
       leading = const SidebarButton();
     } else {
       if (includeBackButton && canPop) {
         leading = const NavBackButton();
       } else {
-        leading = null;
+        leading = isMobile
+            ? const SizedBox(
+                width: 60,
+              )
+            : null;
       }
     }
 

lib/common/view/sliver_audio_tile_list.dart

@@ -16,13 +16,15 @@ class SliverAudioTileList extends StatelessWidget with WatchItMixin {
     this.padding,
     this.onSubTitleTab,
     required this.audioPageType,
+    this.selectedColor,
   });
 
   final List<Audio> audios;
   final String pageId;
   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,
             );
           },
         ),

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

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.",

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