retocado la ui de la pagina para ver los posts

src/routes/post/[idpost]/+page.svelte

@@ -2,21 +2,31 @@
 	import Card from '@/components/ui/card/card.svelte';
 	import { Content } from '@/components/ui/card';
 	import Spinner from '@/components/ui/spinner/spinner.svelte';
-	import type { Post, PostResponseDto } from '../../../types';
+	import type { Post } from '../../../types';
 	import PostCard from '@/components/PostCard.svelte';
 	import ModalEditar from '../../[perfil]/modalEditar.svelte';
-	import { fade } from 'svelte/transition';
+	import { fade, slide } from 'svelte/transition';
 	import { updatePost } from '@/hooks/updatePost';
-	import { invalidate } from '$app/navigation';
+	import { goto, invalidate } from '$app/navigation';
 	import Separator from '@/components/ui/separator/separator.svelte';
 	import CrearPost from '@/components/crear-post.svelte';
+	import Button from '@/components/ui/button/button.svelte';
+	import { resolve } from '$app/paths';
+	import MessageCircleMore from '@lucide/svelte/icons/message-circle-more';
+	import { sesionStore } from '@/stores/usuario';
+	import { likePost } from '@/hooks/likePost';
+	import ThumbsUp from '@lucide/svelte/icons/thumbs-up';
+	import { TamañoPantalla } from './TamañoPantalla.svelte';
 
 	interface Prop {
 		data: {
 			post: Post;
+			respuestas: Post[];
 		};
 	}
 
+	let tamaño = new TamañoPantalla();
+
 	let { data }: Prop = $props();
 	// $inspect(data);
 	let postAModificar: Post | null = $state(null);
@@ -27,6 +37,24 @@
 		await updatePost(postAModificar, (postnuevo: Post) => invalidate('post:post'), '');
 		postAModificar = null;
 	}
+
+	async function likeHandler(post) {
+		//para que se vea el spinner
+		let [{ message, ok }] = await Promise.all([
+			likePost(post),
+			new Promise((resolve) => setTimeout(resolve, 300))
+		]);
+		if (ok) {
+			if (post.isLiked) {
+				post.likesCount--;
+			} else {
+				post.likesCount++;
+			}
+			post.isLiked = !post.isLiked;
+		} else {
+		}
+		invalidate('post:respuestas');
+	}
 </script>
 
 <svelte:head>
@@ -64,8 +92,13 @@
 		</div>
 
 		<div class="flex flex-col gap-2">
-			{#each data.respuestas as respuesta}
-				<PostCard post={respuesta} bind:postAModificar update={() => invalidate('post:post')} />
+			{#each data.respuestas as respuesta (respuesta.id)}
+				<!-- {#if tamaño.isMobile} -->
+				<!-- {#if true} -->
+				{@render Respuesta(respuesta)}
+				<!-- {:else} -->
+				<!-- <PostCard post={respuesta} bind:postAModificar update={() => invalidate('post:post')} /> -->
+				<!-- {/if} -->
 			{/each}
 		</div>
 	</div>
@@ -76,4 +109,52 @@
 	</div>
 {/if}
 
-{#snippet Respuesta()}{/snippet}
+{#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>
+			{/if}
+			<span class="text-sm font-semibold">@{post.authorName}</span>
+			<span class="text-xs text-gray-500">{new Date(post.createdAt).toLocaleDateString()}</span>
+		</div>
+		<p class=" mt-1 line-clamp-2 rounded-md p-2 text-lg">
+			{post.content}
+		</p>
+		{#if post.imageUrl}
+			<img src={post.imageUrl} alt="Imagen de respuesta" class="mt-2 h-auto max-w-full rounded" />
+		{/if}
+		<div class="mt-2 flex gap-2">
+			<button
+				disabled={!$sesionStore?.accessToken}
+				class={`${post.isLiked ? 'bg-blue-500/30' : ''} flex items-center gap-1 rounded-full p-2! text-lg`}
+				onclick={() => likeHandler(post)}
+			>
+				<p>
+					{post.likesCount}
+				</p>
+				<ThumbsUp class="h-5 w-5" />
+			</button>
+			<button
+				class="flex items-center gap-1 rounded-full p-2! text-lg"
+				onclick={() => goto(resolve('/post/[idpost]', { idpost: post.id }))}
+			>
+				<p>
+					{post.repliesCount}
+				</p>
+				<MessageCircleMore class="h-5 w-5" />
+			</button>
+		</div>
+	</div>
+	<Separator class="bg-white/50" />
+{/snippet}

src/routes/post/[idpost]/TamañoPantalla.svelte.ts

@@ -0,0 +1,5 @@
+import { innerWidth } from 'svelte/reactivity/window';
+export class TamañoPantalla {
+	width = $derived(() => innerWidth.current || 1080);
+	isMobile = $derived(this.width() < 768);
+}