feat: titlebar complete compatibility, platform specific login, libra…

…ry tabbar in titlebar

lib/components/Home/Genres.dart

@@ -6,6 +6,7 @@ import 'package:platform_ui/platform_ui.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/PageWindowTitleBar.dart';
 import 'package:spotube/components/Shared/Waypoint.dart';
 import 'package:spotube/provider/SpotifyDI.dart';
 import 'package:spotube/provider/SpotifyRequests.dart';
@@ -42,6 +43,7 @@ class Genres extends HookConsumerWidget {
     ];
 
     return PlatformScaffold(
+      appBar: PageWindowTitleBar(),
       body: ListView.builder(
         itemCount: categories.length,
         itemBuilder: (context, index) {

lib/components/Home/Shell.dart

@@ -64,40 +64,14 @@ class Shell extends HookConsumerWidget {
       return null;
     }, [backgroundColor]);
 
-    final allowedPath =
-        rootPaths.values.contains(GoRouter.of(context).location);
-    final titleBar = PageWindowTitleBar(
-      backgroundColor:
-          platform == TargetPlatform.android ? Colors.transparent : null,
-    );
-    final preferredSize = allowedPath ? titleBar.preferredSize : Size.zero;
-    var appBar = kIsDesktop
-        ? PreferredSize(
-            preferredSize: preferredSize,
-            child: AnimatedContainer(
-              duration: const Duration(milliseconds: 250),
-              height: allowedPath ? titleBar.preferredSize.height : 0,
-              child: AnimatedOpacity(
-                duration: const Duration(milliseconds: 250),
-                opacity: allowedPath ? 1 : 0,
-                child: titleBar,
-              ),
-            ),
-          )
-        : null;
     return PlatformScaffold(
-      appBar: platform == TargetPlatform.windows ? appBar : null,
-      extendBodyBehindAppBar: false,
       body: Sidebar(
         selectedIndex: index.value,
         onSelectedIndexChanged: (i) {
           index.value = i;
           GoRouter.of(context).go(rootPaths[index.value]!);
         },
-        child: PlatformScaffold(
-          appBar: platform != TargetPlatform.windows ? appBar : null,
-          body: child,
-        ),
+        child: child,
       ),
       extendBody: true,
       bottomNavigationBar: Column(

lib/components/Home/Sidebar.dart

@@ -133,18 +133,21 @@ class Sidebar extends HookConsumerWidget {
                 ),
               ),
             (extended.value)
-                ? Row(
-                    children: [
-                      brandLogo(),
-                      const SizedBox(
-                        width: 10,
-                      ),
-                      PlatformText.headline("Spotube"),
-                      PlatformIconButton(
-                        icon: const Icon(Icons.menu_rounded),
-                        onPressed: toggleExtended,
-                      ),
-                    ],
+                ? Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: Row(
+                      children: [
+                        brandLogo(),
+                        const SizedBox(
+                          width: 10,
+                        ),
+                        PlatformText.headline("Spotube"),
+                        PlatformIconButton(
+                          icon: const Icon(Icons.menu_rounded),
+                          onPressed: toggleExtended,
+                        ),
+                      ],
+                    ),
                   )
                 : brandLogo(),
           ],

lib/components/Library/UserAlbums.dart

@@ -4,6 +4,8 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:platform_ui/platform_ui.dart';
 import 'package:spotube/components/Album/AlbumCard.dart';
 import 'package:spotube/components/LoaderShimmers/ShimmerPlaybuttonCard.dart';
+import 'package:spotube/components/Shared/AnonymousFallback.dart';
+import 'package:spotube/provider/Auth.dart';
 import 'package:spotube/provider/SpotifyDI.dart';
 import 'package:spotube/provider/SpotifyRequests.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
@@ -13,6 +15,10 @@ class UserAlbums extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
+    final auth = ref.watch(authProvider);
+    if (auth.isAnonymous) {
+      return const AnonymousFallback();
+    }
     final albumsQuery = useQuery(
       job: currentUserAlbumsQueryJob,
       externalData: ref.watch(spotifyProvider),

lib/components/Library/UserArtists.dart

@@ -5,7 +5,9 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:platform_ui/platform_ui.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/Artist/ArtistCard.dart';
+import 'package:spotube/components/Shared/AnonymousFallback.dart';
 import 'package:spotube/components/Shared/Waypoint.dart';
+import 'package:spotube/provider/Auth.dart';
 import 'package:spotube/provider/SpotifyDI.dart';
 import 'package:spotube/provider/SpotifyRequests.dart';
 
@@ -14,6 +16,10 @@ class UserArtists extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
+    final auth = ref.watch(authProvider);
+    if (auth.isAnonymous) {
+      return const AnonymousFallback();
+    }
     final artistQuery = useInfiniteQuery(
       job: currentUserFollowingArtistsQueryJob,
       externalData: ref.watch(spotifyProvider),

lib/components/Library/UserLibrary.dart

@@ -1,47 +1,48 @@
 import 'package:flutter/material.dart' hide Image;
-import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:platform_ui/platform_ui.dart';
 import 'package:spotube/components/Library/UserAlbums.dart';
 import 'package:spotube/components/Library/UserArtists.dart';
 import 'package:spotube/components/Library/UserDownloads.dart';
 import 'package:spotube/components/Library/UserLocalTracks.dart';
 import 'package:spotube/components/Library/UserPlaylists.dart';
-import 'package:spotube/components/Shared/AnonymousFallback.dart';
+import 'package:spotube/components/Shared/PageWindowTitleBar.dart';
 
-class UserLibrary extends ConsumerWidget {
+class UserLibrary extends HookConsumerWidget {
   const UserLibrary({Key? key}) : super(key: key);
   @override
   Widget build(BuildContext context, ref) {
-    return DefaultTabController(
-      length: 5,
-      child: SafeArea(
-        child: PlatformTabView(
+    final index = useState(0);
+
+    final body = [
+      const UserPlaylists(),
+      const UserLocalTracks(),
+      const UserDownloads(),
+      const UserArtists(),
+      const UserAlbums(),
+    ][index.value];
+
+    return PlatformScaffold(
+      appBar: PageWindowTitleBar(
+        titleWidth: 415,
+        centerTitle: true,
+        center: PlatformTabBar(
           androidIsScrollable: true,
-          placement: PlatformProperty.all(PlatformTabbarPlacement.top),
-          body: {
-            PlatformTab(
-              label: "Playlist",
-              icon: Container(),
-            ): const AnonymousFallback(child: UserPlaylists()),
-            PlatformTab(
-              label: "Downloads",
-              icon: Container(),
-            ): const UserDownloads(),
-            PlatformTab(
-              label: "Local",
-              icon: Container(),
-            ): const UserLocalTracks(),
-            PlatformTab(
-              label: "Artists",
-              icon: Container(),
-            ): const AnonymousFallback(child: UserArtists()),
-            PlatformTab(
-              label: "Album",
-              icon: Container(),
-            ): const AnonymousFallback(child: UserAlbums()),
-          },
+          selectedIndex: index.value,
+          onSelectedIndexChanged: (value) => index.value = value,
+          isNavigational:
+              PlatformProperty.byPlatformGroup(mobile: false, desktop: true),
+          tabs: [
+            PlatformTab(label: 'Playlists', icon: const SizedBox.shrink()),
+            PlatformTab(label: 'Tracks', icon: const SizedBox.shrink()),
+            PlatformTab(label: 'Downloads', icon: const SizedBox.shrink()),
+            PlatformTab(label: 'Artists', icon: const SizedBox.shrink()),
+            PlatformTab(label: 'Albums', icon: const SizedBox.shrink()),
+          ],
         ),
       ),
+      body: body,
     );
   }
 }

lib/components/Library/UserPlaylists.dart

@@ -6,6 +6,8 @@ import 'package:spotify/spotify.dart';
 import 'package:spotube/components/LoaderShimmers/ShimmerPlaybuttonCard.dart';
 import 'package:spotube/components/Playlist/PlaylistCard.dart';
 import 'package:spotube/components/Playlist/PlaylistCreateDialog.dart';
+import 'package:spotube/components/Shared/AnonymousFallback.dart';
+import 'package:spotube/provider/Auth.dart';
 import 'package:spotube/provider/SpotifyDI.dart';
 import 'package:spotube/provider/SpotifyRequests.dart';
 
@@ -14,6 +16,11 @@ class UserPlaylists extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
+    final auth = ref.watch(authProvider);
+    if (auth.isAnonymous) {
+      return const AnonymousFallback();
+    }
+
     final playlistsQuery = useQuery(
       job: currentUserPlaylistsQueryJob,
       externalData: ref.watch(spotifyProvider),

lib/components/Login/LoginTutorial.dart

@@ -14,68 +14,76 @@ class LoginTutorial extends ConsumerWidget {
   @override
   Widget build(BuildContext context, ref) {
     final auth = ref.watch(authProvider);
+    final key = GlobalKey<State<IntroductionScreen>>();
 
-    return Scaffold(
+    return PlatformScaffold(
       appBar: PageWindowTitleBar(
         leading: PlatformTextButton(
-          child: const Text("Exit"),
+          child: const PlatformText("Exit"),
           onPressed: () {
             Navigator.of(context).pop();
           },
         ),
       ),
       body: IntroductionScreen(
-        next: const Text("Next"),
-        back: const Text("Previous"),
+        key: key,
+        overrideBack: PlatformFilledButton(
+          isSecondary: true,
+          child: const Center(child: PlatformText("Previous")),
+          onPressed: () {
+            (key.currentState as IntroductionScreenState).previous();
+          },
+        ),
+        overrideNext: PlatformFilledButton(
+          child: const Center(child: PlatformText("Next")),
+          onPressed: () {
+            (key.currentState as IntroductionScreenState).next();
+          },
+        ),
         showBackButton: true,
-        overrideDone: PlatformTextButton(
+        overrideDone: PlatformFilledButton(
           onPressed: auth.isLoggedIn
               ? () {
                   ServiceUtils.navigate(context, "/");
                 }
               : null,
-          child: const Text("Done"),
+          child: const Center(child: PlatformText("Done")),
         ),
         pages: [
           PageViewModel(
             title: "Step 1",
             image: Image.asset("assets/tutorial/step-1.png"),
             bodyWidget: Wrap(
-              children: [
-                Text(
+              children: const [
+                PlatformText(
                   "First, Go to ",
-                  style: Theme.of(context).textTheme.bodyText1,
                 ),
                 Hyperlink(
                   "accounts.spotify.com ",
                   "https://accounts.spotify.com",
-                  style: Theme.of(context).textTheme.bodyText1!,
                 ),
-                Text(
+                PlatformText(
                   "and Login/Sign up if you're not logged in",
-                  style: Theme.of(context).textTheme.bodyText1,
                 ),
               ],
             ),
           ),
           PageViewModel(
             title: "Step 2",
             image: Image.asset("assets/tutorial/step-2.png"),
-            bodyWidget: Text(
+            bodyWidget: const PlatformText(
               "1. Once you're logged in, press F12 or Mouse Right Click > Inspect to Open the Browser devtools.\n2. Then go the \"Application\" Tab (Chrome, Edge, Brave etc..) or \"Storage\" Tab (Firefox, Palemoon etc..)\n3. Go to the \"Cookies\" section then the \"https://accounts.spotify.com\" subsection",
               textAlign: TextAlign.left,
-              style: Theme.of(context).textTheme.bodyText1,
             ),
           ),
           PageViewModel(
             title: "Step 3",
             image: Image.asset(
               "assets/tutorial/step-3.png",
             ),
-            bodyWidget: Text(
+            bodyWidget: const PlatformText(
               "Copy the values of \"sp_dc\" and \"sp_key\" Cookies",
               textAlign: TextAlign.left,
-              style: Theme.of(context).textTheme.bodyText1,
             ),
           ),
           if (auth.isLoggedIn)
@@ -92,13 +100,12 @@ class LoginTutorial extends ConsumerWidget {
             PageViewModel(
               title: "Step 5",
               bodyWidget: Column(
-                children: [
-                  Text(
+                children: const [
+                  PlatformText(
                     "Paste the copied \"sp_dc\" and \"sp_key\" values in the respective fields",
-                    style: Theme.of(context).textTheme.bodyText1,
                   ),
-                  const SizedBox(height: 10),
-                  const TokenLoginForm(),
+                  SizedBox(height: 10),
+                  TokenLoginForm(),
                 ],
               ),
             ),

lib/components/Login/TokenLogin.dart

@@ -15,24 +15,29 @@ class TokenLogin extends HookConsumerWidget {
     final textTheme = Theme.of(context).textTheme;
 
     return SafeArea(
-      child: Scaffold(
-        appBar: PageWindowTitleBar(leading: PlatformBackButton()),
+      child: PlatformScaffold(
+        appBar: PageWindowTitleBar(leading: const PlatformBackButton()),
         body: SingleChildScrollView(
           child: Center(
             child: Container(
-              margin: const EdgeInsets.symmetric(horizontal: 10),
+              margin: const EdgeInsets.all(10),
+              padding: const EdgeInsets.all(10),
+              decoration: BoxDecoration(
+                color: PlatformTheme.of(context).secondaryBackgroundColor,
+                borderRadius: BorderRadius.circular(10),
+              ),
               child: Column(
                 children: [
                   Image.asset(
                     "assets/spotube-logo.png",
                     width: MediaQuery.of(context).size.width *
                         (breakpoint <= Breakpoints.md ? .5 : .3),
                   ),
-                  Text("Add your spotify credentials to get started",
+                  PlatformText("Add your spotify credentials to get started",
                       style: breakpoint <= Breakpoints.md
                           ? textTheme.headline5
                           : textTheme.headline4),
-                  Text(
+                  PlatformText(
                     "Don't worry, any of your credentials won't be collected or shared with anyone",
                     style: Theme.of(context).textTheme.caption,
                   ),
@@ -45,9 +50,9 @@ class TokenLogin extends HookConsumerWidget {
                     alignment: WrapAlignment.center,
                     crossAxisAlignment: WrapCrossAlignment.center,
                     children: [
-                      const Text("Don't know how to do this?"),
+                      const PlatformText("Don't know how to do this?"),
                       PlatformTextButton(
-                        child: const Text(
+                        child: const PlatformText(
                           "Follow along the Step by Step guide",
                         ),
                         onPressed: () => GoRouter.of(context).push(