From 5c388cfb1268772ca417d73b2993d743781d0753 Mon Sep 17 00:00:00 2001
From: fede <federico.nicolas.polidoro@gmail.com>
Date: Mon, 8 Dec 2025 18:03:17 -0300
Subject: [PATCH] =?UTF-8?q?A=C3=B1adido=20el=20update=20para=20las=20image?=
 =?UTF-8?q?nes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/hooks/updatePost.ts            |   2 +-
 src/routes/[perfil]/modalEditar.svelte | 136 ++++++++++++++++++++-----
 src/types.d.ts                         |   1 +
 3 files changed, 112 insertions(+), 27 deletions(-)

diff --git a/src/lib/hooks/updatePost.ts b/src/lib/hooks/updatePost.ts
index 523f526..7197820 100644
--- a/src/lib/hooks/updatePost.ts
+++ b/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',
diff --git a/src/routes/[perfil]/modalEditar.svelte b/src/routes/[perfil]/modalEditar.svelte
index 1eb1953..7915daf 100644
--- a/src/routes/[perfil]/modalEditar.svelte
+++ b/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>
diff --git a/src/types.d.ts b/src/types.d.ts
index c7749ce..7f75bc2 100644
--- a/src/types.d.ts
+++ b/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;