Merge pull request #12 from emailerfacu-spec/dev

Dev

src/lib/components/PostCard.svelte

@@ -26,7 +26,6 @@
 	import DialogHeader from './ui/dialog/dialog-header.svelte';
 	import DialogTitle from './ui/dialog/dialog-title.svelte';
 	import DialogDescription from './ui/dialog/dialog-description.svelte';
-	import { updatePost } from '@/hooks/updatePost';
 	import { sesionStore } from '@/stores/usuario';
 
 	interface postProp {

src/lib/components/crear-post.svelte

@@ -10,6 +10,9 @@
 	import { sesionStore } from '@/stores/usuario';
 	import type { CreatePostDto } from '../../types';
 	import { addPost } from '@/stores/posts';
+	import { Tooltip, TooltipProvider } from './ui/tooltip';
+	import TooltipContent from './ui/tooltip/tooltip-content.svelte';
+	import TooltipTrigger from './ui/tooltip/tooltip-trigger.svelte';
 
 	let mensaje = $state('');
 
@@ -63,7 +66,7 @@
 	<InputGroup>
 		<InputGroupTextarea
 			bind:value={mensaje}
-			maxlength="280"
+			maxlength={280}
 			placeholder="Alguna novedad?"
 			onkeydown={handleKeydown}
 		></InputGroupTextarea>
@@ -76,15 +79,24 @@
 					</p>
 					/ 280
 				</Kbd>
-				<InputGroupButton
+				<TooltipProvider>
-					variant="default"
+					<Tooltip>
-					type="submit"
+						<TooltipTrigger class="*: flex">
-					class="transform rounded-full transition-transform ease-in hover:scale-120"
+							<InputGroupButton
-					size="xs"
+								variant="default"
-				>
+								type="submit"
-					<p>Publicar</p>
+								class="transform rounded-full transition-transform ease-in hover:scale-120"
-					<ArrowUpIcon />
+								size="xs"
-				</InputGroupButton>
+							>
+								<p>Publicar</p>
+								<ArrowUpIcon class="mt-0.5 h-3.5! w-3.5!" />
+							</InputGroupButton>
+						</TooltipTrigger>
+						<TooltipContent>
+							<Kbd>Ctrl</Kbd>+<Kbd>Enter</Kbd>
+						</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
 			</div>
 		</InputGroupAddon>
 	</InputGroup>

src/lib/components/ui/hover-card/hover-card-content.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		align = "center",
+		sideOffset = 4,
+		portalProps,
+		...restProps
+	}: HoverCardPrimitive.ContentProps & {
+		portalProps?: HoverCardPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<HoverCardPrimitive.Portal {...portalProps}>
+	<HoverCardPrimitive.Content
+		bind:ref
+		data-slot="hover-card-content"
+		{align}
+		{sideOffset}
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 outline-hidden z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</HoverCardPrimitive.Portal>

src/lib/components/ui/hover-card/hover-card-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: HoverCardPrimitive.TriggerProps = $props();
+</script>
+
+<HoverCardPrimitive.Trigger bind:ref data-slot="hover-card-trigger" {...restProps} />

src/lib/components/ui/hover-card/index.ts

@@ -0,0 +1,14 @@
+import { LinkPreview as HoverCardPrimitive } from "bits-ui";
+import Content from "./hover-card-content.svelte";
+import Trigger from "./hover-card-trigger.svelte";
+
+const Root = HoverCardPrimitive.Root;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Root as HoverCard,
+	Content as HoverCardContent,
+	Trigger as HoverCardTrigger,
+};

src/lib/components/ui/tooltip/index.ts

@@ -0,0 +1,21 @@
+import { Tooltip as TooltipPrimitive } from "bits-ui";
+import Trigger from "./tooltip-trigger.svelte";
+import Content from "./tooltip-content.svelte";
+
+const Root = TooltipPrimitive.Root;
+const Provider = TooltipPrimitive.Provider;
+const Portal = TooltipPrimitive.Portal;
+
+export {
+	Root,
+	Trigger,
+	Content,
+	Provider,
+	Portal,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+	Provider as TooltipProvider,
+	Portal as TooltipPortal,
+};

src/lib/components/ui/tooltip/tooltip-content.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 0,
+		side = "top",
+		children,
+		arrowClasses,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		arrowClasses?: string;
+	} = $props();
+</script>
+
+<TooltipPrimitive.Portal>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			"bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-tooltip-content-transform-origin) z-50 w-fit text-balance rounded-md px-3 py-1.5 text-xs",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<div
+					class={cn(
+						"bg-primary z-50 size-2.5 rotate-45 rounded-[2px]",
+						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%_+_2px)]",
+						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%_+_1px)]",
+						"data-[side=right]:translate-x-[calc(50%_+_2px)] data-[side=right]:translate-y-1/2",
+						"data-[side=left]:-translate-y-[calc(50%_-_3px)]",
+						arrowClasses
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPrimitive.Portal>

src/lib/components/ui/tooltip/tooltip-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />

src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import '../app.css';
-	import favicon from '$lib/assets/favicon.svg';
+	import favicon from '$lib/assets/favicon.ico';
 	import { ModeWatcher } from 'mode-watcher';
 	import Header from '@/head/Header.svelte';
 
@@ -9,6 +9,7 @@
 
 <svelte:head>
 	<link rel="icon" href={favicon} />
+	<title>Mini X</title>
 </svelte:head>
 <ModeWatcher />
 <Header />

src/routes/+page.svelte

@@ -4,8 +4,12 @@
 	import { apiBase } from '@/stores/url';
 	import { sesionStore } from '@/stores/usuario';
 	import CrearPost from '@/components/crear-post.svelte';
-	import { posts, setPosts } from '@/stores/posts';
+	import { posts, setPosts, updatePostStore } from '@/stores/posts';
 	import PostCard from '@/components/PostCard.svelte';
+	import type { Post } from '../types';
+	import ModalEditar from './[perfil]/modalEditar.svelte';
+	import { updatePost } from '@/hooks/updatePost';
+	import { fade, slide } from 'svelte/transition';
 
 	$effect(() => {
 		(async () => {
@@ -26,6 +30,21 @@
 			return await req.json();
 		}
 	}
+
+	let postAModificar: Post | null = $state(null);
+	let mensajeError = $state('');
+
+	async function handleEditar(e: SubmitEvent) {
+		e.preventDefault();
+		if (postAModificar == null) return;
+		await updatePost(
+			postAModificar,
+			(postnuevo: Post) => updatePostStore(postAModificar!.id, postnuevo),
+
+			mensajeError
+		);
+		postAModificar = null;
+	}
 </script>
 
 <div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
@@ -43,10 +62,17 @@
 					</Content>
 				</Card>
 			{:else}
-				{#each $posts as post}
+				{#each $posts as post (post.id)}
-					<PostCard {post} />
+					<div transition:slide>
+						<PostCard {post} bind:postAModificar />
+					</div>
 				{/each}
 			{/if}
 		</div>
 	</div>
 </div>
+{#if postAModificar}
+	<div in:fade>
+		<ModalEditar callbackfn={handleEditar} bind:post={postAModificar} />
+	</div>
+{/if}

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

@@ -109,8 +109,8 @@
 			</div>
 		{:else}
 			<div class="flex flex-col gap-2">
-				{#each $posts as post}
+				{#each $posts as post (post.id)}
-					<div out:slide>
+					<div transition:slide>
 						<PostCard {post} bind:postAModificar />
 					</div>
 				{/each}

src/routes/[perfil]/modalEditar.svelte

@@ -11,6 +11,9 @@
 	import DialogDescription from '@/components/ui/dialog/dialog-description.svelte';
 	import DialogHeader from '@/components/ui/dialog/dialog-header.svelte';
 	import DialogTitle from '@/components/ui/dialog/dialog-title.svelte';
+	import { Tooltip, TooltipProvider } from '@/components/ui/tooltip';
+	import TooltipTrigger from '@/components/ui/tooltip/tooltip-trigger.svelte';
+	import TooltipContent from '@/components/ui/tooltip/tooltip-content.svelte';
 
 	interface Props {
 		post: Post | null;
@@ -53,15 +56,26 @@
 								</p>
 								/ 280
 							</Kbd>
-							<InputGroupButton
+							<TooltipProvider>
-								variant="default"
+								<Tooltip>
-								type="submit"
+									<TooltipTrigger>
-								class="transform rounded-full transition-transform ease-in hover:scale-120"
+										<InputGroupButton
-								size="xs"
+											variant="default"
-							>
+											type="submit"
-								<p>Modificar</p>
+											class="transform rounded-full transition-transform ease-in hover:scale-120"
-								<ArrowUpIcon />
+											size="xs"
-							</InputGroupButton>
+										>
+											<p class="flex items-center gap-1">
+												Modificar
+												<ArrowUpIcon class="mt-0.5 h-3.5! w-3.5!" />
+											</p>
+										</InputGroupButton>
+									</TooltipTrigger>
+									<TooltipContent>
+										<Kbd>Ctrl</Kbd>+<Kbd>Enter</Kbd>
+									</TooltipContent>
+								</Tooltip>
+							</TooltipProvider>
 						</div>
 					</InputGroupAddon>
 				</InputGroup>