feat: messages

platforms/metagram/src/lib/fragments/ChatMessage/ChatMessage.stories.ts

@@ -0,0 +1,42 @@
+import type { ComponentProps } from 'svelte';
+import { ChatMessage } from '..';
+
+export default {
+	title: 'UI/ChatMessage',
+	component: ChatMessage,
+	tags: ['autodocs'],
+	render: (args: { Component: ChatMessage; props: ComponentProps<typeof ChatMessage> }) => ({
+		Component: ChatMessage,
+		props: args
+	})
+};
+
+export const Outgoing = {
+	args: {
+		transactionType: 'outgoing'
+	}
+};
+
+export const Incoming = {
+	args: {
+		transactionType: 'incoming',
+		message:
+			'Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed voluptatem accusantium voluptas vel, libero minus veniam at! Doloribus autem, id, ipsum laudantium dolor blanditiis nulla eum eveniet illo perspiciatis iusto.Voluptas ea pariatur eveniet quidem incidunt vitae sunt, hic labore nisi officiis consectetur autem odio repellendus nesciunt quisquam alias consequatur corrupti quaerat, minus qui. Obcaecati deleniti optio quod quibusdam placeat.'
+	}
+};
+
+export const OutgoingWithoutHead = {
+	args: {
+		transactionType: 'outgoing',
+		isHeadNeeded: false
+	}
+};
+
+export const WithoutHead = {
+	args: {
+		transactionType: 'incoming',
+		isHeadNeeded: false,
+		message:
+			'Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed voluptatem accusantium voluptas vel, libero minus veniam at! Doloribus autem, id, ipsum laudantium dolor blanditiis nulla eum eveniet illo perspiciatis iusto.Voluptas ea pariatur eveniet quidem incidunt vitae sunt, hic labore nisi officiis consectetur autem odio repellendus nesciunt quisquam alias consequatur corrupti quaerat, minus qui. Obcaecati deleniti optio quod quibusdam placeat.'
+	}
+};

platforms/metagram/src/lib/fragments/ChatMessage/ChatMessage.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { Avatar } from '$lib/ui';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface IChatMessageProps extends HTMLAttributes<HTMLElement> {
+		userImgSrc: string;
+		message: string;
+		time: string;
+		transactionType: 'incoming' | 'outgoing';
+		isHeadNeeded?: boolean;
+	}
+
+	let {
+		userImgSrc = 'https://picsum.photos/id/237/200/300',
+		message = 'i was thinking maybe like 12th?',
+		time = '12:55 AM',
+		transactionType = 'incoming',
+		isHeadNeeded = true,
+		...restProps
+	}: IChatMessageProps = $props();
+</script>
+
+<div
+	{...restProps}
+	class={cn(
+		[
+			`flex items-start gap-2 ${transactionType === 'incoming' ? 'flex-row-reverse' : 'flex'}`,
+			restProps.class
+		].join(' ')
+	)}
+>
+	<div class="w-8 flex-shrink-0">
+		{#if isHeadNeeded}
+			<Avatar size="xs" src={userImgSrc} />
+		{/if}
+	</div>
+
+	<div class={cn(`max-w-[50%] ${isHeadNeeded ? 'mt-4' : 'mt-0'}`)}>
+		<div
+			class={cn(
+				`relative rounded-3xl px-4 py-2 ${transactionType === 'incoming' ? 'bg-brand-burnt-orange' : 'bg-grey'}`
+			)}
+		>
+			{#if isHeadNeeded}
+				<svg
+					class={`absolute ${transactionType === 'outgoing' ? 'start-[-8px] top-[-2px]' : 'end-[-8px] top-[2px]'}`}
+					width="22"
+					height="17"
+					viewBox="0 0 22 17"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<path
+						d="M0 0C5.79116 4.95613 8.40437 9.60298 10 17L22 2C11 2.5 7.53377 0.634763 0 0Z"
+						fill={transactionType === 'outgoing'
+							? '#F5F5F5'
+							: 'var(--color-brand-burnt-orange)'}
+					/>
+				</svg>
+			{/if}
+
+			<p class={cn(`${transactionType === 'incoming' ? 'text-white' : 'text-black-600'}`)}>
+				{message}
+			</p>
+		</div>
+
+		<p
+			class={cn(
+				`subtext text-black-400 mt-0.5 flex text-xs text-nowrap ${
+					transactionType === 'incoming' ? 'justify-end' : 'justify-start'
+				}`
+			)}
+		>
+			{time}
+		</p>
+	</div>
+</div>

platforms/metagram/src/lib/fragments/Header/Header.svelte

@@ -8,14 +8,16 @@
 	} from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import ActionMenu from '../ActionMenu/ActionMenu.svelte';
 
 	interface IHeaderProps extends HTMLAttributes<HTMLElement> {
 		variant: 'primary' | 'secondary' | 'tertiary';
 		heading?: string;
 		callback?: () => void;
+		options?: {name: string, handler: () => void}[];
 	}
 
-	const { variant, callback, heading, ...restProps }: IHeaderProps = $props();
+	const { variant, callback, heading, options, ...restProps }: IHeaderProps = $props();
 
 	const variantClasses = {
 		primary: {
@@ -45,7 +47,7 @@
 
 	const classes = $derived({
 		common: cn(
-			'flex items-center justify-between my-4 pb-6 border-b-[1px] md:border-0 border-grey'
+			'w-full flex items-center justify-between my-4 pb-6 border-b-[1px] md:border-0 border-grey'
 		),
 		text: variantClasses[variant].text,
 		background: variantClasses[variant].background
@@ -86,6 +88,8 @@
 		>
 			<HugeiconsIcon icon={menuButton[variant]} size={24} color="var(--color-black-500)" />
 		</button>
+	{:else if variant === "secondary" && options}
+		<ActionMenu {options}/>
 	{/if}
 </header>
 

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

@@ -26,7 +26,7 @@
 <button
 	{...restProps}
 	class={cn([
-		'relative flex w-full cursor-pointer items-center gap-2 rounded-lg py-4 hover:bg-gray-100',
+		'relative flex w-full cursor-pointer items-center gap-2 rounded-lg py-4',
 		restProps.class
 	])}
 	onclick={callback}
@@ -39,7 +39,7 @@
 				<span class="h-2 w-2 rounded-full bg-blue-500"></span>
 			{/if}
 		</span>
-		<p class="text-black/60">{messageText}</p>
+		<p class="text-start text-black/60">{messageText}</p>
 	</span>
 </button>
 

platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Avatar, Input } from '$lib/ui';
 	import { cn } from '$lib/utils';
-	import { ImageCompositionOvalIcon, PlusSignIcon, SentIcon } from '@hugeicons/core-free-icons';
+	import { PlusSignIcon, SentIcon } from '@hugeicons/core-free-icons';
 	import { HugeiconsIcon } from '@hugeicons/svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 
@@ -39,17 +39,24 @@
 	{:else}
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<input
+		id="add-image"
+		type="file"
+		class="hidden"
+		accept="image/*"
+		bind:files
+		bind:this={fileInput}
+	/>
 		<button
-			type="button"
-			class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full border-0 p-0"
-			onclick={handleAdd}
-			aria-label="Add attachment"
+				type="button"
+				class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full border-0 p-0"
+				aria-label="add-image"
+				onclick={() => fileInput?.click()}
 		>
 			<HugeiconsIcon size="24px" icon={PlusSignIcon} color="var(--color-black-400)" />
 		</button>
 	{/if}
 	<Input type="text" bind:input bind:value {placeholder} />
-	{#if value || variant === 'dm'}
 		<!-- svelte-ignore a11y_click_events_have_key_events -->
 		<!-- svelte-ignore a11y_no_static_element_interactions -->
 		<div
@@ -58,28 +65,4 @@
 		>
 			<HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-400)" />
 		</div>
-	{:else}
-		<div class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full">
-			<input
-				id="add-image"
-				type="file"
-				class="hidden"
-				accept="image/*"
-				bind:files
-				bind:this={fileInput}
-			/>
-			<button
-				type="button"
-				class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full border-0 p-0"
-				aria-label="add-image"
-				onclick={() => fileInput?.click()}
-			>
-				<HugeiconsIcon
-					size="24px"
-					icon={ImageCompositionOvalIcon}
-					color="var(--color-black-400)"
-				/>
-			</button>
-		</div>
-	{/if}
 </div>

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

@@ -11,5 +11,6 @@ export { default as SideBar } from './SideBar/SideBar.svelte';
 export { default as RightAside } from './RightAside/RightAside.svelte';
 export { default as SettingsToggleButton } from './SettingsToggleButton/SettingsToggleButton.svelte';
 export { default as Post } from './Post/Post.svelte';
+export { default as ChatMessage } from './ChatMessage/ChatMessage.svelte';
 export { default as Comment } from './Comment/Comment.svelte';
 export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';

platforms/metagram/src/lib/icons/Comment.svelte → platforms/metagram/src/lib/icons/CommentIcon.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { ISvgProps } from './../types';
+	import type { ISvgProps } from '../types';
 
 	let { size = '20px', color = '#A5A5A5', ...restProps }: ISvgProps = $props();
 </script>

platforms/metagram/src/lib/icons/Icons.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { Like, Refresh, Comment, Home, Flash, CommentsTwo, VerticalDots } from '.';
+	import { Like, Refresh, CommentIcon, Home, Flash, CommentsTwo, VerticalDots } from '.';
 </script>
 
 <div class="flex flex-wrap items-center gap-2">
 	<Like />
 	<Refresh />
-	<Comment />
+	<CommentIcon />
 	<VerticalDots />
 	<Home />
 	<Flash />

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

@@ -1,7 +1,7 @@
 export { default as Icons } from './Icons.svelte';
 export { default as Like } from './Like.svelte';
 export { default as Refresh } from './Refresh.svelte';
-export { default as Comment } from './Comment.svelte';
+export { default as CommentIcon } from './CommentIcon.svelte';
 export { default as VerticalDots } from './VerticalDots.svelte';
 export { default as Home } from './Home.svelte';
 export { default as Flash } from './Flash.svelte';

platforms/metagram/src/lib/store/store.svelte.ts

@@ -4,4 +4,4 @@ export const isNavigatingThroughNav = $state({
 
 export const showComments = $state({
 	value: false
-});
+});

platforms/metagram/src/routes/(protected)/+layout.svelte

@@ -2,8 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { comments } from '$lib/dummyData';
-	import { BottomNav, Header, Comment, MessageInput } from '$lib/fragments';
-	import SideBar from '$lib/fragments/SideBar/SideBar.svelte';
+	import { BottomNav, Header, Comment, MessageInput, SideBar } from '$lib/fragments';
 	import { Settings } from '$lib/icons';
 	import { showComments } from '$lib/store/store.svelte';
 	import type { CommentType } from '$lib/types';
@@ -15,7 +14,9 @@
 	let commentInput: HTMLInputElement | undefined = $state();
 	let _comments = $state(comments);
 	let activeReplyToId: string | null = $state(null);
+	let chatFriendId = $state();
 
+
 	const handleSend = async () => {
 		const newComment = {
 			userImgSrc: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
@@ -28,7 +29,7 @@
 			time: 'Just now',
 			replies: []
 		};
-
+		
 		if (activeReplyToId) {
 			// Find the parent comment by id and push reply
 			const addReplyToComment = (commentsArray: CommentType[]) => {
@@ -52,20 +53,23 @@
 	};
 
 	$effect(() => {
+		chatFriendId = page.params.id;
+
 		if (route.includes('home')) {
 			heading = 'Feed';
 		} else if (route.includes('discover')) {
 			heading = 'Search';
 		} else if (route.includes('post')) {
 			heading = 'Post';
-		} else if (route.includes('messages')) {
+		} else if (route === `/messages/${chatFriendId}`){
+			heading = 'User Name';
+		} 
+		else if (route.includes('messages')) {
 			heading = 'Messages';
 		} else if (route.includes('settings')) {
 			heading = 'Settings';
 		} else if (route.includes('profile')) {
 			heading = 'Profile';
-		} else {
-			heading = '';
 		}
 	});
 </script>
@@ -74,9 +78,12 @@
 	class={`block h-[100dvh] ${route !== '/home' ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
 >
 	<SideBar profileSrc="https://picsum.photos/200" handlePost={async () => alert('adas')} />
-	<section class="px-4 md:px-8 md:pt-8">
+	<section class="hide-scrollbar h-[100dvh] overflow-y-auto px-4 md:px-8 md:pt-8 pb-8">
 		<div class="flex items-center justify-between">
-			<Header variant="primary" {heading} />
+			<Header variant={route === `/messages/${chatFriendId}` ?  "secondary" : "primary"} {heading} options={[
+				{ name: 'Report', handler: () => alert('report') },
+				{ name: 'Clear chat', handler: () => alert('clear') }
+			]}/>
 			{#if route === '/profile'}
 				<div class="mb-6 flex md:hidden">
 					<button
@@ -121,5 +128,8 @@
 			{/if}
 		</aside>
 	{/if}
-	<BottomNav profileSrc="https://picsum.photos/200" />
+
+	{#if route !== `/messages/${chatFriendId}`}
+	<BottomNav class="btm-nav"  profileSrc="https://picsum.photos/200" />
+	{/if}
 </main>

platforms/metagram/src/routes/(protected)/messages/+page.svelte

@@ -1,2 +1,21 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import { Message } from '$lib/fragments';
+	import { Input } from '$lib/ui';
+
+	let searchValue = $state('');
 </script>
+
+<section>
+	<Input type="text" bind:value={searchValue} placeholder="Search Messages" class="my-6" />
+	{#each { length: 6 } as _, i}
+		<Message
+			class="mb-6"
+			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={() => goto(`/messages/${i}`)}
+		/>
+	{/each}
+</section>