Migrate FtSettingsSection and FtSettingsMenu to the composition API

src/renderer/components/ExperimentalSettings/ExperimentalSettings.vue

@@ -29,7 +29,7 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 
-import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
+import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtPrompt from '../ft-prompt/ft-prompt.vue'

src/renderer/components/ft-settings-menu/ft-settings-menu.vue → src/renderer/components/FtSettingsMenu/FtSettingsMenu.vue

@@ -6,17 +6,17 @@
       {{ $t('Settings.Settings') }}
     </h2>
     <a
-      v-for="(settingsSection) in settingsSections"
+      v-for="settingsSection in settingsSections"
       :id="settingsSection.type"
-      :key="settingsSection.type + '-link'"
+      :key="settingsSection.type"
       class="title"
       href="javascript:;"
       @click.stop="goToSettingsSection(settingsSection.type)"
       @keydown.enter.stop="goToSettingsSection(settingsSection.type)"
     >
       <div class="titleContent">
         <div class="iconAndTitleText">
-          <font-awesome-icon
+          <FontAwesomeIcon
             :icon="['fas', settingsSection.icon]"
             class="titleIcon"
           />
@@ -28,5 +28,24 @@
   </menu>
 </template>
 
-<script src="./ft-settings-menu.js" />
-<style scoped src="./ft-settings-menu.css" />
+<script setup>
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+defineProps({
+  settingsSections: {
+    type: Array,
+    required: true
+  }
+})
+
+const emit = defineEmits(['navigate-to-section'])
+
+/**
+ * @param {string} sectionType
+ */
+function goToSettingsSection(sectionType) {
+  emit('navigate-to-section', sectionType)
+}
+</script>
+
+<style scoped src="./FtSettingsMenu.css" />

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

@@ -11,5 +11,13 @@
   </div>
 </template>
 
-<script src="./ft-settings-section.js" />
-<style scoped src="./ft-settings-section.scss" lang="scss" />
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<style scoped src="./FtSettingsSection.scss" lang="scss" />

src/renderer/components/ParentalControlSettings.vue

@@ -32,7 +32,7 @@
 <script setup>
 import { computed } from 'vue'
 
-import FtSettingsSection from './ft-settings-section/ft-settings-section.vue'
+import FtSettingsSection from './FtSettingsSection/FtSettingsSection.vue'
 import FtToggleSwitch from './ft-toggle-switch/ft-toggle-switch.vue'
 
 import store from '../store/index'

src/renderer/components/PasswordSettings/PasswordSettings.vue

@@ -36,7 +36,7 @@
 <script setup>
 import { computed, ref } from 'vue'
 
-import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
+import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtInput from '../ft-input/ft-input.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtButton from '../ft-button/ft-button.vue'

src/renderer/components/ThemeSettings.vue

@@ -95,7 +95,7 @@
 import { computed, ref } from 'vue'
 import { useI18n } from '../composables/use-i18n-polyfill'
 
-import FtSettingsSection from './ft-settings-section/ft-settings-section.vue'
+import FtSettingsSection from './FtSettingsSection/FtSettingsSection.vue'
 import FtSelect from './ft-select/ft-select.vue'
 import FtToggleSwitch from './ft-toggle-switch/ft-toggle-switch.vue'
 import FtSlider from './ft-slider/ft-slider.vue'

src/renderer/components/data-settings/data-settings.js

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue'
-import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
+import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import { mapActions, mapMutations } from 'vuex'
 import FtButton from '../ft-button/ft-button.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'

src/renderer/components/distraction-settings/distraction-settings.js

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
-import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
+import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtInputTags from '../../components/ft-input-tags/ft-input-tags.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'

src/renderer/components/download-settings/download-settings.js

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue'
-import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
+import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtSelect from '../ft-select/ft-select.vue'

src/renderer/components/external-player-settings/external-player-settings.js

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
-import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
+import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtSelect from '../ft-select/ft-select.vue'
 import FtInput from '../ft-input/ft-input.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'

src/renderer/components/general-settings/general-settings.js

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue'
 import { mapActions, mapMutations } from 'vuex'
-import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
+import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtSelect from '../ft-select/ft-select.vue'
 import FtInput from '../ft-input/ft-input.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'

src/renderer/components/player-settings/player-settings.js

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
-import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
+import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtSelect from '../ft-select/ft-select.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtSlider from '../ft-slider/ft-slider.vue'

src/renderer/components/privacy-settings/privacy-settings.js

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
-import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
+import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtButton from '../ft-button/ft-button.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'

src/renderer/components/proxy-settings/proxy-settings.js

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
-import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
+import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtButton from '../ft-button/ft-button.vue'
 import FtSelect from '../ft-select/ft-select.vue'

src/renderer/components/sponsor-block-settings/sponsor-block-settings.js

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
-import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
+import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtInput from '../ft-input/ft-input.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'

src/renderer/components/subscription-settings/subscription-settings.js

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue'
 import { mapActions } from 'vuex'
-import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
+import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 
 export default defineComponent({

src/renderer/views/Settings/Settings.js

@@ -16,7 +16,7 @@ import ExperimentalSettings from '../../components/ExperimentalSettings/Experime
 import PasswordSettings from '../../components/PasswordSettings/PasswordSettings.vue'
 import PasswordDialog from '../../components/PasswordDialog/PasswordDialog.vue'
 import FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue'
-import FtSettingsMenu from '../../components/ft-settings-menu/ft-settings-menu.vue'
+import FtSettingsMenu from '../../components/FtSettingsMenu/FtSettingsMenu.vue'
 
 const ACTIVE_CLASS_NAME = 'active'
 const SETTINGS_MOBILE_WIDTH_THRESHOLD = 1015