feat: layout settings

Author: Akryum

packages/app-frontend/package.json

@@ -8,6 +8,7 @@
     "@vue-devtools/shared-utils": "^0.0.0",
     "@vue/devtools-api": "^6.0.0-beta.9",
     "@vue/ui": "^0.12.5",
+    "@vueuse/core": "^10.7.2",
     "circular-json-es6": "^2.0.2",
     "d3": "^5.16.0",
     "floating-vue": "^5.2.2",

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { ref, computed, defineComponent, PropType, watch } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
 import { useOrientation } from './orientation'
-import { useSavedRef } from '@front/util/reactivity'
 
 export default defineComponent({
   props: {
@@ -45,19 +45,9 @@ export default defineComponent({
   setup (props, { emit }) {
     const { orientation } = useOrientation()
 
-    const split = ref(props.defaultSplit)
-    const leftCollapsed = ref(false)
-    const rightCollapsed = ref(false)
-
-    if (props.saveId) {
-      useSavedRef(split, `split-pane-${props.saveId}`)
-      if (props.collapsableLeft) {
-        useSavedRef(leftCollapsed, `split-pane-collapsed-left-${props.saveId}`)
-      }
-      if (props.collapsableRight) {
-        useSavedRef(rightCollapsed, `split-pane-collapsed-right-${props.saveId}`)
-      }
-    }
+    const split = props.saveId ? useLocalStorage(`split-pane-${props.saveId}`, props.defaultSplit) : ref(props.defaultSplit)
+    const leftCollapsed = props.saveId ? useLocalStorage(`split-pane-collapsed-left-${props.saveId}`, false) : ref(false)
+    const rightCollapsed = props.saveId ? useLocalStorage(`split-pane-collapsed-right-${props.saveId}`, false) : ref(false)
 
     watch(leftCollapsed, value => {
       emit('left-collapsed', value)

packages/app-frontend/src/features/settings/GlobalSettings.vue

@@ -1,10 +1,15 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
 import { supportsScreenshot } from '../timeline/composable/screenshot'
 
 type Tab = 'global' | 'components' | 'timeline'
 
 const tab = ref<Tab>('global')
+
+const hideAppSelector = useLocalStorage('split-pane-collapsed-left-app-select-pane', false)
+const hideTimelineCanvas = useLocalStorage('split-pane-collapsed-left-timeline-right', false)
+const hideEvents = useLocalStorage('split-pane-collapsed-right-timeline-right', false)
 </script>
 
 <template>
@@ -68,6 +73,14 @@ const tab = ref<Tab>('global')
         </VueGroup>
       </VueFormField>
 
+      <VueFormField
+        title="Main layout"
+      >
+        <VueSwitch v-model="hideAppSelector">
+          Collapse app selector
+        </VueSwitch>
+      </VueFormField>
+
       <VueFormField
         title="Menu Step Scrolling"
       >
@@ -156,6 +169,17 @@ const tab = ref<Tab>('global')
     </div>
 
     <div v-if="tab === 'timeline'" class="preferences flex flex-wrap gap-8">
+      <VueFormField
+        title="Layout"
+      >
+        <VueSwitch v-model="hideTimelineCanvas">
+          Hide timeline canvas
+        </VueSwitch>
+        <VueSwitch v-model="hideEvents">
+          Hide events explorer
+        </VueSwitch>
+      </VueFormField>
+
       <VueFormField
         title="Time grid"
       >

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

@@ -8,7 +8,8 @@ import TimelineEventList from './TimelineEventList.vue'
 import TimelineEventInspector from './TimelineEventInspector.vue'
 import AskScreenshotPermission from './AskScreenshotPermission.vue'
 
-import { computed, onMounted, ref, watch, defineComponent, onUnmounted } from 'vue'
+import { computed, onMounted, ref, watch, defineComponent, onUnmounted, nextTick } from 'vue'
+import { useLocalStorage } from '@vueuse/core'
 import { getStorage, SharedData } from '@vue-devtools/shared-utils'
 import { onSharedDataChange } from '@front/util/shared-data'
 import { formatTime } from '@front/util/format'
@@ -297,6 +298,27 @@ export default defineComponent({
       }
     })
 
+    // Layout settings
+
+    const hideTimelineCanvas = useLocalStorage('split-pane-collapsed-left-timeline-right', false)
+    const hideEvents = useLocalStorage('split-pane-collapsed-right-timeline-right', false)
+
+    // We shouldn't hide both at the same time
+    watch(() => [hideTimelineCanvas.value, hideEvents.value], ([a, b], old) => {
+      if (a && a === b) {
+        nextTick(() => {
+          if (old?.[0]) {
+            hideTimelineCanvas.value = false
+          } else {
+            hideEvents.value = false
+          }
+        })
+      }
+    }, {
+      immediate: true,
+      deep: true,
+    })
+
     return {
       fontsLoaded,
       startTime,
@@ -322,6 +344,8 @@ export default defineComponent({
       zoomOut,
       moveLeft,
       moveRight,
+      hideTimelineCanvas,
+      hideEvents,
     }
   },
 })
@@ -403,6 +427,20 @@ export default defineComponent({
                 />
               </template>
 
+              <VueSwitch
+                v-model="hideTimelineCanvas"
+                class="w-full px-3 py-1 extend-left"
+              >
+                Hide timeline canvas
+              </VueSwitch>
+
+              <VueSwitch
+                v-model="hideEvents"
+                class="w-full px-3 py-1 extend-left"
+              >
+                Hide events explorer
+              </VueSwitch>
+
               <VueSwitch
                 v-model="$shared.timelineTimeGrid"
                 class="w-full px-3 py-1 extend-left"

yarn.lock

@@ -2596,6 +2596,11 @@
   resolved "https://registry.yarnpkg.com/@types/speakingurl/-/speakingurl-13.0.3.tgz#cbfe3d0182c7af92ebac7e587bb9228472e05133"
   integrity sha512-nBHZAaNTEw1YG3ROL7HtTp7HjW8HD7DuFYbWoonUKTZHj7eyOt4vPzyMcc3+xgWNv7xi2rziaiBXHIq6wBeyrw==
 
+"@types/web-bluetooth@^0.0.20":
+  version "0.0.20"
+  resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz#f066abfcd1cbe66267cdbbf0de010d8a41b41597"
+  integrity sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==
+
 "@types/webpack-env@^1.15.1":
   version "1.18.0"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.18.0.tgz#ed6ecaa8e5ed5dfe8b2b3d00181702c9925f13fb"
@@ -2913,6 +2918,28 @@
     v-tooltip "^3.0.0-alpha.20"
     vue-resize "^1.0.0"
 
+"@vueuse/core@^10.7.2":
+  version "10.7.2"
+  resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-10.7.2.tgz#78917803a29a0bca1803a6521fdf7ff873f6e72c"
+  integrity sha512-AOyAL2rK0By62Hm+iqQn6Rbu8bfmbgaIMXcE3TSr7BdQ42wnSFlwIdPjInO62onYsEMK/yDMU8C6oGfDAtZ2qQ==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.20"
+    "@vueuse/metadata" "10.7.2"
+    "@vueuse/shared" "10.7.2"
+    vue-demi ">=0.14.6"
+
+"@vueuse/metadata@10.7.2":
+  version "10.7.2"
+  resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-10.7.2.tgz#ba0187ce138c287fd80301afc5b0d6a97e563633"
+  integrity sha512-kCWPb4J2KGrwLtn1eJwaJD742u1k5h6v/St5wFe8Quih90+k2a0JP8BS4Zp34XUuJqS2AxFYMb1wjUL8HfhWsQ==
+
+"@vueuse/shared@10.7.2":
+  version "10.7.2"
+  resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-10.7.2.tgz#746441fbc08072371dd600a55883422c83fd0cab"
+  integrity sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==
+  dependencies:
+    vue-demi ">=0.14.6"
+
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
@@ -11336,6 +11363,11 @@ vitepress@^0.22.3:
     vite "^2.9.7"
     vue "^3.2.33"
 
+vue-demi@>=0.14.6:
+  version "0.14.7"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.7.tgz#8317536b3ef74c5b09f268f7782e70194567d8f2"
+  integrity sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==
+
 vue-eslint-parser@^7.0.0:
   version "7.11.0"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz#214b5dea961007fcffb2ee65b8912307628d0daf"