añadido soporte para mandar una query al back

src/lib/components/TablaUsuarios.svelte

@@ -29,6 +29,7 @@
 	import InputGroupInput from './ui/input-group/input-group-input.svelte';
 	import AgregarUsuario from './admin/AgregarUsuario.svelte';
 	import DarAdmin from './admin/DarAdmin.svelte';
+	import { busquedaAdminUsuarios } from '@/hooks/busquedaAdminUsuarios';
 
 	interface Props {
 		usuarios: UserResponseDto[];
@@ -43,12 +44,8 @@
 	let opencrearUsuario = $state(false);
 
 	let usuarioBorrar: UserResponseDto | null = $state(null);
-
-	//si ponia contraseña en español quedaba muy largo el nombre
 	let usuarioCambioPass: UserResponseDto | null = $state(null);
-
 	let usuarioModificar: UserResponseDto | null = $state(null);
-
 	let usuarioDarAdmin: UserResponseDto | null = $state(null);
 
 	let search = $state('');
@@ -57,6 +54,8 @@
 	let sortBy = $state<SortKey | null>(null);
 	let sortDirection = $state<'asc' | 'desc'>('asc');
 
+	let usuariosFiltrados = $state(usuarios);
+
 	function ordenarPor(campo: SortKey) {
 		if (sortBy === campo) {
 			sortDirection = sortDirection === 'asc' ? 'desc' : 'asc';
@@ -64,38 +63,27 @@
 			sortBy = campo;
 			sortDirection = 'asc';
 		}
+		usuariosFiltrados = usuariosFiltrados.toSorted((a, b) => {
+			if (!sortBy) return 0;
+
+			const key: SortKey = sortBy;
+
+			if (key === 'createdAt') {
+				const ta = new Date(a.createdAt).getTime();
+				const tb = new Date(b.createdAt).getTime();
+				return sortDirection === 'asc' ? ta - tb : tb - ta;
+			}
+
+			if (key === 'postsCount') {
+				return sortDirection === 'asc' ? a.postsCount - b.postsCount : b.postsCount - a.postsCount;
+			}
+
+			const sa = a[key].toString().toLowerCase();
+			const sb = b[key].toString().toLowerCase();
+			return sortDirection === 'asc' ? sa.localeCompare(sb) : sb.localeCompare(sa);
+		});
 	}
 
-	let usuariosFiltrados = $derived(
-		usuarios
-			.filter(
-				(u) =>
-					u.username.toLowerCase().startsWith(search.toLowerCase()) ||
-					u.displayName.toLowerCase().startsWith(search.toLowerCase())
-			)
-			.toSorted((a, b) => {
-				if (!sortBy) return 0;
-
-				const key: SortKey = sortBy;
-
-				if (key === 'createdAt') {
-					const ta = new Date(a.createdAt).getTime();
-					const tb = new Date(b.createdAt).getTime();
-					return sortDirection === 'asc' ? ta - tb : tb - ta;
-				}
-
-				if (key === 'postsCount') {
-					return sortDirection === 'asc'
-						? a.postsCount - b.postsCount
-						: b.postsCount - a.postsCount;
-				}
-
-				const sa = a[key].toString().toLowerCase();
-				const sb = b[key].toString().toLowerCase();
-				return sortDirection === 'asc' ? sa.localeCompare(sb) : sb.localeCompare(sa);
-			})
-	);
-
 	function getSortIcon(campo: SortKey) {
 		if (sortBy !== campo) return '';
 		return sortDirection === 'asc' ? '↑' : '↓';
@@ -122,12 +110,36 @@
 	}
 
 	// $inspect(usuarios);
+	let timeoutId: ReturnType<typeof setTimeout> | number | undefined;
+
+	function buscarUsuarios() {
+		if (timeoutId) {
+			clearTimeout(timeoutId);
+		}
+
+		timeoutId = setTimeout(async () => {
+			if (search === '') {
+				usuariosFiltrados = usuarios;
+				return;
+			}
+			usuariosFiltrados = await busquedaAdminUsuarios(search);
+		}, 200);
+
+		return () => {
+			if (timeoutId) clearTimeout(timeoutId);
+		};
+	}
 </script>
 
 <div class="mb-4 flex gap-2">
 	<InputGroup>
 		<InputGroupAddon align="inline-start"><Search></Search></InputGroupAddon>
-		<InputGroupInput type="text" placeholder="Buscar usuario..." bind:value={search} />
+		<InputGroupInput
+			type="text"
+			placeholder="Buscar usuario..."
+			bind:value={search}
+			oninput={() => buscarUsuarios()}
+		/>
 	</InputGroup>
 	<Button
 		onclick={() => (opencrearUsuario = !opencrearUsuario)}

src/lib/hooks/busquedaAdminUsuarios.ts

@@ -0,0 +1,21 @@
+import { apiBase } from '@/stores/url';
+import { sesionStore } from '@/stores/usuario';
+import { get } from 'svelte/store';
+
+export async function busquedaAdminUsuarios(q: string) {
+	try {
+		const response = await fetch(get(apiBase) + '/api/admin/users?q=' + q, {
+			method: 'GET',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${get(sesionStore)?.accessToken}`
+			}
+		});
+		if (response.ok) {
+			return await response.json();
+		}
+		return [];
+	} catch {
+		return [];
+	}
+}

src/routes/(privado)/admin/+page.svelte

@@ -2,7 +2,6 @@
 	import CardContent from '@/components/ui/card/card-content.svelte';
 	import Card from '@/components/ui/card/card.svelte';
 	import CardDescription from '@/components/ui/card/card-description.svelte';
-	import { page } from '$app/state';
 	import TablaUsuarios from '@/components/TablaUsuarios.svelte';
 	import CardTitle from '@/components/ui/card/card-title.svelte';
 	import CardHeader from '@/components/ui/card/card-header.svelte';