fix: mobile keyboard overflow

ios/Runner.xcodeproj/project.pbxproj

@@ -3,7 +3,7 @@
 	archiveVersion = 1;
 	classes = {
 	};
-	objectVersion = 70;
+	objectVersion = 54;
 	objects = {
 
 /* Begin PBXBuildFile section */

ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme

@@ -48,6 +48,7 @@
       ignoresPersistentStateOnLaunch = "NO"
       debugDocumentVersioning = "YES"
       debugServiceExtension = "internal"
+      enableGPUValidationMode = "1"
       allowLocationSimulation = "YES">
       <BuildableProductRunnable
          runnableDebuggingMode = "0">

lib/components/horizontal_playbutton_card_view/horizontal_playbutton_card_view.dart

@@ -38,6 +38,7 @@ class HorizontalPlaybuttonCardView<T> extends HookWidget {
   Widget build(BuildContext context) {
     final scrollController = useScrollController();
     final isArtist = items.every((s) => s is Artist);
+    final scale = context.theme.scaling;
 
     return Padding(
       padding: const EdgeInsets.all(8.0),
@@ -92,7 +93,7 @@ class HorizontalPlaybuttonCardView<T> extends HookWidget {
                             ),
                         isLoading: isLoadingNextPage,
                         hasReachedMax: !hasNextPage,
-                        separatorBuilder: (context, index) => const Gap(8.0),
+                        separatorBuilder: (context, index) => Gap(12 * scale),
                         itemBuilder: (context, index) {
                           final item = items[index];
 

lib/components/playbutton_view/playbutton_tile.dart

@@ -35,7 +35,7 @@ class PlaybuttonTile extends StatelessWidget {
     final cleanDescription = description?.unescapeHtml().cleanHtml() ?? "";
     final scale = context.theme.scaling;
 
-    return Button.ghost(
+    return Button(
       leading: Container(
         width: 50 * scale,
         height: 50 * scale,
@@ -47,6 +47,12 @@ class PlaybuttonTile extends StatelessWidget {
           ),
         ),
       ),
+      style: ButtonVariance.ghost.copyWith(
+        padding: (context, states, value) {
+          return (ButtonVariance.ghost.padding(context, states) as EdgeInsets)
+              .copyWith(right: 0, left: 0);
+        },
+      ),
       trailing: Row(
         mainAxisSize: MainAxisSize.min,
         children: [

lib/components/track_presentation/presentation_modifiers.dart

@@ -11,7 +11,11 @@ import 'package:spotube/extensions/constrains.dart';
 import 'package:spotube/extensions/context.dart';
 
 class TrackPresentationModifiersSection extends HookConsumerWidget {
-  const TrackPresentationModifiersSection({super.key});
+  final FocusNode? focusNode;
+  const TrackPresentationModifiersSection({
+    super.key,
+    this.focusNode,
+  });
 
   @override
   Widget build(BuildContext context, ref) {
@@ -22,11 +26,12 @@ class TrackPresentationModifiersSection extends HookConsumerWidget {
     );
 
     final controller = useTextEditingController();
+    final scale = context.theme.scaling;
 
     return LayoutBuilder(builder: (context, constrains) {
       return Padding(
         padding: EdgeInsets.symmetric(
-          horizontal: constrains.mdAndUp ? 16 : 8,
+          horizontal: (constrains.mdAndUp ? 16 : 8) * scale,
         ),
         child: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -55,11 +60,13 @@ class TrackPresentationModifiersSection extends HookConsumerWidget {
                 children: [
                   Flexible(
                     child: ConstrainedBox(
-                      constraints: const BoxConstraints(
+                      constraints: BoxConstraints(
-                        maxWidth: 320,
+                        maxWidth: 320 * scale,
+                        maxHeight: 38 * scale,
                       ),
                       child: TextField(
                         controller: controller,
+                        focusNode: focusNode,
                         leading: Icon(
                           SpotubeIcons.search,
                           color: context.theme.colorScheme.mutedForeground,

lib/components/track_presentation/track_presentation.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart' show ListTile;
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:shadcn_flutter/shadcn_flutter.dart';
 import 'package:shadcn_flutter/shadcn_flutter_extension.dart';
@@ -9,6 +10,7 @@ import 'package:spotube/components/track_presentation/presentation_top.dart';
 import 'package:spotube/components/track_presentation/presentation_modifiers.dart';
 import 'package:spotube/extensions/constrains.dart';
 import 'package:spotube/extensions/context.dart';
+import 'package:spotube/utils/platform.dart';
 
 class TrackPresentation extends HookConsumerWidget {
   final TrackPresentationOptions options;
@@ -22,6 +24,29 @@ class TrackPresentation extends HookConsumerWidget {
     final headerTextStyle = context.theme.typography.small.copyWith(
       color: context.theme.colorScheme.mutedForeground,
     );
+    final scrollController = useScrollController();
+    final focusNode = useFocusNode();
+    final scale = context.theme.scaling;
+
+    useEffect(() {
+      if (!kIsMobile) return null;
+      void listener() {
+        if (!scrollController.hasClients) return;
+
+        if (focusNode.hasFocus) {
+          scrollController.animateTo(
+            300 * scale,
+            duration: const Duration(milliseconds: 300),
+            curve: Curves.easeInOut,
+          );
+        }
+      }
+
+      focusNode.addListener(listener);
+      return () {
+        focusNode.removeListener(listener);
+      };
+    }, [focusNode, scrollController, scale]);
 
     return Data<TrackPresentationOptions>.inherit(
       data: options,
@@ -29,6 +54,7 @@ class TrackPresentation extends HookConsumerWidget {
         child: Scaffold(
           headers: const [TitleBar()],
           child: CustomScrollView(
+            controller: scrollController,
             slivers: [
               const TrackPresentationTopSection(),
               const SliverGap(16),
@@ -36,7 +62,9 @@ class TrackPresentation extends HookConsumerWidget {
                 builder: (context, constrains) {
                   return SliverList.list(
                     children: [
-                      const TrackPresentationModifiersSection(),
+                      TrackPresentationModifiersSection(
+                        focusNode: focusNode,
+                      ),
                       ListTile(
                         titleTextStyle: headerTextStyle,
                         subtitleTextStyle: headerTextStyle,

lib/main.dart

@@ -228,6 +228,12 @@ class Spotube extends HookConsumerWidget {
       ),
       materialTheme: material.ThemeData(
         splashFactory: material.NoSplash.splashFactory,
+        appBarTheme: const material.AppBarTheme(
+          surfaceTintColor: Colors.transparent,
+          scrolledUnderElevation: 0,
+          shadowColor: Colors.transparent,
+          elevation: 0,
+        ),
       ),
       themeMode: themeMode,
       shortcuts: {

lib/modules/library/user_albums.dart

@@ -50,9 +50,9 @@ class UserAlbums extends HookConsumerWidget {
     return SafeArea(
       child: Scaffold(
         child: RefreshTrigger(
-          onRefresh: () async {
+          // onRefresh: () async {
-            ref.invalidate(favoriteAlbumsProvider);
+          //   ref.invalidate(favoriteAlbumsProvider);
-          },
+          // },
           child: InterScrollbar(
             controller: controller,
             child: CustomScrollView(

lib/modules/library/user_artists.dart

@@ -55,9 +55,9 @@ class UserArtists extends HookConsumerWidget {
     return SafeArea(
       child: Scaffold(
         child: RefreshTrigger(
-          onRefresh: () async {
+          // onRefresh: () async {
-            ref.invalidate(followedArtistsProvider);
+          //   ref.invalidate(followedArtistsProvider);
-          },
+          // },
           child: InterScrollbar(
             controller: controller,
             child: Padding(

lib/modules/library/user_playlists.dart

@@ -78,9 +78,9 @@ class UserPlaylists extends HookConsumerWidget {
     }
 
     return RefreshTrigger(
-      onRefresh: () async {
+      // onRefresh: () async {
-        ref.invalidate(favoritePlaylistsProvider);
+      //   ref.invalidate(favoritePlaylistsProvider);
-      },
+      // },
       child: SafeArea(
         child: InterScrollbar(
           controller: controller,

lib/pages/lastfm_login/lastfm_login.dart

@@ -1,9 +1,10 @@
-import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
-import 'package:form_validator/form_validator.dart';
+
 import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:shadcn_flutter/shadcn_flutter.dart';
 import 'package:spotube/collections/spotube_icons.dart';
+import 'package:spotube/components/button/back_button.dart';
 import 'package:spotube/components/dialogs/prompt_dialog.dart';
 import 'package:spotube/components/titlebar/titlebar.dart';
 import 'package:spotube/extensions/context.dart';
@@ -15,31 +16,59 @@ class LastFMLoginPage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, ref) {
-    final theme = Theme.of(context);
     final router = GoRouter.of(context);
     final scrobblerNotifier = ref.read(scrobblerProvider.notifier);
 
-    final formKey = useMemoized(() => GlobalKey<FormState>(), []);
+    final usernameKey =
-    final username = useTextEditingController();
+        useMemoized(() => const FormKey<String>("username"), []);
-    final password = useTextEditingController();
+    final passwordKey =
+        useMemoized(() => const FormKey<String>("password"), []);
+
     final passwordVisible = useState(false);
 
     final isLoading = useState(false);
 
     return Scaffold(
-      appBar: const TitleBar(leading: [BackButton()]),
+      headers: const [
-      body: Center(
+        SafeArea(
-        child: ConstrainedBox(
+          child: TitleBar(
+            leading: [BackButton()],
+          ),
+        ),
+      ],
+      child: SingleChildScrollView(
+        child: Container(
           constraints: const BoxConstraints(maxWidth: 400),
+          alignment: Alignment.center,
+          padding: const EdgeInsets.all(16),
           child: Card(
-            margin: const EdgeInsets.all(8.0),
             child: Padding(
               padding: const EdgeInsets.all(16.0).copyWith(top: 8),
               child: Form(
-                key: formKey,
+                onSubmit: (context, values) async {
-                autovalidateMode: AutovalidateMode.onUserInteraction,
+                  try {
+                    isLoading.value = true;
+                    await scrobblerNotifier.login(
+                      values[usernameKey].trim(),
+                      values[passwordKey],
+                    );
+                    router.pop();
+                  } catch (e) {
+                    if (context.mounted) {
+                      showPromptDialog(
+                        context: context,
+                        title: context.l10n.error("Authentication failed"),
+                        message: e.toString(),
+                        cancelText: null,
+                      );
+                    }
+                  } finally {
+                    isLoading.value = false;
+                  }
+                },
                 child: Column(
                   mainAxisSize: MainAxisSize.min,
+                  spacing: 10,
                   children: [
                     Container(
                       decoration: BoxDecoration(
@@ -53,38 +82,35 @@ class LastFMLoginPage extends HookConsumerWidget {
                         size: 60,
                       ),
                     ),
-                    Text(
+                    const Text("last.fm").h3(),
-                      "last.fm",
-                      style: theme.textTheme.titleLarge,
-                    ),
-                    const SizedBox(height: 10),
                     Text(context.l10n.login_with_your_lastfm),
-                    const SizedBox(height: 10),
                     AutofillGroup(
                       child: Column(
+                        spacing: 10,
                         children: [
-                          TextFormField(
+                          FormField(
+                            label: Text(context.l10n.username),
+                            key: usernameKey,
+                            validator: const NotEmptyValidator(),
+                            child: TextField(
                               autofillHints: const [
                                 AutofillHints.username,
                                 AutofillHints.email,
                               ],
-                            controller: username,
+                              placeholder: Text(context.l10n.username),
-                            validator: ValidationBuilder().required().build(),
-                            decoration: InputDecoration(
-                              labelText: context.l10n.username,
                             ),
                           ),
-                          const SizedBox(height: 10),
+                          FormField(
-                          TextFormField(
+                            key: passwordKey,
+                            validator: const NotEmptyValidator(),
+                            label: Text(context.l10n.password),
+                            child: TextField(
                               autofillHints: const [
                                 AutofillHints.password,
                               ],
-                            controller: password,
-                            validator: ValidationBuilder().required().build(),
                               obscureText: !passwordVisible.value,
-                            decoration: InputDecoration(
+                              placeholder: Text(context.l10n.password),
-                              labelText: context.l10n.password,
+                              trailing: IconButton.ghost(
-                              suffixIcon: IconButton(
                                 icon: Icon(
                                   passwordVisible.value
                                       ? SpotubeIcons.eye
@@ -98,37 +124,13 @@ class LastFMLoginPage extends HookConsumerWidget {
                         ],
                       ),
                     ),
-                    const SizedBox(height: 10),
+                    FormErrorBuilder(builder: (context, errors, child) {
-                    FilledButton(
+                      return Button.primary(
-                      onPressed: isLoading.value
+                        onPressed: () => context.submitForm(),
-                          ? null
+                        enabled: errors.isEmpty && !isLoading.value,
-                          : () async {
-                              try {
-                                isLoading.value = true;
-                                if (formKey.currentState?.validate() != true) {
-                                  return;
-                                }
-                                await scrobblerNotifier.login(
-                                  username.text.trim(),
-                                  password.text,
-                                );
-                                router.pop();
-                              } catch (e) {
-                                if (context.mounted) {
-                                  showPromptDialog(
-                                    context: context,
-                                    title: context.l10n
-                                        .error("Authentication failed"),
-                                    message: e.toString(),
-                                    cancelText: null,
-                                  );
-                                }
-                              } finally {
-                                isLoading.value = false;
-                              }
-                            },
                         child: Text(context.l10n.login),
-                    ),
+                      );
+                    }),
                   ],
                 ),
               ),

lib/pages/root/root_app.dart

@@ -179,13 +179,17 @@ class RootApp extends HookConsumerWidget {
       return getSidebarTileList(context.l10n).map((s) => s.name).toList();
     }, []);
 
-    final scaffold = Scaffold(
+    final scaffold = MediaQuery.removeViewInsets(
+      context: context,
+      removeBottom: true,
+      child: Scaffold(
         footers: const [
           BottomPlayer(),
           SpotubeNavigationBar(),
         ],
         floatingFooter: true,
         child: Sidebar(child: child),
+      ),
     );
 
     if (!kIsAndroid) {

lib/pages/search/search.dart

@@ -29,13 +29,15 @@ class SearchPage extends HookConsumerWidget {
   @override
   Widget build(BuildContext context, ref) {
     final theme = Theme.of(context);
-    final searchTerm = ref.watch(searchTermStateProvider);
+    final mediaQuery = MediaQuery.sizeOf(context);
+
+    final scrollController = useScrollController();
     final controller = useSearchController();
     final focusNode = useFocusNode();
 
     final auth = ref.watch(authenticationProvider);
-    final mediaQuery = MediaQuery.of(context);
 
+    final searchTerm = ref.watch(searchTermStateProvider);
     final searchTrack = ref.watch(searchProvider(SearchType.track));
     final searchAlbum = ref.watch(searchProvider(SearchType.album));
     final searchPlaylist = ref.watch(searchProvider(SearchType.playlist));
@@ -51,35 +53,6 @@ class SearchPage extends HookConsumerWidget {
       return null;
     }, []);
 
-    final resultWidget = HookBuilder(
-      builder: (context) {
-        final controller = useScrollController();
-
-        return InterScrollbar(
-          controller: controller,
-          child: SingleChildScrollView(
-            controller: controller,
-            child: const Padding(
-              padding: EdgeInsets.symmetric(vertical: 8),
-              child: SafeArea(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    SearchTracksSection(),
-                    SearchPlaylistsSection(),
-                    Gap(20),
-                    SearchArtistsSection(),
-                    Gap(20),
-                    SearchAlbumsSection(),
-                  ],
-                ),
-              ),
-            ),
-          ),
-        );
-      },
-    );
-
     void onSubmitted(String value) {
       ref.read(searchTermStateProvider.notifier).state = value;
       if (value.trim().isEmpty) {
@@ -182,11 +155,11 @@ class SearchPage extends HookConsumerWidget {
                   Expanded(
                     child: AnimatedSwitcher(
                       duration: const Duration(milliseconds: 300),
-                      child: searchTerm.isEmpty
+                      child: switch ((searchTerm.isEmpty, isFetching)) {
-                          ? Column(
+                        (true, false) => Column(
                             children: [
                               SizedBox(
-                                  height: mediaQuery.size.height * 0.2,
+                                height: mediaQuery.height * 0.2,
                               ),
                               Icon(
                                 SpotubeIcons.web,
@@ -204,21 +177,19 @@ class SearchPage extends HookConsumerWidget {
                                 ),
                               ),
                             ],
-                            )
+                          ),
-                          : isFetching
+                        (false, true) => Container(
-                              ? Container(
                             constraints: BoxConstraints(
                               maxWidth: mediaQuery.lgAndUp
-                                        ? mediaQuery.size.width * 0.5
+                                  ? mediaQuery.width * 0.5
-                                        : mediaQuery.size.width,
+                                  : mediaQuery.width,
                             ),
                             padding: const EdgeInsets.symmetric(
                               horizontal: 20,
                             ),
                             child: Column(
                               mainAxisAlignment: MainAxisAlignment.center,
-                                    crossAxisAlignment:
+                              crossAxisAlignment: CrossAxisAlignment.center,
-                                        CrossAxisAlignment.center,
                               children: [
                                 Text(
                                   context.l10n.crunching_results,
@@ -233,8 +204,31 @@ class SearchPage extends HookConsumerWidget {
                                 const LinearProgressIndicator(),
                               ],
                             ),
-                                )
+                          ),
-                              : resultWidget,
+                        _ => InterScrollbar(
+                            controller: scrollController,
+                            child: SingleChildScrollView(
+                              controller: scrollController,
+                              child: const Padding(
+                                padding: EdgeInsets.symmetric(vertical: 8),
+                                child: SafeArea(
+                                  child: Column(
+                                    crossAxisAlignment:
+                                        CrossAxisAlignment.start,
+                                    children: [
+                                      SearchTracksSection(),
+                                      SearchPlaylistsSection(),
+                                      Gap(20),
+                                      SearchArtistsSection(),
+                                      Gap(20),
+                                      SearchAlbumsSection(),
+                                    ],
+                                  ),
+                                ),
+                              ),
+                            ),
+                          ),
+                      },
                     ),
                   ),
                 ],