fix: align control panel sizes and padding, correctly load remoteimag…

…eurl (#905)

lib/common/view/icons.dart

@@ -375,10 +375,10 @@ class Iconz {
           ? CupertinoIcons.clear
           : Icons.clear;
   IconData get viewMore => yaruStyled
-      ? YaruIcons.view_more_horizontal
+      ? YaruIcons.view_more
       : appleStyled
-          ? CupertinoIcons.ellipsis
-          : Icons.more_horiz;
+          ? CupertinoIcons.ellipsis_vertical
+          : Icons.more_vert;
   IconData? get close => yaruStyled
       ? YaruIcons.window_close
       : appleStyled

lib/common/view/sliver_audio_page.dart

@@ -61,7 +61,6 @@ class SliverAudioPage extends StatelessWidget {
       resizeToAvoidBottomInset: isMobile ? false : null,
       appBar: HeaderBar(
         adaptive: true,
-        title: isMobile ? null : Text(pageTitle ?? pageId),
         actions: [
           Padding(
             padding: appBarSingleActionSpacing,

lib/common/view/sliver_filter_app_bar.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+
+import '../../extensions/build_context_x.dart';
+
+class SliverFilterAppBar extends StatelessWidget {
+  const SliverFilterAppBar({
+    super.key,
+    this.onStretchTrigger,
+    required this.title,
+    required this.padding,
+  });
+
+  final Future<void> Function()? onStretchTrigger;
+  final Widget title;
+  final EdgeInsets padding;
+
+  @override
+  Widget build(BuildContext context) {
+    return SliverPadding(
+      padding: padding,
+      sliver: SliverAppBar(
+        shape: const RoundedRectangleBorder(side: BorderSide.none),
+        elevation: 0,
+        backgroundColor: context.t.scaffoldBackgroundColor,
+        automaticallyImplyLeading: false,
+        pinned: true,
+        centerTitle: true,
+        titleSpacing: 0,
+        stretch: true,
+        title: title,
+        onStretchTrigger: onStretchTrigger,
+      ),
+    );
+  }
+}

lib/common/view/theme.dart

@@ -208,6 +208,9 @@ Color? chipBorder(ThemeData theme, bool loading) {
   return yaruStyled ? (loading ? null : Colors.transparent) : null;
 }
 
+TextStyle chipTextStyle(ThemeData theme) =>
+    TextStyle(color: theme.colorScheme.onSurface);
+
 Color? chipSelectionColor(ThemeData theme, bool loading) {
   return yaruStyled ? (loading ? theme.colorScheme.outline : null) : null;
 }
@@ -216,10 +219,19 @@ double get likeButtonWidth => yaruStyled ? 62 : 70;
 
 double get progressStrokeWidth => 3.0;
 
-double get avatarIconRadius => (yaruStyled ? kYaruTitleBarItemHeight : 38) / 2;
+double get avatarIconRadius =>
+    (yaruStyled
+        ? kYaruTitleBarItemHeight
+        : isMobile
+            ? 42
+            : 38) /
+    2;
 
 double get bigPlayButtonRadius => yaruStyled ? 22 : 23;
 
+EdgeInsets get filterPanelPadding =>
+    EdgeInsets.only(top: isMobile ? 10 : 0, bottom: 10);
+
 EdgeInsets get bigPlayButtonPadding =>
     EdgeInsets.symmetric(horizontal: yaruStyled ? 2.5 : 5);
 

lib/local_audio/view/artist_page.dart

@@ -72,7 +72,6 @@ class ArtistPage extends StatelessWidget with WatchItMixin {
       resizeToAvoidBottomInset: isMobile ? false : null,
       appBar: HeaderBar(
         adaptive: true,
-        title: isMobile ? null : Text(pageId),
         actions: [
           Padding(
             padding: appBarSingleActionSpacing,

lib/local_audio/view/local_audio_control_panel.dart

@@ -26,7 +26,12 @@ class LocalAudioControlPanel extends StatelessWidget with WatchItMixin {
         selectedFirst: false,
         clearOnSelect: false,
         labels: LocalAudioView.values
-            .map((e) => Text(e.localize(context.l10n)))
+            .map(
+              (e) => Text(
+                e.localize(context.l10n),
+                style: chipTextStyle(theme),
+              ),
+            )
             .toList(),
         isSelected: LocalAudioView.values
             .map((e) => e == LocalAudioView.values[index])

lib/local_audio/view/local_audio_page.dart

@@ -9,6 +9,7 @@ import '../../common/view/common_widgets.dart';
 import '../../common/view/header_bar.dart';
 import '../../common/view/icons.dart';
 import '../../common/view/search_button.dart';
+import '../../common/view/sliver_filter_app_bar.dart';
 import '../../common/view/theme.dart';
 import '../../constants.dart';
 import '../../extensions/build_context_x.dart';
@@ -82,20 +83,15 @@ class _LocalAudioPageState extends State<LocalAudioPage> {
         builder: (context, constraints) {
           return CustomScrollView(
             slivers: [
-              SliverPadding(
+              SliverFilterAppBar(
                 padding: getAdaptiveHorizontalPadding(constraints: constraints)
-                    .copyWith(bottom: 5),
-                sliver: SliverAppBar(
-                  shape: const RoundedRectangleBorder(side: BorderSide.none),
-                  elevation: 0,
-                  backgroundColor: context.t.scaffoldBackgroundColor,
-                  automaticallyImplyLeading: false,
-                  pinned: true,
-                  centerTitle: true,
-                  titleSpacing: 0,
-                  stretch: true,
-                  title: const LocalAudioControlPanel(),
+                    .copyWith(
+                  bottom: filterPanelPadding.bottom,
+                  left: filterPanelPadding.left,
+                  top: filterPanelPadding.top,
+                  right: filterPanelPadding.right,
                 ),
+                title: const LocalAudioControlPanel(),
               ),
               SliverPadding(
                 padding: getAdaptiveHorizontalPadding(constraints: constraints),

lib/player/player_service.dart

@@ -482,6 +482,7 @@ class PlayerService {
 
     if (playerState?.audio != null) {
       _setAudio(playerState!.audio!);
+      _setRemoteImageUrl(playerState.audio!.imageUrl);
 
       if (playerState.duration != null) {
         setDuration(playerState.duration!.parsedDuration);
@@ -789,7 +790,7 @@ class PlayerService {
 
   Future<void> _writePlayerState() async {
     final playerState = PlayerState(
-      audio: _audio,
+      audio: _audio?.copyWith(imageUrl: _remoteImageUrl),
       duration: _duration?.toString(),
       position: _position?.toString(),
       queue:

lib/playlists/view/playlist_page.dart

@@ -87,7 +87,6 @@ class PlaylistPage extends StatelessWidget {
         resizeToAvoidBottomInset: isMobile ? false : null,
         appBar: HeaderBar(
           adaptive: true,
-          title: Text(playlist.key),
           actions: [
             Padding(
               padding: appBarSingleActionSpacing,

lib/podcasts/view/podcast_collection_control_panel.dart

@@ -35,9 +35,13 @@ class PodcastCollectionControlPanel extends StatelessWidget with WatchItMixin {
       clearOnSelect: false,
       selectedFirst: false,
       labels: [
-        Text(context.l10n.newEpisodes),
+        Text(
+          context.l10n.newEpisodes,
+          style: chipTextStyle(theme),
+        ),
         Text(
           context.l10n.downloadsOnly,
+          style: chipTextStyle(theme),
         ),
       ],
       isSelected: [

lib/podcasts/view/podcast_page.dart

@@ -73,7 +73,6 @@ class PodcastPage extends StatelessWidget with WatchItMixin {
       resizeToAvoidBottomInset: isMobile ? false : null,
       appBar: HeaderBar(
         adaptive: true,
-        title: isMobile ? null : Text(title),
         actions: [
           Padding(
             padding: appBarSingleActionSpacing,

lib/podcasts/view/podcasts_collection_body.dart

@@ -79,16 +79,16 @@ class PodcastsCollectionBody extends StatelessWidget with WatchItMixin {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        const Align(
-          alignment: Alignment.center,
-          child: Padding(
-            padding: EdgeInsets.only(top: 10),
-            child: PodcastCollectionControlPanel(),
+        // TODO: port to sliver to get rid of this padding drama
+        Padding(
+          padding: const EdgeInsets.symmetric(vertical: 5),
+          child: Container(
+            alignment: Alignment.center,
+            height: context.t.appBarTheme.toolbarHeight,
+            margin: filterPanelPadding,
+            child: const PodcastCollectionControlPanel(),
           ),
         ),
-        const SizedBox(
-          height: 15,
-        ),
         if (loading)
           Expanded(child: LoadingGrid(limit: subsLength))
         else

lib/radio/view/radio_lib_page.dart

@@ -35,10 +35,13 @@ class RadioLibPage extends StatelessWidget with WatchItMixin {
 
     return Column(
       children: [
-        Align(
-          alignment: Alignment.center,
-          child: Padding(
-            padding: const EdgeInsets.only(top: 10),
+        // TODO: port to sliver to get rid of this padding drama
+        Padding(
+          padding: const EdgeInsets.symmetric(vertical: 5),
+          child: Container(
+            alignment: Alignment.center,
+            margin: filterPanelPadding,
+            height: context.t.appBarTheme.toolbarHeight,
             child: YaruChoiceChipBar(
               chipBackgroundColor: chipColor(theme),
               selectedChipBackgroundColor: chipSelectionColor(theme, false),
@@ -49,19 +52,25 @@ class RadioLibPage extends StatelessWidget with WatchItMixin {
                   .setRadioCollectionView(RadioCollectionView.values[index]),
               yaruChoiceChipBarStyle: YaruChoiceChipBarStyle.wrap,
               labels: [
-                Text(context.l10n.station),
-                Text(context.l10n.tags),
-                Text(context.l10n.hearingHistory),
+                Text(
+                  context.l10n.station,
+                  style: chipTextStyle(theme),
+                ),
+                Text(
+                  context.l10n.tags,
+                  style: chipTextStyle(theme),
+                ),
+                Text(
+                  context.l10n.hearingHistory,
+                  style: chipTextStyle(theme),
+                ),
               ],
               isSelected: RadioCollectionView.values
                   .map((e) => e == radioCollectionView)
                   .toList(),
             ),
           ),
         ),
-        const SizedBox(
-          height: 15,
-        ),
         Expanded(
           child: switch (radioCollectionView) {
             RadioCollectionView.stations => const StationGrid(),

lib/radio/view/station_page.dart

@@ -41,7 +41,6 @@ class StationPage extends StatelessWidget with WatchItMixin {
       resizeToAvoidBottomInset: isMobile ? false : null,
       appBar: HeaderBar(
         adaptive: true,
-        title: isMobile ? null : Text(station.title ?? station.url ?? ''),
         actions: [
           Padding(
             padding: appBarSingleActionSpacing,

lib/search/view/search_page.dart

@@ -7,6 +7,7 @@ import '../../common/view/adaptive_container.dart';
 import '../../common/view/header_bar.dart';
 import '../../common/view/progress.dart';
 import '../../common/view/search_button.dart';
+import '../../common/view/sliver_filter_app_bar.dart';
 import '../../common/view/theme.dart';
 import '../../library/library_model.dart';
 import '../search_model.dart';
@@ -55,13 +56,23 @@ class SearchPage extends StatelessWidget with WatchItMixin {
         builder: (context, constraints) {
           return CustomScrollView(
             slivers: [
-              SliverPadding(
+              SliverFilterAppBar(
                 padding: getAdaptiveHorizontalPadding(constraints: constraints)
                     .copyWith(
-                  bottom: 5,
-                  top: isMobile ? 10 : 0,
+                  bottom: filterPanelPadding.bottom,
+                  left: filterPanelPadding.left,
+                  top: filterPanelPadding.top,
+                  right: filterPanelPadding.right,
                 ),
-                sliver: switch (audioType) {
+                onStretchTrigger: () async {
+                  WidgetsBinding.instance
+                      .addPostFrameCallback((timeStamp) async {
+                    if (context.mounted) {
+                      return di<SearchModel>().search();
+                    }
+                  });
+                },
+                title: switch (audioType) {
                   AudioType.podcast => const SliverPodcastFilterBar(),
                   _ => const SliverSearchTypeFilterBar(),
                 },