fix: genre border issues

lib/components/home/sections/genres.dart

@@ -117,7 +117,7 @@ class HomeGenresSection extends HookConsumerWidget {
                     borderRadius: BorderRadius.circular(8),
                     child: Ink(
                       decoration: BoxDecoration(
-                        borderRadius: BorderRadius.circular(6),
+                        borderRadius: BorderRadius.circular(8),
                         image: DecorationImage(
                           image: UniversalImage.imageProvider(
                             category.icons!.first.url!,
@@ -127,7 +127,7 @@ class HomeGenresSection extends HookConsumerWidget {
                       ),
                       child: Ink(
                         decoration: BoxDecoration(
-                          borderRadius: BorderRadius.circular(8),
+                          borderRadius: BorderRadius.circular(5),
                           color: colorScheme.surfaceVariant,
                           gradient: categoriesQuery.isLoading ? null : gradient,
                         ),

lib/l10n/app_en.arb

@@ -283,5 +283,6 @@
   "go_to_album": "Go to Album",
   "discord_rich_presence": "Discord Rich Presence",
   "browse_all": "Browse All",
-  "genres": "Genres"
+  "genres": "Genres",
+  "explore_genres": "Explore Genres"
 }

lib/pages/home/genres/genre_playlists.dart

@@ -43,8 +43,9 @@ class GenrePlaylistsPage extends HookConsumerWidget {
 
     return Scaffold(
       appBar: const PageWindowTitleBar(
-        automaticallyImplyLeading: true,
+        leading: BackButton(color: Colors.white),
         backgroundColor: Colors.transparent,
+        foregroundColor: Colors.white,
       ),
       extendBodyBehindAppBar: true,
       body: CustomScrollView(
@@ -52,7 +53,11 @@ class GenrePlaylistsPage extends HookConsumerWidget {
         slivers: [
           SliverAppBar(
             automaticallyImplyLeading: false,
-            expandedHeight: mediaQuery.mdAndDown ? 200 : 250,
+            expandedHeight: mediaQuery.mdAndDown ? 200 : 150,
+            pinned: true,
+            floating: false,
+            title: const Text(""),
+            backgroundColor: Colors.brown.withOpacity(0.7),
             flexibleSpace: FlexibleSpaceBar(
               stretchModes: const [
                 StretchMode.zoomBackground,
@@ -76,6 +81,7 @@ class GenrePlaylistsPage extends HookConsumerWidget {
               title: Text(
                 category.name!,
                 style: Theme.of(context).textTheme.headlineMedium?.copyWith(
+                  color: Colors.white,
                   letterSpacing: 3,
                   shadows: [
                     const Shadow(

lib/pages/home/genres/genres.dart

@@ -1,12 +1,15 @@
+import 'dart:math';
+
 import 'package:auto_size_text/auto_size_text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:skeletonizer/skeletonizer.dart';
 import 'package:spotify/spotify.dart' hide Offset;
+import 'package:spotube/collections/gradients.dart';
 import 'package:spotube/components/shared/page_window_title_bar.dart';
 import 'package:spotube/extensions/constrains.dart';
+import 'package:spotube/extensions/context.dart';
 
 import 'package:spotube/provider/user_preferences/user_preferences_provider.dart';
 import 'package:spotube/services/queries/queries.dart';
@@ -29,7 +32,10 @@ class GenrePage extends HookConsumerWidget {
     final mediaQuery = MediaQuery.of(context);
 
     return Scaffold(
-      appBar: const PageWindowTitleBar(automaticallyImplyLeading: true),
+      appBar: PageWindowTitleBar(
+        title: Text(context.l10n.explore_genres),
+        automaticallyImplyLeading: true,
+      ),
       body: SafeArea(
         top: false,
         child: GridView.builder(
@@ -45,6 +51,7 @@ class GenrePage extends HookConsumerWidget {
           itemCount: categories.length,
           itemBuilder: (context, index) {
             final category = categories[index];
+            final gradient = gradients[Random().nextInt(gradients.length)];
             return InkWell(
               borderRadius: BorderRadius.circular(8),
               onTap: () {
@@ -58,12 +65,14 @@ class GenrePage extends HookConsumerWidget {
                     image: NetworkImage(category.icons!.first.url!),
                     fit: BoxFit.cover,
                   ),
+                  gradient: gradient,
                 ),
                 child: Align(
                   alignment: Alignment.bottomCenter,
                   child: AutoSizeText(
                     category.name!,
                     style: textTheme.titleLarge?.copyWith(
+                      color: Colors.white,
                       shadows: [
                         // stroke shadow
                         const Shadow(

lib/services/queries/category.dart

@@ -13,7 +13,9 @@ class CategoryQueries {
   const CategoryQueries();
 
   Query<List<Category>, dynamic> listAll(
-      WidgetRef ref, Market recommendationMarket) {
+    WidgetRef ref,
+    Market recommendationMarket,
+  ) {
     ref.watch(userPreferencesProvider.select((s) => s.locale));
     final locale = useContext().l10n.localeName;
     final query = useSpotifyQuery<List<Category>, dynamic>(
@@ -26,7 +28,7 @@ class CategoryQueries {
             )
             .all();
 
-        return categories.toList();
+        return categories.toList()..shuffle();
       },
       ref: ref,
     );

untranslated_messages.json

@@ -3,104 +3,128 @@
     "go_to_album",
     "discord_rich_presence",
     "browse_all",
-    "genres"
+    "genres",
+    "explore_genres"
   ],
 
   "bn": [
     "go_to_album",
     "discord_rich_presence",
     "browse_all",
-    "genres"
+    "genres",
+    "explore_genres"
   ],
 
   "ca": [
     "go_to_album",
     "discord_rich_presence",
     "browse_all",
-    "genres"
+    "genres",
+    "explore_genres"
   ],
 
   "de": [
     "go_to_album",
     "discord_rich_presence",
     "browse_all",
-    "genres"
+    "genres",
+    "explore_genres"
   ],
 
   "es": [
     "go_to_album",
     "discord_rich_presence",
     "browse_all",
-    "genres"
+    "genres",
+    "explore_genres"
   ],
 
   "fa": [
     "go_to_album",
     "discord_rich_presence",
     "browse_all",
-    "genres"
+    "genres",
+    "explore_genres"
   ],
 
   "fr": [
     "go_to_album",
     "discord_rich_presence",
     "browse_all",
-    "genres"
+    "genres",
+    "explore_genres"
   ],
 
   "hi": [
     "go_to_album",
     "discord_rich_presence",
     "browse_all",
-    "genres"
+    "genres",
+    "explore_genres"
+  ],
+
+  "it": [
+    "audio_source",
+    "go_to_album",
+    "discord_rich_presence",
+    "browse_all",
+    "genres",
+    "explore_genres"
   ],
 
   "ja": [
     "go_to_album",
     "discord_rich_presence",
     "browse_all",
-    "genres"
+    "genres",
+    "explore_genres"
   ],
 
   "pl": [
     "go_to_album",
     "discord_rich_presence",
     "browse_all",
-    "genres"
+    "genres",
+    "explore_genres"
   ],
 
   "pt": [
     "go_to_album",
     "discord_rich_presence",
     "browse_all",
-    "genres"
+    "genres",
+    "explore_genres"
   ],
 
   "ru": [
     "go_to_album",
     "discord_rich_presence",
     "browse_all",
-    "genres"
+    "genres",
+    "explore_genres"
   ],
 
   "tr": [
     "go_to_album",
     "discord_rich_presence",
     "browse_all",
-    "genres"
+    "genres",
+    "explore_genres"
   ],
 
   "uk": [
     "go_to_album",
     "discord_rich_presence",
     "browse_all",
-    "genres"
+    "genres",
+    "explore_genres"
   ],
 
   "zh": [
     "go_to_album",
     "discord_rich_presence",
     "browse_all",
-    "genres"
+    "genres",
+    "explore_genres"
   ]
 }