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,7 +91,8 @@ class Sidebar extends HookConsumerWidget {
 
     return Row(
       children: [
-        SidebarX(
+        SafeArea(
+          child: SidebarX(
             controller: controller,
             items: sidebarTileList.map(
               (e) {
@@ -122,19 +121,8 @@ class Sidebar extends HookConsumerWidget {
             ),
             showToggleButton: false,
             theme: SidebarXTheme(
-            width: 60,
+              width: 50,
-            margin: const EdgeInsets.all(10).copyWith(bottom: 122),
+              margin: EdgeInsets.only(bottom: 10, top: kIsMacOS ? 35 : 5),
-          ),
-          extendedTheme: SidebarXTheme(
-            width: 250,
-            margin: const EdgeInsets.all(10).copyWith(bottom: 122, left: 0),
-            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),
@@ -142,7 +130,31 @@ class Sidebar extends HookConsumerWidget {
               selectedIconTheme: IconThemeData(
                 color: Theme.of(context).colorScheme.primary,
               ),
-            selectedTextStyle: Theme.of(context).textTheme.bodyMedium?.copyWith(
+            ),
+            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,
                       ),
@@ -150,6 +162,7 @@ class Sidebar extends HookConsumerWidget {
               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,6 +104,8 @@ class LyricsPage extends HookConsumerWidget {
     }
     return DefaultTabController(
       length: 2,
+      child: SafeArea(
+        bottom: breakpoint > Breakpoints.md,
         child: Scaffold(
           extendBodyBehindAppBar: true,
           appBar: !kIsMacOS
@@ -117,8 +121,11 @@ class LyricsPage extends HookConsumerWidget {
                 image: UniversalImage.imageProvider(albumArt),
                 fit: BoxFit.cover,
               ),
-            borderRadius: BorderRadius.circular(8),
+              borderRadius: const BorderRadius.only(
+                bottomLeft: Radius.circular(10),
               ),
+            ),
+            margin: const EdgeInsets.only(bottom: 10),
             child: BackdropFilter(
               filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
               child: ColoredBox(
@@ -135,6 +142,7 @@ class LyricsPage extends HookConsumerWidget {
             ),
           ),
         ),
+      ),
     );
   }
 }