Add import/export settings buttons

src/renderer/components/DataSettings/DataSettings.vue

@@ -65,6 +65,24 @@
         @click="showExportSearchHistoryPrompt = true"
       />
     </FtFlexBox>
+    <h4 class="groupTitle">
+      {{ t('Settings') }}
+      <FtTooltip
+        class="selectTooltip"
+        position="top"
+        :tooltip="t('Settings.Data Settings.Settings Tooltip')"
+      />
+    </h4>
+    <FtFlexBox class="box">
+      <FtButton
+        :label="t('Settings.Data Settings.Import Settings')"
+        @click="importSettings"
+      />
+      <FtButton
+        :label="t('Settings.Data Settings.Export Settings')"
+        @click="exportSettings"
+      />
+    </FtFlexBox>
     <FtPrompt
       v-if="showExportSubscriptionsPrompt"
       :label="$t('Settings.Data Settings.Select Export Type')"
@@ -86,6 +104,13 @@
       :option-values="WATCH_SEARCH_HISTORY_PROMPT_VALUES"
       @click="exportSearchHistory"
     />
+    <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="handleRestart"
+    />
   </FtSettingsSection>
 </template>
 
@@ -98,8 +123,10 @@ import FtButton from '../FtButton/FtButton.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtPrompt from '../FtPrompt/FtPrompt.vue'
 import FtSettingsSection from '../FtSettingsSection/FtSettingsSection.vue'
+import FtTooltip from '../FtTooltip/FtTooltip.vue'
 
 import store from '../../store/index'
+import { defaultUpdaterId, settingsNeedingRestart } from '../../store/modules/settings'
 
 import { MAIN_PROFILE_ID } from '../../../constants'
 import { calculateColorLuminance, getRandomColor } from '../../helpers/colors'
@@ -1458,6 +1485,110 @@ async function exportYouTubeSearchHistory() {
 }
 
 // #endregion search history
+
+// #region settings
+
+/** @type {import('vue').ComputedRef<object>} */
+const exportableSettings = computed(() => {
+  return store.getters.getExportableSettings
+})
+
+const showRestartPrompt = ref(false)
+
+const pendingSettings = new Map()
+
+async function importSettings() {
+  let response
+  try {
+    response = await readFileWithPicker(
+      t('Settings.Data Settings.Settings File'),
+      {
+        'application/x-freetube-db': '.db',
+        'application/json': '.json'
+      },
+      IMPORT_DIRECTORY_ID,
+      START_IN_DIRECTORY
+    )
+  } catch (err) {
+    const message = t('Settings.Data Settings.Unable to read file')
+    showToast(`${message}: ${err}`)
+    return
+  }
+
+  if (response === null) {
+    return
+  }
+
+  const { content } = response
+  const importedSettings = JSON.parse(content)
+  const currentSettings = exportableSettings.value
+
+  for (const [importedKey, importedValue] of Object.entries(importedSettings)) {
+    if (!Object.hasOwn(currentSettings, importedKey)) {
+      const message = `${t('Settings.Data Settings.Unknown setting key')}: ${importedKey}`
+      showToast(message)
+      continue
+    }
+
+    const currentValue = currentSettings[importedKey]
+    const areValuesEqual = currentValue === importedValue ||
+      (typeof importedValue === 'object' && JSON.stringify(currentValue) === JSON.stringify(importedValue))
+    if (areValuesEqual) {
+      continue
+    }
+
+    if (settingsNeedingRestart.has(importedKey)) {
+      pendingSettings.set(importedKey, importedValue)
+      showRestartPrompt.value = true
+    } else {
+      const updaterId = defaultUpdaterId(importedKey)
+      await store.dispatch(updaterId, importedValue)
+    }
+  }
+
+  showToast(t('Settings.Data Settings.All settings have been successfully imported'))
+}
+
+async function exportSettings() {
+  const dateStr = getTodayDateStrLocalTimezone()
+  const exportFileName = `freetube-settings-${dateStr}.db`
+  const settingsContent = JSON.stringify(exportableSettings.value)
+
+  await promptAndWriteToFile(
+    exportFileName,
+    settingsContent,
+    t('Settings.Data Settings.Settings File'),
+    'application/x-freetube-db',
+    '.db',
+    t('Settings.Data Settings.All settings have been successfully exported')
+  )
+}
+
+/**
+ * @param {'restart' | 'cancel' | null} value
+ */
+function handleRestart(value) {
+  showRestartPrompt.value = false
+
+  if (value === null || value === 'cancel') {
+    pendingSettings.clear()
+    return
+  }
+
+  if (process.env.IS_ELECTRON) {
+    Promise.all(
+      Array.from(pendingSettings, ([settingKey, settingValue]) => {
+        const updaterId = defaultUpdaterId(settingKey)
+        return store.dispatch(updaterId, settingValue)
+      })
+    ).then(() => {
+      window.ftElectron.relaunch()
+    })
+  }
+}
+
+// #endregion settings
+
 </script>
 
 <style scoped src="./DataSettings.css" />

src/renderer/components/FtSettingsSection/FtSettingsSection.scss

@@ -97,7 +97,7 @@
       padding-inline: 10px;
     }
 
-    :deep(:not(.select, .selectLabel) > .tooltip) {
+    :deep(:not(.select, .selectLabel, .groupTitle) > .tooltip) {
       display: inline-block;
       position: absolute;
       inset-inline-end: -25px;

src/renderer/store/modules/settings.js

@@ -121,6 +121,23 @@ import { getSystemLocale, showToast } from '../../helpers/utils'
  * to evaluate if it is truly necessary
  * and to ensure that the implementation works as intended.
  *
+ ***
+ * `settingsNotExportable`
+ * This set contains setting keys
+ * that should not be exported when a user chooses to "Export settings".
+ *
+ * When adding a new setting, it should be considered
+ * whether this setting can be exported or not. For example, settings
+ * that are OS or user specific like paths should not be exported.
+ *
+ ***
+ * `settingsNeedingRestart`
+ * This set contains setting keys
+ * that require an application restart to take effect.
+ *
+ * When adding a new setting that needs a restart for the
+ * change to apply, it should be added to this set.
+ *
  ****
  * ENDING NOTES
  *
@@ -141,10 +158,10 @@ import { getSystemLocale, showToast } from '../../helpers/utils'
 
 // HELPERS
 const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
-const defaultGetterId = settingId => 'get' + capitalize(settingId)
-const defaultMutationId = settingId => 'set' + capitalize(settingId)
-const defaultUpdaterId = settingId => 'update' + capitalize(settingId)
-const defaultSideEffectsTriggerId = settingId =>
+export const defaultGetterId = settingId => 'get' + capitalize(settingId)
+export const defaultMutationId = settingId => 'set' + capitalize(settingId)
+export const defaultUpdaterId = settingId => 'update' + capitalize(settingId)
+export const defaultSideEffectsTriggerId = settingId =>
   'trigger' + capitalize(settingId) + 'SideEffects'
 /*****/
 
@@ -414,10 +431,42 @@ const sideEffectHandlers = {
 
 const settingsWithSideEffects = Object.keys(sideEffectHandlers)
 
+const settingsNotExportable = new Set([
+  'useProxy',
+  'proxyHostname',
+  'proxyPort',
+  'proxyUsername',
+  'proxyPassword',
+  'proxyProtocol',
+  'proxyVideos',
+  'externalPlayer',
+  'externalPlayerExecutable',
+  'externalPlayerIgnoreWarnings',
+  'externalPlayerIgnoreDefaultArgs',
+  'externalPlayerCustomArgs',
+  'showAddedExternalPlayerCustomArgs',
+  'screenshotAskPath',
+  'screenshotFolderPath',
+  'backendPreference'
+])
+
+export const settingsNeedingRestart = new Set([
+  'disableSmoothScrolling'
+])
+
 const customState = {
 }
 
 const customGetters = {
+  getExportableSettings: (state) => {
+    const exportableSettings = {}
+    for (const [key, value] of Object.entries(state)) {
+      if (!settingsNotExportable.has(key)) {
+        exportableSettings[key] = value
+      }
+    }
+    return exportableSettings
+  }
 }
 
 const customMutations = {}

static/locales/en-US.yaml

@@ -589,6 +589,7 @@ Settings:
     History File: History File
     Playlist File: Playlist File
     Search history file: Search history file
+    Settings File: Settings File
     Export Subscriptions: Export Subscriptions
     Export FreeTube: Export FreeTube
     Export YouTube: Export YouTube
@@ -600,6 +601,9 @@ Settings:
     Search history: Search history
     Import search history: Import search history
     Export search history: Export search history
+    Import Settings: Import Settings
+    Export Settings: Export Settings
+    Settings Tooltip: Settings that are OS/user-specific or experimental cannot be exported or imported (e.g., proxy, external player, screenshot folder...)
     Profile object has insufficient data, skipping item: Profile object has insufficient
       data, skipping item
     All subscriptions and profiles have been successfully imported: All subscriptions
@@ -625,9 +629,14 @@ Settings:
       successfully imported
     All search history has been successfully exported: All search history has been
       successfully exported
+    All settings have been successfully imported: All settings have been
+      successfully imported
+    All settings have been successfully exported: All settings have been
+      successfully exported
     Unable to read file: Unable to read file
     Unable to write file: Unable to write file
     Unknown data key: Unknown data key
+    Unknown setting key: Unknown setting key
     How do I import my subscriptions?: How do I import my subscriptions?
     Manage Subscriptions: Manage Subscriptions
   Proxy Settings: