Settings backup/restore + small fixes

Another stepping stone for settings sync, should enable easier debug for us and manual sync solution for the impatient. Also should make wiping localstorage less of a problem since it also backs up user highlights which don't have proper UI for them.

Major:

• Changed ImportExport component into a service since it's mostly logic/direct DOM-manip, not much of markup going on, makes it more reusable and avoid mess with slots
• Implemented settings save/restore function
  • New dropdown button in modal footer: save, save with theme, restore
  • Settings saved with array version - current version [1, 0] - works similarly to semver but in array, for future-proofing it will refuse to load settings with major version != 1 (i.e. [2, 0]) but will work different minor version, i.e. [1, 1].
  • Separate control for theme saving since theme data is quite heavy.
    • For future we might add dialog box asking if user wants to import theme as well if it's present
  • Restoring goes over supported properties and updates them using setOption with data found in file. Minor stuff:
• one more fix for "p's broken theme" fucking up theme editor and making it mostly unusable
• changed "Peek"/"Close" buttons to use icons instead, feels a bit more natural and less confusing given that there are now button in footer too.
• panel footers no longer use panel header colors, it just looked silly and didn't really work with some themes (redmond), cleaned up their styles a bit

src/components/settings_modal/settings_modal.js

@@ -19,6 +19,9 @@ import {
   faWindowMinimize
 } from '@fortawesome/free-regular-svg-icons'
 
+const PLEROMAFE_SETTINGS_MAJOR_VERSION = 1
+const PLEROMAFE_SETTINGS_MINOR_VERSION = 0
+
 library.add(
   faTimes,
   faWindowMinimize,
@@ -65,12 +68,52 @@ const SettingsModal = {
       this.$store.dispatch('togglePeekSettingsModal')
     },
     importValidator (data) {
-      return data._pleroma_settings_version[0] === 1
+      if (!Array.isArray(data._pleroma_settings_version)) {
+        return {
+          messageKey: 'settings.file_import_export.invalid_file'
+        }
+      }
+
+      const [major, minor] = data._pleroma_settings_version
+
+      if (major > PLEROMAFE_SETTINGS_MAJOR_VERSION) {
+        return {
+          messageKey: 'settings.file_export_import.errors.file_too_new',
+          messageArgs: {
+            fileMajor: major,
+            feMajor: PLEROMAFE_SETTINGS_MAJOR_VERSION
+          }
+        }
+      }
+
+      if (major < PLEROMAFE_SETTINGS_MAJOR_VERSION) {
+        return {
+          messageKey: 'settings.file_export_import.errors.file_too_old',
+          messageArgs: {
+            fileMajor: major,
+            feMajor: PLEROMAFE_SETTINGS_MAJOR_VERSION
+          }
+        }
+      }
+
+      if (minor > PLEROMAFE_SETTINGS_MINOR_VERSION) {
+        this.$store.dispatch('pushGlobalNotice', {
+          level: 'warning',
+          messageKey: 'settings.file_export_import.errors.file_slightly_new',
+        })
+      }
+
+      return true
     },
-    onImportFailure () {
-      this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_settings_imported', level: 'error' })
+    onImportFailure (result) {
+      if (result.error) {
+        this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_settings_imported', level: 'error' })
+      } else {
+        this.$store.dispatch('pushGlobalNotice', { ...result.validationResult, level: 'error' })
+      }
     },
     onImport (data) {
+      if (data)
       this.$store.dispatch('loadSettings', data)
     },
     restore () {
@@ -99,7 +142,10 @@ const SettingsModal = {
         )
       }
       const clone = cloneDeep(sample)
-      clone._pleroma_settings_version = [1, 0]
+      clone._pleroma_settings_version = [
+        PLEROMAFE_SETTINGS_MAJOR_VERSION,
+        PLEROMAFE_SETTINGS_MINOR_VERSION
+      ]
       return clone
     }
   },