Open/close all settings tabs persistent toggle (#4204)

* Open or close all settings tabs toggle

* Update labels to expanded/collapsed

* Move settings expansion toggle on top (& shorten label)

src/renderer/components/ft-settings-section/ft-settings-section.js

@@ -7,5 +7,10 @@ export default defineComponent({
       type: String,
       required: true
     }
+  },
+  computed: {
+    allSettingsSectionsExpandedByDefault: function () {
+      return this.$store.getters.getAllSettingsSectionsExpandedByDefault
+    }
   }
 })

src/renderer/components/ft-settings-section/ft-settings-section.vue

@@ -1,5 +1,8 @@
 <template>
-  <details class="settingsSection">
+  <details
+    :open="allSettingsSectionsExpandedByDefault ? 'true' : null"
+    class="settingsSection"
+  >
     <summary class="sectionHeader">
       <h3 class="sectionTitle">
         {{ title }}

src/renderer/store/modules/settings.js

@@ -162,6 +162,7 @@ const defaultSideEffectsTriggerId = settingId =>
 /*****/
 
 const state = {
+  allSettingsSectionsExpandedByDefault: false,
   autoplayPlaylists: true,
   autoplayVideos: true,
   backendFallback: process.env.IS_ELECTRON,

src/renderer/views/Settings/Settings.css

@@ -11,3 +11,13 @@ hr {
     inline-size: 100%;
   }
 }
+
+.switchColumnGrid {
+  inline-size: 85%;
+  margin-inline: auto;
+}
+
+.settingsToggle {
+  padding-block: 0;
+  margin-block: 10px 5px;
+}

src/renderer/views/Settings/Settings.js

@@ -1,4 +1,5 @@
 import { defineComponent } from 'vue'
+import { mapActions } from 'vuex'
 import GeneralSettings from '../../components/general-settings/general-settings.vue'
 import ThemeSettings from '../../components/theme-settings/theme-settings.vue'
 import PlayerSettings from '../../components/player-settings/player-settings.vue'
@@ -14,6 +15,7 @@ import ParentControlSettings from '../../components/parental-control-settings/pa
 import ExperimentalSettings from '../../components/experimental-settings/experimental-settings.vue'
 import PasswordSettings from '../../components/password-settings/password-settings.vue'
 import PasswordDialog from '../../components/password-dialog/password-dialog.vue'
+import FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue'
 
 export default defineComponent({
   name: 'Settings',
@@ -33,6 +35,7 @@ export default defineComponent({
     'experimental-settings': ExperimentalSettings,
     'password-settings': PasswordSettings,
     'password-dialog': PasswordDialog,
+    'ft-toggle-switch': FtToggleSwitch
   },
   data: function () {
     return {
@@ -46,11 +49,20 @@ export default defineComponent({
 
     settingsPassword: function () {
       return this.$store.getters.getSettingsPassword
-    }
+    },
+
+    allSettingsSectionsExpandedByDefault: function () {
+      return this.$store.getters.getAllSettingsSectionsExpandedByDefault
+    },
   },
   created: function () {
     if (this.settingsPassword === '') {
       this.unlocked = true
     }
+  },
+  methods: {
+    ...mapActions([
+      'updateAllSettingsSectionsExpandedByDefault',
+    ])
   }
 })

src/renderer/views/Settings/Settings.vue

@@ -1,6 +1,17 @@
 <template>
   <div>
     <template v-if="unlocked">
+      <div class="switchColumnGrid">
+        <div class="switchColumn">
+          <ft-toggle-switch
+            class="settingsToggle"
+            :label="$t('Settings.Expand All Settings Sections')"
+            :default-value="allSettingsSectionsExpandedByDefault"
+            :compact="false"
+            @change="updateAllSettingsSectionsExpandedByDefault"
+          />
+        </div>
+      </div>
       <general-settings />
       <hr>
       <theme-settings />

static/locales/en-US.yaml

@@ -150,6 +150,7 @@ History:
 Settings:
   # On Settings Page
   Settings: Settings
+  Expand All Settings Sections: Expand All Settings Sections
   The app needs to restart for changes to take effect. Restart and apply change?: The
     app needs to restart for changes to take effect. Restart and apply change?
   General Settings: