src/App.scss

@@ -547,9 +547,21 @@ main-router {
   border-radius: var(--panelRadius, $fallback--panelRadius);
 }
 
-.panel-footer {
+/* TODO Should remove timeline-footer from here when we refactor panels into
+ * separate component and utilize slots
+ */
+.panel-footer, .timeline-footer {
+  display: flex;
   border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
   border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+  flex: none;
+  padding: 0.6em 0.6em;
+  text-align: left;
+  line-height: 28px;
+  align-items: baseline;
+  border-width: 1px 0 0 0;
+  border-style: solid;
+  border-color: var(--border, $fallback--border);
 
   .faint {
     color: $fallback--faint;
@@ -871,16 +883,10 @@ nav {
 }
 
 .new-status-notification {
-  position:relative;
-  margin-top: -1px;
+  position: relative;
   font-size: 1.1em;
-  border-width: 1px 0 0 0;
-  border-style: solid;
-  border-color: var(--border, $fallback--border);
-  padding: 10px;
   z-index: 1;
-  background-color: $fallback--fg;
-  background-color: var(--panel, $fallback--fg);
+  flex: 1;
 }
 
 .chat-layout {

src/components/export_import/export_import.vue

-<template>
-  <div class="import-export-container">
-    <slot name="before" />
-    <button
-      class="btn button-default"
-      @click="exportData"
-    >
-      {{ exportLabel }}
-    </button>
-    <button
-      class="btn button-default"
-      @click="importData"
-    >
-      {{ importLabel }}
-    </button>
-    <slot name="afterButtons" />
-    <p
-      v-if="importFailed"
-      class="alert error"
-    >
-      {{ importFailedText }}
-    </p>
-    <slot name="afterError" />
-  </div>
-</template>
-
-<script>
-export default {
-  props: [
-    'exportObject',
-    'importLabel',
-    'exportLabel',
-    'importFailedText',
-    'validator',
-    'onImport',
-    'onImportFailure'
-  ],
-  data () {
-    return {
-      importFailed: false
-    }
-  },
-  methods: {
-    exportData () {
-      const stringified = JSON.stringify(this.exportObject, null, 2) // Pretty-print and indent with 2 spaces
-
-      // Create an invisible link with a data url and simulate a click
-      const e = document.createElement('a')
-      e.setAttribute('download', 'pleroma_theme.json')
-      e.setAttribute('href', 'data:application/json;base64,' + window.btoa(stringified))
-      e.style.display = 'none'
-
-      document.body.appendChild(e)
-      e.click()
-      document.body.removeChild(e)
-    },
-    importData () {
-      this.importFailed = false
-      const filePicker = document.createElement('input')
-      filePicker.setAttribute('type', 'file')
-      filePicker.setAttribute('accept', '.json')
-
-      filePicker.addEventListener('change', event => {
-        if (event.target.files[0]) {
-          // eslint-disable-next-line no-undef
-          const reader = new FileReader()
-          reader.onload = ({ target }) => {
-            try {
-              const parsed = JSON.parse(target.result)
-              const valid = this.validator(parsed)
-              if (valid) {
-                this.onImport(parsed)
-              } else {
-                this.importFailed = true
-                // this.onImportFailure(valid)
-              }
-            } catch (e) {
-              // This will happen both if there is a JSON syntax error or the theme is missing components
-              this.importFailed = true
-              // this.onImportFailure(e)
-            }
-          }
-          reader.readAsText(event.target.files[0])
-        }
-      })
-
-      document.body.appendChild(filePicker)
-      filePicker.click()
-      document.body.removeChild(filePicker)
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.import-export-container {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  justify-content: center;
-}
-</style>

src/components/notifications/notifications.scss

 @import '../../_variables.scss';
 
-.notifications {
+.Notifications {
   &:not(.minimal) {
     // a bit of a hack to allow scrolling below notifications
     padding-bottom: 15em;
@@ -11,6 +11,10 @@
     color: var(--text, $fallback--text);
   }
 
+  .notifications-footer {
+    border: none;
+  }
+
   .notification {
     position: relative;
 
@@ -82,7 +86,6 @@
     }
   }
 
-
   .follow-text, .move-text {
     padding: 0.5em 0;
     overflow-wrap: break-word;

src/components/notifications/notifications.vue

 <template>
   <div
     :class="{ minimal: minimalMode }"
-    class="notifications"
+    class="Notifications"
   >
     <div :class="mainClass">
       <div
@@ -35,10 +35,10 @@
           <notification :notification="notification" />
         </div>
       </div>
-      <div class="panel-footer">
+      <div class="panel-footer notifications-footer">
         <div
           v-if="bottomedOut"
-          class="new-status-notification text-center panel-footer faint"
+          class="new-status-notification text-center faint"
         >
           {{ $t('notifications.no_more_notifications') }}
         </div>
@@ -47,13 +47,13 @@
           class="button-unstyled -link -fullwidth"
           @click.prevent="fetchOlderNotifications()"
         >
-          <div class="new-status-notification text-center panel-footer">
+          <div class="new-status-notification text-center">
             {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
           </div>
         </button>
         <div
           v-else
-          class="new-status-notification text-center panel-footer"
+          class="new-status-notification text-center"
         >
           <FAIcon
             icon="circle-notch"

src/components/settings_modal/settings_modal.js

@@ -2,10 +2,55 @@ import Modal from 'src/components/modal/modal.vue'
 import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
 import AsyncComponentError from 'src/components/async_component_error/async_component_error.vue'
 import getResettableAsyncComponent from 'src/services/resettable_async_component.js'
+import Popover from '../popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { cloneDeep } from 'lodash'
+import {
+  newImporter,
+  newExporter
+} from 'src/services/export_import/export_import.js'
+import {
+  faTimes,
+  faFileUpload,
+  faFileDownload,
+  faChevronDown
+} from '@fortawesome/free-solid-svg-icons'
+import {
+  faWindowMinimize
+} from '@fortawesome/free-regular-svg-icons'
+
+const PLEROMAFE_SETTINGS_MAJOR_VERSION = 1
+const PLEROMAFE_SETTINGS_MINOR_VERSION = 0
+
+library.add(
+  faTimes,
+  faWindowMinimize,
+  faFileUpload,
+  faFileDownload,
+  faChevronDown
+)
 
 const SettingsModal = {
+  data () {
+    return {
+      dataImporter: newImporter({
+        validator: this.importValidator,
+        onImport: this.onImport,
+        onImportFailure: this.onImportFailure
+      }),
+      dataThemeExporter: newExporter({
+        filename: 'pleromafe_settings.full',
+        getExportedObject: () => this.generateExport(true)
+      }),
+      dataExporter: newExporter({
+        filename: 'pleromafe_settings',
+        getExportedObject: () => this.generateExport()
+      })
+    }
+  },
   components: {
     Modal,
+    Popover,
     SettingsModalContent: getResettableAsyncComponent(
       () => import('./settings_modal_content.vue'),
       {
@@ -21,6 +66,85 @@ const SettingsModal = {
     },
     peekModal () {
       this.$store.dispatch('togglePeekSettingsModal')
+    },
+    importValidator (data) {
+      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 (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 () {
+      this.dataImporter.importData()
+    },
+    backup () {
+      this.dataExporter.exportData()
+    },
+    backupWithTheme () {
+      this.dataThemeExporter.exportData()
+    },
+    generateExport (theme = false) {
+      const { config } = this.$store.state
+      let sample = config
+      if (!theme) {
+        const ignoreList = new Set([
+          'customTheme',
+          'customThemeSource',
+          'colors'
+        ])
+        sample = Object.fromEntries(
+          Object
+            .entries(sample)
+            .filter(([key]) => !ignoreList.has(key))
+        )
+      }
+      const clone = cloneDeep(sample)
+      clone._pleroma_settings_version = [
+        PLEROMAFE_SETTINGS_MAJOR_VERSION,
+        PLEROMAFE_SETTINGS_MINOR_VERSION
+      ]
+      return clone
     }
   },
   computed: {

src/components/settings_modal/settings_modal.vue

@@ -31,20 +31,86 @@
         </transition>
         <button
           class="btn button-default"
+          :title="$t('general.peek')"
           @click="peekModal"
         >
-          {{ $t('general.peek') }}
+          <FAIcon
+            :icon="['far', 'window-minimize']"
+            fixed-width
+          />
         </button>
         <button
           class="btn button-default"
+          :title="$t('general.close')"
           @click="closeModal"
         >
-          {{ $t('general.close') }}
+          <FAIcon
+            icon="times"
+            fixed-width
+          />
         </button>
       </div>
       <div class="panel-body">
         <SettingsModalContent v-if="modalOpenedOnce" />
       </div>
+      <div class="panel-footer">
+        <Popover
+          class="export"
+          trigger="click"
+          placement="top"
+          :offset="{ y: 5, x: 5 }"
+          :bound-to="{ x: 'container' }"
+          remove-padding
+        >
+          <button
+            slot="trigger"
+            class="btn button-default"
+            :title="$t('general.close')"
+          >
+            <span>{{ $t("settings.file_export_import.backup_restore") }}</span>
+            <FAIcon
+              icon="chevron-down"
+            />
+          </button>
+          <div
+            slot="content"
+            slot-scope="{close}"
+          >
+            <div class="dropdown-menu">
+              <button
+                class="button-default dropdown-item dropdown-item-icon"
+                @click.prevent="backup"
+                @click="close"
+              >
+                <FAIcon
+                  icon="file-download"
+                  fixed-width
+                /><span>{{ $t("settings.file_export_import.backup_settings") }}</span>
+              </button>
+              <button
+                class="button-default dropdown-item dropdown-item-icon"
+                @click.prevent="backupWithTheme"
+                @click="close"
+              >
+                <FAIcon
+                  icon="file-download"
+                  fixed-width
+                /><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span>
+              </button>
+              <button
+                class="button-default dropdown-item dropdown-item-icon"
+                @click.prevent="restore"
+                @click="close"
+              >
+                <FAIcon
+                  icon="file-upload"
+                  fixed-width
+                /><span>{{ $t("settings.file_export_import.restore_settings") }}</span>
+              </button>
+            </div>
+          </div>
+        </Popover>
+      </div>
     </div>
   </Modal>
 </template>

src/components/settings_modal/tabs/theme_tab/theme_tab.js

@@ -15,6 +15,10 @@ import {
   shadows2to3,
   colors2to3
 } from 'src/services/style_setter/style_setter.js'
+import {
+  newImporter,
+  newExporter
+} from 'src/services/export_import/export_import.js'
 import {
   SLOT_INHERITANCE
 } from 'src/services/theme_data/pleromafe.js'
@@ -31,7 +35,6 @@ import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
 import FontControl from 'src/components/font_control/font_control.vue'
 import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
-import ExportImport from 'src/components/export_import/export_import.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 
 import Preview from './preview.vue'
@@ -67,6 +70,15 @@ const colorConvert = (color) => {
 export default {
   data () {
     return {
+      themeImporter: newImporter({
+        validator: this.importValidator,
+        onImport: this.onImport,
+        onImportFailure: this.onImportFailure
+      }),
+      themeExporter: newExporter({
+        filename: 'pleroma_theme',
+        getExportedObject: () => this.exportedTheme
+      }),
       availableStyles: [],
       selected: this.$store.getters.mergedConfig.theme,
       themeWarning: undefined,
@@ -383,7 +395,6 @@ export default {
     FontControl,
     TabSwitcher,
     Preview,
-    ExportImport,
     Checkbox
   },
   methods: {
@@ -528,10 +539,15 @@ export default {
         this.previewColors.mod
       )
     },
+    importTheme () { this.themeImporter.importData() },
+    exportTheme () { this.themeExporter.exportData() },
     onImport (parsed, forceSource = false) {
       this.tempImportFile = parsed
       this.loadTheme(parsed, 'file', forceSource)
     },
+    onImportFailure (result) {
+      this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_theme_imported', level: 'error' })
+    },
     importValidator (parsed) {
       const version = parsed._pleroma_theme_version
       return version >= 1 || version <= 2

src/components/settings_modal/tabs/theme_tab/theme_tab.vue

@@ -48,46 +48,51 @@
             </template>
           </div>
         </div>
-        <ExportImport
-          :export-object="exportedTheme"
-          :export-label="$t(&quot;settings.export_theme&quot;)"
-          :import-label="$t(&quot;settings.import_theme&quot;)"
-          :import-failed-text="$t(&quot;settings.invalid_theme_imported&quot;)"
-          :on-import="onImport"
-          :validator="importValidator"
-        >
-          <template slot="before">
-            <div class="presets">
-              {{ $t('settings.presets') }}
-              <label
-                for="preset-switcher"
-                class="select"
+        <div class="top">
+          <div class="presets">
+            {{ $t('settings.presets') }}
+            <label
+              for="preset-switcher"
+              class="select"
+            >
+              <select
+                id="preset-switcher"
+                v-model="selected"
+                class="preset-switcher"
               >
-                <select
-                  id="preset-switcher"
-                  v-model="selected"
-                  class="preset-switcher"
+                <option
+                  v-for="style in availableStyles"
+                  :key="style.name"
+                  :value="style"
+                  :style="{
+                    backgroundColor: style[1] || (style.theme || style.source).colors.bg,
+                    color: style[3] || (style.theme || style.source).colors.text
+                  }"
                 >
-                  <option
-                    v-for="style in availableStyles"
-                    :key="style.name"
-                    :value="style"
-                    :style="{
-                      backgroundColor: style[1] || (style.theme || style.source).colors.bg,
-                      color: style[3] || (style.theme || style.source).colors.text
-                    }"
-                  >
-                    {{ style[0] || style.name }}
-                  </option>
-                </select>
-                <FAIcon
-                  class="select-down-icon"
-                  icon="chevron-down"
-                />
-              </label>
-            </div>
-          </template>
-        </ExportImport>
+                  {{ style[0] || style.name }}
+                </option>
+              </select>
+              <FAIcon
+                class="select-down-icon"
+                icon="chevron-down"
+              />
+            </label>
+          </div>
+          <div class="export-import">
+            <button
+              class="btn button-default"
+              @click="importTheme"
+            >
+              {{ $t(&quot;settings.import_theme&quot;) }}
+            </button>
+            <button
+              class="btn button-default"
+              @click="exportTheme"
+            >
+              {{ $t(&quot;settings.export_theme&quot;) }}
+            </button>
+          </div>
+        </div>
       </div>
       <div class="save-load-options">
         <span class="keep-option">

src/components/timeline/timeline.scss

+@import '../../_variables.scss';
+
+.Timeline {
+  .loadmore-text {
+    opacity: 1;
+  }
+
+  &.-blocked {
+    cursor: progress;
+  }
+
+  .timeline-heading {
+    max-width: 100%;
+    flex-wrap: nowrap;
+    align-items: center;
+    position: relative;
+
+    .loadmore-button {
+      flex-shrink: 0;
+    }
+
+    .loadmore-text {
+      flex-shrink: 0;
+      line-height: 1em;
+    }
+  }
+
+  .timeline-footer {
+    border: none;
+  }
+}

src/components/timeline/timeline.vue

@@ -52,13 +52,13 @@
     <div :class="classes.footer">
       <div
         v-if="count===0"
-        class="new-status-notification text-center panel-footer faint"
+        class="new-status-notification text-center faint"
       >
         {{ $t('timeline.no_statuses') }}
       </div>
       <div
         v-else-if="bottomedOut"
-        class="new-status-notification text-center panel-footer faint"
+        class="new-status-notification text-center faint"
       >
         {{ $t('timeline.no_more_statuses') }}
       </div>
@@ -67,13 +67,13 @@
         class="button-unstyled -link -fullwidth"
         @click.prevent="fetchOlderStatuses()"
       >
-        <div class="new-status-notification text-center panel-footer">
+        <div class="new-status-notification text-center">
           {{ $t('timeline.load_older') }}
         </div>
       </button>
       <div
         v-else
-        class="new-status-notification text-center panel-footer"
+        class="new-status-notification text-center"
       >
         <FAIcon
           icon="circle-notch"
@@ -87,32 +87,4 @@
 
 <script src="./timeline.js"></script>
 
-<style lang="scss">
-@import '../../_variables.scss';
-
-.Timeline {
-  .loadmore-text {
-    opacity: 1;
-  }
-
-  &.-blocked {
-    cursor: progress;
-  }
-}
-
-.timeline-heading {
-  max-width: 100%;
-  flex-wrap: nowrap;
-  align-items: center;
-  position: relative;
-
-  .loadmore-button {
-    flex-shrink: 0;
-  }
-
-  .loadmore-text {
-    flex-shrink: 0;
-    line-height: 1em;
-  }
-}
-</style>
+<style src="./timeline.scss" lang="scss"> </style>

src/i18n/en.json

@@ -368,6 +368,18 @@
     "loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")",
     "mutes_tab": "Mutes",
     "play_videos_in_modal": "Play videos in a popup frame",
+    "file_export_import": {
+      "backup_restore": "Settings backup",
+      "backup_settings": "Backup settings to file",
+      "backup_settings_theme": "Backup settings and theme to file",
+      "restore_settings": "Restore settings from file",
+      "errors": {
+        "invalid_file": "The selected file is not a supported Pleroma settings backup. No changes were made.",
+        "file_too_new": "Incompatile major version: {fileMajor}, this PleromaFE (settings ver {feMajor}) is too old to handle it",
+        "file_too_old": "Incompatile major version: {fileMajor}, file version is too old and not supported (min. set. ver. {feMajor})",
+        "file_slightly_new": "File minor version is different, some settings might not load"
+      }
+    },
     "profile_fields": {
       "label": "Profile metadata",
       "add_field": "Add field",

src/modules/config.js

@@ -110,6 +110,20 @@ const config = {
     }
   },
   actions: {
+    loadSettings ({ dispatch }, data) {
+      const knownKeys = new Set(Object.keys(defaultState))
+      const presentKeys = new Set(Object.keys(data))
+      const intersection = new Set()
+      for (let elem of presentKeys) {
+        if (knownKeys.has(elem)) {
+          intersection.add(elem)
+        }
+      }
+
+      intersection.forEach(
+        name => dispatch('setOption', { name, value: data[name] })
+      )
+    },
     setHighlight ({ commit, dispatch }, { user, color, type }) {
       commit('setHighlight', { user, color, type })
     },

src/services/export_import/export_import.js

+export const newExporter = ({
+  filename = 'data',
+  getExportedObject
+}) => ({
+  exportData () {
+    const stringified = JSON.stringify(getExportedObject(), null, 2) // Pretty-print and indent with 2 spaces
+
+    // Create an invisible link with a data url and simulate a click
+    const e = document.createElement('a')
+    e.setAttribute('download', `${filename}.json`)
+    e.setAttribute('href', 'data:application/json;base64,' + window.btoa(stringified))
+    e.style.display = 'none'
+
+    document.body.appendChild(e)
+    e.click()
+    document.body.removeChild(e)
+  }
+})
+
+export const newImporter = ({
+  onImport,
+  onImportFailure,
+  validator = () => true
+}) => ({
+  importData () {
+    const filePicker = document.createElement('input')
+    filePicker.setAttribute('type', 'file')
+    filePicker.setAttribute('accept', '.json')
+
+    filePicker.addEventListener('change', event => {
+      if (event.target.files[0]) {
+        // eslint-disable-next-line no-undef
+        const reader = new FileReader()
+        reader.onload = ({ target }) => {
+          try {
+            const parsed = JSON.parse(target.result)
+            const validationResult = validator(parsed)
+            if (validationResult === true) {
+              onImport(parsed)
+            } else {
+              onImportFailure({ validationResult })
+            }
+          } catch (error) {
+            onImportFailure({ error })
+          }
+        }
+        reader.readAsText(event.target.files[0])
+      }
+    })
+
+    document.body.appendChild(filePicker)
+    filePicker.click()
+    document.body.removeChild(filePicker)
+  }
+})

src/services/style_setter/style_setter.js

@@ -380,7 +380,7 @@ export const colors2to3 = (colors) => {
  */
 export const shadows2to3 = (shadows, opacity) => {
   return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => {
-    const isDynamic = ({ color }) => color.startsWith('--')
+    const isDynamic = ({ color = '#000000' }) => color.startsWith('--')
     const getOpacity = ({ color }) => opacity[getOpacitySlot(color.substring(2).split(',')[0])]
     const newShadow = shadowDefs.reduce((shadowAcc, def) => [
       ...shadowAcc,