feat(Editor): store last state of file structure sidebar

src/components/TheEditor.vue

@@ -31,7 +31,7 @@
                         <v-icon small class="mr-1">{{ mdiHelp }}</v-icon>
                         {{ $t('Editor.ConfigReference') }}
                     </v-btn>
-                    <v-btn v-if="configFileStructure" text tile class="d-none d-md-flex" @click="showFileStructure()">
+                    <v-btn v-if="existsFileStructure" text tile class="d-none d-md-flex" @click="toggleFileStructure">
                         <v-icon small class="mr-1">{{ mdiFormatListCheckbox }}</v-icon>
                         {{ $t('Editor.FileStructure') }}
                     </v-btn>
@@ -60,9 +60,9 @@
                         :name="filename"
                         :file-extension="fileExtension"
                         class="codemirror"
-                        :class="{ withSidebar: fileStructureSidebar }"
+                        :class="{ withSidebar: existsFileStructure && fileStructureSidebar }"
                         @lineChange="lineChanges" />
-                    <div v-if="fileStructureSidebar" class="d-none d-md-flex structure-sidebar">
+                    <div v-if="existsFileStructure && fileStructureSidebar" class="d-none d-md-flex structure-sidebar">
                         <v-treeview
                             activatable
                             dense
@@ -189,7 +189,6 @@ import { ConfigFileSection } from '@/store/files/types'
 export default class TheEditor extends Mixins(BaseMixin) {
     dialogConfirmChange = false
     dialogDevices = false
-    fileStructureSidebar = true
     treeviewItemKeyProp = 'line' as const
     structureActive: number[] = []
     structureOpen: number[] = []
@@ -358,10 +357,16 @@ export default class TheEditor extends Mixins(BaseMixin) {
         return url
     }
 
-    get configFileStructure() {
-        this.fileStructureSidebar = false
+    get fileStructureSidebar() {
+        return this.$store.state.gui.editor.fileStructureSidebar
+    }
+
+    set fileStructureSidebar(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'editor.fileStructureSidebar', value: newVal })
+    }
 
-        if (!['conf', 'cfg'].includes(this.fileExtension)) return null
+    get configFileStructure(): ConfigFileSection[] {
+        if (!['conf', 'cfg'].includes(this.fileExtension)) return []
 
         const lines = this.sourcecode.split(/\n/gi)
         const regex = /^[^#\S]*?(\[(?<section>.*?)]|(?<name>\w+)\s*?[:=])/gim
@@ -395,10 +400,17 @@ export default class TheEditor extends Mixins(BaseMixin) {
             }
         }
 
-        if (structure.length > 0) this.fileStructureSidebar = true
         return structure
     }
 
+    get existsFileStructure() {
+        return this.configFileStructure.length > 0
+    }
+
+    toggleFileStructure() {
+        this.fileStructureSidebar = !this.fileStructureSidebar
+    }
+
     cancelDownload() {
         this.$store.dispatch('editor/cancelLoad')
     }
@@ -431,10 +443,6 @@ export default class TheEditor extends Mixins(BaseMixin) {
         })
     }
 
-    showFileStructure() {
-        this.fileStructureSidebar = !this.fileStructureSidebar
-    }
-
     // Relies on event bubbling to flip the flag before treeview active change is handled
     activeChangesItemClick() {
         this.structureActiveChangedBySidebar = true

src/store/gui/index.ts

@@ -122,6 +122,7 @@ export const getDefaultState = (): GuiState => {
             confirmUnsavedChanges: true,
             klipperRestartMethod: 'FIRMWARE_RESTART',
             tabSize: 2,
+            fileStructureSidebar: true,
         },
         gcodeViewer: {
             extruderColors: ['#E76F51FF', '#F4A261FF', '#E9C46AFF', '#2A9D8FFF', '#264653FF'],

src/store/gui/types.ts

@@ -62,6 +62,7 @@ export interface GuiState {
         confirmUnsavedChanges: boolean
         klipperRestartMethod: 'FIRMWARE_RESTART' | 'RESTART'
         tabSize: number
+        fileStructureSidebar: boolean
     }
     gcodeViewer: {
         extruderColors: string[]