From 7bbaccfdb83337373cb583348c5ea5a047520963 Mon Sep 17 00:00:00 2001
From: "Carlos (Almeira)" <carlos@almeira.com.co>
Date: Mon, 30 Mar 2026 10:21:13 -0500
Subject: [PATCH] feat: universalize global media search across all selection
 components

---
 src/components/dashboard/MediaPickerMini.tsx | 29 ++++++++++++++------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/dashboard/MediaPickerMini.tsx b/src/components/dashboard/MediaPickerMini.tsx
index afa29e2..24fdea5 100644
--- a/src/components/dashboard/MediaPickerMini.tsx
+++ b/src/components/dashboard/MediaPickerMini.tsx
@@ -24,17 +24,23 @@ export const MediaPickerMini = ({ value, onChange, label }: MediaPickerMiniProps
     }
   }, [isOpen]);
 
-  const fetchMedia = async () => {
+  const fetchMedia = async (search = '') => {
     setIsLoading(true);
     try {
       // We use the client-side databases instance for browsing media
+      const queries = [
+          Query.limit(20), // Standard limit for preview
+          Query.orderDesc('$createdAt')
+      ];
+
+      if (search) {
+        queries.push(Query.contains('titulo', search));
+      }
+
       const res = await databases.listDocuments(
         APPWRITE_ALMEIRA_CONFIG.databaseId,
         'media',
-        [
-            Query.limit(100),
-            Query.orderDesc('$createdAt')
-        ]
+        queries
       );
       setMediaItems(res.documents);
     } catch (error) {
@@ -44,13 +50,20 @@ export const MediaPickerMini = ({ value, onChange, label }: MediaPickerMiniProps
     }
   };
 
+  // Debounced search
+  useEffect(() => {
+    if (!isOpen) return;
+    const timer = setTimeout(() => {
+      fetchMedia(searchTerm);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [searchTerm, isOpen]);
+
   const getImageUrl = (fileId: string) => {
     return `${endpoint}/storage/buckets/media/files/${fileId}/view?project=${projectId}&width=200&height=200&gravity=center`;
   };
 
-  const filteredItems = mediaItems.filter(item => 
-    item.titulo.toLowerCase().includes(searchTerm.toLowerCase())
-  );
+  const filteredItems = mediaItems;
 
   return (
     <div className="space-y-2">