refac

src/lib/components/layout/Sidebar.svelte

@@ -544,20 +544,24 @@
 				? 'opacity-20'
 				: ''}"
 		>
-			<Folder
-				collapsible={!search}
-				className="px-2 mt-0.5"
-				name={$i18n.t('Channels')}
-				dragAndDrop={false}
-				onAdd={() => {
-					showCreateChannel = true;
-				}}
-				onAddLabel={$i18n.t('Create Channel')}
-			>
-				{#each $channels as channel}
-					<ChannelItem id={channel.id} name={channel.name} />
-				{/each}
-			</Folder>
+			{#if $user.role === 'admin' || $channels.length > 0}
+				<Folder
+					collapsible={!search}
+					className="px-2 mt-0.5"
+					name={$i18n.t('Channels')}
+					dragAndDrop={false}
+					onAdd={$user.role === 'admin'
+						? () => {
+								showCreateChannel = true;
+							}
+						: null}
+					onAddLabel={$i18n.t('Create Channel')}
+				>
+					{#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
-		class="absolute z-10 right-2.5 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
-		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" />
+	{#if $user?.role === 'admin'}
+		<button
+			class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
+			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>
 		</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) => {