refactor: working on new home screen look

ProjectAnni · Sep 19, 2024 · 03cccbc · 03cccbc
1 parent ed55c9f
commit 03cccbc
Show file tree

Hide file tree

Showing 7 changed files with 569 additions and 72 deletions.
diff --git a/lib/ui/bottom_player/bottom_player_mobile.dart b/lib/ui/bottom_player/bottom_player_mobile.dart
@@ -21,10 +21,10 @@ class MobileBottomPlayer extends StatelessWidget {
           topLeft: Radius.circular(12),
           topRight: Radius.circular(12),
         ),
-        color: ElevationOverlay.colorWithOverlay(
+        color: ElevationOverlay.applySurfaceTint(
           context.colorScheme.surface,
-          context.colorScheme.primary,
-          3.0,
+          context.colorScheme.surfaceTint,
+          4.0,
         ),
       ),
       height: height,

diff --git a/lib/ui/layout/layout.dart b/lib/ui/layout/layout.dart
@@ -18,7 +18,7 @@ class AnnixLayout extends HookConsumerWidget {
   static const pages = <String>[
     '/home',
     '/search',
-    '/settings',
+    '/server',
   ];
 
   const AnnixLayout({super.key, required this.child});
@@ -113,9 +113,9 @@ class AnnixLayout extends HookConsumerWidget {
         label: t.search,
       ),
       NavigationDestination(
-        icon: const Icon(Icons.settings_outlined),
-        selectedIcon: const Icon(Icons.settings),
-        label: t.settings.settings,
+        icon: const Icon(Icons.dns_outlined),
+        selectedIcon: const Icon(Icons.dns),
+        label: t.server.server,
       ),
     ];
     final body = Consumer(

diff --git a/lib/ui/page/favorite.dart b/lib/ui/page/favorite.dart
@@ -83,31 +83,42 @@ class FavoritePage extends HookConsumerWidget {
           duration: context.isDesktop
               ? const Duration(milliseconds: 150)
               : const Duration(milliseconds: 300),
-          children: [
-            _favoriteTracks(),
-            _favoriteAlbums(),
-          ],
+          children: const [FavoriteTracks(), FavoriteAlbumWall()],
         ),
       ),
     );
   }
+}
+
+class FavoriteTracks extends ConsumerWidget {
+  const FavoriteTracks({super.key});
 
-  Widget _favoriteTracks() {
-    return Consumer(
-      builder: (context, ref, child) {
-        final annil = ref.read(annilProvider);
-        final player = ref.read(playbackProvider);
-        final favoriteTracks = ref.watch(favoriteTracksProvider);
-        final favorites = favoriteTracks.value ?? [];
-        final reversedFavorite = favorites.reversed;
+  @override
+  Widget build(BuildContext context, ref) {
+    final annil = ref.read(annilProvider);
+    final player = ref.read(playbackProvider);
+    final favoriteTracks = ref.watch(favoriteTracksProvider);
+    final favorites = favoriteTracks.value ?? [];
+    final reversedFavorite = favorites.reversed;
 
-        return ListView.builder(
-          primary: false,
+    return DecoratedSliver(
+      decoration: BoxDecoration(
+        color: context.colorScheme.secondaryContainer,
+        borderRadius: const BorderRadius.all(Radius.circular(16)),
+      ),
+      sliver: SliverPadding(
+        padding: const EdgeInsets.symmetric(vertical: 8),
+        sliver: SliverList.separated(
           itemCount: reversedFavorite.length,
-          padding: EdgeInsets.zero,
+          separatorBuilder: (context, index) => Divider(
+            height: 4,
+            thickness: 2,
+            color: context.colorScheme.surface,
+          ),
           itemBuilder: (final context, final index) {
             final favorite = reversedFavorite.elementAt(index);
             return ListTile(
+              // contentPadding: EdgeInsets.zero,
               leading: CoverCard(
                 child: MusicCover.fromAlbum(
                   albumId: favorite.albumId,
@@ -122,7 +133,6 @@ class FavoritePage extends HookConsumerWidget {
                 favorite.artist ?? '--',
                 overflow: TextOverflow.ellipsis,
               ),
-              trailing: Text('${index + 1}'),
               enabled: annil.isTrackAvailable(
                 TrackIdentifier(
                   albumId: favorite.albumId,
@@ -140,23 +150,8 @@ class FavoritePage extends HookConsumerWidget {
               },
             );
           },
-        );
-      },
-    );
-  }
-
-  Widget _favoriteAlbums() {
-    return Consumer(
-      builder: (context, ref, child) {
-        final favoriteAlbums = ref.watch(favoriteAlbumsProvider);
-        final favorites = favoriteAlbums.value ?? [];
-        final reversedFavorite =
-            favorites.reversed.map((final e) => e.albumId).toList();
-        return Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 8),
-          child: LazyAlbumWall(albumIds: reversedFavorite),
-        );
-      },
+        ),
+      ),
     );
   }
 
@@ -193,3 +188,19 @@ class FavoritePage extends HookConsumerWidget {
         .toList();
   }
 }
+
+class FavoriteAlbumWall extends ConsumerWidget {
+  const FavoriteAlbumWall({super.key});
+
+  @override
+  Widget build(BuildContext context, ref) {
+    final favoriteAlbums = ref.watch(favoriteAlbumsProvider);
+    final favorites = favoriteAlbums.value ?? [];
+    final reversedFavorite =
+        favorites.reversed.map((final e) => e.albumId).toList();
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 8),
+      child: LazyAlbumWall(albumIds: reversedFavorite),
+    );
+  }
+}