Feat/metagram message

.vscode/settings.json

@@ -22,7 +22,7 @@
         }
     },
     "[svelte]": {
-        "editor.defaultFormatter": "biomejs.biome",
+        "editor.defaultFormatter": "svelte.svelte-vscode",
         "editor.codeActionsOnSave": {
             "source.organizeImports.biome": "explicit",
             "source.fixAll.biome": "explicit"

platforms/metagram/src/lib/ui/Message/Message.stories.ts

@@ -0,0 +1,35 @@
+import type { ComponentProps } from "svelte";
+import Message from "./Message.svelte";
+
+export default {
+    title: "UI/Message",
+    component: Message,
+    tags: ["autodocs"],
+    render: (args: {
+        Component: Message;
+        props: ComponentProps<typeof Message>;
+    }) => ({
+        Component: Message,
+        props: args,
+    }),
+};
+
+export const Primary = {
+    args: {
+        avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+        username: "donaldthefirstt",
+        text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
+        unread: false,
+        callback: () => alert("Message clicked"),
+    },
+};
+
+export const Unread = {
+    args: {
+        avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+        username: "donaldthefirstt",
+        text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
+        unread: true,
+        callback: () => alert("Message clicked"),
+    },
+};

platforms/metagram/src/lib/ui/Message/Message.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { Avatar } from '$lib/ui';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface IMessageProps extends HTMLAttributes<HTMLButtonElement> {
+		avatar: string;
+		username: string;
+		text: string;
+		unread?: boolean;
+		callback: () => void;
+	}
+
+	const {
+		avatar,
+		username,
+		text,
+		unread = false,
+		callback,
+		...restProps
+	}: IMessageProps = $props();
+
+	const messageText = $derived(text.length < 80 ? text : `${text.substring(0, 80)}...`);
+</script>
+
+<button
+	{...restProps}
+	class={cn([
+		'relative flex w-full cursor-pointer items-center gap-2 rounded-lg py-4 hover:bg-gray-100',
+		restProps.class
+	])}
+	onclick={callback}
+>
+	<Avatar src={avatar} alt="User Avatar" size="md" />
+	<span class="flex w-full flex-col items-start justify-end gap-1">
+		<span class="flex w-full items-center justify-between">
+			<h2>{username}</h2>
+			{#if unread}
+				<span class="h-2 w-2 rounded-full bg-blue-500"></span>
+			{/if}
+		</span>
+		<p class="text-black/60">{messageText}</p>
+	</span>
+</button>
+
+<!--
+@component
+@name Message
+@description A message component that displays a user's avatar, username, and message text. It also includes an optional unread indicator.
+@props
+    - avatar: string - The URL of the user's avatar image.
+    - username: string - The name of the user.
+    - text: string - The message text.
+    - unread: boolean - Optional. Indicates if the message is unread. Defaults to false.
+    - callback: () => void - Function to call when the message is clicked.
+@usage
+    <script>
+        import { Message } from '$lib/ui';
+    </script>
+
+    <Message
+        avatar="https://example.com/avatar.jpg"
+        username="John Doe"
+        text="Hello, how are you?"
+        unread={true}
+        callback={() => console.log('Message clicked')}
+    />
+-->

platforms/metagram/src/lib/ui/index.ts

@@ -1,2 +1,3 @@
 export { default as Button } from "./Button/Button.svelte";
 export { default as Avatar } from "./Avatar/Avatar.svelte";
+export { default as Message } from "./Message/Message.svelte";