From 11bdef31f2a068611a69e6a2b4e2b42d2a67c84f Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Sun, 22 Feb 2026 15:34:50 +0100
Subject: [PATCH 1/2] Migrate the Settings component to the composition API

---
 .../FtSettingsMenu/FtSettingsMenu.vue         |   2 +-
 src/renderer/views/Settings/Settings.js       | 264 ---------------
 src/renderer/views/Settings/Settings.vue      | 301 ++++++++++++++++--
 3 files changed, 279 insertions(+), 288 deletions(-)
 delete mode 100644 src/renderer/views/Settings/Settings.js

diff --git a/src/renderer/components/FtSettingsMenu/FtSettingsMenu.vue b/src/renderer/components/FtSettingsMenu/FtSettingsMenu.vue
index ef2b747528b7c..823d91f0a2c3d 100644
--- a/src/renderer/components/FtSettingsMenu/FtSettingsMenu.vue
+++ b/src/renderer/components/FtSettingsMenu/FtSettingsMenu.vue
@@ -21,7 +21,7 @@
       <div class="titleContent">
         <div class="iconAndTitleText">
           <FontAwesomeIcon
-            :icon="['fas', settingsSection.icon]"
+            :icon="settingsSection.icon"
             class="titleIcon"
           />
           {{ settingsSection.title }}
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
deleted file mode 100644
index a037d6cc767a6..0000000000000
--- a/src/renderer/views/Settings/Settings.js
+++ /dev/null
@@ -1,264 +0,0 @@
-import { defineComponent, nextTick } from 'vue'
-import { mapActions } from 'vuex'
-import GeneralSettings from '../../components/GeneralSettings/GeneralSettings.vue'
-import ThemeSettings from '../../components/ThemeSettings.vue'
-import PlayerSettings from '../../components/PlayerSettings/PlayerSettings.vue'
-import ExternalPlayerSettings from '../../components/ExternalPlayerSettings.vue'
-import SubscriptionSettings from '../../components/SubscriptionSettings/SubscriptionSettings.vue'
-import PrivacySettings from '../../components/PrivacySettings.vue'
-import DataSettings from '../../components/DataSettings/DataSettings.vue'
-import DistractionSettings from '../../components/DistractionSettings/DistractionSettings.vue'
-import ProxySettings from '../../components/ProxySettings/ProxySettings.vue'
-import SponsorBlockSettings from '../../components/SponsorBlockSettings.vue'
-import ParentalControlSettings from '../../components/ParentalControlSettings.vue'
-import ExperimentalSettings from '../../components/ExperimentalSettings/ExperimentalSettings.vue'
-import PasswordSettings from '../../components/PasswordSettings/PasswordSettings.vue'
-import PasswordDialog from '../../components/PasswordDialog/PasswordDialog.vue'
-import FtToggleSwitch from '../../components/FtToggleSwitch/FtToggleSwitch.vue'
-import FtButton from '../../components/FtButton/FtButton.vue'
-import FtSettingsMenu from '../../components/FtSettingsMenu/FtSettingsMenu.vue'
-
-const ACTIVE_CLASS_NAME = 'active'
-const SETTINGS_MOBILE_WIDTH_THRESHOLD = 1015
-
-export default defineComponent({
-  name: 'Settings',
-  components: {
-    'general-settings': GeneralSettings,
-    'theme-settings': ThemeSettings,
-    'player-settings': PlayerSettings,
-    'subscription-settings': SubscriptionSettings,
-    'privacy-settings': PrivacySettings,
-    'data-settings': DataSettings,
-    'distraction-settings': DistractionSettings,
-    'sponsor-block-settings': SponsorBlockSettings,
-    'parental-control-settings': ParentalControlSettings,
-    'password-settings': PasswordSettings,
-    'password-dialog': PasswordDialog,
-    'ft-button': FtButton,
-    'ft-toggle-switch': FtToggleSwitch,
-    'ft-settings-menu': FtSettingsMenu,
-    ...(process.env.IS_ELECTRON
-      ? {
-          'proxy-settings': ProxySettings,
-          'external-player-settings': ExternalPlayerSettings,
-          'experimental-settings': ExperimentalSettings
-        }
-      : {})
-  },
-  data: function () {
-    return {
-      usingElectron: process.env.IS_ELECTRON,
-      isInDesktopView: true,
-      settingsSectionTypeOpenInMobile: null,
-      unlocked: false
-    }
-  },
-  computed: {
-    locale: function() {
-      return this.$i18n.locale
-    },
-
-    settingsPassword: function () {
-      return this.$store.getters.getSettingsPassword
-    },
-
-    settingsSectionSortEnabled: function () {
-      return this.$store.getters.getSettingsSectionSortEnabled
-    },
-
-    settingsComponentsData: function () {
-      const settingsComponentsData = [
-        {
-          type: 'theme-settings',
-          title: this.$t('Settings.Theme Settings.Theme Settings'),
-          icon: 'display'
-        },
-        {
-          type: 'player-settings',
-          title: this.$t('Settings.Player Settings.Player Settings'),
-          icon: 'circle-play'
-        },
-        ...(process.env.IS_ELECTRON
-          ? [{
-              type: 'external-player-settings',
-              title: this.$t('Settings.External Player Settings.External Player Settings'),
-              icon: 'clapperboard'
-            }]
-          : []),
-        {
-          type: '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'),
-          icon: 'eye-slash'
-        },
-        {
-          type: 'parental-control-settings',
-          title: this.$t('Settings.Parental Control Settings.Parental Control Settings'),
-          icon: 'user-lock'
-        },
-        {
-          type: 'privacy-settings',
-          title: this.$t('Settings.Privacy Settings.Privacy Settings'),
-          icon: 'lock'
-        },
-        {
-          type: 'data-settings',
-          title: this.$t('Settings.Data Settings.Data Settings'),
-          icon: 'database'
-        },
-        ...(process.env.IS_ELECTRON
-          ? [
-              {
-                type: 'proxy-settings',
-                title: this.$t('Settings.Proxy Settings.Proxy Settings'),
-                icon: 'network-wired',
-              }
-            ]
-          : []),
-        {
-          type: 'sponsor-block-settings',
-          title: this.$t('Settings.SponsorBlock Settings.SponsorBlock Settings'),
-          // TODO: replace with SponsorBlock icon
-          icon: 'shield'
-        },
-        {
-          type: 'password-settings',
-          title: this.$t('Settings.Password Settings.Password Settings'),
-          icon: 'key'
-        },
-        ...(process.env.IS_ELECTRON
-          ? [{
-              type: 'experimental-settings',
-              title: this.$t('Settings.Experimental Settings.Experimental Settings'),
-              icon: 'flask'
-            }]
-          : []),
-      ]
-      return settingsComponentsData
-    },
-
-    settingsSectionComponents: function () {
-      let settingsSections = this.settingsComponentsData
-      if (this.settingsSectionSortEnabled) {
-        settingsSections = settingsSections.toSorted((a, b) => {
-          return a.title.toLowerCase().localeCompare(b.title.toLowerCase(), this.locale)
-        })
-      }
-
-      // ensure General Settings is placed first regardless of sorting
-      const generalSettingsEntry = {
-        type: 'general-settings',
-        title: this.$t('Settings.General Settings.General Settings'),
-        icon: 'border-all'
-      }
-
-      return [generalSettingsEntry, ...settingsSections]
-    },
-  },
-  created: function () {
-    if (this.settingsPassword === '') {
-      this.unlocked = true
-    }
-  },
-  mounted: function () {
-    if (this.unlocked) {
-      this.handleMounted()
-    }
-  },
-  beforeUnmount: function () {
-    document.removeEventListener('scroll', this.markScrolledToSectionAsActive)
-    window.removeEventListener('resize', this.handleResize)
-  },
-  methods: {
-    handleMounted: 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)
-        firstSection.classList.add(ACTIVE_CLASS_NAME)
-      }
-    },
-
-    handleUnlock: function () {
-      this.unlocked = true
-
-      nextTick(() => {
-        this.handleMounted()
-      })
-    },
-
-    navigateToSection: function(sectionType) {
-      if (this.isInDesktopView) {
-        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
-      }
-    },
-
-    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() {
-      const scrollY = window.scrollY + innerHeight / 4
-      this.settingsSectionComponents.forEach((section) => {
-        const sectionElement = this.$refs[section.type][0].$el
-        const sectionHeight = sectionElement.offsetHeight
-        const sectionTop = sectionElement.offsetTop
-        const correspondingMenuLink = document.getElementById(section.type)
-
-        if (this.isInDesktopView && scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
-          correspondingMenuLink.classList.add(ACTIVE_CLASS_NAME)
-        } else {
-          correspondingMenuLink.classList.remove(ACTIVE_CLASS_NAME)
-        }
-      })
-    },
-
-    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([
-      'showKeyboardShortcutPrompt',
-      'updateSettingsSectionSortEnabled'
-    ])
-  }
-})
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index 3a11018f091f4..6a1653c65656f 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -4,17 +4,17 @@
       <div v-show="settingsSectionTypeOpenInMobile != null">
         <button
           class="returnToMenuMobileButton"
-          :aria-label="$t('Settings.Return to Settings Menu')"
-          :title="$t('Settings.Return to Settings Menu')"
+          :aria-label="t('Settings.Return to Settings Menu')"
+          :title="t('Settings.Return to Settings Menu')"
           @click="returnToSettingsMenu"
         >
-          <font-awesome-icon
+          <FontAwesomeIcon
             class="returnToMenuMobileIcon"
             :icon="['fas', 'angle-left']"
           />
         </button>
       </div>
-      <ft-settings-menu
+      <FtSettingsMenu
         v-show="isInDesktopView || settingsSectionTypeOpenInMobile == null"
         :settings-sections="settingsSectionComponents"
         @navigate-to-section="navigateToSection"
@@ -24,41 +24,296 @@
         class="settingsContent"
       >
         <div class="switchRow">
-          <ft-button
-            v-if="usingElectron"
-            :label="$t('KeyboardShortcutPrompt.Show Keyboard Shortcuts')"
+          <FtButton
+            v-if="USING_ELECTRON"
+            :label="t('KeyboardShortcutPrompt.Show Keyboard Shortcuts')"
             :icon="['fas', 'keyboard']"
             @click="showKeyboardShortcutPrompt"
           />
-          <ft-toggle-switch
+          <FtToggleSwitch
             class="settingsToggle"
-            :label="$t('Settings.Sort Settings Sections (A-Z)')"
+            :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"
-            :key="settingsComponent.type"
-          >
-            <component
-              :is="settingsComponent.type"
-              :ref="settingsComponent.type"
-              :class="{ hideOnMobile: settingsSectionTypeOpenInMobile !== settingsComponent.type }"
-              class="section"
-            />
-          </template>
+          <component
+            :is="section.component"
+            v-for="section in settingsSectionComponents"
+            :key="section.type"
+            ref="sectionRefs"
+            class="section"
+            :class="{ hideOnMobile: settingsSectionTypeOpenInMobile !== section.type }"
+            :data-section="section.type"
+          />
         </div>
       </div>
     </template>
-    <password-dialog
+    <PasswordDialog
       v-else
       @unlocked="handleUnlock"
     />
   </div>
 </template>
 
-<script src="./Settings.js" />
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue'
+import { useI18n } from '../../composables/use-i18n-polyfill'
+
+import GeneralSettings from '../../components/GeneralSettings/GeneralSettings.vue'
+import ThemeSettings from '../../components/ThemeSettings.vue'
+import PlayerSettings from '../../components/PlayerSettings/PlayerSettings.vue'
+import ExternalPlayerSettings from '../../components/ExternalPlayerSettings.vue'
+import SubscriptionSettings from '../../components/SubscriptionSettings/SubscriptionSettings.vue'
+import PrivacySettings from '../../components/PrivacySettings.vue'
+import DataSettings from '../../components/DataSettings/DataSettings.vue'
+import DistractionSettings from '../../components/DistractionSettings/DistractionSettings.vue'
+import ProxySettings from '../../components/ProxySettings/ProxySettings.vue'
+import SponsorBlockSettings from '../../components/SponsorBlockSettings.vue'
+import ParentalControlSettings from '../../components/ParentalControlSettings.vue'
+import ExperimentalSettings from '../../components/ExperimentalSettings/ExperimentalSettings.vue'
+import PasswordSettings from '../../components/PasswordSettings/PasswordSettings.vue'
+import PasswordDialog from '../../components/PasswordDialog/PasswordDialog.vue'
+import FtToggleSwitch from '../../components/FtToggleSwitch/FtToggleSwitch.vue'
+import FtButton from '../../components/FtButton/FtButton.vue'
+import FtSettingsMenu from '../../components/FtSettingsMenu/FtSettingsMenu.vue'
+
+import store from '../../store/index'
+
+const USING_ELECTRON = !!process.env.IS_ELECTRON
+const ACTIVE_CLASS_NAME = 'active'
+const SETTINGS_MOBILE_WIDTH_THRESHOLD = 1015
+
+const { locale, t } = useI18n()
+
+const isInDesktopView = ref(true)
+const settingsSectionTypeOpenInMobile = ref(null)
+
+/** @type {import('vue').ComputedRef<boolean>} */
+const settingsSectionSortEnabled = computed(() => store.getters.getSettingsSectionSortEnabled)
+
+const settingsComponentsData = computed(() => {
+  return [
+    {
+      type: 'theme-settings',
+      title: t('Settings.Theme Settings.Theme Settings'),
+      icon: ['fas', 'display'],
+      component: ThemeSettings
+    },
+    {
+      type: 'player-settings',
+      title: t('Settings.Player Settings.Player Settings'),
+      icon: ['fas', 'circle-play'],
+      component: PlayerSettings
+    },
+    ...(process.env.IS_ELECTRON
+      ? [{
+          type: 'external-player-settings',
+          title: t('Settings.External Player Settings.External Player Settings'),
+          icon: ['fas', 'clapperboard'],
+          component: ExternalPlayerSettings
+        }]
+      : []),
+    {
+      type: 'subscription-settings',
+      title: t('Settings.Subscription Settings.Subscription Settings'),
+      icon: ['fas', 'play'],
+      component: SubscriptionSettings
+    },
+    {
+      type: 'distraction-settings',
+      title: t('Settings.Distraction Free Settings.Distraction Free Settings'),
+      icon: ['fas', 'eye-slash'],
+      component: DistractionSettings
+    },
+    {
+      type: 'parental-control-settings',
+      title: t('Settings.Parental Control Settings.Parental Control Settings'),
+      icon: ['fas', 'user-lock'],
+      component: ParentalControlSettings
+    },
+    {
+      type: 'privacy-settings',
+      title: t('Settings.Privacy Settings.Privacy Settings'),
+      icon: ['fas', 'lock'],
+      component: PrivacySettings
+    },
+    {
+      type: 'data-settings',
+      title: t('Settings.Data Settings.Data Settings'),
+      icon: ['fas', 'database'],
+      component: DataSettings
+    },
+    ...(process.env.IS_ELECTRON
+      ? [
+          {
+            type: 'proxy-settings',
+            title: t('Settings.Proxy Settings.Proxy Settings'),
+            icon: ['fas', 'network-wired'],
+            component: ProxySettings
+          }
+        ]
+      : []),
+    {
+      type: 'sponsor-block-settings',
+      title: t('Settings.SponsorBlock Settings.SponsorBlock Settings'),
+      // TODO: replace with SponsorBlock icon
+      icon: ['fas', 'shield'],
+      component: SponsorBlockSettings
+    },
+    {
+      type: 'password-settings',
+      title: t('Settings.Password Settings.Password Settings'),
+      icon: ['fas', 'key'],
+      component: PasswordSettings
+    },
+    ...(process.env.IS_ELECTRON
+      ? [{
+          type: 'experimental-settings',
+          title: t('Settings.Experimental Settings.Experimental Settings'),
+          icon: ['fas', 'flask'],
+          component: ExperimentalSettings
+        }]
+      : []),
+  ]
+})
+
+const collator = computed(() => {
+  return new Intl.Collator([locale.value, 'en'], { sensitivity: 'base' })
+})
+
+const settingsSectionComponents = computed(() => {
+  let settingsSections = settingsComponentsData.value
+
+  if (settingsSectionSortEnabled.value) {
+    const collator_ = collator.value
+
+    settingsSections = settingsSections.toSorted((a, b) => {
+      return collator_.compare(a.title, b.title)
+    })
+  }
+
+  // ensure General Settings is placed first regardless of sorting
+  const generalSettingsEntry = {
+    type: 'general-settings',
+    title: t('Settings.General Settings.General Settings'),
+    icon: ['fas', 'border-all'],
+    component: GeneralSettings
+  }
+
+  return [generalSettingsEntry, ...settingsSections]
+})
+
+const unlocked = ref(store.getters.getSettingsPassword === '')
+
+if (unlocked.value) {
+  onMounted(handleMounted)
+}
+
+function handleUnlock() {
+  unlocked.value = true
+
+  nextTick(() => {
+    handleMounted()
+  })
+}
+
+onBeforeUnmount(() => {
+  document.removeEventListener('scroll', markScrolledToSectionAsActive)
+  window.removeEventListener('resize', handleResize)
+})
+
+function showKeyboardShortcutPrompt() {
+  store.dispatch('showKeyboardShortcutPrompt')
+}
+
+/**
+ * @param {boolean} value
+ */
+function updateSettingsSectionSortEnabled(value) {
+  store.dispatch('updateSettingsSectionSortEnabled', value)
+}
+
+function handleMounted() {
+  handleResize()
+  window.addEventListener('resize', handleResize)
+  document.addEventListener('scroll', markScrolledToSectionAsActive)
+
+  // mark first section as active before any scrolling has taken place
+  const firstSection = document.getElementById(settingsSectionComponents.value[0].type)
+  firstSection.classList.add(ACTIVE_CLASS_NAME)
+}
+
+const sectionRefs = useTemplateRef('sectionRefs')
+
+/**
+ * @param {string} sectionType
+ */
+function navigateToSection(sectionType) {
+  if (isInDesktopView.value) {
+    nextTick(() => {
+      const sectionElement = sectionRefs.value.find(sectionRef => {
+        return sectionRef.$el.dataset.section === sectionType
+      })?.$el
+      sectionElement.scrollIntoView()
+
+      const sectionHeading = sectionElement.firstChild.firstChild
+      sectionHeading.tabIndex = 0
+      sectionHeading.focus()
+      sectionHeading.tabIndex = -1
+    })
+  } else {
+    settingsSectionTypeOpenInMobile.value = sectionType
+  }
+}
+
+function returnToSettingsMenu() {
+  const openSection = settingsSectionTypeOpenInMobile.value
+  settingsSectionTypeOpenInMobile.value = 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) */
+function markScrolledToSectionAsActive() {
+  const scrollY = window.scrollY + window.innerHeight / 4
+
+  sectionRefs.value.forEach((sectionRef) => {
+    const sectionElement = sectionRef.$el
+
+    const sectionHeight = sectionElement.offsetHeight
+    const sectionTop = sectionElement.offsetTop
+    const correspondingMenuLink = document.getElementById(sectionElement.dataset.section)
+
+    if (isInDesktopView.value && scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
+      correspondingMenuLink.classList.add(ACTIVE_CLASS_NAME)
+    } else {
+      correspondingMenuLink.classList.remove(ACTIVE_CLASS_NAME)
+    }
+  })
+}
+
+function handleResize() {
+  const wasNotInDesktopView = !isInDesktopView.value
+  isInDesktopView.value = window.innerWidth > SETTINGS_MOBILE_WIDTH_THRESHOLD
+
+  // navigate to section that was open in mobile or desktop view, if any
+  if (isInDesktopView.value && wasNotInDesktopView && settingsSectionTypeOpenInMobile.value != null) {
+    navigateToSection(settingsSectionTypeOpenInMobile.value)
+    settingsSectionTypeOpenInMobile.value = null
+  } else if (!isInDesktopView.value && !wasNotInDesktopView) {
+    const activeMenuLink = document.querySelector(`.settingsMenu .title.${ACTIVE_CLASS_NAME}`)
+    if (!activeMenuLink) {
+      return
+    }
+
+    const sectionType = activeMenuLink.id
+    navigateToSection(sectionType)
+  }
+}
+</script>
+
 <style scoped src="./Settings.css" />

From fd31d335d97f241f378dbbcb846592d62f7b7e12 Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Sun, 22 Feb 2026 15:35:25 +0100
Subject: [PATCH 2/2] Refactor out inter-component direct DOM manipulations

---
 .../FtSettingsMenu/FtSettingsMenu.vue         | 30 +++++++--
 src/renderer/views/Settings/Settings.vue      | 67 ++++++++++---------
 2 files changed, 59 insertions(+), 38 deletions(-)

diff --git a/src/renderer/components/FtSettingsMenu/FtSettingsMenu.vue b/src/renderer/components/FtSettingsMenu/FtSettingsMenu.vue
index 823d91f0a2c3d..9a990eb86f5ce 100644
--- a/src/renderer/components/FtSettingsMenu/FtSettingsMenu.vue
+++ b/src/renderer/components/FtSettingsMenu/FtSettingsMenu.vue
@@ -11,12 +11,14 @@
     </h2>
     <a
       v-for="settingsSection in settingsSections"
-      :id="settingsSection.type"
+      ref="linkRefs"
       :key="settingsSection.type"
       class="title"
+      :class="{ active: activeSection === settingsSection.type }"
       href="javascript:;"
-      @click.stop="goToSettingsSection(settingsSection.type)"
-      @keydown.enter.stop="goToSettingsSection(settingsSection.type)"
+      :data-section="settingsSection.type"
+      @click.stop="goToSettingsSection"
+      @keydown.enter.stop="goToSettingsSection"
     >
       <div class="titleContent">
         <div class="iconAndTitleText">
@@ -34,22 +36,38 @@
 
 <script setup>
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { useTemplateRef } from 'vue'
 
 defineProps({
   settingsSections: {
     type: Array,
     required: true
+  },
+  activeSection: {
+    type: String,
+    default: null
   }
 })
 
 const emit = defineEmits(['navigate-to-section'])
 
 /**
- * @param {string} sectionType
+ * @param {PointerEvent | KeyboardEvent} event
  */
-function goToSettingsSection(sectionType) {
-  emit('navigate-to-section', sectionType)
+function goToSettingsSection(event) {
+  emit('navigate-to-section', event.currentTarget.dataset.section)
 }
+
+const linkRefs = useTemplateRef('linkRefs')
+
+defineExpose({
+  /**
+   * @param {string} name
+   */
+  focusLink: (name) => {
+    linkRefs.value.find((link) => link.dataset.section === name)?.focus()
+  }
+})
 </script>
 
 <style scoped src="./FtSettingsMenu.css" />
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index 6a1653c65656f..354586bb29d4e 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -16,7 +16,9 @@
       </div>
       <FtSettingsMenu
         v-show="isInDesktopView || settingsSectionTypeOpenInMobile == null"
+        ref="menuRef"
         :settings-sections="settingsSectionComponents"
+        :active-section="activeSection"
         @navigate-to-section="navigateToSection"
       />
       <div
@@ -58,6 +60,7 @@
 </template>
 
 <script setup>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef } from 'vue'
 import { useI18n } from '../../composables/use-i18n-polyfill'
 
@@ -82,13 +85,13 @@ import FtSettingsMenu from '../../components/FtSettingsMenu/FtSettingsMenu.vue'
 import store from '../../store/index'
 
 const USING_ELECTRON = !!process.env.IS_ELECTRON
-const ACTIVE_CLASS_NAME = 'active'
 const SETTINGS_MOBILE_WIDTH_THRESHOLD = 1015
 
 const { locale, t } = useI18n()
 
 const isInDesktopView = ref(true)
 const settingsSectionTypeOpenInMobile = ref(null)
+const activeSection = ref(null)
 
 /** @type {import('vue').ComputedRef<boolean>} */
 const settingsSectionSortEnabled = computed(() => store.getters.getSettingsSectionSortEnabled)
@@ -96,51 +99,51 @@ const settingsSectionSortEnabled = computed(() => store.getters.getSettingsSecti
 const settingsComponentsData = computed(() => {
   return [
     {
-      type: 'theme-settings',
+      type: 'theme',
       title: t('Settings.Theme Settings.Theme Settings'),
       icon: ['fas', 'display'],
       component: ThemeSettings
     },
     {
-      type: 'player-settings',
+      type: 'player',
       title: t('Settings.Player Settings.Player Settings'),
       icon: ['fas', 'circle-play'],
       component: PlayerSettings
     },
     ...(process.env.IS_ELECTRON
       ? [{
-          type: 'external-player-settings',
+          type: 'external-player',
           title: t('Settings.External Player Settings.External Player Settings'),
           icon: ['fas', 'clapperboard'],
           component: ExternalPlayerSettings
         }]
       : []),
     {
-      type: 'subscription-settings',
+      type: 'subscription',
       title: t('Settings.Subscription Settings.Subscription Settings'),
       icon: ['fas', 'play'],
       component: SubscriptionSettings
     },
     {
-      type: 'distraction-settings',
+      type: 'distraction',
       title: t('Settings.Distraction Free Settings.Distraction Free Settings'),
       icon: ['fas', 'eye-slash'],
       component: DistractionSettings
     },
     {
-      type: 'parental-control-settings',
+      type: 'parental-control',
       title: t('Settings.Parental Control Settings.Parental Control Settings'),
       icon: ['fas', 'user-lock'],
       component: ParentalControlSettings
     },
     {
-      type: 'privacy-settings',
+      type: 'privacy',
       title: t('Settings.Privacy Settings.Privacy Settings'),
       icon: ['fas', 'lock'],
       component: PrivacySettings
     },
     {
-      type: 'data-settings',
+      type: 'data',
       title: t('Settings.Data Settings.Data Settings'),
       icon: ['fas', 'database'],
       component: DataSettings
@@ -148,7 +151,7 @@ const settingsComponentsData = computed(() => {
     ...(process.env.IS_ELECTRON
       ? [
           {
-            type: 'proxy-settings',
+            type: 'proxy',
             title: t('Settings.Proxy Settings.Proxy Settings'),
             icon: ['fas', 'network-wired'],
             component: ProxySettings
@@ -156,21 +159,21 @@ const settingsComponentsData = computed(() => {
         ]
       : []),
     {
-      type: 'sponsor-block-settings',
+      type: 'sponsor-block',
       title: t('Settings.SponsorBlock Settings.SponsorBlock Settings'),
       // TODO: replace with SponsorBlock icon
       icon: ['fas', 'shield'],
       component: SponsorBlockSettings
     },
     {
-      type: 'password-settings',
+      type: 'password',
       title: t('Settings.Password Settings.Password Settings'),
       icon: ['fas', 'key'],
       component: PasswordSettings
     },
     ...(process.env.IS_ELECTRON
       ? [{
-          type: 'experimental-settings',
+          type: 'experimental',
           title: t('Settings.Experimental Settings.Experimental Settings'),
           icon: ['fas', 'flask'],
           component: ExperimentalSettings
@@ -196,7 +199,7 @@ const settingsSectionComponents = computed(() => {
 
   // ensure General Settings is placed first regardless of sorting
   const generalSettingsEntry = {
-    type: 'general-settings',
+    type: 'general',
     title: t('Settings.General Settings.General Settings'),
     icon: ['fas', 'border-all'],
     component: GeneralSettings
@@ -241,8 +244,7 @@ function handleMounted() {
   document.addEventListener('scroll', markScrolledToSectionAsActive)
 
   // mark first section as active before any scrolling has taken place
-  const firstSection = document.getElementById(settingsSectionComponents.value[0].type)
-  firstSection.classList.add(ACTIVE_CLASS_NAME)
+  activeSection.value = settingsSectionComponents.value[0].type
 }
 
 const sectionRefs = useTemplateRef('sectionRefs')
@@ -268,32 +270,39 @@ function navigateToSection(sectionType) {
   }
 }
 
+const menuRef = useTemplateRef('menuRef')
+
 function returnToSettingsMenu() {
   const openSection = settingsSectionTypeOpenInMobile.value
   settingsSectionTypeOpenInMobile.value = null
 
   // focus the corresponding Settings Menu title
-  nextTick(() => document.getElementById(openSection)?.focus())
+  nextTick(() => {
+    return menuRef.value?.focusLink(openSection)
+  })
 }
 
 /* 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) */
 function markScrolledToSectionAsActive() {
+  if (!isInDesktopView.value) {
+    activeSection.value = null
+    return
+  }
+
   const scrollY = window.scrollY + window.innerHeight / 4
 
-  sectionRefs.value.forEach((sectionRef) => {
+  for (const sectionRef of sectionRefs.value) {
     const sectionElement = sectionRef.$el
 
     const sectionHeight = sectionElement.offsetHeight
     const sectionTop = sectionElement.offsetTop
-    const correspondingMenuLink = document.getElementById(sectionElement.dataset.section)
 
-    if (isInDesktopView.value && scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
-      correspondingMenuLink.classList.add(ACTIVE_CLASS_NAME)
-    } else {
-      correspondingMenuLink.classList.remove(ACTIVE_CLASS_NAME)
+    if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
+      activeSection.value = sectionElement.dataset.section
+      break
     }
-  })
+  }
 }
 
 function handleResize() {
@@ -304,14 +313,8 @@ function handleResize() {
   if (isInDesktopView.value && wasNotInDesktopView && settingsSectionTypeOpenInMobile.value != null) {
     navigateToSection(settingsSectionTypeOpenInMobile.value)
     settingsSectionTypeOpenInMobile.value = null
-  } else if (!isInDesktopView.value && !wasNotInDesktopView) {
-    const activeMenuLink = document.querySelector(`.settingsMenu .title.${ACTIVE_CLASS_NAME}`)
-    if (!activeMenuLink) {
-      return
-    }
-
-    const sectionType = activeMenuLink.id
-    navigateToSection(sectionType)
+  } else if (!isInDesktopView.value && !wasNotInDesktopView && activeSection.value) {
+    navigateToSection(activeSection.value)
   }
 }
 </script>