cocinada interfaz del dar admin

src/lib/components/TablaUsuarios.svelte

@@ -9,6 +9,7 @@
 	import Button from './ui/button/button.svelte';
 	import KeyIcon from '@lucide/svelte/icons/key';
 	import UserPen from '@lucide/svelte/icons/user-pen';
+	import Shield from '@lucide/svelte/icons/shield';
 	import Search from '@lucide/svelte/icons/search';
 	import Plus from '@lucide/svelte/icons/plus';
 	import { Tooltip } from './ui/tooltip';
@@ -27,6 +28,7 @@
 	import InputGroupAddon from './ui/input-group/input-group-addon.svelte';
 	import InputGroupInput from './ui/input-group/input-group-input.svelte';
 	import AgregarUsuario from './admin/AgregarUsuario.svelte';
+	import DarAdmin from './admin/DarAdmin.svelte';
 
 	interface Props {
 		usuarios: UserResponseDto[];
@@ -36,8 +38,10 @@
 
 	let open = $state(false);
 	let openModificarUsuario = $state(false);
-
+	let openDarAdmin = $state(false);
 	let openBorrar = $state(false);
+	let opencrearUsuario = $state(false);
+
 	let usuarioBorrar: UserResponseDto | null = $state(null);
 
 	//si ponia contraseña en español quedaba muy largo el nombre
@@ -45,6 +49,8 @@
 
 	let usuarioModificar: UserResponseDto | null = $state(null);
 
+	let usuarioDarAdmin: UserResponseDto | null = $state(null);
+
 	let search = $state('');
 
 	type SortKey = 'username' | 'displayName' | 'postsCount' | 'createdAt';
@@ -109,8 +115,12 @@
 		openBorrar = true;
 		usuarioBorrar = usuario;
 	}
-	
-let opencrearUsuario = $state(false);
+
+	function handleDarAdmin(usuario: UserResponseDto) {
+		openDarAdmin = true;
+		usuarioDarAdmin = usuario;
+	}
+
 	// $inspect(usuarios);
 </script>
 
@@ -119,7 +129,11 @@ let opencrearUsuario = $state(false);
 		<InputGroupAddon align="inline-start"><Search></Search></InputGroupAddon>
 		<InputGroupInput type="text" placeholder="Buscar usuario..." bind:value={search} />
 	</InputGroup>
-	<Button onclick={() =>opencrearUsuario = !opencrearUsuario} variant="secondary" class="bg-blue-500/20"><Plus /></Button>
+	<Button
+		onclick={() => (opencrearUsuario = !opencrearUsuario)}
+		variant="secondary"
+		class="bg-blue-500/20"><Plus /></Button
+	>
 </div>
 
 <Table>
@@ -191,6 +205,24 @@ let opencrearUsuario = $state(false);
 								{/if}
 							</TooltipContent>
 						</Tooltip>
+
+						<Tooltip>
+							<TooltipTrigger>
+								<Button
+									onclick={() => handleDarAdmin(usuario)}
+									variant={usuario.isAdmin ? 'destructive' : 'default'}
+								>
+									<Shield />
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent>
+								{#if usuario.isAdmin}
+									Sacar admin
+								{:else}
+									Dar Admin
+								{/if}
+							</TooltipContent>
+						</Tooltip>
 					</TableCell>
 				</TableRow>
 			{/each}
@@ -200,4 +232,5 @@ let opencrearUsuario = $state(false);
 <BorrarUsuario bind:open={openBorrar} usuario={usuarioBorrar} />
 <RecuperarContraseña bind:open usuario={usuarioCambioPass} />
 <ModificarUsuario bind:open={openModificarUsuario} bind:usuario={usuarioModificar} />
-<AgregarUsuario bind:open={opencrearUsuario} />
+<AgregarUsuario bind:open={opencrearUsuario} />
+<DarAdmin bind:open={openDarAdmin} usuario={usuarioDarAdmin} />

src/lib/components/admin/DarAdmin.svelte

@@ -0,0 +1,37 @@
+<script>
+	import Button from '../ui/button/button.svelte';
+	import DialogContent from '../ui/dialog/dialog-content.svelte';
+	import DialogHeader from '../ui/dialog/dialog-header.svelte';
+	import DialogTitle from '../ui/dialog/dialog-title.svelte';
+	import Dialog from '../ui/dialog/dialog.svelte';
+
+	let { open = $bindable(), usuario } = $props();
+</script>
+
+<Dialog {open} onOpenChange={() => (open = false)}>
+	<DialogContent>
+		<DialogHeader>
+			<DialogTitle>Confirmar Admin</DialogTitle>
+		</DialogHeader>
+		<form
+			onsubmit={(e) => {
+				e.preventDefault();
+				
+			}}
+		>
+			{#if usuario}
+				<p>
+					{usuario.isAdmin
+						? '¿Estás seguro que quieres sacarle acceso de administrador al usuario '
+						: '¿Estás seguro que quieres dar acceso de administrador al usuario '}
+					<strong>{usuario.displayName}</strong>
+					(@{usuario.username})?
+				</p>
+			{/if}
+			<div class="mt-4 flex justify-between gap-2">
+				<Button type="submit">Confirmar</Button>
+				<Button variant="secondary" onclick={() => (open = false)}>Cancelar</Button>
+			</div>
+		</form>
+	</DialogContent>
+</Dialog>

src/lib/components/admin/ModificarUsuario.svelte

@@ -78,7 +78,6 @@
 							{/if}
 						</Label>
 					</div>
-					<hr class="my-2" />
 					<div class="flex justify-between">
 						<Button type="submit" disabled={cargando}>
 							{#if cargando}