From 51e427e83c65d2649868cdba25a779fcd48bad59 Mon Sep 17 00:00:00 2001
From: Kingkor Roy Tirtho <krtirtho@gmail.com>
Date: Sat, 10 Jun 2023 22:39:12 +0600
Subject: [PATCH] refactor: use new search for filter text field

---
 lib/components/library/user_albums.dart    |  8 +++-----
 lib/components/library/user_artists.dart   |  8 +++-----
 lib/components/library/user_playlists.dart |  8 +++-----
 lib/themes/theme.dart                      | 16 ++++++++++++++++
 4 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/lib/components/library/user_albums.dart b/lib/components/library/user_albums.dart
index 997d4536..8553a8c3 100644
--- a/lib/components/library/user_albums.dart
+++ b/lib/components/library/user_albums.dart
@@ -62,12 +62,10 @@ class UserAlbums extends HookConsumerWidget {
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                TextField(
+                SearchBar(
                   onChanged: (value) => searchText.value = value,
-                  decoration: InputDecoration(
-                    prefixIcon: const Icon(SpotubeIcons.filter),
-                    hintText: context.l10n.filter_albums,
-                  ),
+                  leading: const Icon(SpotubeIcons.filter),
+                  hintText: context.l10n.filter_albums,
                 ),
                 const SizedBox(height: 20),
                 AnimatedCrossFade(
diff --git a/lib/components/library/user_artists.dart b/lib/components/library/user_artists.dart
index bd84fa92..c90d8010 100644
--- a/lib/components/library/user_artists.dart
+++ b/lib/components/library/user_artists.dart
@@ -53,12 +53,10 @@ class UserArtists extends HookConsumerWidget {
           padding: const EdgeInsets.symmetric(horizontal: 8.0),
           child: ColoredBox(
             color: theme.scaffoldBackgroundColor,
-            child: TextField(
+            child: SearchBar(
               onChanged: (value) => searchText.value = value,
-              decoration: InputDecoration(
-                prefixIcon: const Icon(SpotubeIcons.filter),
-                hintText: context.l10n.filter_artist,
-              ),
+              leading: const Icon(SpotubeIcons.filter),
+              hintText: context.l10n.filter_artist,
             ),
           ),
         ),
diff --git a/lib/components/library/user_playlists.dart b/lib/components/library/user_playlists.dart
index bf5ae918..86de8f42 100644
--- a/lib/components/library/user_playlists.dart
+++ b/lib/components/library/user_playlists.dart
@@ -77,12 +77,10 @@ class UserPlaylists extends HookConsumerWidget {
             children: [
               Padding(
                 padding: const EdgeInsets.all(10),
-                child: TextField(
+                child: SearchBar(
                   onChanged: (value) => searchText.value = value,
-                  decoration: InputDecoration(
-                    hintText: context.l10n.filter_playlists,
-                    prefixIcon: const Icon(SpotubeIcons.filter),
-                  ),
+                  hintText: context.l10n.filter_playlists,
+                  leading: const Icon(SpotubeIcons.filter),
                 ),
               ),
               AnimatedCrossFade(
diff --git a/lib/themes/theme.dart b/lib/themes/theme.dart
index 036af9a7..7f107d56 100644
--- a/lib/themes/theme.dart
+++ b/lib/themes/theme.dart
@@ -49,5 +49,21 @@ ThemeData theme(Color seed, Brightness brightness) {
       contentTextStyle: TextStyle(color: scheme.surface),
     ),
     sliderTheme: SliderThemeData(overlayShape: SliderComponentShape.noOverlay),
+    searchBarTheme: SearchBarThemeData(
+      constraints: const BoxConstraints(maxWidth: double.infinity),
+      backgroundColor: MaterialStatePropertyAll(
+        Color.lerp(
+          scheme.surfaceVariant,
+          scheme.surface,
+          brightness == Brightness.light ? .9 : .7,
+        ),
+      ),
+      elevation: const MaterialStatePropertyAll(0),
+      shape: MaterialStatePropertyAll(
+        RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(10),
+        ),
+      ),
+    ),
   );
 }