Skip to content

Commit 3d77da0

Browse files
grv-saini-20grv-saini-20
committed
fix: as per suggestion
1 parent c601232 commit 3d77da0

8 files changed

Lines changed: 70 additions & 73 deletions

File tree

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,28 +13,28 @@ export default {
1313

1414
export const Outgoing = {
1515
args: {
16-
transactionType: 'outgoing'
16+
isOwn: true
1717
}
1818
};
1919

2020
export const Incoming = {
2121
args: {
22-
transactionType: 'incoming',
22+
isOwn: false,
2323
message:
2424
'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.'
2525
}
2626
};
2727

2828
export const OutgoingWithoutHead = {
2929
args: {
30-
transactionType: 'outgoing',
30+
isOwn: true,
3131
isHeadNeeded: false
3232
}
3333
};
3434

3535
export const WithoutHead = {
3636
args: {
37-
transactionType: 'incoming',
37+
isOwn: false,
3838
isHeadNeeded: false,
3939
message:
4040
'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‎

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@
77
userImgSrc: string;
88
message: string;
99
time: string;
10-
transactionType: 'incoming' | 'outgoing';
10+
isOwn: boolean;
1111
isHeadNeeded?: boolean;
1212
}
1313
1414
let {
1515
userImgSrc = 'https://picsum.photos/id/237/200/300',
1616
message = 'i was thinking maybe like 12th?',
1717
time = '12:55 AM',
18-
transactionType = 'incoming',
18+
isOwn,
1919
isHeadNeeded = true,
2020
...restProps
2121
}: IChatMessageProps = $props();
@@ -24,10 +24,7 @@
2424
<div
2525
{...restProps}
2626
class={cn(
27-
[
28-
`flex items-start gap-2 ${transactionType === 'incoming' ? 'flex-row-reverse' : 'flex'}`,
29-
restProps.class
30-
].join(' ')
27+
[`flex items-start gap-2 ${isOwn ? 'flex' : 'flex-row-reverse'}`, restProps.class].join(' ')
3128
)}
3229
>
3330
<div class="w-8 flex-shrink-0">
@@ -39,12 +36,12 @@
3936
<div class={cn(`max-w-[50%] ${isHeadNeeded ? 'mt-4' : 'mt-0'}`)}>
4037
<div
4138
class={cn(
42-
`relative rounded-3xl px-4 py-2 ${transactionType === 'incoming' ? 'bg-brand-burnt-orange' : 'bg-grey'}`
39+
`relative rounded-3xl px-4 py-2 ${isOwn ? 'bg-grey' : 'bg-brand-burnt-orange'}`
4340
)}
4441
>
4542
{#if isHeadNeeded}
4643
<svg
47-
class={`absolute ${transactionType === 'outgoing' ? 'start-[-5px] top-[-2px]' : 'end-[-5px] top-[2px]'}`}
44+
class={`absolute ${isOwn ? 'start-[-5px] top-[-2px]' : 'end-[-5px] top-[2px]'}`}
4845
width="22"
4946
height="17"
5047
viewBox="0 0 22 17"
@@ -53,22 +50,20 @@
5350
>
5451
<path
5552
d="M0 0C5.79116 4.95613 8.40437 9.60298 10 17L22 2C11 2.5 7.53377 0.634763 0 0Z"
56-
fill={transactionType === 'outgoing'
57-
? '#F5F5F5'
58-
: 'var(--color-brand-burnt-orange)'}
53+
fill={isOwn ? '#F5F5F5' : 'var(--color-brand-burnt-orange)'}
5954
/>
6055
</svg>
6156
{/if}
6257

63-
<p class={cn(`${transactionType === 'incoming' ? 'text-white' : 'text-black-600'}`)}>
58+
<p class={cn(`${!isOwn ? 'text-white' : 'text-black-600'}`)}>
6459
{message}
6560
</p>
6661
</div>
6762

6863
<p
6964
class={cn(
7065
`subtext text-black-400 mt-0.5 flex text-xs text-nowrap ${
71-
transactionType === 'incoming' ? 'justify-end' : 'justify-start'
66+
isOwn ? 'justify-end' : 'justify-start'
7267
}`
7368
)}
7469
>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
variant: 'primary' | 'secondary' | 'tertiary';
1515
heading?: string;
1616
callback?: () => void;
17-
options?: {name: string, handler: () => void}[];
17+
options?: { name: string; handler: () => void }[];
1818
}
1919
2020
const { variant, callback, heading, options, ...restProps }: IHeaderProps = $props();
@@ -88,8 +88,8 @@
8888
>
8989
<HugeiconsIcon icon={menuButton[variant]} size={24} color="var(--color-black-500)" />
9090
</button>
91-
{:else if variant === "secondary" && options}
92-
<ActionMenu {options}/>
91+
{:else if variant === 'secondary' && options}
92+
<ActionMenu {options} />
9393
{/if}
9494
</header>
9595

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

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -40,29 +40,29 @@
4040
<!-- svelte-ignore a11y_click_events_have_key_events -->
4141
<!-- svelte-ignore a11y_no_static_element_interactions -->
4242
<input
43-
id="add-image"
44-
type="file"
45-
class="hidden"
46-
accept="image/*"
47-
bind:files
48-
bind:this={fileInput}
49-
/>
43+
id="add-image"
44+
type="file"
45+
class="hidden"
46+
accept="image/*"
47+
bind:files
48+
bind:this={fileInput}
49+
/>
5050
<button
51-
type="button"
52-
class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full border-0 p-0"
53-
aria-label="add-image"
54-
onclick={() => fileInput?.click()}
51+
type="button"
52+
class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full border-0 p-0"
53+
aria-label="add-image"
54+
onclick={() => fileInput?.click()}
5555
>
5656
<HugeiconsIcon size="24px" icon={PlusSignIcon} color="var(--color-black-400)" />
5757
</button>
5858
{/if}
5959
<Input type="text" bind:input bind:value {placeholder} />
60-
<!-- svelte-ignore a11y_click_events_have_key_events -->
61-
<!-- svelte-ignore a11y_no_static_element_interactions -->
62-
<div
63-
class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full"
64-
onclick={handleSend}
65-
>
66-
<HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-400)" />
67-
</div>
60+
<!-- svelte-ignore a11y_click_events_have_key_events -->
61+
<!-- svelte-ignore a11y_no_static_element_interactions -->
62+
<div
63+
class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full"
64+
onclick={handleSend}
65+
>
66+
<HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-400)" />
67+
</div>
6868
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ export const isNavigatingThroughNav = $state({
44

55
export const showComments = $state({
66
value: false
7-
});
7+
});

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

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@
1616
let activeReplyToId: string | null = $state(null);
1717
let chatFriendId = $state();
1818
19-
2019
const handleSend = async () => {
2120
const newComment = {
2221
userImgSrc: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
@@ -29,7 +28,7 @@
2928
time: 'Just now',
3029
replies: []
3130
};
32-
31+
3332
if (activeReplyToId) {
3433
// Find the parent comment by id and push reply
3534
const addReplyToComment = (commentsArray: CommentType[]) => {
@@ -61,10 +60,9 @@
6160
heading = 'Search';
6261
} else if (route.includes('post')) {
6362
heading = 'Post';
64-
} else if (route === `/messages/${chatFriendId}`){
63+
} else if (route === `/messages/${chatFriendId}`) {
6564
heading = 'User Name';
66-
}
67-
else if (route.includes('messages')) {
65+
} else if (route.includes('messages')) {
6866
heading = 'Messages';
6967
} else if (route.includes('settings')) {
7068
heading = 'Settings';
@@ -78,12 +76,16 @@
7876
class={`block h-[100dvh] ${route !== '/home' ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
7977
>
8078
<SideBar profileSrc="https://picsum.photos/200" handlePost={async () => alert('adas')} />
81-
<section class="hide-scrollbar h-[100dvh] overflow-y-auto px-4 md:px-8 md:pt-8 pb-8">
79+
<section class="hide-scrollbar h-[100dvh] overflow-y-auto px-4 pb-8 md:px-8 md:pt-8">
8280
<div class="flex items-center justify-between">
83-
<Header variant={route === `/messages/${chatFriendId}` ? "secondary" : "primary"} {heading} options={[
84-
{ name: 'Report', handler: () => alert('report') },
85-
{ name: 'Clear chat', handler: () => alert('clear') }
86-
]}/>
81+
<Header
82+
variant={route === `/messages/${chatFriendId}` ? 'secondary' : 'primary'}
83+
{heading}
84+
options={[
85+
{ name: 'Report', handler: () => alert('report') },
86+
{ name: 'Clear chat', handler: () => alert('clear') }
87+
]}
88+
/>
8789
{#if route === '/profile'}
8890
<div class="mb-6 flex md:hidden">
8991
<button
@@ -128,8 +130,8 @@
128130
{/if}
129131
</aside>
130132
{/if}
131-
133+
132134
{#if route !== `/messages/${chatFriendId}`}
133-
<BottomNav class="btm-nav" profileSrc="https://picsum.photos/200" />
135+
<BottomNav class="btm-nav" profileSrc="https://picsum.photos/200" />
134136
{/if}
135137
</main>

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@
1818
callback={() => goto(`/messages/${i}`)}
1919
/>
2020
<Message
21-
class="mb-6"
22-
avatar="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
23-
username="donaldthefirstt"
24-
text="i was thinking of making it to the conference so we could take some more fire pictures like last time"
25-
unread={true}
26-
callback={() => goto(`/messages/${i}`)}
21+
class="mb-6"
22+
avatar="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
23+
username="donaldthefirstt"
24+
text="i was thinking of making it to the conference so we could take some more fire pictures like last time"
25+
unread={true}
26+
callback={() => goto(`/messages/${i}`)}
2727
/>
28-
{/each}
28+
{/each}
2929
</section>

‎platforms/metagram/src/routes/(protected)/messages/[id]/+page.svelte‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,60 +4,60 @@
44
let messageValue = $state('');
55
</script>
66

7-
<section class="relative chat">
7+
<section class="chat relative">
88
{#each { length: 12 } as _}
99
<ChatMessage
10-
transactionType="outgoing"
10+
isOwn={true}
1111
userImgSrc="https://picsum.photos/id/237/200/300"
1212
time="12:55 AM"
1313
message="Lorem ipsum dolor sit amet consectetur adipisicing"
1414
/>
1515

1616
<ChatMessage
17-
transactionType="outgoing"
17+
isOwn={true}
1818
userImgSrc="https://picsum.photos/id/237/200/300"
1919
time="12:55 AM"
2020
isHeadNeeded={false}
2121
message="Lorem ipsum dolor sit amet consectetur adipisicing"
2222
/>
2323

2424
<ChatMessage
25-
transactionType="outgoing"
25+
isOwn={true}
2626
userImgSrc="https://picsum.photos/id/237/200/300"
2727
time="12:55 AM"
2828
isHeadNeeded={false}
2929
message="Lorem ipsum dolor sit amet consectetur adipisicing"
3030
/>
3131

3232
<ChatMessage
33-
transactionType="incoming"
33+
isOwn={true}
3434
userImgSrc="https://picsum.photos/id/237/500"
3535
time="12:55 AM"
3636
message="Lorem ipsum dolor sit amet consectetur adipisicing"
3737
/>
3838

3939
<ChatMessage
40-
transactionType="incoming"
40+
isOwn={false}
4141
userImgSrc="https://picsum.photos/id/237/500"
4242
time="12:55 AM"
4343
isHeadNeeded={false}
4444
message="Lorem ipsum dolor sit amet consectetur adipisicing"
4545
/>
4646

4747
<ChatMessage
48-
transactionType="incoming"
48+
isOwn={false}
4949
userImgSrc="https://picsum.photos/id/237/500"
5050
time="12:55 AM"
5151
isHeadNeeded={false}
5252
message="Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum dolor sit amet consectetur adipisicing Lorem ipsum dolor sit amet consectetur adipisicing "
5353
/>
5454
{/each}
5555

56-
<MessageInput
57-
class="sticky start-0 bottom-[-15px] w-full"
58-
variant="dm"
59-
src="https://picsum.photos/id/237/200/300"
60-
bind:value={messageValue}
61-
handleSend={async () => alert('sent')}
62-
/>
56+
<MessageInput
57+
class="sticky start-0 bottom-[-15px] w-full"
58+
variant="dm"
59+
src="https://picsum.photos/id/237/200/300"
60+
bind:value={messageValue}
61+
handleSend={async () => alert('sent')}
62+
/>
6363
</section>

0 commit comments

Comments
 (0)