feat: implemented go_route shell/nested route

BRIEF DESCRIPTION:
- Nested Routes like React-Router/Spotify Web/desktop
- Except Login routes everything is nested and wrapped by a Shell
- PlayerOverlay is no more a overlay
A really simple Sidebar now

lib/components/Album/AlbumCard.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Shared/PlaybuttonCard.dart';
@@ -7,6 +6,7 @@ import 'package:spotube/hooks/useBreakpointValue.dart';
 import 'package:spotube/models/CurrentPlaylist.dart';
 import 'package:spotube/provider/Playback.dart';
 import 'package:spotube/provider/SpotifyDI.dart';
+import 'package:spotube/utils/service_utils.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 
 class AlbumCard extends HookConsumerWidget {
@@ -33,7 +33,7 @@ class AlbumCard extends HookConsumerWidget {
       description:
           "Album • ${TypeConversionUtils.artists_X_String<ArtistSimple>(album.artists ?? [])}",
       onTap: () {
-        GoRouter.of(context).push("/album/${album.id}", extra: album);
+        ServiceUtils.navigate(context, "/album/${album.id}", extra: album);
       },
       onPlaybuttonPressed: () async {
         SpotifyApi spotify = ref.read(spotifyProvider);

lib/components/Artist/ArtistCard.dart

@@ -1,9 +1,9 @@
 import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
-import 'package:go_router/go_router.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Shared/HoverBuilder.dart';
 import 'package:spotube/components/Shared/UniversalImage.dart';
+import 'package:spotube/utils/service_utils.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 
 class ArtistCard extends StatelessWidget {
@@ -23,7 +23,7 @@ class ArtistCard extends StatelessWidget {
       width: 200,
       child: InkWell(
         onTap: () {
-          GoRouter.of(context).push("/artist/${artist.id}");
+          ServiceUtils.navigate(context, "/artist/${artist.id}");
         },
         borderRadius: BorderRadius.circular(10),
         child: HoverBuilder(builder: (context, isHovering) {

lib/components/Home/Genres.dart

@@ -0,0 +1,64 @@
+import 'package:fl_query_hooks/fl_query_hooks.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:spotify/spotify.dart';
+import 'package:spotube/components/Category/CategoryCard.dart';
+import 'package:spotube/components/LoaderShimmers/ShimmerCategories.dart';
+import 'package:spotube/components/Shared/Waypoint.dart';
+import 'package:spotube/provider/SpotifyDI.dart';
+import 'package:spotube/provider/SpotifyRequests.dart';
+import 'package:spotube/provider/UserPreferences.dart';
+
+class Genres extends HookConsumerWidget {
+  const Genres({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, ref) {
+    final spotify = ref.watch(spotifyProvider);
+    final recommendationMarket = ref.watch(
+      userPreferencesProvider.select((s) => s.recommendationMarket),
+    );
+    final categoriesQuery = useInfiniteQuery(
+      job: categoriesQueryJob,
+      externalData: {
+        "spotify": spotify,
+        "recommendationMarket": recommendationMarket,
+      },
+    );
+    final categories = [
+      useMemoized(
+        () => Category()
+          ..id = "user-featured-playlists"
+          ..name = "Featured",
+        [],
+      ),
+      ...categoriesQuery.pages
+          .expand<Category?>(
+            (page) => page?.items ?? const Iterable.empty(),
+          )
+          .toList()
+    ];
+
+    return Scaffold(
+      body: ListView.builder(
+        itemCount: categories.length,
+        itemBuilder: (context, index) {
+          final category = categories[index];
+          if (category == null) return Container();
+          if (index == categories.length - 1) {
+            return Waypoint(
+              onEnter: () {
+                if (categoriesQuery.hasNextPage) {
+                  categoriesQuery.fetchNextPage();
+                }
+              },
+              child: const ShimmerCategories(),
+            );
+          }
+          return CategoryCard(category);
+        },
+      ),
+    );
+  }
+}

lib/components/Home/Shell.dart

@@ -0,0 +1,106 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:go_router/go_router.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:spotube/components/Home/Sidebar.dart';
+import 'package:spotube/components/Home/SpotubeNavigationBar.dart';
+import 'package:spotube/components/Player/Player.dart';
+import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
+import 'package:spotube/components/Shared/ReplaceDownloadedFileDialog.dart';
+import 'package:spotube/hooks/useUpdateChecker.dart';
+import 'package:spotube/provider/Downloader.dart';
+
+const _path = {
+  0: "/",
+  1: "/search",
+  2: "/library",
+  3: "/lyrics",
+};
+
+class Shell extends HookConsumerWidget {
+  final Widget child;
+  const Shell({
+    required this.child,
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context, ref) {
+    final index = useState(0);
+    final isMounted = useIsMounted();
+
+    final downloader = ref.watch(downloaderProvider);
+    useEffect(() {
+      downloader.onFileExists = (track) async {
+        if (!isMounted()) return false;
+        return await showDialog<bool>(
+              context: context,
+              builder: (context) => ReplaceDownloadedFileDialog(
+                track: track,
+              ),
+            ) ??
+            false;
+      };
+      return null;
+    }, [downloader]);
+
+    // checks for latest version of the application
+    useUpdateChecker(ref);
+
+    final backgroundColor = Theme.of(context).backgroundColor;
+
+    useEffect(() {
+      SystemChrome.setSystemUIOverlayStyle(
+        SystemUiOverlayStyle(
+          statusBarColor: backgroundColor, // status bar color
+          statusBarIconBrightness: backgroundColor.computeLuminance() > 0.179
+              ? Brightness.dark
+              : Brightness.light,
+        ),
+      );
+      return null;
+    }, [backgroundColor]);
+
+    const pageWindowTitleBar = PageWindowTitleBar();
+    return Scaffold(
+      primary: true,
+      appBar: _path.values.contains(GoRouter.of(context).location)
+          ? pageWindowTitleBar
+          : null,
+      extendBodyBehindAppBar: true,
+      body: Row(
+        children: [
+          Sidebar(
+            selectedIndex: index.value,
+            onSelectedIndexChanged: (selectedIndex) {
+              index.value = selectedIndex;
+              GoRouter.of(context).go(_path[selectedIndex]!);
+            },
+          ),
+          Expanded(
+            child: Column(
+              children: [
+                Expanded(child: child),
+              ],
+            ),
+          ),
+        ],
+      ),
+      extendBody: true,
+      bottomNavigationBar: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Player(),
+          SpotubeNavigationBar(
+            selectedIndex: index.value,
+            onSelectedIndexChanged: (selectedIndex) {
+              index.value = selectedIndex;
+              GoRouter.of(context).go(_path[selectedIndex]!);
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/components/Home/Sidebar.dart

@@ -1,7 +1,6 @@
 import 'package:badges/badges.dart';
 import 'package:bitsdojo_window/bitsdojo_window.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:flutter/material.dart';
 import 'package:spotube/components/Shared/UniversalImage.dart';
@@ -12,6 +11,7 @@ import 'package:spotube/provider/Downloader.dart';
 import 'package:spotube/provider/SpotifyRequests.dart';
 import 'package:spotube/provider/UserPreferences.dart';
 import 'package:spotube/utils/platform.dart';
+import 'package:spotube/utils/service_utils.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 
 final sidebarExtendedStateProvider = StateProvider<bool?>((ref) => null);
@@ -35,7 +35,7 @@ class Sidebar extends HookConsumerWidget {
   }
 
   static void goToSettings(BuildContext context) {
-    GoRouter.of(context).push("/settings");
+    ServiceUtils.navigate(context, "/settings");
   }
 
   @override
@@ -78,20 +78,35 @@ class Sidebar extends HookConsumerWidget {
             !(forceExtended ?? extended.value);
 
     return SafeArea(
+      top: false,
       child: Material(
         color: Theme.of(context).navigationRailTheme.backgroundColor,
         child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.center,
           children: [
-            if (selectedIndex == 3 && kIsDesktop)
+            if (kIsDesktop)
               SizedBox(
                 height: appWindow.titleBarHeight,
                 width: extended.value ? 256 : 80,
-                child: MoveWindow(),
+                child: MoveWindow(
+                  child: !extended.value
+                      ? Center(
+                          child: IconButton(
+                            icon: const Icon(Icons.menu_rounded),
+                            onPressed: toggleExtended,
                           ),
-            Padding(
+                        )
-              padding: const EdgeInsets.only(left: 10),
+                      : null,
-              child: (extended.value)
+                ),
+              ),
+            if (!kIsDesktop && !extended.value)
+              Center(
+                child: IconButton(
+                  icon: const Icon(Icons.menu_rounded),
+                  onPressed: toggleExtended,
+                ),
+              ),
+            (extended.value)
                 ? Row(
                     children: [
                       _buildSmallLogo(),
@@ -108,16 +123,7 @@ class Sidebar extends HookConsumerWidget {
                       ),
                     ],
                   )
-                  : Column(
+                : _buildSmallLogo(),
-                      children: [
-                        IconButton(
-                          icon: const Icon(Icons.menu_rounded),
-                          onPressed: toggleExtended,
-                        ),
-                        _buildSmallLogo(),
-                      ],
-                    ),
-            ),
             Expanded(
               child: NavigationRail(
                 destinations: sidebarTileList.map(
@@ -166,7 +172,7 @@ class Sidebar extends HookConsumerWidget {
                   );
                   if (extended.value) {
                     return Padding(
-                        padding: const EdgeInsets.all(16),
+                        padding: const EdgeInsets.all(16).copyWith(left: 0),
                         child: Row(
                           mainAxisAlignment: MainAxisAlignment.spaceBetween,
                           children: [

lib/components/Library/UserLibrary.dart

@@ -12,8 +12,7 @@ class UserLibrary extends ConsumerWidget {
   const UserLibrary({Key? key}) : super(key: key);
   @override
   Widget build(BuildContext context, ref) {
-    return Expanded(
+    return DefaultTabController(
-      child: DefaultTabController(
       length: 5,
       child: SafeArea(
         child: Scaffold(
@@ -39,7 +38,6 @@ class UserLibrary extends ConsumerWidget {
           ]),
         ),
       ),
-      ),
     );
   }
 }

lib/components/Login/LoginTutorial.dart

@@ -1,11 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:go_router/go_router.dart';
 import 'package:introduction_screen/introduction_screen.dart';
 import 'package:spotube/components/Login/TokenLoginForms.dart';
 import 'package:spotube/components/Shared/Hyperlink.dart';
 import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
 import 'package:spotube/provider/Auth.dart';
+import 'package:spotube/utils/service_utils.dart';
 
 class LoginTutorial extends ConsumerWidget {
   const LoginTutorial({Key? key}) : super(key: key);
@@ -30,7 +30,7 @@ class LoginTutorial extends ConsumerWidget {
         overrideDone: TextButton(
           onPressed: auth.isLoggedIn
               ? () {
-                  GoRouter.of(context).go("/");
+                  ServiceUtils.navigate(context, "/");
                 }
               : null,
           child: const Text("Done"),

lib/components/Login/TokenLogin.dart

@@ -4,6 +4,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotube/components/Login/TokenLoginForms.dart';
 import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
 import 'package:spotube/hooks/useBreakpoints.dart';
+import 'package:spotube/utils/service_utils.dart';
 
 class TokenLogin extends HookConsumerWidget {
   const TokenLogin({Key? key}) : super(key: key);
@@ -37,7 +38,7 @@ class TokenLogin extends HookConsumerWidget {
                   ),
                   const SizedBox(height: 10),
                   TokenLoginForm(
-                    onDone: () => GoRouter.of(context).go("/"),
+                    onDone: () => ServiceUtils.navigate(context, "/"),
                   ),
                   const SizedBox(height: 10),
                   Wrap(

lib/components/Login/WebViewLogin.dart

@@ -61,7 +61,7 @@ class WebViewLogin extends HookConsumerWidget {
                 expiration: body.expiration,
               );
               if (mounted()) {
-                GoRouter.of(context).go("/");
+                ServiceUtils.navigate(context, "/");
               }
             }
           },

lib/components/Lyrics/Lyrics.dart

@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/LoaderShimmers/ShimmerLyrics.dart';
-import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
 import 'package:spotube/hooks/useBreakpoints.dart';
 import 'package:spotube/provider/Playback.dart';
 import 'package:spotube/provider/SpotifyRequests.dart';
@@ -25,7 +24,6 @@ class Lyrics extends HookConsumerWidget {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
-        PageWindowTitleBar(foregroundColor: titleBarForegroundColor),
         Center(
           child: Text(
             playback.track?.name ?? "",

lib/components/Lyrics/SyncedLyrics.dart

@@ -1,7 +1,5 @@
 import 'dart:ui';
 
-import 'package:auto_size_text/auto_size_text.dart';
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -9,7 +7,6 @@ import 'package:spotify/spotify.dart';
 import 'package:spotube/components/LoaderShimmers/ShimmerLyrics.dart';
 import 'package:spotube/components/Lyrics/LyricDelayAdjustDialog.dart';
 import 'package:spotube/components/Lyrics/Lyrics.dart';
-import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
 import 'package:spotube/components/Shared/SpotubeMarqueeText.dart';
 import 'package:spotube/components/Shared/UniversalImage.dart';
 import 'package:spotube/hooks/useAutoScrollController.dart';
@@ -129,8 +126,7 @@ class SyncedLyrics extends HookConsumerWidget {
       noSetBGColor: true,
     );
 
-    return Expanded(
+    return Container(
-      child: Container(
       clipBehavior: Clip.hardEdge,
       decoration: BoxDecoration(
         image: DecorationImage(
@@ -147,9 +143,6 @@ class SyncedLyrics extends HookConsumerWidget {
                 ? Lyrics(titleBarForegroundColor: palette.bodyTextColor)
                 : Column(
                     children: [
-                        PageWindowTitleBar(
-                          foregroundColor: palette.bodyTextColor,
-                        ),
                       SizedBox(
                         height: breakpoint >= Breakpoints.md ? 50 : 30,
                         child: Material(
@@ -255,7 +248,6 @@ class SyncedLyrics extends HookConsumerWidget {
           ),
         ),
       ),
-      ),
     );
   }
 }

lib/components/Player/Player.dart

@@ -35,60 +35,15 @@ class Player extends HookConsumerWidget {
       [playback.track?.album?.images],
     );
 
-    final entryRef = useRef<OverlayEntry?>(null);
-
-    void disposeOverlay() {
-      try {
-        entryRef.value?.remove();
-        entryRef.value = null;
-      } catch (e, stack) {
-        if (e is! AssertionError) {
-          logger.e("useEffect.cleanup", e, stack);
-        }
-      }
-    }
-
-    useEffect(() {
-      // I can't believe useEffect doesn't run Post Frame aka
-      // after rendering/painting the UI
-      // `My disappointment is immeasurable and my day is ruined` XD
-      WidgetsBinding.instance.addPostFrameCallback((time) {
-        // clearing the overlay-entry as passing the already available
-        // entry will result in splashing while resizing the window
-        if ((layoutMode == LayoutMode.compact ||
-                (breakpoint.isLessThanOrEqualTo(Breakpoints.md) &&
-                    layoutMode == LayoutMode.adaptive)) &&
-            entryRef.value == null &&
-            playback.track != null) {
-          entryRef.value = OverlayEntry(
-            opaque: false,
-            builder: (context) => PlayerOverlay(albumArt: albumArt),
-          );
-          try {
-            Overlay.of(context)?.insert(entryRef.value!);
-          } catch (e) {
-            if (e is AssertionError &&
-                e.message ==
-                    'The specified entry is already present in the Overlay.') {
-              disposeOverlay();
-              Overlay.of(context)?.insert(entryRef.value!);
-            }
-          }
-        } else {
-          disposeOverlay();
-        }
-      });
-      return () {
-        disposeOverlay();
-      };
-    }, [breakpoint, playback.track, layoutMode]);
-
     // returning an empty non spacious Container as the overlay will take
     // place in the global overlay stack aka [_entries]
     if (layoutMode == LayoutMode.compact ||
         (breakpoint.isLessThanOrEqualTo(Breakpoints.md) &&
             layoutMode == LayoutMode.adaptive)) {
-      return Container();
+      return Padding(
+        padding: const EdgeInsets.only(bottom: 8, left: 8, right: 8, top: 0),
+        child: PlayerOverlay(albumArt: albumArt),
+      );
     }
 
     return Container(

lib/components/Player/PlayerOverlay.dart

@@ -5,11 +5,10 @@ import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotube/components/Player/PlayerTrackDetails.dart';
 import 'package:spotube/hooks/playback.dart';
-import 'package:spotube/hooks/useBreakpoints.dart';
 import 'package:spotube/hooks/usePaletteColor.dart';
 import 'package:spotube/models/Intents.dart';
 import 'package:spotube/provider/Playback.dart';
-import 'package:spotube/provider/UserPreferences.dart';
+import 'package:spotube/utils/service_utils.dart';
 
 class PlayerOverlay extends HookConsumerWidget {
   final String albumArt;
@@ -21,42 +20,17 @@ class PlayerOverlay extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
-    final breakpoint = useBreakpoints();
     final paletteColor = usePaletteColor(albumArt, ref);
-    final layoutMode = ref.watch(
-      userPreferencesProvider.select((s) => s.layoutMode),
-    );
-
-    var isHome = GoRouter.of(context).location == "/";
-    final isAllowedPage = ["/playlist/", "/album/"].any(
-      (el) => GoRouter.of(context).location.startsWith(el),
-    );
 
     final onNext = useNextTrack(ref);
     final onPrevious = usePreviousTrack(ref);
 
-    if (!isHome && !isAllowedPage) return Container();
+    return GestureDetector(
-
-    return AnimatedPositioned(
-      duration: const Duration(milliseconds: 2500),
-      right: (breakpoint.isMd && !isAllowedPage ? 10 : 5),
-      left: (layoutMode == LayoutMode.compact ||
-              (breakpoint.isSm && layoutMode == LayoutMode.adaptive) ||
-              isAllowedPage
-          ? 5
-          : 90),
-      bottom: (layoutMode == LayoutMode.compact && !isAllowedPage) ||
-              (breakpoint.isSm &&
-                  layoutMode == LayoutMode.adaptive &&
-                  !isAllowedPage)
-          ? 63
-          : 10,
-      child: GestureDetector(
       onVerticalDragEnd: (details) {
         int sensitivity = 8;
         if (details.primaryVelocity != null &&
             details.primaryVelocity! < -sensitivity) {
-            GoRouter.of(context).push("/player");
+          ServiceUtils.navigate(context, "/player");
         }
       },
       child: ClipRRect(
@@ -129,7 +103,6 @@ class PlayerOverlay extends HookConsumerWidget {
           ),
         ),
       ),
-      ),
     );
   }
 }

lib/components/Playlist/PlaylistCard.dart

@@ -7,6 +7,7 @@ import 'package:spotube/hooks/useBreakpointValue.dart';
 import 'package:spotube/models/CurrentPlaylist.dart';
 import 'package:spotube/provider/Playback.dart';
 import 'package:spotube/provider/SpotifyDI.dart';
+import 'package:spotube/utils/service_utils.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 
 class PlaylistCard extends HookConsumerWidget {
@@ -30,7 +31,8 @@ class PlaylistCard extends HookConsumerWidget {
       isPlaying: isPlaylistPlaying && playback.isPlaying,
       isLoading: playback.status == PlaybackStatus.loading && isPlaylistPlaying,
       onTap: () {
-        GoRouter.of(context).push(
+        ServiceUtils.navigate(
+          context,
           "/playlist/${playlist.id}",
           extra: playlist,
         );

lib/components/Playlist/PlaylistGenreView.dart

@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
-import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
 import 'package:spotube/components/Playlist/PlaylistCard.dart';
+import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
 import 'package:spotube/provider/SpotifyDI.dart';
 
 class PlaylistGenreView extends ConsumerWidget {

lib/components/Search/Search.dart

@@ -33,12 +33,11 @@ class Search extends HookConsumerWidget {
     final breakpoint = useBreakpoints();
 
     if (auth.isAnonymous) {
-      return const Expanded(child: AnonymousFallback());
+      return const AnonymousFallback();
     }
     final searchSnapshot = ref.watch(searchQuery(searchTerm));
 
-    return Expanded(
+    return SafeArea(
-      child: SafeArea(
       child: Material(
         color: Theme.of(context).backgroundColor,
         child: Column(
@@ -122,21 +121,19 @@ class Search extends HookConsumerWidget {
                               ),
                               isActive: playback.track?.id == track.value.id,
                               onTrackPlayButtonPressed: (currentTrack) async {
-                                  var isPlaylistPlaying =
+                                var isPlaylistPlaying = playback.playlist?.id !=
-                                      playback.playlist?.id != null &&
+                                        null &&
-                                          playback.playlist?.id ==
+                                    playback.playlist?.id == currentTrack.id;
-                                              currentTrack.id;
                                 if (!isPlaylistPlaying) {
                                   playback.playPlaylist(
                                     CurrentPlaylist(
                                       tracks: [currentTrack],
                                       id: currentTrack.id!,
                                       name: currentTrack.name!,
-                                        thumbnail: TypeConversionUtils
+                                      thumbnail:
-                                            .image_X_UrlString(
+                                          TypeConversionUtils.image_X_UrlString(
                                         currentTrack.album?.images,
-                                          placeholder:
+                                        placeholder: ImagePlaceholder.albumArt,
-                                              ImagePlaceholder.albumArt,
                                       ),
                                     ),
                                   );
@@ -155,8 +152,7 @@ class Search extends HookConsumerWidget {
                             ),
                           const SizedBox(height: 10),
                           ScrollConfiguration(
-                              behavior:
+                            behavior: ScrollConfiguration.of(context).copyWith(
-                                  ScrollConfiguration.of(context).copyWith(
                               dragDevices: {
                                 PointerDeviceKind.touch,
                                 PointerDeviceKind.mouse,
@@ -187,8 +183,7 @@ class Search extends HookConsumerWidget {
                             ),
                           const SizedBox(height: 10),
                           ScrollConfiguration(
-                              behavior:
+                            behavior: ScrollConfiguration.of(context).copyWith(
-                                  ScrollConfiguration.of(context).copyWith(
                               dragDevices: {
                                 PointerDeviceKind.touch,
                                 PointerDeviceKind.mouse,
@@ -221,16 +216,14 @@ class Search extends HookConsumerWidget {
                             ),
                           const SizedBox(height: 10),
                           ScrollConfiguration(
-                              behavior:
+                            behavior: ScrollConfiguration.of(context).copyWith(
-                                  ScrollConfiguration.of(context).copyWith(
                               dragDevices: {
                                 PointerDeviceKind.touch,
                                 PointerDeviceKind.mouse,
                               },
                             ),
                             child: Scrollbar(
-                                scrollbarOrientation:
+                              scrollbarOrientation: breakpoint > Breakpoints.md
-                                    breakpoint > Breakpoints.md
                                   ? ScrollbarOrientation.bottom
                                   : ScrollbarOrientation.top,
                               controller: playlistController,
@@ -259,7 +252,6 @@ class Search extends HookConsumerWidget {
           ],
         ),
       ),
-      ),
     );
   }
 }

lib/components/Shared/AnonymousFallback.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:go_router/go_router.dart';
 import 'package:spotube/provider/Auth.dart';
+import 'package:spotube/utils/service_utils.dart';
 
 class AnonymousFallback extends ConsumerWidget {
   final Widget? child;
@@ -23,7 +23,7 @@ class AnonymousFallback extends ConsumerWidget {
           const SizedBox(height: 10),
           ElevatedButton(
             child: const Text("Login with Spotify"),
-            onPressed: () => GoRouter.of(context).push("/settings"),
+            onPressed: () => ServiceUtils.navigate(context, "/settings"),
           )
         ],
       ),

lib/components/Shared/LinkText.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
-import 'package:go_router/go_router.dart';
 import 'package:spotube/components/Shared/AnchorButton.dart';
+import 'package:spotube/utils/service_utils.dart';
 
 class LinkText<T> extends StatelessWidget {
   final String text;
@@ -24,7 +24,7 @@ class LinkText<T> extends StatelessWidget {
     return AnchorButton(
       text,
       onTap: () {
-        GoRouter.of(context).push(route, extra: extra);
+        ServiceUtils.navigate(context, route, extra: extra);
       },
       key: key,
       overflow: overflow,

lib/components/Shared/TrackCollectionView.dart

@@ -1,4 +1,3 @@
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';

lib/main.dart

@@ -6,7 +6,6 @@ import 'package:fl_query/fl_query.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:go_router/go_router.dart';
 import 'package:hive_flutter/hive_flutter.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:shared_preferences/shared_preferences.dart';
@@ -26,7 +25,7 @@ import 'package:spotube/themes/dark-theme.dart';
 import 'package:spotube/themes/light-theme.dart';
 import 'package:spotube/utils/platform.dart';
 
-final bowl = QueryBowl();
+final bowl = QueryBowl(refetchOnExternalDataChange: true);
 void main() async {
   await Hive.initFlutter();
   Hive.registerAdapter(CacheTrackAdapter());
@@ -144,7 +143,6 @@ class Spotube extends StatefulHookConsumerWidget {
 }
 
 class _SpotubeState extends ConsumerState<Spotube> with WidgetsBindingObserver {
-  final GoRouter _router = createGoRouter();
   final logger = getLogger(Spotube);
   SharedPreferences? localStorage;
 
@@ -201,8 +199,7 @@ class _SpotubeState extends ConsumerState<Spotube> with WidgetsBindingObserver {
     }, []);
 
     return MaterialApp.router(
-      routeInformationParser: _router.routeInformationParser,
+      routerConfig: router,
-      routerDelegate: _router.routerDelegate,
       debugShowCheckedModeBanner: false,
       title: 'Spotube',
       theme: lightTheme(
@@ -218,7 +215,7 @@ class _SpotubeState extends ConsumerState<Spotube> with WidgetsBindingObserver {
         ...WidgetsApp.defaultShortcuts,
         const SingleActivator(LogicalKeyboardKey.space): PlayPauseIntent(ref),
         const SingleActivator(LogicalKeyboardKey.comma, control: true):
-            NavigationIntent(_router, "/settings"),
+            NavigationIntent(router, "/settings"),
         const SingleActivator(
           LogicalKeyboardKey.keyB,
           control: true,

lib/models/GoRouteDeclarations.dart

@@ -1,34 +1,51 @@
+import 'package:flutter/widgets.dart';
 import 'package:go_router/go_router.dart';
-import 'package:spotify/spotify.dart';
+import 'package:spotify/spotify.dart' hide Search;
 import 'package:spotube/components/Album/AlbumView.dart';
 import 'package:spotube/components/Artist/ArtistProfile.dart';
-import 'package:spotube/components/Home/Home.dart';
+import 'package:spotube/components/Home/Genres.dart';
+import 'package:spotube/components/Home/Shell.dart';
+import 'package:spotube/components/Library/UserLibrary.dart';
 import 'package:spotube/components/Login/LoginTutorial.dart';
 import 'package:spotube/components/Login/TokenLogin.dart';
+import 'package:spotube/components/Lyrics/SyncedLyrics.dart';
 import 'package:spotube/components/Player/PlayerView.dart';
 import 'package:spotube/components/Playlist/PlaylistView.dart';
+import 'package:spotube/components/Search/Search.dart';
 import 'package:spotube/components/Settings/Settings.dart';
 import 'package:spotube/components/Shared/SpotubePageRoute.dart';
 import 'package:spotube/utils/platform.dart';
 import 'package:spotube/components/Login/WebViewLogin.dart';
 
-GoRouter createGoRouter() => GoRouter(
+final rootNavigatorKey = GlobalKey<NavigatorState>();
+final shellRouteNavigatorKey = GlobalKey<NavigatorState>();
+final router = GoRouter(
+  navigatorKey: rootNavigatorKey,
+  routes: [
+    ShellRoute(
+      navigatorKey: shellRouteNavigatorKey,
+      builder: (context, state, child) => Shell(child: child),
       routes: [
         GoRoute(
           path: "/",
-          builder: (context, state) => Home(),
+          pageBuilder: (context, state) => const SpotubePage(child: Genres()),
         ),
         GoRoute(
-          path: "/login",
+          path: "/search",
-          pageBuilder: (context, state) => SpotubePage(
+          name: "Search",
-            child: kIsMobile ? const WebViewLogin() : const TokenLogin(),
+          pageBuilder: (context, state) => const SpotubePage(child: Search()),
-          ),
         ),
         GoRoute(
-          path: "/login-tutorial",
+          path: "/library",
-          pageBuilder: (context, state) => const SpotubePage(
+          name: "Library",
-            child: LoginTutorial(),
+          pageBuilder: (context, state) =>
+              const SpotubePage(child: UserLibrary()),
         ),
+        GoRoute(
+          path: "/lyrics",
+          name: "Lyrics",
+          pageBuilder: (context, state) =>
+              const SpotubePage(child: SyncedLyrics()),
         ),
         GoRoute(
           path: "/settings",
@@ -59,8 +76,25 @@ GoRouter createGoRouter() => GoRouter(
             );
           },
         ),
+      ],
+    ),
+    GoRoute(
+      path: "/login",
+      parentNavigatorKey: rootNavigatorKey,
+      pageBuilder: (context, state) => SpotubePage(
+        child: kIsMobile ? const WebViewLogin() : const TokenLogin(),
+      ),
+    ),
+    GoRoute(
+      path: "/login-tutorial",
+      parentNavigatorKey: rootNavigatorKey,
+      pageBuilder: (context, state) => const SpotubePage(
+        child: LoginTutorial(),
+      ),
+    ),
     GoRoute(
       path: "/player",
+      parentNavigatorKey: rootNavigatorKey,
       pageBuilder: (context, state) {
         return const SpotubePage(
           child: PlayerView(),
@@ -68,4 +102,4 @@ GoRouter createGoRouter() => GoRouter(
       },
     ),
   ],
-    );
+);

lib/provider/Auth.dart

@@ -30,7 +30,7 @@ class Auth extends PersistedChangeNotifier {
   Duration get expiresIn =>
       _expiration?.difference(DateTime.now()) ?? Duration.zero;
 
-  _refresh() async {
+  refresh() async {
     final data = await ServiceUtils.getAccessToken(authCookie!);
     _accessToken = data.accessToken;
     _expiration = data.expiration;
@@ -43,7 +43,7 @@ class Auth extends PersistedChangeNotifier {
       return null;
     }
     _refresher?.cancel();
-    return Timer(expiresIn, _refresh);
+    return Timer(expiresIn, refresh);
   }
 
   void _restartRefresher() {
@@ -103,7 +103,7 @@ class Auth extends PersistedChangeNotifier {
     _authCookie = map["authCookie"];
     _restartRefresher();
     if (isExpired) {
-      _refresh();
+      refresh();
     }
   }
 

lib/provider/SpotifyRequests.dart

@@ -18,6 +18,7 @@ final categoriesQueryJob =
   initialParam: 0,
   getNextPageParam: (lastPage, lastParam) => lastPage.nextOffset,
   getPreviousPageParam: (lastPage, lastParam) => lastPage.nextOffset - 16,
+  refetchOnExternalDataChange: true,
   task: (queryKey, pageParam, data) async {
     final SpotifyApi spotify = data["spotify"] as SpotifyApi;
     final String recommendationMarket = data["recommendationMarket"];

lib/utils/service_utils.dart

@@ -1,6 +1,8 @@
 import 'dart:convert';
 import 'dart:io';
 
+import 'package:flutter/widgets.dart' hide Element;
+import 'package:go_router/go_router.dart';
 import 'package:html/dom.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:spotify/spotify.dart';
@@ -387,4 +389,8 @@ abstract class ServiceUtils {
       rethrow;
     }
   }
+
+  static void navigate(BuildContext context, String location, {Object? extra}) {
+    GoRouter.of(context).push(location, extra: extra);
+  }
 }