feat: hecho tema de imagenes en perfil

> mamita como renegue
- arreglado modificar usuarios admin
- añadido subir pfp

src/lib/components/CardCargando.svelte

@@ -0,0 +1,15 @@
+<script>
+	import { slide } from 'svelte/transition';
+	import CardContent from './ui/card/card-content.svelte';
+	import Card from './ui/card/card.svelte';
+	import Spinner from './ui/spinner/spinner.svelte';
+</script>
+
+<div out:slide>
+	<Card>
+		<CardContent class="flex w-full flex-col items-center justify-center">
+			<Spinner class="size-9" />
+			<p class="leading-7 not-first:mt-6">Cargando</p>
+		</CardContent>
+	</Card>
+</div>

src/lib/components/CardError.svelte

@@ -0,0 +1,19 @@
+<script>
+	import { fade } from 'svelte/transition';
+	import Card from './ui/card/card.svelte';
+	import CardContent from './ui/card/card-content.svelte';
+	import Ban from '@lucide/svelte/icons/ban';
+
+	let { mensajeError } = $props();
+</script>
+
+<div in:fade>
+	<Card class="border-red-500">
+		<CardContent class="flex w-full flex-col items-center justify-center">
+			<Ban class="scale-120 text-red-500"></Ban>
+			<p class="mt-2 text-lg leading-7 text-red-500">
+				{mensajeError}
+			</p>
+		</CardContent>
+	</Card>
+</div>

src/lib/components/CardPerfil.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import Pen from '@lucide/svelte/icons/pen';
+	import AvatarFallback from './ui/avatar/avatar-fallback.svelte';
+	import AvatarImage from './ui/avatar/avatar-image.svelte';
+	import Avatar from './ui/avatar/avatar.svelte';
+	import CardContent from './ui/card/card-content.svelte';
+	import Card from './ui/card/card.svelte';
+	import Skeleton from './ui/skeleton/skeleton.svelte';
+	import Button from './ui/button/button.svelte';
+	import { updateImagenDePerfil } from '@/hooks/updateImagenDePerfil';
+	import { updateUsuario } from '@/hooks/updateUsuario';
+
+	let { data, messageError = $bindable() } = $props();
+
+	let cargando = $state(false);
+	let hoverimg = $state(false);
+	let image: File | null = $state(null);
+
+	async function cambiarFotoDePerfil() {
+		const input = document.createElement('input');
+		input.type = 'file';
+		input.accept = 'image/*';
+		await new Promise<void>((resolve) => {
+			input.onchange = (event) => {
+				const target = event.target as HTMLInputElement;
+				if (target.files && target.files[0]) {
+					image = target.files[0];
+				}
+				resolve();
+			};
+			input.click();
+		});
+		if (image === null) return;
+		cargando = true;
+		await updateUsuario({ id: data.id, profileImage: true, image: image });
+		cargando = false;
+	}
+</script>
+
+<!-- <Button onclick={() => (cargando = !cargando)}>a</Button> -->
+<Card class="mb-2 flex w-3/4 overflow-hidden">
+	<CardContent>
+		{#if cargando}
+			<div class="flex flex-col items-center space-y-4">
+				<Skeleton class="h-18 w-18 rounded-full" />
+				<Skeleton class="h-8 w-48" />
+				<Skeleton class="h-16 w-3/4 rounded-full" />
+			</div>
+		{:else}
+			<button
+				class="relative flex w-full items-center justify-center"
+				onmouseenter={() => (hoverimg = true)}
+				onmouseleave={() => (hoverimg = false)}
+				onclick={cambiarFotoDePerfil}
+			>
+				<Avatar
+					class={{
+						'brightness-0': hoverimg,
+						'relative z-0 mt-2 scale-250 border-2 border-slate-950 transition-all': true
+					}}
+				>
+					<AvatarImage src={data.imageUrl} alt="Imagen de perfil"></AvatarImage>
+					<AvatarFallback class="select-none">
+						{data.displayName?.[0]?.toUpperCase() || ''}
+					</AvatarFallback>
+				</Avatar>
+				<div
+					class="absolute inset-0 top-1/2 left-1/2 z-10 flex -translate-x-1/2 -translate-y-1/2 transform items-center justify-center"
+					class:opacity-100={hoverimg}
+					class:opacity-0={!hoverimg}
+				>
+					<Pen class="text-white" />
+				</div>
+			</button>
+			<h1 class="mt-10 scroll-m-20 text-center text-2xl font-extrabold tracking-tight lg:text-5xl">
+				{data.displayName}
+			</h1>
+			<p class="mt-4 rounded-full bg-accent p-4 text-center text-muted-foreground">
+				{data.bio}
+			</p>
+		{/if}
+	</CardContent>
+</Card>

src/lib/components/TablaUsuarios.svelte

@@ -34,7 +34,7 @@
 
 	let usuarioModificar: UserResponseDto | null = $state(null);
 
-	let search = $state("");
+	let search = $state('');
 
 	type SortKey = 'username' | 'displayName' | 'postsCount' | 'createdAt';
 	let sortBy = $state<SortKey | null>(null);
@@ -51,7 +51,8 @@
 
 	let usuariosFiltrados = $derived(
 		usuarios
-        .filter((u) =>
+			.filter(
+				(u) =>
 					u.username.toLowerCase().startsWith(search.toLowerCase()) ||
 					u.displayName.toLowerCase().startsWith(search.toLowerCase())
 			)
@@ -74,28 +75,15 @@
 
 				const sa = a[key].toString().toLowerCase();
 				const sb = b[key].toString().toLowerCase();
-            return sortDirection === 'asc'
+				return sortDirection === 'asc' ? sa.localeCompare(sb) : sb.localeCompare(sa);
-                ? sa.localeCompare(sb)
-                : sb.localeCompare(sa);
 			})
 	);
 
 	function getSortIcon(campo: SortKey) {
-    	if (sortBy !== campo) return "";             // no ícono si no está ordenando por esa columna
+		if (sortBy !== campo) return '';
-    	return sortDirection === "asc" ? "↑" : "↓";  // ascendente / descendente
+		return sortDirection === 'asc' ? '↑' : '↓';
 	}
 
-	
-	//let usuariosFiltrados = $derived(
-    //usuarios.filter((u) =>
-    //    u.username.toLowerCase().startsWith(search.toLowerCase()) ||
-    //    u.displayName.toLowerCase().startsWith(search.toLowerCase())
-    //	)
-	//);
-
-	
-
-
 	$effect(() => {
 		if (!open) {
 			usuarioCambioPass = null;
@@ -114,27 +102,28 @@
 </script>
 
 <div class="mb-4">
-	<Input type= "text"
+	<Input
+		type="text"
 		placeholder="Buscar usuario..."
 		bind:value={search}
-	class="border px-3 py-2 rounded w-full"
+		class="w-full rounded border px-3 py-2"
 	/>
 </div>
 
 <Table>
 	<TableHeader>
 		<TableRow>
-			<TableHead onclick={() => ordenarPor("username")} class="cursor-pointer select-none">
+			<TableHead onclick={() => ordenarPor('username')} class="cursor-pointer select-none">
-				Usuario {getSortIcon("username")}
+				Usuario {getSortIcon('username')}
 			</TableHead>
-			<TableHead onclick={() => ordenarPor("displayName")} class="cursor-pointer select-none">
+			<TableHead onclick={() => ordenarPor('displayName')} class="cursor-pointer select-none">
-				Nombre {getSortIcon("displayName")}
+				Nombre {getSortIcon('displayName')}
 			</TableHead>
-			<TableHead onclick={() => ordenarPor("postsCount")} class="cursor-pointer select-none">
+			<TableHead onclick={() => ordenarPor('postsCount')} class="cursor-pointer select-none">
-				Cantidad de posts {getSortIcon("postsCount")}
+				Cantidad de posts {getSortIcon('postsCount')}
 			</TableHead>
-			<TableHead onclick={() => ordenarPor("createdAt")} class="cursor-pointer select-none">
+			<TableHead onclick={() => ordenarPor('createdAt')} class="cursor-pointer select-none">
-				Fecha de Creacion {getSortIcon("createdAt")}
+				Fecha de Creacion {getSortIcon('createdAt')}
 			</TableHead>
 			<TableHead>Acciones</TableHead>
 		</TableRow>

src/lib/components/admin/ModificarUsuario.svelte

@@ -18,20 +18,22 @@
 	let { open = $bindable(), usuario = $bindable() }: Prop = $props();
 
 	let imagen = $state(!!usuario?.profileImageUrl);
-	let fallback = usuario?.displayName;
 
 	let cargando = $state(false);
 	let error = $state('');
+
 	async function onsubmit(e: SubmitEvent) {
 		e.preventDefault();
 		cargando = true;
-		let ret: { displayName: string } | string = await updateUsuario({
+		const data = {
 			id: usuario?.id || '',
 			bio: usuario?.bio || '',
 			displayName: usuario?.displayName || '',
-			oldImageUrl: usuario?.profileImageUrl || '',
+			profileImage: imagen,
-			profileImage: imagen
+			profileImageUrl: imagen ? null : usuario?.profileImageUrl
-		});
+		};
+		console.log(data);
+		let ret: { displayName: string } | string = await updateUsuario(data);
 		if (typeof ret === 'string') {
 			error = ret;
 		} else {

src/lib/components/ui/skeleton/index.ts

@@ -0,0 +1,7 @@
+import Root from "./skeleton.svelte";
+
+export {
+	Root,
+	//
+	Root as Skeleton,
+};

src/lib/components/ui/skeleton/skeleton.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="skeleton"
+	class={cn("bg-accent animate-pulse rounded-md", className)}
+	{...restProps}
+></div>

src/lib/hooks/updateImagenDePerfil.ts

@@ -0,0 +1,7 @@
+export async function updateImagenDePerfil(){
+  try{
+
+  }catch{
+
+  }
+}

src/lib/hooks/updateUsuario.ts

@@ -4,19 +4,23 @@ import { get } from "svelte/store"
 
 export interface AdminUpdateUsuario {
   id:string,
-  displayName: string,
+  displayName: string | null,
-  bio: string,
+  bio: string | null,
   profileImage:boolean,
-  oldImageUrl:string
+  image:File,
+  profileImageUrl:string|null
 }
 
-export async function updateUsuario(usuario: AdminUpdateUsuario) {
+export async function updateUsuario(usuario: Partial<AdminUpdateUsuario>) {
 
   const formData = new FormData();
-  formData.append('displayName', usuario.displayName);
+  if (usuario.displayName) formData.append('displayName', usuario.displayName);
-  formData.append('bio', usuario.bio);
+  if (usuario.bio) formData.append('bio', usuario.bio);
-  if (usuario.profileImage) {
+  if (usuario.image) formData.append('profileImage', usuario.image);
-    formData.append('profileImageUrl', usuario.oldImageUrl);
+  if (usuario.profileImage){
+    if (usuario.profileImageUrl) formData.append('profileImageUrl', 'null');
+  }else{
+    if (usuario.profileImageUrl) formData.append('profileImageUrl', usuario.profileImageUrl);
   }
 
   try {

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

@@ -14,7 +14,6 @@ export async function load({}) {
 			Authorization: `Bearer ${get(sesionStore)?.accessToken}`
 		}
 	});
-
 	if (response.status === 401) {
 		throw redirect(302, '/');
 	}

src/routes/[perfil]/+page.svelte

@@ -25,6 +25,10 @@
 	import CardHeader from '@/components/ui/card/card-header.svelte';
 	import CardTitle from '@/components/ui/card/card-title.svelte';
 	import Badge from '@/components/ui/badge/badge.svelte';
+	import Pen from '@lucide/svelte/icons/pen';
+	import CardCargando from '@/components/CardCargando.svelte';
+	import CardError from '@/components/CardError.svelte';
+	import CardPerfil from '@/components/CardPerfil.svelte';
 
 	let { params } = $props();
 
@@ -79,27 +83,7 @@
 <div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
 	<div class="w-full max-w-6xl">
 		<div class="flex gap-2">
-			<Card class="mb-2 flex w-3/4 overflow-hidden">
+			<CardPerfil data={page.data} />
-				<CardContent>
-					<div class="flex justify-center">
-						<Avatar class="mt-2 scale-250 border-2 border-slate-950">
-							<AvatarImage></AvatarImage>
-							<AvatarFallback>{page.data.displayName?.[0]?.toUpperCase() || ''}</AvatarFallback>
-						</Avatar>
-					</div>
-					<h1
-						class="mt-10 scroll-m-20 text-center text-2xl font-extrabold tracking-tight lg:text-5xl"
-					>
-						{page.data.displayName}
-					</h1>
-					<h3 class="scroll-m-20 text-center text-2xl tracking-tight text-muted-foreground">
-						@{params.perfil}
-					</h3>
-					<p class="mt-4 rounded-full bg-accent p-4 text-center text-muted-foreground">
-						{page.data.bio}
-					</p>
-				</CardContent>
-			</Card>
 			<aside class="flex w-1/4 flex-col gap-2">
 				<Card class="w-full">
 					<CardContent>
@@ -161,25 +145,9 @@
 
 		<hr class="mb-8" />
 		{#if cargando}
-			<div out:slide>
+			<CardCargando />
-				<Card>
-					<CardContent class="flex w-full flex-col items-center justify-center">
-						<Spinner class="size-9" />
-						<p class="leading-7 not-first:mt-6">Cargando</p>
-					</CardContent>
-				</Card>
-			</div>
 		{:else if mensajeError !== ''}
-			<div in:fade>
+			<CardError {mensajeError} />
-				<Card class="border-red-500">
-					<CardContent class="flex w-full flex-col items-center justify-center">
-						<Ban class="scale-120 text-red-500"></Ban>
-						<p class="mt-2 text-lg leading-7 text-red-500">
-							{mensajeError}
-						</p>
-					</CardContent>
-				</Card>
-			</div>
 		{:else}
 			<div class="flex flex-col gap-2">
 				{#each $posts as post (post.id)}

src/types.d.ts

@@ -84,9 +84,18 @@ export interface UserResponseDto {
 	displayName: string;
 	email: string;
 	bio: string;
+  imageUrl: string?;
 	profileImageUrl: string;
 	followersCount: number;
 	followingCount: number;
 	createdAt: string;
 	postsCount: number;
 }
+
+export interface UpdateUserRequest {
+  username: string?;
+  displayName: string?;
+  bio: string?;
+  email: string?;
+  profileImage: File?;
+}