feat(pages): improve left sidebar resize handles

Author: gustavotoyota

apps/client/src/layouts/PagesLayout/LeftSidebar/CurrentPath.vue

@@ -61,16 +61,9 @@
     style="position: relative"
   >
     <div
-      style="
-        position: absolute;
-        left: 0;
-        top: -12px;
-        right: 0;
-        bottom: -12px;
-        cursor: ns-resize;
-        z-index: 2147483647;
-      "
-      @pointerdown="resizeSection"
+      class="resize-handle"
+      @pointerdown="resizeHandlePointerDown"
+      @dblclick="resizeHandleDoubleClick"
     ></div>
   </div>
 
@@ -83,7 +76,7 @@ import type { ComponentPublicInstance } from 'vue';
 
 const listRef = ref<ComponentPublicInstance>();
 
-function resizeSection(downEvent: PointerEvent) {
+function resizeHandlePointerDown(downEvent: PointerEvent) {
   listenPointerEvents(downEvent, {
     move(moveEvent) {
       const clientRect = listRef.value!.$el.getBoundingClientRect();
@@ -105,4 +98,32 @@ function resizeSection(downEvent: PointerEvent) {
     },
   });
 }
+
+function resizeHandleDoubleClick() {
+  const avgWeight =
+    (uiStore().currentPathWeight + uiStore().recentPagesWeight) / 2;
+
+  uiStore().currentPathWeight = avgWeight;
+  uiStore().recentPagesWeight = avgWeight;
+}
 </script>
+
+<style scoped lang="scss">
+.resize-handle {
+  position: absolute;
+  left: 0;
+  top: -6px;
+  right: 0;
+  bottom: -6px;
+  cursor: ns-resize;
+  z-index: 2147483647;
+
+  opacity: 0;
+  background-color: white;
+
+  transition: opacity 0.2s;
+}
+.resize-handle:hover {
+  opacity: 0.4;
+}
+</style>

apps/client/src/layouts/PagesLayout/LeftSidebar/LeftSidebar.vue

@@ -11,15 +11,7 @@
     style="display: flex; flex-direction: column; background-color: #212121"
   >
     <div
-      style="
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        right: -12px;
-        width: 12px;
-        cursor: ew-resize;
-        z-index: 2147483647;
-      "
+      class="resize-handle"
       @pointerdown="resizeLeftSidebar"
       @dblclick="() => uiStore().resetLeftSidebarWidth()"
     ></div>
@@ -54,4 +46,22 @@ function resizeLeftSidebar(event: PointerEvent) {
     border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
   }
 }
+
+.resize-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: -10px;
+  left: calc(100% + 1px);
+  cursor: ew-resize;
+  z-index: 2147483647;
+
+  opacity: 0;
+  background-color: white;
+
+  transition: opacity 0.2s;
+}
+.resize-handle:hover {
+  opacity: 0.4;
+}
 </style>

apps/client/src/layouts/PagesLayout/LeftSidebar/RecentPages.vue

@@ -72,16 +72,9 @@
     v-if="uiStore().recentPagesExpanded && uiStore().selectedPagesExpanded"
   >
     <div
-      style="
-        position: absolute;
-        left: 0;
-        top: -12px;
-        right: 0;
-        bottom: -12px;
-        cursor: ns-resize;
-        z-index: 2147483647;
-      "
-      @pointerdown="resizeSection"
+      class="resize-handle"
+      @pointerdown="resizeHandlePointerDown"
+      @dblclick="resizeHandleDoubleClick"
     ></div>
   </div>
 
@@ -96,7 +89,7 @@ import type { ComponentPublicInstance } from 'vue';
 
 const listRef = ref<ComponentPublicInstance>();
 
-function resizeSection(downEvent: PointerEvent) {
+function resizeHandlePointerDown(downEvent: PointerEvent) {
   listenPointerEvents(downEvent, {
     move(moveEvent) {
       const clientRect = listRef.value!.$el.getBoundingClientRect();
@@ -133,6 +126,14 @@ async function removeRecentPage(pageId: string) {
     handleError(error);
   }
 }
+
+function resizeHandleDoubleClick() {
+  const avgWeight =
+    (uiStore().recentPagesWeight + uiStore().selectedPagesWeight) / 2;
+
+  uiStore().recentPagesWeight = avgWeight;
+  uiStore().selectedPagesWeight = avgWeight;
+}
 </script>
 
 <style scoped lang="scss">
@@ -160,4 +161,22 @@ async function removeRecentPage(pageId: string) {
 .recent-page:hover > .remove-btn {
   opacity: 1;
 }
+
+.resize-handle {
+  position: absolute;
+  left: 0;
+  top: -6px;
+  right: 0;
+  bottom: -6px;
+  cursor: ns-resize;
+  z-index: 2147483647;
+
+  opacity: 0;
+  background-color: white;
+
+  transition: opacity 0.2s;
+}
+.resize-handle:hover {
+  opacity: 0.4;
+}
 </style>