feat: Persist custom sidebar size in localstorage

apps/ui/src/components/Ui/ResizableHorizontal.vue

@@ -1,6 +1,10 @@
 <script lang="ts" setup>
+import { lsGet, lsSet } from '@/helpers/utils';
+
+const CACHE_KEYNAME = 'proposal.sidebarWidth';
+
 const props = defineProps<{
-  width: number;
+  default: number;
   max?: number;
   min?: number;
 }>();
@@ -9,26 +13,22 @@ const containerEl = ref<HTMLElement | null>(null);
 const sliderEl = ref<HTMLElement | null>(null);
 const initialized = ref(false);
 const sliderOriginalPositionX = ref(0);
+const width = ref(lsGet(CACHE_KEYNAME) || props.default);
 
 const { x, y } = useDraggable(sliderEl, {
   axis: 'x'
 });
 
 const containerWidth = computed(() => {
-  const width = getWidth(x.value);
+  const offset = sliderOriginalPositionX.value - x.value;
+  const newWidth = width.value + offset;
 
-  if (props.max && width > props.max) return props.max;
-  if (props.min && width < props.min) return props.min;
+  if (props.max && newWidth > props.max) return props.max;
+  if (props.min && newWidth < props.min) return props.min;
 
-  return width;
+  return Math.round(newWidth);
 });
 
-function getWidth(newSliderPositionX: number): number {
-  const offset = sliderOriginalPositionX.value - newSliderPositionX;
-
-  return props.width + offset;
-}
-
 function initResizer() {
   if (!sliderEl.value || !containerEl.value) return;
 
@@ -40,6 +40,10 @@ function initResizer() {
   initialized.value = true;
 }
 
+watch(containerWidth, w => {
+  lsSet(CACHE_KEYNAME, w);
+});
+
 onMounted(() => {
   initResizer();
 });

apps/ui/src/views/Proposal.vue

@@ -238,7 +238,7 @@ watchEffect(() => {
         <router-view :proposal="proposal" />
       </div>
       <UiResizableHorizontal
-        :width="340"
+        :default="340"
         :max="400"
         :min="340"
         :class="[