chore: updates splitpanes (#3689)

Author: amir20

assets/auto-imports.d.ts

@@ -31,6 +31,7 @@ declare global {
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
   const createPinia: typeof import('pinia')['createPinia']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createRef: typeof import('@vueuse/core')['createRef']
   const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
   const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
@@ -421,6 +422,7 @@ declare module 'vue' {
     readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
     readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
     readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
+    readonly createRef: UnwrapRef<typeof import('@vueuse/core')['createRef']>
     readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
     readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
     readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>

assets/layouts/default.vue

@@ -5,7 +5,7 @@
       <Pane min-size="10" :size="menuWidth" v-if="!isMobile && !collapseNav && !forceMenuHidden">
         <SidePanel @search="showFuzzySearch" />
       </Pane>
-      <Pane min-size="10">
+      <Pane min-size="10" :size="100 - menuWidth">
         <Splitpanes>
           <Pane class="router-view min-h-screen">
             <router-view></router-view>
@@ -91,9 +91,9 @@ function showFuzzySearch() {
   open.value = true;
 }
 
-function onResized(e: any) {
-  if (e.length == 2) {
-    menuWidth.value = e[0].size;
+function onResized({ panes }: { panes: { size: number }[] }) {
+  if (panes) {
+    menuWidth.value = panes[0].size;
   }
 }
 </script>
@@ -102,7 +102,7 @@ function onResized(e: any) {
 @import "@/main.css" reference;
 
 :deep(.splitpanes--vertical > .splitpanes__splitter) {
-  @apply bg-base-100 hover:bg-secondary min-w-[3px];
+  @apply bg-base-100 hover:bg-secondary min-w-[5px];
 }
 
 @media screen and (max-width: 768px) {

package.json

@@ -60,7 +60,7 @@
     "lodash.debounce": "^4.0.8",
     "pinia": "^3.0.1",
     "sortablejs": "^1.15.6",
-    "splitpanes": "^3.1.8",
+    "splitpanes": "^4.0.2",
     "strip-ansi": "^7.1.0",
     "tailwindcss": "4.0.12",
     "unplugin-auto-import": "^19.1.1",
@@ -88,7 +88,7 @@
     "@types/d3-shape": "^3.1.7",
     "@types/d3-transition": "^3.0.9",
     "@types/lodash.debounce": "^4.0.9",
-    "@types/node": "^22.13.9",
+    "@types/node": "^22.13.10",
     "@vitejs/plugin-vue": "5.2.1",
     "@vue/compiler-sfc": "^3.5.13",
     "@vue/test-utils": "^2.4.6",