arreglado path /timeline y añadida logica crearpost al fetch

src/lib/components/crear-post.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import InputGroupAddon from './ui/input-group/input-group-addon.svelte';
 	import InputGroupButton from './ui/input-group/input-group-button.svelte';
 	import InputGroupTextarea from './ui/input-group/input-group-textarea.svelte';
@@ -6,29 +6,76 @@
 	import ArrowUpIcon from '@lucide/svelte/icons/arrow-up';
 	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';
+
 	let mensaje = $state('');
+
+	let cargando = $state(false);
+	let mostrarError = $state('');
+
+	async function handlePost(e: Event) {
+		e.preventDefault();
+		try {
+			const data: CreatePostDto = {
+				content: mensaje,
+				imageUrl: null,
+				parentPostId: null
+			};
+
+			const req = fetch($apiBase + '/api/posts', {
+				method: 'POST',
+				//credentials: 'include',
+				headers: {
+					'Content-Type': 'application/json',
+					"Authorization": `Bearer ${$sesionStore?.accessToken}`
+				},
+
+				body: JSON.stringify(data)
+			});
+			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;
+		}
+	}
 </script>
 
-<InputGroup>
-	<InputGroupTextarea bind:value={mensaje} maxlength="255" placeholder="Alguna novedad?"
-	></InputGroupTextarea>
-	<!-- <hr class="w-full" /> -->
-	<InputGroupAddon align="block-end" class="bg-">
-		<div class="flex w-full justify-between">
-			<Kbd class="text-sm leading-none font-medium italic">
-				<p class:text-red-500={mensaje.length > 229}>
-					{mensaje.length}
-				</p>
-				/ 255
-			</Kbd>
-			<InputGroupButton
-				variant="default"
-				class="transform rounded-full transition-transform ease-in hover:scale-120"
-				size="xs"
-			>
-				<p>Publicar</p>
-				<ArrowUpIcon />
-			</InputGroupButton>
-		</div>
-	</InputGroupAddon>
-</InputGroup>
+<form onsubmit={(e: Event) => handlePost(e)}>
+	<InputGroup>
+		<InputGroupTextarea bind:value={mensaje} maxlength="280" placeholder="Alguna novedad?"
+		></InputGroupTextarea>
+
+		<InputGroupAddon align="block-end" class="bg-">
+			<div class="flex w-full justify-between">
+				<Kbd class="text-sm leading-none font-medium italic">
+					<p class:text-red-500={mensaje.length > 239}>
+						{mensaje.length}
+					</p>
+					/ 280
+				</Kbd>
+				<InputGroupButton
+					variant="default"
+					type="submit"
+					class="transform rounded-full transition-transform ease-in hover:scale-120"
+					size="xs"
+				>
+					<p>Publicar</p>
+					<ArrowUpIcon />
+				</InputGroupButton>
+			</div>
+		</InputGroupAddon>
+	</InputGroup>
+</form>

src/lib/stores/posts.ts

@@ -0,0 +1,22 @@
+import { writable } from 'svelte/store';
+import type { Post } from '../../types';
+
+export const posts = writable<Post[]>([]);
+
+export const setPosts = (newPosts: Post[]) => {
+	posts.set(newPosts);
+};
+
+export const addPost = (post: Post) => {
+	posts.update((currentPosts) => [post, ...currentPosts]);
+};
+
+export const updatePost = (postId: string, updatedData: Partial<Post>) => {
+	posts.update((currentPosts) =>
+		currentPosts.map((post) => (post._id === postId ? { ...post, ...updatedData } : post))
+	);
+};
+
+export const removePost = (postId: string) => {
+	posts.update((currentPosts) => currentPosts.filter((post) => post._id !== postId));
+};