From 118f098b460c4f3690f38c6fffa4b6e7d75fb563 Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Fri, 18 Jul 2025 04:09:16 +0200
Subject: [PATCH] fix: that the reset context menu option reset resizable
 sidebar width to the localStorage value rather than the default value

---
 components/UserInterface/ResizableSidebar.vue | 20 ++++++++++++++++++-
 .../[serverId]/channels/[channelId].vue       | 20 ++-----------------
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/components/UserInterface/ResizableSidebar.vue b/components/UserInterface/ResizableSidebar.vue
index 3d43b80..3017dbc 100644
--- a/components/UserInterface/ResizableSidebar.vue
+++ b/components/UserInterface/ResizableSidebar.vue
@@ -1,7 +1,7 @@
 <template>
 	<div ref="resizableSidebar" class="resizable-sidebar"
 			:style="{
-				'width': props.width,
+				'width': storedWidth ? `${storedWidth}px` : props.width,
 				'min-width': props.minWidth,
 				'max-width': props.maxWidth,
 				'border': props.borderSides == 'all' ? borderStyling : undefined,
@@ -29,12 +29,15 @@ const borderStyling = ".1rem solid var(--padding-color)";
 
 const resizableSidebar = ref<HTMLDivElement>();
 const widthResizer = ref<HTMLDivElement>();
+const storedWidth = ref<number>();
 
 const menuItems: ContextMenuItem[] = [
 	{ name: "Reset", callback: () => { resizableSidebar.value!.style.width = props.width ?? props.minWidth } }
 ]
 
 onMounted(() => {
+	loadStoredWidth();
+
 	if (resizableSidebar.value && widthResizer.value) {
 		widthResizer.value.addEventListener("pointerdown", (e) => {
 			e.preventDefault();
@@ -76,6 +79,21 @@ onMounted(() => {
 	}
 });
 
+onActivated(() => {
+	console.log("[res] activated");
+	loadStoredWidth();
+});
+
+function loadStoredWidth() {
+	if (props.localStorageName) {
+		const storedWidthValue = localStorage.getItem(props.localStorageName);
+		if (storedWidthValue) {
+			storedWidth.value = parseInt(storedWidthValue) || undefined;
+			console.log("[res] loaded stored width");
+		}
+	}
+}
+
 </script>
 
 <style>
diff --git a/pages/servers/[serverId]/channels/[channelId].vue b/pages/servers/[serverId]/channels/[channelId].vue
index f3c97da..cdc59e4 100644
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@@ -1,8 +1,7 @@
 <template>
 	<NuxtLayout name="client">
 		<ResizableSidebar
-				:width="middleLeftColumnWidth ? `${middleLeftColumnWidth}px` : '14rem'"
-				min-width="5rem" max-width="30rem"
+				width="14rem" min-width="5rem" max-width="30rem"
 				border-sides="right" :local-storage-name="middleLeftColumnName">
 			<div id="middle-left-column" class="main-grid-row">
 				<div id="server-name-container">
@@ -21,8 +20,7 @@
 		</ResizableSidebar>
 		<MessageArea :channel-url="channelUrlPath" />
 		<ResizableSidebar
-				:width="membersContainerWidth ? `${membersContainerWidth}px` : '14rem'"
-				min-width="5.5rem" max-width="30rem"
+				width="14rem" min-width="5.5rem" max-width="30rem"
 				border-sides="left" :local-storage-name="membersContainername">
 			<div id="members-container">
 				<div id="members-list">
@@ -77,8 +75,6 @@ onMounted(async () => {
 
 onActivated(async () => {
 	console.log("activating");
-	loadSidebarWidths();
-	console.log("loaded sidebar widths");
 	const guildUrl = `guilds/${route.params.serverId}`;
 	server.value = await fetchWithApi(guildUrl);
 	console.log("fetched guild");
@@ -95,18 +91,6 @@ async function setArrayVariables() {
 	console.log("channel:", channel.value);
 }
 
-function loadSidebarWidths() {
-	const channelsListWidth = localStorage.getItem(middleLeftColumnName);
-	if (channelsListWidth) {
-		middleLeftColumnWidth.value = parseInt(channelsListWidth) || undefined;
-	}
-
-	const membersListWidth = localStorage.getItem(membersContainername);
-	if (membersListWidth) {
-		membersContainerWidth.value = parseInt(membersListWidth) || undefined;
-	}
-}
-
 function toggleGuildSettings(e: Event) {
 	e.preventDefault();
 	showGuildSettings.value = !showGuildSettings.value;