feat(mini_player): show/hide UI on hover toggle

lib/collections/spotube_icons.dart

@@ -72,4 +72,6 @@ abstract class SpotubeIcons {
   static const maximize = FeatherIcons.maximize2;
   static const pinOn = Icons.push_pin_rounded;
   static const pinOff = Icons.push_pin_outlined;
+  static const hoverOn = Icons.back_hand_rounded;
+  static const hoverOff = Icons.back_hand_outlined;
 }

lib/pages/lyrics/mini_lyrics.dart

@@ -29,6 +29,9 @@ class MiniLyricsPage extends HookConsumerWidget {
 
     final playlistQueue = ref.watch(PlaylistQueueNotifier.provider);
 
+    final areaActive = useState(false);
+    final hoverMode = useState(true);
+
     useEffect(() {
       WidgetsBinding.instance.addPostFrameCallback((_) async {
         prevSize.value = await DesktopTools.window.getSize();
@@ -46,13 +49,30 @@ class MiniLyricsPage extends HookConsumerWidget {
       );
     }
 
-    return DefaultTabController(
+    return MouseRegion(
+      onEnter: !hoverMode.value
+          ? null
+          : (event) {
+              areaActive.value = true;
+            },
+      onExit: !hoverMode.value
+          ? null
+          : (event) {
+              areaActive.value = false;
+            },
+      child: DefaultTabController(
         length: 2,
         child: Scaffold(
           backgroundColor: theme.colorScheme.surface.withOpacity(0.4),
           appBar: PreferredSize(
             preferredSize: const Size.fromHeight(60),
-          child: DragToMoveArea(
+            child: AnimatedCrossFade(
+              duration: const Duration(milliseconds: 200),
+              crossFadeState: areaActive.value
+                  ? CrossFadeState.showFirst
+                  : CrossFadeState.showSecond,
+              secondChild: const SizedBox(),
+              firstChild: DragToMoveArea(
                 child: Row(
                   children: [
                     const SizedBox(width: 10),
@@ -70,6 +90,24 @@ class MiniLyricsPage extends HookConsumerWidget {
                       ),
                     ),
                     const Spacer(),
+                    IconButton(
+                      tooltip: 'Show/Hide UI on hover',
+                      icon: hoverMode.value
+                          ? const Icon(SpotubeIcons.hoverOn)
+                          : const Icon(SpotubeIcons.hoverOff),
+                      style: ButtonStyle(
+                        foregroundColor: hoverMode.value
+                            ? MaterialStateProperty.all(
+                                theme.colorScheme.primary)
+                            : null,
+                      ),
+                      onPressed: () async {
+                        if (!hoverMode.value == true) {
+                          areaActive.value = true;
+                        }
+                        hoverMode.value = !hoverMode.value;
+                      },
+                    ),
                     FutureBuilder(
                       future: DesktopTools.window.isAlwaysOnTop(),
                       builder: (context, snapshot) {
@@ -95,36 +133,13 @@ class MiniLyricsPage extends HookConsumerWidget {
                                   update();
                                 },
                         );
-                    }),
-                IconButton(
-                  tooltip: 'Exit Mini Player',
-                  icon: const Icon(SpotubeIcons.maximize),
-                  onPressed: () async {
-                    try {
-                      await DesktopTools.window
-                          .setMinimumSize(const Size(300, 700));
-                      await DesktopTools.window.setAlwaysOnTop(false);
-                      if (wasMaximized.value) {
-                        await DesktopTools.window.maximize();
-                      } else {
-                        await DesktopTools.window.setSize(prevSize.value!);
-                      }
-                      await DesktopTools.window.setAlignment(Alignment.center);
-                      if (!kIsLinux) {
-                        await DesktopTools.window.setHasShadow(true);
-                      }
-                      await Future.delayed(const Duration(milliseconds: 200));
-                    } finally {
-                      if (context.mounted) {
-                        GoRouter.of(context).go('/lyrics');
-                      }
-                    }
                       },
                     ),
                   ],
                 ),
               ),
             ),
+          ),
           body: Column(
             children: [
               if (playlistQueue != null)
@@ -148,7 +163,13 @@ class MiniLyricsPage extends HookConsumerWidget {
                   ],
                 ),
               ),
-            Row(
+              AnimatedCrossFade(
+                crossFadeState: areaActive.value
+                    ? CrossFadeState.showFirst
+                    : CrossFadeState.showSecond,
+                duration: const Duration(milliseconds: 200),
+                secondChild: const SizedBox(),
+                firstChild: Row(
                   children: [
                     IconButton(
                       icon: const Icon(SpotubeIcons.queue),
@@ -176,12 +197,41 @@ class MiniLyricsPage extends HookConsumerWidget {
                             }
                           : null,
                     ),
-                Flexible(child: PlayerControls(compact: true))
+                    Flexible(child: PlayerControls(compact: true)),
+                    IconButton(
+                      tooltip: 'Exit Mini Player',
+                      icon: const Icon(SpotubeIcons.maximize),
+                      onPressed: () async {
+                        try {
+                          await DesktopTools.window
+                              .setMinimumSize(const Size(300, 700));
+                          await DesktopTools.window.setAlwaysOnTop(false);
+                          if (wasMaximized.value) {
+                            await DesktopTools.window.maximize();
+                          } else {
+                            await DesktopTools.window.setSize(prevSize.value!);
+                          }
+                          await DesktopTools.window
+                              .setAlignment(Alignment.center);
+                          if (!kIsLinux) {
+                            await DesktopTools.window.setHasShadow(true);
+                          }
+                          await Future.delayed(
+                              const Duration(milliseconds: 200));
+                        } finally {
+                          if (context.mounted) {
+                            GoRouter.of(context).go('/lyrics');
+                          }
+                        }
+                      },
+                    ),
                   ],
+                ),
               )
             ],
           ),
         ),
+      ),
     );
   }
 }