feat(timeline): save panes split

Author: Akryum

packages/app-frontend/src/features/layout/SplitPane.vue

@@ -1,5 +1,5 @@
 <script>
-import { ref, computed } from '@vue/composition-api'
+import { ref, computed, watch } from '@vue/composition-api'
 import { useOrientation } from './orientation'
 
 export default {
@@ -23,13 +23,41 @@ export default {
       type: String,
       default: 'center',
       validator: value => ['before', 'center', 'after'].includes(value)
+    },
+
+    saveId: {
+      type: String,
+      default: null
     }
   },
 
   setup (props) {
     const { orientation } = useOrientation()
 
     const split = ref(props.defaultSplit)
+
+    if (props.saveId) {
+      const storageKey = `split-pane-${props.saveId}`
+
+      const savedValue = localStorage.getItem(storageKey)
+      if (savedValue != null) {
+        let parsedValue
+        try {
+          parsedValue = JSON.parse(savedValue)
+        } catch (e) {
+          console.error(e)
+        }
+
+        if (typeof parsedValue === 'number') {
+          split.value = parsedValue
+        }
+      }
+
+      watch(split, value => {
+        localStorage.setItem(storageKey, JSON.stringify(value))
+      })
+    }
+
     const boundSplit = computed(() => {
       if (split.value < props.min) {
         return props.min

packages/app-frontend/src/features/timeline/Timeline.vue

@@ -69,6 +69,7 @@ export default {
 <template>
   <div>
     <SplitPane
+      save-id="timeline-left-main"
       :default-split="25"
       dragger-offset="before"
     >
@@ -96,6 +97,7 @@ export default {
 
       <template #right>
         <SplitPane
+          save-id="timeline-right"
           :default-split="70"
           :max="85"
           dragger-offset="after"