refactor: connected device button

lib/modules/connect/connect_device.dart

@@ -1,6 +1,5 @@
-import 'package:flutter/material.dart';
-import 'package:gap/gap.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:shadcn_flutter/shadcn_flutter.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/extensions/context.dart';
 import 'package:spotube/pages/connect/connect.dart';
@@ -14,110 +13,55 @@ class ConnectDeviceButton extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
-    final ThemeData(:colorScheme) = Theme.of(context);
-    final pixelRatio = MediaQuery.of(context).devicePixelRatio;
     final connectClients = ref.watch(connectClientsProvider);
 
+    final hasServices =
+        connectClients.asData?.value.services.isNotEmpty == true;
+
     if (_sidebar) {
       return SizedBox(
         width: double.infinity,
-        child: TextButton(
+        child: Button.primary(
           onPressed: () {
             ServiceUtils.pushNamed(context, ConnectPage.name);
           },
-          style: FilledButton.styleFrom(
+          trailing: const Icon(SpotubeIcons.speaker),
-            shape: RoundedRectangleBorder(
+          child: Text(
-              borderRadius: BorderRadius.circular(8),
+            "${context.l10n.devices}"
-            ),
+            "${hasServices ? " (${connectClients.asData?.value.services.length})" : ""}",
-            padding: const EdgeInsets.all(5),
-          ),
-          child: Row(
-            children: [
-              Text(context.l10n.devices),
-              if (connectClients.asData?.value.services.isNotEmpty == true)
-                Text(
-                  " (${connectClients.asData?.value.services.length})",
-                ),
-              const Spacer(),
-              const Icon(SpotubeIcons.speaker),
-              const Gap(5),
-            ],
           ),
         ),
       );
     }
 
-    return SizedBox(
+    return Row(
-      height: 40 * pixelRatio,
-      child: Stack(
-        alignment: Alignment.centerRight,
-        fit: StackFit.loose,
       children: [
-          Material(
+        SecondaryBadge(
-            type: MaterialType.transparency,
-            child: Center(
-              child: ClipRect(
-                clipBehavior: Clip.hardEdge,
-                child: InkWell(
-                  onTap: () {
-                    ServiceUtils.pushNamed(context, ConnectPage.name);
-                  },
-                  borderRadius: BorderRadius.circular(50),
-                  child: Ink(
-                    decoration: BoxDecoration(
-                      borderRadius: BorderRadius.circular(50),
-                      color: colorScheme.primaryContainer,
-                    ),
-                    padding:
-                        const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
-                    child: Row(
-                      mainAxisSize: MainAxisSize.min,
-                      children: [
-                        if (connectClients.asData?.value.resolvedService !=
-                            null) ...[
-                          Container(
-                            width: 7,
-                            height: 7,
-                            decoration: BoxDecoration(
-                              color: Colors.greenAccent,
-                              borderRadius: BorderRadius.circular(50),
-                            ),
-                          ),
-                          const Gap(5),
-                        ],
-                        Text(context.l10n.devices),
-                        if (connectClients.asData?.value.services.isNotEmpty ==
-                            true)
-                          Text(
-                            " (${connectClients.asData?.value.services.length})",
-                            style: TextStyle(
-                              color: colorScheme.onPrimaryContainer
-                                  .withOpacity(0.5),
-                            ),
-                          ),
-                        const Gap(35),
-                      ],
-                    ),
-                  ),
-                ),
-              ),
-            ),
-          ),
-          Positioned(
-            right: -3,
-            child: IconButton.filled(
-              icon: const Icon(SpotubeIcons.speaker),
-              style: IconButton.styleFrom(
-                visualDensity: VisualDensity.standard,
-                foregroundColor: colorScheme.onPrimary,
-              ),
           onPressed: () {
             ServiceUtils.pushNamed(context, ConnectPage.name);
           },
+          style: const ButtonStyle.secondary(size: ButtonSize(.8)),
+          leading: connectClients.asData?.value.resolvedService != null
+              ? const Center(
+                  child: DotItem(
+                    size: 6,
+                    borderRadius: 10,
+                    color: Colors.green,
+                  ),
+                )
+              : null,
+          child: Text(
+            "${context.l10n.devices}"
+            "${hasServices ? " (${connectClients.asData?.value.services.length})" : ""}",
           ),
         ),
+        IconButton.primary(
+          icon: const Icon(SpotubeIcons.speaker),
+          onPressed: () {
+            ServiceUtils.pushNamed(context, ConnectPage.name);
+          },
+        )
       ],
-      ),
     );
   }
 }

lib/modules/root/spotube_navigation_bar.dart

@@ -7,7 +7,6 @@ import 'package:shadcn_flutter/shadcn_flutter.dart';
 import 'package:spotube/collections/side_bar_tiles.dart';
 import 'package:spotube/extensions/constrains.dart';
 import 'package:spotube/extensions/context.dart';
-import 'package:spotube/hooks/utils/use_brightness_value.dart';
 import 'package:spotube/models/database/database.dart';
 import 'package:spotube/provider/download_manager_provider.dart';
 import 'package:spotube/provider/user_preferences/user_preferences_provider.dart';
@@ -61,6 +60,9 @@ class SpotubeNavigationBar extends HookConsumerWidget {
         children: [
           for (final tile in navbarTileList)
             NavigationButton(
+              style: const ButtonStyle.muted(density: ButtonDensity.icon),
+              selectedStyle:
+                  const ButtonStyle.fixed(density: ButtonDensity.icon),
               child: Badge(
                 isLabelVisible: tile.id == "library" && downloadCount > 0,
                 label: Text(downloadCount.toString()),

lib/pages/library/library.dart

@@ -11,6 +11,7 @@ import 'package:spotube/modules/library/user_downloads.dart';
 import 'package:spotube/modules/library/user_playlists.dart';
 import 'package:spotube/extensions/context.dart';
 import 'package:spotube/provider/download_manager_provider.dart';
+import 'package:spotube/utils/platform.dart';
 
 class LibraryPage extends HookConsumerWidget {
   static const name = "library";
@@ -37,9 +38,10 @@ class LibraryPage extends HookConsumerWidget {
       bottom: false,
       child: Scaffold(
         headers: [
-          TitleBar(
+          if (kIsWindows || kIsLinux) const TitleBar(),
-            leading: [
+          SingleChildScrollView(
-              TabList(
+            scrollDirection: Axis.horizontal,
+            child: TabList(
               index: index.value,
               children: [
                 for (final child in children)
@@ -50,9 +52,9 @@ class LibraryPage extends HookConsumerWidget {
                     },
                   ),
               ],
-              )
+            ),
-            ],
+          ),
-          )
+          const Gap(10),
         ],
         child: IndexedStack(
           index: index.value,