From 95f4bbcaf37a8a2c2e842825e62da89e83e0b40d Mon Sep 17 00:00:00 2001
From: SauceyRed <saucey@saucey.red>
Date: Thu, 31 Jul 2025 03:50:16 +0200
Subject: [PATCH] fix: ResizableSidebar width resetting not being saved to
 local storage

---
 components/UserInterface/ResizableSidebar.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/components/UserInterface/ResizableSidebar.vue b/components/UserInterface/ResizableSidebar.vue
index 3017dbc..c6acca2 100644
--- a/components/UserInterface/ResizableSidebar.vue
+++ b/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,10 +29,16 @@ const borderStyling = ".1rem solid var(--padding-color)";
 
 const resizableSidebar = ref<HTMLDivElement>();
 const widthResizer = ref<HTMLDivElement>();
-const storedWidth = ref<number>();
+const storedWidth = ref<string>();
 
 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(() => {
@@ -88,7 +94,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");
 		}
 	}