✨ Searchable realms

lib/screens/discovery/realms.dart

@@ -1,22 +1,62 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:gap/gap.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:island/widgets/app_scaffold.dart';
 import 'package:island/widgets/realm/realm_list.dart';
+import 'dart:async';
 
 class DiscoveryRealmsScreen extends HookConsumerWidget {
   const DiscoveryRealmsScreen({super.key});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    Timer? debounceTimer;
+    final searchController = useTextEditingController();
+    final currentQuery = useState<String?>(null);
+
     return AppScaffold(
       appBar: AppBar(title: Text('discoverRealms'.tr())),
-      body: CustomScrollView(
-        slivers: [
-          SliverGap(16),
-          SliverRealmList(),
-          SliverGap(MediaQuery.of(context).padding.bottom + 16),
+      body: Stack(
+        children: [
+          CustomScrollView(
+            slivers: [
+              SliverGap(80),
+              SliverRealmList(
+                query: currentQuery.value,
+                key: ValueKey(currentQuery.value),
+              ),
+              SliverGap(MediaQuery.of(context).padding.bottom + 16),
+            ],
+          ),
+          Positioned(
+            top: 0,
+            left: 0,
+            right: 0,
+            child: Padding(
+              padding: const EdgeInsets.all(16),
+              child: SearchBar(
+                elevation: WidgetStateProperty.all(4),
+                controller: searchController,
+                hintText: 'search'.tr(),
+                leading: const Icon(Icons.search),
+                padding: WidgetStateProperty.all(
+                  const EdgeInsets.symmetric(horizontal: 24),
+                ),
+                onChanged: (value) {
+                  if (debounceTimer?.isActive ?? false) {
+                    debounceTimer?.cancel();
+                  }
+                  debounceTimer = Timer(const Duration(milliseconds: 300), () {
+                    if (currentQuery.value != value) {
+                      currentQuery.value = value;
+                    }
+                  });
+                },
+              ),
+            ),
+          ),
         ],
       ),
     );