feat: macos title bar spacing and lyrics page margin separate

lib/components/root/sidebar.dart

@@ -41,8 +41,6 @@ class Sidebar extends HookConsumerWidget {
     );
   }
 
-  static Widget macSpacer = const SizedBox(height: 25);
-
   static void goToSettings(BuildContext context) {
     GoRouter.of(context).go("/settings");
   }
@@ -93,61 +91,76 @@ class Sidebar extends HookConsumerWidget {
 
     return Row(
       children: [
-        SidebarX(
-          controller: controller,
-          items: sidebarTileList.map(
-            (e) {
-              return SidebarXItem(
-                // iconWidget: Badge(
-                //   backgroundColor: Theme.of(context).primaryColor,
-                //   isLabelVisible: e.title == "Library" && downloadCount > 0,
-                //   label: Text(
-                //     downloadCount.toString(),
-                //     style: const TextStyle(
-                //       color: Colors.white,
-                //       fontSize: 10,
-                //     ),
-                //   ),
-                //   child: Icon(e.icon),
-                // ),
-                icon: e.icon,
-                label: e.title,
-              );
-            },
-          ).toList(),
-          headerBuilder: (_, __) => const SidebarHeader(),
-          footerBuilder: (_, __) => const Padding(
-            padding: EdgeInsets.only(bottom: 5),
-            child: SidebarFooter(),
-          ),
-          showToggleButton: false,
-          theme: SidebarXTheme(
-            width: 60,
-            margin: const EdgeInsets.all(10).copyWith(bottom: 122),
-          ),
-          extendedTheme: SidebarXTheme(
-            width: 250,
-            margin: const EdgeInsets.all(10).copyWith(bottom: 122, left: 0),
-            padding: const EdgeInsets.symmetric(horizontal: 6),
-            decoration: BoxDecoration(
+        SafeArea(
+          child: SidebarX(
+            controller: controller,
+            items: sidebarTileList.map(
+              (e) {
+                return SidebarXItem(
+                  // iconWidget: Badge(
+                  //   backgroundColor: Theme.of(context).primaryColor,
+                  //   isLabelVisible: e.title == "Library" && downloadCount > 0,
+                  //   label: Text(
+                  //     downloadCount.toString(),
+                  //     style: const TextStyle(
+                  //       color: Colors.white,
+                  //       fontSize: 10,
+                  //     ),
+                  //   ),
+                  //   child: Icon(e.icon),
+                  // ),
+                  icon: e.icon,
+                  label: e.title,
+                );
+              },
+            ).toList(),
+            headerBuilder: (_, __) => const SidebarHeader(),
+            footerBuilder: (_, __) => const Padding(
+              padding: EdgeInsets.only(bottom: 5),
+              child: SidebarFooter(),
+            ),
+            showToggleButton: false,
+            theme: SidebarXTheme(
+              width: 50,
+              margin: EdgeInsets.only(bottom: 10, top: kIsMacOS ? 35 : 5),
+              selectedItemDecoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(10),
+                color: Theme.of(context).colorScheme.primary.withOpacity(0.1),
+              ),
+              selectedIconTheme: IconThemeData(
+                color: Theme.of(context).colorScheme.primary,
+              ),
+            ),
+            extendedTheme: SidebarXTheme(
+              width: 250,
+              margin: EdgeInsets.only(
+                bottom: 10,
+                left: 0,
+                top: kIsMacOS ? 35 : 5,
+              ),
+              padding: const EdgeInsets.symmetric(horizontal: 6),
+              decoration: BoxDecoration(
                 color: bgColor?.withOpacity(0.8),
                 borderRadius: const BorderRadius.only(
                   topRight: Radius.circular(10),
                   bottomRight: Radius.circular(10),
-                )),
-            selectedItemDecoration: BoxDecoration(
-              borderRadius: BorderRadius.circular(10),
-              color: Theme.of(context).colorScheme.primary.withOpacity(0.1),
-            ),
-            selectedIconTheme: IconThemeData(
-              color: Theme.of(context).colorScheme.primary,
-            ),
-            selectedTextStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                  color: Theme.of(context).colorScheme.primary,
-                  fontWeight: FontWeight.w600,
                 ),
-            itemTextPadding: const EdgeInsets.only(left: 10),
-            selectedItemTextPadding: const EdgeInsets.only(left: 10),
+              ),
+              selectedItemDecoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(10),
+                color: Theme.of(context).colorScheme.primary.withOpacity(0.1),
+              ),
+              selectedIconTheme: IconThemeData(
+                color: Theme.of(context).colorScheme.primary,
+              ),
+              selectedTextStyle:
+                  Theme.of(context).textTheme.bodyMedium?.copyWith(
+                        color: Theme.of(context).colorScheme.primary,
+                        fontWeight: FontWeight.w600,
+                      ),
+              itemTextPadding: const EdgeInsets.only(left: 10),
+              selectedItemTextPadding: const EdgeInsets.only(left: 10),
+            ),
           ),
         ),
         Expanded(child: child)
@@ -164,7 +177,12 @@ class SidebarHeader extends HookWidget {
     final breakpoint = useBreakpoints();
 
     if (breakpoint <= Breakpoints.md) {
-      return Sidebar.brandLogo();
+      return Container(
+        height: 40,
+        width: 40,
+        margin: const EdgeInsets.only(bottom: 5),
+        child: Sidebar.brandLogo(),
+      );
     }
 
     return Padding(

lib/components/shared/themed_button_tab_bar.dart

@@ -1,6 +1,9 @@
 import 'package:buttons_tabbar/buttons_tabbar.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:spotube/hooks/use_breakpoint_value.dart';
+import 'package:spotube/hooks/use_brightness_value.dart';
+import 'package:spotube/utils/platform.dart';
 
 class ThemedButtonsTabBar extends HookWidget implements PreferredSizeWidget {
   final List<String> tabs;
@@ -8,12 +11,27 @@ class ThemedButtonsTabBar extends HookWidget implements PreferredSizeWidget {
 
   @override
   Widget build(BuildContext context) {
+    final bgColor = useBrightnessValue(
+      Theme.of(context).colorScheme.primaryContainer,
+      Color.lerp(Theme.of(context).colorScheme.primary, Colors.black, 0.7)!,
+    );
+
+    final breakpoint = useBreakpointValue(
+      sm: 85.0,
+      md: 35.0,
+      others: 0.0,
+    );
+
     return Padding(
-      padding: const EdgeInsets.symmetric(vertical: 8),
+      padding: EdgeInsets.only(
+        left: kIsMacOS ? breakpoint : 0,
+        top: 8,
+        bottom: 8,
+      ),
       child: ButtonsTabBar(
         radius: 100,
         decoration: BoxDecoration(
-          color: Theme.of(context).colorScheme.surfaceVariant,
+          color: bgColor,
           borderRadius: BorderRadius.circular(15),
         ),
         labelStyle: Theme.of(context).textTheme.labelLarge?.copyWith(

lib/pages/lyrics/lyrics.dart

@@ -8,6 +8,7 @@ import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/shared/page_window_title_bar.dart';
 import 'package:spotube/components/shared/image/universal_image.dart';
 import 'package:spotube/components/shared/themed_button_tab_bar.dart';
+import 'package:spotube/hooks/use_breakpoints.dart';
 import 'package:spotube/hooks/use_custom_status_bar_color.dart';
 import 'package:spotube/hooks/use_palette_color.dart';
 import 'package:spotube/pages/lyrics/plain_lyrics.dart';
@@ -32,6 +33,7 @@ class LyricsPage extends HookConsumerWidget {
       [playlist?.activeTrack.album?.images],
     );
     final palette = usePaletteColor(albumArt, ref);
+    final breakpoint = useBreakpoints();
 
     useCustomStatusBarColor(
       palette.color,
@@ -102,33 +104,39 @@ class LyricsPage extends HookConsumerWidget {
     }
     return DefaultTabController(
       length: 2,
-      child: Scaffold(
-        extendBodyBehindAppBar: true,
-        appBar: !kIsMacOS
-            ? const PageWindowTitleBar(
-                backgroundColor: Colors.transparent,
-                title: tabbar,
-              )
-            : tabbar,
-        body: Container(
-          clipBehavior: Clip.hardEdge,
-          decoration: BoxDecoration(
-            image: DecorationImage(
-              image: UniversalImage.imageProvider(albumArt),
-              fit: BoxFit.cover,
+      child: SafeArea(
+        bottom: breakpoint > Breakpoints.md,
+        child: Scaffold(
+          extendBodyBehindAppBar: true,
+          appBar: !kIsMacOS
+              ? const PageWindowTitleBar(
+                  backgroundColor: Colors.transparent,
+                  title: tabbar,
+                )
+              : tabbar,
+          body: Container(
+            clipBehavior: Clip.hardEdge,
+            decoration: BoxDecoration(
+              image: DecorationImage(
+                image: UniversalImage.imageProvider(albumArt),
+                fit: BoxFit.cover,
+              ),
+              borderRadius: const BorderRadius.only(
+                bottomLeft: Radius.circular(10),
+              ),
             ),
-            borderRadius: BorderRadius.circular(8),
-          ),
-          child: BackdropFilter(
-            filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
-            child: ColoredBox(
-              color: palette.color.withOpacity(.7),
-              child: SafeArea(
-                child: TabBarView(
-                  children: [
-                    SyncedLyrics(palette: palette, isModal: isModal),
-                    PlainLyrics(palette: palette, isModal: isModal),
-                  ],
+            margin: const EdgeInsets.only(bottom: 10),
+            child: BackdropFilter(
+              filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
+              child: ColoredBox(
+                color: palette.color.withOpacity(.7),
+                child: SafeArea(
+                  child: TabBarView(
+                    children: [
+                      SyncedLyrics(palette: palette, isModal: isModal),
+                      PlainLyrics(palette: palette, isModal: isModal),
+                    ],
+                  ),
                 ),
               ),
             ),