Merge pull request #33 from emailerfacu-spec/dev

Dev

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,111 @@
+<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';
+	import { sesionStore } from '@/stores/usuario';
+	import { obtenerUsuarioPorUsername } from '@/hooks/obtenerUsuario';
+
+	let { data = $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 });
+		let ret = await obtenerUsuarioPorUsername(data.username);
+		if (ret) {
+			data = { ...data, ...ret };
+		}
+		cargando = false;
+		hoverimg = 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 if $sesionStore?.isAdmin || $sesionStore?.username == data.username}
+			<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}
+				<p class="ml-2 text-2xl font-medium text-muted-foreground">@{data.username}</p>
+			</h1>
+			<p class="mt-4 rounded-full bg-accent p-4 text-center text-muted-foreground">
+				{data.bio}
+			</p>
+		{:else}
+			<div class="relative flex w-full items-center justify-center">
+				<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>
+			<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/PostCard.svelte

@@ -44,6 +44,16 @@
 	let cargandoLike = $state(false);
 	let errorLike = $state(false);
 
+	let contenido = $derived(() => {
+		let t = post.content.replaceAll('\n', '<br>');
+		t = t.replace(
+			/#\w*/gm,
+			(match) =>
+				`<a class="hover:text-blue-200 text-blue-400" href="/htag/${match.replace('#', '')}">${match}</a>`
+		);
+		return t;
+	});
+
 	async function handleBorrar() {
 		await deletePost(
 			post,
@@ -85,7 +95,7 @@
 				<div class="flex gap-3">
 					<a href={`/${post.authorName}`}>
 						<Avatar>
-							<AvatarImage></AvatarImage>
+							<AvatarImage src={post.authorImageUrl}></AvatarImage>
 							<AvatarFallback>{post.authorDisplayName[0].toUpperCase()}</AvatarFallback>
 						</Avatar>
 					</a>
@@ -126,12 +136,17 @@
 			</div>
 		</div>
 	</CardHeader>
-	<Content class="mx-5 -mt-4 rounded-full bg-accent p-6">
-		<p class=" text-sm">{post.content}</p>
-		{#if post.imageUrl}
-			<img src={post.imageUrl} alt="Post" class="mt-2 rounded-md" />
-		{/if}
+	<Content class="mx-5 -mt-4 rounded-lg bg-accent p-3">
+		<p class=" text-sm">{@html contenido()}</p>
 	</Content>
+
+	{#if post.imageUrl}
+		<div class="flex justify-center">
+			<Content class="mx-5 max-w-[25%] rounded-4xl bg-accent p-6">
+				<img src={post.imageUrl} alt="Post" class="mt-2 rounded-md" />
+			</Content>
+		</div>
+	{/if}
 	<CardFooter>
 		<div class="-mt-2 flex items-center justify-between gap-2 text-xs text-muted-foreground">
 			<Button

src/lib/components/TablaUsuarios.svelte

@@ -34,11 +34,11 @@
 
 	let usuarioModificar: UserResponseDto | null = $state(null);
 
-	let search = $state("");
+	let search = $state('');
 
 	type SortKey = 'username' | 'displayName' | 'postsCount' | 'createdAt';
-    let sortBy = $state<SortKey | null>(null);
-    let sortDirection = $state<'asc' | 'desc'>('asc');
+	let sortBy = $state<SortKey | null>(null);
+	let sortDirection = $state<'asc' | 'desc'>('asc');
 
 	function ordenarPor(campo: SortKey) {
 		if (sortBy === campo) {
@@ -50,52 +50,40 @@
 	}
 
 	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;
+		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;
+				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 === '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;
-            }
+				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);
-        })
+				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 "";             // no ícono si no está ordenando por esa columna
-    	return sortDirection === "asc" ? "↑" : "↓";  // ascendente / descendente
+		if (sortBy !== campo) return '';
+		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"
-	placeholder="Buscar usuario..."
-	bind:value={search}
-	class="border px-3 py-2 rounded w-full"
+	<Input
+		type="text"
+		placeholder="Buscar usuario..."
+		bind:value={search}
+		class="w-full rounded border px-3 py-2"
 	/>
 </div>
 
 <Table>
 	<TableHeader>
 		<TableRow>
-			<TableHead onclick={() => ordenarPor("username")} class="cursor-pointer select-none">
-				Usuario {getSortIcon("username")}
+			<TableHead onclick={() => ordenarPor('username')} class="cursor-pointer select-none">
+				Usuario {getSortIcon('username')}
 			</TableHead>
-			<TableHead onclick={() => ordenarPor("displayName")} class="cursor-pointer select-none">
-				Nombre {getSortIcon("displayName")}
+			<TableHead onclick={() => ordenarPor('displayName')} class="cursor-pointer select-none">
+				Nombre {getSortIcon('displayName')}
 			</TableHead>
-			<TableHead onclick={() => ordenarPor("postsCount")} class="cursor-pointer select-none">
-				Cantidad de posts {getSortIcon("postsCount")}
+			<TableHead onclick={() => ordenarPor('postsCount')} class="cursor-pointer select-none">
+				Cantidad de posts {getSortIcon('postsCount')}
 			</TableHead>
-			<TableHead onclick={() => ordenarPor("createdAt")} class="cursor-pointer select-none">
-				Fecha de Creacion {getSortIcon("createdAt")}
+			<TableHead onclick={() => ordenarPor('createdAt')} class="cursor-pointer select-none">
+				Fecha de Creacion {getSortIcon('createdAt')}
 			</TableHead>
 			<TableHead>Acciones</TableHead>
 		</TableRow>

src/lib/components/UserCard.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import type { UserResponseDto } from '../../types';
+	import AvatarFallback from './ui/avatar/avatar-fallback.svelte';
+	import AvatarImage from './ui/avatar/avatar-image.svelte';
+	import Avatar from './ui/avatar/avatar.svelte';
+	import Button from './ui/button/button.svelte';
+	import CardContent from './ui/card/card-content.svelte';
+	import CardHeader from './ui/card/card-header.svelte';
+	import CardTitle from './ui/card/card-title.svelte';
+	import Card from './ui/card/card.svelte';
+
+	interface Props {
+		usu: UserResponseDto;
+	}
+
+	let { usu }: Props = $props();
+</script>
+
+<Card class="w-[50%]">
+	<CardContent>
+		<div class="flex justify-between">
+			<a class="flex items-center gap-2" href={resolve(`/${usu.username}`)}>
+				<Avatar>
+					<AvatarImage src={usu.profileImageUrl}></AvatarImage>
+					<AvatarFallback>{usu.displayName[0]}</AvatarFallback>
+				</Avatar>
+				<h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
+					{usu.displayName}
+				</h4>
+				<p class="text-sm text-muted-foreground">@{usu.username}</p>
+			</a>
+			<div>
+				<Button variant="outline">Seguir</Button>
+			</div>
+		</div>
+		{#if usu.bio}
+			<div class="mt-4 rounded-full bg-accent p-4 text-muted-foreground">{usu.bio}</div>
+		{/if}
+	</CardContent>
+</Card>

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/crear-post.svelte

@@ -4,53 +4,38 @@
 	import InputGroupTextarea from './ui/input-group/input-group-textarea.svelte';
 	import InputGroup from './ui/input-group/input-group.svelte';
 	import ArrowUpIcon from '@lucide/svelte/icons/arrow-up';
+	import Paperclip from '@lucide/svelte/icons/paperclip';
+	import Trash from '@lucide/svelte/icons/trash-2';
 	import Loader2Icon from '@lucide/svelte/icons/loader-2';
 	import Kbd from './ui/kbd/kbd.svelte';
-
-	import { apiBase } from '@/stores/url';
-	import { sesionStore } from '@/stores/usuario';
-	import type { CreatePostDto } from '../../types';
-	import { addPost } from '@/stores/posts';
 	import { Tooltip } from './ui/tooltip';
 	import TooltipContent from './ui/tooltip/tooltip-content.svelte';
 	import TooltipTrigger from './ui/tooltip/tooltip-trigger.svelte';
+	import { publicarPost } from '@/hooks/publicarPost';
+	import { filtrarImagen } from '@/utils';
 
 	let mensaje = $state('');
+	let imagen: File | null = $state(null);
+	let hoverimg = $state(false);
 
 	let cargando = $state(false);
 	let mostrarError = $state('');
 
 	async function handlePost(e: Event) {
 		e.preventDefault();
-		try {
-			const formData = new FormData();
-			formData.append('content', mensaje);
-			// formData.append('imageUrl', '');
-			// formData.append('parentPostId', '');
-
-			const req = fetch($apiBase + '/api/posts', {
-				method: 'POST',
-				//credentials: 'include',
-				headers: {
-					Authorization: `Bearer ${$sesionStore?.accessToken}`
-				},
-				body: formData
-			});
-			cargando = true;
-
-			const res = await req;
-			if (res.ok) {
-				mensaje = '';
-				const post = await res.json();
-				addPost(post);
-				return;
-			}
-			mostrarError = 'No se pudo crear el post.';
-		} catch {
-			mostrarError = 'Fallo al alcanzar el servidor';
-		} finally {
-			cargando = false;
+		cargando = true;
+		const formData = new FormData();
+		formData.append('content', mensaje);
+		if (imagen) {
+			formData.append('image', imagen);
 		}
+		// formData.append('parentPostId', '');
+		mostrarError = await publicarPost(formData);
+		if (mostrarError == '') {
+			mensaje = '';
+			imagen = null;
+		}
+		cargando = false;
 	}
 
 	function handleKeydown(e: KeyboardEvent) {
@@ -58,12 +43,35 @@
 			handlePost(e);
 		}
 	}
+
+	function handleDrop(e: Event) {
+		e.preventDefault();
+		const dt = (e as DragEvent).dataTransfer;
+		const file = dt?.files?.[0];
+		if (file === undefined) return;
+		imagen = filtrarImagen(file);
+	}
+	function seleccionarImagen() {
+		const input = document.createElement('input');
+		input.type = 'file';
+		input.accept = '.png,.jpg,.jpeg,.gif,.webp';
+		input.onchange = () => {
+			const file = input.files?.[0];
+			if (file === undefined) return;
+			imagen = filtrarImagen(file);
+		};
+		input.click();
+	}
 </script>
 
 <form onsubmit={(e: Event) => handlePost(e)}>
 	<InputGroup>
 		<InputGroupTextarea
 			bind:value={mensaje}
+			ondragover={(e) => {
+				e.preventDefault();
+			}}
+			ondrop={handleDrop}
 			maxlength={280}
 			placeholder="Alguna novedad?"
 			onkeydown={handleKeydown}
@@ -77,28 +85,69 @@
 					</p>
 					/ 280
 				</Kbd>
-				<Tooltip>
-					<TooltipTrigger class="*: flex">
-						<InputGroupButton
-							variant="default"
-							disabled={cargando}
-							type="submit"
-							class="transform rounded-full transition-transform ease-in hover:scale-120"
-							size="xs"
-						>
-							{#if cargando}
-								<Loader2Icon class="animate-spin" />
-								Publicando...
-							{:else}
-								Publicar
-								<ArrowUpIcon class="mt-0.5 h-3.5! w-3.5!" />
-							{/if}
-						</InputGroupButton>
-					</TooltipTrigger>
-					<TooltipContent>
-						<Kbd>Ctrl</Kbd>+<Kbd>Enter</Kbd>
-					</TooltipContent>
-				</Tooltip>
+				<div class="flex items-center gap-2">
+					{#if imagen}
+						<button class="h-6 w-6 overflow-hidden rounded-full" onclick={() => (imagen = null)}>
+							<div class="relative h-full w-full">
+								<div
+									class="relative h-full w-full"
+									role="presentation"
+									onmouseenter={() => (hoverimg = true)}
+									onmouseleave={() => (hoverimg = false)}
+								>
+									<div class={{ 'brightness-50': hoverimg }}>
+										<img
+											src={URL.createObjectURL(imagen)}
+											alt="imagen seleccionada"
+											class="h-full w-full object-cover"
+											onload={(e) => {
+												const target = e.currentTarget as HTMLImageElement;
+												URL.revokeObjectURL(target.src);
+											}}
+										/>
+									</div>
+									<div
+										class="absolute inset-0 flex items-center justify-center"
+										class:opacity-100={hoverimg}
+										class:opacity-0={!hoverimg}
+									>
+										<Trash class="h-4 w-4 text-white" />
+									</div>
+								</div>
+							</div>
+						</button>
+					{/if}
+					<InputGroupButton
+						size="icon-sm"
+						variant="outline"
+						onclick={seleccionarImagen}
+						class={`${imagen ? 'bg-blue-500/30!' : ''} rounded-full`}
+					>
+						<Paperclip />
+					</InputGroupButton>
+					<Tooltip>
+						<TooltipTrigger class="*: flex">
+							<InputGroupButton
+								variant="default"
+								disabled={cargando}
+								type="submit"
+								class="transform rounded-full transition-transform ease-in hover:scale-120"
+								size="xs"
+							>
+								{#if cargando}
+									<Loader2Icon class="animate-spin" />
+									Publicando...
+								{:else}
+									Publicar
+									<ArrowUpIcon class="mt-0.5 h-3.5! w-3.5!" />
+								{/if}
+							</InputGroupButton>
+						</TooltipTrigger>
+						<TooltipContent>
+							<Kbd>Ctrl</Kbd>+<Kbd>Enter</Kbd>
+						</TooltipContent>
+					</Tooltip>
+				</div>
 			</div>
 		</InputGroupAddon>
 	</InputGroup>

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/head/Header.svelte

@@ -53,15 +53,10 @@
 			<nav class="me-2 items-center space-x-6 text-sm font-medium md:flex">
 				<ButtonTheme />
 			</nav>
-			<div class="md:hidden">
-				{#if $sesionStore !== null}
-					<AvatarButton></AvatarButton>
-				{/if}
-			</div>
 		</div>
 
 		<!-- Desktop menu -->
-		<div class="hidden flex-1 items-center justify-end md:flex">
+		<div class="flex items-center justify-end md:flex">
 			{#if showCerrarSesion}
 				{#if $sesionStore !== null}
 					<AvatarButton></AvatarButton>
@@ -83,53 +78,5 @@
 				</ButtonGroup>
 			{/if}
 		</div>
-
-		<!-- Mobile menu button -->
-		<button class="me-3 rounded-md md:hidden" onclick={toggleMenu} aria-label="Toggle menu">
-			{#if menuOpen}
-				<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width={2}
-						d="M6 18L18 6M6 6l12 12"
-					/>
-				</svg>
-			{:else}
-				<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						stroke-width={2}
-						d="M4 6h16M4 12h16M4 18h16"
-					/>
-				</svg>
-			{/if}
-		</button>
 	</div>
-
-	<!-- Mobile menu -->
-	{#if menuOpen}
-		<div class="md:hidden" transition:slide>
-			<div class="space-y-1 border-t bg-background/95 px-2 pt-2 pb-3">
-				<!---
-				{#if showCerrarSesion}{:else}
-				-->
-				<Button
-					variant={page.url.pathname !== '/login' ? 'outline' : 'secondary'}
-					href="/login"
-					class="mb-2 w-full justify-start text-foreground/60 transition-colors hover:text-foreground/80"
-					onclick={() => (menuOpen = false)}>Iniciar Sesion</Button
-				>
-				<Button
-					variant={page.url.pathname !== '/register' ? 'outline' : 'secondary'}
-					href="/register"
-					class="w-full justify-start text-foreground/60 transition-colors hover:text-foreground/80"
-					onclick={() => (menuOpen = false)}
-					>Registrarse
-				</Button>
-				<!-- {/if} -->
-			</div>
-		</div>
-	{/if}
 </header>

src/lib/hooks/busquedaUsuarios.ts

@@ -0,0 +1,18 @@
+import { apiBase } from '@/stores/url';
+import { get } from 'svelte/store';
+
+export async function busquedaUsuarios(username: string) {
+	if (!username) return null;
+	try {
+		const req = await fetch(`${get(apiBase)}/api/users/search?q=${username}`, {
+			method: 'GET'
+		});
+		if (req.ok) {
+			let data = await req.json();
+			return data;
+		}
+		return [];
+	} catch {
+		return null;
+	}
+}

src/lib/hooks/publicarPost.ts

@@ -0,0 +1,27 @@
+import { addPost } from "@/stores/posts";
+import { apiBase } from "@/stores/url";
+import { sesionStore } from "@/stores/usuario";
+import { get } from "svelte/store";
+
+export async function publicarPost(formData: FormData){
+  try{
+ 			const req = fetch(get(apiBase) + '/api/posts', {
+				method: 'POST',
+				//credentials: 'include',
+				headers: {
+					Authorization: `Bearer ${get(sesionStore)?.accessToken}`
+				},
+				body: formData
+			});
+
+			const res = await req;
+			if (res.ok) {
+				const post = await res.json();
+				addPost(post);
+				return '';
+			}
+			return 'No se pudo crear el post.';
+		} catch {
+			return 'Fallo al alcanzar el servidor';
+		}
+}

src/lib/hooks/updateImagenDePerfil.ts

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

src/lib/hooks/updatePost.ts

@@ -7,7 +7,7 @@ export async function updatePost(post: Post, callbackfn: Function, message: stri
 	try {
     const formData = new FormData();
     formData.append("content", post.content);
-    formData.append("imageUrl", post.imageUrl||"");
+    formData.append("image", post.image||"");
 
 		const req = await fetch(get(apiBase) + `/api/posts/${post.id}`, {
 			method: 'PUT',

src/lib/hooks/updateUsuario.ts

@@ -4,19 +4,23 @@ import { get } from "svelte/store"
 
 export interface AdminUpdateUsuario {
   id:string,
-  displayName: string,
-  bio: string,
+  displayName: string | null,
+  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);
-  formData.append('bio', usuario.bio);
-  if (usuario.profileImage) {
-    formData.append('profileImageUrl', usuario.oldImageUrl);
+  if (usuario.displayName) formData.append('displayName', usuario.displayName);
+  if (usuario.bio) formData.append('bio', usuario.bio);
+  if (usuario.image) formData.append('profileImage', usuario.image);
+  if (usuario.profileImage){
+    if (usuario.profileImageUrl) formData.append('profileImageUrl', 'null');
+  }else{
+    if (usuario.profileImageUrl) formData.append('profileImageUrl', usuario.profileImageUrl);
   }
 
   try {

src/lib/utils.ts

@@ -11,3 +11,13 @@ export type WithoutChild<T> = T extends { child?: any } ? Omit<T, 'child'> : T;
 export type WithoutChildren<T> = T extends { children?: any } ? Omit<T, 'children'> : T;
 export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
 export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?: U | null };
+
+export function filtrarImagen(file: File) {
+  if (file) {
+		const allowed = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'image/webp'];
+		if (allowed.includes(file.type)) {
+			return file;
+		}
+	}
+  return null;
+}

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,9 @@
 	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 CardCargando from '@/components/CardCargando.svelte';
+	import CardError from '@/components/CardError.svelte';
+	import CardPerfil from '@/components/CardPerfil.svelte';
 
 	let { params } = $props();
 
@@ -37,6 +40,7 @@
 
 	const { subscribe } = apiBase;
 	let baseUrl: string = '';
+	let data = $state(page.data);
 
 	subscribe((value) => {
 		baseUrl = value;
@@ -49,7 +53,10 @@
 	async function obtenerPosts() {
 		try {
 			const req = await fetch(baseUrl + '/api/posts/user/' + params.perfil, {
-				method: 'GET'
+				method: 'GET',
+				headers: {
+					Authorization: `Bearer ${$sesionStore?.accessToken}`
+				}
 			});
 			if (req.ok) {
 				setPosts(await req.json());
@@ -79,39 +86,19 @@
 <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">
-				<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>
+			<CardPerfil bind:data />
 			<aside class="flex w-1/4 flex-col gap-2">
 				<Card class="w-full">
 					<CardContent>
 						<CardHeader class="flex justify-between">
 							<CardTitle>Seguidos:</CardTitle>
-							<Badge variant="secondary">{page.data.seguidos.length}</Badge>
+							<Badge variant="secondary">{data.seguidos.length}</Badge>
 						</CardHeader>
 						<CardContent>
-							{#if page.data.seguidos.length === 0}
+							{#if data.seguidos.length === 0}
 								<h3>No hay Seguidos</h3>
 							{:else}
-								{#each page.data.seguidos as seguidos (seguidos.id)}
+								{#each data.seguidos as seguidos (seguidos.id)}
 									<p class="text-muted-foreground">
 										{seguidos.username}
 									</p>
@@ -124,13 +111,13 @@
 					<CardContent>
 						<CardHeader class="flex justify-between">
 							<CardTitle>Seguidores:</CardTitle>
-							<Badge variant="secondary">{page.data.seguidores.length}</Badge>
+							<Badge variant="secondary">{data.seguidores.length}</Badge>
 						</CardHeader>
 						<CardContent>
-							{#if page.data.seguidores.length === 0}
+							{#if data.seguidores.length === 0}
 								<h3>No hay Seguidores</h3>
 							{:else}
-								{#each page.data.seguidores as seguidores (seguidores.id)}
+								{#each data.seguidores as seguidores (seguidores.id)}
 									<p class="text-muted-foreground">
 										{seguidores.username}
 									</p>
@@ -161,25 +148,9 @@
 
 		<hr class="mb-8" />
 		{#if cargando}
-			<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>
+			<CardCargando />
 		{:else if mensajeError !== ''}
-			<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>
+			<CardError {mensajeError} />
 		{:else}
 			<div class="flex flex-col gap-2">
 				{#each $posts as post (post.id)}

src/routes/[perfil]/modalEditar.svelte

@@ -4,6 +4,8 @@
 	import InputGroupButton from '@/components/ui/input-group/input-group-button.svelte';
 	import InputGroupTextarea from '@/components/ui/input-group/input-group-textarea.svelte';
 	import Kbd from '@/components/ui/kbd/kbd.svelte';
+	import Paperclip from '@lucide/svelte/icons/paperclip';
+	import Trash from '@lucide/svelte/icons/trash-2';
 	import type { Post } from '../../types';
 	import ArrowUpIcon from '@lucide/svelte/icons/arrow-up';
 	import { Dialog } from '@/components/ui/dialog';
@@ -15,6 +17,7 @@
 	import TooltipTrigger from '@/components/ui/tooltip/tooltip-trigger.svelte';
 	import TooltipContent from '@/components/ui/tooltip/tooltip-content.svelte';
 	import Spinner from '@/components/ui/spinner/spinner.svelte';
+	import { filtrarImagen } from '@/utils';
 
 	interface Props {
 		post: Post | null;
@@ -24,6 +27,21 @@
 
 	let cargando = $state(false);
 
+	async function loadPostImage() {
+		if (!post?.imageUrl) return;
+		const response = await fetch(post.imageUrl);
+		const blob = await response.blob();
+		const urlParts = post.imageUrl.split('/');
+		const filename = urlParts[urlParts.length - 1] || 'image';
+		post.image = new File([blob], filename, { type: blob.type });
+	}
+
+	$effect(() => {
+		void loadPostImage();
+	});
+
+	let hoverimg = $state(false);
+
 	async function handleKeydown(e: KeyboardEvent) {
 		if (e.ctrlKey && e.key === 'Enter') {
 			cargando = true;
@@ -37,6 +55,24 @@
 		await callbackfn(e);
 		cargando = false;
 	}
+	function seleccionarImagen() {
+		const input = document.createElement('input');
+		input.type = 'file';
+		input.accept = '.png,.jpg,.jpeg,.gif,.webp';
+		input.onchange = () => {
+			const file = input.files?.[0];
+			if (file === undefined) return;
+			post!.image = filtrarImagen(file);
+		};
+		input.click();
+	}
+	function handleDrop(e: Event) {
+		e.preventDefault();
+		const dt = (e as DragEvent).dataTransfer;
+		const file = dt?.files?.[0];
+		if (file === undefined) return;
+		post!.image = filtrarImagen(file);
+	}
 </script>
 
 <Dialog open={true} onOpenChange={() => (post = null)}>
@@ -50,6 +86,10 @@
 					<InputGroupTextarea
 						bind:value={post!.content}
 						maxlength={280}
+						ondragover={(e) => {
+							e.preventDefault();
+						}}
+						ondrop={handleDrop}
 						placeholder="Alguna novedad?"
 						onkeydown={handleKeydown}
 						class="text-white"
@@ -63,32 +103,76 @@
 								</p>
 								/ 280
 							</Kbd>
-							<TooltipProvider>
-								<Tooltip>
-									<TooltipTrigger>
-										<InputGroupButton
-											variant="default"
-											disabled={cargando}
-											type="submit"
-											class="transform rounded-full transition-transform ease-in hover:scale-120"
-											size="xs"
-										>
-											<p class="flex items-center gap-1">
-												{#if cargando}
-													<Spinner />
-													Cargando...
-												{:else}
-													Modificar
-													<ArrowUpIcon class="mt-0.5 h-3.5! w-3.5!" />
-												{/if}
-											</p>
-										</InputGroupButton>
-									</TooltipTrigger>
-									<TooltipContent>
-										<Kbd>Ctrl</Kbd>+<Kbd>Enter</Kbd>
-									</TooltipContent>
-								</Tooltip>
-							</TooltipProvider>
+							<div class="flex items-center gap-2">
+								{#if post.image}
+									<button
+										class="h-6 w-6 overflow-hidden rounded-full"
+										onclick={() => (post.image = null)}
+									>
+										<div class="relative h-full w-full">
+											<div
+												class="relative h-full w-full"
+												role="presentation"
+												onmouseenter={() => (hoverimg = true)}
+												onmouseleave={() => (hoverimg = false)}
+											>
+												<div class={{ 'brightness-50': hoverimg }}>
+													<img
+														src={URL.createObjectURL(post.image)}
+														alt="imagen seleccionada"
+														class="h-full w-full object-cover"
+														onload={(e) => {
+															const target = e.currentTarget as HTMLImageElement;
+															URL.revokeObjectURL(target.src);
+														}}
+													/>
+												</div>
+												<div
+													class="absolute inset-0 flex items-center justify-center"
+													class:opacity-100={hoverimg}
+													class:opacity-0={!hoverimg}
+												>
+													<Trash class="h-4 w-4 text-white" />
+												</div>
+											</div>
+										</div>
+									</button>
+								{/if}
+								<InputGroupButton
+									size="icon-sm"
+									variant="outline"
+									onclick={seleccionarImagen}
+									class={`${post?.image ? 'bg-blue-500/30!' : ''} rounded-full`}
+								>
+									<Paperclip />
+								</InputGroupButton>
+								<TooltipProvider>
+									<Tooltip>
+										<TooltipTrigger>
+											<InputGroupButton
+												variant="default"
+												disabled={cargando}
+												type="submit"
+												class="transform rounded-full transition-transform ease-in hover:scale-120"
+												size="xs"
+											>
+												<p class="flex items-center gap-1">
+													{#if cargando}
+														<Spinner />
+														Cargando...
+													{:else}
+														Modificar
+														<ArrowUpIcon class="mt-0.5 h-3.5! w-3.5!" />
+													{/if}
+												</p>
+											</InputGroupButton>
+										</TooltipTrigger>
+										<TooltipContent>
+											<Kbd>Ctrl</Kbd>+<Kbd>Enter</Kbd>
+										</TooltipContent>
+									</Tooltip>
+								</TooltipProvider>
+							</div>
 						</div>
 					</InputGroupAddon>
 				</InputGroup>

src/routes/search/[user]/+page.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import UserCard from '@/components/UserCard.svelte';
+
+	let { data } = $props();
+</script>
+
+<div class="flex min-h-fit w-full flex-col items-center justify-center gap-2 p-6 md:p-10">
+	{#each data.usuarios as usu}
+		<UserCard {usu} />
+	{/each}
+</div>

src/routes/search/[user]/+page.ts

@@ -0,0 +1,15 @@
+import { busquedaUsuarios } from '@/hooks/busquedaUsuarios';
+import { error } from '@sveltejs/kit';
+import type { UserResponseDto } from '../../../types';
+
+export async function load({ params }) {
+	let usuarios: UserResponseDto[] = await busquedaUsuarios(params.user);
+	if (usuarios == null) {
+		return error(500, 'No se pudo alcanzar el servidor.');
+	}
+
+	if (usuarios.length == 0) {
+		return error(404, 'No se encontraron usuarios que coinsidan con la busqueda.');
+	}
+	return { usuarios };
+}

src/types.d.ts

@@ -7,6 +7,7 @@ export interface Post {
 	authorName: string;
 	content: string;
 	imageUrl?: string;
+	image?: File | null;
 	parentPostId?: string;
 	likesCount: number;
 	repliesCount: number;
@@ -83,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?;
+}