fix(macos): backbutton and window button overlap and unused empty spa…

…ce on home
KRTirtho · Jan 24, 2024 · b9417ca · b9417ca
1 parent a752cf4
commit b9417ca
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 36 deletions.
diff --git a/lib/components/shared/page_window_title_bar.dart b/lib/components/shared/page_window_title_bar.dart
@@ -62,28 +62,45 @@ class _PageWindowTitleBarState extends ConsumerState<PageWindowTitleBar> {
 
   @override
   Widget build(BuildContext context) {
-    return GestureDetector(
-      onHorizontalDragStart: onDrag,
-      onVerticalDragStart: onDrag,
-      child: AppBar(
-        leading: widget.leading,
-        automaticallyImplyLeading: widget.automaticallyImplyLeading,
-        actions: [
-          ...?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: widget.title,
-      ),
-    );
+    final mediaQuery = MediaQuery.of(context);
+
+    return LayoutBuilder(builder: (context, constrains) {
+      final hasFullscreen = mediaQuery.size.width == constrains.maxWidth;
+      final hasLeadingOrCanPop =
+          widget.leading != null || Navigator.canPop(context);
+
+      return GestureDetector(
+        onHorizontalDragStart: onDrag,
+        onVerticalDragStart: onDrag,
+        child: Padding(
+          padding: EdgeInsets.only(
+            left: DesktopTools.platform.isMacOS &&
+                    hasFullscreen &&
+                    hasLeadingOrCanPop
+                ? 65
+                : 0,
+          ),
+          child: AppBar(
+            leading: widget.leading,
+            automaticallyImplyLeading: widget.automaticallyImplyLeading,
+            actions: [
+              ...?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: widget.title,
+          ),
+        ),
+      );
+    });
   }
 }
 

diff --git a/lib/components/shared/themed_button_tab_bar.dart b/lib/components/shared/themed_button_tab_bar.dart
@@ -1,9 +1,7 @@
 import 'package:buttons_tabbar/buttons_tabbar.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:spotube/hooks/utils/use_breakpoint_value.dart';
 import 'package:spotube/hooks/utils/use_brightness_value.dart';
-import 'package:spotube/utils/platform.dart';
 
 class ThemedButtonsTabBar extends HookWidget implements PreferredSizeWidget {
   final List<Widget> tabs;
@@ -17,16 +15,8 @@ class ThemedButtonsTabBar extends HookWidget implements PreferredSizeWidget {
       Color.lerp(theme.colorScheme.primary, Colors.black, 0.7)!,
     );
 
-    final breakpoint = useBreakpointValue(
-      xs: 85.0,
-      sm: 85.0,
-      md: 35.0,
-      others: 0.0,
-    );
-
     return Padding(
-      padding: EdgeInsets.only(
-        left: kIsMacOS ? breakpoint : 0,
+      padding: const EdgeInsets.only(
         top: 8,
         bottom: 8,
       ),

diff --git a/lib/pages/home/home.dart b/lib/pages/home/home.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_desktop_tools/flutter_desktop_tools.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:gap/gap.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotube/components/home/sections/featured.dart';
 import 'package:spotube/components/home/sections/friends.dart';
@@ -19,12 +20,15 @@ class HomePage extends HookConsumerWidget {
     return SafeArea(
         bottom: false,
         child: Scaffold(
-          appBar: DesktopTools.platform.isMobile
-              ? null
-              : const PageWindowTitleBar(),
+          appBar:
+              DesktopTools.platform.isLinux || DesktopTools.platform.isWindows
+                  ? const PageWindowTitleBar()
+                  : null,
           body: CustomScrollView(
             controller: controller,
             slivers: [
+              if (DesktopTools.platform.isMacOS || DesktopTools.platform.isWeb)
+                const SliverGap(20),
               const HomeGenresSection(),
               SliverList.list(
                 children: const [