Add import/export settings buttons (#9123)

* Add import/export settings buttons

* Add exported settings exclusion list

* Add documentation

* Add tooltip to the data settings header

* Consider settingsPassword to be exportable, could be discussed

* Take into account settings that need restart

* Simplify const access across store and vue script

* Add documentation

* Improve tooltip text

* Fix tooltip on mobile screen

* Add more items to settingsNotExportable set

* Add backendPreference key to settingsNotExportable set because it is dependent of process.env

* Set 'showRestartPrompt.value' once after for loop

* Replace 'exportable' occurences by 'transferrable'

* Add more settings to 'settingsNotTransferrable' array

* Remove pending restart and update 'settingsNotTransferrable'

* Fix typo

* Differentiate between non-transferable and unknown settings

* Fix localization key

* Use same format as db file for import/export

* Apply code suggestions

* Apply code suggestions

Author: Shadorc

src/renderer/components/DataSettings/DataSettings.vue

@@ -65,6 +65,24 @@
         @click="showExportSearchHistoryPrompt = true"
       />
     </FtFlexBox>
+    <h4 class="groupTitle">
+      {{ t('Settings.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')"
@@ -98,8 +116,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, NON_TRANSFERABLE_SETTINGS } from '../../store/modules/settings'
 
 import { MAIN_PROFILE_ID } from '../../../constants'
 import { calculateColorLuminance, getRandomColor } from '../../helpers/colors'
@@ -1465,6 +1485,81 @@ async function exportYouTubeSearchHistory() {
 }
 
 // #endregion search history
+
+// #region settings
+
+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 textDecode = response.content.split('\n')
+  textDecode.pop()
+
+  const currentSettings = store.state.settings
+
+  textDecode.forEach((rawEntry) => {
+    const entry = JSON.parse(rawEntry)
+    if (typeof entry._id !== 'string' || !Object.hasOwn(entry, 'value')) {
+      showToast(t('Settings.Data Settings.Setting object has insufficient data, skipping item'))
+      console.error('Missing keys:', entry)
+    } else if (!Object.hasOwn(currentSettings, entry._id)) {
+      const message = t('Settings.Data Settings.Unknown setting key', { key: entry._id })
+      showToast(message)
+    } else if (NON_TRANSFERABLE_SETTINGS.has(entry._id)) {
+      const message = t('Settings.Data Settings.Non-transferable setting key', { key: entry._id })
+      showToast(message)
+    } else {
+      const currentValue = currentSettings[entry._id]
+      const areValuesEqual = currentValue === entry.value ||
+        (typeof entry.value === 'object' && JSON.stringify(currentValue) === JSON.stringify(entry.value))
+      if (!areValuesEqual) {
+        const updaterId = defaultUpdaterId(entry._id)
+        store.dispatch(updaterId, entry.value)
+      }
+    }
+  })
+
+  showToast(t('Settings.Data Settings.All settings have been successfully imported'))
+}
+
+async function exportSettings() {
+  const settingDb = Object.entries(store.state.settings)
+    .filter(([_id]) => !NON_TRANSFERABLE_SETTINGS.has(_id))
+    .map(([_id, value]) => JSON.stringify({ _id, value }))
+    .join('\n') + '\n'
+  const dateStr = getTodayDateStrLocalTimezone()
+  const exportFileName = 'freetube-settings-' + dateStr + '.db'
+
+  await promptAndWriteToFile(
+    exportFileName,
+    settingDb,
+    t('Settings.Data Settings.Settings File'),
+    'application/x-freetube-db',
+    '.db',
+    t('Settings.Data Settings.All settings have been successfully exported')
+  )
+}
+
+// #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,15 @@ import { getSystemLocale, showToast } from '../../helpers/utils'
  * to evaluate if it is truly necessary
  * and to ensure that the implementation works as intended.
  *
+ ***
+ * `NON_TRANSFERABLE_SETTINGS`
+ * 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.
+ *
  ****
  * ENDING NOTES
  *
@@ -143,7 +152,7 @@ import { getSystemLocale, showToast } from '../../helpers/utils'
 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)
+export const defaultUpdaterId = settingId => 'update' + capitalize(settingId)
 const defaultSideEffectsTriggerId = settingId =>
   'trigger' + capitalize(settingId) + 'SideEffects'
 /*****/
@@ -415,6 +424,34 @@ const sideEffectHandlers = {
 
 const settingsWithSideEffects = Object.keys(sideEffectHandlers)
 
+export const NON_TRANSFERABLE_SETTINGS = new Set([
+  /* Depends on process.env.IS_ELECTRON */
+  // ProxySettings
+  'useProxy',
+  'proxyProtocol',
+  'proxyHostname',
+  'proxyPort',
+  'proxyUsername',
+  'proxyPassword',
+  // ExternalPlayerSettings
+  'externalPlayer',
+  'externalPlayerExecutable',
+  'externalPlayerIgnoreWarnings',
+  'externalPlayerIgnoreDefaultArgs',
+  'externalPlayerCustomArgs',
+  'showAddedExternalPlayerCustomArgs',
+  // Others
+  'disableSmoothScrolling',
+  'hideToTrayOnMinimize',
+  'screenshotAskPath',
+  'screenshotFolderPath',
+
+  /* Depends on process.env.SUPPORTS_LOCAL_API */
+  'backendFallback',
+  'backendPreference',
+  'proxyVideos',
+])
+
 const customState = {
 }
 

static/locales/en-US.yaml

@@ -593,6 +593,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
@@ -604,6 +605,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
@@ -629,9 +633,16 @@ 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
+    Setting object has insufficient data, skipping item: Setting object has insufficient data, skipping item
+    Unknown setting key: 'Unknown setting key: {key}'
+    Non-transferable setting key: 'Non-transferable setting key: {key}'
     How do I import my subscriptions?: How do I import my subscriptions?
     Manage Subscriptions: Manage Subscriptions
   Proxy Settings: