chore: fix scaling issue in android and status bar being black

lib/components/horizontal_playbutton_card_view/horizontal_playbutton_card_view.dart

@@ -48,11 +48,15 @@ class HorizontalPlaybuttonCardView<T> extends HookWidget {
           Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
-              DefaultTextStyle(
-                style: context.theme.typography.h4.copyWith(
-                  color: context.theme.colorScheme.foreground,
+              Flexible(
+                child: DefaultTextStyle(
+                  style: context.theme.typography.h4.copyWith(
+                    color: context.theme.colorScheme.foreground,
+                  ),
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  child: title,
                 ),
-                child: title,
               ),
               if (titleTrailing != null) titleTrailing!,
             ],

lib/components/playbutton_view/playbutton_card.dart

@@ -1,4 +1,5 @@
 import 'package:shadcn_flutter/shadcn_flutter.dart';
+import 'package:shadcn_flutter/shadcn_flutter_extension.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/image/universal_image.dart';
 import 'package:spotube/extensions/string.dart';
@@ -32,16 +33,23 @@ class PlaybuttonCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final unescapeHtml = description?.unescapeHtml().cleanHtml() ?? "";
+    final scale = context.theme.scaling;
 
-    return Container(
-      width: 150,
+    return SizedBox(
+      width: 150 * scale,
       child: CardImage(
         image: Stack(
           children: [
-            UniversalImage(
-              path: imageUrl,
-              height: 150,
-              fit: BoxFit.cover,
+            Container(
+              width: 150 * scale,
+              height: 150 * scale,
+              decoration: BoxDecoration(
+                borderRadius: context.theme.borderRadiusMd,
+                image: DecorationImage(
+                  image: UniversalImage.imageProvider(imageUrl),
+                  fit: BoxFit.cover,
+                ),
+              ),
             ),
             StatedWidget.builder(
               builder: (context, states) {

lib/components/playbutton_view/playbutton_tile.dart

@@ -33,15 +33,18 @@ class PlaybuttonTile extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final cleanDescription = description?.unescapeHtml().cleanHtml() ?? "";
+    final scale = context.theme.scaling;
 
     return Button.ghost(
-      leading: ClipRRect(
-        borderRadius: context.theme.borderRadiusMd,
-        child: UniversalImage(
-          path: imageUrl,
-          width: 40,
-          height: 40,
-          fit: BoxFit.cover,
+      leading: Container(
+        width: 50 * scale,
+        height: 50 * scale,
+        decoration: BoxDecoration(
+          borderRadius: context.theme.borderRadiusMd,
+          image: DecorationImage(
+            image: UniversalImage.imageProvider(imageUrl),
+            fit: BoxFit.cover,
+          ),
         ),
       ),
       trailing: Row(

lib/components/playbutton_view/playbutton_view.dart

@@ -1,5 +1,6 @@
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:shadcn_flutter/shadcn_flutter.dart';
+import 'package:shadcn_flutter/shadcn_flutter_extension.dart';
 import 'package:skeletonizer/skeletonizer.dart';
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/components/playbutton_view/playbutton_card.dart';
@@ -98,9 +99,9 @@ class PlaybuttonView extends StatelessWidget {
             switch ((isGrid.value, isLoading)) {
               (true, _) => SliverGrid.builder(
                   itemCount: isLoading ? 6 : itemCount + 1,
-                  gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
-                    maxCrossAxisExtent: 150,
-                    mainAxisExtent: 225,
+                  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
+                    maxCrossAxisExtent: 150 * context.theme.scaling,
+                    mainAxisExtent: 225 * context.theme.scaling,
                     crossAxisSpacing: 8,
                     mainAxisSpacing: 8,
                   ),

lib/main.dart

@@ -210,13 +210,13 @@ class Spotube extends HookConsumerWidget {
 
         return child;
       },
+      scaling: const AdaptiveScaling(1),
       theme: ThemeData(
         radius: .5,
         iconTheme: const IconThemeProperties(),
         colorScheme: ColorSchemes.lightBlue(),
         surfaceOpacity: .8,
         surfaceBlur: 10,
-        typography: const Typography.geist(),
       ),
       darkTheme: ThemeData(
         radius: .5,
@@ -224,7 +224,6 @@ class Spotube extends HookConsumerWidget {
         colorScheme: ColorSchemes.darkNeutral(),
         surfaceOpacity: .8,
         surfaceBlur: 10,
-        typography: const Typography.geist(),
       ),
       themeMode: themeMode,
       shortcuts: {

lib/modules/player/player_controls.dart

@@ -3,7 +3,7 @@ import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:media_kit/media_kit.dart';
 import 'package:palette_generator/palette_generator.dart';
-import 'package:shadcn_flutter/shadcn_flutter.dart' hide ThemeData;
+import 'package:shadcn_flutter/shadcn_flutter.dart';
 
 import 'package:spotube/collections/spotube_icons.dart';
 import 'package:spotube/collections/intents.dart';

lib/pages/home/genres/genres.dart

@@ -1,10 +1,12 @@
 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:shadcn_flutter/shadcn_flutter.dart';
+import 'package:shadcn_flutter/shadcn_flutter_extension.dart';
 import 'package:spotube/collections/gradients.dart';
 import 'package:spotube/components/titlebar/titlebar.dart';
 import 'package:spotube/extensions/constrains.dart';
@@ -18,19 +20,19 @@ class GenrePage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
-    final ThemeData(:textTheme) = Theme.of(context);
     final scrollController = useScrollController();
     final categories = ref.watch(categoriesProvider);
 
     final mediaQuery = MediaQuery.of(context);
 
-    return Scaffold(
-      appBar: TitleBar(
-        title: Text(context.l10n.explore_genres),
-        automaticallyImplyLeading: true,
-      ),
-      body: SafeArea(
-        top: false,
+    return SafeArea(
+      child: Scaffold(
+        headers: [
+          TitleBar(
+            title: Text(context.l10n.explore_genres),
+            automaticallyImplyLeading: true,
+          )
+        ],
         child: GridView.builder(
           padding: const EdgeInsets.all(12),
           controller: scrollController,
@@ -45,9 +47,8 @@ class GenrePage extends HookConsumerWidget {
           itemBuilder: (context, index) {
             final category = categories.asData!.value[index];
             final gradient = gradients[Random().nextInt(gradients.length)];
-            return InkWell(
-              borderRadius: BorderRadius.circular(8),
-              onTap: () {
+            return CardImage(
+              onPressed: () {
                 context.pushNamed(
                   GenrePlaylistsPage.name,
                   pathParameters: {
@@ -56,37 +57,45 @@ class GenrePage extends HookConsumerWidget {
                   extra: category,
                 );
               },
-              child: Ink(
-                padding: const EdgeInsets.all(8),
-                decoration: BoxDecoration(
-                  borderRadius: BorderRadius.circular(8),
-                  image: DecorationImage(
-                    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(
-                          color: Colors.black,
-                          offset: Offset(1, 1),
-                          blurRadius: 2,
-                        ),
-                      ],
+              image: Stack(
+                children: [
+                  Container(
+                    height: 300,
+                    width: 250,
+                    decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(8),
+                      image: DecorationImage(
+                        image: NetworkImage(category.icons!.first.url!),
+                        fit: BoxFit.cover,
+                      ),
+                      gradient: gradient,
                     ),
-                    maxLines: 1,
-                    textAlign: TextAlign.center,
-                    maxFontSize: textTheme.titleLarge!.fontSize!,
-                    minFontSize: textTheme.titleMedium!.fontSize!,
                   ),
-                ),
+                  Positioned.fill(
+                    bottom: 10,
+                    child: Align(
+                      alignment: Alignment.bottomCenter,
+                      child: AutoSizeText(
+                        category.name!,
+                        style: context.theme.typography.h3.copyWith(
+                          color: Colors.white,
+                          shadows: [
+                            // stroke shadow
+                            const Shadow(
+                              color: Colors.black,
+                              offset: Offset(1, 1),
+                              blurRadius: 2,
+                            ),
+                          ],
+                        ),
+                        maxLines: 1,
+                        textAlign: TextAlign.center,
+                        maxFontSize: context.theme.typography.h3.fontSize!,
+                        minFontSize: context.theme.typography.large.fontSize!,
+                      ),
+                    ),
+                  ),
+                ],
               ),
             );
           },

lib/pages/root/root_app.dart

@@ -161,18 +161,19 @@ class RootApp extends HookConsumerWidget {
     useEndlessPlayback(ref);
 
     final backgroundColor = Theme.of(context).colorScheme.background;
+    final brightness = Theme.of(context).brightness;
 
     useEffect(() {
       SystemChrome.setSystemUIOverlayStyle(
         SystemUiOverlayStyle(
           statusBarColor: backgroundColor, // status bar color
-          statusBarIconBrightness: backgroundColor.computeLuminance() > 0.179
-              ? Brightness.dark
-              : Brightness.light,
+          statusBarIconBrightness: brightness == Brightness.dark
+              ? Brightness.light
+              : Brightness.dark,
         ),
       );
       return null;
-    }, [backgroundColor]);
+    }, [backgroundColor, brightness]);
 
     final navTileNames = useMemoized(() {
       return getSidebarTileList(context.l10n).map((s) => s.name).toList();