refactor: titlebar to use shadcn appbar and library tabs to use shadcn TabList

lib/components/playbutton_card.dart

@@ -33,7 +33,7 @@ class PlaybuttonCard extends HookWidget {
 
   @override
   Widget build(BuildContext context) {
-    final unescapeHtml = description?.unescapeHtml().cleanHtml();
+    final unescapeHtml = description?.unescapeHtml().cleanHtml() ?? "";
 
     return Container(
       width: 150,
@@ -42,6 +42,7 @@ class PlaybuttonCard extends HookWidget {
           children: [
             UniversalImage(
               path: imageUrl,
+              height: 150,
               fit: BoxFit.cover,
             ),
             StatedWidget.builder(
@@ -95,10 +96,8 @@ class PlaybuttonCard extends HookWidget {
             overflow: TextOverflow.ellipsis,
           ),
         ),
-        subtitle: unescapeHtml == null
+        subtitle: Text(
-            ? null
+          unescapeHtml.isEmpty ? "\n" : unescapeHtml,
-            : Text(
-                unescapeHtml,
           maxLines: 2,
           overflow: TextOverflow.ellipsis,
         ),

lib/components/titlebar/titlebar.dart

@@ -1,5 +1,6 @@
-import 'package:flutter/material.dart';
+import 'package:flutter/material.dart' hide AppBar;
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:shadcn_flutter/shadcn_flutter.dart' show AppBar;
 import 'package:spotube/components/titlebar/titlebar_buttons.dart';
 import 'package:spotube/provider/user_preferences/user_preferences_provider.dart';
 import 'package:spotube/utils/platform.dart';
@@ -148,29 +149,26 @@ class _PageWindowTitleBarState extends ConsumerState<PageWindowTitleBar> {
             left: kIsMacOS && hasFullscreen && hasLeadingOrCanPop ? 65 : 0,
           ),
           child: AppBar(
-            leading: widget.leading,
+            leading: [
-            automaticallyImplyLeading: widget.automaticallyImplyLeading,
+              if (widget.leading != null) widget.leading!,
-            actions: [
+              if (widget.leading == null &&
+                  widget.automaticallyImplyLeading &&
+                  Navigator.canPop(context))
+                const BackButton(),
+            ],
+            trailing: [
               ...?widget.actions,
               WindowTitleBarButtons(foregroundColor: widget.foregroundColor),
             ],
             backgroundColor: widget.backgroundColor,
-            foregroundColor: widget.foregroundColor,
-            actionsIconTheme: widget.actionsIconTheme,
-            centerTitle: widget.centerTitle,
-            titleSpacing: widget.titleSpacing,
-            toolbarOpacity: widget.toolbarOpacity,
-            leadingWidth: widget.leadingWidth,
-            toolbarTextStyle: widget.toolbarTextStyle,
-            titleTextStyle: widget.titleTextStyle,
             title: SizedBox(
               width: double.infinity, // workaround to force dragging
               child: widget.title ?? const Text(""),
             ),
-            scrolledUnderElevation: 0,
+            alignment: widget.centerTitle == true
-            shadowColor: Colors.transparent,
+                ? Alignment.center
-            forceMaterialTransparency: true,
+                : Alignment.centerLeft,
-            elevation: 0,
+            leadingGap: widget.leadingWidth,
           ),
         ),
       );

lib/pages/library/library.dart

@@ -1,5 +1,7 @@
-import 'package:flutter/material.dart' hide Image;
+import 'package:flutter/material.dart' show Badge;
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:shadcn_flutter/shadcn_flutter.dart';
 
 import 'package:spotube/modules/library/user_local_tracks.dart';
 import 'package:spotube/components/titlebar/titlebar.dart';
@@ -7,7 +9,6 @@ import 'package:spotube/modules/library/user_albums.dart';
 import 'package:spotube/modules/library/user_artists.dart';
 import 'package:spotube/modules/library/user_downloads.dart';
 import 'package:spotube/modules/library/user_playlists.dart';
-import 'package:spotube/components/themed_button_tab_bar.dart';
 import 'package:spotube/extensions/context.dart';
 import 'package:spotube/provider/download_manager_provider.dart';
 
@@ -18,42 +19,55 @@ class LibraryPage extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, ref) {
     final downloadingCount = ref.watch(downloadManagerProvider).$downloadCount;
+    final index = useState(0);
 
-    return DefaultTabController(
+    final children = [
-      length: 5,
+      Text(context.l10n.playlists),
-      child: SafeArea(
+      Text(context.l10n.local_tab),
-        bottom: false,
+      Badge(
-        child: Scaffold(
-          appBar: PageWindowTitleBar(
-            centerTitle: true,
-            leading: ThemedButtonsTabBar(
-              tabs: [
-                Tab(text: "  ${context.l10n.playlists}  "),
-                Tab(text: "  ${context.l10n.local_tab}  "),
-                Tab(
-                  child: Badge(
         isLabelVisible: downloadingCount > 0,
         label: Text(downloadingCount.toString()),
-                    child: Text("  ${context.l10n.downloads}  "),
+        child: Text(context.l10n.downloads),
       ),
+      Text(context.l10n.artists),
+      Text(context.l10n.albums),
+    ];
+
+    return SafeArea(
+      bottom: false,
+      child: Scaffold(
+        headers: [
+          PageWindowTitleBar(
+            leading: TabList(
+              index: index.value,
+              children: [
+                for (final child in children)
+                  TabButton(
+                    child: child,
+                    onPressed: () {
+                      index.value = children.indexOf(child);
+                    },
                   ),
-                Tab(text: "  ${context.l10n.artists}  "),
-                Tab(text: "  ${context.l10n.albums}  "),
               ],
             ),
-            leadingWidth: double.infinity,
+          )
-          ),
+        ],
-          body: const TabBarView(
+        child: IndexedStack(
-            children: [
+          index: index.value,
+          children: const [
             UserPlaylists(),
             UserLocalTracks(),
             UserDownloads(),
             UserArtists(),
             UserAlbums(),
+            // Text("UserPlaylists()"),
+            // Text("UserLocalTracks()"),
+            // Text("UserDownloads()"),
+            // Text("UserArtists()"),
+            // Text("UserAlbums()"),
           ],
         ),
       ),
-      ),
     );
   }
 }