refac

src/lib/components/channel/Channel.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	export let id = '';
+</script>
+
+{id}

src/lib/components/channel/Messages.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { v4 as uuidv4 } from 'uuid';
+	import { chats, config, settings, user as _user, mobile, currentChatPage } from '$lib/stores';
+	import { tick, getContext, onMount, createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	import { toast } from 'svelte-sonner';
+
+	import Message from './Messages/Message.svelte';
+	import Loader from '../common/Loader.svelte';
+	import Spinner from '../common/Spinner.svelte';
+
+	const i18n = getContext('i18n');
+
+	export let channelId;
+
+	let messages = null;
+
+	let messagesCount = 50;
+	let messagesLoading = false;
+
+	const loadMoreMessages = async () => {
+		// scroll slightly down to disable continuous loading
+		const element = document.getElementById('messages-container');
+		element.scrollTop = element.scrollTop + 100;
+
+		messagesLoading = true;
+		messagesCount += 50;
+
+		await tick();
+
+		messagesLoading = false;
+	};
+</script>
+
+<div class="h-full flex pt-8">
+	<div class="w-full pt-2">
+		{#key channelId}
+			<div class="w-full">
+				{#if messages.at(0)?.parentId !== null}
+					<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 {channelId} id={message.id} content={message.content} />
+				{/each}
+			</div>
+			<div class="pb-12" />
+		{/key}
+	</div>
+</div>

src/lib/components/layout/Sidebar.svelte

@@ -544,20 +544,24 @@
 				? 'opacity-20'
 				: ''}"
 		>
-			<Folder
+			{#if $user.role === 'admin' || $channels.length > 0}
-				collapsible={!search}
+				<Folder
-				className="px-2 mt-0.5"
+					collapsible={!search}
-				name={$i18n.t('Channels')}
+					className="px-2 mt-0.5"
-				dragAndDrop={false}
+					name={$i18n.t('Channels')}
-				onAdd={() => {
+					dragAndDrop={false}
-					showCreateChannel = true;
+					onAdd={$user.role === 'admin'
-				}}
+						? () => {
-				onAddLabel={$i18n.t('Create Channel')}
+								showCreateChannel = true;
-			>
+							}
-				{#each $channels as channel}
+						: null}
-					<ChannelItem id={channel.id} name={channel.name} />
+					onAddLabel={$i18n.t('Create Channel')}
-				{/each}
+				>
-			</Folder>
+					{#each $channels as channel}
+						<ChannelItem id={channel.id} name={channel.name} />
+					{/each}
+				</Folder>
+			{/if}
 
 			<Folder
 				collapsible={!search}
@@ -621,7 +625,7 @@
 				{#if !search && $pinnedChats.length > 0}
 					<div class="flex flex-col space-y-1 rounded-xl">
 						<Folder
-							className="pl-1"
+							className=""
 							bind:open={showPinnedChat}
 							on:change={(e) => {
 								localStorage.setItem('showPinnedChat', e.detail);

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

@@ -5,7 +5,7 @@
 
 	const dispatch = createEventDispatcher();
 
-	import { mobile, showSidebar } from '$lib/stores';
+	import { mobile, showSidebar, user } from '$lib/stores';
 	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
 
 	export let className = '';
@@ -50,14 +50,16 @@
 		</div>
 	</a>
 
-	<button
+	{#if $user?.role === 'admin'}
-		class="absolute z-10 right-2.5 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
+		<button
-		on:pointerup={(e) => {
+			class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
-			e.stopPropagation();
+			on:pointerup={(e) => {
-		}}
+				e.stopPropagation();
-	>
+			}}
-		<button class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto" on:click={(e) => {}}>
+		>
-			<EllipsisHorizontal className="size-4" strokeWidth="2.5" />
+			<button class="p-0.5 dark:hover:bg-gray-850 rounded-lg touch-auto" on:click={(e) => {}}>
+				<EllipsisHorizontal className="size-4" strokeWidth="2.5" />
+			</button>
 		</button>
-	</button>
+	{/if}
 </div>

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

@@ -19,7 +19,6 @@
 
 {#each folderList as folderId (folderId)}
 	<RecursiveFolder
-		className="pl-1"
 		{folders}
 		{folderId}
 		on:import={(e) => {

src/routes/(app)/channels/[id]/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+
+	import Channel from '$lib/components/channel/Channel.svelte';
+</script>
+
+<Channel id={$page.params.id} />