terminada logica de like + rework de la interfaz

src/lib/components/PostCard.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import Ellipsis from '@lucide/svelte/icons/ellipsis';
 	import Trash2 from '@lucide/svelte/icons/trash-2';
+	import ThumbsUp from '@lucide/svelte/icons/thumbs-up';
+	import MessageCircle from '@lucide/svelte/icons/message-circle-more';
 	import Pen from '@lucide/svelte/icons/pen';
 	import type { Post } from '../../types';
 	import Button from './ui/button/button.svelte';
@@ -27,6 +29,7 @@
 	import DialogTitle from './ui/dialog/dialog-title.svelte';
 	import DialogDescription from './ui/dialog/dialog-description.svelte';
 	import { sesionStore } from '@/stores/usuario';
+	import { likePublicacion } from '@/hooks/likePublicacion';
 
 	interface postProp {
 		post: Post;
@@ -38,6 +41,8 @@
 	let cargandoBorrar = $state(false);
 	let mensajeError = $state('');
 	let cargandoEditar = $state(false);
+	let cargandoLike = $state(false);
+	let errorLike = $state(false);
 
 	async function handleBorrar() {
 		await deletePost(
@@ -50,9 +55,27 @@
 		);
 	}
 
-	async function handleEditar() {
+	function handleEditar() {
 		postAModificar = post;
 	}
+
+	async function likeHandler() {
+		cargandoLike = true;
+		let { message, ok } = await likePublicacion(post);
+		if (ok) {
+			if (post.isLiked) {
+				post.likesCount--;
+			} else {
+				post.likesCount++;
+			}
+			post.isLiked = !post.isLiked;
+		} else {
+			errorLike = true;
+			mensajeError = message;
+		}
+		updatePostStore(post.id, post);
+		cargandoLike = false;
+	}
 </script>
 
 <Card>
@@ -61,10 +84,10 @@
 			<div class="flex items-center justify-between">
 				<div class="flex gap-3">
 					<a href={`/${post.authorName}`}>
-					<Avatar>
-						<AvatarImage></AvatarImage>
-						<AvatarFallback>{post.authorDisplayName[0].toUpperCase()}</AvatarFallback>
-					</Avatar>
+						<Avatar>
+							<AvatarImage></AvatarImage>
+							<AvatarFallback>{post.authorDisplayName[0].toUpperCase()}</AvatarFallback>
+						</Avatar>
 					</a>
 					<div class="flex space-x-2">
 						<span class="text-lg font-medium">{post.authorDisplayName}</span>
@@ -74,7 +97,7 @@
 				{#if post.authorName === $sesionStore?.username}
 					<DropdownMenu>
 						<DropdownMenuTrigger>
-							<Button variant="ghost" class="rounded-full"><Ellipsis /></Button>
+							<Button variant="ghost" class=" rounded-full bg-accent"><Ellipsis /></Button>
 						</DropdownMenuTrigger>
 						<DropdownMenuContent>
 							<DropdownMenuGroup>
@@ -103,16 +126,31 @@
 			</div>
 		</div>
 	</CardHeader>
-	<Content>
-		<p class="text-sm">{post.content}</p>
+	<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>
 	<CardFooter>
-		<div class="flex items-center justify-between gap-2 pt-2 text-xs text-muted-foreground">
-			<span>{post.likesCount} likes</span>
-			<span>{post.repliesCount} replies</span>
+		<div class="-mt-2 flex items-center justify-between gap-2 text-xs text-muted-foreground">
+			<Button
+				variant="ghost"
+				class="flex items-center gap-2 rounded-full bg-accent p-3 text-lg"
+				onclick={() => likeHandler()}
+			>
+				<p>
+					{post.likesCount}
+				</p>
+				<ThumbsUp />
+			</Button>
+			<Button variant="ghost" class="flex items-center gap-2 rounded-full bg-accent p-3 text-lg">
+				<p>
+					{post.repliesCount}
+				</p>
+				<MessageCircle />
+			</Button>
+
 			<span class="text-xs text-muted-foreground"
 				>{post.createdAt.replace('T', ' ').split('.')[0]}</span
 			>
@@ -122,7 +160,7 @@
 		</div>
 	</CardFooter>
 </Card>
-{#if mensajeError}
+{#if mensajeError || errorLike}
 	<Dialog>
 		<DialogContent>
 			<DialogHeader>

src/lib/hooks/likePublicacion.ts

@@ -0,0 +1,21 @@
+import { apiBase } from '@/stores/url';
+import { get } from 'svelte/store';
+import { sesionStore } from '@/stores/usuario';
+import type { Post } from '../../types';
+
+export async function likePublicacion(post: Post) {
+	try {
+		const req = await fetch(get(apiBase) + `/api/posts/${post.id}/like`, {
+			method: post.isLiked ? 'DELETE' : 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+				Authorization: `Bearer ${get(sesionStore)?.accessToken}`
+			}
+		});
+
+		const data: { message: string } = await req.json();
+		return { message: data.message, ok: req.ok };
+	} catch {
+		return { message: 'No se pudo alcanzar el servidor', ok: false };
+	}
+}

src/types.d.ts

@@ -15,6 +15,7 @@ export interface Post {
 	isEdited: boolean;
 	visibility: string;
 	hashtags?: string[];
+	isLiked: boolean;
 }
 
 export interface User {