fix(track_collection_view): keyboard focus on scroll and no space for search results in playlist/album

lib/components/shared/heart_button.dart

@@ -5,13 +5,10 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 
 import 'package:spotify/spotify.dart';
 import 'package:spotube/extensions/context.dart';
-import 'package:spotube/hooks/use_palette_color.dart';
 import 'package:spotube/provider/authentication_provider.dart';
 import 'package:spotube/services/mutations/mutations.dart';
 import 'package:spotube/services/queries/queries.dart';
 
-import 'package:spotube/utils/type_conversion_utils.dart';
-
 class HeartButton extends HookConsumerWidget {
   final bool isLiked;
   final void Function()? onPressed;
@@ -163,15 +160,6 @@ class PlaylistHeartButton extends HookConsumerWidget {
       ],
     );
 
-    final titleImage = useMemoized(
-        () => TypeConversionUtils.image_X_UrlString(
-              playlist.images,
-              placeholder: ImagePlaceholder.collection,
-            ),
-        [playlist.images]);
-
-    final color = usePaletteGenerator(titleImage).dominantColor;
-
     if (me.isLoading || !me.hasData) {
       return const CircularProgressIndicator();
     }
@@ -181,7 +169,7 @@ class PlaylistHeartButton extends HookConsumerWidget {
       tooltip: isLikedQuery.data ?? false
           ? context.l10n.remove_from_favorites
           : context.l10n.save_as_favorite,
-      color: color?.titleTextColor,
+      color: Colors.white,
       onPressed: isLikedQuery.hasData
           ? () {
               togglePlaylistLike.mutate(isLikedQuery.data!);
@@ -224,6 +212,7 @@ class AlbumHeartButton extends HookConsumerWidget {
       tooltip: isLiked
           ? context.l10n.remove_from_favorites
           : context.l10n.save_as_favorite,
+      color: Colors.white,
       onPressed: albumIsSaved.hasData
           ? () {
               toggleAlbumLike.mutate(isLiked);

lib/components/shared/track_table/track_collection_view.dart

@@ -65,7 +65,6 @@ class TrackCollectionView<T> extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, ref) {
     final theme = Theme.of(context);
-    final mediaQuery = MediaQuery.of(context);
     final auth = ref.watch(AuthenticationNotifier.provider);
     final color = usePaletteGenerator(titleImage).dominantColor;
 
@@ -343,23 +342,30 @@ class TrackCollectionView<T> extends HookConsumerWidget {
                     }
 
                     return TracksTableView(
-                      List.from(
-                        (tracksSnapshot.data ?? []).map(
-                          (track) {
-                            if (track is Track) {
-                              return track;
-                            } else {
-                              return TypeConversionUtils.simpleTrack_X_Track(
-                                track,
-                                album!,
-                              );
-                            }
-                          },
-                        ),
-                      ),
+                      (tracksSnapshot.data ?? []).map(
+                        (track) {
+                          if (track is Track) {
+                            return track;
+                          } else {
+                            return TypeConversionUtils.simpleTrack_X_Track(
+                              track,
+                              album!,
+                            );
+                          }
+                        },
+                      ).toList(),
                       onTrackPlayButtonPressed: onPlay,
                       playlistId: id,
                       userPlaylist: isOwned,
+                      onFiltering: () {
+                        // scroll the flexible space
+                        // to allow more space for search results
+                        controller.animateTo(
+                          390,
+                          duration: const Duration(milliseconds: 200),
+                          curve: Curves.easeInOut,
+                        );
+                      },
                     );
                   },
                 )

lib/components/shared/track_table/tracks_table_view.dart

@@ -33,10 +33,14 @@ class TracksTableView extends HookConsumerWidget {
   final bool isSliver;
 
   final Widget? heading;
+
+  final VoidCallback? onFiltering;
+
   const TracksTableView(
     this.tracks, {
     Key? key,
     this.onTrackPlayButtonPressed,
+    this.onFiltering,
     this.userPlaylist = false,
     this.playlistId,
     this.heading,
@@ -46,6 +50,7 @@ class TracksTableView extends HookConsumerWidget {
   @override
   Widget build(context, ref) {
     final theme = Theme.of(context);
+    final mediaQuery = MediaQuery.of(context);
 
     ref.watch(ProxyPlaylistNotifier.provider);
     final playback = ref.watch(ProxyPlaylistNotifier.notifier);
@@ -178,6 +183,7 @@ class TracksTableView extends HookConsumerWidget {
                     onPressed: () {
                       isFiltering.value = !isFiltering.value;
                       if (isFiltering.value) {
+                        onFiltering?.call();
                         searchFocus.requestFocus();
                       } else {
                         searchController.clear();
@@ -314,7 +320,6 @@ class TracksTableView extends HookConsumerWidget {
                         }
                       },
                       child: TextField(
-                        autofocus: true,
                         focusNode: searchFocus,
                         controller: searchController,
                         decoration: InputDecoration(
@@ -375,7 +380,12 @@ class TracksTableView extends HookConsumerWidget {
                         }
                       },
               );
-            }).toList(),
+            }),
+            // extra space for mobile devices where keyboard takes half of the screen
+            if (isFiltering.value)
+              SizedBox(
+                height: mediaQuery.size.height * .75, //75% of the screen
+              ),
           ];
 
     if (isSliver) {