Skip to content

Commit f185544

Browse files
grv-saini-20grv-saini-20
committed
fix: hide bottom nav for chat
1 parent 7f6cc93 commit f185544

6 files changed

Lines changed: 136 additions & 134 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,4 @@ export const WithoutHead = {
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.'
4141
}
42-
};
42+
};

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

Lines changed: 52 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -8,72 +8,71 @@
88
message: string;
99
time: string;
1010
transactionType: 'incoming' | 'outgoing';
11-
isHeadNeeded?: boolean;
11+
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',
1818
transactionType = 'incoming',
19-
isHeadNeeded = true,
20-
...restProps
19+
isHeadNeeded = true,
20+
...restProps
2121
}: IChatMessageProps = $props();
2222
</script>
2323

2424
<div
25-
{...restProps}
26-
class={cn([
27-
`flex items-start gap-2 ${transactionType === 'incoming' ? 'flex-row-reverse' : 'flex'}`,
28-
restProps.class
29-
].join(' '))}
25+
{...restProps}
26+
class={cn(
27+
[
28+
`flex items-start gap-2 ${transactionType === 'incoming' ? 'flex-row-reverse' : 'flex'}`,
29+
restProps.class
30+
].join(' ')
31+
)}
3032
>
31-
<div class="w-8 flex-shrink-0">
32-
{#if isHeadNeeded}
33-
<Avatar size="xs" src={userImgSrc} />
34-
{/if}
35-
</div>
33+
<div class="w-8 flex-shrink-0">
34+
{#if isHeadNeeded}
35+
<Avatar size="xs" src={userImgSrc} />
36+
{/if}
37+
</div>
3638

37-
<div
38-
class={cn(
39-
`w-[max-content] max-w-[50%] ${isHeadNeeded ? 'mt-4' : 'mt-0'}`
40-
)}
41-
>
42-
<div
43-
class={cn(
44-
`relative rounded-3xl px-4 py-2 ${transactionType === 'incoming' ? 'bg-brand-burnt-orange' : 'bg-grey'}`
45-
)}
46-
>
47-
{#if isHeadNeeded}
48-
<svg
49-
class={`absolute ${transactionType === 'outgoing' ? 'start-[-8px] top-[-2px]' : 'end-[-8px] top-[2px]'}`}
50-
width="22"
51-
height="17"
52-
viewBox="0 0 22 17"
53-
fill="none"
54-
xmlns="http://www.w3.org/2000/svg"
55-
>
56-
<path
57-
d="M0 0C5.79116 4.95613 8.40437 9.60298 10 17L22 2C11 2.5 7.53377 0.634763 0 0Z"
58-
fill={transactionType === 'outgoing' ? '#F5F5F5' : 'var(--color-brand-burnt-orange)'}
59-
/>
60-
</svg>
61-
{/if}
39+
<div class={cn(`max-w-[50%] ${isHeadNeeded ? 'mt-4' : 'mt-0'}`)}>
40+
<div
41+
class={cn(
42+
`relative rounded-3xl px-4 py-2 ${transactionType === 'incoming' ? 'bg-brand-burnt-orange' : 'bg-grey'}`
43+
)}
44+
>
45+
{#if isHeadNeeded}
46+
<svg
47+
class={`absolute ${transactionType === 'outgoing' ? 'start-[-8px] top-[-2px]' : 'end-[-8px] top-[2px]'}`}
48+
width="22"
49+
height="17"
50+
viewBox="0 0 22 17"
51+
fill="none"
52+
xmlns="http://www.w3.org/2000/svg"
53+
>
54+
<path
55+
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)'}
59+
/>
60+
</svg>
61+
{/if}
6262

63-
<p class={cn(`${transactionType === 'incoming' ? 'text-white' : 'text-black-600'}`)}>
64-
{message}
65-
</p>
66-
</div>
63+
<p class={cn(`${transactionType === 'incoming' ? 'text-white' : 'text-black-600'}`)}>
64+
{message}
65+
</p>
66+
</div>
6767

68-
<p
69-
class={cn(
70-
`subtext text-black-400 mt-0.5 flex text-xs text-nowrap ${
71-
transactionType === 'incoming' ? 'justify-end' : 'justify-start'
72-
}`
73-
)}
74-
>
75-
{time}
76-
</p>
77-
</div>
68+
<p
69+
class={cn(
70+
`subtext text-black-400 mt-0.5 flex text-xs text-nowrap ${
71+
transactionType === 'incoming' ? 'justify-end' : 'justify-start'
72+
}`
73+
)}
74+
>
75+
{time}
76+
</p>
77+
</div>
7878
</div>
79-

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

Lines changed: 13 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
22
import { Avatar, Input } from '$lib/ui';
33
import { cn } from '$lib/utils';
4-
import { ImageCompositionOvalIcon, PlusSignIcon, SentIcon } from '@hugeicons/core-free-icons';
4+
import { PlusSignIcon, SentIcon } from '@hugeicons/core-free-icons';
55
import { HugeiconsIcon } from '@hugeicons/svelte';
66
import type { HTMLAttributes } from 'svelte/elements';
77
@@ -39,17 +39,24 @@
3939
{:else}
4040
<!-- svelte-ignore a11y_click_events_have_key_events -->
4141
<!-- svelte-ignore a11y_no_static_element_interactions -->
42+
<input
43+
id="add-image"
44+
type="file"
45+
class="hidden"
46+
accept="image/*"
47+
bind:files
48+
bind:this={fileInput}
49+
/>
4250
<button
43-
type="button"
44-
class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full border-0 p-0"
45-
onclick={handleAdd}
46-
aria-label="Add attachment"
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()}
4755
>
4856
<HugeiconsIcon size="24px" icon={PlusSignIcon} color="var(--color-black-400)" />
4957
</button>
5058
{/if}
5159
<Input type="text" bind:input bind:value {placeholder} />
52-
{#if value || variant === 'dm'}
5360
<!-- svelte-ignore a11y_click_events_have_key_events -->
5461
<!-- svelte-ignore a11y_no_static_element_interactions -->
5562
<div
@@ -58,28 +65,4 @@
5865
>
5966
<HugeiconsIcon size="24px" icon={SentIcon} color="var(--color-black-400)" />
6067
</div>
61-
{:else}
62-
<div class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full">
63-
<input
64-
id="add-image"
65-
type="file"
66-
class="hidden"
67-
accept="image/*"
68-
bind:files
69-
bind:this={fileInput}
70-
/>
71-
<button
72-
type="button"
73-
class="bg-grey flex aspect-square h-13 w-13 items-center justify-center rounded-full border-0 p-0"
74-
aria-label="add-image"
75-
onclick={() => fileInput?.click()}
76-
>
77-
<HugeiconsIcon
78-
size="24px"
79-
icon={ImageCompositionOvalIcon}
80-
color="var(--color-black-400)"
81-
/>
82-
</button>
83-
</div>
84-
{/if}
8568
</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: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@
1414
let commentInput: HTMLInputElement | undefined = $state();
1515
let _comments = $state(comments);
1616
let activeReplyToId: string | null = $state(null);
17+
let isChatPage = $state(false);
1718
19+
1820
const handleSend = async () => {
1921
const newComment = {
2022
userImgSrc: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
@@ -27,7 +29,7 @@
2729
time: 'Just now',
2830
replies: []
2931
};
30-
32+
3133
if (activeReplyToId) {
3234
// Find the parent comment by id and push reply
3335
const addReplyToComment = (commentsArray: CommentType[]) => {
@@ -51,6 +53,7 @@
5153
};
5254
5355
$effect(() => {
56+
isChatPage = route.startsWith("/messages/");
5457
if (route.includes('home')) {
5558
heading = 'Feed';
5659
} else if (route.includes('discover')) {
@@ -73,9 +76,9 @@
7376
class={`block h-[100dvh] ${route !== '/home' ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
7477
>
7578
<SideBar profileSrc="https://picsum.photos/200" handlePost={async () => alert('adas')} />
76-
<section class="hide-scrollbar mx-4 h-[100dvh] overflow-y-scroll md:mx-8 md:pt-10">
79+
<section class="hide-scrollbar h-[100dvh] overflow-y-auto px-4 md:px-8 md:pt-8 pb-8">
7780
<div class="flex items-center justify-between">
78-
<Header variant="primary" {heading} />
81+
<Header variant={"primary"} {heading}/>
7982
{#if route === '/profile'}
8083
<div class="mb-6 flex md:hidden">
8184
<button
@@ -120,5 +123,8 @@
120123
{/if}
121124
</aside>
122125
{/if}
123-
<BottomNav profileSrc="https://picsum.photos/200" />
126+
127+
{#if !isChatPage}
128+
<BottomNav class="btm-nav" profileSrc="https://picsum.photos/200" />
129+
{/if}
124130
</main>

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

Lines changed: 59 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,63 @@
11
<script lang="ts">
2-
import {MessageInput, ChatMessage} from "$lib/fragments";
2+
import { MessageInput, ChatMessage } from '$lib/fragments';
33
4-
let messageValue = $state("");
4+
let messageValue = $state('');
55
</script>
66

7-
<section class="relative h-[100dvh] overflow-y-scroll hide-scrollbar">
8-
<ChatMessage transactionType = 'outgoing'
9-
userImgSrc = 'https://picsum.photos/id/237/200/300'
10-
time = '12:55 AM'
11-
message=
12-
'Lorem ipsum dolor sit amet consectetur adipisicing'/>
13-
14-
<ChatMessage transactionType = 'outgoing'
15-
userImgSrc = 'https://picsum.photos/id/237/200/300'
16-
time = '12:55 AM'
17-
isHeadNeeded={false}
18-
message=
19-
'Lorem ipsum dolor sit amet consectetur adipisicing'/>
20-
21-
<ChatMessage transactionType = 'outgoing'
22-
userImgSrc = 'https://picsum.photos/id/237/200/300'
23-
time = '12:55 AM'
24-
isHeadNeeded={false}
25-
message=
26-
'Lorem ipsum dolor sit amet consectetur adipisicing'/>
27-
28-
<ChatMessage transactionType = 'incoming'
29-
userImgSrc = 'https://picsum.photos/id/237/500'
30-
time = '12:55 AM'
31-
message=
32-
'Lorem ipsum dolor sit amet consectetur adipisicing'/>
33-
34-
<ChatMessage transactionType = 'incoming'
35-
userImgSrc = 'https://picsum.photos/id/237/500'
36-
time = '12:55 AM'
37-
isHeadNeeded={false}
38-
message=
39-
'Lorem ipsum dolor sit amet consectetur adipisicing'/>
40-
41-
<ChatMessage transactionType = 'incoming'
42-
userImgSrc = 'https://picsum.photos/id/237/500'
43-
time = '12:55 AM'
44-
isHeadNeeded={false}
45-
message=
46-
'Lorem ipsum dolor sit amet consectetur adipisicing'/>
47-
48-
<!-- <MessageInput class="sticky bottom-0 start-0 w-full" variant="dm" src="https://picsum.photos/id/237/200/300" bind:value={messageValue} handleSend={async() => alert("sent")}/> -->
49-
</section>
7+
<section class="relative chat">
8+
{#each { length: 12 } as _}
9+
<ChatMessage
10+
transactionType="outgoing"
11+
userImgSrc="https://picsum.photos/id/237/200/300"
12+
time="12:55 AM"
13+
message="Lorem ipsum dolor sit amet consectetur adipisicing"
14+
/>
15+
16+
<ChatMessage
17+
transactionType="outgoing"
18+
userImgSrc="https://picsum.photos/id/237/200/300"
19+
time="12:55 AM"
20+
isHeadNeeded={false}
21+
message="Lorem ipsum dolor sit amet consectetur adipisicing"
22+
/>
23+
24+
<ChatMessage
25+
transactionType="outgoing"
26+
userImgSrc="https://picsum.photos/id/237/200/300"
27+
time="12:55 AM"
28+
isHeadNeeded={false}
29+
message="Lorem ipsum dolor sit amet consectetur adipisicing"
30+
/>
31+
32+
<ChatMessage
33+
transactionType="incoming"
34+
userImgSrc="https://picsum.photos/id/237/500"
35+
time="12:55 AM"
36+
message="Lorem ipsum dolor sit amet consectetur adipisicing"
37+
/>
38+
39+
<ChatMessage
40+
transactionType="incoming"
41+
userImgSrc="https://picsum.photos/id/237/500"
42+
time="12:55 AM"
43+
isHeadNeeded={false}
44+
message="Lorem ipsum dolor sit amet consectetur adipisicing"
45+
/>
46+
47+
<ChatMessage
48+
transactionType="incoming"
49+
userImgSrc="https://picsum.photos/id/237/500"
50+
time="12:55 AM"
51+
isHeadNeeded={false}
52+
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 "
53+
/>
54+
{/each}
55+
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+
/>
63+
</section>

0 commit comments

Comments
 (0)