diff --git a/apps/privelte/src/lib/components/Chat.svelte b/apps/privelte/src/lib/components/Chat.svelte
index 073d36d..f5692d3 100644
--- a/apps/privelte/src/lib/components/Chat.svelte
+++ b/apps/privelte/src/lib/components/Chat.svelte
@@ -2,7 +2,7 @@
import { afterUpdate } from 'svelte'
import { ProgressRadial } from '@skeletonlabs/skeleton'
import Message from './Message.svelte'
- import { pendingMessages } from '$lib/stores'
+ import { pendingMessages, unreadMessagesCount } from '$lib/stores'
import { page } from '$app/stores'
import type { Payload, Presence } from '$lib/types/types'
import Clipboard from './Clipboard.svelte'
@@ -12,6 +12,7 @@
export let subscribed: 'loading' | 'ok' | 'error'
let bottom: HTMLDivElement
+ let scrollable: HTMLDivElement
$: getStatus = (id: string) => {
if (!$pendingMessages.get(id)) {
@@ -28,7 +29,14 @@
})
-
+
{
+ if (scrollable.scrollHeight - scrollable.scrollTop - scrollable.clientHeight < 1)
+ unreadMessagesCount.reset()
+ }}
+ class="absolute left-0 top-0 h-full w-full space-y-4 overflow-y-auto overflow-x-clip px-4"
+>
Share the link
{#if isOwnMessage}
- {payload.username}
+ {payload.username}
{#if status === 'loading'}
{:else if status === 'error'}
diff --git a/apps/privelte/src/lib/stores.ts b/apps/privelte/src/lib/stores.ts
index 63dd636..f15002e 100644
--- a/apps/privelte/src/lib/stores.ts
+++ b/apps/privelte/src/lib/stores.ts
@@ -1,4 +1,4 @@
-import { writable } from 'svelte/store'
+import { writable, derived } from 'svelte/store'
export const createPendingMessages = () => {
const { subscribe, update } = writable