Migrate ExperimentalSettings and ParentalControlSettings to the composition API

src/renderer/components/ExperimentalSettings/ExperimentalSettings.vue

@@ -0,0 +1,78 @@
+<template>
+  <FtSettingsSection
+    :title="$t('Settings.Experimental Settings.Experimental Settings')"
+  >
+    <p class="experimental-warning">
+      {{ $t('Settings.Experimental Settings.Warning') }}
+    </p>
+    <FtFlexBox>
+      <FtToggleSwitch
+        tooltip-position="top"
+        :label="$t('Settings.Experimental Settings.Replace HTTP Cache')"
+        compact
+        :default-value="replaceHttpCache"
+        :disabled="replaceHttpCacheLoading"
+        :tooltip="$t('Tooltips.Experimental Settings.Replace HTTP Cache')"
+        @change="handleRestartPrompt"
+      />
+    </FtFlexBox>
+    <FtPrompt
+      v-if="showRestartPrompt"
+      :label="$t('Settings[\'The app needs to restart for changes to take effect. Restart and apply change?\']')"
+      :option-names="[$t('Yes, Restart'), $t('Cancel')]"
+      :option-values="['restart', 'cancel']"
+      @click="handleReplaceHttpCache"
+    />
+  </FtSettingsSection>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+
+import FtSettingsSection from '../ft-settings-section/ft-settings-section.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'
+
+import { IpcChannels } from '../../../constants'
+
+const replaceHttpCacheLoading = ref(false)
+const replaceHttpCache = ref(false)
+const showRestartPrompt = ref(false)
+
+onMounted(async () => {
+  if (process.env.IS_ELECTRON) {
+    const { ipcRenderer } = require('electron')
+    replaceHttpCache.value = await ipcRenderer.invoke(IpcChannels.GET_REPLACE_HTTP_CACHE)
+  }
+
+  replaceHttpCacheLoading.value = false
+})
+
+/**
+ * @param {boolean} value
+ */
+function handleRestartPrompt(value) {
+  replaceHttpCache.value = value
+  showRestartPrompt.value = true
+}
+
+/**
+ * @param {'restart' | 'cancel' | null} value
+ */
+function handleReplaceHttpCache(value) {
+  showRestartPrompt.value = false
+
+  if (value === null || value === 'cancel') {
+    replaceHttpCache.value = !replaceHttpCache.value
+    return
+  }
+
+  if (process.env.IS_ELECTRON) {
+    const { ipcRenderer } = require('electron')
+    ipcRenderer.send(IpcChannels.TOGGLE_REPLACE_HTTP_CACHE)
+  }
+}
+</script>
+
+<style scoped src="./ExperimentalSettings.css" />

src/renderer/components/ParentalControlSettings/ParentalControlSettings.vue

@@ -0,0 +1,72 @@
+<template>
+  <FtSettingsSection
+    :title="$t('Settings.Parental Control Settings.Parental Control Settings')"
+  >
+    <div class="switchColumnGrid">
+      <div class="switchColumn">
+        <FtToggleSwitch
+          :label="$t('Settings.Parental Control Settings.Hide Unsubscribe Button')"
+          compact
+          :default-value="hideUnsubscribeButton"
+          @change="updateHideUnsubscribeButton"
+        />
+        <FtToggleSwitch
+          :label="$t('Settings.Parental Control Settings.Show Family Friendly Only')"
+          compact
+          :default-value="showFamilyFriendlyOnly"
+          @change="updateShowFamilyFriendlyOnly"
+        />
+      </div>
+      <div class="switchColumn">
+        <FtToggleSwitch
+          :label="$t('Settings.Parental Control Settings.Hide Search Bar')"
+          compact
+          :default-value="hideSearchBar"
+          @change="updateHideSearchBar"
+        />
+      </div>
+    </div>
+  </FtSettingsSection>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+import FtSettingsSection from '../ft-settings-section/ft-settings-section.vue'
+import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
+
+import store from '../../store/index'
+
+const hideSearchBar = computed(() => {
+  return store.getters.getHideSearchBar
+})
+
+const hideUnsubscribeButton = computed(() => {
+  return store.getters.getHideUnsubscribeButton
+})
+
+const showFamilyFriendlyOnly = computed(() => {
+  return store.getters.getShowFamilyFriendlyOnly
+})
+
+/**
+ * @param {boolean} value
+ */
+function updateHideSearchBar(value) {
+  store.dispatch('updateHideSearchBar', value)
+}
+
+/**
+ * @param {boolean} value
+ */
+function updateHideUnsubscribeButton(value) {
+  store.dispatch('updateHideUnsubscribeButton', value)
+}
+
+/**
+ * @param {boolean} value
+ */
+function updateShowFamilyFriendlyOnly(value) {
+  store.dispatch('updateShowFamilyFriendlyOnly', value)
+}
+</script>

src/renderer/views/Settings/Settings.js

@@ -11,8 +11,8 @@ import DataSettings from '../../components/data-settings/data-settings.vue'
 import DistractionSettings from '../../components/distraction-settings/distraction-settings.vue'
 import ProxySettings from '../../components/proxy-settings/proxy-settings.vue'
 import SponsorBlockSettings from '../../components/sponsor-block-settings/sponsor-block-settings.vue'
-import ParentControlSettings from '../../components/parental-control-settings/parental-control-settings.vue'
-import ExperimentalSettings from '../../components/experimental-settings/experimental-settings.vue'
+import ParentalControlSettings from '../../components/ParentalControlSettings/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/ft-toggle-switch/ft-toggle-switch.vue'
@@ -32,7 +32,7 @@ export default defineComponent({
     'data-settings': DataSettings,
     'distraction-settings': DistractionSettings,
     'sponsor-block-settings': SponsorBlockSettings,
-    'parental-control-settings': ParentControlSettings,
+    'parental-control-settings': ParentalControlSettings,
     'password-settings': PasswordSettings,
     'password-dialog': PasswordDialog,
     'ft-toggle-switch': FtToggleSwitch,