From b69e2f19ab85055c4971c93a4f670d231edfc98d Mon Sep 17 00:00:00 2001
From: fede <federico.nicolas.polidoro@gmail.com>
Date: Thu, 8 Jan 2026 12:23:02 -0300
Subject: [PATCH] =?UTF-8?q?a=C3=B1adido=20boton=20de=20seguir=20a=20las=20?=
 =?UTF-8?q?respuestas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/BotonSeguir.svelte |  7 +++--
 src/routes/post/[idpost]/+page.svelte | 38 ++++++++++++++++-----------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/BotonSeguir.svelte b/src/lib/components/BotonSeguir.svelte
index a6a27ec..cd28885 100644
--- a/src/lib/components/BotonSeguir.svelte
+++ b/src/lib/components/BotonSeguir.svelte
@@ -13,7 +13,10 @@
 	import CardError from './CardError.svelte';
 	import { cacheSeguidos } from '@/stores/cacheSeguidos.svelte';
 
-	let { post }: { post: Omit<Partial<Post>, 'authorId'> & { authorId: string } } = $props();
+	let {
+		post,
+		variant = 'icon-lg'
+	}: { post: Omit<Partial<Post>, 'authorId'> & { authorId: string }; variant?: string } = $props();
 
 	let seguido: Boolean | null = $state(null);
 
@@ -59,7 +62,7 @@
 			<Button
 				variant={seguido == true ? 'destructive' : 'outline'}
 				disabled={seguido == null}
-				size="icon-lg"
+				size={variant}
 				onclick={async () => {
 					if (seguido == null) return;
 					const anteriorEstado = seguido;
diff --git a/src/routes/post/[idpost]/+page.svelte b/src/routes/post/[idpost]/+page.svelte
index 647e1c4..a6dbdff 100644
--- a/src/routes/post/[idpost]/+page.svelte
+++ b/src/routes/post/[idpost]/+page.svelte
@@ -17,6 +17,7 @@
 	import { likePost } from '@/hooks/likePost';
 	import ThumbsUp from '@lucide/svelte/icons/thumbs-up';
 	import { TamañoPantalla } from './TamañoPantalla.svelte';
+	import BotonSeguir from '@/components/BotonSeguir.svelte';
 
 	interface Prop {
 		data: {
@@ -115,22 +116,29 @@
 
 {#snippet Respuesta(post: Post)}
 	<div class="ml-2 flex-1">
-		<div class="flex items-center space-x-1">
-			{#if post.authorImageUrl}
-				<img
-					src={post.authorImageUrl}
-					alt={post.authorDisplayName}
-					class="h-8 w-8 shrink-0 rounded-full object-cover"
-				/>
-			{:else}
-				<div
-					class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-300 text-xs font-medium text-white"
-				>
-					{post.authorName?.charAt(0).toUpperCase()}
+		<div class="flex justify-between">
+			<div class="flex items-center space-x-1">
+				{#if post.authorImageUrl}
+					<img
+						src={post.authorImageUrl}
+						alt={post.authorDisplayName}
+						class="h-8 w-8 shrink-0 rounded-full object-cover"
+					/>
+				{:else}
+					<div
+						class="flex h-8 w-8 items-center justify-center rounded-full bg-gray-300 text-xs font-medium text-white"
+					>
+						{post.authorName?.charAt(0).toUpperCase()}
+					</div>
+				{/if}
+				<span class="text-sm font-semibold">@{post.authorName}</span>
+				<span class="text-xs text-gray-500">{new Date(post.createdAt).toLocaleDateString()}</span>
+			</div>
+			{#key $sesionStore?.accessToken}
+				<div class="flex gap-2">
+					<BotonSeguir {post} variant="icon-sm" />
 				</div>
-			{/if}
-			<span class="text-sm font-semibold">@{post.authorName}</span>
-			<span class="text-xs text-gray-500">{new Date(post.createdAt).toLocaleDateString()}</span>
+			{/key}
 		</div>
 		<p class=" mt-1 line-clamp-2 rounded-md p-2 text-lg">
 			{post.content}