snashot de como tenia las cosas cuando fallaba la invalidacion de ruta

src/lib/components/CardPerfil.svelte

@@ -20,6 +20,7 @@
 	let cargando = $state(false);
 	let hoverimg = $state(false);
 	let image: File | null = $state(null);
+	let usu = $state({displayName: data.displayName, bio: data.bio})
 
 	async function cambiarFotoDePerfil() {
 		const input = document.createElement('input');
@@ -85,11 +86,11 @@
     		</div>
 
 			<h1 class="mt-10 scroll-m-20 text-center text-2xl font-extrabold tracking-tight lg:text-5xl">
-				{data.displayName}
+				{usu.displayName}
 				<p class="ml-2 text-2xl font-medium text-muted-foreground">@{data.username}</p>
 			</h1>
-			<p class="mt-4 rounded-full bg-accent p-4 text-center text-muted-foreground">
-				{data.bio}
+			<p class="mt-4 rounded-4xl bg-accent p-4 text-center text-muted-foreground">
+				{@html usu.bio.replaceAll("\n", "<br>")}
 			</p>
 		{:else}
 			<div class="relative flex w-full items-center justify-center">
@@ -106,11 +107,11 @@
 				</Avatar>
 			</div>
 			<h1 class="mt-10 scroll-m-20 text-center text-2xl font-extrabold tracking-tight lg:text-5xl">
-				{data.displayName}
+				{usu.displayName}
 				<p class="ml-2 text-2xl font-medium text-muted-foreground">@{data.username}</p>
 			</h1>
-			<p class="mt-4 rounded-full bg-accent p-4 text-center text-muted-foreground">
-				{data.bio}
+			<p class="mt-4 rounded-4xl bg-accent p-4 text-center text-muted-foreground">
+				{@html usu.bio.replaceAll("\n", "<br>")}
 			</p>
 			{/if}
 		<div class="flex gap-2 mt-2">

src/lib/components/DialogModificarUsuario.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	import UserPen from "@lucide/svelte/icons/user-pen";
+	import Button, { buttonVariants } from "./ui/button/button.svelte";
+	import { Dialog } from "./ui/dialog";
+	import DialogTrigger from "./ui/dialog/dialog-trigger.svelte";
+	import DialogContent from "./ui/dialog/dialog-content.svelte";
+	import DialogHeader from "./ui/dialog/dialog-header.svelte";
+	import DialogTitle from "./ui/dialog/dialog-title.svelte";
+	import type { UserResponseDto } from "../../types";
+	import Input from "./ui/input/input.svelte";
+	import Field from "./ui/field/field.svelte";
+	import FieldLabel from "./ui/field/field-label.svelte";
+	import Textarea from "./ui/textarea/textarea.svelte";
+	import FieldGroup from "./ui/field/field-group.svelte";
+	import { updateUsuario } from "@/hooks/updateUsuario";
+	import DialogFooter from "./ui/dialog/dialog-footer.svelte";
+	import Spinner from "./ui/spinner/spinner.svelte";
+	import { invalidate, invalidateAll } from "$app/navigation";
+	import { page } from "$app/state";
+
+	let { data = $bindable() } = $props();
+
+	let usuario: UserResponseDto = $state({
+	    id: data.id,
+		username: data.username,
+		displayName: data.displayName,
+		bio: data.bio,
+		profileImageUrl: data.profileImageUrl
+	});
+
+	let cargando = $state(false);
+	let open = $state(false);
+
+	async function onsubmit(e:SubmitEvent | null) {
+     	if (e != null) e.preventDefault();
+		cargando = true;
+		await updateUsuario({
+		    id: usuario.id,
+			profileImage: false,
+		    bio: usuario.bio,
+			displayName: usuario.displayName,
+			profileImageUrl: usuario.profileImageUrl
+		});
+		cargando = false;
+		open = false;
+		// invalidateAll();
+		invalidate(page.url);
+	}
+
+
+	function onkeydown(e: KeyboardEvent) {
+		if (e.ctrlKey && e.key === 'Enter') {
+			onsubmit(null);
+		}
+	}
+</script>
+
+<Dialog bind:open>
+    <DialogTrigger>
+        <div class="fixed bottom-8 right-8">
+            <Button variant="default" size="icon-lg" >
+                <UserPen/>
+            </Button>
+        </div>
+    </DialogTrigger>
+    <form {onsubmit}>
+        <DialogContent>
+            <DialogHeader>
+                <DialogTitle>
+                    <h1 class="text-2xl font-bold">Modificar Usuario</h1>
+                </DialogTitle>
+            </DialogHeader>
+            <FieldGroup {onkeydown}>
+                <Field>
+                    <FieldLabel>
+                        Nombre
+                    </FieldLabel>
+                    <Input id="displayName" type="text" bind:value={usuario.displayName} required />
+                </Field>
+                <Field>
+                    <FieldLabel>
+                        bio
+                    </FieldLabel>
+                    <Textarea id="bio" bind:value={usuario.bio}>
+
+                    </Textarea>
+                </Field>
+                <Field>
+                    <FieldLabel>Email</FieldLabel>
+                    <Input id="email" type="email" bind:value={usuario.email} />
+                </Field>
+            </FieldGroup>
+            <DialogFooter>
+                <Button type="submit">
+                    {#if cargando}
+                       	<Spinner/>
+                    {:else}
+                        Modificar
+                    {/if}
+                    </Button>
+            </DialogFooter>
+        </DialogContent>
+    </form>
+</Dialog>

src/lib/hooks/updateUsuario.ts

@@ -1,48 +1,50 @@
-import { apiBase } from "@/stores/url"
-import { sesionStore } from "@/stores/usuario"
-import { get } from "svelte/store"
+import { apiBase } from '@/stores/url';
+import { sesionStore } from '@/stores/usuario';
+import { get } from 'svelte/store';
 
 export interface AdminUpdateUsuario {
-  id:string,
-  displayName: string | null,
-  bio: string | null,
-  profileImage:boolean,
-  image:File,
-  profileImageUrl:string|null
+	id: string;
+	displayName: string | null;
+	bio: string | null;
+	profileImage: boolean;
+	image: File;
+	profileImageUrl: string | null;
 }
 
 export async function updateUsuario(usuario: Partial<AdminUpdateUsuario>) {
+	const formData = new FormData();
+	if (usuario.displayName) formData.append('displayName', usuario.displayName);
+	if (usuario.bio) formData.append('bio', usuario.bio);
+	if (usuario.profileImage) {
+		if (usuario.profileImageUrl) formData.append('profileImageUrl', 'null');
+	} else {
+		if (usuario.profileImageUrl) {
+			formData.append('profileImageUrl', usuario.profileImageUrl);
+		} else {
+			if (usuario.image) formData.append('profileImage', usuario.image);
+		}
+	}
 
-  const formData = new FormData();
-  if (usuario.displayName) formData.append('displayName', usuario.displayName);
-  if (usuario.bio) formData.append('bio', usuario.bio);
-  if (usuario.image) formData.append('profileImage', usuario.image);
-  if (usuario.profileImage){
-    if (usuario.profileImageUrl) formData.append('profileImageUrl', 'null');
-  }else{
-    if (usuario.profileImageUrl) formData.append('profileImageUrl', usuario.profileImageUrl);
-  }
+	try {
+		const req = await fetch(get(apiBase) + '/api/users/' + usuario.id, {
+			method: 'PUT',
+			headers: {
+				Authorization: `Bearer ${get(sesionStore)?.accessToken}`
+			},
+			body: formData
+		});
+		if (req.status === 204) {
+			let ret = {
+				// bio: usuario.bio,
+				displayName: usuario.displayName
+				// oldImageUrl: usuario.oldImageUrl,
+			};
+			return ret;
+		}
+		const dataa = await req.json();
 
-  try {
-    const req = await fetch(get(apiBase) + "/api/users/"+usuario.id, {
-      method: "PUT",
-      headers: {
-        Authorization: `Bearer ${get(sesionStore)?.accessToken}`
-      },
-      body: formData,
-    });
-    if (req.status === 204) {
-      let ret = {
-        // bio: usuario.bio,
-        displayName: usuario.displayName,
-        // oldImageUrl: usuario.oldImageUrl,
-      }
-      return ret;
-    }
-    const dataa = await req.json();
-
-    return dataa.message;
-  } catch {
-    return "No se pudo alcanzar el servidor"
-  }
+		return dataa.message;
+	} catch {
+		return 'No se pudo alcanzar el servidor';
+	}
 }

src/routes/[perfil]/+page.svelte

@@ -1,9 +1,6 @@
 <script lang="ts">
 	import { apiBase } from '@/stores/url';
-	import Ban from '@lucide/svelte/icons/ban';
 	import PenLine from '@lucide/svelte/icons/pen-line';
-	import Card from '@/components/ui/card/card.svelte';
-	import { CardContent } from '@/components/ui/card';
 	import type { Post } from '../../types.js';
 	import { fade, slide } from 'svelte/transition';
 	import PostCard from '@/components/PostCard.svelte';
@@ -17,13 +14,10 @@
 	import DialogContent from '@/components/ui/dialog/dialog-content.svelte';
 	import DialogTitle from '@/components/ui/dialog/dialog-title.svelte';
 	import { sesionStore } from '@/stores/usuario.js';
-	import CardHeader from '@/components/ui/card/card-header.svelte';
-	import CardTitle from '@/components/ui/card/card-title.svelte';
-	import Badge from '@/components/ui/badge/badge.svelte';
 	import CardCargando from '@/components/CardCargando.svelte';
 	import CardError from '@/components/CardError.svelte';
 	import CardPerfil from '@/components/CardPerfil.svelte';
-	import UserPen from '@lucide/svelte/icons/user-pen';
+	import DialogModificarUsuario from '@/components/DialogModificarUsuario.svelte';
 
 	let { params } = $props();
 
@@ -78,7 +72,7 @@
 		postAModificar = null;
 	}
 </script>
-
+{$inspect(data)}
 <div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
 	<div class="w-full max-w-6xl">
 			<CardPerfil bind:data />
@@ -136,11 +130,7 @@
 	</Dialog>
 </div>
 
-<div class="fixed bottom-8 right-8">
-    <Button variant="default" size="icon-lg" >
-      <UserPen/>
-    </Button>
-</div>
+<DialogModificarUsuario bind:data />
 
 <svelte:head>
 	<meta property="og:title" content="Mini-x" />