refac

src/lib/components/channel/Channel.svelte

@@ -274,7 +274,20 @@
 >
 	<PaneGroup direction="horizontal" class="w-full h-full">
 		<Pane defaultSize={50} minSize={50} class="h-full flex flex-col w-full relative">
-			<Navbar {channel} />
+			<Navbar
+				{channel}
+				onPin={(messageId, pinned) => {
+					messages = messages.map((message) => {
+						if (message.id === messageId) {
+							return {
+								...message,
+								is_pinned: pinned
+							};
+						}
+						return message;
+					});
+				}}
+			/>
 
 			<div class="flex-1 overflow-y-auto">
 				{#if channel}

src/lib/components/channel/Navbar.svelte

@@ -27,9 +27,11 @@
 	let showChannelInfoModal = false;
 
 	export let channel;
+
+	export let onPin = (messageId, pinned) => {};
 </script>
 
-<PinnedMessagesModal bind:show={showChannelPinnedMessagesModal} {channel} />
+<PinnedMessagesModal bind:show={showChannelPinnedMessagesModal} {channel} {onPin} />
 <ChannelInfoModal bind:show={showChannelInfoModal} {channel} />
 <nav class="sticky top-0 z-30 w-full px-1.5 py-1 -mb-8 flex items-center drag-region flex flex-col">
 	<div

src/lib/components/channel/PinnedMessagesModal.svelte

@@ -3,26 +3,21 @@
 	import { getContext, onMount } from 'svelte';
 	const i18n = getContext('i18n');
 
+	import { getChannelPinnedMessages, pinMessage } from '$lib/apis/channels';
+
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import Modal from '$lib/components/common/Modal.svelte';
 
-	import UserPlusSolid from '$lib/components/icons/UserPlusSolid.svelte';
-	import WrenchSolid from '$lib/components/icons/WrenchSolid.svelte';
-	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import XMark from '$lib/components/icons/XMark.svelte';
-	import Hashtag from '../icons/Hashtag.svelte';
-	import Lock from '../icons/Lock.svelte';
-	import UserList from './ChannelInfoModal/UserList.svelte';
-	import { getChannelPinnedMessages, pinMessage } from '$lib/apis/channels';
 	import Message from './Messages/Message.svelte';
-	import { user } from '$lib/stores';
 	import Loader from '../common/Loader.svelte';
 
 	export let show = false;
 	export let channel = null;
+	export let onPin = (messageId, pinned) => {};
 
 	let page = 1;
-	let pinnedMessages = [];
+	let pinnedMessages = null;
 
 	let allItemsLoaded = false;
 	let loading = false;
@@ -41,7 +36,7 @@
 			);
 
 			if (res) {
-				pinnedMessages = [...pinnedMessages, ...res];
+				pinnedMessages = [...(pinnedMessages ?? []), ...res];
 			}
 
 			if (res.length === 0) {
@@ -56,7 +51,8 @@
 
 	const init = () => {
 		page = 1;
-		pinnedMessages = [];
+		pinnedMessages = null;
+		allItemsLoaded = false;
 
 		getPinnedMessages();
 	};
@@ -92,9 +88,19 @@
 			<div class="flex flex-col md:flex-row w-full px-4 pb-4 md:space-x-4 dark:text-gray-200">
 				<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
 					<div class="flex flex-col w-full h-full pb-2 gap-1">
+						{#if pinnedMessages === null}
+							<div class="my-10">
+								<Spinner className="size-5" />
+							</div>
+						{:else}
 							<div
 								class="flex flex-col gap-2 max-h-[60vh] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 dark:scrollbar-thumb-gray-700 scrollbar-track-transparent py-2"
 							>
+								{#if pinnedMessages.length === 0}
+									<div class=" text-center text-sm text-gray-500 dark:text-gray-400 py-6">
+										{$i18n.t('No pinned messages')}
+									</div>
+								{:else}
 									{#each pinnedMessages as message, messageIdx (message.id)}
 										<Message
 											className="rounded-xl px-2"
@@ -102,6 +108,7 @@
 											{channel}
 											onPin={async (message) => {
 												pinnedMessages = pinnedMessages.filter((m) => m.id !== message.id);
+												onPin(message.id, !message.is_pinned);
 
 												const updatedMessage = await pinMessage(
 													localStorage.token,
@@ -141,7 +148,9 @@
 											</Loader>
 										{/if}
 									{/each}
+								{/if}
 							</div>
+						{/if}
 					</div>
 				</div>
 			</div>