refactor: use new search for filter text field

lib/components/library/user_albums.dart

@@ -62,13 +62,11 @@ class UserAlbums extends HookConsumerWidget {
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                TextField(
+                SearchBar(
                   onChanged: (value) => searchText.value = value,
-                  decoration: InputDecoration(
-                    prefixIcon: const Icon(SpotubeIcons.filter),
+                  leading: const Icon(SpotubeIcons.filter),
                   hintText: context.l10n.filter_albums,
                 ),
-                ),
                 const SizedBox(height: 20),
                 AnimatedCrossFade(
                   duration: const Duration(milliseconds: 300),

lib/components/library/user_artists.dart

@@ -53,16 +53,14 @@ 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),
+              leading: const Icon(SpotubeIcons.filter),
               hintText: context.l10n.filter_artist,
             ),
           ),
         ),
       ),
-      ),
       backgroundColor: theme.scaffoldBackgroundColor,
       body: artistQuery.data?.isEmpty == true
           ? Padding(

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),
-                  ),
+                  leading: const Icon(SpotubeIcons.filter),
                 ),
               ),
               AnimatedCrossFade(

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),
+        ),
+      ),
+    ),
   );
 }