refactor(lyrics): remove lyric element from mobile navbar and open lyric sheet in mobile player view

lib/collections/side_bar_tiles.dart

@@ -13,3 +13,10 @@ List<SideBarTiles> sidebarTileList = [
   SideBarTiles(icon: SpotubeIcons.library, title: "Library"),
   SideBarTiles(icon: SpotubeIcons.music, title: "Lyrics")
 ];
+
+List<SideBarTiles> navbarTileList = [
+  SideBarTiles(icon: SpotubeIcons.home, title: "Browse"),
+  SideBarTiles(icon: SpotubeIcons.search, title: "Search"),
+  SideBarTiles(icon: SpotubeIcons.library, title: "Library"),
+  SideBarTiles(icon: SpotubeIcons.settings, title: "Settings")
+];

lib/collections/spotube_icons.dart

@@ -50,6 +50,7 @@ abstract class SpotubeIcons {
   static const fastForward = FeatherIcons.fastForward;
   static const angleRight = FeatherIcons.chevronRight;
   static const angleLeft = FeatherIcons.chevronLeft;
+  static const angleDown = FeatherIcons.chevronDown;
   static const shoppingBag = FeatherIcons.shoppingBag;
   static const screenSearch = Icons.screen_search_desktop_outlined;
   static const save = FeatherIcons.save;
@@ -58,4 +59,6 @@ abstract class SpotubeIcons {
   static const update = FeatherIcons.refreshCcw;
   static const info = FeatherIcons.info;
   static const userRemove = FeatherIcons.userX;
+  static const close = FeatherIcons.x;
+  static const minimize = FeatherIcons.minimize2;
 }

lib/components/root/spotube_navigation_bar.dart

@@ -3,7 +3,6 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:platform_ui/platform_ui.dart';
 import 'package:spotube/collections/side_bar_tiles.dart';
-import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/root/sidebar.dart';
 import 'package:spotube/hooks/use_breakpoints.dart';
 import 'package:spotube/provider/downloader_provider.dart';
@@ -40,7 +39,7 @@ class SpotubeNavigationBar extends HookConsumerWidget {
             layoutMode == LayoutMode.adaptive)) return const SizedBox();
     return PlatformBottomNavigationBar(
       items: [
-        ...sidebarTileList.map(
+        ...navbarTileList.map(
           (e) {
             return PlatformBottomNavigationBarItem(
               icon: e.icon,
@@ -48,20 +47,15 @@ class SpotubeNavigationBar extends HookConsumerWidget {
             );
           },
         ),
-        const PlatformBottomNavigationBarItem(
-          icon: SpotubeIcons.settings,
-          label: "Settings",
-        )
       ],
       selectedIndex: insideSelectedIndex.value,
       onSelectedIndexChanged: (i) {
-        if (i == 4) {
-          insideSelectedIndex.value = 4;
-          Sidebar.goToSettings(context);
-        } else {
         insideSelectedIndex.value = i;
-          onSelectedIndexChanged(i);
+        if (navbarTileList[i].title == "Settings") {
+          Sidebar.goToSettings(context);
+          return;
         }
+        onSelectedIndexChanged(i);
       },
     );
   }

lib/components/shared/playbutton_card.dart

@@ -193,6 +193,7 @@ class PlaybuttonCard extends HookWidget {
                 ),
                 const Spacer(),
                 playButton,
+                const SizedBox(width: 10),
               ],
             );
 

lib/pages/lyrics/lyrics.dart

@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:platform_ui/platform_ui.dart';
+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/hooks/use_custom_status_bar_color.dart';
@@ -15,7 +16,8 @@ import 'package:spotube/utils/platform.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
 
 class LyricsPage extends HookConsumerWidget {
-  const LyricsPage({Key? key}) : super(key: key);
+  final bool isModal;
+  const LyricsPage({Key? key, this.isModal = false}) : super(key: key);
 
   @override
   Widget build(BuildContext context, ref) {
@@ -37,13 +39,13 @@ class LyricsPage extends HookConsumerWidget {
       noSetBGColor: true,
     );
 
-    final body = [
+    Widget body = [
       SyncedLyrics(palette: palette),
       GeniusLyrics(palette: palette),
     ][index.value];
 
     final tabbar = PreferredSize(
-      preferredSize: const Size.fromHeight(40),
+      preferredSize: const Size.fromHeight(50),
       child: PlatformTabBar(
         isNavigational: PlatformProperty.only(linux: true, other: false),
         selectedIndex: index.value,
@@ -63,10 +65,53 @@ class LyricsPage extends HookConsumerWidget {
         ],
       ),
     );
+
+    if (isModal) {
+      return SafeArea(
+        child: Container(
+          clipBehavior: Clip.hardEdge,
+          decoration: BoxDecoration(
+            color: Colors.black45,
+            borderRadius: BorderRadius.circular(8),
+          ),
+          margin: const EdgeInsets.all(16),
+          child: BackdropFilter(
+            filter: ImageFilter.blur(sigmaX: 50, sigmaY: 50),
+            child: Column(
+              children: [
+                const SizedBox(height: 5),
+                Container(
+                  height: 7,
+                  width: 150,
+                  decoration: BoxDecoration(
+                    color: palette.titleTextColor,
+                    borderRadius: BorderRadius.circular(10),
+                  ),
+                ),
+                PlatformAppBar(
+                  title: tabbar,
+                  backgroundColor: Colors.transparent,
+                  automaticallyImplyLeading: false,
+                  toolbarOpacity: platform == TargetPlatform.iOS ? 0 : 1,
+                  actions: [
+                    PlatformIconButton(
+                      icon: const Icon(SpotubeIcons.minimize),
+                      onPressed: () => Navigator.of(context).pop(),
+                    ),
+                    const SizedBox(width: 5),
+                  ],
+                ),
+                Expanded(child: body),
+              ],
+            ),
+          ),
+        ),
+      );
+    }
     return PlatformScaffold(
       extendBodyBehindAppBar: true,
       appBar: !kIsMacOS
-          ? (platform != TargetPlatform.windows
+          ? (platform != TargetPlatform.windows && !isModal
               ? PageWindowTitleBar(
                   toolbarOpacity: 0,
                   backgroundColor: Colors.transparent,
@@ -81,10 +126,11 @@ class LyricsPage extends HookConsumerWidget {
             image: UniversalImage.imageProvider(albumArt),
             fit: BoxFit.cover,
           ),
+          borderRadius: BorderRadius.circular(8),
         ),
         child: BackdropFilter(
           filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
-          child: Container(
+          child: ColoredBox(
             color: palette.color.withOpacity(.7),
             child: SafeArea(child: body),
           ),

lib/pages/player/player.dart

@@ -16,6 +16,7 @@ import 'package:spotube/components/shared/image/universal_image.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/lyrics.dart';
 import 'package:spotube/provider/playback_provider.dart';
 import 'package:spotube/provider/user_preferences_provider.dart';
 import 'package:spotube/utils/type_conversion_utils.dart';
@@ -193,10 +194,24 @@ class PlayerView extends HookConsumerWidget {
                     extraActions: [
                       PlatformIconButton(
                         tooltip: "Open Lyrics",
-                        icon: const Icon(SpotubeIcons.lyrics),
+                        icon: const Icon(SpotubeIcons.music),
                         onPressed: () {
-                          GoRouter.of(context).pop();
-                          GoRouter.of(context).go('/lyrics');
+                          showModalBottomSheet(
+                            context: context,
+                            isDismissible: true,
+                            enableDrag: true,
+                            isScrollControlled: true,
+                            backgroundColor: Colors.transparent,
+                            barrierColor: Colors.black12,
+                            shape: RoundedRectangleBorder(
+                              borderRadius: BorderRadius.circular(10),
+                            ),
+                            constraints: BoxConstraints(
+                              maxHeight: MediaQuery.of(context).size.height,
+                            ),
+                            builder: (context) =>
+                                const LyricsPage(isModal: true),
+                          );
                         },
                       )
                     ],