feat: color scheme picker dialog vertical list view instead of wrap

lib/components/settings/color_scheme_picker_dialog.dart

@@ -16,7 +16,6 @@ final colorsMap = {
   "Teal": Colors.teal,
   "Green": Colors.green,
   "LightGreen": Colors.lightGreen,
-  "Lime": Colors.lime,
   "Yellow": Colors.yellow,
   "Amber": Colors.amber,
   "Orange": Colors.orange,
@@ -74,25 +73,22 @@ class ColorSchemePickerDialog extends HookConsumerWidget {
       content: SizedBox(
         height: 200,
         width: 400,
-        child: SingleChildScrollView(
+        child: ListView.separated(
-          child: Center(
+          separatorBuilder: (context, index) {
-            child: Wrap(
+            return const SizedBox(height: 10);
-              spacing: 10,
+          },
-              runSpacing: 10,
+          itemCount: colorsMap.length,
-              children: colorsMap.entries
+          itemBuilder: (context, index) {
-                  .map(
+            final color = colorsMap.entries.elementAt(index);
-                    (e) => ColorTile(
+            return ColorTile(
-                      color: e.value,
+              color: color.value,
-                      isActive: active.value == e.key,
+              isActive: active.value == color.key,
-                      tooltip: e.key,
+              onPressed: () {
-                      onPressed: () {
+                active.value = color.key;
-                        active.value = e.key;
+              },
-                      },
+              tooltip: color.key,
-                    ),
+            );
-                  )
+          },
-                  .toList(),
-            ),
-          ),
         ),
       ),
     );
@@ -104,32 +100,118 @@ class ColorTile extends StatelessWidget {
   final bool isActive;
   final void Function()? onPressed;
   final String? tooltip;
+  final bool isCompact;
   const ColorTile({
     required this.color,
     this.isActive = false,
     this.onPressed,
     this.tooltip = "",
+    this.isCompact = false,
     Key? key,
   }) : super(key: key);
 
+  factory ColorTile.compact({
+    required MaterialColor color,
+    bool isActive = false,
+    void Function()? onPressed,
+    String? tooltip = "",
+    Key? key,
+  }) {
+    return ColorTile(
+      color: color,
+      isActive: isActive,
+      onPressed: onPressed,
+      tooltip: tooltip,
+      isCompact: true,
+      key: key,
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+
+    final lead = Container(
+      height: 40,
+      width: 40,
+      decoration: BoxDecoration(
+        border: isActive
+            ? Border.fromBorderSide(
+                BorderSide(
+                  color: color[100]!,
+                  width: 4,
+                ),
+              )
+            : null,
+        borderRadius: BorderRadius.circular(15),
+        color: color,
+      ),
+    );
+
+    if (isCompact) {
+      return Tooltip(
+        message: tooltip,
+        child: GestureDetector(
+          onTap: onPressed,
+          child: lead,
+        ),
+      );
+    }
+
+    final colorScheme = ColorScheme.fromSwatch(primarySwatch: color);
+
+    final palette = [
+      colorScheme.primary,
+      colorScheme.inversePrimary,
+      colorScheme.primaryContainer,
+      colorScheme.secondary,
+      colorScheme.secondaryContainer,
+      colorScheme.background,
+      colorScheme.surface,
+      colorScheme.surfaceVariant,
+      colorScheme.onPrimary,
+      colorScheme.onSurface,
+    ];
+
     return Tooltip(
       message: tooltip,
       child: GestureDetector(
         onTap: onPressed,
-        child: Container(
+        child: Column(
-          height: 50,
+          crossAxisAlignment: CrossAxisAlignment.start,
-          width: 50,
+          children: [
-          decoration: BoxDecoration(
+            Row(
-            border: isActive
+              children: [
-                ? const Border.fromBorderSide(
+                lead,
-                    BorderSide(color: Colors.black, width: 5),
+                const SizedBox(width: 10),
-                  )
+                Text(
-                : null,
+                  tooltip!,
-            shape: BoxShape.circle,
+                  style: theme.textTheme.bodyLarge?.copyWith(
-            color: color,
+                    color: theme.colorScheme.primary,
-          ),
+                    fontWeight: FontWeight.w600,
+                  ),
+                ),
+              ],
+            ),
+            const SizedBox(height: 10),
+            Wrap(
+              alignment: WrapAlignment.start,
+              spacing: 10,
+              runSpacing: 10,
+              children: [
+                ...palette.map(
+                  (e) => Container(
+                    height: 20,
+                    width: 20,
+                    decoration: BoxDecoration(
+                      color: e,
+                      borderRadius: BorderRadius.circular(5),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ],
         ),
       ),
     );

lib/pages/artist/artist.dart

@@ -1,4 +1,4 @@
-import 'package:fl_query/fl_query.dart';
+import 'package:fl_query_hooks/fl_query_hooks.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
@@ -60,6 +60,8 @@ class ArtistPage extends HookConsumerWidget {
 
     final auth = ref.watch(AuthenticationNotifier.provider);
 
+    final queryClient = useQueryClient();
+
     return SafeArea(
       bottom: false,
       child: Scaffold(
@@ -172,6 +174,30 @@ class ArtistPage extends HookConsumerWidget {
                                             .artist
                                             .doIFollow(ref, artistId);
 
+                                        final followUnfollow =
+                                            useCallback(() async {
+                                          try {
+                                            isFollowingQuery.data!
+                                                ? await spotify.me.unfollow(
+                                                    FollowingType.artist,
+                                                    [artistId],
+                                                  )
+                                                : await spotify.me.follow(
+                                                    FollowingType.artist,
+                                                    [artistId],
+                                                  );
+                                            await isFollowingQuery.refresh();
+
+                                            queryClient
+                                                .refreshInfiniteQueryAllPages(
+                                                    "user-following-artists");
+                                          } finally {
+                                            queryClient.refreshQuery(
+                                              "user-follows-artists-query/$artistId",
+                                            );
+                                          }
+                                        }, [isFollowingQuery]);
+
                                         if (isFollowingQuery.isLoading ||
                                             !isFollowingQuery.hasData) {
                                           return const SizedBox(
@@ -181,36 +207,16 @@ class ArtistPage extends HookConsumerWidget {
                                           );
                                         }
 
-                                        final queryBowl =
+                                        if (isFollowingQuery.data!) {
-                                            QueryClient.of(context);
+                                          return OutlinedButton(
+                                            onPressed: followUnfollow,
+                                            child: const Text("Following"),
+                                          );
+                                        }
 
                                         return FilledButton(
-                                          onPressed: () async {
+                                          onPressed: followUnfollow,
-                                            try {
+                                          child: const Text("Follow"),
-                                              isFollowingQuery.data!
-                                                  ? await spotify.me.unfollow(
-                                                      FollowingType.artist,
-                                                      [artistId],
-                                                    )
-                                                  : await spotify.me.follow(
-                                                      FollowingType.artist,
-                                                      [artistId],
-                                                    );
-                                              await isFollowingQuery.refresh();
-
-                                              queryBowl
-                                                  .refreshInfiniteQueryAllPages(
-                                                      "user-following-artists");
-                                            } finally {
-                                              QueryClient.of(context).refreshQuery(
-                                                  "user-follows-artists-query/$artistId");
-                                            }
-                                          },
-                                          child: Text(
-                                            isFollowingQuery.data!
-                                                ? "Following"
-                                                : "Follow",
-                                          ),
                                         );
                                       },
                                     ),

lib/pages/settings/settings.dart

@@ -67,17 +67,13 @@ class SettingsPage extends HookConsumerWidget {
                           SpotubeIcons.login,
                           color: theme.colorScheme.primary,
                         ),
-                        title: SizedBox(
+                        title: Align(
-                          height: 50,
+                          alignment: Alignment.centerLeft,
-                          width: 200,
+                          child: AutoSizeText(
-                          child: Align(
+                            "Login with your Spotify account",
-                            alignment: Alignment.centerLeft,
+                            maxLines: 1,
-                            child: AutoSizeText(
+                            style: TextStyle(
-                              "Login with your Spotify account",
+                              color: theme.colorScheme.primary,
-                              maxLines: 1,
-                              style: TextStyle(
-                                color: theme.colorScheme.primary,
-                              ),
                             ),
                           ),
                         ),
@@ -197,7 +193,7 @@ class SettingsPage extends HookConsumerWidget {
                         horizontal: 15,
                         vertical: 5,
                       ),
-                      trailing: ColorTile(
+                      trailing: ColorTile.compact(
                         color: preferences.accentColorScheme,
                         onPressed: pickColorScheme(ColorSchemeType.accent),
                         isActive: true,

linux/flutter/generated_plugin_registrant.cc

@@ -10,6 +10,7 @@
 #include <catcher/catcher_plugin.h>
 #include <metadata_god/metadata_god_plugin.h>
 #include <screen_retriever/screen_retriever_plugin.h>
+#include <system_theme/system_theme_plugin.h>
 #include <url_launcher_linux/url_launcher_plugin.h>
 #include <window_manager/window_manager_plugin.h>
 #include <window_size/window_size_plugin.h>
@@ -27,6 +28,9 @@ void fl_register_plugins(FlPluginRegistry* registry) {
   g_autoptr(FlPluginRegistrar) screen_retriever_registrar =
       fl_plugin_registry_get_registrar_for_plugin(registry, "ScreenRetrieverPlugin");
   screen_retriever_plugin_register_with_registrar(screen_retriever_registrar);
+  g_autoptr(FlPluginRegistrar) system_theme_registrar =
+      fl_plugin_registry_get_registrar_for_plugin(registry, "SystemThemePlugin");
+  system_theme_plugin_register_with_registrar(system_theme_registrar);
   g_autoptr(FlPluginRegistrar) url_launcher_linux_registrar =
       fl_plugin_registry_get_registrar_for_plugin(registry, "UrlLauncherPlugin");
   url_launcher_plugin_register_with_registrar(url_launcher_linux_registrar);

linux/flutter/generated_plugins.cmake

@@ -7,6 +7,7 @@ list(APPEND FLUTTER_PLUGIN_LIST
   catcher
   metadata_god
   screen_retriever
+  system_theme
   url_launcher_linux
   window_manager
   window_size

macos/Flutter/GeneratedPluginRegistrant.swift

@@ -16,6 +16,7 @@ import path_provider_foundation
 import screen_retriever
 import shared_preferences_foundation
 import sqflite
+import system_theme
 import url_launcher_macos
 import window_manager
 import window_size
@@ -32,6 +33,7 @@ func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
   ScreenRetrieverPlugin.register(with: registry.registrar(forPlugin: "ScreenRetrieverPlugin"))
   SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))
   SqflitePlugin.register(with: registry.registrar(forPlugin: "SqflitePlugin"))
+  SystemThemePlugin.register(with: registry.registrar(forPlugin: "SystemThemePlugin"))
   UrlLauncherPlugin.register(with: registry.registrar(forPlugin: "UrlLauncherPlugin"))
   WindowManagerPlugin.register(with: registry.registrar(forPlugin: "WindowManagerPlugin"))
   WindowSizePlugin.register(with: registry.registrar(forPlugin: "WindowSizePlugin"))

pubspec.lock

@@ -1548,6 +1548,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.0.1"
+  system_theme:
+    dependency: "direct main"
+    description:
+      name: system_theme
+      sha256: "28bb63b997c252eee7fea6dc9e3528a9a6bf4b566ccbc8b49926389ca3e2c96b"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.0"
+  system_theme_web:
+    dependency: transitive
+    description:
+      name: system_theme_web
+      sha256: "7566f5a928f6d28d7a60c97bea8a851d1c6bc9b86a4df2366230a97458489219"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.0.2"
   term_glyph:
     dependency: transitive
     description:

pubspec.yaml

@@ -69,6 +69,7 @@ dependencies:
     git:
       url: https://github.com/rinukkusu/spotify-dart
       ref: 9e8ef4556942d42d74874de5491253156e7e6f43
+  system_theme: ^2.1.0
   titlebar_buttons: ^1.0.0
   tuple: ^2.0.1
   url_launcher: ^6.1.7

windows/flutter/generated_plugin_registrant.cc

@@ -11,6 +11,7 @@
 #include <metadata_god/metadata_god_plugin_c_api.h>
 #include <permission_handler_windows/permission_handler_windows_plugin.h>
 #include <screen_retriever/screen_retriever_plugin.h>
+#include <system_theme/system_theme_plugin.h>
 #include <url_launcher_windows/url_launcher_windows.h>
 #include <window_manager/window_manager_plugin.h>
 #include <window_size/window_size_plugin.h>
@@ -26,6 +27,8 @@ void RegisterPlugins(flutter::PluginRegistry* registry) {
       registry->GetRegistrarForPlugin("PermissionHandlerWindowsPlugin"));
   ScreenRetrieverPluginRegisterWithRegistrar(
       registry->GetRegistrarForPlugin("ScreenRetrieverPlugin"));
+  SystemThemePluginRegisterWithRegistrar(
+      registry->GetRegistrarForPlugin("SystemThemePlugin"));
   UrlLauncherWindowsRegisterWithRegistrar(
       registry->GetRegistrarForPlugin("UrlLauncherWindows"));
   WindowManagerPluginRegisterWithRegistrar(

windows/flutter/generated_plugins.cmake

@@ -8,6 +8,7 @@ list(APPEND FLUTTER_PLUGIN_LIST
   metadata_god
   permission_handler_windows
   screen_retriever
+  system_theme
   url_launcher_windows
   window_manager
   window_size