Cambios correspondientes a la primera devolucion

refactor: eliminar estilos que no seguían la guía de diseño

src/lib/components/TablaUsuarios.svelte

@@ -16,12 +16,7 @@
 	import TooltipTrigger from './ui/tooltip/tooltip-trigger.svelte';
 	import TooltipContent from './ui/tooltip/tooltip-content.svelte';
 	import RecuperarContraseña from './admin/RecuperarContraseña.svelte';
-	import { Dialog } from './ui/dialog';
-	import DialogContent from './ui/dialog/dialog-content.svelte';
 	import ModificarUsuario from './admin/ModificarUsuario.svelte';
-	import { fade } from 'svelte/transition';
-	import type { Unsubscriber } from 'svelte/store';
-	import Input from './ui/input/input.svelte';
 	import Trash_2 from '@lucide/svelte/icons/trash-2';
 	import BorrarUsuario from './BorrarUsuario.svelte';
 	import InputGroup from './ui/input-group/input-group.svelte';
@@ -30,6 +25,7 @@
 	import AgregarUsuario from './admin/AgregarUsuario.svelte';
 	import DarAdmin from './admin/DarAdmin.svelte';
 	import { busquedaAdminUsuarios } from '@/hooks/busquedaAdminUsuarios';
+	import { invalidate, replaceState } from '$app/navigation';
 
 	interface Props {
 		usuarios: UserResponseDto[];
@@ -38,7 +34,17 @@
 
 	let { usuarios = $bindable(), hayMas }: Props = $props();
 
-	let hayMass = $state(hayMas);
+	let paginaActual = $derived.by(() => {
+		const url = new URL(window.location.href);
+		return Number(url.searchParams.get('p')) || 1;
+	});
+	let search = $derived.by(() => {
+		const url = new URL(window.location.href);
+		let ret = url.searchParams.get('q') || '';
+		return ret;
+	});
+	let hayMass = $derived(hayMas);
+
 	let open = $state(false);
 	let openModificarUsuario = $state(false);
 	let openDarAdmin = $state(false);
@@ -50,13 +56,11 @@
 	let usuarioModificar: UserResponseDto | null = $state(null);
 	let usuarioDarAdmin: UserResponseDto | null = $state(null);
 
-	let search = $state('');
-
 	type SortKey = 'username' | 'displayName' | 'postsCount' | 'createdAt';
 	let sortBy = $state<SortKey | null>(null);
 	let sortDirection = $state<'asc' | 'desc'>('asc');
 
-	let usuariosFiltrados = $state(usuarios);
+	let usuariosFiltrados = $derived(usuarios);
 
 	function ordenarPor(campo: SortKey) {
 		if (sortBy === campo) {
@@ -100,11 +104,17 @@
 		}
 
 		timeoutId = setTimeout(async () => {
-			if (search === '') {
+			const url = new URL(window.location.href);
-				search = '';
+			if (!search.trim()) {
+				url.searchParams.delete('q');
+			} else {
+				url.searchParams.set('q', search);
 			}
+			replaceState(url, {});
+
 			let ret = await busquedaAdminUsuarios(search, ITEMS_POR_PAGINA, paginaActual);
 			usuariosFiltrados = ret.usuarios;
+			// invalidate('admin:load');
 			hayMass = ret.hayMas;
 		}, 200);
 
@@ -114,8 +124,6 @@
 	}
 	const ITEMS_POR_PAGINA = 5;
 
-	let paginaActual = $state(1);
-
 	// const usuariosPaginados = $derived(
 	// 	usuariosFiltrados.slice((paginaActual - 1) * ITEMS_POR_PAGINA, paginaActual * ITEMS_POR_PAGINA)
 	// );
@@ -250,7 +258,9 @@
 	<Button
 		disabled={paginaActual === 1}
 		onclick={() => {
-			paginaActual--;
+			const url = new URL(window.location.href);
+			url.searchParams.set('p', String(--paginaActual));
+			replaceState(url, {});
 			buscarUsuarios();
 		}}
 		variant="secondary"
@@ -261,7 +271,9 @@
 	<Button
 		disabled={!hayMass}
 		onclick={() => {
-			paginaActual++;
+			const url = new URL(window.location.href);
+			url.searchParams.set('p', String(++paginaActual));
+			replaceState(url, {});
 			buscarUsuarios();
 		}}
 		variant="secondary">Siguiente</Button

src/lib/components/admin/DarAdmin.svelte

@@ -30,13 +30,7 @@
 		}}
 	>
 		<DialogContent>
-			<div
+			{mensajeResultado}
-				class={esExitoso
-					? 'rounded border border-green-400 bg-green-100/10 px-4 py-3 text-green-700'
-					: 'rounded border border-red-400 bg-red-100/10 px-4 py-3 text-red-700'}
-			>
-				{mensajeResultado}
-			</div>
 		</DialogContent>
 	</Dialog>
 {/if}

src/lib/components/admin/ModificarUsuario.svelte

@@ -10,6 +10,7 @@
 	import Label from '../ui/label/label.svelte';
 	import Spinner from '../ui/spinner/spinner.svelte';
 	import { updateUsuario } from '@/hooks/updateUsuario';
+	import { invalidate } from '$app/navigation';
 
 	interface Prop {
 		open: boolean;
@@ -38,6 +39,7 @@
 			error = ret;
 		} else {
 			usuario!.displayName = ret.displayName;
+			invalidate('admin:load');
 			open = false;
 		}
 		cargando = false;

src/lib/hooks/busquedaAdminUsuarios.ts

@@ -2,9 +2,10 @@ import { apiBase } from '@/stores/url';
 import { sesionStore } from '@/stores/usuario';
 import { get } from 'svelte/store';
 
-export async function busquedaAdminUsuarios(q: string, limit = 5, page = 1) {
+export async function busquedaAdminUsuarios(q: string, limit = 5, page = 1, fetch2?: Function) {
 	try {
-		const response = await fetch(
+		const fetchFn = fetch2 ? fetch2 : fetch;
+		const response = await fetchFn(
 			get(apiBase) +
 				`/api/admin/users${q ? `?q=${q}` : ''}${q ? '&' : '?'}page=${page}&pageSize=${limit}`,
 			{

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	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 TablaUsuarios from '@/components/TablaUsuarios.svelte';
 	import CardTitle from '@/components/ui/card/card-title.svelte';
 	import CardHeader from '@/components/ui/card/card-header.svelte';
@@ -9,7 +8,7 @@
 
 	interface Prop {
 		data: {
-			usuarios?: UserResponseDto[];
+			usuarios: UserResponseDto[];
 			hayMas: boolean;
 			error: boolean;
 		};
@@ -29,11 +28,7 @@
 				</CardTitle>
 			</CardHeader>
 			<CardContent>
-				{#if data.usuarios?.length === 0}
+				<TablaUsuarios usuarios={data.usuarios} hayMas={data.hayMas}></TablaUsuarios>
-					<CardDescription>No hay usuarios que mostar</CardDescription>
-				{:else}
-					<TablaUsuarios usuarios={data.usuarios || []} hayMas={data.hayMas}></TablaUsuarios>
-				{/if}
 			</CardContent>
 		</Card>
 	</div>

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

@@ -1,19 +1,27 @@
+import { busquedaAdminUsuarios } from '@/hooks/busquedaAdminUsuarios.js';
 import type { PageLoad } from './$types.js';
 import { fetchUsuariosAdmin } from '@/hooks/UsuariosAdmin.js';
 
 export const ssr = false;
 
-export const load: PageLoad = async ({ depends }) => {
+export const load: PageLoad = async ({ depends, fetch }) => {
 	depends('admin:load');
-	const result = await fetchUsuariosAdmin(1, 5);
+	let url = new URL(location.href);
+	let query = url.searchParams.get('q') ?? '';
+	let page = Number(url.searchParams.get('p'));
+	if (isNaN(page) || page < 1) {
+		page = 1;
+	}
+
+	const result = await busquedaAdminUsuarios(query, 5, page, fetch);
 
 	if (result.error) {
 		return { error: true };
 	}
 
 	return {
-		usuarios: result.ret?.usuarios,
+		usuarios: result.usuarios,
-		hayMas: result.ret?.hayMas,
+		hayMas: result.hayMas,
 		error: false
 	};
 };