feat: compact search bar for genres and user_local_tracks page

lib/components/library/user_local_tracks.dart

@@ -13,6 +13,7 @@ import 'package:path_provider/path_provider.dart';
 import 'package:permission_handler/permission_handler.dart';
 import 'package:platform_ui/platform_ui.dart';
 import 'package:spotify/spotify.dart';
+import 'package:spotube/components/shared/compact_search.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_track_tile.dart';
 import 'package:spotube/components/shared/sort_tracks_dropdown.dart';
 import 'package:spotube/components/shared/track_table/track_tile.dart';
@@ -179,19 +180,13 @@ class UserLocalTracks extends HookConsumerWidget {
       [],
     );
 
-    var searchbar = PlatformTextField(
+    var searchbar = CompactSearch(
       onChanged: (value) => searchText.value = value,
       placeholder: "Search local tracks...",
-      prefixIcon: Icons.search_rounded,
     );
 
     return Column(
       children: [
-        if (breakpoint <= Breakpoints.md)
-          Padding(
-            padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16),
-            child: searchbar,
-          ),
         Padding(
           padding: const EdgeInsets.all(8.0),
           child: Row(
@@ -220,13 +215,9 @@ class UserLocalTracks extends HookConsumerWidget {
                   ],
                 ),
               ),
-              const SizedBox(width: 10),
-              if (breakpoint > Breakpoints.md)
-                ConstrainedBox(
-                  constraints: const BoxConstraints(maxWidth: 300),
-                  child: searchbar,
-                ),
               const Spacer(),
+              searchbar,
+              const SizedBox(width: 10),
               SortTracksDropdown(
                 value: sortBy.value,
                 onChanged: (value) {

lib/components/shared/compact_search.dart

@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:platform_ui/platform_ui.dart';
+import 'package:popover/popover.dart';
+
+class CompactSearch extends HookWidget {
+  final ValueChanged<String>? onChanged;
+  final String placeholder;
+  final IconData icon;
+
+  const CompactSearch({
+    Key? key,
+    this.onChanged,
+    this.placeholder = "Search...",
+    this.icon = Icons.search,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return PlatformIconButton(
+      onPressed: () {
+        showPopover(
+          context: context,
+          backgroundColor: PlatformTheme.of(context).secondaryBackgroundColor!,
+          transitionDuration: const Duration(milliseconds: 100),
+          barrierColor: Colors.transparent,
+          bodyBuilder: (context) {
+            return Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: PlatformTextField(
+                autofocus: true,
+                onChanged: onChanged,
+                placeholder: placeholder,
+                prefixIcon: icon,
+              ),
+            );
+          },
+          height: 60,
+        );
+      },
+      tooltip: placeholder,
+      icon: Icon(icon),
+    );
+  }
+}

lib/pages/genre/genres.dart

@@ -7,6 +7,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:platform_ui/platform_ui.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/components/genre/category_card.dart';
+import 'package:spotube/components/shared/compact_search.dart';
 import 'package:spotube/components/shared/shimmers/shimmer_categories.dart';
 import 'package:spotube/components/shared/page_window_title_bar.dart';
 import 'package:spotube/components/shared/waypoint.dart';
@@ -84,21 +85,11 @@ class GenrePage extends HookConsumerWidget {
         [categoriesQuery.pages, searchText.value],
       );
 
-      final searchbar = Container(
+      final searchbar = CompactSearch(
-        constraints: const BoxConstraints(maxWidth: 300, maxHeight: 50),
+        onChanged: (value) {
-        padding: const EdgeInsets.symmetric(vertical: 4),
+          searchText.value = value;
-        child: PlatformTextField(
+        },
-          placeholder: "Filter categories or genres...",
+        placeholder: "Filter categories or genres...",
-          prefixIcon: Icons.search_rounded,
-          padding: PlatformProperty.only(
-            android: const EdgeInsets.all(0),
-            linux: const EdgeInsets.all(0),
-            other: null,
-          ).resolve(platform ?? Theme.of(context).platform),
-          onChanged: (value) {
-            searchText.value = value;
-          },
-        ),
       );
 
       final list = Waypoint(
@@ -122,20 +113,18 @@ class GenrePage extends HookConsumerWidget {
       );
       return PlatformScaffold(
         appBar: PageWindowTitleBar(
-          titleWidth: 300,
+          actions: [searchbar, const SizedBox(width: 10)],
-          centerTitle: true,
-          center: searchbar,
         ),
         backgroundColor: PlatformProperty.all(
           PlatformTheme.of(context).scaffoldBackgroundColor!,
         ),
-        body: platform == TargetPlatform.windows && kIsDesktop
+        body: (platform == TargetPlatform.windows && kIsDesktop) || kIsMobile
             ? Stack(
                 children: [
                   Positioned.fill(child: list),
                   Positioned(
-                    top: 5,
+                    top: 10,
-                    right: 10,
+                    right: 20,
                     child: searchbar,
                   ),
                 ],