Implement settings section sorting option

src/renderer/store/modules/settings.js

@@ -296,6 +296,7 @@ const state = {
   screenshotAskPath: false,
   screenshotFolderPath: '',
   screenshotFilenamePattern: '%Y%M%D-%H%N%S',
+  settingsSectionSortEnabled: false,
   fetchSubscriptionsAutomatically: true,
   settingsPassword: '',
   allowDashAv1Formats: false,

src/renderer/views/Settings/Settings.css

@@ -12,9 +12,10 @@ hr {
   }
 }
 
-.switchColumnGrid {
+.switchRow {
   inline-size: 85%;
   margin-inline: auto;
+  display: flex;
 }
 
 .settingsToggle {

src/renderer/views/Settings/Settings.js

@@ -39,18 +39,104 @@ export default defineComponent({
   },
   data: function () {
     return {
-      usingElectron: process.env.IS_ELECTRON,
-      unlocked: false
+      unlocked: false,
+      settingsComponentsData: [
+        {
+          type: 'general-settings',
+          title: this.$t('Settings.General Settings.General Settings')
+        },
+        {
+          type: 'theme-settings',
+          title: this.$t('Settings.Theme Settings.Theme Settings')
+        },
+        {
+          type: 'player-settings',
+          title: this.$t('Settings.Player Settings.Player Settings')
+        },
+        {
+          type: 'external-player-settings',
+          title: this.$t('Settings.External Player Settings.External Player Settings'),
+          usingElectron: true
+        },
+        {
+          type: 'subscription-settings',
+          title: this.$t('Settings.Subscription Settings.Subscription Settings')
+        },
+        {
+          type: 'distraction-settings',
+          title: this.$t('Settings.Distraction Free Settings.Distraction Free Settings')
+        },
+        {
+          type: 'privacy-settings',
+          title: this.$t('Settings.Privacy Settings.Privacy Settings')
+        },
+        {
+          type: 'data-settings',
+          title: this.$t('Settings.Data Settings.Data Settings')
+        },
+        {
+          type: 'proxy-settings',
+          title: this.$t('Settings.Proxy Settings.Proxy Settings'),
+          usingElectron: true
+        },
+        {
+          type: 'download-settings',
+          title: this.$t('Settings.Download Settings.Download Settings'),
+          usingElectron: true
+        },
+        {
+          type: 'parental-control-settings',
+          title: this.$t('Settings.Parental Control Settings.Parental Control Settings')
+        },
+        {
+          type: 'sponsor-block-settings',
+          title: this.$t('Settings.SponsorBlock Settings.SponsorBlock Settings'),
+        },
+        {
+          type: 'experimental-settings',
+          title: this.$t('Settings.Experimental Settings.Experimental Settings'),
+          usingElectron: true
+        },
+        {
+          type: 'password-settings',
+          title: this.$t('Settings.Password Settings.Password Settings')
+        },
+      ]
     }
   },
   computed: {
+    locale: function() {
+      return this.$i18n.locale.replace('_', '-')
+    },
+
     settingsPassword: function () {
       return this.$store.getters.getSettingsPassword
     },
 
     allSettingsSectionsExpandedByDefault: function () {
       return this.$store.getters.getAllSettingsSectionsExpandedByDefault
     },
+
+    settingsSectionSortEnabled: function () {
+      return this.$store.getters.getSettingsSectionSortEnabled
+    },
+
+    settingsSectionComponents: function () {
+      let settingsSections
+      if (!process.env.IS_ELECTRON) {
+        settingsSections = this.settingsComponentsData.filter((settingsComponent) => !settingsComponent.usingElectron)
+      } else {
+        settingsSections = this.settingsComponentsData
+      }
+
+      if (this.settingsSectionSortEnabled) {
+        return settingsSections.toSorted((a, b) =>
+          a.title.toLowerCase().localeCompare(b.title.toLowerCase(), this.locale)
+        )
+      }
+
+      return settingsSections
+    },
   },
   created: function () {
     if (this.settingsPassword === '') {
@@ -60,6 +146,7 @@ export default defineComponent({
   methods: {
     ...mapActions([
       'updateAllSettingsSectionsExpandedByDefault',
+      'updateSettingsSectionSortEnabled'
     ])
   }
 })

src/renderer/views/Settings/Settings.vue

@@ -1,44 +1,34 @@
 <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 class="switchRow">
+        <ft-toggle-switch
+          class="settingsToggle"
+          :label="$t('Settings.Expand All Settings Sections')"
+          :default-value="allSettingsSectionsExpandedByDefault"
+          :compact="false"
+          @change="updateAllSettingsSectionsExpandedByDefault"
+        />
+        <ft-toggle-switch
+          class="settingsToggle"
+          :label="$t('Settings.Sort Settings Sections (A-Z)')"
+          :default-value="settingsSectionSortEnabled"
+          :compact="false"
+          @change="updateSettingsSectionSortEnabled"
+        />
       </div>
-      <general-settings />
-      <hr>
-      <theme-settings />
-      <hr>
-      <player-settings />
-      <hr>
-      <external-player-settings v-if="usingElectron" />
-      <hr v-if="usingElectron">
-      <subscription-settings />
-      <hr>
-      <distraction-settings />
-      <hr>
-      <privacy-settings />
-      <hr>
-      <data-settings />
-      <hr>
-      <proxy-settings v-if="usingElectron" />
-      <hr v-if="usingElectron">
-      <download-settings v-if="usingElectron" />
-      <hr v-if="usingElectron">
-      <parental-control-settings />
-      <hr>
-      <sponsor-block-settings />
-      <hr v-if="usingElectron">
-      <experimental-settings v-if="usingElectron" />
-      <hr>
-      <password-settings />
+      <template
+        v-for="(settingsComponent, i) in settingsSectionComponents"
+      >
+        <hr
+          v-if="i !== 0"
+          :key="settingsComponent.type + 'hr'"
+        >
+        <component
+          :is="settingsComponent.type"
+          :key="settingsComponent.type + 'component'"
+        />
+      </template>
     </template>
     <password-dialog
       v-else

static/locales/en-US.yaml

@@ -242,6 +242,7 @@ Settings:
   # On Settings Page
   Settings: Settings
   Expand All Settings Sections: Expand All Settings Sections
+  Sort Settings Sections (A-Z): Sort Settings Sections (A-Z)
   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: