diff --git a/platforms/metagram/src/lib/fragments/ChatMessage/ChatMessage.stories.ts b/platforms/metagram/src/lib/fragments/ChatMessage/ChatMessage.stories.ts new file mode 100644 index 00000000..10b38e6f --- /dev/null +++ b/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 }) => ({ + Component: ChatMessage, + props: args + }) +}; + +export const Outgoing = { + args: { + isOwn: true + } +}; + +export const Incoming = { + args: { + isOwn: 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.' + } +}; + +export const OutgoingWithoutHead = { + args: { + isOwn: true, + isHeadNeeded: false + } +}; + +export const WithoutHead = { + args: { + isOwn: false, + 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.' + } +}; diff --git a/platforms/metagram/src/lib/fragments/ChatMessage/ChatMessage.svelte b/platforms/metagram/src/lib/fragments/ChatMessage/ChatMessage.svelte new file mode 100644 index 00000000..cd668399 --- /dev/null +++ b/platforms/metagram/src/lib/fragments/ChatMessage/ChatMessage.svelte @@ -0,0 +1,73 @@ + + +
+
+ {#if isHeadNeeded} + + {/if} +
+ +
+
+ {#if isHeadNeeded} + + + + {/if} + +

+ {message} +

+
+ +

+ {time} +

+
+
diff --git a/platforms/metagram/src/lib/fragments/Header/Header.svelte b/platforms/metagram/src/lib/fragments/Header/Header.svelte index 09bda939..2694cb43 100644 --- a/platforms/metagram/src/lib/fragments/Header/Header.svelte +++ b/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 { 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 @@ > + {:else if variant === 'secondary' && options} + {/if} diff --git a/platforms/metagram/src/lib/fragments/Message/Message.svelte b/platforms/metagram/src/lib/fragments/Message/Message.svelte index 1d3f2607..0d704f1e 100644 --- a/platforms/metagram/src/lib/fragments/Message/Message.svelte +++ b/platforms/metagram/src/lib/fragments/Message/Message.svelte @@ -26,7 +26,7 @@ diff --git a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte index 199e2209..c37f00b3 100644 --- a/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte +++ b/platforms/metagram/src/lib/fragments/MessageInput/MessageInput.svelte @@ -1,7 +1,7 @@ diff --git a/platforms/metagram/src/lib/icons/Icons.svelte b/platforms/metagram/src/lib/icons/Icons.svelte index 51ee9ed0..d98ee94e 100644 --- a/platforms/metagram/src/lib/icons/Icons.svelte +++ b/platforms/metagram/src/lib/icons/Icons.svelte @@ -1,11 +1,11 @@
- + diff --git a/platforms/metagram/src/lib/icons/index.ts b/platforms/metagram/src/lib/icons/index.ts index e68aa3b3..03319c13 100644 --- a/platforms/metagram/src/lib/icons/index.ts +++ b/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'; diff --git a/platforms/metagram/src/routes/(protected)/+layout.svelte b/platforms/metagram/src/routes/(protected)/+layout.svelte index 276c9520..89063544 100644 --- a/platforms/metagram/src/routes/(protected)/+layout.svelte +++ b/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,6 +14,7 @@ let commentInput: HTMLInputElement | undefined = $state(); let _comments = $state(comments); let activeReplyToId: string | null = $state(null); + let chatFriendId = $state(); const handleSend = async () => { const newComment = { @@ -52,20 +52,22 @@ }; $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 === `/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 = ''; } }); @@ -74,9 +76,16 @@ class={`block h-[100dvh] ${route !== '/home' ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`} > alert('adas')} /> -
+
-
+
alert('report') }, + { name: 'Clear chat', handler: () => alert('clear') } + ]} + /> {#if route === '/profile'}