From c343ccc2932868e3c1205d8cc625a9dfe9d78707 Mon Sep 17 00:00:00 2001
From: Kingkor Roy Tirtho <krtirtho@gmail.com>
Date: Fri, 6 Jan 2023 21:16:54 +0600
Subject: [PATCH] feat: compact search bar for genres and user_local_tracks
 page

---
 lib/components/library/user_local_tracks.dart | 17 ++-----
 lib/components/shared/compact_search.dart     | 45 +++++++++++++++++++
 lib/pages/genre/genres.dart                   | 31 +++++--------
 3 files changed, 59 insertions(+), 34 deletions(-)
 create mode 100644 lib/components/shared/compact_search.dart

diff --git a/lib/components/library/user_local_tracks.dart b/lib/components/library/user_local_tracks.dart
index 845dc2620..0ddb0e811 100644
--- a/lib/components/library/user_local_tracks.dart
+++ b/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) {
diff --git a/lib/components/shared/compact_search.dart b/lib/components/shared/compact_search.dart
new file mode 100644
index 000000000..39e41257f
--- /dev/null
+++ b/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),
+    );
+  }
+}
diff --git a/lib/pages/genre/genres.dart b/lib/pages/genre/genres.dart
index 74f25ce1e..06bb58793 100644
--- a/lib/pages/genre/genres.dart
+++ b/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(
-        constraints: const BoxConstraints(maxWidth: 300, maxHeight: 50),
-        padding: const EdgeInsets.symmetric(vertical: 4),
-        child: PlatformTextField(
-          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 searchbar = CompactSearch(
+        onChanged: (value) {
+          searchText.value = value;
+        },
+        placeholder: "Filter categories or genres...",
       );
 
       final list = Waypoint(
@@ -122,20 +113,18 @@ class GenrePage extends HookConsumerWidget {
       );
       return PlatformScaffold(
         appBar: PageWindowTitleBar(
-          titleWidth: 300,
-          centerTitle: true,
-          center: searchbar,
+          actions: [searchbar, const SizedBox(width: 10)],
         ),
         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,
-                    right: 10,
+                    top: 10,
+                    right: 20,
                     child: searchbar,
                   ),
                 ],