From 62903ceed82649b09564cd19e08944667def4a85 Mon Sep 17 00:00:00 2001
From: Jason <84899178+jasonhenriquez@users.noreply.github.com>
Date: Sat, 25 Nov 2023 17:44:29 +0000
Subject: [PATCH] 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)
---
 .../ft-settings-section/ft-settings-section.js     |  5 +++++
 .../ft-settings-section/ft-settings-section.vue    |  5 ++++-
 src/renderer/store/modules/settings.js             |  1 +
 src/renderer/views/Settings/Settings.css           | 10 ++++++++++
 src/renderer/views/Settings/Settings.js            | 14 +++++++++++++-
 src/renderer/views/Settings/Settings.vue           | 11 +++++++++++
 static/locales/en-US.yaml                          |  1 +
 7 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.js b/src/renderer/components/ft-settings-section/ft-settings-section.js
index 3b0e9ebaf..8af423b43 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.js
+++ b/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
+    }
   }
 })
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.vue b/src/renderer/components/ft-settings-section/ft-settings-section.vue
index fda6e4729..ef65afb54 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.vue
+++ b/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 }}
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index ba2ff912b..037d446fe 100644
--- a/src/renderer/store/modules/settings.js
+++ b/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,
diff --git a/src/renderer/views/Settings/Settings.css b/src/renderer/views/Settings/Settings.css
index 52d1ab048..42f5502d0 100644
--- a/src/renderer/views/Settings/Settings.css
+++ b/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;
+}
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index b208bc265..f7dc155cd 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/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',
+    ])
   }
 })
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index 0109b54cd..04f83fabf 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/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 />
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index de3544fab..301f53b5d 100644
--- a/static/locales/en-US.yaml
+++ b/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: