refacx

src/lib/components/channel/Channel.svelte

@@ -27,13 +27,31 @@
 
 		messages = await getChannelMessages(localStorage.token, id, page);
 
-		if (messages.length < 50) {
-			top = true;
+		if (messages) {
+			messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
+
+			if (messages.length < 50) {
+				top = true;
+			}
 		}
 	};
 
-	const channelEventHandler = async (data) => {
-		console.log(data);
+	const channelEventHandler = async (event) => {
+		console.log(event);
+
+		if (event.channel_id === id) {
+			const type = event?.data?.type ?? null;
+			const data = event?.data?.data ?? null;
+
+			if (type === 'message') {
+				console.log('message', data);
+				messages = [data, ...messages];
+				await tick();
+				if (scrollEnd) {
+					messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
+				}
+			}
+		}
 	};
 
 	const submitHandler = async ({ content }) => {
@@ -74,6 +92,7 @@
 		{#key id}
 			<Messages
 				{messages}
+				{top}
 				onLoad={async () => {
 					page += 1;
 
@@ -84,7 +103,7 @@
 						return;
 					}
 
-					messages = [...newMessages, ...messages];
+					messages = [...messages, ...newMessages];
 				}}
 			/>
 		{/key}

src/lib/components/channel/Messages.svelte

@@ -35,30 +35,28 @@
 </script>
 
 {#if messages}
-	<div class="h-full w-full flex-1 flex">
-		<div class="w-full pt-2">
-			<div class="w-full">
-				{#if !top}
-					<Loader
-						on:visible={(e) => {
-							console.log('visible');
-							if (!messagesLoading) {
-								loadMoreMessages();
-							}
-						}}
-					>
-						<div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2">
-							<Spinner className=" size-4" />
-							<div class=" ">Loading...</div>
-						</div>
-					</Loader>
-				{/if}
+	<div class="w-full h-full pt-2 flex-1 flex flex-col-reverse overflow-auto">
+		<div>
+			{#if !top}
+				<Loader
+					on:visible={(e) => {
+						console.log('visible');
+						if (!messagesLoading) {
+							loadMoreMessages();
+						}
+					}}
+				>
+					<div class="w-full flex justify-center py-1 text-xs animate-pulse items-center gap-2">
+						<Spinner className=" size-4" />
+						<div class=" ">Loading...</div>
+					</div>
+				</Loader>
+			{/if}
 
-				{#each messages as message, messageIdx (message.id)}
-					<Message {message} />
-				{/each}
-			</div>
-			<div class="pb-6" />
+			{#each messages.slice().reverse() as message, messageIdx (message.id)}
+				<Message {message} />
+			{/each}
 		</div>
 	</div>
+	<div class="pb-6" />
 {/if}

src/lib/components/layout/Sidebar/ChannelItem.svelte

@@ -5,6 +5,8 @@
 
 	const dispatch = createEventDispatcher();
 
+	import { page } from '$app/stores';
+
 	import { mobile, showSidebar, user } from '$lib/stores';
 	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
 
@@ -18,7 +20,10 @@
 
 <div
 	bind:this={itemElement}
-	class=" w-full {className} rounded-lg flex relative group hover:bg-gray-100 dark:hover:bg-gray-900 px-2.5 py-1"
+	class=" w-full {className} rounded-lg flex relative group hover:bg-gray-100 dark:hover:bg-gray-900 {$page
+		.url.pathname === `/channels/${id}`
+		? 'bg-gray-100 dark:bg-gray-900'
+		: ''} px-2.5 py-1"
 >
 	<a
 		class=" w-full flex justify-between"