ui(pages): make left sidebar sections resizable

Author: gustavotoyota

apps/client/src/boot/ui.client.ts

@@ -27,4 +27,11 @@ export default boot(({ store }) => {
     internals.localStorage.getItem('recentPagesExpanded') !== 'false';
   uiStore(store).selectedPagesExpanded =
     internals.localStorage.getItem('selectedPagesExpanded') === 'true';
+
+  uiStore(store).currentPathWeight =
+    parseFloat(internals.localStorage.getItem('currentPathWeight')!) || 1;
+  uiStore(store).recentPagesWeight =
+    parseFloat(internals.localStorage.getItem('recentPagesWeight')!) || 1;
+  uiStore(store).selectedPagesWeight =
+    parseFloat(internals.localStorage.getItem('selectedPagesWeight')!) || 1;
 });

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

@@ -36,13 +36,11 @@
   </q-toolbar>
 
   <q-list
-    style="
-      height: 0;
-      overflow-x: hidden;
-      overflow-y: auto;
-      transition: all 0.2s;
-    "
-    :style="{ flex: uiStore().currentPathExpanded ? '1' : '0' }"
+    ref="listRef"
+    style="height: 0; overflow-x: hidden; overflow-y: auto"
+    :style="{
+      flex: uiStore().currentPathExpanded ? uiStore().currentPathWeight : '0',
+    }"
   >
     <PageItem
       v-for="pageId in internals.pages.react.pathPageIds"
@@ -54,8 +52,57 @@
       class="current-path"
     />
   </q-list>
+
+  <div
+    v-if="
+      uiStore().currentPathExpanded &&
+      (uiStore().recentPagesExpanded || uiStore().selectedPagesExpanded)
+    "
+    style="position: relative"
+  >
+    <div
+      style="
+        position: absolute;
+        left: 0;
+        top: -12px;
+        right: 0;
+        bottom: -12px;
+        cursor: ns-resize;
+        z-index: 2147483647;
+      "
+      @pointerdown="resizeSection"
+    ></div>
+  </div>
+
+  <q-separator style="background-color: rgba(255, 255, 255, 0.15) !important" />
 </template>
 
 <script setup lang="ts">
-import { negateProp } from '@stdlib/misc';
+import { listenPointerEvents, map, negateProp } from '@stdlib/misc';
+import type { ComponentPublicInstance } from 'vue';
+
+const listRef = ref<ComponentPublicInstance>();
+
+function resizeSection(downEvent: PointerEvent) {
+  listenPointerEvents(downEvent, {
+    move(moveEvent) {
+      const clientRect = listRef.value!.$el.getBoundingClientRect();
+
+      const othersHeight = uiStore().height - clientRect.height - 32 * 3 - 2;
+
+      const othersWeight =
+        (uiStore().recentPagesExpanded ? uiStore().recentPagesWeight : 0) +
+        (uiStore().selectedPagesExpanded ? uiStore().selectedPagesWeight : 0);
+
+      const myNewHeight = moveEvent.clientY - clientRect.y;
+
+      const myNewWeight = map(myNewHeight, 0, othersHeight, 0, othersWeight);
+
+      uiStore().recentPagesWeight -= myNewWeight - uiStore().currentPathWeight;
+      uiStore().currentPathWeight = myNewWeight;
+
+      uiStore().normalizeWeights();
+    },
+  });
+}
 </script>

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

@@ -26,16 +26,8 @@
 
     <CurrentPath />
 
-    <q-separator
-      style="background-color: rgba(255, 255, 255, 0.15) !important"
-    />
-
     <RecentPages />
 
-    <q-separator
-      style="background-color: rgba(255, 255, 255, 0.15) !important"
-    />
-
     <SelectedPages />
   </q-drawer>
 </template>

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

@@ -36,13 +36,11 @@
   </q-toolbar>
 
   <q-list
-    style="
-      height: 0;
-      overflow-x: hidden;
-      overflow-y: auto;
-      transition: all 0.2s;
-    "
-    :style="{ flex: uiStore().recentPagesExpanded ? '1' : '0' }"
+    ref="listRef"
+    style="height: 0; overflow-x: hidden; overflow-y: auto"
+    :style="{
+      flex: uiStore().recentPagesExpanded ? uiStore().recentPagesWeight : '0',
+    }"
   >
     <div
       v-for="pageId in internals.pages.react.recentPageIds"
@@ -68,12 +66,59 @@
       />
     </div>
   </q-list>
+
+  <div
+    style="position: relative"
+    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"
+    ></div>
+  </div>
+
+  <q-separator style="background-color: rgba(255, 255, 255, 0.15) !important" />
 </template>
 
 <script setup lang="ts">
-import { negateProp } from '@stdlib/misc';
+import { listenPointerEvents, map, negateProp } from '@stdlib/misc';
 import { pull } from 'lodash';
 import { handleError } from 'src/code/utils/misc';
+import type { ComponentPublicInstance } from 'vue';
+
+const listRef = ref<ComponentPublicInstance>();
+
+function resizeSection(downEvent: PointerEvent) {
+  listenPointerEvents(downEvent, {
+    move(moveEvent) {
+      const clientRect = listRef.value!.$el.getBoundingClientRect();
+
+      const othersHeight = uiStore().height - clientRect.height - 32 * 3 - 2;
+
+      const othersWeight =
+        (uiStore().currentPathExpanded ? uiStore().currentPathWeight : 0) +
+        (uiStore().selectedPagesExpanded ? uiStore().selectedPagesWeight : 0);
+
+      const myNewHeight = moveEvent.clientY - clientRect.y;
+
+      const myNewWeight = map(myNewHeight, 0, othersHeight, 0, othersWeight);
+
+      uiStore().selectedPagesWeight -=
+        myNewWeight - uiStore().recentPagesWeight;
+      uiStore().recentPagesWeight = myNewWeight;
+
+      uiStore().normalizeWeights();
+    },
+  });
+}
 
 async function removeRecentPage(pageId: string) {
   try {

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

@@ -93,13 +93,12 @@
   </q-toolbar>
 
   <q-list
-    style="
-      height: 0;
-      overflow-x: hidden;
-      overflow-y: auto;
-      transition: all 0.2s;
-    "
-    :style="{ flex: uiStore().selectedPagesExpanded ? '1' : '0' }"
+    style="height: 0; overflow-x: hidden; overflow-y: auto"
+    :style="{
+      flex: uiStore().selectedPagesExpanded
+        ? uiStore().selectedPagesWeight
+        : '0',
+    }"
   >
     <q-item v-if="pageSelectionStore().selectedPages.size === 0">
       <q-item-section>

apps/client/src/stores/ui.ts

@@ -1,4 +1,4 @@
-import { negateProp } from '@stdlib/misc';
+import { minmax, negateProp } from '@stdlib/misc';
 import { defineStore } from 'pinia';
 
 function trackProp<State>(state: State, prop: Extract<keyof State, string>) {
@@ -23,6 +23,10 @@ export const useUIStore = defineStore('ui', () => {
     recentPagesExpanded: true,
     selectedPagesExpanded: false,
 
+    currentPathWeight: 1,
+    recentPagesWeight: 1,
+    selectedPagesWeight: 1,
+
     headerHeight: 0,
 
     width: 0,
@@ -38,6 +42,10 @@ export const useUIStore = defineStore('ui', () => {
   trackProp(state, 'recentPagesExpanded');
   trackProp(state, 'selectedPagesExpanded');
 
+  trackProp(state, 'currentPathWeight');
+  trackProp(state, 'recentPagesWeight');
+  trackProp(state, 'selectedPagesWeight');
+
   return {
     ...toRefs(state),
 
@@ -59,6 +67,25 @@ export const useUIStore = defineStore('ui', () => {
     resetLeftSidebarWidth() {
       state.leftSidebarWidth = 240;
     },
+
+    normalizeWeights() {
+      const min = minmax(
+        Math.min(
+          state.currentPathWeight,
+          state.recentPagesWeight,
+          state.selectedPagesWeight,
+        ),
+        1e-10,
+        1e10,
+      );
+
+      state.currentPathWeight =
+        minmax(state.currentPathWeight / min, 1e-10, 1e10) || 1;
+      state.recentPagesWeight =
+        minmax(state.recentPagesWeight / min, 1e-10, 1e10) || 1;
+      state.selectedPagesWeight =
+        minmax(state.selectedPagesWeight / min, 1e-10, 1e10) || 1;
+    },
   };
 });
 

packages/@stdlib/misc/src/math.ts

@@ -2,6 +2,16 @@ export function lerp(a: number, b: number, t: number) {
   return a + (b - a) * t;
 }
 
+export function map(
+  value: number,
+  inMin: number,
+  inMax: number,
+  outMin: number,
+  outMax: number,
+) {
+  return lerp(outMin, outMax, (value - inMin) / (inMax - inMin));
+}
+
 export function minmax(value: number, min: number, max: number) {
   return Math.min(Math.max(value, min), max);
 }