feat: state inspector: save collapsed all, fix #1391

Author: Akryum

packages/app-frontend/src/features/inspector/StateInspector.vue

@@ -3,6 +3,7 @@ import StateType from './StateType.vue'
 
 import Vue from 'vue'
 import { useDefer } from '@front/util/defer'
+import { getStorage, setStorage } from '@vue-devtools/shared-utils'
 
 const keyOrder = {
   props: 1,
@@ -25,6 +26,8 @@ const keyOrder = {
   'setup (other)': 8,
 }
 
+const STORAGE_COLLAPSE_ALL = 'state-inspector.collapse-all'
+
 export default {
   components: {
     StateType,
@@ -78,25 +81,22 @@ export default {
   },
 
   watch: {
-    state () {
-      this.forceCollapse = null
+    state: {
+      handler () {
+        this.forceCollapse = null
+        if (getStorage(STORAGE_COLLAPSE_ALL)) {
+          this.setExpandToAll(false)
+        }
+      },
+      immediate: true,
     },
   },
 
   methods: {
     toggle (dataType, currentExpanded, event = null) {
-      if (event) {
-        if (event.shiftKey) {
-          if (currentExpanded) {
-            this.setExpandToAll(false)
-            this.$emit('collapse-all')
-            return
-          } else {
-            this.setExpandToAll(true)
-            this.$emit('expand-all')
-            return
-          }
-        }
+      if (event?.shiftKey) {
+        this.setExpandToAll(!currentExpanded)
+        return
       }
       Vue.set(this.expandedState, dataType, !currentExpanded)
     },
@@ -106,6 +106,8 @@ export default {
         this.forceCollapse = value ? 'expand' : 'collapse'
         Vue.set(this.expandedState, key, value)
       })
+      this.$emit(value ? 'expand-all' : 'collapse-all')
+      setStorage(STORAGE_COLLAPSE_ALL, !value)
     },
   },
 }

packages/app-frontend/src/locales/en.js

@@ -24,7 +24,7 @@ export default {
   },
   StateInspector: {
     dataType: {
-      tooltip: '[[{{keys.shift}}]] + <<mouse>>: Expand/Collapse All',
+      tooltip: '[[{{keys.shift}}]] + <<mouse>>: Expand/Collapse All<br><div class="max-w-[200px] opacity-70">Using this shortcut will override the default toggled state and save it for next time.</div>',
     },
     filter: {
       tooltip: '[[{{keys.alt}}]] + [[D]] Filter state by name',