chore: fix shuffle doesn't move active track to top and library gridview with floating filter field

lib/components/connect/connect_device.dart

@@ -52,52 +52,58 @@ class ConnectDeviceButton extends HookConsumerWidget {
         alignment: Alignment.centerRight,
         fit: StackFit.loose,
         children: [
-          Center(
+          Material(
-            child: InkWell(
+            type: MaterialType.transparency,
-              onTap: () {
+            child: Center(
-                ServiceUtils.push(context, "/connect");
+              child: ClipRect(
-              },
+                clipBehavior: Clip.hardEdge,
-              borderRadius: BorderRadius.circular(50),
+                child: InkWell(
-              child: Ink(
+                  onTap: () {
-                decoration: BoxDecoration(
+                    ServiceUtils.push(context, "/connect");
+                  },
                   borderRadius: BorderRadius.circular(50),
-                  color: colorScheme.primaryContainer,
+                  child: Ink(
-                ),
+                    decoration: BoxDecoration(
-                padding:
+                      borderRadius: BorderRadius.circular(50),
-                    const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
+                      color: colorScheme.primaryContainer,
-                child: Row(
+                    ),
-                  mainAxisSize: MainAxisSize.min,
+                    padding:
-                  children: [
+                        const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
-                    if (connectClients.asData?.value.resolvedService !=
+                    child: Row(
-                        null) ...[
+                      mainAxisSize: MainAxisSize.min,
-                      Container(
+                      children: [
-                        width: 7,
+                        if (connectClients.asData?.value.resolvedService !=
-                        height: 7,
+                            null) ...[
-                        decoration: BoxDecoration(
+                          Container(
-                          color: Colors.greenAccent,
+                            width: 7,
-                          borderRadius: BorderRadius.circular(50),
+                            height: 7,
-                        ),
+                            decoration: BoxDecoration(
-                      ),
+                              color: Colors.greenAccent,
-                      const Gap(5),
+                              borderRadius: BorderRadius.circular(50),
-                    ],
+                            ),
-                    Text(context.l10n.devices),
+                          ),
-                    if (connectClients.asData?.value.services.isNotEmpty ==
+                          const Gap(5),
-                        true)
+                        ],
-                      Text(
+                        Text(context.l10n.devices),
-                        " (${connectClients.asData?.value.services.length})",
+                        if (connectClients.asData?.value.services.isNotEmpty ==
-                        style: TextStyle(
+                            true)
-                          color:
+                          Text(
-                              colorScheme.onPrimaryContainer.withOpacity(0.5),
+                            " (${connectClients.asData?.value.services.length})",
-                        ),
+                            style: TextStyle(
-                      ),
+                              color: colorScheme.onPrimaryContainer
-                    const Gap(35),
+                                  .withOpacity(0.5),
-                  ],
+                            ),
+                          ),
+                        const Gap(35),
+                      ],
+                    ),
+                  ),
                 ),
               ),
             ),
           ),
           Positioned(
-            right: 0,
+            right: -3,
             child: IconButton.filled(
               icon: const Icon(SpotubeIcons.speaker),
               style: IconButton.styleFrom(

lib/components/library/user_albums.dart

@@ -2,17 +2,17 @@ import 'package:flutter/material.dart' hide Image;
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:collection/collection.dart';
 import 'package:fuzzywuzzy/fuzzywuzzy.dart';
+import 'package:gap/gap.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:skeletonizer/skeletonizer.dart';
 import 'package:spotube/collections/fake.dart';
 
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/album/album_card.dart';
-import 'package:spotube/components/shared/fallbacks/not_found.dart';
 import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
 import 'package:spotube/components/shared/fallbacks/anonymous_fallback.dart';
 import 'package:spotube/components/shared/waypoint.dart';
-import 'package:spotube/extensions/album_simple.dart';
+import 'package:spotube/extensions/constrains.dart';
 import 'package:spotube/extensions/context.dart';
 import 'package:spotube/provider/authentication_provider.dart';
 import 'package:spotube/provider/spotify/spotify.dart';
@@ -50,71 +50,65 @@ class UserAlbums extends HookConsumerWidget {
       return const AnonymousFallback();
     }
 
-    final theme = Theme.of(context);
+    return SafeArea(
-
+      child: Scaffold(
-    return RefreshIndicator(
+        body: RefreshIndicator(
-      onRefresh: () async {
+          onRefresh: () async {
-        ref.invalidate(favoriteAlbumsProvider);
+            ref.invalidate(favoriteAlbumsProvider);
-      },
+          },
-      child: SafeArea(
+          child: InterScrollbar(
-        child: Scaffold(
+            controller: controller,
-          appBar: PreferredSize(
+            child: CustomScrollView(
-            preferredSize: const Size.fromHeight(50),
-            child: Padding(
-              padding: const EdgeInsets.symmetric(horizontal: 8.0),
-              child: ColoredBox(
-                color: theme.scaffoldBackgroundColor,
-                child: SearchBar(
-                  onChanged: (value) => searchText.value = value,
-                  leading: const Icon(SpotubeIcons.filter),
-                  hintText: context.l10n.filter_albums,
-                ),
-              ),
-            ),
-          ),
-          body: SizedBox.expand(
-            child: InterScrollbar(
               controller: controller,
-              child: SingleChildScrollView(
+              slivers: [
-                padding: const EdgeInsets.all(8.0),
+                SliverAppBar(
-                controller: controller,
+                  floating: true,
-                child: Skeletonizer(
+                  flexibleSpace: Padding(
-                  enabled: albumsQuery.isLoading,
+                    padding: const EdgeInsets.symmetric(horizontal: 8.0),
-                  child: Center(
+                    child: SearchBar(
-                    child: Wrap(
+                      onChanged: (value) => searchText.value = value,
-                      runSpacing: 20,
+                      leading: const Icon(SpotubeIcons.filter),
-                      alignment: WrapAlignment.center,
+                      hintText: context.l10n.filter_albums,
-                      runAlignment: WrapAlignment.center,
-                      crossAxisAlignment: WrapCrossAlignment.center,
-                      children: [
-                        if (albumsQuery.asData?.value == null ||
-                            albumsQuery.asData!.value.items.isEmpty)
-                          ...List.generate(
-                            10,
-                            (index) => AlbumCard(FakeData.album),
-                          )
-                        else if (albums.isEmpty)
-                          const Row(
-                            mainAxisAlignment: MainAxisAlignment.center,
-                            children: [NotFound()],
-                          ),
-                        for (final album in albums) AlbumCard(album.toAlbum()),
-                        if (albums.isNotEmpty &&
-                            albumsQuery.asData?.value.hasMore == true)
-                          Skeletonizer(
-                            enabled: true,
-                            child: Waypoint(
-                              controller: controller,
-                              isGrid: true,
-                              onTouchEdge: albumsQueryNotifier.fetchMore,
-                              child: AlbumCard(FakeData.album),
-                            ),
-                          )
-                      ],
                     ),
                   ),
                 ),
-              ),
+                const SliverGap(10),
+                Skeletonizer.sliver(
+                  enabled: albumsQuery.isLoading,
+                  child: SliverLayoutBuilder(builder: (context, constrains) {
+                    return SliverGrid.builder(
+                      itemCount: albums.isEmpty ? 6 : albums.length + 1,
+                      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
+                        maxCrossAxisExtent: 200,
+                        mainAxisExtent: constrains.smAndDown ? 225 : 250,
+                        crossAxisSpacing: 8,
+                        mainAxisSpacing: 8,
+                      ),
+                      itemBuilder: (context, index) {
+                        if (albums.isNotEmpty && index == albums.length) {
+                          if (albumsQuery.asData?.value.hasMore != true) {
+                            return const SizedBox.shrink();
+                          }
+
+                          return Waypoint(
+                            controller: controller,
+                            isGrid: true,
+                            onTouchEdge: albumsQueryNotifier.fetchMore,
+                            child: Skeletonizer(
+                              enabled: true,
+                              child: AlbumCard(FakeData.albumSimple),
+                            ),
+                          );
+                        }
+
+                        return AlbumCard(
+                          albums.elementAtOrNull(index) ?? FakeData.albumSimple,
+                        );
+                      },
+                    );
+                  }),
+                ),
+              ],
             ),
           ),
         ),

lib/components/library/user_artists.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:collection/collection.dart';
 import 'package:fuzzywuzzy/fuzzywuzzy.dart';
+import 'package:gap/gap.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:skeletonizer/skeletonizer.dart';
 import 'package:spotube/collections/fake.dart';
@@ -9,8 +10,9 @@ import 'package:spotube/collections/fake.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/shared/fallbacks/anonymous_fallback.dart';
 import 'package:spotube/components/artist/artist_card.dart';
-import 'package:spotube/components/shared/fallbacks/not_found.dart';
 import 'package:spotube/components/shared/inter_scrollbar/inter_scrollbar.dart';
+import 'package:spotube/components/shared/waypoint.dart';
+import 'package:spotube/extensions/constrains.dart';
 import 'package:spotube/extensions/context.dart';
 import 'package:spotube/provider/authentication_provider.dart';
 import 'package:spotube/provider/spotify/spotify.dart';
@@ -20,10 +22,10 @@ class UserArtists extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
-    final theme = Theme.of(context);
     final auth = ref.watch(authenticationProvider);
 
     final artistQuery = ref.watch(followedArtistsProvider);
+    final artistQueryNotifier = ref.watch(followedArtistsProvider.notifier);
 
     final searchText = useState('');
 
@@ -50,77 +52,73 @@ class UserArtists extends HookConsumerWidget {
       return const AnonymousFallback();
     }
 
-    return Scaffold(
+    return SafeArea(
-      appBar: PreferredSize(
+      child: Scaffold(
-        preferredSize: const Size.fromHeight(50),
+        body: RefreshIndicator(
-        child: Padding(
+          onRefresh: () async {
-          padding: const EdgeInsets.symmetric(horizontal: 8.0),
+            ref.invalidate(followedArtistsProvider);
-          child: ColoredBox(
+          },
-            color: theme.scaffoldBackgroundColor,
+          child: InterScrollbar(
-            child: SearchBar(
+            controller: controller,
-              onChanged: (value) => searchText.value = value,
+            child: Padding(
-              leading: const Icon(SpotubeIcons.filter),
+              padding: const EdgeInsets.symmetric(horizontal: 8.0),
-              hintText: context.l10n.filter_artist,
+              child: CustomScrollView(
+                controller: controller,
+                slivers: [
+                  SliverAppBar(
+                    floating: true,
+                    flexibleSpace: SearchBar(
+                      onChanged: (value) => searchText.value = value,
+                      leading: const Icon(SpotubeIcons.filter),
+                      hintText: context.l10n.filter_artist,
+                    ),
+                  ),
+                  const SliverGap(10),
+                  Skeletonizer.sliver(
+                    enabled: artistQuery.isLoading,
+                    child: SliverLayoutBuilder(builder: (context, constrains) {
+                      return SliverGrid.builder(
+                        itemCount: filteredArtists.isEmpty
+                            ? 6
+                            : filteredArtists.length + 1,
+                        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
+                          maxCrossAxisExtent: 200,
+                          mainAxisExtent: constrains.smAndDown ? 225 : 250,
+                          crossAxisSpacing: 8,
+                          mainAxisSpacing: 8,
+                        ),
+                        itemBuilder: (context, index) {
+                          if (filteredArtists.isNotEmpty &&
+                              index == filteredArtists.length) {
+                            if (artistQuery.asData?.value.hasMore != true) {
+                              return const SizedBox.shrink();
+                            }
+
+                            return Waypoint(
+                              controller: controller,
+                              isGrid: true,
+                              onTouchEdge: artistQueryNotifier.fetchMore,
+                              child: Skeletonizer(
+                                enabled: true,
+                                child: ArtistCard(FakeData.artist),
+                              ),
+                            );
+                          }
+
+                          return ArtistCard(
+                            filteredArtists.elementAtOrNull(index) ??
+                                FakeData.artist,
+                          );
+                        },
+                      );
+                    }),
+                  ),
+                ],
+              ),
             ),
           ),
         ),
       ),
-      backgroundColor: theme.scaffoldBackgroundColor,
-      body: artistQuery.asData?.value.items.isEmpty == true
-          ? Padding(
-              padding: const EdgeInsets.all(20),
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  const CircularProgressIndicator(),
-                  const SizedBox(width: 10),
-                  Text(context.l10n.loading),
-                ],
-              ),
-            )
-          : RefreshIndicator(
-              onRefresh: () async {
-                ref.invalidate(followedArtistsProvider);
-              },
-              child: InterScrollbar(
-                controller: controller,
-                child: SingleChildScrollView(
-                  controller: controller,
-                  child: SizedBox(
-                    width: double.infinity,
-                    child: SafeArea(
-                      child: Center(
-                        child: Skeletonizer(
-                          enabled: artistQuery.isLoading,
-                          child: Wrap(
-                            spacing: 15,
-                            runSpacing: 5,
-                            children: artistQuery.isLoading
-                                ? List.generate(
-                                    10, (index) => ArtistCard(FakeData.artist))
-                                : filteredArtists.isEmpty
-                                    ? [
-                                        const Row(
-                                          mainAxisAlignment:
-                                              MainAxisAlignment.center,
-                                          children: [
-                                            NotFound(),
-                                          ],
-                                        )
-                                      ]
-                                    : filteredArtists
-                                        .mapIndexed(
-                                          (index, artist) => ArtistCard(artist),
-                                        )
-                                        .toList(),
-                          ),
-                        ),
-                      ),
-                    ),
-                  ),
-                ),
-              ),
-            ),
     );
   }
 }

lib/components/library/user_local_tracks.dart

@@ -176,7 +176,7 @@ class UserLocalTracks extends HookConsumerWidget {
           padding: const EdgeInsets.all(8.0),
           child: Row(
             children: [
-              const SizedBox(width: 10),
+              const SizedBox(width: 5),
               FilledButton(
                 onPressed: trackSnapshot.asData?.value != null
                     ? () async {
@@ -212,7 +212,7 @@ class UserLocalTracks extends HookConsumerWidget {
                   sortBy.value = value;
                 },
               ),
-              const SizedBox(width: 10),
+              const SizedBox(width: 5),
               FilledButton(
                 child: const Icon(SpotubeIcons.refresh),
                 onPressed: () {

lib/components/library/user_playlists.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart' hide Image;
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:fuzzywuzzy/fuzzywuzzy.dart';
 import 'package:collection/collection.dart';
+import 'package:gap/gap.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:skeletonizer/skeletonizer.dart';
@@ -18,6 +19,7 @@ import 'package:spotube/extensions/constrains.dart';
 import 'package:spotube/extensions/context.dart';
 import 'package:spotube/provider/authentication_provider.dart';
 import 'package:spotube/provider/spotify/spotify.dart';
+import 'package:spotube/utils/platform.dart';
 
 class UserPlaylists extends HookConsumerWidget {
   const UserPlaylists({super.key});
@@ -86,39 +88,37 @@ class UserPlaylists extends HookConsumerWidget {
           child: CustomScrollView(
             controller: controller,
             slivers: [
-              SliverToBoxAdapter(
+              SliverAppBar(
-                child: Column(
+                floating: true,
-                  mainAxisSize: MainAxisSize.min,
+                flexibleSpace: Padding(
-                  children: [
+                  padding: const EdgeInsets.symmetric(horizontal: 8),
-                    Padding(
+                  child: SearchBar(
-                      padding: const EdgeInsets.all(10),
+                    onChanged: (value) => searchText.value = value,
-                      child: SearchBar(
+                    hintText: context.l10n.filter_playlists,
-                        onChanged: (value) => searchText.value = value,
+                    leading: const Icon(SpotubeIcons.filter),
-                        hintText: context.l10n.filter_playlists,
+                  ),
-                        leading: const Icon(SpotubeIcons.filter),
+                ),
+                bottom: PreferredSize(
+                  preferredSize:
+                      Size.fromHeight(kIsDesktop ? 35 : kToolbarHeight),
+                  child: Row(
+                    children: [
+                      const Gap(10),
+                      const PlaylistCreateDialogButton(),
+                      const Gap(10),
+                      ElevatedButton.icon(
+                        icon: const Icon(SpotubeIcons.magic),
+                        label: Text(context.l10n.generate_playlist),
+                        onPressed: () {
+                          GoRouter.of(context).push("/library/generate");
+                        },
                       ),
-                    ),
+                      const Gap(10),
-                    Row(
+                    ],
-                      children: [
+                  ),
-                        const SizedBox(width: 10),
-                        const PlaylistCreateDialogButton(),
-                        const SizedBox(width: 10),
-                        ElevatedButton.icon(
-                          icon: const Icon(SpotubeIcons.magic),
-                          label: Text(context.l10n.generate_playlist),
-                          onPressed: () {
-                            GoRouter.of(context).push("/library/generate");
-                          },
-                        ),
-                        const SizedBox(width: 10),
-                      ],
-                    ),
-                  ],
                 ),
               ),
-              const SliverToBoxAdapter(
+              const SliverGap(10),
-                child: SizedBox(height: 10),
-              ),
               SliverLayoutBuilder(builder: (context, constrains) {
                 return SliverGrid.builder(
                   itemCount: playlists.isEmpty ? 6 : playlists.length + 1,

lib/pages/connect/connect.dart

@@ -23,6 +23,7 @@ class ConnectPage extends HookConsumerWidget {
       appBar: PageWindowTitleBar(
         automaticallyImplyLeading: true,
         title: Text(context.l10n.devices),
+        titleSpacing: 0,
       ),
       body: ListTileTheme(
         shape: RoundedRectangleBorder(

lib/pages/home/genres/genres.dart

@@ -26,6 +26,7 @@ class GenrePage extends HookConsumerWidget {
       appBar: PageWindowTitleBar(
         title: Text(context.l10n.explore_genres),
         automaticallyImplyLeading: true,
+        titleSpacing: 0,
       ),
       body: SafeArea(
         top: false,

lib/pages/home/home.dart

@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_desktop_tools/flutter_desktop_tools.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:gap/gap.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:spotube/collections/assets.gen.dart';
 import 'package:spotube/components/connect/connect_device.dart';
 import 'package:spotube/components/home/sections/featured.dart';
 import 'package:spotube/components/home/sections/feed.dart';
@@ -34,8 +34,9 @@ class HomePage extends HookConsumerWidget {
             controller: controller,
             slivers: [
               if (mediaQuery.mdAndDown)
-                PageWindowTitleBar.sliver(
+                SliverAppBar(
-                  pinned: DesktopTools.platform.isDesktop,
+                  floating: true,
+                  title: Assets.spotubeLogoPng.image(height: 45),
                   actions: [
                     const ConnectDeviceButton(),
                     const Gap(10),

lib/services/audio_player/custom_player.dart

@@ -106,6 +106,10 @@ class CustomPlayer extends Player {
     _shuffled = shuffle;
     await super.setShuffle(shuffle);
     _shuffleStream.add(shuffle);
+    await Future.delayed(const Duration(milliseconds: 100));
+    if (shuffle) {
+      await move(state.playlist.index, 0);
+    }
   }
 
   @override