Merge branch 'main' into improved-context-menu

components/Message.vue

@@ -129,9 +129,6 @@ onMounted(async () => {
 		}
 		if (mediaLinks.length) {
 			hasEmbed.value = true
-			setTimeout(() => {
-				scrollToBottom(document.getElementById("messages") as HTMLDivElement);
-			}, 500);
 		};
 	} catch (error) {
 		console.error(error);

components/MessageArea.vue

@@ -1,7 +1,7 @@
 <template>
 	<div id="message-area">
 		<div id="messages" ref="messagesElement">
-			<Message v-for="(message, i) of messages" :username="getDisplayName(message.user)"
+			<Message v-for="(message, i) of messages" :username="getDisplayName(message.user)" :key="message.uuid"
 				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
 				:format="timeFormat" :type="messagesType[message.uuid]"
 				:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
@@ -237,12 +237,8 @@ function sendMessage(e: Event) {
 }
 
 function getReplyMessage(id: string) {
-	console.log("[REPLYMSG] id:", id);
 	const messagesValues = Object.values(messages.value);
-	console.log("[REPLYMSG] messages values:", messagesValues);
 	for (const message of messagesValues) {
-		console.log("[REPLYMSG] message:", message);
-		console.log("[REPLYMSG] IDs match?", message.uuid == id);
 		if (message.uuid == id) return message;
 	}
 }
@@ -266,21 +262,14 @@ onMounted(async () => {
 					if (fetched) return;
 					fetched = true;
 					console.log("scroll height is at 10% or less");
-					//console.log("current oldest:", currentOldestMessage);
 					const olderMessages = await fetchMessages(route.params.channelId as string, { amount, offset });
-					if (olderMessages) {
+					if (olderMessages?.length) {
 						olderMessages.reverse();
-						console.log("older messages:", olderMessages);
-						if (olderMessages.length == 0) return;
-						olderMessages.reverse();
-						for (const [i, oldMessage] of olderMessages.entries()) {
-							console.log("old message:", oldMessage);
-							messages.value.unshift(oldMessage);
-							for (const message of messages.value) {
-								groupMessage(message);
-							}
+						messages.value = [...olderMessages.map(msg => reactive(msg)), ...messages.value];
+						for (const message of messages.value) {
+							groupMessage(message);
 						}
-						offset += offset;
+						offset += amount;
 					}
 				} else {
 					fetched = false;

components/UserInterface/ResizableSidebar.vue

@@ -1,7 +1,7 @@
 <template>
 	<div ref="resizableSidebar" class="resizable-sidebar"
 			:style="{
-				'width': storedWidth ? `${storedWidth}px` : props.width,
+				'width': storedWidth ? storedWidth : props.width,
 				'min-width': props.minWidth,
 				'max-width': props.maxWidth,
 				'border': props.borderSides == 'all' ? borderStyling : undefined,
@@ -29,12 +29,18 @@ const borderStyling = ".1rem solid var(--padding-color)";
 
 const resizableSidebar = ref<HTMLDivElement>();
 const widthResizer = ref<HTMLDivElement>();
-const storedWidth = ref<number>();
+const storedWidth = ref<string>();
 
 const contextMenu = useState<ContextMenuInterface>("contextMenu");
 
 const menuItems: ContextMenuItem[] = [
-	{ name: "Reset", callback: () => { resizableSidebar.value!.style.width = props.width ?? props.minWidth } }
+	{ name: "Reset", callback: () => {
+		const defaultWidth = props.width ?? props.minWidth;
+		resizableSidebar.value!.style.width = defaultWidth;
+		if (props.localStorageName) {
+			localStorage.setItem(props.localStorageName, defaultWidth);
+		}
+	} }
 ]
 
 onMounted(() => {
@@ -90,7 +96,7 @@ function loadStoredWidth() {
 	if (props.localStorageName) {
 		const storedWidthValue = localStorage.getItem(props.localStorageName);
 		if (storedWidthValue) {
-			storedWidth.value = parseInt(storedWidthValue) || undefined;
+			storedWidth.value = storedWidthValue;
 			console.log("[res] loaded stored width");
 		}
 	}