fix(ui): bidirectional pin state sync between channel and thread sidebar

src/lib/components/channel/Channel.svelte

@@ -40,6 +40,7 @@
 
 	let replyToMessage = null;
 	let threadId = null;
+	let lastPinUpdate = null;
 
 	let typingUsers = [];
 	let typingUsersTimeout = {};
@@ -315,6 +316,7 @@
 						}
 						return message;
 					});
+					lastPinUpdate = { messageId, pinned };
 				}}
 				onUpdate={async () => {
 					channel = await getChannelById(localStorage.token, id).catch((error) => {
@@ -344,6 +346,9 @@
 									await tick();
 									chatInputElement?.focus();
 								}}
+								onPinUpdate={(messageId, pinned) => {
+									lastPinUpdate = { messageId, pinned };
+								}}
 								onThread={(id) => {
 									threadId = id;
 								}}
@@ -406,6 +411,18 @@
 						<Thread
 							{threadId}
 							{channel}
+							pinUpdate={lastPinUpdate}
+							onPinUpdate={(messageId, pinned) => {
+								messages = messages.map((message) => {
+									if (message.id === messageId) {
+										return {
+											...message,
+											is_pinned: pinned
+										};
+									}
+									return message;
+								});
+							}}
 							onClose={() => {
 								threadId = null;
 							}}
@@ -428,6 +445,18 @@
 					<Thread
 						{threadId}
 						{channel}
+						pinUpdate={lastPinUpdate}
+						onPinUpdate={(messageId, pinned) => {
+							messages = messages.map((message) => {
+								if (message.id === messageId) {
+									return {
+										...message,
+										is_pinned: pinned
+									};
+								}
+								return message;
+							});
+						}}
 						onClose={() => {
 							threadId = null;
 						}}

src/lib/components/channel/Messages.svelte

@@ -37,6 +37,7 @@
 	export let onLoad: Function = () => {};
 	export let onReply: Function = () => {};
 	export let onThread: Function = () => {};
+	export let onPinUpdate: Function = () => {};
 
 	let messagesLoading = false;
 
@@ -165,20 +166,24 @@
 					onReply(message);
 				}}
 				onPin={async (message) => {
+					const newPinned = !message.is_pinned;
+
 					messages = messages.map((m) => {
 						if (m.id === message.id) {
-							m.is_pinned = !m.is_pinned;
-							m.pinned_by = !m.is_pinned ? null : $user?.id;
-							m.pinned_at = !m.is_pinned ? null : Date.now() * 1000000;
+							m.is_pinned = newPinned;
+							m.pinned_by = newPinned ? $user?.id : null;
+							m.pinned_at = newPinned ? Date.now() * 1000000 : null;
 						}
 						return m;
 					});
 
+					onPinUpdate(message.id, newPinned);
+
 					const updatedMessage = await pinMessage(
 						localStorage.token,
 						message.channel_id,
 						message.id,
-						message.is_pinned
+						newPinned
 					).catch((error) => {
 						toast.error(`${error}`);
 						return null;

src/lib/components/channel/Thread.svelte

@@ -18,6 +18,23 @@
 	export let channel = null;
 
 	export let onClose = () => {};
+	export let onPinUpdate = (messageId, pinned) => {};
+	export let pinUpdate = null;
+
+	let lastAppliedPinUpdate = null;
+
+	$: if (pinUpdate && pinUpdate !== lastAppliedPinUpdate && messages) {
+		lastAppliedPinUpdate = pinUpdate;
+		messages = messages.map((message) => {
+			if (message.id === pinUpdate.messageId) {
+				return {
+					...message,
+					is_pinned: pinUpdate.pinned
+				};
+			}
+			return message;
+		});
+	}
 
 	let messages = null;
 	let top = false;
@@ -196,6 +213,7 @@
 					{messages}
 					{replyToMessage}
 					thread={true}
+					{onPinUpdate}
 					onReply={async (message) => {
 						replyToMessage = message;