feat: add ability to resize left sidebar

package.json

@@ -56,6 +56,7 @@
     "tauri-plugin-log-api": "github:tauri-apps/tauri-plugin-log#v1",
     "thenby": "1.3.4",
     "v-hotkey3": "0.1.4",
+    "v-resizable": "0.0.14",
     "vue": "3.4.31",
     "vue-logger-plugin": "2.2.3",
     "vue-router": "4.2.5",

src/assemblies/inbox/InboxMessaging.vue

@@ -670,6 +670,9 @@ export default {
       runtime.addEventListener("keyup", this.onFrameInnerKey);
       runtime.addEventListener("keydown", this.onFrameInnerKey);
       runtime.addEventListener("keypress", this.onFrameInnerKey);
+      runtime.addEventListener("mouseup", this.onFrameInnerMouse);
+      runtime.addEventListener("mousedown", this.onFrameInnerMouse);
+      runtime.addEventListener("mousemove", this.onFrameInnerMouse);
       runtime.addEventListener("dragover", this.onFrameInnerDragOver);
     },
 
@@ -1242,6 +1245,20 @@ export default {
       this.$el.dispatchEvent(new KeyboardEvent(event.type, event));
     },
 
+    onFrameInnerMouse(event: MouseEvent): void {
+      // Prevent frame to capture mouse events
+      // Notice: frames capture all mouse events when the mouse goes over it,
+      //   meaning the parent document will not receive any such event. \
+      //   In our case, we do not want the frame to capture mouse events at \
+      //   all, therefore we need to intercept there at the frame document \
+      //   level, and then re-dispatch the same mouse event to the parent \
+      //   document.
+      event.stopPropagation();
+
+      // Re-dispatch the event on the wrapper component
+      this.$el.dispatchEvent(new MouseEvent(event.type, event));
+    },
+
     onFrameInnerDragOver(event: DragEvent): void {
       // Prevent frame to capture 'dragover' event (it is impossible to catch \
       //   for a parent if capture is not prevented there)

src/bootstrap/plugins.ts

@@ -12,6 +12,7 @@
 import { App } from "vue";
 import VueClickAway from "vue3-click-away";
 import VueHotkey from "v-hotkey3";
+import VResizable from "v-resizable";
 
 // PROJECT: UTILITIES
 import logger from "@/utilities/logger";
@@ -28,6 +29,7 @@ class BootstrapPlugins {
     // Vue directives
     app.use(VueClickAway);
     app.use(VueHotkey);
+    app.use(VResizable);
   }
 }
 

src/views/app/AppBase.vue

@@ -11,6 +11,7 @@
 <template lang="pug">
 .v-app-base
   app-sidebar(
+    v-resizable.r="{ minWidth: 220, maxWidth: 300, handleWidth: 8 }"
     class="v-app-base__sidebar"
   )
 
@@ -50,6 +51,9 @@ $c: ".v-app-base";
     border-inline-end: 1px solid rgb(var(--color-border-secondary));
     width: $size-sidebar-default-width;
     flex: 0 0 auto;
+
+    // Hack: prevent v-resizable directive from applying its absolute position
+    position: relative !important;
   }
 
   #{$c}__content {