feat: add user icon next to devices button

lib/components/shared/page_window_title_bar.dart

@@ -26,6 +26,8 @@ class PageWindowTitleBar extends StatefulHookConsumerWidget
   final double? titleWidth;
   final Widget? title;
 
+  final bool _sliver;
+
   const PageWindowTitleBar({
     super.key,
     this.actions,
@@ -42,7 +44,38 @@ class PageWindowTitleBar extends StatefulHookConsumerWidget
     this.titleTextStyle,
     this.titleWidth,
     this.toolbarTextStyle,
-  });
+  })  : _sliver = false,
+        pinned = false,
+        floating = false,
+        snap = false,
+        stretch = false;
+
+  final bool pinned;
+  final bool floating;
+  final bool snap;
+  final bool stretch;
+
+  const PageWindowTitleBar.sliver({
+    super.key,
+    this.actions,
+    this.title,
+    this.backgroundColor,
+    this.actionsIconTheme,
+    this.automaticallyImplyLeading = false,
+    this.centerTitle,
+    this.foregroundColor,
+    this.leading,
+    this.leadingWidth,
+    this.titleSpacing,
+    this.titleTextStyle,
+    this.titleWidth,
+    this.toolbarTextStyle,
+    this.pinned = false,
+    this.floating = false,
+    this.snap = false,
+    this.stretch = false,
+  })  : _sliver = true,
+        toolbarOpacity = 1;
 
   @override
   Size get preferredSize => const Size.fromHeight(kToolbarHeight);
@@ -64,6 +97,48 @@ class _PageWindowTitleBarState extends ConsumerState<PageWindowTitleBar> {
   Widget build(BuildContext context) {
     final mediaQuery = MediaQuery.of(context);
 
+    if (widget._sliver) {
+      return SliverLayoutBuilder(
+        builder: (context, constraints) {
+          final hasFullscreen =
+              mediaQuery.size.width == constraints.crossAxisExtent;
+          final hasLeadingOrCanPop =
+              widget.leading != null || Navigator.canPop(context);
+
+          return SliverPadding(
+            padding: EdgeInsets.only(
+              left: DesktopTools.platform.isMacOS &&
+                      hasFullscreen &&
+                      hasLeadingOrCanPop
+                  ? 65
+                  : 0,
+            ),
+            sliver: SliverAppBar(
+              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,
+              leadingWidth: widget.leadingWidth,
+              toolbarTextStyle: widget.toolbarTextStyle,
+              titleTextStyle: widget.titleTextStyle,
+              title: widget.title,
+              pinned: widget.pinned,
+              floating: widget.floating,
+              snap: widget.snap,
+              stretch: widget.stretch,
+            ),
+          );
+        },
+      );
+    }
+
     return LayoutBuilder(builder: (context, constrains) {
       final hasFullscreen = mediaQuery.size.width == constrains.maxWidth;
       final hasLeadingOrCanPop =
@@ -349,10 +424,7 @@ class WindowButton extends StatelessWidget {
 
 class MinimizeWindowButton extends WindowButton {
   MinimizeWindowButton(
-      {super.key,
+      {super.key, super.colors, super.onPressed, bool? animate})
-      super.colors,
-      super.onPressed,
-      bool? animate})
       : super(
           animate: animate ?? false,
           iconBuilder: (buttonContext) =>
@@ -362,10 +434,7 @@ class MinimizeWindowButton extends WindowButton {
 
 class MaximizeWindowButton extends WindowButton {
   MaximizeWindowButton(
-      {super.key,
+      {super.key, super.colors, super.onPressed, bool? animate})
-      super.colors,
-      super.onPressed,
-      bool? animate})
       : super(
           animate: animate ?? false,
           iconBuilder: (buttonContext) =>
@@ -374,11 +443,7 @@ class MaximizeWindowButton extends WindowButton {
 }
 
 class RestoreWindowButton extends WindowButton {
-  RestoreWindowButton(
+  RestoreWindowButton({super.key, super.colors, super.onPressed, bool? animate})
-      {super.key,
-      super.colors,
-      super.onPressed,
-      bool? animate})
       : super(
           animate: animate ?? false,
           iconBuilder: (buttonContext) =>
@@ -394,10 +459,7 @@ final _defaultCloseButtonColors = WindowButtonColors(
 
 class CloseWindowButton extends WindowButton {
   CloseWindowButton(
-      {super.key,
+      {super.key, WindowButtonColors? colors, super.onPressed, bool? animate})
-      WindowButtonColors? colors,
-      super.onPressed,
-      bool? animate})
       : super(
           colors: colors ?? _defaultCloseButtonColors,
           animate: animate ?? false,

lib/pages/home/home.dart

@@ -3,6 +3,7 @@ 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/collections/spotube_icons.dart';
 import 'package:spotube/components/connect/connect_device.dart';
 import 'package:spotube/components/home/sections/featured.dart';
 import 'package:spotube/components/home/sections/friends.dart';
@@ -21,26 +22,19 @@ class HomePage extends HookConsumerWidget {
     return SafeArea(
         bottom: false,
         child: Scaffold(
-          appBar:
-              DesktopTools.platform.isLinux || DesktopTools.platform.isWindows
-                  ? const PageWindowTitleBar(
-                      actions: [
-                        ConnectDeviceButton(),
-                        Gap(10),
-                      ],
-                    )
-                  : null,
           body: CustomScrollView(
             controller: controller,
             slivers: [
-              if (DesktopTools.platform.isMacOS || DesktopTools.platform.isWeb)
+              PageWindowTitleBar.sliver(
-                const SliverGap(20),
+                pinned: DesktopTools.platform.isDesktop,
-              if (!DesktopTools.platform.isLinux &&
-                  !DesktopTools.platform.isWindows)
-                const SliverAppBar(
                 actions: [
-                    ConnectDeviceButton(),
+                  const ConnectDeviceButton(),
-                    Gap(10),
+                  const Gap(10),
+                  IconButton.filledTonal(
+                    icon: const Icon(SpotubeIcons.user),
+                    onPressed: () {},
+                  ),
+                  const Gap(10),
                 ],
               ),
               const HomeGenresSection(),