fix: get rid of overflow errors & status bar dark color

lib/components/player/player.dart

@@ -15,6 +15,7 @@ import 'package:spotube/components/shared/animated_gradient.dart';
 import 'package:spotube/components/shared/dialogs/track_details_dialog.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/panels/sliding_up_panel.dart';
 import 'package:spotube/extensions/constrains.dart';
 import 'package:spotube/extensions/context.dart';
 import 'package:spotube/hooks/use_custom_status_bar_color.dart';
@@ -26,13 +27,10 @@ import 'package:spotube/provider/proxy_playlist/proxy_playlist_provider.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 
 class PlayerView extends HookConsumerWidget {
-  final bool isOpen;
+  final PanelController panelController;
-  final Function() onClosePage;
-
   const PlayerView({
     Key? key,
-    required this.isOpen,
+    required this.panelController,
-    required this.onClosePage,
   }) : super(key: key);
 
   @override
@@ -50,7 +48,7 @@ class PlayerView extends HookConsumerWidget {
     useEffect(() {
       if (mediaQuery.lgAndUp) {
         WidgetsBinding.instance.addPostFrameCallback((_) {
-          onClosePage();
+          panelController.close();
         });
       }
       return null;
@@ -65,35 +63,53 @@ class PlayerView extends HookConsumerWidget {
     );
 
     final palette = usePaletteGenerator(albumArt);
-    final bgColor = palette.dominantColor?.color ?? theme.colorScheme.primary;
     final titleTextColor = palette.dominantColor?.titleTextColor;
     final bodyTextColor = palette.dominantColor?.bodyTextColor;
 
+    final bgColor = palette.dominantColor?.color ?? theme.colorScheme.primary;
+
+    final GlobalKey<ScaffoldState> scaffoldKey =
+        useMemoized(() => GlobalKey(), []);
+
+    useEffect(() {
+      WidgetsBinding.instance.renderView.automaticSystemUiAdjustment = false;
+
+      return () {
+        WidgetsBinding.instance.renderView.automaticSystemUiAdjustment = true;
+      };
+    }, [panelController.isPanelOpen]);
+
     useCustomStatusBarColor(
       bgColor,
-      isOpen,
+      panelController.isPanelOpen,
       noSetBGColor: true,
+      automaticSystemUiAdjustment: false,
     );
 
+    final topPadding = MediaQueryData.fromView(View.of(context)).padding.top;
+
     return WillPopScope(
       onWillPop: () async {
-        onClosePage();
+        panelController.close();
         return false;
       },
       child: IconTheme(
         data: theme.iconTheme.copyWith(color: bodyTextColor),
         child: Scaffold(
+          key: scaffoldKey,
           appBar: PreferredSize(
-            preferredSize: const Size.fromHeight(kToolbarHeight),
+            preferredSize: Size.fromHeight(
-            child: SafeArea(
+              kToolbarHeight + topPadding,
-              minimum: const EdgeInsets.only(top: 30),
+            ),
+            child: Padding(
+              padding: EdgeInsets.only(top: topPadding),
               child: PageWindowTitleBar(
                 backgroundColor: Colors.transparent,
                 foregroundColor: titleTextColor,
                 toolbarOpacity: 1,
                 leading: IconButton(
                   icon: const Icon(SpotubeIcons.angleDown, size: 18),
-                  onPressed: onClosePage,
+                  onPressed: panelController.close,
                 ),
                 actions: [
                   IconButton(
@@ -207,7 +223,7 @@ class PlayerView extends HookConsumerWidget {
                                       color: bodyTextColor,
                                     ),
                                     onRouteChange: (route) {
-                                      onClosePage();
+                                      panelController.close();
                                       GoRouter.of(context).push(route);
                                     },
                                   ),

lib/components/player/player_overlay.dart

@@ -175,21 +175,19 @@ class PlayerOverlay extends HookConsumerWidget {
         ),
       ),
       panelBuilder: (position) {
+        // this is the reason we're getting an update
         final navigationHeight = ref.watch(navigationPanelHeight);
-        if (navigationHeight == 50) return const SizedBox();
 
-        return AnimatedContainer(
+        return IgnorePointer(
-          clipBehavior: Clip.antiAlias,
+          ignoring: !panelController.isPanelOpen,
-          duration: const Duration(milliseconds: 250),
+          child: AnimatedContainer(
-          decoration: navigationHeight == 0
+            clipBehavior: Clip.antiAlias,
-              ? const BoxDecoration(borderRadius: BorderRadius.zero)
+            duration: const Duration(milliseconds: 250),
-              : const BoxDecoration(borderRadius: radius),
+            decoration: navigationHeight == 0
-          child: HorizontalScrollableWidget(
+                ? const BoxDecoration(borderRadius: BorderRadius.zero)
-            child: PlayerView(
+                : const BoxDecoration(borderRadius: radius),
-              isOpen: panelController.isPanelOpen,
+            child: HorizontalScrollableWidget(
-              onClosePage: () {
+              child: PlayerView(panelController: panelController),
-                panelController.close();
-              },
             ),
           ),
         );

lib/components/root/spotube_navigation_bar.dart

@@ -51,7 +51,8 @@ class SpotubeNavigationBar extends HookConsumerWidget {
     }, [selectedIndex]);
 
     if (layoutMode == LayoutMode.extended ||
-        (mediaQuery.mdAndUp && layoutMode == LayoutMode.adaptive)) {
+        (mediaQuery.mdAndUp && layoutMode == LayoutMode.adaptive) ||
+        panelHeight < 10) {
       return const SizedBox();
     }
 

lib/hooks/use_custom_status_bar_color.dart

@@ -6,6 +6,7 @@ void useCustomStatusBarColor(
   Color color,
   bool isCurrentRoute, {
   bool noSetBGColor = false,
+  bool? automaticSystemUiAdjustment,
 }) {
   final context = useContext();
   final backgroundColor = Theme.of(context).scaffoldBackgroundColor;
@@ -21,20 +22,30 @@ void useCustomStatusBarColor(
   final statusBarColor = SystemChrome.latestStyle?.statusBarColor;
 
   useEffect(() {
-    if (isCurrentRoute && statusBarColor != color) {
+    WidgetsBinding.instance.addPostFrameCallback((_) {
-      SystemChrome.setSystemUIOverlayStyle(
+      if (automaticSystemUiAdjustment != null) {
-        SystemUiOverlayStyle(
+        WidgetsBinding.instance.renderView.automaticSystemUiAdjustment =
-          statusBarColor:
+            automaticSystemUiAdjustment;
-              noSetBGColor ? Colors.transparent : color, // status bar color
+      }
-          statusBarIconBrightness: color.computeLuminance() > 0.179
+      if (isCurrentRoute && statusBarColor != color) {
-              ? Brightness.dark
+        final isLight = color.computeLuminance() > 0.179;
-              : Brightness.light,
+        SystemChrome.setSystemUIOverlayStyle(
-        ),
+          SystemUiOverlayStyle(
-      );
+            statusBarColor:
-    } else if (!isCurrentRoute && statusBarColor == color) {
+                noSetBGColor ? Colors.transparent : color, // status bar color
-      resetStatusbar();
+            statusBarIconBrightness:
-    }
+                isLight ? Brightness.dark : Brightness.light,
-    return;
+          ),
+        );
+      } else if (!isCurrentRoute && statusBarColor == color) {
+        resetStatusbar();
+      }
+    });
+    return () {
+      if (automaticSystemUiAdjustment != null) {
+        WidgetsBinding.instance.renderView.automaticSystemUiAdjustment = false;
+      }
+    };
   }, [color, isCurrentRoute, statusBarColor]);
 
   useEffect(() {