From 9a75cd0dda3cc900c9e27a80ac0045c8053dfac2 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 23 Apr 2024 22:32:26 -0500
Subject: [PATCH 01/25] Implement settings section sorting

---
 src/renderer/store/modules/settings.js   |  1 +
 src/renderer/views/Settings/Settings.css |  3 +-
 src/renderer/views/Settings/Settings.js  | 90 +++++++++++++++++++++++-
 src/renderer/views/Settings/Settings.vue | 64 +++++++----------
 static/locales/en-US.yaml                |  1 +
 5 files changed, 120 insertions(+), 39 deletions(-)

diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index 1ef666e522d0..cb5c46ffea5a 100644
--- a/src/renderer/store/modules/settings.js
+++ b/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,
diff --git a/src/renderer/views/Settings/Settings.css b/src/renderer/views/Settings/Settings.css
index d433f8cf483c..a796ede90747 100644
--- a/src/renderer/views/Settings/Settings.css
+++ b/src/renderer/views/Settings/Settings.css
@@ -12,9 +12,10 @@ hr {
   }
 }
 
-.switchColumnGrid {
+.switchRow {
   inline-size: 85%;
   margin-inline: auto;
+  display: flex;
 }
 
 .settingsToggle {
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 9bc64c6a9e68..5ee1abb31635 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -40,10 +40,76 @@ 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
     },
@@ -51,6 +117,27 @@ export default defineComponent({
     allSettingsSectionsExpandedByDefault: function () {
       return this.$store.getters.getAllSettingsSectionsExpandedByDefault
     },
+
+    settingsSectionSortEnabled: function () {
+      return this.$store.getters.getSettingsSectionSortEnabled
+    },
+
+    settingsSectionComponents: function () {
+      let settingsSections
+      if (!this.usingElectron) {
+        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 +147,7 @@ export default defineComponent({
   methods: {
     ...mapActions([
       'updateAllSettingsSectionsExpandedByDefault',
+      'updateSettingsSectionSortEnabled'
     ])
   }
 })
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index 04f83fabf0b9..fd4931d03829 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/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
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 03eded27f8b2..dde270208608 100644
--- a/static/locales/en-US.yaml
+++ b/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:

From 569f561591d8a873e47ba1aab907a3d9b0e52deb Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Wed, 24 Apr 2024 06:28:46 -0500
Subject: [PATCH 02/25] Make IS_ELECTRON property used directly

---
 src/renderer/views/Settings/Settings.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 5ee1abb31635..df87df8673c7 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -39,7 +39,6 @@ export default defineComponent({
   },
   data: function () {
     return {
-      usingElectron: process.env.IS_ELECTRON,
       unlocked: false,
       settingsComponentsData: [
         {
@@ -124,7 +123,7 @@ export default defineComponent({
 
     settingsSectionComponents: function () {
       let settingsSections
-      if (!this.usingElectron) {
+      if (!process.env.IS_ELECTRON) {
         settingsSections = this.settingsComponentsData.filter((settingsComponent) => !settingsComponent.usingElectron)
       } else {
         settingsSections = this.settingsComponentsData

From edafe33a22b7cdfd59578f91938d6d33f11e431b Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Thu, 25 Apr 2024 10:34:08 -0500
Subject: [PATCH 03/25] Implement settings menu with icons

---
 .../ft-settings-menu/ft-settings-menu.css     | 43 ++++++++++
 .../ft-settings-menu/ft-settings-menu.js      | 17 ++++
 .../ft-settings-menu/ft-settings-menu.vue     | 24 ++++++
 .../ft-settings-section.js                    |  5 --
 .../ft-settings-section.scss                  | 30 +++----
 .../ft-settings-section.vue                   | 18 ++---
 src/renderer/main.js                          | 24 +++++-
 src/renderer/store/modules/settings.js        |  1 -
 src/renderer/views/Settings/Settings.css      | 31 ++++---
 src/renderer/views/Settings/Settings.js       | 80 ++++++++++++-------
 src/renderer/views/Settings/Settings.vue      | 37 +++++----
 11 files changed, 213 insertions(+), 97 deletions(-)
 create mode 100644 src/renderer/components/ft-settings-menu/ft-settings-menu.css
 create mode 100644 src/renderer/components/ft-settings-menu/ft-settings-menu.js
 create mode 100644 src/renderer/components/ft-settings-menu/ft-settings-menu.vue

diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.css b/src/renderer/components/ft-settings-menu/ft-settings-menu.css
new file mode 100644
index 000000000000..d551fcdeb4b2
--- /dev/null
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.css
@@ -0,0 +1,43 @@
+.settingsMenu {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  gap: 5px;
+  font-size: 22px;
+  inline-size: fit-content;
+  max-inline-size: 250px;
+}
+
+.header {
+  font-size: 26px;
+}
+
+.settingsMenuTitle {
+  text-decoration: none;
+  color: var(--tertiary-text-color);
+  overflow-x: hidden;
+  inline-size: 100%;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.settingsMenuTitle:hover {
+  color: var(--primary-text-color);
+}
+
+.settingsMenuTitle.active {
+  color: var(--primary-text-color);
+  border-block-end: 3px solid var(--primary-text-color);
+}
+
+.settingsMenuTitleIcon {
+  inline-size: 22px;
+  block-size: 22px;
+}
+
+@media only screen and (width <= 800px) {
+  .settingsMenu {
+    text-align: center;
+  }
+}
diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.js b/src/renderer/components/ft-settings-menu/ft-settings-menu.js
new file mode 100644
index 000000000000..79d66e5ed7b3
--- /dev/null
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.js
@@ -0,0 +1,17 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'FtSettingsMenu',
+  props: {
+    settingsSections: {
+      type: Array,
+      required: true
+    },
+  },
+  // emits: ['click'],
+  // methods: {
+  //   goToSection: function (section) {
+  //     this.$emit('scroll-to-section', section)
+  //   }
+  // }
+})
diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.vue b/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
new file mode 100644
index 000000000000..4f5b359cac41
--- /dev/null
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
@@ -0,0 +1,24 @@
+<template>
+  <menu
+    class="settingsMenu"
+  >
+    <h2 class="header">
+      {{ $t('Settings.Settings') }}
+    </h2>
+    <a
+      v-for="(settingsSection) in settingsSections"
+      :key="settingsSection.type + 'link'"
+      :href="'#' + settingsSection.type"
+      class="settingsMenuTitle"
+    >
+      <font-awesome-icon
+        :icon="['fas', settingsSection.icon]"
+        class="settingsMenuTitleIcon"
+      />
+      {{ settingsSection.title }}
+    </a>
+  </menu>
+</template>
+
+<script src="./ft-settings-menu.js" />
+<style scoped src="./ft-settings-menu.css" />
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 b161a0806699..42715cbd1303 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.js
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.js
@@ -7,10 +7,5 @@ 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.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index cdf50ffd3296..0f53ae764eca 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -1,16 +1,21 @@
 .settingsSection {
-  background-color: var(--card-bg-color);
   margin-block: 0;
-  margin-inline: auto;
-  inline-size: 85%;
 
   @media only screen and (width <= 800px) {
     inline-size: 100%;
   }
+}
 
-  &[open] {
-    padding-block-end: 15px;
-  }
+.sectionHeader {
+  cursor: pointer;
+  display: block;
+  padding: 1px;
+}
+
+.sectionBody {
+  background-color: var(--card-bg-color);
+  border-radius: 20px;
+  padding-block: 10px;
 
   > div {
     box-sizing: border-box;
@@ -26,19 +31,6 @@
   }
 }
 
-.sectionLine {
-  border: 0;
-  border-block-start: 2px solid var(--primary-color);
-  margin-block-start: -1px;
-  inline-size: 100%;
-}
-
-.sectionHeader {
-  cursor: pointer;
-  display: block;
-  padding: 1px;
-}
-
 .sectionTitle {
   user-select: none;
   margin-inline-start: 2%;
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 5bcae70f1a1d..01d48b8c04cc 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.vue
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.vue
@@ -1,16 +1,14 @@
 <template>
-  <details
-    :open="allSettingsSectionsExpandedByDefault"
+  <div
     class="settingsSection"
   >
-    <summary class="sectionHeader">
-      <h3 class="sectionTitle">
-        {{ title }}
-      </h3>
-    </summary>
-    <hr class="sectionLine">
-    <slot />
-  </details>
+    <h3 class="sectionTitle">
+      {{ title }}
+    </h3>
+    <div class="sectionBody">
+      <slot />
+    </div>
+  </div>
 </template>
 
 <script src="./ft-settings-section.js" />
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 11d87890841d..aef636f1e258 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -18,14 +18,19 @@ import {
   faArrowRight,
   faArrowUp,
   faBars,
+  faBorderAll,
   faBookmark,
   faCheck,
   faChevronRight,
+  faCirclePlay,
   faCircleUser,
+  faClapperboard,
   faClone,
   faComment,
   faCommentDots,
   faCopy,
+  faDatabase,
+  faDisplay,
   faDownload,
   faEdit,
   faEllipsisH,
@@ -39,16 +44,20 @@ import {
   faFileDownload,
   faFileVideo,
   faFilter,
+  faFlask,
   faFire,
   faGlobe,
   faHashtag,
   faHeart,
   faHistory,
   faInfoCircle,
+  faKey,
   faLanguage,
   faLink,
   faLinkSlash,
   faList,
+  faLock,
+  faMicrochip,
   faNewspaper,
   faPause,
   faPlay,
@@ -61,6 +70,7 @@ import {
   faSave,
   faSearch,
   faShareAlt,
+  faShield,
   faSlidersH,
   faSortDown,
   faStepBackward,
@@ -72,7 +82,8 @@ import {
   faTimes,
   faTimesCircle,
   faTrash,
-  faUsers,
+  faUserLock,
+  faUsers
 } from '@fortawesome/free-solid-svg-icons'
 import {
   faBitcoin,
@@ -97,14 +108,19 @@ library.add(
   faArrowRight,
   faArrowUp,
   faBars,
+  faBorderAll,
   faBookmark,
   faCheck,
   faChevronRight,
+  faCirclePlay,
   faCircleUser,
+  faClapperboard,
   faClone,
   faComment,
   faCommentDots,
   faCopy,
+  faDatabase,
+  faDisplay,
   faDownload,
   faEdit,
   faEllipsisH,
@@ -118,16 +134,20 @@ library.add(
   faFileDownload,
   faFileVideo,
   faFilter,
+  faFlask,
   faFire,
   faGlobe,
   faHashtag,
   faHeart,
   faHistory,
   faInfoCircle,
+  faKey,
   faLanguage,
   faLink,
   faLinkSlash,
   faList,
+  faLock,
+  faMicrochip,
   faNewspaper,
   faPause,
   faPlay,
@@ -140,6 +160,7 @@ library.add(
   faSave,
   faSearch,
   faShareAlt,
+  faShield,
   faSlidersH,
   faSortDown,
   faStepBackward,
@@ -151,6 +172,7 @@ library.add(
   faTimes,
   faTimesCircle,
   faTrash,
+  faUserLock,
   faUsers,
 
   // brand icons
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index cb5c46ffea5a..26cf3ad4095f 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -162,7 +162,6 @@ const defaultSideEffectsTriggerId = settingId =>
 /*****/
 
 const state = {
-  allSettingsSectionsExpandedByDefault: false,
   autoplayPlaylists: true,
   autoplayVideos: true,
   backendFallback: process.env.SUPPORTS_LOCAL_API,
diff --git a/src/renderer/views/Settings/Settings.css b/src/renderer/views/Settings/Settings.css
index a796ede90747..a7cd9463ac0b 100644
--- a/src/renderer/views/Settings/Settings.css
+++ b/src/renderer/views/Settings/Settings.css
@@ -1,24 +1,31 @@
-hr {
-  inline-size: 85%;
-  margin-block: 0;
-  margin-inline: auto;
-  border: 0;
-  border-block-start: 2px solid var(--scrollbar-color-hover);
+.settingsPage {
+  display: flex;
 }
 
-@media only screen and (width <= 800px) {
-  hr {
-    inline-size: 100%;
-  }
+.settingsContent {
+  margin-inline-start: 270px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-.switchRow {
-  inline-size: 85%;
+.settingsSections {
   margin-inline: auto;
+}
+
+.switchRow {
   display: flex;
 }
 
+/* .settingsSections {
+
+} */
+
 .settingsToggle {
   padding-block: 0;
   margin-block: 10px 5px;
 }
+
+.section + .section {
+  padding-block-start: 20px;
+}
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index df87df8673c7..49388c06a616 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -16,6 +16,7 @@ import ExperimentalSettings from '../../components/experimental-settings/experim
 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'
+import FtSettingsMenu from '../../components/ft-settings-menu/ft-settings-menu.vue'
 
 export default defineComponent({
   name: 'Settings',
@@ -35,90 +36,105 @@ export default defineComponent({
     'experimental-settings': ExperimentalSettings,
     'password-settings': PasswordSettings,
     'password-dialog': PasswordDialog,
-    'ft-toggle-switch': FtToggleSwitch
+    'ft-toggle-switch': FtToggleSwitch,
+    'ft-settings-menu': FtSettingsMenu,
   },
   data: function () {
     return {
-      unlocked: false,
-      settingsComponentsData: [
+      unlocked: false
+    }
+  },
+  computed: {
+    locale: function() {
+      return this.$i18n.locale.replace('_', '-')
+    },
+
+    settingsPassword: function () {
+      return this.$store.getters.getSettingsPassword
+    },
+
+    settingsSectionSortEnabled: function () {
+      return this.$store.getters.getSettingsSectionSortEnabled
+    },
+
+    settingsComponentsData: function () {
+      return [
         {
           type: 'general-settings',
-          title: this.$t('Settings.General Settings.General Settings')
+          title: this.$t('Settings.General Settings.General Settings'),
+          icon: 'border-all'
         },
         {
           type: 'theme-settings',
-          title: this.$t('Settings.Theme Settings.Theme Settings')
+          title: this.$t('Settings.Theme Settings.Theme Settings'),
+          icon: 'display'
         },
         {
           type: 'player-settings',
-          title: this.$t('Settings.Player Settings.Player Settings')
+          title: this.$t('Settings.Player Settings.Player Settings'),
+          icon: 'circle-play'
         },
         {
           type: 'external-player-settings',
           title: this.$t('Settings.External Player Settings.External Player Settings'),
+          icon: 'clapperboard',
           usingElectron: true
         },
         {
           type: 'subscription-settings',
-          title: this.$t('Settings.Subscription Settings.Subscription Settings')
+          title: this.$t('Settings.Subscription Settings.Subscription Settings'),
+          icon: 'play'
         },
         {
           type: 'distraction-settings',
-          title: this.$t('Settings.Distraction Free Settings.Distraction Free Settings')
+          title: this.$t('Settings.Distraction Free Settings.Distraction Free Settings'),
+          icon: 'eye-slash'
         },
         {
           type: 'privacy-settings',
-          title: this.$t('Settings.Privacy Settings.Privacy Settings')
+          title: this.$t('Settings.Privacy Settings.Privacy Settings'),
+          icon: 'lock'
         },
         {
           type: 'data-settings',
-          title: this.$t('Settings.Data Settings.Data Settings')
+          title: this.$t('Settings.Data Settings.Data Settings'),
+          icon: 'database'
         },
         {
           type: 'proxy-settings',
           title: this.$t('Settings.Proxy Settings.Proxy Settings'),
+          icon: 'microchip',
           usingElectron: true
         },
         {
           type: 'download-settings',
           title: this.$t('Settings.Download Settings.Download Settings'),
+          icon: 'download',
           usingElectron: true
         },
         {
           type: 'parental-control-settings',
-          title: this.$t('Settings.Parental Control Settings.Parental Control Settings')
+          title: this.$t('Settings.Parental Control Settings.Parental Control Settings'),
+          icon: 'user-lock'
         },
         {
           type: 'sponsor-block-settings',
           title: this.$t('Settings.SponsorBlock Settings.SponsorBlock Settings'),
+          // TODO: replace with SponsorBlock icon
+          icon: 'shield'
         },
         {
           type: 'experimental-settings',
           title: this.$t('Settings.Experimental Settings.Experimental Settings'),
+          icon: 'flask',
           usingElectron: true
         },
         {
           type: 'password-settings',
-          title: this.$t('Settings.Password Settings.Password Settings')
+          title: this.$t('Settings.Password Settings.Password Settings'),
+          icon: 'key'
         },
       ]
-    }
-  },
-  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 () {
@@ -144,8 +160,12 @@ export default defineComponent({
     }
   },
   methods: {
+    scrollToSection(section) {
+      const sectionElement = this.$refs[section]
+      sectionElement?.scrollIntoView()
+    },
+
     ...mapActions([
-      'updateAllSettingsSectionsExpandedByDefault',
       'updateSettingsSectionSortEnabled'
     ])
   }
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index fd4931d03829..ed50a070972c 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -1,14 +1,11 @@
 <template>
-  <div>
+  <div class="settingsPage">
     <template v-if="unlocked">
+      <ft-settings-menu
+        :settings-sections="settingsSectionComponents"
+      />
+      <div class="settingsContent">
       <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)')"
@@ -17,18 +14,20 @@
           @change="updateSettingsSectionSortEnabled"
         />
       </div>
-      <template
-        v-for="(settingsComponent, i) in settingsSectionComponents"
-      >
-        <hr
-          v-if="i !== 0"
-          :key="settingsComponent.type + 'hr'"
+      <div class="settingsSections">
+        <template
+          v-for="(settingsComponent) in settingsSectionComponents"
         >
-        <component
-          :is="settingsComponent.type"
-          :key="settingsComponent.type + 'component'"
-        />
-      </template>
+          <component
+            :is="settingsComponent.type"
+            :id="settingsComponent.type"
+            :ref="settingsComponent.type"
+            :key="settingsComponent.type + 'component'"
+            class="section"
+          />
+        </template>
+      </div>
+    </div>
     </template>
     <password-dialog
       v-else

From f4d864860776e1f2573632758257cce2951ea72e Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Fri, 26 Apr 2024 12:05:36 -0500
Subject: [PATCH 04/25] Implement short labels and fallback to longer label
 when translation doesn't exist

---
 .../ft-settings-menu/ft-settings-menu.js      | 11 +++++-----
 .../ft-settings-menu/ft-settings-menu.vue     |  2 +-
 src/renderer/views/Settings/Settings.js       | 22 ++++++++++++++++---
 static/locales/en-US.yaml                     | 14 ++++++++++++
 4 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.js b/src/renderer/components/ft-settings-menu/ft-settings-menu.js
index 79d66e5ed7b3..3fa70062ed04 100644
--- a/src/renderer/components/ft-settings-menu/ft-settings-menu.js
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.js
@@ -8,10 +8,9 @@ export default defineComponent({
       required: true
     },
   },
-  // emits: ['click'],
-  // methods: {
-  //   goToSection: function (section) {
-  //     this.$emit('scroll-to-section', section)
-  //   }
-  // }
+  methods: {
+    getTitleForSection: function(settingsSection) {
+      return settingsSection.shortTitle !== '' ? settingsSection.shortTitle : settingsSection.title
+    }
+  }
 })
diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.vue b/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
index 4f5b359cac41..9a7d27834e47 100644
--- a/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
@@ -15,7 +15,7 @@
         :icon="['fas', settingsSection.icon]"
         class="settingsMenuTitleIcon"
       />
-      {{ settingsSection.title }}
+      {{ getTitleForSection(settingsSection) }}
     </a>
   </menu>
 </template>
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 49388c06a616..26e8c59d0fe2 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -62,76 +62,90 @@ export default defineComponent({
         {
           type: 'general-settings',
           title: this.$t('Settings.General Settings.General Settings'),
+          shortTitle: this.$te('Settings.General Settings.General Settings Short Label') ? this.$t('Settings.General Settings.General Settings Short Label') : '',
           icon: 'border-all'
         },
         {
           type: 'theme-settings',
           title: this.$t('Settings.Theme Settings.Theme Settings'),
+          shortTitle: this.$te('Settings.Theme Settings.Theme Settings Short Label') ? this.$t('Settings.Theme Settings.Theme Settings Short Label') : '',
           icon: 'display'
         },
         {
           type: 'player-settings',
           title: this.$t('Settings.Player Settings.Player Settings'),
+          shortTitle: this.$te('Settings.Player Settings.Player Settings Short Label') ? this.$t('Settings.Player Settings.Player Settings Short Label') : '',
           icon: 'circle-play'
         },
         {
           type: 'external-player-settings',
           title: this.$t('Settings.External Player Settings.External Player Settings'),
+          shortTitle: this.$te('Settings.External Player Settings.External Player') ? this.$t('Settings.External Player Settings.External Player') : '',
           icon: 'clapperboard',
           usingElectron: true
         },
         {
           type: 'subscription-settings',
           title: this.$t('Settings.Subscription Settings.Subscription Settings'),
+          shortTitle: this.$te('Settings.Subscription Settings.Subscription Settings Short Label') ? this.$t('Settings.Subscription Settings.Subscription Settings Short Label') : '',
           icon: 'play'
         },
         {
           type: 'distraction-settings',
           title: this.$t('Settings.Distraction Free Settings.Distraction Free Settings'),
+          shortTitle: this.$te('Settings.Distraction Free Settings.Distraction Free Settings Short Label') ? this.$t('Settings.Distraction Free Settings.Distraction Free Settings Short Label') : '',
           icon: 'eye-slash'
         },
         {
           type: 'privacy-settings',
           title: this.$t('Settings.Privacy Settings.Privacy Settings'),
+          shortTitle: this.$te('Settings.Privacy Settings.Privacy Settings Short Label') ? this.$t('Settings.Privacy Settings.Privacy Settings Short Label') : '',
           icon: 'lock'
         },
         {
           type: 'data-settings',
           title: this.$t('Settings.Data Settings.Data Settings'),
+          shortTitle: this.$te('Settings.Data Settings.Data Settings Short Label') ? this.$t('Settings.Data Settings.Data Settings Short Label') : '',
           icon: 'database'
         },
         {
           type: 'proxy-settings',
           title: this.$t('Settings.Proxy Settings.Proxy Settings'),
+          shortTitle: this.$te('Settings.Proxy Settings.Proxy Settings Short Label') ? this.$t('Settings.Proxy Settings.Proxy Settings Short Label') : '',
           icon: 'microchip',
           usingElectron: true
         },
         {
           type: 'download-settings',
           title: this.$t('Settings.Download Settings.Download Settings'),
+          shortTitle: this.$te('Settings.Download Settings.Download Settings Short Label') ? this.$t('Settings.Download Settings.Download Settings Short Label') : '',
           icon: 'download',
           usingElectron: true
         },
         {
           type: 'parental-control-settings',
           title: this.$t('Settings.Parental Control Settings.Parental Control Settings'),
+          shortTitle: this.$te('Settings.Parental Control Settings.Parental Control Settings Short Label') ? this.$t('Settings.Parental Control Settings.Parental Control Settings Short Label') : '',
           icon: 'user-lock'
         },
         {
           type: 'sponsor-block-settings',
           title: this.$t('Settings.SponsorBlock Settings.SponsorBlock Settings'),
+          shortTitle: this.$te('Settings.SponsorBlock Settings.SponsorBlock Settings Short Label') ? this.$t('Settings.SponsorBlock Settings.SponsorBlock Settings Short Label') : '',
           // TODO: replace with SponsorBlock icon
           icon: 'shield'
         },
         {
           type: 'experimental-settings',
           title: this.$t('Settings.Experimental Settings.Experimental Settings'),
+          shortTitle: this.$te('Settings.Experimental Settings.Experimental Settings Short Label') ? this.$t('Settings.Experimental Settings.Experimental Settings Short Label') : '',
           icon: 'flask',
           usingElectron: true
         },
         {
           type: 'password-settings',
           title: this.$t('Settings.Password Settings.Password Settings'),
+          shortTitle: this.$te('Settings.Password Settings.Password Settings Short Label') ? this.$t('Settings.Password Settings.Password Settings Short Label') : '',
           icon: 'key'
         },
       ]
@@ -146,9 +160,11 @@ export default defineComponent({
       }
 
       if (this.settingsSectionSortEnabled) {
-        return settingsSections.toSorted((a, b) =>
-          a.title.toLowerCase().localeCompare(b.title.toLowerCase(), this.locale)
-        )
+        return settingsSections.toSorted((a, b) => {
+          const aTitle = a.shortTitle !== '' ? a.shortTitle : a.title
+          const bTitle = b.shortTitle !== '' ? b.shortTitle : b.title
+          return aTitle.toLowerCase().localeCompare(bTitle.toLowerCase(), this.locale)
+        })
       }
 
       return settingsSections
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index dde270208608..1a77ddaa7b8e 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -247,6 +247,7 @@ Settings:
     app needs to restart for changes to take effect. Restart and apply change?
   General Settings:
     General Settings: General Settings
+    General Settings Short Label: General
     Check for Updates: Check for Updates
     Check for Latest Blog Posts: Check for Latest Blog Posts
     Fallback to Non-Preferred Backend on Failure: Fallback to Non-Preferred Backend
@@ -290,6 +291,7 @@ Settings:
       No Action: No Action
   Theme Settings:
     Theme Settings: Theme Settings
+    Theme Settings Short Label: Theme
     Match Top Bar with Main Color: Match Top Bar with Main Color
     Expand Side Bar by Default: Expand Side Bar by Default
     Disable Smooth Scrolling: Disable Smooth Scrolling
@@ -350,6 +352,7 @@ Settings:
         #* Main Color Theme
   Player Settings:
     Player Settings: Player Settings
+    Player Settings Short Label: Player
     Force Local Backend for Legacy Formats: Force Local Backend for Legacy Formats
     Play Next Video: Play Next Video
     Turn on Subtitles by Default: Turn on Subtitles by Default
@@ -412,6 +415,7 @@ Settings:
         Name: None
   Privacy Settings:
     Privacy Settings: Privacy Settings
+    Privacy Settings Short Label: Privacy
     Remember History: Remember History
     Save Watched Progress: Save Watched Progress
     Save Watched Videos With Last Viewed Playlist: Save Watched Videos With Last Viewed Playlist
@@ -432,6 +436,7 @@ Settings:
     Are you sure you want to remove all your playlists?: Are you sure you want to remove all your playlists?
   Subscription Settings:
     Subscription Settings: Subscription Settings
+    Subscription Settings Short Label: Subscription
     Hide Videos on Watch: Hide Videos on Watch
     Fetch Feeds from RSS: Fetch Feeds from RSS
     Manage Subscriptions: Manage Subscriptions
@@ -439,6 +444,7 @@ Settings:
     Only Show Latest Video for Each Channel: Only Show Latest Video for Each Channel
   Distraction Free Settings:
     Distraction Free Settings: Distraction Free Settings
+    Distraction Free Settings Short Label: Distraction Free
     Sections:
       Side Bar: Side Bar
       Subscriptions Page: Subscriptions Page
@@ -483,6 +489,7 @@ Settings:
     Hide Subscriptions Community: Hide Subscriptions Community
   Data Settings:
     Data Settings: Data Settings
+    Data Settings Short Label: Data
     Select Import Type: Select Import Type
     Select Export Type: Select Export Type
     Import Subscriptions: Import Subscriptions
@@ -538,6 +545,7 @@ Settings:
     Manage Subscriptions: Manage Subscriptions
   Proxy Settings:
     Proxy Settings: Proxy Settings
+    Proxy Settings Short Label: Proxy
     Enable Tor / Proxy: Enable Tor / Proxy
     Proxy Protocol: Proxy Protocol
     Proxy Host: Proxy Host
@@ -552,6 +560,7 @@ Settings:
     Error getting network information. Is your proxy configured properly?: Error getting network information. Is your proxy configured properly?
   SponsorBlock Settings:
     SponsorBlock Settings: SponsorBlock Settings
+    SponsorBlock Settings Short Label: SponsorBlock
     Enable SponsorBlock: Enable SponsorBlock
     'SponsorBlock API Url (Default is https://sponsor.ajay.app)': SponsorBlock API Url (Default is https://sponsor.ajay.app)
     Notify when sponsor segment is skipped: Notify when sponsor segment is skipped
@@ -567,11 +576,13 @@ Settings:
     Category Color: Category Color
   Parental Control Settings:
     Parental Control Settings: Parental Control Settings
+    Parental Control Settings Short Label: Parental Control
     Hide Unsubscribe Button: Hide Unsubscribe Button
     Show Family Friendly Only: Show Family Friendly Only
     Hide Search Bar: Hide Search Bar
   Download Settings:
     Download Settings: Download Settings
+    Download Settings Short Label: Download
     Ask Download Path: Ask for download path
     Choose Path: Choose Path
     Download Behavior: Download Behavior
@@ -579,6 +590,7 @@ Settings:
     Open in web browser: Open in web browser
   Experimental Settings:
     Experimental Settings: Experimental Settings
+    Experimental Settings Short Label: Experimental
     Warning: These settings are experimental, they may cause crashes while enabled. Making backups is highly recommended. Use at your own risk!
     Replace HTTP Cache: Replace HTTP Cache
   Password Dialog:
@@ -588,6 +600,7 @@ Settings:
     Unlock: Unlock
   Password Settings:
     Password Settings: Password Settings
+    Password Settings Short Label: Password
     Set Password To Prevent Access: Set a password to prevent access to settings
     Set Password: Set Password
     Remove Password: Remove Password
@@ -622,6 +635,7 @@ About:
 
 Profile:
   Profile Settings: Profile Settings
+  Profile Settings Short Label: Profile
   Toggle Profile List: Toggle Profile List
   Profile Select: Profile Select
   Profile Filter: Profile Filter

From 8135ff2dd05c039e1e0c835dc2012b84a5cf4a63 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Fri, 26 Apr 2024 17:58:56 -0500
Subject: [PATCH 05/25] Implement dynamic scroll-based underlining of active
 section

---
 .../ft-settings-menu/ft-settings-menu.css     | 29 ++++++++++---
 .../ft-settings-menu/ft-settings-menu.vue     | 18 +++++---
 src/renderer/views/Settings/Settings.css      | 27 +++++++++---
 src/renderer/views/Settings/Settings.js       | 34 +++++++++++----
 src/renderer/views/Settings/Settings.vue      | 42 +++++++++----------
 5 files changed, 106 insertions(+), 44 deletions(-)

diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.css b/src/renderer/components/ft-settings-menu/ft-settings-menu.css
index d551fcdeb4b2..f5f93289c85d 100644
--- a/src/renderer/components/ft-settings-menu/ft-settings-menu.css
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.css
@@ -2,11 +2,10 @@
   position: fixed;
   display: flex;
   flex-direction: column;
-  padding: 0;
-  gap: 5px;
+  gap: 2px;
   font-size: 22px;
-  inline-size: fit-content;
-  max-inline-size: 250px;
+  inline-size: 250px;
+  padding-inline-start: 10px;
 }
 
 .header {
@@ -26,9 +25,29 @@
   color: var(--primary-text-color);
 }
 
+.settingsMenuTitleContent {
+  inline-size: fit-content;
+}
+
+.settingsMenuTitleAndIcon {
+  /* needed to have underline poke out */
+  margin-inline-start: 3px;
+}
+
+.settingsMenuTitleUnderline {
+  /* have underline poke out */
+  inline-size: calc(100% + 3px);
+
+  /* prevent "active" border from visibly pushing the content up */
+  border-block-end: 3px solid transparent;
+}
+
 .settingsMenuTitle.active {
   color: var(--primary-text-color);
-  border-block-end: 3px solid var(--primary-text-color);
+}
+
+.settingsMenuTitle.active .settingsMenuTitleUnderline {
+  border-block-end: 3px solid var(--primary-color);
 }
 
 .settingsMenuTitleIcon {
diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.vue b/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
index 9a7d27834e47..e9166f3075e5 100644
--- a/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
@@ -7,15 +7,21 @@
     </h2>
     <a
       v-for="(settingsSection) in settingsSections"
-      :key="settingsSection.type + 'link'"
+      :id="settingsSection.type + '-link'"
+      :key="settingsSection.type + '-link'"
       :href="'#' + settingsSection.type"
       class="settingsMenuTitle"
     >
-      <font-awesome-icon
-        :icon="['fas', settingsSection.icon]"
-        class="settingsMenuTitleIcon"
-      />
-      {{ getTitleForSection(settingsSection) }}
+      <div class="settingsMenuTitleContent">
+        <div class="settingsMenuTitleAndIcon">
+          <font-awesome-icon
+            :icon="['fas', settingsSection.icon]"
+            class="settingsMenuTitleIcon"
+          />
+          {{ getTitleForSection(settingsSection) }}
+        </div>
+        <div class="settingsMenuTitleUnderline" />
+      </div>
     </a>
   </menu>
 </template>
diff --git a/src/renderer/views/Settings/Settings.css b/src/renderer/views/Settings/Settings.css
index a7cd9463ac0b..bdc89a7cdbdf 100644
--- a/src/renderer/views/Settings/Settings.css
+++ b/src/renderer/views/Settings/Settings.css
@@ -7,25 +7,42 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  max-inline-size: 80%;
 }
 
 .settingsSections {
   margin-inline: auto;
 }
 
+.settingsSections:last-child {
+  margin-block-end: calc(76vh - 150px)
+}
+
 .switchRow {
   display: flex;
+  margin-inline-end: auto;
 }
 
-/* .settingsSections {
-
-} */
-
 .settingsToggle {
   padding-block: 0;
-  margin-block: 10px 5px;
+  margin-block: 0;
+}
+
+.section {
+  /* enables anchor link clicks to land right at the section headings */
+  scroll-margin-top: 24vh;
 }
 
 .section + .section {
   padding-block-start: 20px;
 }
+
+@media only screen and (width <= 950px) {
+  ft-settings-menu {
+    display: none;
+  }
+
+  .settingsContent {
+    margin-inline: auto;
+  }
+}
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 26e8c59d0fe2..35ed77cbbc90 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -45,10 +45,6 @@ export default defineComponent({
     }
   },
   computed: {
-    locale: function() {
-      return this.$i18n.locale.replace('_', '-')
-    },
-
     settingsPassword: function () {
       return this.$store.getters.getSettingsPassword
     },
@@ -170,15 +166,39 @@ export default defineComponent({
       return settingsSections
     },
   },
+  watch: {
+    locale: 'scrollToGeneralSettings'
+  },
   created: function () {
     if (this.settingsPassword === '') {
       this.unlocked = true
     }
   },
+  mounted: function () {
+    document.addEventListener('scroll', this.scrollCurrentSection)
+  },
+  beforeDestroy: function () {
+    document.removeEventListener('scroll', this.scrollCurrentSection)
+  },
   methods: {
-    scrollToSection(section) {
-      const sectionElement = this.$refs[section]
-      sectionElement?.scrollIntoView()
+    scrollToGeneralSettings() {
+      document.getElementById('general-settings')?.scrollIntoView()
+    },
+
+    scrollCurrentSection: function() {
+      const scrollY = window.scrollY + innerHeight / 4
+      this.settingsSectionComponents.forEach((section) => {
+        const sectionElement = document.getElementById(section.type)
+        const sectionHeight = sectionElement.offsetHeight
+        const sectionTop = sectionElement.offsetTop
+
+        const menuElement = document.getElementById(`${section.type}-link`)
+        if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
+          menuElement.classList.add('active')
+        } else {
+          menuElement.classList.remove('active')
+        }
+      })
     },
 
     ...mapActions([
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index ed50a070972c..e30c2e0b93e2 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -5,29 +5,29 @@
         :settings-sections="settingsSectionComponents"
       />
       <div class="settingsContent">
-      <div class="switchRow">
-        <ft-toggle-switch
-          class="settingsToggle"
-          :label="$t('Settings.Sort Settings Sections (A-Z)')"
-          :default-value="settingsSectionSortEnabled"
-          :compact="false"
-          @change="updateSettingsSectionSortEnabled"
-        />
-      </div>
-      <div class="settingsSections">
-        <template
-          v-for="(settingsComponent) in settingsSectionComponents"
-        >
-          <component
-            :is="settingsComponent.type"
-            :id="settingsComponent.type"
-            :ref="settingsComponent.type"
-            :key="settingsComponent.type + 'component'"
-            class="section"
+        <div class="switchRow">
+          <ft-toggle-switch
+            class="settingsToggle"
+            :label="$t('Settings.Sort Settings Sections (A-Z)')"
+            :default-value="settingsSectionSortEnabled"
+            :compact="false"
+            @change="updateSettingsSectionSortEnabled"
           />
-        </template>
+        </div>
+        <div class="settingsSections">
+          <template
+            v-for="(settingsComponent) in settingsSectionComponents"
+            ref=""
+          >
+            <component
+              :is="settingsComponent.type"
+              :id="settingsComponent.type"
+              :key="settingsComponent.type + '-component'"
+              class="section"
+            />
+          </template>
+        </div>
       </div>
-    </div>
     </template>
     <password-dialog
       v-else

From e9c527a5d399416334aead62215cd201f84f0de8 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Fri, 26 Apr 2024 18:11:31 -0500
Subject: [PATCH 06/25] Ensure General Settings is always first, ignoring
 sorting

Solving the problem of preventing 'jumping around' when changing locales with alphabetical sorting is hard. This problem is easily solved by stickying general settings to the top of the list unconditionally. This is in line with ChunkyProgrammer's initial assessment of how to improve the settings order in https://github.com/FreeTubeApp/FreeTube/issues/1739, albeit not also moving Theme Settings to the top for the time being. The rationale from a functional level is that General Settings is a hub. Even when you change languages, change sort order, or what have you, General Settings is right at the top. I don't imagine we need to update the label of the setting, as I think this relationship is quite intuitive.
---
 src/renderer/views/Settings/Settings.js | 24 +++++++++---------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 35ed77cbbc90..cdf4665a25f1 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -55,12 +55,6 @@ export default defineComponent({
 
     settingsComponentsData: function () {
       return [
-        {
-          type: 'general-settings',
-          title: this.$t('Settings.General Settings.General Settings'),
-          shortTitle: this.$te('Settings.General Settings.General Settings Short Label') ? this.$t('Settings.General Settings.General Settings Short Label') : '',
-          icon: 'border-all'
-        },
         {
           type: 'theme-settings',
           title: this.$t('Settings.Theme Settings.Theme Settings'),
@@ -156,19 +150,23 @@ export default defineComponent({
       }
 
       if (this.settingsSectionSortEnabled) {
-        return settingsSections.toSorted((a, b) => {
+        settingsSections = settingsSections.toSorted((a, b) => {
           const aTitle = a.shortTitle !== '' ? a.shortTitle : a.title
           const bTitle = b.shortTitle !== '' ? b.shortTitle : b.title
           return aTitle.toLowerCase().localeCompare(bTitle.toLowerCase(), this.locale)
         })
       }
 
-      return settingsSections
+      const generalSettingsEntry = {
+        type: 'general-settings',
+        title: this.$t('Settings.General Settings.General Settings'),
+        shortTitle: this.$te('Settings.General Settings.General Settings Short Label') ? this.$t('Settings.General Settings.General Settings Short Label') : '',
+        icon: 'border-all'
+      }
+
+      return [generalSettingsEntry, ...settingsSections]
     },
   },
-  watch: {
-    locale: 'scrollToGeneralSettings'
-  },
   created: function () {
     if (this.settingsPassword === '') {
       this.unlocked = true
@@ -181,10 +179,6 @@ export default defineComponent({
     document.removeEventListener('scroll', this.scrollCurrentSection)
   },
   methods: {
-    scrollToGeneralSettings() {
-      document.getElementById('general-settings')?.scrollIntoView()
-    },
-
     scrollCurrentSection: function() {
       const scrollY = window.scrollY + innerHeight / 4
       this.settingsSectionComponents.forEach((section) => {

From e16b37264eb0be78f103b1a89799f17d77411c68 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Fri, 26 Apr 2024 20:34:04 -0500
Subject: [PATCH 07/25] Styling & documentation improvements; remove
 problematized Hot Pink link underline removal experiment

---
 .../ft-settings-menu/ft-settings-menu.css     | 48 +++++++++++--------
 .../ft-settings-menu/ft-settings-menu.vue     | 10 ++--
 src/renderer/themes.css                       | 11 -----
 src/renderer/views/Settings/Settings.css      | 15 ++----
 src/renderer/views/Settings/Settings.js       | 14 +++---
 5 files changed, 46 insertions(+), 52 deletions(-)

diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.css b/src/renderer/components/ft-settings-menu/ft-settings-menu.css
index f5f93289c85d..03593a9dfea5 100644
--- a/src/renderer/components/ft-settings-menu/ft-settings-menu.css
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.css
@@ -1,61 +1,69 @@
 .settingsMenu {
-  position: fixed;
+  position: sticky;
+  inset-block-start: 120px;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 1px;
   font-size: 22px;
-  inline-size: 250px;
-  padding-inline-start: 10px;
+  padding-inline-start: 0;
+  block-size: fit-content;
 }
 
 .header {
   font-size: 26px;
 }
 
-.settingsMenuTitle {
+.title {
   text-decoration: none;
   color: var(--tertiary-text-color);
-  overflow-x: hidden;
-  inline-size: 100%;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  inline-size: 220px;
 }
 
-.settingsMenuTitle:hover {
-  color: var(--primary-text-color);
+/* prevent hover styling from showing on title click for mobile */
+@media (hover: hover) {
+  .title:hover {
+    color: var(--primary-text-color);
+  }
 }
 
-.settingsMenuTitleContent {
+.titleContent {
   inline-size: fit-content;
+  max-inline-size: 100%;
 }
 
-.settingsMenuTitleAndIcon {
+
+.iconAndTitleText {
+  overflow-x: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
   /* needed to have underline poke out */
   margin-inline-start: 3px;
 }
 
-.settingsMenuTitleUnderline {
+.titleUnderline {
   /* have underline poke out */
   inline-size: calc(100% + 3px);
 
   /* prevent "active" border from visibly pushing the content up */
-  border-block-end: 3px solid transparent;
+  border-block-end: 4px solid transparent;
 }
 
-.settingsMenuTitle.active {
+.title.active {
   color: var(--primary-text-color);
+  font-weight: 600;
 }
 
-.settingsMenuTitle.active .settingsMenuTitleUnderline {
-  border-block-end: 3px solid var(--primary-color);
+.title.active .titleUnderline {
+  border-block-end: 4px solid var(--primary-color);
 }
 
-.settingsMenuTitleIcon {
+.titleIcon {
   inline-size: 22px;
   block-size: 22px;
 }
 
-@media only screen and (width <= 800px) {
+@media only screen and (width <= 950px) {
   .settingsMenu {
     text-align: center;
   }
diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.vue b/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
index e9166f3075e5..71cd5956041f 100644
--- a/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
@@ -10,17 +10,17 @@
       :id="settingsSection.type + '-link'"
       :key="settingsSection.type + '-link'"
       :href="'#' + settingsSection.type"
-      class="settingsMenuTitle"
+      class="title"
     >
-      <div class="settingsMenuTitleContent">
-        <div class="settingsMenuTitleAndIcon">
+      <div class="titleContent">
+        <div class="iconAndTitleText">
           <font-awesome-icon
             :icon="['fas', settingsSection.icon]"
-            class="settingsMenuTitleIcon"
+            class="titleIcon"
           />
           {{ getTitleForSection(settingsSection) }}
         </div>
-        <div class="settingsMenuTitleUnderline" />
+        <div class="titleUnderline" />
       </div>
     </a>
   </menu>
diff --git a/src/renderer/themes.css b/src/renderer/themes.css
index 16f35ae590fa..c6f3910c2bc5 100644
--- a/src/renderer/themes.css
+++ b/src/renderer/themes.css
@@ -232,17 +232,6 @@
   --accent-color-opacity4: rgb(255 255 255 / 24%) !important;
 }
 
-/* Given that the Hot Pink theme does not need link underlining due to meeting
-WCAG 2 Level AA (https://webaim.org/resources/linkcontrastchecker/?fcolor=FFFFFF&bcolor=DE1C85&lcolor=000000),
-it can be safely elided. This looks quite pleasant on this theme. */
-.hotPink a:not(:hover, :focus), .hotPink .navOption:hover, .hotPink .navOption:focus, .hotPink *:not(:hover, :focus) {
-  text-decoration: none;
-}
-
-.hotPink a:hover, .hotPink a:focus {
-  text-decoration: underline;
-}
-
 .nordic {
   --primary-text-color: #EEE;
   --secondary-text-color: #ddd;
diff --git a/src/renderer/views/Settings/Settings.css b/src/renderer/views/Settings/Settings.css
index bdc89a7cdbdf..1b2b078f5eb7 100644
--- a/src/renderer/views/Settings/Settings.css
+++ b/src/renderer/views/Settings/Settings.css
@@ -1,20 +1,15 @@
 .settingsPage {
   display: flex;
-}
-
-.settingsContent {
-  margin-inline-start: 270px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  max-inline-size: 80%;
+  gap: 20px;
 }
 
 .settingsSections {
-  margin-inline: auto;
+  overflow-x: hidden;
+  max-inline-size: 90%;
 }
 
 .settingsSections:last-child {
+  /* Add enough blank space to have the last setting section be active on the FtSettingsMenu when scrolled to */
   margin-block-end: calc(76vh - 150px)
 }
 
@@ -29,7 +24,7 @@
 }
 
 .section {
-  /* enables anchor link clicks to land right at the section headings */
+  /* enables anchor link clicks to land with the section title in the top quarter of the page */
   scroll-margin-top: 24vh;
 }
 
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index cdf4665a25f1..505031ad76ab 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -173,24 +173,26 @@ export default defineComponent({
     }
   },
   mounted: function () {
-    document.addEventListener('scroll', this.scrollCurrentSection)
+    document.addEventListener('scroll', this.markScrolledToSectionAsActive)
   },
   beforeDestroy: function () {
-    document.removeEventListener('scroll', this.scrollCurrentSection)
+    document.removeEventListener('scroll', this.markScrolledToSectionAsActive)
   },
   methods: {
-    scrollCurrentSection: function() {
+    /* Set whether the current section is shown as active in the Settings Menu based
+      on if it is the lowest section within the top quarter of the viewport (25vh) */
+    markScrolledToSectionAsActive: function() {
       const scrollY = window.scrollY + innerHeight / 4
       this.settingsSectionComponents.forEach((section) => {
         const sectionElement = document.getElementById(section.type)
         const sectionHeight = sectionElement.offsetHeight
         const sectionTop = sectionElement.offsetTop
+        const correspondingMenuLink = document.getElementById(`${section.type}-link`)
 
-        const menuElement = document.getElementById(`${section.type}-link`)
         if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
-          menuElement.classList.add('active')
+          correspondingMenuLink.classList.add('active')
         } else {
-          menuElement.classList.remove('active')
+          correspondingMenuLink.classList.remove('active')
         }
       })
     },

From 5bbc41a946ecf2abf72fce51ec7025288664a7c3 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Fri, 26 Apr 2024 21:00:36 -0500
Subject: [PATCH 08/25] Implement bare minimum mobile styling

---
 .../ft-settings-menu/ft-settings-menu.css        | 16 +++++++++++++++-
 src/renderer/views/Settings/Settings.css         | 10 +++++++---
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.css b/src/renderer/components/ft-settings-menu/ft-settings-menu.css
index 03593a9dfea5..24096d640475 100644
--- a/src/renderer/components/ft-settings-menu/ft-settings-menu.css
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.css
@@ -65,6 +65,20 @@
 
 @media only screen and (width <= 950px) {
   .settingsMenu {
-    text-align: center;
+    display: none;
   }
+
+  /* .header {
+    display: none;
+  }
+  .settingsMenu {
+    position: fixed;
+    flex-direction: row;
+    gap: 5px;
+    overflow-x: scroll;
+  }
+
+  .title {
+    inline-size: 100%;
+  } */
 }
diff --git a/src/renderer/views/Settings/Settings.css b/src/renderer/views/Settings/Settings.css
index 1b2b078f5eb7..a180363ddbf5 100644
--- a/src/renderer/views/Settings/Settings.css
+++ b/src/renderer/views/Settings/Settings.css
@@ -33,11 +33,15 @@
 }
 
 @media only screen and (width <= 950px) {
-  ft-settings-menu {
-    display: none;
+  .settingsPage {
+    flex-direction: column;
   }
 
-  .settingsContent {
+  .switchRow, .settingsSections {
     margin-inline: auto;
   }
+
+  .settingsSections:last-child {
+    margin-block-end: 0;
+  }
 }

From 9097768d85a4772289b29e4be72d9759447fa5fa Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Fri, 26 Apr 2024 23:09:29 -0500
Subject: [PATCH 09/25] Increase link padding

---
 src/renderer/components/ft-settings-menu/ft-settings-menu.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.css b/src/renderer/components/ft-settings-menu/ft-settings-menu.css
index 0ee6c62f11fc..b9366a62ec3c 100644
--- a/src/renderer/components/ft-settings-menu/ft-settings-menu.css
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.css
@@ -3,7 +3,6 @@
   inset-block-start: 120px;
   display: flex;
   flex-direction: column;
-  gap: 1px;
   font-size: 22px;
   padding-inline-start: 0;
   block-size: fit-content;
@@ -17,6 +16,7 @@
   text-decoration: none;
   color: var(--tertiary-text-color);
   inline-size: 220px;
+  padding-block: 3px;
 }
 
 /* prevent hover styling from showing on title click for mobile */

From 02567db33bd61796ecfd7fe5469ae1f8818e5e40 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Fri, 26 Apr 2024 23:32:55 -0500
Subject: [PATCH 10/25] Fix underline to be equal on both sides

---
 src/renderer/components/ft-settings-menu/ft-settings-menu.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.css b/src/renderer/components/ft-settings-menu/ft-settings-menu.css
index b9366a62ec3c..a3c9883cc68f 100644
--- a/src/renderer/components/ft-settings-menu/ft-settings-menu.css
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.css
@@ -43,7 +43,7 @@
 
 .titleUnderline {
   /* have underline poke out */
-  inline-size: calc(100% + 3px);
+  inline-size: calc(100% + 6px);
 
   /* prevent "active" border from visibly pushing the content up */
   border-block-end: 4px solid transparent;

From 938b40d1948f4ce4b86eb60fefcd6e99f6b62cec Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Fri, 26 Apr 2024 23:39:21 -0500
Subject: [PATCH 11/25] Update to have first section active by default

---
 src/renderer/views/Settings/Settings.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 666a9d5a8c1a..f5981c3cfc1a 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -178,6 +178,12 @@ export default defineComponent({
   },
   mounted: function () {
     document.addEventListener('scroll', this.markScrolledToSectionAsActive)
+
+    // mark first section as active before any scrolling has taken place
+    if (this.settingsSectionComponents.length > 0) {
+      const firstSection = document.getElementById(`${this.settingsSectionComponents[0].type}-link`)
+      firstSection.classList.add('active')
+    }
   },
   beforeDestroy: function () {
     document.removeEventListener('scroll', this.markScrolledToSectionAsActive)

From 1d88d647be2d9dd2a12f37ae1f6fa7dc82620748 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sat, 27 Apr 2024 01:14:16 -0500
Subject: [PATCH 12/25] Make constant for 'active' class name

---
 src/constants.js                        |  4 ++++
 src/renderer/views/Settings/Settings.js | 12 +++++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/constants.js b/src/constants.js
index 3224725035b5..854e5164f189 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -73,6 +73,9 @@ const SyncEvents = {
   }
 }
 
+// Settings
+const ACTIVE_CLASS_NAME = 'active'
+
 // Utils
 const MAIN_PROFILE_ID = 'allChannels'
 
@@ -80,5 +83,6 @@ export {
   IpcChannels,
   DBActions,
   SyncEvents,
+  ACTIVE_CLASS_NAME,
   MAIN_PROFILE_ID
 }
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index f5981c3cfc1a..0498a682c429 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -17,6 +17,7 @@ import PasswordSettings from '../../components/password-settings/password-settin
 import PasswordDialog from '../../components/password-dialog/password-dialog.vue'
 import FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue'
 import FtSettingsMenu from '../../components/ft-settings-menu/ft-settings-menu.vue'
+import { ACTIVE_CLASS_NAME } from '../../../constants'
 
 export default defineComponent({
   name: 'Settings',
@@ -161,6 +162,7 @@ export default defineComponent({
         })
       }
 
+      // ensure General Settings is placed first regardless of sorting
       const generalSettingsEntry = {
         type: 'general-settings',
         title: this.$t('Settings.General Settings.General Settings'),
@@ -182,15 +184,15 @@ export default defineComponent({
     // mark first section as active before any scrolling has taken place
     if (this.settingsSectionComponents.length > 0) {
       const firstSection = document.getElementById(`${this.settingsSectionComponents[0].type}-link`)
-      firstSection.classList.add('active')
+      firstSection.classList.add(ACTIVE_CLASS_NAME)
     }
   },
   beforeDestroy: function () {
     document.removeEventListener('scroll', this.markScrolledToSectionAsActive)
   },
   methods: {
-    /* Set whether the current section is shown as active in the Settings Menu based
-      on if it is the lowest section within the top quarter of the viewport (25vh) */
+    /* Set the current section to be shown as active in the Settings Menu
+    * if it is the lowest section within the top quarter of the viewport (25vh) */
     markScrolledToSectionAsActive: function() {
       const scrollY = window.scrollY + innerHeight / 4
       this.settingsSectionComponents.forEach((section) => {
@@ -200,9 +202,9 @@ export default defineComponent({
         const correspondingMenuLink = document.getElementById(`${section.type}-link`)
 
         if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
-          correspondingMenuLink.classList.add('active')
+          correspondingMenuLink.classList.add(ACTIVE_CLASS_NAME)
         } else {
-          correspondingMenuLink.classList.remove('active')
+          correspondingMenuLink.classList.remove(ACTIVE_CLASS_NAME)
         }
       })
     },

From a2f346e9778a47cfd97e8b1f31593b026101b3ae Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sat, 27 Apr 2024 10:06:53 -0500
Subject: [PATCH 13/25] Replace proxy icon with more fitting one

---
 src/renderer/components/proxy-settings/proxy-settings.vue | 2 +-
 src/renderer/main.js                                      | 4 ++--
 src/renderer/views/Settings/Settings.js                   | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/proxy-settings/proxy-settings.vue b/src/renderer/components/proxy-settings/proxy-settings.vue
index 6ebb8920832f..370c0b5ed05c 100644
--- a/src/renderer/components/proxy-settings/proxy-settings.vue
+++ b/src/renderer/components/proxy-settings/proxy-settings.vue
@@ -19,7 +19,7 @@
           :select-names="protocolNames"
           :select-values="protocolValues"
           class="protocol-dropdown"
-          :icon="['fas', 'microchip']"
+          :icon="['fas', 'network-wired']"
           @change="handleUpdateProxyProtocol"
         />
       </ft-flex-box>
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 17878bfc2d15..93e623216bdd 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -65,7 +65,7 @@ import {
   faList,
   faLocationDot,
   faLock,
-  faMicrochip,
+  faNetworkWired,
   faNewspaper,
   faPalette,
   faPause,
@@ -168,7 +168,7 @@ library.add(
   faList,
   faLocationDot,
   faLock,
-  faMicrochip,
+  faNetworkWired,
   faNewspaper,
   faPalette,
   faPause,
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 0498a682c429..717c59c20056 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -107,7 +107,7 @@ export default defineComponent({
           type: 'proxy-settings',
           title: this.$t('Settings.Proxy Settings.Proxy Settings'),
           shortTitle: this.$te('Settings.Proxy Settings.Proxy Settings Short Label') ? this.$t('Settings.Proxy Settings.Proxy Settings Short Label') : '',
-          icon: 'microchip',
+          icon: 'network-wired',
           usingElectron: true
         },
         {

From bb0a3d7ecac53f639785e35adb3602706849327c Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 14 May 2024 18:01:40 -0500
Subject: [PATCH 14/25] Move shortTitle logic

---
 src/renderer/components/ft-settings-menu/ft-settings-menu.js | 5 -----
 .../components/ft-settings-menu/ft-settings-menu.vue         | 2 +-
 src/renderer/views/Settings/Settings.js                      | 5 +++--
 src/renderer/views/Settings/Settings.vue                     | 2 +-
 4 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.js b/src/renderer/components/ft-settings-menu/ft-settings-menu.js
index 3fa70062ed04..a89a2dcb4bf9 100644
--- a/src/renderer/components/ft-settings-menu/ft-settings-menu.js
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.js
@@ -7,10 +7,5 @@ export default defineComponent({
       type: Array,
       required: true
     },
-  },
-  methods: {
-    getTitleForSection: function(settingsSection) {
-      return settingsSection.shortTitle !== '' ? settingsSection.shortTitle : settingsSection.title
-    }
   }
 })
diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.vue b/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
index 71cd5956041f..f194da78a866 100644
--- a/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
@@ -18,7 +18,7 @@
             :icon="['fas', settingsSection.icon]"
             class="titleIcon"
           />
-          {{ getTitleForSection(settingsSection) }}
+          {{ settingsSection.shortTitle }}
         </div>
         <div class="titleUnderline" />
       </div>
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 4ffa461742db..1af540746ae5 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -63,7 +63,7 @@ export default defineComponent({
     },
 
     settingsComponentsData: function () {
-      return [
+      const settingsComponentsData = [
         {
           type: 'theme-settings',
           title: this.$t('Settings.Theme Settings.Theme Settings'),
@@ -152,6 +152,7 @@ export default defineComponent({
           icon: 'key'
         },
       ]
+      return settingsComponentsData.map((entry) => { return { ...entry, shortTitle: entry.shortTitle || entry.title } })
     },
 
     settingsSectionComponents: function () {
@@ -168,7 +169,7 @@ export default defineComponent({
       const generalSettingsEntry = {
         type: 'general-settings',
         title: this.$t('Settings.General Settings.General Settings'),
-        shortTitle: this.$te('Settings.General Settings.General Settings Short Label') ? this.$t('Settings.General Settings.General Settings Short Label') : '',
+        shortTitle: this.$te('Settings.General Settings.General Settings Short Label') ? this.$t('Settings.General Settings.General Settings Short Label') : this.$t('Settings.General Settings.General Settings'),
         icon: 'border-all'
       }
 
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index e30c2e0b93e2..cc971a6b9333 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -17,11 +17,11 @@
         <div class="settingsSections">
           <template
             v-for="(settingsComponent) in settingsSectionComponents"
-            ref=""
           >
             <component
               :is="settingsComponent.type"
               :id="settingsComponent.type"
+              :ref="settingsComponent.type"
               :key="settingsComponent.type + '-component'"
               class="section"
             />

From 94d403a1d1143c6b580c0adf5e6dbcead2bba81e Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Tue, 14 May 2024 18:42:48 -0500
Subject: [PATCH 15/25] Update scrolling logic to not use anchor links

---
 .../components/ft-settings-menu/ft-settings-menu.js         | 6 ++++++
 .../components/ft-settings-menu/ft-settings-menu.vue        | 4 +++-
 src/renderer/views/Settings/Settings.js                     | 4 ++++
 src/renderer/views/Settings/Settings.vue                    | 1 +
 4 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.js b/src/renderer/components/ft-settings-menu/ft-settings-menu.js
index a89a2dcb4bf9..3e921ed466ce 100644
--- a/src/renderer/components/ft-settings-menu/ft-settings-menu.js
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.js
@@ -7,5 +7,11 @@ export default defineComponent({
       type: Array,
       required: true
     },
+  },
+  emits: ['scroll-to-section'],
+  methods: {
+    goToSettingsSection: function (sectionType) {
+      this.$emit('scroll-to-section', sectionType)
+    }
   }
 })
diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.vue b/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
index f194da78a866..3e6f9b48074d 100644
--- a/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
@@ -9,8 +9,10 @@
       v-for="(settingsSection) in settingsSections"
       :id="settingsSection.type + '-link'"
       :key="settingsSection.type + '-link'"
-      :href="'#' + settingsSection.type"
       class="title"
+      href="javascript:;"
+      @click.stop="goToSettingsSection(settingsSection.type)"
+      @keydown.enter.stop="goToSettingsSection(settingsSection.type)"
     >
       <div class="titleContent">
         <div class="iconAndTitleText">
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 1af540746ae5..e6dcc4a3583e 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -194,6 +194,10 @@ export default defineComponent({
     document.removeEventListener('scroll', this.markScrolledToSectionAsActive)
   },
   methods: {
+    scrollToSection: function(sectionType) {
+      this.$refs[sectionType][0].$el.scrollIntoView()
+    },
+
     /* Set the current section to be shown as active in the Settings Menu
     * if it is the lowest section within the top quarter of the viewport (25vh) */
     markScrolledToSectionAsActive: function() {
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index cc971a6b9333..be7c6b224fd4 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -3,6 +3,7 @@
     <template v-if="unlocked">
       <ft-settings-menu
         :settings-sections="settingsSectionComponents"
+        @scroll-to-section="scrollToSection"
       />
       <div class="settingsContent">
         <div class="switchRow">

From 9e9a07a0ff411d982fb7596cc56049556723b16e Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Wed, 15 May 2024 00:08:39 -0500
Subject: [PATCH 16/25] Implement mobile view for Settings Menu

---
 src/constants.js                              |  5 +-
 .../ft-settings-menu/ft-settings-menu.css     | 87 ++++++++++++++++---
 .../ft-settings-menu/ft-settings-menu.js      |  4 +-
 .../ft-settings-menu/ft-settings-menu.vue     |  2 +-
 .../ft-settings-section.scss                  |  2 +-
 src/renderer/main.js                          |  4 +-
 src/renderer/views/Settings/Settings.css      | 47 +++++++---
 src/renderer/views/Settings/Settings.js       | 44 ++++++++--
 src/renderer/views/Settings/Settings.vue      | 23 ++++-
 static/locales/en-US.yaml                     |  1 +
 10 files changed, 178 insertions(+), 41 deletions(-)

diff --git a/src/constants.js b/src/constants.js
index 9da739b56420..2d8f915d382d 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -82,11 +82,14 @@ const MAIN_PROFILE_ID = 'allChannels'
 // YouTube search character limit is 100 characters
 const SEARCH_CHAR_LIMIT = 100
 
+const SETTINGS_MOBILE_WIDTH_THRESHOLD = 1015
+
 export {
   IpcChannels,
   DBActions,
   SyncEvents,
   ACTIVE_CLASS_NAME,
   MAIN_PROFILE_ID,
-  SEARCH_CHAR_LIMIT
+  SEARCH_CHAR_LIMIT,
+  SETTINGS_MOBILE_WIDTH_THRESHOLD
 }
diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.css b/src/renderer/components/ft-settings-menu/ft-settings-menu.css
index a3c9883cc68f..448f38e33a07 100644
--- a/src/renderer/components/ft-settings-menu/ft-settings-menu.css
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.css
@@ -1,6 +1,7 @@
 .settingsMenu {
+  /* top nav + margin */
+  inset-block-start: 96px;
   position: sticky;
-  inset-block-start: 120px;
   display: flex;
   flex-direction: column;
   font-size: 22px;
@@ -10,6 +11,8 @@
 
 .header {
   font-size: 26px;
+  inline-size: fit-content;
+  margin-block: 0 10px;
 }
 
 .title {
@@ -49,23 +52,51 @@
   border-block-end: 4px solid transparent;
 }
 
-.title.active {
-  color: var(--primary-text-color);
-  font-weight: 600;
-}
-
-.title.active .titleUnderline {
-  border-block-end: 4px solid var(--primary-color);
-}
-
 .titleIcon {
   inline-size: 22px;
   block-size: 22px;
 }
 
-@media only screen and (width <= 950px) {
+@media only screen and (width >= 1015px) {
   .settingsMenu {
-    display: none;
+    margin-block: 0;
+  }
+
+  .header {
+    margin-block-start: 10px;
+  }
+
+  .title.active {
+    color: var(--primary-text-color);
+    font-weight: 600;
+  }
+
+  .title.active .titleUnderline {
+    border-block-end: 4px solid var(--primary-color);
+  }
+}
+
+@media only screen and (width <= 1015px) {
+  .settingsMenu {
+    inline-size: fit-content;
+    margin-inline: auto;
+    position: relative;
+    inset-block-start: 0;
+    font-size: 30px;
+  }
+
+  .titleIcon {
+    inline-size: 30px;
+    block-size: 30px;
+    margin-inline-end: 10px;
+  }
+
+  .title {
+    inline-size: auto;
+  }
+
+  .header {
+    font-size: 32px;
   }
 
   /*
@@ -85,3 +116,35 @@
     inline-size: 100%;
   } */
 }
+
+@media only screen and (width <= 1015px) and (height <= 830px) {
+  .settingsMenu {
+    font-size: 25px;
+  }
+
+  .titleIcon {
+    inline-size: 25px;
+    block-size: 25px;
+  }
+
+  .header {
+    font-size: 28px;
+  }
+}
+
+@media only screen and (width <= 1015px) and (height <= 735px),
+screen and (width >= 1015px) and (height <= 600px) {
+  .settingsMenu {
+    font-size: 18px;
+  }
+
+  .titleIcon {
+    inline-size: 18px;
+    block-size: 18px;
+    margin-inline-end: 5px;
+  }
+
+  .header {
+    font-size: 22px;
+  }
+}
diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.js b/src/renderer/components/ft-settings-menu/ft-settings-menu.js
index 3e921ed466ce..5378063a9803 100644
--- a/src/renderer/components/ft-settings-menu/ft-settings-menu.js
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.js
@@ -8,10 +8,10 @@ export default defineComponent({
       required: true
     },
   },
-  emits: ['scroll-to-section'],
+  emits: ['navigate-to-section'],
   methods: {
     goToSettingsSection: function (sectionType) {
-      this.$emit('scroll-to-section', sectionType)
+      this.$emit('navigate-to-section', sectionType)
     }
   }
 })
diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.vue b/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
index 3e6f9b48074d..dbd7475a45a5 100644
--- a/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
@@ -7,7 +7,7 @@
     </h2>
     <a
       v-for="(settingsSection) in settingsSections"
-      :id="settingsSection.type + '-link'"
+      :id="settingsSection.type"
       :key="settingsSection.type + '-link'"
       class="title"
       href="javascript:;"
diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index 0f53ae764eca..9f2a2b795c3e 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -33,7 +33,7 @@
 
 .sectionTitle {
   user-select: none;
-  margin-inline-start: 2%;
+  margin-inline-start: 20px;
   margin-block: 0.5em;
 }
 
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 0c2f096b1e21..9ed849b6244d 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -96,7 +96,8 @@ import {
   faTimesCircle,
   faTrash,
   faUserLock,
-  faUsers
+  faUsers,
+  faAngleLeft
 } from '@fortawesome/free-solid-svg-icons'
 import {
   faBitcoin,
@@ -116,6 +117,7 @@ Vue.config.productionTip = process.env.NODE_ENV === 'development'
 library.add(
   // solid icons
   faAngleDown,
+  faAngleLeft,
   faAngleUp,
   faArrowDown,
   faArrowDownShortWide,
diff --git a/src/renderer/views/Settings/Settings.css b/src/renderer/views/Settings/Settings.css
index a180363ddbf5..d7c523bb1d17 100644
--- a/src/renderer/views/Settings/Settings.css
+++ b/src/renderer/views/Settings/Settings.css
@@ -8,11 +8,6 @@
   max-inline-size: 90%;
 }
 
-.settingsSections:last-child {
-  /* Add enough blank space to have the last setting section be active on the FtSettingsMenu when scrolled to */
-  margin-block-end: calc(76vh - 150px)
-}
-
 .switchRow {
   display: flex;
   margin-inline-end: auto;
@@ -28,20 +23,50 @@
   scroll-margin-top: 24vh;
 }
 
-.section + .section {
-  padding-block-start: 20px;
+@media only screen and (width >= 1015px) {
+  .section + .section {
+    padding-block-start: 20px;
+  }
+
+  .settingsSections:last-child {
+    /* Add enough blank space to have the last setting section be active on the FtSettingsMenu when scrolled to */
+    margin-block-end: calc(76vh - 150px)
+  }
+}
+
+@media only screen and (width <= 1200px) {
+  .settingsSections {
+    max-inline-size: 100%;
+  }
 }
 
-@media only screen and (width <= 950px) {
-  .settingsPage {
+@media only screen and (width <= 1015px) {
+  .settingsPage.settings {
     flex-direction: column;
+    margin-block: 0;
+    gap: 10px;
   }
 
   .switchRow, .settingsSections {
     margin-inline: auto;
   }
 
-  .settingsSections:last-child {
-    margin-block-end: 0;
+  .switchRow {
+    display: none;
+  }
+
+  .settingsSections {
+    overflow-y: hidden;
+    margin-block-end: 80px;
+  }
+
+  .hideOnMobile {
+    display: none;
+  }
+
+  .returnToMenuMobileIcon {
+    margin-block-start: 20px;
+    block-size: 30px;
+    font-size: 30px;
   }
 }
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index e6dcc4a3583e..53758da8aa16 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, nextTick } from 'vue'
 import { mapActions } from 'vuex'
 import GeneralSettings from '../../components/general-settings/general-settings.vue'
 import ThemeSettings from '../../components/theme-settings/theme-settings.vue'
@@ -17,7 +17,7 @@ import PasswordSettings from '../../components/password-settings/password-settin
 import PasswordDialog from '../../components/password-dialog/password-dialog.vue'
 import FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue'
 import FtSettingsMenu from '../../components/ft-settings-menu/ft-settings-menu.vue'
-import { ACTIVE_CLASS_NAME } from '../../../constants'
+import { ACTIVE_CLASS_NAME, SETTINGS_MOBILE_WIDTH_THRESHOLD } from '../../../constants'
 
 export default defineComponent({
   name: 'Settings',
@@ -46,6 +46,8 @@ export default defineComponent({
   },
   data: function () {
     return {
+      isInDesktopView: true,
+      settingsSectionTypeOpenInMobile: null,
       unlocked: false
     }
   },
@@ -182,20 +184,27 @@ export default defineComponent({
     }
   },
   mounted: function () {
+    this.handleResize()
+    window.addEventListener('resize', this.handleResize)
     document.addEventListener('scroll', this.markScrolledToSectionAsActive)
 
     // mark first section as active before any scrolling has taken place
     if (this.settingsSectionComponents.length > 0) {
-      const firstSection = document.getElementById(`${this.settingsSectionComponents[0].type}-link`)
+      const firstSection = document.getElementById(this.settingsSectionComponents[0].type)
       firstSection.classList.add(ACTIVE_CLASS_NAME)
     }
   },
   beforeDestroy: function () {
     document.removeEventListener('scroll', this.markScrolledToSectionAsActive)
+    window.removeEventListener('resize', this.handleResize)
   },
   methods: {
-    scrollToSection: function(sectionType) {
-      this.$refs[sectionType][0].$el.scrollIntoView()
+    navigateToSection: function(sectionType) {
+      if (this.isInDesktopView) {
+        nextTick(() => { this.$refs[sectionType][0].$el.scrollIntoView() })
+      } else {
+        this.settingsSectionTypeOpenInMobile = sectionType
+      }
     },
 
     /* Set the current section to be shown as active in the Settings Menu
@@ -203,12 +212,12 @@ export default defineComponent({
     markScrolledToSectionAsActive: function() {
       const scrollY = window.scrollY + innerHeight / 4
       this.settingsSectionComponents.forEach((section) => {
-        const sectionElement = document.getElementById(section.type)
+        const sectionElement = this.$refs[section.type][0].$el
         const sectionHeight = sectionElement.offsetHeight
         const sectionTop = sectionElement.offsetTop
-        const correspondingMenuLink = document.getElementById(`${section.type}-link`)
+        const correspondingMenuLink = document.getElementById(section.type)
 
-        if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
+        if (this.isInDesktopView && scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
           correspondingMenuLink.classList.add(ACTIVE_CLASS_NAME)
         } else {
           correspondingMenuLink.classList.remove(ACTIVE_CLASS_NAME)
@@ -216,6 +225,25 @@ export default defineComponent({
       })
     },
 
+    handleResize: function () {
+      const wasNotInDesktopView = !this.isInDesktopView
+      this.isInDesktopView = window.innerWidth > SETTINGS_MOBILE_WIDTH_THRESHOLD
+
+      // navigate to section that was open in mobile or desktop view, if any
+      if (this.isInDesktopView && wasNotInDesktopView && this.settingsSectionTypeOpenInMobile != null) {
+        this.navigateToSection(this.settingsSectionTypeOpenInMobile)
+        this.settingsSectionTypeOpenInMobile = null
+      } else if (!this.isInDesktopView && !wasNotInDesktopView) {
+        const activeMenuLink = document.querySelector(`.settingsMenu .title.${ACTIVE_CLASS_NAME}`)
+        if (!activeMenuLink) {
+          return
+        }
+
+        const sectionType = activeMenuLink.id
+        this.navigateToSection(sectionType)
+      }
+    },
+
     ...mapActions([
       'updateSettingsSectionSortEnabled'
     ])
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index be7c6b224fd4..cda05dc2a2ba 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -1,11 +1,26 @@
 <template>
-  <div class="settingsPage">
+  <div class="settings settingsPage">
     <template v-if="unlocked">
+      <div v-show="settingsSectionTypeOpenInMobile != null">
+        <font-awesome-icon
+          :icon="['fas', 'angle-left']"
+          class="returnToMenuMobileIcon"
+          role="button"
+          :title="$t('Settings.Return to Settings Menu')"
+          tabindex="0"
+          @click="settingsSectionTypeOpenInMobile = null"
+          @keydown.space.enter="settingsSectionTypeOpenInMobile = null"
+        />
+      </div>
       <ft-settings-menu
+        v-show="isInDesktopView || settingsSectionTypeOpenInMobile == null"
         :settings-sections="settingsSectionComponents"
-        @scroll-to-section="scrollToSection"
+        @navigate-to-section="navigateToSection"
       />
-      <div class="settingsContent">
+      <div
+        v-show="isInDesktopView || settingsSectionTypeOpenInMobile != null"
+        class="settingsContent"
+      >
         <div class="switchRow">
           <ft-toggle-switch
             class="settingsToggle"
@@ -21,9 +36,9 @@
           >
             <component
               :is="settingsComponent.type"
-              :id="settingsComponent.type"
               :ref="settingsComponent.type"
               :key="settingsComponent.type + '-component'"
+              :class="{ hideOnMobile: settingsSectionTypeOpenInMobile !== settingsComponent.type }"
               class="section"
             />
           </template>
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 07ae86ccf760..7ecbb6da590a 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -244,6 +244,7 @@ Settings:
   Settings: Settings
   Expand All Settings Sections: Expand All Settings Sections
   Sort Settings Sections (A-Z): Sort Settings Sections (A-Z)
+  Return to Settings Menu: Return to Settings Menu
   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:

From 1408a442fe1fdf7bea171a5ea93f11f925deefda Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Fri, 17 May 2024 18:20:49 -0500
Subject: [PATCH 17/25] Replace rounded corners and move section titles to the
 interior

---
 .../components/ft-settings-section/ft-settings-section.scss | 1 -
 .../components/ft-settings-section/ft-settings-section.vue  | 6 +++---
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/ft-settings-section/ft-settings-section.scss b/src/renderer/components/ft-settings-section/ft-settings-section.scss
index 9f2a2b795c3e..50764ae34891 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.scss
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.scss
@@ -14,7 +14,6 @@
 
 .sectionBody {
   background-color: var(--card-bg-color);
-  border-radius: 20px;
   padding-block: 10px;
 
   > div {
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 01d48b8c04cc..c748d931a32f 100644
--- a/src/renderer/components/ft-settings-section/ft-settings-section.vue
+++ b/src/renderer/components/ft-settings-section/ft-settings-section.vue
@@ -2,10 +2,10 @@
   <div
     class="settingsSection"
   >
-    <h3 class="sectionTitle">
-      {{ title }}
-    </h3>
     <div class="sectionBody">
+      <h3 class="sectionTitle">
+        {{ title }}
+      </h3>
       <slot />
     </div>
   </div>

From 31112da78a2bed3090e6b5b3e77813fde66a370c Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 20 May 2024 08:47:00 -0500
Subject: [PATCH 18/25] Update font sizes and breakpoints to work for all
 supported devices & languages

---
 .../ft-settings-menu/ft-settings-menu.css     | 55 +++++--------------
 1 file changed, 13 insertions(+), 42 deletions(-)

diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.css b/src/renderer/components/ft-settings-menu/ft-settings-menu.css
index 448f38e33a07..77aed6c83098 100644
--- a/src/renderer/components/ft-settings-menu/ft-settings-menu.css
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.css
@@ -4,13 +4,11 @@
   position: sticky;
   display: flex;
   flex-direction: column;
-  font-size: 22px;
   padding-inline-start: 0;
   block-size: fit-content;
 }
 
 .header {
-  font-size: 26px;
   inline-size: fit-content;
   margin-block: 0 10px;
 }
@@ -52,18 +50,20 @@
   border-block-end: 4px solid transparent;
 }
 
-.titleIcon {
-  inline-size: 22px;
-  block-size: 22px;
-}
-
 @media only screen and (width >= 1015px) {
   .settingsMenu {
     margin-block: 0;
+    font-size: 16px;
   }
 
   .header {
     margin-block-start: 10px;
+    font-size: 26px;
+  }
+
+  .titleIcon {
+    inline-size: 16px;
+    block-size: 16px;
   }
 
   .title.active {
@@ -76,6 +76,7 @@
   }
 }
 
+/* overall mobile breakpoint; large text */
 @media only screen and (width <= 1015px) {
   .settingsMenu {
     inline-size: fit-content;
@@ -92,48 +93,18 @@
   }
 
   .title {
-    inline-size: auto;
+    inline-size: fit-content;
+    max-inline-size: 90vw;
   }
 
   .header {
     font-size: 32px;
   }
-
-  /*
-  TODO: integrate settings menu into mobile view
-
-  .header {
-    display: none;
-  }
-  .settingsMenu {
-    position: fixed;
-    flex-direction: row;
-    gap: 5px;
-    overflow-x: scroll;
-  }
-
-  .title {
-    inline-size: 100%;
-  } */
-}
-
-@media only screen and (width <= 1015px) and (height <= 830px) {
-  .settingsMenu {
-    font-size: 25px;
-  }
-
-  .titleIcon {
-    inline-size: 25px;
-    block-size: 25px;
-  }
-
-  .header {
-    font-size: 28px;
-  }
 }
 
-@media only screen and (width <= 1015px) and (height <= 735px),
-screen and (width >= 1015px) and (height <= 600px) {
+/* small height or width mobile breakpoint; intermediary text */
+@media only screen and (width <= 1015px) and (height <= 830px),
+only screen and (width <= 500px) {
   .settingsMenu {
     font-size: 18px;
   }

From de6b2fe2962e7eed40dfa1a9de50071b56097ac4 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sat, 25 May 2024 16:44:27 -0500
Subject: [PATCH 19/25] Update as per review comments

---
 src/renderer/views/Settings/Settings.css | 5 +++--
 src/renderer/views/Settings/Settings.vue | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/renderer/views/Settings/Settings.css b/src/renderer/views/Settings/Settings.css
index d7c523bb1d17..ca241159370a 100644
--- a/src/renderer/views/Settings/Settings.css
+++ b/src/renderer/views/Settings/Settings.css
@@ -41,9 +41,10 @@
 }
 
 @media only screen and (width <= 1015px) {
-  .settingsPage.settings {
-    flex-direction: column;
+  /* Needed to overcome routerView styling for margin-block */
+  .settingsPage.settingsPage{
     margin-block: 0;
+    flex-direction: column;
     gap: 10px;
   }
 
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index cda05dc2a2ba..088657ba061b 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="settings settingsPage">
+  <div class="settingsPage">
     <template v-if="unlocked">
       <div v-show="settingsSectionTypeOpenInMobile != null">
         <font-awesome-icon
@@ -37,7 +37,7 @@
             <component
               :is="settingsComponent.type"
               :ref="settingsComponent.type"
-              :key="settingsComponent.type + '-component'"
+              :key="settingsComponent.type"
               :class="{ hideOnMobile: settingsSectionTypeOpenInMobile !== settingsComponent.type }"
               class="section"
             />

From a07bafc77846f46d26397bc78d8825f8c4563e08 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sat, 25 May 2024 16:51:30 -0500
Subject: [PATCH 20/25] Make class-specific constants declared in file

---
 src/constants.js                        | 10 +---------
 src/renderer/views/Settings/Settings.js |  4 +++-
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/constants.js b/src/constants.js
index 079c0a0cfd20..8eb0089b512e 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -74,9 +74,6 @@ const SyncEvents = {
   }
 }
 
-// Settings
-const ACTIVE_CLASS_NAME = 'active'
-
 // Utils
 const MAIN_PROFILE_ID = 'allChannels'
 
@@ -89,17 +86,12 @@ const PLAYLIST_HEIGHT_FORCE_LIST_THRESHOLD = 500
 // YouTube search character limit is 100 characters
 const SEARCH_CHAR_LIMIT = 100
 
-// Width threshold in px at which we switch to using a more heavily altered settings view for mobile users
-const SETTINGS_MOBILE_WIDTH_THRESHOLD = 1015
-
 export {
   IpcChannels,
   DBActions,
   SyncEvents,
-  ACTIVE_CLASS_NAME,
   MAIN_PROFILE_ID,
   MOBILE_WIDTH_THRESHOLD,
   PLAYLIST_HEIGHT_FORCE_LIST_THRESHOLD,
-  SEARCH_CHAR_LIMIT,
-  SETTINGS_MOBILE_WIDTH_THRESHOLD
+  SEARCH_CHAR_LIMIT
 }
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 53758da8aa16..3b7ba1211765 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -17,7 +17,9 @@ import PasswordSettings from '../../components/password-settings/password-settin
 import PasswordDialog from '../../components/password-dialog/password-dialog.vue'
 import FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue'
 import FtSettingsMenu from '../../components/ft-settings-menu/ft-settings-menu.vue'
-import { ACTIVE_CLASS_NAME, SETTINGS_MOBILE_WIDTH_THRESHOLD } from '../../../constants'
+
+const ACTIVE_CLASS_NAME = 'active'
+const SETTINGS_MOBILE_WIDTH_THRESHOLD = 1015
 
 export default defineComponent({
   name: 'Settings',

From c7479b6f5f230f2f074c43dbd64c7f03ad89a246 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Wed, 29 May 2024 20:48:21 -0500
Subject: [PATCH 21/25] Update settings menu link sizing to be dynamic to
 better accommodate mobile/tablet devices

---
 .../components/ft-settings-menu/ft-settings-menu.css      | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.css b/src/renderer/components/ft-settings-menu/ft-settings-menu.css
index 77aed6c83098..025e9df54429 100644
--- a/src/renderer/components/ft-settings-menu/ft-settings-menu.css
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.css
@@ -5,7 +5,8 @@
   display: flex;
   flex-direction: column;
   padding-inline-start: 0;
-  block-size: fit-content;
+  block-size: calc(85vh - 96px);
+  max-block-size: 600px;
 }
 
 .header {
@@ -17,7 +18,9 @@
   text-decoration: none;
   color: var(--tertiary-text-color);
   inline-size: 220px;
-  padding-block: 3px;
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
 }
 
 /* prevent hover styling from showing on title click for mobile */
@@ -84,6 +87,7 @@
     position: relative;
     inset-block-start: 0;
     font-size: 30px;
+    max-block-size: 1100px;
   }
 
   .titleIcon {

From 745b2225873b76316b2960cc805d1fc7e4a451d7 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Fri, 31 May 2024 06:39:07 -0500
Subject: [PATCH 22/25] Focus active menu on mobile close

---
 src/renderer/views/Settings/Settings.js  | 8 ++++++++
 src/renderer/views/Settings/Settings.vue | 4 ++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 3b7ba1211765..61342c83c443 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -209,6 +209,14 @@ export default defineComponent({
       }
     },
 
+    returnToSettingsMenu: function () {
+      const openSection = this.settingsSectionTypeOpenInMobile
+      this.settingsSectionTypeOpenInMobile = null
+
+      // focus the corresponding Settings Menu title
+      nextTick(() => document.getElementById(openSection)?.focus())
+    },
+
     /* Set the current section to be shown as active in the Settings Menu
     * if it is the lowest section within the top quarter of the viewport (25vh) */
     markScrolledToSectionAsActive: function() {
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index 088657ba061b..dee56f5ef516 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -8,8 +8,8 @@
           role="button"
           :title="$t('Settings.Return to Settings Menu')"
           tabindex="0"
-          @click="settingsSectionTypeOpenInMobile = null"
-          @keydown.space.enter="settingsSectionTypeOpenInMobile = null"
+          @click="returnToSettingsMenu"
+          @keydown.space.enter="returnToSettingsMenu"
         />
       </div>
       <ft-settings-menu

From 08a22be2b9e62555bef9b4a5121b676bc85becbb Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 3 Jun 2024 23:30:26 -0500
Subject: [PATCH 23/25] Replace shortTitle with title, & replace EN-US labels
 with shorter forms

---
 .../ft-settings-menu/ft-settings-menu.vue     |  2 +-
 src/renderer/views/Settings/Settings.js       | 20 +--------
 static/locales/en-US.yaml                     | 44 +++++++------------
 3 files changed, 18 insertions(+), 48 deletions(-)

diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.vue b/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
index dbd7475a45a5..71762363cb23 100644
--- a/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.vue
@@ -20,7 +20,7 @@
             :icon="['fas', settingsSection.icon]"
             class="titleIcon"
           />
-          {{ settingsSection.shortTitle }}
+          {{ settingsSection.title }}
         </div>
         <div class="titleUnderline" />
       </div>
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 61342c83c443..63c90ec0766a 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -71,45 +71,38 @@ export default defineComponent({
         {
           type: 'theme-settings',
           title: this.$t('Settings.Theme Settings.Theme Settings'),
-          shortTitle: this.$te('Settings.Theme Settings.Theme Settings Short Label') ? this.$t('Settings.Theme Settings.Theme Settings Short Label') : '',
           icon: 'display'
         },
         {
           type: 'player-settings',
           title: this.$t('Settings.Player Settings.Player Settings'),
-          shortTitle: this.$te('Settings.Player Settings.Player Settings Short Label') ? this.$t('Settings.Player Settings.Player Settings Short Label') : '',
           icon: 'circle-play'
         },
         ...(process.env.IS_ELECTRON
           ? [{
               type: 'external-player-settings',
               title: this.$t('Settings.External Player Settings.External Player Settings'),
-              shortTitle: this.$te('Settings.External Player Settings.External Player') ? this.$t('Settings.External Player Settings.External Player') : '',
               icon: 'clapperboard'
             }]
           : []),
         {
           type: 'subscription-settings',
           title: this.$t('Settings.Subscription Settings.Subscription Settings'),
-          shortTitle: this.$te('Settings.Subscription Settings.Subscription Settings Short Label') ? this.$t('Settings.Subscription Settings.Subscription Settings Short Label') : '',
           icon: 'play'
         },
         {
           type: 'distraction-settings',
           title: this.$t('Settings.Distraction Free Settings.Distraction Free Settings'),
-          shortTitle: this.$te('Settings.Distraction Free Settings.Distraction Free Settings Short Label') ? this.$t('Settings.Distraction Free Settings.Distraction Free Settings Short Label') : '',
           icon: 'eye-slash'
         },
         {
           type: 'privacy-settings',
           title: this.$t('Settings.Privacy Settings.Privacy Settings'),
-          shortTitle: this.$te('Settings.Privacy Settings.Privacy Settings Short Label') ? this.$t('Settings.Privacy Settings.Privacy Settings Short Label') : '',
           icon: 'lock'
         },
         {
           type: 'data-settings',
           title: this.$t('Settings.Data Settings.Data Settings'),
-          shortTitle: this.$te('Settings.Data Settings.Data Settings Short Label') ? this.$t('Settings.Data Settings.Data Settings Short Label') : '',
           icon: 'database'
         },
         ...(process.env.IS_ELECTRON
@@ -117,13 +110,11 @@ export default defineComponent({
               {
                 type: 'proxy-settings',
                 title: this.$t('Settings.Proxy Settings.Proxy Settings'),
-                shortTitle: this.$te('Settings.Proxy Settings.Proxy Settings Short Label') ? this.$t('Settings.Proxy Settings.Proxy Settings Short Label') : '',
                 icon: 'network-wired',
               },
               {
                 type: 'download-settings',
                 title: this.$t('Settings.Download Settings.Download Settings'),
-                shortTitle: this.$te('Settings.Download Settings.Download Settings Short Label') ? this.$t('Settings.Download Settings.Download Settings Short Label') : '',
                 icon: 'download',
               }
             ]
@@ -131,13 +122,11 @@ export default defineComponent({
         {
           type: 'parental-control-settings',
           title: this.$t('Settings.Parental Control Settings.Parental Control Settings'),
-          shortTitle: this.$te('Settings.Parental Control Settings.Parental Control Settings Short Label') ? this.$t('Settings.Parental Control Settings.Parental Control Settings Short Label') : '',
           icon: 'user-lock'
         },
         {
           type: 'sponsor-block-settings',
           title: this.$t('Settings.SponsorBlock Settings.SponsorBlock Settings'),
-          shortTitle: this.$te('Settings.SponsorBlock Settings.SponsorBlock Settings Short Label') ? this.$t('Settings.SponsorBlock Settings.SponsorBlock Settings Short Label') : '',
           // TODO: replace with SponsorBlock icon
           icon: 'shield'
         },
@@ -145,27 +134,23 @@ export default defineComponent({
           ? [{
               type: 'experimental-settings',
               title: this.$t('Settings.Experimental Settings.Experimental Settings'),
-              shortTitle: this.$te('Settings.Experimental Settings.Experimental Settings Short Label') ? this.$t('Settings.Experimental Settings.Experimental Settings Short Label') : '',
               icon: 'flask'
             }]
           : []),
         {
           type: 'password-settings',
           title: this.$t('Settings.Password Settings.Password Settings'),
-          shortTitle: this.$te('Settings.Password Settings.Password Settings Short Label') ? this.$t('Settings.Password Settings.Password Settings Short Label') : '',
           icon: 'key'
         },
       ]
-      return settingsComponentsData.map((entry) => { return { ...entry, shortTitle: entry.shortTitle || entry.title } })
+      return settingsComponentsData
     },
 
     settingsSectionComponents: function () {
       let settingsSections = this.settingsComponentsData
       if (this.settingsSectionSortEnabled) {
         settingsSections = settingsSections.toSorted((a, b) => {
-          const aTitle = a.shortTitle !== '' ? a.shortTitle : a.title
-          const bTitle = b.shortTitle !== '' ? b.shortTitle : b.title
-          return aTitle.toLowerCase().localeCompare(bTitle.toLowerCase(), this.locale)
+          return a.title.toLowerCase().localeCompare(b.title.toLowerCase(), this.locale)
         })
       }
 
@@ -173,7 +158,6 @@ export default defineComponent({
       const generalSettingsEntry = {
         type: 'general-settings',
         title: this.$t('Settings.General Settings.General Settings'),
-        shortTitle: this.$te('Settings.General Settings.General Settings Short Label') ? this.$t('Settings.General Settings.General Settings Short Label') : this.$t('Settings.General Settings.General Settings'),
         icon: 'border-all'
       }
 
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 9f52e47c36f1..0d8a164b340e 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -250,8 +250,7 @@ Settings:
   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:
-    General Settings: General Settings
-    General Settings Short Label: General
+    General Settings: General
     Check for Updates: Check for Updates
     Check for Latest Blog Posts: Check for Latest Blog Posts
     Fallback to Non-Preferred Backend on Failure: Fallback to Non-Preferred Backend
@@ -294,8 +293,7 @@ Settings:
       Ask Before Opening Link: Ask Before Opening Link
       No Action: No Action
   Theme Settings:
-    Theme Settings: Theme Settings
-    Theme Settings Short Label: Theme
+    Theme Settings: Theme
     Match Top Bar with Main Color: Match Top Bar with Main Color
     Expand Side Bar by Default: Expand Side Bar by Default
     Disable Smooth Scrolling: Disable Smooth Scrolling
@@ -365,8 +363,7 @@ Settings:
     Secondary Color Theme: Secondary Color Theme
         #* Main Color Theme
   Player Settings:
-    Player Settings: Player Settings
-    Player Settings Short Label: Player
+    Player Settings: Player
     Force Local Backend for Legacy Formats: Force Local Backend for Legacy Formats
     Play Next Video: Play Next Video
     Turn on Subtitles by Default: Turn on Subtitles by Default
@@ -418,7 +415,7 @@ Settings:
         Forbidden Characters: Forbidden Characters
         Empty File Name: Empty File Name
   External Player Settings:
-    External Player Settings: External Player Settings
+    External Player Settings: External Player
     External Player: External Player
     Ignore Unsupported Action Warnings: Ignore Unsupported Action Warnings
     Ignore Default Arguments: Ignore Default Arguments
@@ -428,8 +425,7 @@ Settings:
       None:
         Name: None
   Privacy Settings:
-    Privacy Settings: Privacy Settings
-    Privacy Settings Short Label: Privacy
+    Privacy Settings: Privacy
     Remember History: Remember History
     Save Watched Progress: Save Watched Progress
     Save Watched Videos With Last Viewed Playlist: Save Watched Videos With Last Viewed Playlist
@@ -449,16 +445,14 @@ Settings:
     All playlists have been removed: All playlists have been removed
     Are you sure you want to remove all your playlists?: Are you sure you want to remove all your playlists?
   Subscription Settings:
-    Subscription Settings: Subscription Settings
-    Subscription Settings Short Label: Subscription
+    Subscription Settings: Subscription
     Hide Videos on Watch: Hide Videos on Watch
     Fetch Feeds from RSS: Fetch Feeds from RSS
     Manage Subscriptions: Manage Subscriptions
     Fetch Automatically: Fetch Feed Automatically
     Only Show Latest Video for Each Channel: Only Show Latest Video for Each Channel
   Distraction Free Settings:
-    Distraction Free Settings: Distraction Free Settings
-    Distraction Free Settings Short Label: Distraction Free
+    Distraction Free Settings: Distraction Free
     Sections:
       Side Bar: Side Bar
       Subscriptions Page: Subscriptions Page
@@ -502,8 +496,7 @@ Settings:
     Hide Subscriptions Live: Hide Subscriptions Live
     Hide Subscriptions Community: Hide Subscriptions Community
   Data Settings:
-    Data Settings: Data Settings
-    Data Settings Short Label: Data
+    Data Settings: Data
     Select Import Type: Select Import Type
     Select Export Type: Select Export Type
     Import Subscriptions: Import Subscriptions
@@ -558,8 +551,7 @@ Settings:
     How do I import my subscriptions?: How do I import my subscriptions?
     Manage Subscriptions: Manage Subscriptions
   Proxy Settings:
-    Proxy Settings: Proxy Settings
-    Proxy Settings Short Label: Proxy
+    Proxy Settings: Proxy
     Enable Tor / Proxy: Enable Tor / Proxy
     Proxy Protocol: Proxy Protocol
     Proxy Host: Proxy Host
@@ -573,8 +565,7 @@ Settings:
     City: City
     Error getting network information. Is your proxy configured properly?: Error getting network information. Is your proxy configured properly?
   SponsorBlock Settings:
-    SponsorBlock Settings: SponsorBlock Settings
-    SponsorBlock Settings Short Label: SponsorBlock
+    SponsorBlock Settings: SponsorBlock
     Enable SponsorBlock: Enable SponsorBlock
     'SponsorBlock API Url (Default is https://sponsor.ajay.app)': SponsorBlock API Url (Default is https://sponsor.ajay.app)
     Notify when sponsor segment is skipped: Notify when sponsor segment is skipped
@@ -589,22 +580,19 @@ Settings:
       Do Nothing: Do Nothing
     Category Color: Category Color
   Parental Control Settings:
-    Parental Control Settings: Parental Control Settings
-    Parental Control Settings Short Label: Parental Control
+    Parental Control Settings: Parental Control
     Hide Unsubscribe Button: Hide Unsubscribe Button
     Show Family Friendly Only: Show Family Friendly Only
     Hide Search Bar: Hide Search Bar
   Download Settings:
-    Download Settings: Download Settings
-    Download Settings Short Label: Download
+    Download Settings: Download
     Ask Download Path: Ask for download path
     Choose Path: Choose Path
     Download Behavior: Download Behavior
     Download in app: Download in app
     Open in web browser: Open in web browser
   Experimental Settings:
-    Experimental Settings: Experimental Settings
-    Experimental Settings Short Label: Experimental
+    Experimental Settings: Experimental
     Warning: These settings are experimental, they may cause crashes while enabled. Making backups is highly recommended. Use at your own risk!
     Replace HTTP Cache: Replace HTTP Cache
   Password Dialog:
@@ -613,8 +601,7 @@ Settings:
     Password Incorrect: Password Incorrect
     Unlock: Unlock
   Password Settings:
-    Password Settings: Password Settings
-    Password Settings Short Label: Password
+    Password Settings: Password
     Set Password To Prevent Access: Set a password to prevent access to settings
     Set Password: Set Password
     Remove Password: Remove Password
@@ -648,8 +635,7 @@ About:
   Donate: Donate
 
 Profile:
-  Profile Settings: Profile Settings
-  Profile Settings Short Label: Profile
+  Profile Settings: Profile
   Toggle Profile List: Toggle Profile List
   Profile Select: Profile Select
   Profile Filter: Profile Filter

From 7108cea35be26ac276836b8e067af1501557200b Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Fri, 7 Jun 2024 07:22:02 -0500
Subject: [PATCH 24/25] Update menu font size for mobile devices

---
 .../components/ft-settings-menu/ft-settings-menu.css      | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/ft-settings-menu/ft-settings-menu.css b/src/renderer/components/ft-settings-menu/ft-settings-menu.css
index 025e9df54429..a50473ed9f2d 100644
--- a/src/renderer/components/ft-settings-menu/ft-settings-menu.css
+++ b/src/renderer/components/ft-settings-menu/ft-settings-menu.css
@@ -110,16 +110,16 @@
 @media only screen and (width <= 1015px) and (height <= 830px),
 only screen and (width <= 500px) {
   .settingsMenu {
-    font-size: 18px;
+    font-size: 25px;
   }
 
   .titleIcon {
-    inline-size: 18px;
-    block-size: 18px;
+    inline-size: 25px;
+    block-size: 25px;
     margin-inline-end: 5px;
   }
 
   .header {
-    font-size: 22px;
+    font-size: 25px;
   }
 }

From 4f894173e506ae505d40945cb58b5a8432ed6e7f Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sat, 12 Oct 2024 09:18:24 -0500
Subject: [PATCH 25/25] Focus section heading on navigating to it in desktop
 view

---
 src/renderer/views/Settings/Settings.js | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index 1a34a0fe715d..d9568df05bb9 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -187,7 +187,15 @@ export default defineComponent({
   methods: {
     navigateToSection: function(sectionType) {
       if (this.isInDesktopView) {
-        nextTick(() => { this.$refs[sectionType][0].$el.scrollIntoView() })
+        nextTick(() => {
+          const sectionElement = this.$refs[sectionType][0].$el
+          sectionElement.scrollIntoView()
+
+          const sectionHeading = sectionElement.firstChild.firstChild
+          sectionHeading.tabIndex = 0
+          sectionHeading.focus()
+          sectionHeading.tabIndex = -1
+        })
       } else {
         this.settingsSectionTypeOpenInMobile = sectionType
       }