Merge remote-tracking branch 'origin/develop' into migrate/vuex-to-pinia

src/components/settings_modal/tabs/appearance_tab.js

@@ -0,0 +1,425 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import FloatSetting from '../helpers/float_setting.vue'
+import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue'
+import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
+
+import FontControl from 'src/components/font_control/font_control.vue'
+
+import { normalizeThemeData } from 'src/modules/interface'
+
+import { newImporter } from 'src/services/export_import/export_import.js'
+import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
+import { init } from 'src/services/theme_data/theme_data_3.service.js'
+import {
+  getCssRules,
+  getScopedVersion
+} from 'src/services/theme_data/css_utils.js'
+import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faGlobe
+} from '@fortawesome/free-solid-svg-icons'
+
+import Preview from './theme_tab/theme_preview.vue'
+
+// helper for debugging
+// eslint-disable-next-line no-unused-vars
+const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? 'null' : x))
+
+library.add(
+  faGlobe
+)
+
+const AppearanceTab = {
+  data () {
+    return {
+      availableThemesV3: [],
+      availableThemesV2: [],
+      bundledPalettes: [],
+      compilationCache: {},
+      fileImporter: newImporter({
+        accept: '.json, .iss',
+        validator: this.importValidator,
+        onImport: this.onImport,
+        parser: this.importParser,
+        onImportFailure: this.onImportFailure
+      }),
+      palettesKeys: [
+        'bg',
+        'fg',
+        'link',
+        'text',
+        'cRed',
+        'cGreen',
+        'cBlue',
+        'cOrange'
+      ],
+      userPalette: {},
+      intersectionObserver: null,
+      thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.third_column_mode_${mode}`)
+      })),
+      forcedRoundnessOptions: ['disabled', 'sharp', 'nonsharp', 'round'].map((mode, i) => ({
+        key: mode,
+        value: i - 1,
+        label: this.$t(`settings.style.themes3.hacks.forced_roundness_mode_${mode}`)
+      })),
+      underlayOverrideModes: ['none', 'opaque', 'transparent'].map((mode, i) => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.style.themes3.hacks.underlay_override_mode_${mode}`)
+      }))
+    }
+  },
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    FloatSetting,
+    UnitSetting,
+    ProfileSettingIndicator,
+    FontControl,
+    Preview,
+    PaletteEditor
+  },
+  mounted () {
+    this.$store.dispatch('getThemeData')
+
+    const updateIndex = (resource) => {
+      const capitalizedResource = resource[0].toUpperCase() + resource.slice(1)
+      const currentIndex = this.$store.state.instance[`${resource}sIndex`]
+
+      let promise
+      if (currentIndex) {
+        promise = Promise.resolve(currentIndex)
+      } else {
+        promise = this.$store.dispatch(`fetch${capitalizedResource}sIndex`)
+      }
+
+      return promise.then(index => {
+        return Object
+          .entries(index)
+          .map(([k, func]) => [k, func()])
+      })
+    }
+
+    updateIndex('style').then(styles => {
+      styles.forEach(([key, stylePromise]) => stylePromise.then(data => {
+        const meta = data.find(x => x.component === '@meta')
+        this.availableThemesV3.push({ key, data, name: meta.directives.name, version: 'v3' })
+      }))
+    })
+
+    updateIndex('theme').then(themes => {
+      themes.forEach(([key, themePromise]) => themePromise.then(data => {
+        if (!data) {
+          console.warn(`Theme with key ${key} is empty or malformed`)
+        } else if (Array.isArray(data)) {
+          console.warn(`Theme with key ${key} is a v1 theme and should be moved to static/palettes/index.json`)
+        } else if (!data.source && !data.theme) {
+          console.warn(`Theme with key ${key} is malformed`)
+        } else {
+          this.availableThemesV2.push({ key, data, name: data.name, version: 'v2' })
+        }
+      }))
+    })
+
+    this.userPalette = this.$store.state.interface.paletteDataUsed || {}
+
+    updateIndex('palette').then(bundledPalettes => {
+      bundledPalettes.forEach(([key, palettePromise]) => palettePromise.then(v => {
+        let palette
+        if (Array.isArray(v)) {
+          const [
+            name,
+            bg,
+            fg,
+            text,
+            link,
+            cRed = '#FF0000',
+            cGreen = '#00FF00',
+            cBlue = '#0000FF',
+            cOrange = '#E3FF00'
+          ] = v
+          palette = { key, name, bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
+        } else {
+          palette = { key, ...v }
+        }
+        if (!palette.key.startsWith('style.')) {
+          this.bundledPalettes.push(palette)
+        }
+      }))
+    })
+
+    if (window.IntersectionObserver) {
+      this.intersectionObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach(({ target, isIntersecting }) => {
+          if (!isIntersecting) return
+          const theme = this.availableStyles.find(x => x.key === target.dataset.themeKey)
+          this.$nextTick(() => {
+            if (theme) theme.ready = true
+          })
+          observer.unobserve(target)
+        })
+      }, {
+        root: this.$refs.themeList
+      })
+    }
+  },
+  updated () {
+    this.$nextTick(() => {
+      this.$refs.themeList.querySelectorAll('.theme-preview').forEach(node => {
+        this.intersectionObserver.observe(node)
+      })
+    })
+  },
+  watch: {
+    paletteDataUsed () {
+      this.userPalette = this.paletteDataUsed || {}
+    }
+  },
+  computed: {
+    switchInProgress () {
+      return this.$store.state.interface.themeChangeInProgress
+    },
+    paletteDataUsed () {
+      return this.$store.state.interface.paletteDataUsed
+    },
+    availableStyles () {
+      return [
+        ...this.availableThemesV3,
+        ...this.availableThemesV2
+      ]
+    },
+    availablePalettes () {
+      return [
+        ...this.bundledPalettes,
+        ...this.stylePalettes
+      ]
+    },
+    stylePalettes () {
+      const ruleset = this.$store.state.interface.styleDataUsed || []
+      if (!ruleset && ruleset.length === 0) return
+      const meta = ruleset.find(x => x.component === '@meta')
+      const result = ruleset.filter(x => x.component.startsWith('@palette'))
+        .map(x => {
+          const { variant, directives } = x
+          const {
+            bg,
+            fg,
+            text,
+            link,
+            accent,
+            cRed,
+            cBlue,
+            cGreen,
+            cOrange,
+            wallpaper
+          } = directives
+
+          const result = {
+            name: `${meta.directives.name || this.$t('settings.style.themes3.palette.imported')}: ${variant}`,
+            key: `style.${variant.toLowerCase().replace(/ /g, '_')}`,
+            bg,
+            fg,
+            text,
+            link,
+            accent,
+            cRed,
+            cBlue,
+            cGreen,
+            cOrange,
+            wallpaper
+          }
+          return Object.fromEntries(Object.entries(result).filter(([k, v]) => v))
+        })
+      return result
+    },
+    noIntersectionObserver () {
+      return !window.IntersectionObserver
+    },
+    horizontalUnits () {
+      return defaultHorizontalUnits
+    },
+    fontsOverride () {
+      return this.$store.getters.mergedConfig.fontsOverride
+    },
+    columns () {
+      const mode = this.$store.getters.mergedConfig.thirdColumnMode
+
+      const notif = mode === 'none' ? [] : ['notifs']
+
+      if (this.$store.getters.mergedConfig.sidebarRight || mode === 'postform') {
+        return [...notif, 'content', 'sidebar']
+      } else {
+        return ['sidebar', 'content', ...notif]
+      }
+    },
+    instanceWallpaperUsed () {
+      return this.$store.state.instance.background &&
+        !this.$store.state.users.currentUser.background_image
+    },
+    language: {
+      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
+      set: function (val) {
+        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+      }
+    },
+    customThemeVersion () {
+      const { themeVersion } = this.$store.state.interface
+      return themeVersion
+    },
+    isCustomThemeUsed () {
+      const { customTheme, customThemeSource } = this.mergedConfig
+      return customTheme != null || customThemeSource != null
+    },
+    isCustomStyleUsed (name) {
+      const { styleCustomData } = this.mergedConfig
+      return styleCustomData != null
+    },
+    ...SharedComputedObject()
+  },
+  methods: {
+    updateFont (key, value) {
+      this.$store.dispatch('setOption', {
+        name: 'theme3hacks',
+        value: {
+          ...this.mergedConfig.theme3hacks,
+          fonts: {
+            ...this.mergedConfig.theme3hacks.fonts,
+            [key]: value
+          }
+        }
+      })
+    },
+    importFile () {
+      this.fileImporter.importData()
+    },
+    importParser (file, filename) {
+      if (filename.endsWith('.json')) {
+        return JSON.parse(file)
+      } else if (filename.endsWith('.iss')) {
+        return deserialize(file)
+      }
+    },
+    onImport (parsed, filename) {
+      if (filename.endsWith('.json')) {
+        this.$store.dispatch('setThemeCustom', parsed.source || parsed.theme)
+      } else if (filename.endsWith('.iss')) {
+        this.$store.dispatch('setStyleCustom', parsed)
+      }
+    },
+    onImportFailure (result) {
+      console.error('Failure importing theme:', result)
+      this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_theme_imported', level: 'error' })
+    },
+    importValidator (parsed, filename) {
+      if (filename.endsWith('.json')) {
+        const version = parsed._pleroma_theme_version
+        return version >= 1 || version <= 2
+      } else if (filename.endsWith('.iss')) {
+        if (!Array.isArray(parsed)) return false
+        if (parsed.length < 1) return false
+        if (parsed.find(x => x.component === '@meta') == null) return false
+        return true
+      }
+    },
+    isThemeActive (key) {
+      return key === (this.mergedConfig.theme || this.$store.state.instance.theme)
+    },
+    isStyleActive (key) {
+      return key === (this.mergedConfig.style || this.$store.state.instance.style)
+    },
+    isPaletteActive (key) {
+      return key === (this.mergedConfig.palette || this.$store.state.instance.palette)
+    },
+    setStyle (name) {
+      this.$store.dispatch('setStyle', name)
+    },
+    setTheme (name) {
+      this.$store.dispatch('setTheme', name)
+    },
+    setPalette (name, data) {
+      this.$store.dispatch('setPalette', name)
+      this.userPalette = data
+    },
+    setPaletteCustom (data) {
+      this.$store.dispatch('setPaletteCustom', data)
+      this.userPalette = data
+    },
+    resetTheming (name) {
+      this.$store.dispatch('setStyle', 'stock')
+    },
+    previewTheme (key, version, input) {
+      let theme3
+      if (this.compilationCache[key]) {
+        theme3 = this.compilationCache[key]
+      } else if (input) {
+        if (version === 'v2') {
+          const style = normalizeThemeData(input)
+          const theme2 = convertTheme2To3(style)
+          theme3 = init({
+            inputRuleset: theme2,
+            ultimateBackgroundColor: '#000000',
+            liteMode: true,
+            debug: true,
+            onlyNormalState: true
+          })
+        } else if (version === 'v3') {
+          const palette = input.find(x => x.component === '@palette')
+          let paletteRule
+          if (palette) {
+            const { directives } = palette
+            directives.link = directives.link || directives.accent
+            directives.accent = directives.accent || directives.link
+            paletteRule = {
+              component: 'Root',
+              directives: Object.fromEntries(
+                Object
+                  .entries(directives)
+                  .filter(([k, v]) => k && k !== 'name')
+                  .map(([k, v]) => ['--' + k, 'color | ' + v])
+              )
+            }
+          } else {
+            paletteRule = null
+          }
+
+          theme3 = init({
+            inputRuleset: [...input, paletteRule].filter(x => x),
+            ultimateBackgroundColor: '#000000',
+            liteMode: true,
+            debug: true,
+            onlyNormalState: true
+          })
+        }
+      } else {
+        theme3 = init({
+          inputRuleset: [],
+          ultimateBackgroundColor: '#000000',
+          liteMode: true,
+          debug: true,
+          onlyNormalState: true
+        })
+      }
+
+      if (!this.compilationCache[key]) {
+        this.compilationCache[key] = theme3
+      }
+
+      return getScopedVersion(
+        getCssRules(theme3.eager),
+        '#theme-preview-' + key
+      ).join('\n')
+    }
+  }
+}
+
+export default AppearanceTab

src/components/settings_modal/tabs/appearance_tab.scss

@@ -0,0 +1,144 @@
+.appearance-tab {
+  .palette,
+  .theme-notice {
+    padding: 0.5em;
+    margin: 1em;
+  }
+
+  .setting-item {
+    padding-bottom: 0;
+
+    &.heading {
+      display: grid;
+      align-items: baseline;
+      grid-template-columns: 1fr auto auto auto;
+      grid-gap: 0.5em;
+
+      h2 {
+        flex: 1 0 auto;
+      }
+    }
+  }
+
+  h4 {
+    margin: 0.5em 0;
+  }
+
+  .palettes-container {
+    height: 15em;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-gutter: stable;
+    border-radius: var(--roundness);
+    border: 1px solid var(--border);
+    margin: -0.5em;
+  }
+
+  .palettes {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 0.5em;
+    padding: 0.5em;
+    width: 100%;
+
+    h4 {
+      margin: 0;
+      grid-column: 1 / span 2;
+    }
+  }
+
+  .palette-entry {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 0.5em;
+    height: max-content;
+
+    .palette-label {
+      height: auto;
+
+      label {
+        text-align: center;
+      }
+    }
+
+    .palette-square {
+      flex: 0 0 auto;
+      display: inline-block;
+      min-width: 1em;
+      min-height: 1em;
+    }
+  }
+
+  .column-settings {
+    display: flex;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+  }
+
+  .column-settings .size-label {
+    display: block;
+    margin-bottom: 0.5em;
+    margin-top: 0.5em;
+  }
+
+  .modal-view.-mobile & {
+    .palettes {
+      grid-template-columns: 1fr;
+    }
+
+    .palette-entry {
+      grid-column: 1;
+      justify-content: center;
+    }
+
+    .palette-label {
+      line-height: 1.5em;
+      margin-top: 0.5em;
+    }
+  }
+
+  .palette-preview {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1em 1em;
+    margin: 0.5em 0;
+  }
+
+  .theme-list {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    margin: -0.5em 0;
+    height: 25em;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+    border-radius: var(--roundness);
+    border: 1px solid var(--border);
+    padding: 0;
+    margin-bottom: 1em;
+
+    .theme-preview {
+      font-size: 1rem; // fix for firefox
+      width: 19rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 0.5em;
+
+      &.placeholder {
+        opacity: 0.2;
+      }
+
+      .theme-preview-container {
+        pointer-events: none;
+        zoom: 0.5;
+        border: none;
+        border-radius: var(--roundness);
+        text-align: left;
+      }
+    }
+  }
+}

src/components/settings_modal/tabs/appearance_tab.vue

@@ -0,0 +1,395 @@
+<template>
+  <div
+    class="appearance-tab"
+    :label="$t('settings.general')"
+  >
+    <div class="setting-item">
+      <h2>{{ $t('settings.theme') }}</h2>
+      <ul
+        ref="themeList"
+        class="theme-list"
+      >
+        <button
+          class="button-default theme-preview"
+          data-theme-key="stock"
+          :class="{ toggled: isStyleActive('stock'), disabled: switchInProgress }"
+          :disabled="switchInProgress"
+          @click="resetTheming"
+        >
+          <!-- eslint-disable vue/no-v-text-v-html-on-component -->
+          <!-- eslint-disable vue/no-v-html -->
+          <component
+            :is="'style'"
+            v-html="previewTheme('stock', 'v3')"
+          />
+          <!-- eslint-enable vue/no-v-html -->
+          <!-- eslint-enable vue/no-v-text-v-html-on-component -->
+          <preview id="theme-preview-stock" />
+          <h4 class="theme-name">
+            {{ $t('settings.style.stock_theme_used') }}
+            <span class="alert neutral version">v3</span>
+          </h4>
+        </button>
+        <button
+          v-if="isCustomThemeUsed"
+          disabled
+          class="button-default theme-preview toggled"
+        >
+          <preview />
+          <h4 class="theme-name">
+            {{ $t('settings.style.custom_theme_used') }}
+            <span class="alert neutral version">v2</span>
+          </h4>
+        </button>
+        <button
+          v-if="isCustomStyleUsed"
+          disabled
+          class="button-default theme-preview toggled"
+        >
+          <preview />
+          <h4 class="theme-name">
+            {{ $t('settings.style.custom_style_used') }}
+            <span class="alert neutral version">v3</span>
+          </h4>
+        </button>
+        <button
+          v-for="style in availableStyles"
+          :key="style.key"
+          :data-theme-key="style.key"
+          class="button-default theme-preview"
+          :class="{ toggled: isThemeActive(style.key), disabled: switchInProgress }"
+          :disabled="switchInProgress"
+          @click="style.version === 'v2' ? setTheme(style.key) : setStyle(style.key)"
+        >
+          <!-- eslint-disable vue/no-v-text-v-html-on-component -->
+          <!-- eslint-disable vue/no-v-html -->
+          <div v-if="style.ready || noIntersectionObserver">
+            <component
+              :is="'style'"
+              v-html="previewTheme(style.key, style.version, style.data)"
+            />
+          </div>
+          <!-- eslint-enable vue/no-v-html -->
+          <!-- eslint-enable vue/no-v-text-v-html-on-component -->
+          <preview :id="'theme-preview-' + style.key" />
+          <h4 class="theme-name">
+            {{ style.name }}
+            <span class="alert neutral version">{{ style.version }}</span>
+          </h4>
+        </button>
+      </ul>
+      <div class="import-file-container">
+        <button
+          class="btn button-default"
+          :class="{ disabled: switchInProgress }"
+          :disabled="switchInProgress"
+          @click="importFile"
+        >
+          <FAIcon icon="folder-open" />
+          {{ $t('settings.style.themes3.editor.load_style') }}
+        </button>
+      </div>
+      <div class="setting-item">
+        <h2>{{ $t('settings.style.themes3.palette.label') }}</h2>
+        <div
+          v-if="customThemeVersion === 'v3'"
+          class="palettes-container"
+        >
+          <h4 v-if="stylePalettes?.length > 0">
+            {{ $t('settings.style.themes3.palette.style') }}
+          </h4>
+          <div class="palettes">
+            <button
+              v-for="p in stylePalettes || []"
+              :key="p.name"
+              class="btn button-default palette-entry"
+              :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
+              :disabled="switchInProgress"
+              @click="() => setPalette(p.key, p)"
+            >
+              <div class="palette-label">
+                <label>
+                  {{ p.name ?? $t('settings.style.themes3.palette.user') }}
+                </label>
+              </div>
+              <div class="palette-preview">
+                <span
+                  v-for="c in palettesKeys"
+                  :key="c"
+                  class="palette-square"
+                  :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+                />
+              </div>
+            </button>
+            <h4>{{ $t('settings.style.themes3.palette.bundled') }}</h4>
+            <button
+              v-for="p in bundledPalettes"
+              :key="p.name"
+              class="btn button-default palette-entry"
+              :class="{ toggled: isPaletteActive(p.key), disabled: switchInProgress }"
+              :disabled="switchInProgress"
+              @click="() => setPalette(p.key, p)"
+            >
+              <div class="palette-label">
+                <label>
+                  {{ p.name }}
+                </label>
+              </div>
+              <div class="palette-preview">
+                <span
+                  v-for="c in palettesKeys"
+                  :key="c"
+                  class="palette-square"
+                  :style="{ backgroundColor: p[c], border: '1px solid ' + (p[c] ?? 'var(--text)') }"
+                />
+              </div>
+            </button>
+          </div>
+        </div>
+        <div>
+          <template v-if="customThemeVersion === 'v3'">
+            <h4 v-if="expertLevel > 0">
+              {{ $t('settings.style.themes3.palette.user') }}
+            </h4>
+            <PaletteEditor
+              v-if="expertLevel > 0"
+              v-model="userPalette"
+              class="userPalette"
+              :compact="true"
+              :apply="true"
+              :disabled="switchInProgress"
+              @applyPalette="data => setPaletteCustom(data)"
+            />
+          </template>
+          <template v-else-if="customThemeVersion === 'v2'">
+            <div class="alert neutral theme-notice unsupported-theme-v2">
+              {{ $t('settings.style.themes3.palette.v2_unsupported') }}
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.scale_and_layout') }}</h2>
+      <div class="alert neutral theme-notice">
+        {{ $t("settings.style.appearance_tab_note") }}
+      </div>
+      <ul class="setting-list">
+        <li>
+          <UnitSetting
+            path="textSize"
+            :step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 14, 'rem': 1 }"
+            timed-apply-mode
+          >
+            {{ $t('settings.text_size') }}
+          </UnitSetting>
+          <div>
+            <small>
+              <i18n-t
+                scope="global"
+                keypath="settings.text_size_tip"
+                tag="span"
+              >
+                <code>px</code>
+                <code>rem</code>
+              </i18n-t>
+              <br>
+              <i18n-t
+                scope="global"
+                keypath="settings.text_size_tip2"
+                tag="span"
+              >
+                <code>14px</code>
+              </i18n-t>
+            </small>
+          </div>
+        </li>
+        <li>
+          <UnitSetting
+            path="emojiSize"
+            :step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 32, 'rem': 2.2 }"
+          >
+            {{ $t('settings.emoji_size') }}
+          </UnitSetting>
+          <ul
+            class="setting-list suboptions"
+          >
+            <li>
+              <FloatSetting
+                v-if="user"
+                path="emojiReactionsScale"
+                expert="1"
+              >
+                {{ $t('settings.emoji_reactions_scale') }}
+              </FloatSetting>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <UnitSetting
+            path="navbarSize"
+            :step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 55, 'rem': 3.5 }"
+          >
+            {{ $t('settings.navbar_size') }}
+          </UnitSetting>
+        </li>
+        <h3>{{ $t('settings.style.interface_font_user_override') }}</h3>
+        <li>
+          <FontControl
+            :model-value="mergedConfig.theme3hacks.fonts.interface"
+            name="ui"
+            :label="$t('settings.style.fonts.components.interface')"
+            :fallback="{ family: 'sans-serif' }"
+            no-inherit="1"
+            @update:modelValue="v => updateFont('interface', v)"
+          />
+        </li>
+        <li>
+          <FontControl
+            v-if="expertLevel > 0"
+            :model-value="mergedConfig.theme3hacks.fonts.input"
+            name="input"
+            :fallback="{ family: 'inherit' }"
+            :label="$t('settings.style.fonts.components.input')"
+            @update:modelValue="v => updateFont('input', v)"
+          />
+        </li>
+        <li>
+          <FontControl
+            v-if="expertLevel > 0"
+            :model-value="mergedConfig.theme3hacks.fonts.post"
+            name="post"
+            :fallback="{ family: 'inherit' }"
+            :label="$t('settings.style.fonts.components.post')"
+            @update:modelValue="v => updateFont('post', v)"
+          />
+        </li>
+        <li>
+          <FontControl
+            v-if="expertLevel > 0"
+            :model-value="mergedConfig.theme3hacks.fonts.monospace"
+            name="postCode"
+            :fallback="{ family: 'monospace' }"
+            :label="$t('settings.style.fonts.components.monospace')"
+            @update:modelValue="v => updateFont('monospace', v)"
+          />
+        </li>
+        <h3>{{ $t('settings.columns') }}</h3>
+        <li>
+          <UnitSetting
+            path="panelHeaderSize"
+            :step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 52, 'rem': 3.2 }"
+            timed-apply-mode
+          >
+            {{ $t('settings.panel_header_size') }}
+          </UnitSetting>
+        </li>
+        <li>
+          <BooleanSetting path="sidebarRight">
+            {{ $t('settings.right_sidebar') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="navbarColumnStretch">
+            {{ $t('settings.navbar_column_stretch') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <ChoiceSetting
+            v-if="user"
+            id="thirdColumnMode"
+            path="thirdColumnMode"
+            :options="thirdColumnModeOptions"
+          >
+            {{ $t('settings.third_column_mode') }}
+          </ChoiceSetting>
+        </li>
+        <li v-if="expertLevel > 0">
+          {{ $t('settings.column_sizes') }}
+          <div class="column-settings">
+            <UnitSetting
+              v-for="column in columns"
+              :key="column"
+              :path="column + 'ColumnWidth'"
+              :units="horizontalUnits"
+              expert="1"
+            >
+              {{ $t('settings.column_sizes_' + column) }}
+            </UnitSetting>
+          </div>
+        </li>
+        <li>
+          <BooleanSetting path="disableStickyHeaders">
+            {{ $t('settings.disable_sticky_headers') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="showScrollbars">
+            {{ $t('settings.show_scrollbars') }}
+          </BooleanSetting>
+        </li>
+      </ul>
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.visual_tweaks') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path="modalMobileCenter">
+            {{ $t('settings.mobile_center_dialog') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <ChoiceSetting
+            id="forcedRoundness"
+            path="forcedRoundness"
+            :options="forcedRoundnessOptions"
+          >
+            {{ $t('settings.style.themes3.hacks.force_interface_roundness') }}
+          </ChoiceSetting>
+        </li>
+        <li>
+          <ChoiceSetting
+            id="underlayOverride"
+            path="theme3hacks.underlay"
+            :options="underlayOverrideModes"
+          >
+            {{ $t('settings.style.themes3.hacks.underlay_overrides') }}
+          </ChoiceSetting>
+        </li>
+        <li v-if="instanceWallpaperUsed">
+          <BooleanSetting path="hideInstanceWallpaper">
+            {{ $t('settings.hide_wallpaper') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="forceThemeRecompilation"
+            :expert="1"
+          >
+            {{ $t('settings.force_theme_recompilation_debug') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="themeDebug"
+            :expert="1"
+          >
+            {{ $t('settings.theme_debug') }}
+          </BooleanSetting>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./appearance_tab.js"></script>
+
+<style lang="scss" src="./appearance_tab.scss"></style>

src/components/settings_modal/tabs/data_import_export_tab.vue

@@ -80,7 +80,7 @@
               <span
                 v-else-if="backup.state === 'running'"
               >
-                {{ $tc('settings.backup_running', backup.processed_number, { number: backup.processed_number }) }}
+                {{ $t('settings.backup_running', { number: backup.processed_number }, backup.processed_number) }}
               </span>
               <span
                 v-else-if="backup.state === 'failed'"

src/components/settings_modal/tabs/filtering_tab.js

@@ -1,6 +1,7 @@
 import { filter, trim, debounce } from 'lodash'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
+import UnitSetting from '../helpers/unit_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
@@ -19,6 +20,7 @@ const FilteringTab = {
   components: {
     BooleanSetting,
     ChoiceSetting,
+    UnitSetting,
     IntegerSetting
   },
   computed: {

src/components/settings_modal/tabs/filtering_tab.vue

@@ -7,13 +7,11 @@
           <BooleanSetting path="hideFilteredStatuses">
             {{ $t('settings.hide_filtered_statuses') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !streaming}]"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
-                :disabled="hideFilteredStatuses"
+                parent-path="hideFilteredStatuses"
+                :parent-invert="true"
                 path="hideWordFilteredPosts"
               >
                 {{ $t('settings.hide_wordfiltered_statuses') }}
@@ -22,7 +20,8 @@
             <li>
               <BooleanSetting
                 v-if="user"
-                :disabled="hideFilteredStatuses"
+                parent-path="hideFilteredStatuses"
+                :parent-invert="true"
                 path="hideMutedThreads"
               >
                 {{ $t('settings.hide_muted_threads') }}
@@ -31,7 +30,8 @@
             <li>
               <BooleanSetting
                 v-if="user"
-                :disabled="hideFilteredStatuses"
+                parent-path="hideFilteredStatuses"
+                :parent-invert="true"
                 path="hideMutedPosts"
               >
                 {{ $t('settings.hide_muted_posts') }}
@@ -44,6 +44,11 @@
             {{ $t('settings.mute_bot_posts') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="muteSensitiveStatuses">
+            {{ $t('settings.mute_sensitive_posts') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting path="hidePostStats">
             {{ $t('settings.hide_post_stats') }}
@@ -51,7 +56,7 @@
         </li>
         <li>
           <BooleanSetting path="hideBotIndication">
-            {{ $t('settings.hide_bot_indication') }}
+            {{ $t('settings.hide_actor_type_indication') }}
           </BooleanSetting>
         </li>
         <ChoiceSetting
@@ -67,7 +72,7 @@
           <textarea
             id="muteWords"
             v-model="muteWordsString"
-            class="resize-height"
+            class="input resize-height"
           />
           <div>{{ $t('settings.filtering_explanation') }}</div>
         </li>
@@ -91,6 +96,22 @@
             {{ $t('settings.hide_attachments_in_convo') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="hideScrobbles">
+            {{ $t('settings.hide_scrobbles') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <UnitSetting
+            key="hideScrobblesAfter"
+            path="hideScrobblesAfter"
+            :units="['m', 'h', 'd']"
+            unit-set="time"
+            expert="1"
+          >
+            {{ $t('settings.hide_scrobbles_after') }}
+          </UnitSetting>
+        </li>
       </ul>
     </div>
     <div

src/components/settings_modal/tabs/general_tab.js

@@ -3,11 +3,11 @@ import ChoiceSetting from '../helpers/choice_setting.vue'
 import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
-import SizeSetting, { defaultHorizontalUnits } from '../helpers/size_setting.vue'
+import UnitSetting from '../helpers/unit_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
-import ServerSideIndicator from '../helpers/server_side_indicator.vue'
+import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faGlobe
@@ -30,6 +30,11 @@ const GeneralTab = {
         value: mode,
         label: this.$t(`settings.conversation_display_${mode}`)
       })),
+      absoluteTime12hOptions: ['24h', '12h'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.absolute_time_format_12h_${mode}`)
+      })),
       conversationOtherRepliesButtonOptions: ['below', 'inside'].map(mode => ({
         key: mode,
         value: mode,
@@ -40,16 +45,16 @@ const GeneralTab = {
         value: mode,
         label: this.$t(`settings.mention_link_display_${mode}`)
       })),
-      thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
-        key: mode,
-        value: mode,
-        label: this.$t(`settings.third_column_mode_${mode}`)
-      })),
       userPopoverAvatarActionOptions: ['close', 'zoom', 'open'].map(mode => ({
         key: mode,
         value: mode,
         label: this.$t(`settings.user_popover_avatar_action_${mode}`)
       })),
+      unsavedPostActionOptions: ['save', 'discard', 'confirm'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.unsaved_post_action_${mode}`)
+      })),
       loopSilentAvailable:
       // Firefox
       Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
@@ -64,15 +69,12 @@ const GeneralTab = {
     ChoiceSetting,
     IntegerSetting,
     FloatSetting,
-    SizeSetting,
+    UnitSetting,
     InterfaceLanguageSwitcher,
     ScopeSelector,
-    ServerSideIndicator
+    ProfileSettingIndicator
   },
   computed: {
-    horizontalUnits () {
-      return defaultHorizontalUnits
-    },
     postFormats () {
       return this.$store.state.instance.postFormats || []
     },
@@ -83,34 +85,19 @@ const GeneralTab = {
         label: this.$t(`post_status.content_type["${format}"]`)
       }))
     },
-    columns () {
-      const mode = this.$store.getters.mergedConfig.thirdColumnMode
-
-      const notif = mode === 'none' ? [] : ['notifs']
-
-      if (this.$store.getters.mergedConfig.sidebarRight || mode === 'postform') {
-        return [...notif, 'content', 'sidebar']
-      } else {
-        return ['sidebar', 'content', ...notif]
-      }
-    },
-    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
-    instanceWallpaperUsed () {
-      return this.$store.state.instance.background &&
-        !this.$store.state.users.currentUser.background_image
-    },
-    instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
     language: {
       get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
       set: function (val) {
         this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
       }
     },
+    instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
+    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
     ...SharedComputedObject()
   },
   methods: {
     changeDefaultScope (value) {
-      this.$store.dispatch('setServerSideOption', { name: 'defaultScope', value })
+      this.$store.dispatch('setProfileOption', { name: 'defaultScope', value })
     }
   }
 }

src/components/settings_modal/tabs/general_tab.vue

@@ -15,11 +15,6 @@
             {{ $t('settings.hide_isp') }}
           </BooleanSetting>
         </li>
-        <li v-if="instanceWallpaperUsed">
-          <BooleanSetting path="hideInstanceWallpaper">
-            {{ $t('settings.hide_wallpaper') }}
-          </BooleanSetting>
-        </li>
         <li>
           <BooleanSetting path="stopGifs">
             {{ $t('settings.stop_gifs') }}
@@ -29,14 +24,11 @@
           <BooleanSetting path="streaming">
             {{ $t('settings.streaming') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !streaming}]"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
                 path="pauseOnUnfocused"
-                :disabled="!streaming"
+                parent-path="streaming"
               >
                 {{ $t('settings.pause_on_unfocused') }}
               </BooleanSetting>
@@ -101,53 +93,6 @@
             {{ $t('settings.hide_shoutbox') }}
           </BooleanSetting>
         </li>
-        <li>
-          <h3>{{ $t('settings.columns') }}</h3>
-        </li>
-        <li>
-          <BooleanSetting path="disableStickyHeaders">
-            {{ $t('settings.disable_sticky_headers') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="showScrollbars">
-            {{ $t('settings.show_scrollbars') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="sidebarRight">
-            {{ $t('settings.right_sidebar') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="navbarColumnStretch">
-            {{ $t('settings.navbar_column_stretch') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <ChoiceSetting
-            v-if="user"
-            id="thirdColumnMode"
-            path="thirdColumnMode"
-            :options="thirdColumnModeOptions"
-          >
-            {{ $t('settings.third_column_mode') }}
-          </ChoiceSetting>
-        </li>
-        <li v-if="expertLevel > 0">
-          {{ $t('settings.column_sizes') }}
-          <div class="column-settings">
-            <SizeSetting
-              v-for="column in columns"
-              :key="column"
-              :path="column + 'ColumnWidth'"
-              :units="horizontalUnits"
-              expert="1"
-            >
-              {{ $t('settings.column_sizes_' + column) }}
-            </SizeSetting>
-          </div>
-        </li>
         <li class="select-multiple">
           <span class="label">{{ $t('settings.confirm_dialogs') }}</span>
           <ul class="option-list">
@@ -171,6 +116,16 @@
                 {{ $t('settings.confirm_dialogs_mute') }}
               </BooleanSetting>
             </li>
+            <li>
+              <BooleanSetting path="modalOnMuteConversation">
+                {{ $t('settings.confirm_dialogs_mute_conversation') }}
+              </BooleanSetting>
+            </li>
+            <li>
+              <BooleanSetting path="modalOnMuteDomain">
+                {{ $t('settings.confirm_dialogs_mute_domain') }}
+              </BooleanSetting>
+            </li>
             <li>
               <BooleanSetting path="modalOnDelete">
                 {{ $t('settings.confirm_dialogs_delete') }}
@@ -213,7 +168,7 @@
           </ChoiceSetting>
         </li>
         <ul
-          v-if="conversationDisplay !== 'linear'"
+          v-if="mergedConfig.conversationDisplay !== 'linear'"
           class="setting-list suboptions"
         >
           <li>
@@ -265,22 +220,55 @@
         <li>
           <BooleanSetting
             v-if="user"
-            path="serverSide_stripRichContent"
+            source="profile"
+            path="stripRichContent"
             expert="1"
           >
             {{ $t('settings.no_rich_text_description') }}
           </BooleanSetting>
         </li>
         <li>
-          <FloatSetting
-            v-if="user"
-            path="emojiReactionsScale"
+          <BooleanSetting
+            path="useAbsoluteTimeFormat"
             expert="1"
           >
-            {{ $t('settings.emoji_reactions_scale') }}
-          </FloatSetting>
+            {{ $t('settings.absolute_time_format') }}
+          </BooleanSetting>
         </li>
+        <ul
+          v-if="mergedConfig.useAbsoluteTimeFormat"
+          class="setting-list suboptions"
+        >
+          <li>
+            <UnitSetting
+              path="absoluteTimeFormatMinAge"
+              unit-set="time"
+              :units="['s', 'm', 'h', 'd']"
+              :min="0"
+            >
+              {{ $t('settings.absolute_time_format_min_age') }}
+            </UnitSetting>
+          </li>
+          <li>
+            <ChoiceSetting
+              id="absoluteTime12h"
+              path="absoluteTime12h"
+              :options="absoluteTime12hOptions"
+              :expert="1"
+            >
+              {{ $t('settings.absolute_time_format_12h') }}
+            </ChoiceSetting>
+          </li>
+        </ul>
         <h3>{{ $t('settings.attachments') }}</h3>
+        <li>
+          <BooleanSetting
+            path="imageCompression"
+            expert="1"
+          >
+            {{ $t('settings.image_compression') }}
+          </BooleanSetting>
+        </li>
         <li>
           <BooleanSetting
             path="useContainFit"
@@ -299,7 +287,7 @@
             <BooleanSetting
               path="preloadImage"
               expert="1"
-              :disabled="!hideNsfw"
+              parent-path="hideNsfw"
             >
               {{ $t('settings.preload_images') }}
             </BooleanSetting>
@@ -308,7 +296,7 @@
             <BooleanSetting
               path="useOneClickNsfw"
               expert="1"
-              :disabled="!hideNsfw"
+              parent-path="hideNsfw"
             >
               {{ $t('settings.use_one_click_nsfw') }}
             </BooleanSetting>
@@ -321,15 +309,13 @@
           >
             {{ $t('settings.loop_video') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !streaming}]"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
                 path="loopVideoSilentOnly"
                 expert="1"
-                :disabled="!loopVideo || !loopSilentAvailable"
+                parent-path="loopVideo"
+                :disabled="!loopSilentAvailable"
               >
                 {{ $t('settings.loop_video_silent_only') }}
               </BooleanSetting>
@@ -427,18 +413,18 @@
       <ul class="setting-list">
         <li>
           <label for="default-vis">
-            {{ $t('settings.default_vis') }} <ServerSideIndicator :server-side="true" />
+            {{ $t('settings.default_vis') }} <ProfileSettingIndicator :is-profile="true" />
             <ScopeSelector
               class="scope-selector"
               :show-all="true"
-              :user-default="serverSide_defaultScope"
-              :initial-scope="serverSide_defaultScope"
+              :user-default="$store.state.profileConfig.defaultScope"
+              :initial-scope="$store.state.profileConfig.defaultScope"
               :on-scope-change="changeDefaultScope"
             />
           </label>
         </li>
         <li>
-          <!-- <BooleanSetting path="serverSide_defaultNSFW"> -->
+          <!-- <BooleanSetting source="profile" path="defaultNSFW"> -->
           <BooleanSetting path="sensitiveByDefault">
             {{ $t('settings.sensitive_by_default') }}
           </BooleanSetting>
@@ -486,22 +472,6 @@
             {{ $t('settings.minimal_scopes_mode') }}
           </BooleanSetting>
         </li>
-        <li>
-          <BooleanSetting
-            path="alwaysShowNewPostButton"
-            expert="1"
-          >
-            {{ $t('settings.always_show_post_button') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting
-            path="autohideFloatingPostButton"
-            expert="1"
-          >
-            {{ $t('settings.autohide_floating_post_button') }}
-          </BooleanSetting>
-        </li>
         <li>
           <BooleanSetting
             path="padEmoji"
@@ -518,23 +488,25 @@
             {{ $t('settings.autocomplete_select_first') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting
+            path="autoSaveDraft"
+          >
+            {{ $t('settings.auto_save_draft') }}
+          </BooleanSetting>
+        </li>
+        <li v-if="!mergedConfig.autoSaveDraft">
+          <ChoiceSetting
+            id="unsavedPostAction"
+            path="unsavedPostAction"
+            :options="unsavedPostActionOptions"
+          >
+            {{ $t('settings.unsaved_post_action') }}
+          </ChoiceSetting>
+        </li>
       </ul>
     </div>
   </div>
 </template>
 
 <script src="./general_tab.js"></script>
-
-<style lang="scss">
-.column-settings {
-  display: flex;
-  justify-content: space-evenly;
-  flex-wrap: wrap;
-}
-
-.column-settings .size-label {
-  display: block;
-  margin-bottom: 0.5em;
-  margin-top: 0.5em;
-}
-</style>

src/components/settings_modal/tabs/mutes_and_blocks_tab.js

@@ -9,17 +9,20 @@ import DomainMuteCard from 'src/components/domain_mute_card/domain_mute_card.vue
 import SelectableList from 'src/components/selectable_list/selectable_list.vue'
 import ProgressButton from 'src/components/progress_button/progress_button.vue'
 import withSubscription from 'src/components/../hocs/with_subscription/with_subscription'
+import withLoadMore from 'src/components/../hocs/with_load_more/with_load_more'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 
-const BlockList = withSubscription({
+const BlockList = withLoadMore({
   fetch: (props, $store) => $store.dispatch('fetchBlocks'),
   select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []),
+  destroy: () => {},
   childPropName: 'items'
 })(SelectableList)
 
-const MuteList = withSubscription({
+const MuteList = withLoadMore({
   fetch: (props, $store) => $store.dispatch('fetchMutes'),
   select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []),
+  destroy: () => {},
   childPropName: 'items'
 })(SelectableList)
 

src/components/settings_modal/tabs/notifications_tab.js

@@ -16,6 +16,10 @@ const NotificationsTab = {
     user () {
       return this.$store.state.users.currentUser
     },
+    canReceiveReports () {
+      if (!this.user) { return false }
+      return this.user.privileges.includes('reports_manage_reports')
+    },
     ...SharedComputedObject()
   },
   methods: {

src/components/settings_modal/tabs/notifications_tab.vue

@@ -1,49 +1,239 @@
 <template>
   <div :label="$t('settings.notifications')">
+    <div class="setting-item">
+      <h2>{{ $t('settings.notification_setting_annoyance') }}</h2>
+      <ul class="setting-list">
+        <li>
+          <BooleanSetting path="closingDrawerMarksAsSeen">
+            {{ $t('settings.notification_setting_drawer_marks_as_seen') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="ignoreInactionableSeen">
+            {{ $t('settings.notification_setting_ignore_inactionable_seen') }}
+          </BooleanSetting>
+          <div>
+            <small>
+              {{ $t('settings.notification_setting_ignore_inactionable_seen_tip') }}
+            </small>
+          </div>
+        </li>
+        <li>
+          <BooleanSetting
+            path="unseenAtTop"
+            expert="1"
+          >
+            {{ $t('settings.notification_setting_unseen_at_top') }}
+          </BooleanSetting>
+        </li>
+      </ul>
+    </div>
     <div class="setting-item">
       <h2>{{ $t('settings.notification_setting_filters') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path="serverSide_blockNotificationsFromStrangers">
+          <BooleanSetting
+            source="profile"
+            path="blockNotificationsFromStrangers"
+          >
             {{ $t('settings.notification_setting_block_from_strangers') }}
           </BooleanSetting>
         </li>
-        <li class="select-multiple">
-          <span class="label">{{ $t('settings.notification_visibility') }}</span>
-          <ul class="option-list">
+        <li>
+          <h3> {{ $t('settings.notification_visibility') }}</h3>
+          <p v-if="expertLevel > 0">
+            {{ $t('settings.notification_setting_filters_chrome_push') }}
+          </p>
+          <ul class="setting-list two-column">
             <li>
-              <BooleanSetting path="notificationVisibility.likes">
-                {{ $t('settings.notification_visibility_likes') }}
+              <h4> {{ $t('settings.notification_visibility_mentions') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.mentions">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.mentions">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4> {{ $t('settings.notification_visibility_statuses') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.statuses">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.statuses">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4> {{ $t('settings.notification_visibility_likes') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.likes">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.likes">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4> {{ $t('settings.notification_visibility_repeats') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.repeats">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.repeats">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4> {{ $t('settings.notification_visibility_emoji_reactions') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.emojiReactions">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.emojiReactions">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4> {{ $t('settings.notification_visibility_follows') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.follows">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.follows">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4> {{ $t('settings.notification_visibility_follow_requests') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.followRequest">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.followRequest">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4> {{ $t('settings.notification_visibility_moves') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.moves">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.moves">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
+            <li>
+              <h4> {{ $t('settings.notification_visibility_polls') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.polls">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.polls">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
+            <li v-if="canReceiveReports">
+              <h4> {{ $t('settings.notification_visibility_reports') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.reports">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.reports">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <BooleanSetting path="showExtraNotifications">
+            {{ $t('settings.notification_show_extra') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <ul class="setting-list suboptions">
+            <li>
+              <BooleanSetting
+                path="showChatsInExtraNotifications"
+                :disabled="!mergedConfig.showExtraNotifications"
+              >
+                {{ $t('settings.notification_extra_chats') }}
               </BooleanSetting>
             </li>
             <li>
-              <BooleanSetting path="notificationVisibility.repeats">
-                {{ $t('settings.notification_visibility_repeats') }}
+              <BooleanSetting
+                path="showAnnouncementsInExtraNotifications"
+                :disabled="!mergedConfig.showExtraNotifications"
+              >
+                {{ $t('settings.notification_extra_announcements') }}
               </BooleanSetting>
             </li>
             <li>
-              <BooleanSetting path="notificationVisibility.follows">
-                {{ $t('settings.notification_visibility_follows') }}
+              <BooleanSetting
+                path="showFollowRequestsInExtraNotifications"
+                :disabled="!mergedConfig.showExtraNotifications"
+              >
+                {{ $t('settings.notification_extra_follow_requests') }}
               </BooleanSetting>
             </li>
             <li>
-              <BooleanSetting path="notificationVisibility.mentions">
-                {{ $t('settings.notification_visibility_mentions') }}
-              </BooleanSetting>
-            </li>
-            <li>
-              <BooleanSetting path="notificationVisibility.moves">
-                {{ $t('settings.notification_visibility_moves') }}
-              </BooleanSetting>
-            </li>
-            <li>
-              <BooleanSetting path="notificationVisibility.emojiReactions">
-                {{ $t('settings.notification_visibility_emoji_reactions') }}
-              </BooleanSetting>
-            </li>
-            <li>
-              <BooleanSetting path="notificationVisibility.polls">
-                {{ $t('settings.notification_visibility_polls') }}
+              <BooleanSetting
+                path="showExtraNotificationsTip"
+                :disabled="!mergedConfig.showExtraNotifications"
+              >
+                {{ $t('settings.notification_extra_tip') }}
               </BooleanSetting>
             </li>
           </ul>
@@ -64,10 +254,26 @@
           >
             {{ $t('settings.enable_web_push_notifications') }}
           </BooleanSetting>
+          <ul class="setting-list suboptions">
+            <li>
+              <BooleanSetting
+                path="webPushAlwaysShowNotifications"
+                :disabled="!mergedConfig.webPushNotifications"
+              >
+                {{ $t('settings.enable_web_push_always_show') }}
+              </BooleanSetting>
+              <div :class="{ faint: !mergedConfig.webPushNotifications }">
+                <small>
+                  {{ $t('settings.enable_web_push_always_show_tip') }}
+                </small>
+              </div>
+            </li>
+          </ul>
         </li>
         <li>
           <BooleanSetting
-            path="serverSide_webPushHideContents"
+            source="profile"
+            path="webPushHideContents"
             expert="1"
           >
             {{ $t('settings.notification_setting_hide_notification_contents') }}

src/components/settings_modal/tabs/profile_tab.js

@@ -9,6 +9,7 @@ import suggestor from 'src/components/emoji_input/suggestor.js'
 import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
+import Select from 'src/components/select/select.vue'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import localeService from 'src/services/locale/locale.service.js'
@@ -40,6 +41,7 @@ const ProfileTab = {
       showRole: this.$store.state.users.currentUser.show_role,
       role: this.$store.state.users.currentUser.role,
       bot: this.$store.state.users.currentUser.bot,
+      actorType: this.$store.state.users.currentUser.actor_type,
       pickAvatarBtnVisible: true,
       bannerUploading: false,
       backgroundUploading: false,
@@ -58,7 +60,8 @@ const ProfileTab = {
     ProgressButton,
     Checkbox,
     BooleanSetting,
-    InterfaceLanguageSwitcher
+    InterfaceLanguageSwitcher,
+    Select
   },
   computed: {
     user () {
@@ -117,6 +120,12 @@ const ProfileTab = {
     bannerImgSrc () {
       const src = this.$store.state.users.currentUser.cover_photo
       return (!src) ? this.defaultBanner : src
+    },
+    groupActorAvailable () {
+      return this.$store.state.instance.groupActorAvailable
+    },
+    availableActorTypes () {
+      return this.groupActorAvailable ? ['Person', 'Service', 'Group'] : ['Person', 'Service']
     }
   },
   methods: {
@@ -128,7 +137,7 @@ const ProfileTab = {
         /* eslint-disable camelcase */
         display_name: this.newName,
         fields_attributes: this.newFields.filter(el => el != null),
-        bot: this.bot,
+        actor_type: this.actorType,
         show_role: this.showRole,
         birthday: this.newBirthday || '',
         show_birthday: this.showBirthday

src/components/settings_modal/tabs/profile_tab.scss

@@ -1,5 +1,3 @@
-@import "../../../variables";
-
 .profile-tab {
   .bio {
     margin: 0;
@@ -43,16 +41,14 @@
     display: block;
     width: 100%;
     height: 100%;
-    border-radius: $fallback--avatarRadius;
-    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+    border-radius: var(--roundness);
   }
 
   .reset-button {
     position: absolute;
     top: 0.2em;
     right: 0.2em;
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    border-radius: var(--roundness);
     background-color: rgb(0 0 0 / 60%);
     opacity: 0.7;
     width: 1.5em;

src/components/settings_modal/tabs/profile_tab.vue

@@ -12,7 +12,7 @@
           <input
             id="username"
             v-model="newName"
-            class="name-changer"
+            class="input name-changer"
             v-bind="propsToNative(inputProps)"
           >
         </template>
@@ -26,7 +26,7 @@
         <template #default="inputProps">
           <textarea
             v-model="newBio"
-            class="bio resize-height"
+            class="input bio resize-height"
             v-bind="propsToNative(inputProps)"
           />
         </template>
@@ -47,7 +47,7 @@
           id="birthday"
           v-model="newBirthday"
           type="date"
-          class="birthday-input"
+          class="input birthday-input"
         >
         <Checkbox v-model="showBirthday">
           {{ $t('settings.birthday.show_birthday') }}
@@ -71,6 +71,7 @@
                 v-model="newFields[i].name"
                 :placeholder="$t('settings.profile_fields.name')"
                 v-bind="propsToNative(inputProps)"
+                class="input"
               >
             </template>
           </EmojiInput>
@@ -85,6 +86,7 @@
                 v-model="newFields[i].value"
                 :placeholder="$t('settings.profile_fields.value')"
                 v-bind="propsToNative(inputProps)"
+                class="input"
               >
             </template>
           </EmojiInput>
@@ -109,10 +111,24 @@
         </button>
       </div>
       <p>
-        <Checkbox v-model="bot">
-          {{ $t('settings.bot') }}
-        </Checkbox>
+        <label>
+          {{ $t('settings.actor_type') }}
+          <Select v-model="actorType">
+            <option
+              v-for="option in availableActorTypes"
+              :key="option"
+              :value="option"
+            >
+              {{ $t('settings.actor_type_' + option) }}
+            </option>
+          </Select>
+        </label>
       </p>
+      <div v-if="groupActorAvailable">
+        <small>
+          {{ $t('settings.actor_type_description') }}
+        </small>
+      </div>
       <p>
         <interface-language-switcher
           :prompt-text="$t('settings.email_language')"
@@ -191,6 +207,7 @@
       <div>
         <input
           type="file"
+          class="input"
           @change="uploadFile('banner', $event)"
         >
       </div>
@@ -233,6 +250,7 @@
       <div>
         <input
           type="file"
+          class="input"
           @change="uploadFile('background', $event)"
         >
       </div>
@@ -254,37 +272,50 @@
       <h2>{{ $t('settings.account_privacy') }}</h2>
       <ul class="setting-list">
         <li>
-          <BooleanSetting path="serverSide_locked">
+          <BooleanSetting
+            source="profile"
+            path="locked"
+          >
             {{ $t('settings.lock_account_description') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="serverSide_discoverable">
+          <BooleanSetting
+            source="profile"
+            path="discoverable"
+          >
             {{ $t('settings.discoverable') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="serverSide_allowFollowingMove">
+          <BooleanSetting
+            source="profile"
+            path="allowFollowingMove"
+          >
             {{ $t('settings.allow_following_move') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="serverSide_hideFavorites">
+          <BooleanSetting
+            source="profile"
+            path="hideFavorites"
+          >
             {{ $t('settings.hide_favorites_description') }}
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="serverSide_hideFollowers">
+          <BooleanSetting
+            source="profile"
+            path="hideFollowers"
+          >
             {{ $t('settings.hide_followers_description') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !serverSide_hideFollowers}]"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
-                path="serverSide_hideFollowersCount"
-                :disabled="!serverSide_hideFollowers"
+                source="profile"
+                path="hideFollowersCount"
+                parent-path="hideFollowers"
               >
                 {{ $t('settings.hide_followers_count_description') }}
               </BooleanSetting>
@@ -292,17 +323,18 @@
           </ul>
         </li>
         <li>
-          <BooleanSetting path="serverSide_hideFollows">
+          <BooleanSetting
+            source="profile"
+            path="hideFollows"
+          >
             {{ $t('settings.hide_follows_description') }}
           </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !serverSide_hideFollows}]"
-          >
+          <ul class="setting-list suboptions">
             <li>
               <BooleanSetting
-                path="serverSide_hideFollowsCount"
-                :disabled="!serverSide_hideFollows"
+                source="profile"
+                path="hideFollowsCount"
+                parent-path="hideFollows"
               >
                 {{ $t('settings.hide_follows_count_description') }}
               </BooleanSetting>

src/components/settings_modal/tabs/security_tab/mfa.vue

@@ -99,12 +99,14 @@
                 <input
                   v-model="otpConfirmToken"
                   type="text"
+                  class="input"
                 >
 
                 <p>{{ $t('settings.enter_current_password_to_confirm') }}:</p>
                 <input
                   v-model="currentPassword"
                   type="password"
+                  class="input"
                 >
                 <div class="confirm-otp-actions">
                   <button
@@ -137,8 +139,6 @@
 
 <script src="./mfa.js"></script>
 <style lang="scss">
-@import "../../../../variables";
-
 .mfa-settings {
   .mfa-heading,
   .method-item {
@@ -149,8 +149,7 @@
   }
 
   .warning {
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
+    color: var(--cOrange);
   }
 
   .setup-otp {

src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue

@@ -21,16 +21,13 @@
 </template>
 <script src="./mfa_backup_codes.js"></script>
 <style lang="scss">
-@import "../../../../variables";
-
 .mfa-backup-codes {
   .warning {
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
+    color: var(--cOrange);
   }
 
   .backup-codes {
-    font-family: var(--postCodeFont, monospace);
+    font-family: var(--monoFont);
   }
 }
 </style>

src/components/settings_modal/tabs/security_tab/mfa_totp.vue

@@ -30,6 +30,7 @@
       <input
         v-model="currentPassword"
         type="password"
+        class="input"
       >
     </confirm>
     <div

src/components/settings_modal/tabs/security_tab/security_tab.vue

@@ -8,6 +8,7 @@
           v-model="newEmail"
           type="email"
           autocomplete="email"
+          class="input"
         >
       </div>
       <div>
@@ -16,6 +17,7 @@
           v-model="changeEmailPassword"
           type="password"
           autocomplete="current-password"
+          class="input"
         >
       </div>
       <button
@@ -40,6 +42,7 @@
         <input
           v-model="changePasswordInputs[0]"
           type="password"
+          class="input"
         >
       </div>
       <div>
@@ -47,6 +50,7 @@
         <input
           v-model="changePasswordInputs[1]"
           type="password"
+          class="input"
         >
       </div>
       <div>
@@ -54,6 +58,7 @@
         <input
           v-model="changePasswordInputs[2]"
           type="password"
+          class="input"
         >
       </div>
       <button
@@ -143,8 +148,9 @@
         />
       </div>
       <div>
-        <i18n
-          path="settings.new_alias_target"
+        <i18n-t
+          scope="global"
+          keypath="settings.new_alias_target"
           tag="p"
         >
           <code
@@ -152,9 +158,10 @@
           >
             foo@example.org
           </code>
-        </i18n>
+        </i18n-t>
         <input
           v-model="addAliasTarget"
+          class="input"
         >
       </div>
       <button
@@ -175,18 +182,20 @@
       <h2>{{ $t('settings.move_account') }}</h2>
       <p>{{ $t('settings.move_account_notes') }}</p>
       <div>
-        <i18n
-          path="settings.move_account_target"
+        <i18n-t
+          keypath="settings.move_account_target"
           tag="p"
+          scope="global"
         >
-          <code
-            place="example"
-          >
-            foo@example.org
-          </code>
-        </i18n>
+          <template #example>
+            <code>
+              foo@example.org
+            </code>
+          </template>
+        </i18n-t>
         <input
           v-model="moveAccountTarget"
+          class="input"
         >
       </div>
       <div>
@@ -195,6 +204,7 @@
           v-model="moveAccountPassword"
           type="password"
           autocomplete="current-password"
+          class="input"
         >
       </div>
       <button
@@ -222,6 +232,7 @@
         <input
           v-model="deleteAccountConfirmPasswordInput"
           type="password"
+          class="input"
         >
         <button
           class="btn button-default"

src/components/settings_modal/tabs/style_tab/style_tab.js

@@ -0,0 +1,835 @@
+import { ref, reactive, computed, watch, watchEffect, provide, getCurrentInstance } from 'vue'
+import { useStore } from 'vuex'
+import { get, set, unset, throttle } from 'lodash'
+
+import Select from 'src/components/select/select.vue'
+import SelectMotion from 'src/components/select/select_motion.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import ComponentPreview from 'src/components/component_preview/component_preview.vue'
+import StringSetting from '../../helpers/string_setting.vue'
+import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
+import ColorInput from 'src/components/color_input/color_input.vue'
+import PaletteEditor from 'src/components/palette_editor/palette_editor.vue'
+import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
+import RoundnessInput from 'src/components/roundness_input/roundness_input.vue'
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+import Tooltip from 'src/components/tooltip/tooltip.vue'
+import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
+import Preview from '../theme_tab/theme_preview.vue'
+
+import VirtualDirectivesTab from './virtual_directives_tab.vue'
+
+import { init, findColor } from 'src/services/theme_data/theme_data_3.service.js'
+import {
+  getCssRules,
+  getScopedVersion
+} from 'src/services/theme_data/css_utils.js'
+import { serialize } from 'src/services/theme_data/iss_serializer.js'
+import { deserializeShadow, deserialize } from 'src/services/theme_data/iss_deserializer.js'
+import {
+  rgb2hex,
+  hex2rgb,
+  getContrastRatio
+} from 'src/services/color_convert/color_convert.js'
+import {
+  newImporter,
+  newExporter
+} from 'src/services/export_import/export_import.js'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faFloppyDisk,
+  faFolderOpen,
+  faFile,
+  faArrowsRotate,
+  faCheck
+} from '@fortawesome/free-solid-svg-icons'
+
+// helper for debugging
+// eslint-disable-next-line no-unused-vars
+const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? 'null' : x))
+
+// helper to make states comparable
+const normalizeStates = (states) => ['normal', ...(states?.filter(x => x !== 'normal') || [])].join(':')
+
+library.add(
+  faFile,
+  faFloppyDisk,
+  faFolderOpen,
+  faArrowsRotate,
+  faCheck
+)
+
+export default {
+  components: {
+    Select,
+    SelectMotion,
+    Checkbox,
+    Tooltip,
+    StringSetting,
+    ComponentPreview,
+    TabSwitcher,
+    ShadowControl,
+    ColorInput,
+    PaletteEditor,
+    OpacityInput,
+    RoundnessInput,
+    ContrastRatio,
+    Preview,
+    VirtualDirectivesTab
+  },
+  setup (props, context) {
+    const exports = {}
+    const store = useStore()
+    // All rules that are made by editor
+    const allEditedRules = ref(store.state.interface.styleDataUsed || {})
+    const styleDataUsed = computed(() => store.state.interface.styleDataUsed)
+
+    watch([styleDataUsed], (value) => {
+      onImport(store.state.interface.styleDataUsed)
+    }, { once: true })
+
+    exports.isActive = computed(() => {
+      const tabSwitcher = getCurrentInstance().parent.ctx
+      return tabSwitcher ? tabSwitcher.isActive('style') : false
+    })
+
+    // ## Meta stuff
+    exports.name = ref('')
+    exports.author = ref('')
+    exports.license = ref('')
+    exports.website = ref('')
+
+    const metaOut = computed(() => {
+      return [
+        '@meta {',
+        `  name: ${exports.name.value};`,
+        `  author: ${exports.author.value};`,
+        `  license: ${exports.license.value};`,
+        `  website: ${exports.website.value};`,
+        '}'
+      ].join('\n')
+    })
+
+    const metaRule = computed(() => ({
+      component: '@meta',
+      directives: {
+        name: exports.name.value,
+        author: exports.author.value,
+        license: exports.license.value,
+        website: exports.website.value
+      }
+    }))
+
+    // ## Palette stuff
+    const palettes = reactive([
+      {
+        name: 'default',
+        bg: '#121a24',
+        fg: '#182230',
+        text: '#b9b9ba',
+        link: '#d8a070',
+        accent: '#d8a070',
+        cRed: '#FF0000',
+        cBlue: '#0095ff',
+        cGreen: '#0fa00f',
+        cOrange: '#ffa500'
+      },
+      {
+        name: 'light',
+        bg: '#f2f6f9',
+        fg: '#d6dfed',
+        text: '#304055',
+        underlay: '#5d6086',
+        accent: '#f55b1b',
+        cBlue: '#0095ff',
+        cRed: '#d31014',
+        cGreen: '#0fa00f',
+        cOrange: '#ffa500',
+        border: '#d8e6f9'
+      }
+    ])
+    exports.palettes = palettes
+
+    // This is kinda dumb but you cannot "replace" reactive() object
+    // and so v-model simply fails when you try to chage (increase only?)
+    // length of the array. Since linter complains about mutating modelValue
+    // inside SelectMotion, the next best thing is to just wipe existing array
+    // and replace it with new one.
+
+    const onPalettesUpdate = (e) => {
+      palettes.splice(0, palettes.length)
+      palettes.push(...e)
+    }
+    exports.onPalettesUpdate = onPalettesUpdate
+
+    const selectedPaletteId = ref(0)
+    const selectedPalette = computed({
+      get () {
+        return palettes[selectedPaletteId.value]
+      },
+      set (newPalette) {
+        palettes[selectedPaletteId.value] = newPalette
+      }
+    })
+    exports.selectedPaletteId = selectedPaletteId
+    exports.selectedPalette = selectedPalette
+    provide('selectedPalette', selectedPalette)
+
+    watch([selectedPalette], () => updateOverallPreview())
+
+    exports.getNewPalette = () => ({
+      name: 'new palette',
+      bg: '#121a24',
+      fg: '#182230',
+      text: '#b9b9ba',
+      link: '#d8a070',
+      accent: '#d8a070',
+      cRed: '#FF0000',
+      cBlue: '#0095ff',
+      cGreen: '#0fa00f',
+      cOrange: '#ffa500'
+    })
+
+    // Raw format
+    const palettesRule = computed(() => {
+      return palettes.map(palette => {
+        const { name, ...rest } = palette
+        return {
+          component: '@palette',
+          variant: name,
+          directives: Object
+            .entries(rest)
+            .filter(([k, v]) => v && k)
+            .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {})
+        }
+      })
+    })
+
+    // Text format
+    const palettesOut = computed(() => {
+      return palettes.map(({ name, ...palette }) => {
+        const entries = Object
+          .entries(palette)
+          .filter(([k, v]) => v && k)
+          .map(([slot, data]) => `  ${slot}: ${data};`)
+          .join('\n')
+
+        return `@palette.${name} {\n${entries}\n}`
+      }).join('\n\n')
+    })
+
+    // ## Components stuff
+    // Getting existing components
+    const componentsContext = require.context('src', true, /\.style.js(on)?$/)
+    const componentKeysAll = componentsContext.keys()
+    const componentsMap = new Map(
+      componentKeysAll
+        .map(
+          key => [key, componentsContext(key).default]
+        ).filter(([key, component]) => !component.virtual && !component.notEditable)
+    )
+    exports.componentsMap = componentsMap
+    const componentKeys = [...componentsMap.keys()]
+    exports.componentKeys = componentKeys
+
+    // Component list and selection
+    const selectedComponentKey = ref(componentsMap.keys().next().value)
+    exports.selectedComponentKey = selectedComponentKey
+
+    const selectedComponent = computed(() => componentsMap.get(selectedComponentKey.value))
+    const selectedComponentName = computed(() => selectedComponent.value.name)
+
+    // Selection basis
+    exports.selectedComponentVariants = computed(() => {
+      return Object.keys({ normal: null, ...(selectedComponent.value.variants || {}) })
+    })
+    exports.selectedComponentStates = computed(() => {
+      const all = Object.keys({ normal: null, ...(selectedComponent.value.states || {}) })
+      return all.filter(x => x !== 'normal')
+    })
+
+    // selection
+    const selectedVariant = ref('normal')
+    exports.selectedVariant = selectedVariant
+    const selectedState = reactive(new Set())
+    exports.selectedState = selectedState
+    exports.updateSelectedStates = (state, v) => {
+      if (v) {
+        selectedState.add(state)
+      } else {
+        selectedState.delete(state)
+      }
+    }
+
+    // Reset variant and state on component change
+    const updateSelectedComponent = () => {
+      selectedVariant.value = 'normal'
+      selectedState.clear()
+    }
+
+    watch(
+      selectedComponentName,
+      updateSelectedComponent
+    )
+
+    // ### Rules stuff aka meat and potatoes
+    // The native structure of separate rules and the child -> parent
+    // relation isn't very convenient for editor, we replace the array
+    // and child -> parent structure with map and parent -> child structure
+    const rulesToEditorFriendly = (rules, root = {}) => rules.reduce((acc, rule) => {
+      const { parent: rParent, component: rComponent } = rule
+      const parent = rParent ?? rule
+      const hasChildren = !!rParent
+      const child = hasChildren ? rule : null
+
+      const {
+        component: pComponent,
+        variant: pVariant = 'normal',
+        state: pState = [] // no relation to Intel CPUs whatsoever
+      } = parent
+
+      const pPath = `${hasChildren ? pComponent : rComponent}.${pVariant}.${normalizeStates(pState)}`
+
+      let output = get(acc, pPath)
+      if (!output) {
+        set(acc, pPath, {})
+        output = get(acc, pPath)
+      }
+
+      if (hasChildren) {
+        output._children = output._children ?? {}
+        const {
+          component: cComponent,
+          variant: cVariant = 'normal',
+          state: cState = [],
+          directives
+        } = child
+
+        const cPath = `${cComponent}.${cVariant}.${normalizeStates(cState)}`
+        set(output._children, cPath, { directives })
+      } else {
+        output.directives = parent.directives
+      }
+      return acc
+    }, root)
+
+    const editorFriendlyFallbackStructure = computed(() => {
+      const root = {}
+
+      componentKeys.forEach((componentKey) => {
+        const componentValue = componentsMap.get(componentKey)
+        const { defaultRules, name } = componentValue
+        rulesToEditorFriendly(
+          defaultRules.map((rule) => ({ ...rule, component: name })),
+          root
+        )
+      })
+
+      return root
+    })
+
+    // Checking whether component can support some "directives" which
+    // are actually virtual subcomponents, i.e. Text, Link etc
+    exports.componentHas = (subComponent) => {
+      return !!selectedComponent.value.validInnerComponents?.find(x => x === subComponent)
+    }
+
+    // Path for lodash's get and set
+    const getPath = (component, directive) => {
+      const pathSuffix = component ? `._children.${component}.normal.normal` : ''
+      const path = `${selectedComponentName.value}.${selectedVariant.value}.${normalizeStates([...selectedState])}${pathSuffix}.directives.${directive}`
+      return path
+    }
+
+    // Templates for directives
+    const isElementPresent = (component, directive, defaultValue = '') => computed({
+      get () {
+        return get(allEditedRules.value, getPath(component, directive)) != null
+      },
+      set (value) {
+        if (value) {
+          const fallback = get(
+            editorFriendlyFallbackStructure.value,
+            getPath(component, directive)
+          )
+          set(allEditedRules.value, getPath(component, directive), fallback ?? defaultValue)
+        } else {
+          unset(allEditedRules.value, getPath(component, directive))
+        }
+        exports.updateOverallPreview()
+      }
+    })
+
+    const getEditedElement = (component, directive, postProcess = x => x) => computed({
+      get () {
+        let usedRule
+        const fallback = editorFriendlyFallbackStructure.value
+        const real = allEditedRules.value
+        const path = getPath(component, directive)
+
+        usedRule = get(real, path) // get real
+        if (!usedRule) {
+          usedRule = get(fallback, path)
+        }
+
+        return postProcess(usedRule)
+      },
+      set (value) {
+        if (value) {
+          set(allEditedRules.value, getPath(component, directive), value)
+        } else {
+          unset(allEditedRules.value, getPath(component, directive))
+        }
+        exports.updateOverallPreview()
+      }
+    })
+
+    // All the editable stuff for the component
+    exports.editedBackgroundColor = getEditedElement(null, 'background')
+    exports.isBackgroundColorPresent = isElementPresent(null, 'background', '#FFFFFF')
+    exports.editedOpacity = getEditedElement(null, 'opacity')
+    exports.isOpacityPresent = isElementPresent(null, 'opacity', 1)
+    exports.editedRoundness = getEditedElement(null, 'roundness')
+    exports.isRoundnessPresent = isElementPresent(null, 'roundness', '0')
+    exports.editedTextColor = getEditedElement('Text', 'textColor')
+    exports.isTextColorPresent = isElementPresent('Text', 'textColor', '#000000')
+    exports.editedTextAuto = getEditedElement('Text', 'textAuto')
+    exports.isTextAutoPresent = isElementPresent('Text', 'textAuto', '#000000')
+    exports.editedLinkColor = getEditedElement('Link', 'textColor')
+    exports.isLinkColorPresent = isElementPresent('Link', 'textColor', '#000080')
+    exports.editedIconColor = getEditedElement('Icon', 'textColor')
+    exports.isIconColorPresent = isElementPresent('Icon', 'textColor', '#909090')
+    exports.editedBorderColor = getEditedElement('Border', 'textColor')
+    exports.isBorderColorPresent = isElementPresent('Border', 'textColor', '#909090')
+
+    const getContrast = (bg, text) => {
+      try {
+        const bgRgb = hex2rgb(bg)
+        const textRgb = hex2rgb(text)
+
+        const ratio = getContrastRatio(bgRgb, textRgb)
+        return {
+          // TODO this ideally should be part of <ContractRatio />
+          ratio,
+          text: ratio.toPrecision(3) + ':1',
+          // AA level, AAA level
+          aa: ratio >= 4.5,
+          aaa: ratio >= 7,
+          // same but for 18pt+ texts
+          laa: ratio >= 3,
+          laaa: ratio >= 4.5
+        }
+      } catch (e) {
+        console.warn('Failure computing contrast', e)
+        return { error: e }
+      }
+    }
+
+    const normalizeShadows = (shadows) => {
+      return shadows?.map(shadow => {
+        if (typeof shadow === 'object') {
+          return shadow
+        }
+        if (typeof shadow === 'string') {
+          try {
+            return deserializeShadow(shadow)
+          } catch (e) {
+            console.warn(e)
+            return shadow
+          }
+        }
+        return null
+      })
+    }
+    provide('normalizeShadows', normalizeShadows)
+
+    // Shadow is partially edited outside the ShadowControl
+    // for better space utilization
+    const editedShadow = getEditedElement(null, 'shadow', normalizeShadows)
+    exports.editedShadow = editedShadow
+    const editedSubShadowId = ref(null)
+    exports.editedSubShadowId = editedSubShadowId
+    const editedSubShadow = computed(() => {
+      if (editedShadow.value == null || editedSubShadowId.value == null) return null
+      return editedShadow.value[editedSubShadowId.value]
+    })
+    exports.editedSubShadow = editedSubShadow
+    exports.isShadowPresent = isElementPresent(null, 'shadow', [])
+    exports.onSubShadow = (id) => {
+      if (id != null) {
+        editedSubShadowId.value = id
+      } else {
+        editedSubShadow.value = null
+      }
+    }
+    exports.updateSubShadow = (axis, value) => {
+      if (!editedSubShadow.value || editedSubShadowId.value == null) return
+      const newEditedShadow = [...editedShadow.value]
+
+      newEditedShadow[editedSubShadowId.value] = {
+        ...newEditedShadow[editedSubShadowId.value],
+        [axis]: value
+      }
+
+      editedShadow.value = newEditedShadow
+    }
+    exports.isShadowTabOpen = ref(false)
+    exports.onTabSwitch = (tab) => {
+      exports.isShadowTabOpen.value = tab === 'shadow'
+    }
+
+    // component preview
+    exports.editorHintStyle = computed(() => {
+      const editorHint = selectedComponent.value.editor
+      const styles = []
+      if (editorHint && Object.keys(editorHint).length > 0) {
+        if (editorHint.aspect != null) {
+          styles.push(`aspect-ratio: ${editorHint.aspect} !important;`)
+        }
+        if (editorHint.border != null) {
+          styles.push(`border-width: ${editorHint.border}px !important;`)
+        }
+      }
+      return styles.join('; ')
+    })
+
+    const editorFriendlyToOriginal = computed(() => {
+      const resultRules = []
+
+      const convert = (component, data = {}, parent) => {
+        const variants = Object.entries(data || {})
+
+        variants.forEach(([variant, variantData]) => {
+          const states = Object.entries(variantData)
+
+          states.forEach(([jointState, stateData]) => {
+            const state = jointState.split(/:/g)
+            const result = {
+              component,
+              variant,
+              state,
+              directives: stateData.directives || {}
+            }
+
+            if (parent) {
+              result.parent = {
+                component: parent
+              }
+            }
+
+            resultRules.push(result)
+
+            // Currently we only support single depth for simplicity's sake
+            if (!parent) {
+              Object.entries(stateData._children || {}).forEach(([cName, child]) => convert(cName, child, component))
+            }
+          })
+        })
+      }
+
+      [...componentsMap.values()].forEach(({ name }) => {
+        convert(name, allEditedRules.value[name])
+      })
+
+      return resultRules
+    })
+
+    const allCustomVirtualDirectives = [...componentsMap.values()]
+      .map(c => {
+        return c
+          .defaultRules
+          .filter(c => c.component === 'Root')
+          .map(x => Object.entries(x.directives))
+          .flat()
+      })
+      .filter(x => x)
+      .flat()
+      .map(([name, value]) => {
+        const [valType, valVal] = value.split('|')
+        return {
+          name: name.substring(2),
+          valType: valType?.trim(),
+          value: valVal?.trim()
+        }
+      })
+
+    const virtualDirectives = ref(allCustomVirtualDirectives)
+    exports.virtualDirectives = virtualDirectives
+    exports.updateVirtualDirectives = (value) => {
+      virtualDirectives.value = value
+    }
+
+    // Raw format
+    const virtualDirectivesRule = computed(() => ({
+      component: 'Root',
+      directives: Object.fromEntries(
+        virtualDirectives.value.map(vd => [`--${vd.name}`, `${vd.valType} | ${vd.value}`])
+      )
+    }))
+
+    // Text format
+    const virtualDirectivesOut = computed(() => {
+      return [
+        'Root {',
+        ...virtualDirectives.value
+          .filter(vd => vd.name && vd.valType && vd.value)
+          .map(vd => `  --${vd.name}: ${vd.valType} | ${vd.value};`),
+        '}'
+      ].join('\n')
+    })
+
+    exports.computeColor = (color) => {
+      let computedColor
+      try {
+        computedColor = findColor(color, { dynamicVars: dynamicVars.value, staticVars: staticVars.value })
+        if (computedColor) {
+          return rgb2hex(computedColor)
+        }
+      } catch (e) {
+        console.warn(e)
+      }
+      return null
+    }
+    provide('computeColor', exports.computeColor)
+
+    exports.contrast = computed(() => {
+      return getContrast(
+        exports.computeColor(previewColors.value.background),
+        exports.computeColor(previewColors.value.text)
+      )
+    })
+
+    // ## Export and Import
+    const styleExporter = newExporter({
+      filename: () => exports.name.value ?? 'pleroma_theme',
+      mime: 'text/plain',
+      extension: 'iss',
+      getExportedObject: () => exportStyleData.value
+    })
+
+    const onImport = parsed => {
+      const editorComponents = parsed.filter(x => x.component.startsWith('@'))
+      const rootComponent = parsed.find(x => x.component === 'Root')
+      const rules = parsed.filter(x => !x.component.startsWith('@') && x.component !== 'Root')
+      const metaIn = editorComponents.find(x => x.component === '@meta').directives
+      const palettesIn = editorComponents.filter(x => x.component === '@palette')
+
+      exports.name.value = metaIn.name
+      exports.license.value = metaIn.license
+      exports.author.value = metaIn.author
+      exports.website.value = metaIn.website
+
+      const newVirtualDirectives = Object
+        .entries(rootComponent.directives)
+        .map(([name, value]) => {
+          const [valType, valVal] = value.split('|').map(x => x.trim())
+          return { name: name.substring(2), valType, value: valVal }
+        })
+      virtualDirectives.value = newVirtualDirectives
+
+      onPalettesUpdate(palettesIn.map(x => ({ name: x.variant, ...x.directives })))
+
+      allEditedRules.value = rulesToEditorFriendly(rules)
+
+      exports.updateOverallPreview()
+    }
+
+    const styleImporter = newImporter({
+      accept: '.iss',
+      parser (string) { return deserialize(string) },
+      onImportFailure (result) {
+        console.error('Failure importing style:', result)
+        this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_theme_imported', level: 'error' })
+      },
+      onImport
+    })
+
+    // Raw format
+    const exportRules = computed(() => [
+      metaRule.value,
+      ...palettesRule.value,
+      virtualDirectivesRule.value,
+      ...editorFriendlyToOriginal.value
+    ])
+
+    // Text format
+    const exportStyleData = computed(() => {
+      return [
+        metaOut.value,
+        palettesOut.value,
+        virtualDirectivesOut.value,
+        serialize(editorFriendlyToOriginal.value)
+      ].join('\n\n')
+    })
+
+    exports.clearStyle = () => {
+      onImport(store.state.interface.styleDataUsed)
+    }
+
+    exports.exportStyle = () => {
+      styleExporter.exportData()
+    }
+
+    exports.importStyle = () => {
+      styleImporter.importData()
+    }
+
+    exports.applyStyle = () => {
+      store.dispatch('setStyleCustom', exportRules.value)
+    }
+
+    const overallPreviewRules = ref([])
+    exports.overallPreviewRules = overallPreviewRules
+
+    const overallPreviewCssRules = ref([])
+    watchEffect(throttle(() => {
+      try {
+        overallPreviewCssRules.value = getScopedVersion(
+          getCssRules(overallPreviewRules.value),
+          '#edited-style-preview'
+        ).join('\n')
+      } catch (e) {
+        console.error(e)
+      }
+    }, 500))
+
+    exports.overallPreviewCssRules = overallPreviewCssRules
+
+    const updateOverallPreview = throttle(() => {
+      try {
+        overallPreviewRules.value = init({
+          inputRuleset: [
+            ...exportRules.value,
+            {
+              component: 'Root',
+              directives: Object.fromEntries(
+                Object
+                  .entries(selectedPalette.value)
+                  .filter(([k, v]) => k && v && k !== 'name')
+                  .map(([k, v]) => [`--${k}`, `color | ${v}`])
+              )
+            }
+          ],
+          ultimateBackgroundColor: '#000000',
+          debug: true
+        }).eager
+      } catch (e) {
+        console.error('Could not compile preview theme', e)
+        return null
+      }
+    }, 5000)
+    //
+    // Apart from "hover" we can't really show how component looks like in
+    // certain states, so we have to fake them.
+    const simulatePseudoSelectors = (css, prefix) => css
+      .replace(prefix, '.component-preview .preview-block')
+      .replace(':active', '.preview-active')
+      .replace(':hover', '.preview-hover')
+      .replace(':active', '.preview-active')
+      .replace(':focus', '.preview-focus')
+      .replace(':focus-within', '.preview-focus-within')
+      .replace(':disabled', '.preview-disabled')
+
+    const previewRules = computed(() => {
+      const filtered = overallPreviewRules.value.filter(r => {
+        const componentMatch = r.component === selectedComponentName.value
+        const parentComponentMatch = r.parent?.component === selectedComponentName.value
+        if (!componentMatch && !parentComponentMatch) return false
+        const rule = parentComponentMatch ? r.parent : r
+        if (rule.component !== selectedComponentName.value) return false
+        if (rule.variant !== selectedVariant.value) return false
+        const ruleState = new Set(rule.state.filter(x => x !== 'normal'))
+        const differenceA = [...ruleState].filter(x => !selectedState.has(x))
+        const differenceB = [...selectedState].filter(x => !ruleState.has(x))
+        return (differenceA.length + differenceB.length) === 0
+      })
+      const sorted = [...filtered]
+        .filter(x => x.component === selectedComponentName.value)
+        .sort((a, b) => {
+          const aSelectorLength = a.selector.split(/ /g).length
+          const bSelectorLength = b.selector.split(/ /g).length
+          return aSelectorLength - bSelectorLength
+        })
+
+      const prefix = sorted[0].selector
+
+      return filtered.filter(x => x.selector.startsWith(prefix))
+    })
+
+    exports.previewClass = computed(() => {
+      const selectors = []
+      if (!!selectedComponent.value.variants?.normal || selectedVariant.value !== 'normal') {
+        selectors.push(selectedComponent.value.variants[selectedVariant.value])
+      }
+      if (selectedState.size > 0) {
+        selectedState.forEach(state => {
+          const original = selectedComponent.value.states[state]
+          selectors.push(simulatePseudoSelectors(original))
+        })
+      }
+      return selectors.map(x => x.substring(1)).join('')
+    })
+
+    exports.previewCss = computed(() => {
+      try {
+        const prefix = previewRules.value[0].selector
+        const scoped = getCssRules(previewRules.value).map(x => simulatePseudoSelectors(x, prefix))
+        return scoped.join('\n')
+      } catch (e) {
+        console.error('Invalid ruleset', e)
+        return null
+      }
+    })
+
+    const dynamicVars = computed(() => {
+      return previewRules.value[0].dynamicVars
+    })
+
+    const staticVars = computed(() => {
+      const rootComponent = overallPreviewRules.value.find(r => {
+        return r.component === 'Root'
+      })
+      const rootDirectivesEntries = Object.entries(rootComponent.directives)
+      const directives = {}
+      rootDirectivesEntries
+        .filter(([k, v]) => k.startsWith('--') && v.startsWith('color | '))
+        .map(([k, v]) => [k.substring(2), v.substring('color | '.length)])
+        .forEach(([k, v]) => {
+          directives[k] = findColor(v, { dynamicVars: {}, staticVars: directives })
+        })
+      return directives
+    })
+    provide('staticVars', staticVars)
+    exports.staticVars = staticVars
+
+    const previewColors = computed(() => {
+      const stacked = dynamicVars.value.stacked
+      const background = typeof stacked === 'string' ? stacked : rgb2hex(stacked)
+      return {
+        text: previewRules.value.find(r => r.component === 'Text')?.virtualDirectives['--text'],
+        link: previewRules.value.find(r => r.component === 'Link')?.virtualDirectives['--link'],
+        border: previewRules.value.find(r => r.component === 'Border')?.virtualDirectives['--border'],
+        icon: previewRules.value.find(r => r.component === 'Icon')?.virtualDirectives['--icon'],
+        background
+      }
+    })
+    exports.previewColors = previewColors
+    exports.updateOverallPreview = updateOverallPreview
+
+    updateOverallPreview()
+
+    watch(
+      [
+        allEditedRules.value,
+        palettes,
+        selectedPalette,
+        selectedState,
+        selectedVariant
+      ],
+      updateOverallPreview
+    )
+
+    return exports
+  }
+}

src/components/settings_modal/tabs/style_tab/style_tab.scss

@@ -0,0 +1,264 @@
+.StyleTab {
+  .style-control {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    margin-bottom: 0.5em;
+
+    .label {
+      margin-right: 0.5em;
+      flex: 1 1 0;
+      line-height: 2;
+      min-height: 2em;
+    }
+
+    &.suboption {
+      margin-left: 1em;
+    }
+
+    .color-input {
+      flex: 0 0 0;
+    }
+
+    input,
+    select {
+      min-width: 3em;
+      margin: 0;
+      flex: 0;
+
+      &[type="number"] {
+        min-width: 9em;
+
+        &.-small {
+          min-width: 5em;
+        }
+      }
+
+      &[type="range"] {
+        flex: 1;
+        min-width: 9em;
+        align-self: center;
+        margin: 0 0.25em;
+      }
+
+      &[type="checkbox"] + i {
+        height: 1.1em;
+        align-self: center;
+      }
+    }
+  }
+
+  .meta-preview {
+    display: grid;
+    grid-template:
+      "meta meta preview preview"
+      "meta meta preview preview"
+      "meta meta preview preview"
+      "meta meta preview preview";
+    grid-gap: 0.5em;
+    grid-template-columns: min-content min-content 6fr max-content;
+
+    ul.setting-list {
+      padding: 0;
+      margin: 0;
+      display: grid;
+      grid-template-rows: subgrid;
+      grid-area: meta;
+
+      > li {
+        margin: 0;
+      }
+
+      .meta-field {
+        margin: 0;
+
+        .setting-label {
+          display: inline-block;
+          margin-bottom: 0.5em;
+        }
+      }
+    }
+
+    #edited-style-preview {
+      grid-area: preview;
+    }
+  }
+
+  .setting-item {
+    padding-bottom: 0;
+
+    .btn {
+      padding: 0 0.5em;
+    }
+
+    &:not(:first-child) {
+      margin-top: 0.5em;
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 0.5em;
+    }
+  }
+
+  .list-editor {
+    display: grid;
+    grid-template-areas:
+      "label    editor"
+      "selector editor"
+      "movement editor";
+    grid-template-columns: 10em 1fr;
+    grid-template-rows: auto 1fr auto;
+    grid-gap: 0.5em;
+
+    .list-edit-area {
+      grid-area: editor;
+    }
+
+    .list-select {
+      grid-area: selector;
+      margin: 0;
+
+      &-label {
+        font-weight: bold;
+        grid-area: label;
+        margin: 0;
+        align-self: baseline;
+      }
+
+      &-movement {
+        grid-area: movement;
+        margin: 0;
+      }
+    }
+  }
+
+  .palette-editor {
+    width: min-content;
+
+    .list-edit-area {
+      display: grid;
+      align-self: baseline;
+      grid-template-rows: subgrid;
+      grid-template-columns: 1fr;
+    }
+
+    .palette-editor-single {
+      grid-row: 2 / span 2;
+    }
+  }
+
+  .variables-editor {
+    .variable-selector {
+      display: grid;
+      grid-template-columns: auto 1fr auto 10em;
+      grid-template-rows: subgrid;
+      align-items: baseline;
+      grid-gap: 0 0.5em;
+    }
+
+    .list-edit-area {
+      display: grid;
+      grid-template-rows: subgrid;
+    }
+
+    .shadow-control {
+      grid-row: 2 / span 2;
+    }
+  }
+
+  .component-editor {
+    display: grid;
+    grid-template-columns: 6fr 3fr 4fr;
+    grid-template-rows: auto auto 1fr;
+    grid-gap: 0.5em;
+    grid-template-areas:
+      "component component variant"
+      "state     state     state"
+      "preview   settings  settings";
+
+    .component-selector {
+      grid-area: component;
+      align-self: center;
+    }
+
+    .component-selector,
+    .state-selector,
+    .variant-selector {
+      display: grid;
+      grid-template-columns: 1fr minmax(1fr, 10em);
+      grid-template-rows: auto;
+      grid-auto-flow: column;
+      grid-gap: 0.5em;
+      align-items: baseline;
+
+      > label:not(.Select) {
+        font-weight: bold;
+        justify-self: right;
+      }
+    }
+
+    .state-selector {
+      grid-area: state;
+      grid-template-columns: minmax(min-content, 7em) 1fr;
+    }
+
+    .variant-selector {
+      grid-area: variant;
+    }
+
+    .state-selector-list {
+      display: grid;
+      list-style: none;
+      grid-auto-flow: dense;
+      grid-template-columns: repeat(5, minmax(min-content, 1fr));
+      grid-auto-rows: 1fr;
+      grid-gap: 0.5em;
+      padding: 0;
+      margin: 0;
+    }
+
+    .preview-container {
+      --border: none;
+      --shadow: none;
+      --roundness: none;
+
+      grid-area: preview;
+    }
+
+    .component-settings {
+      grid-area: settings;
+    }
+
+    .editor-tab {
+      display: grid;
+      grid-template-columns: 1fr 2em;
+      grid-column-gap: 0.5em;
+      align-items: center;
+      grid-auto-rows: min-content;
+      grid-auto-flow: dense;
+      border-left: 1px solid var(--border);
+      border-right: 1px solid var(--border);
+      border-bottom: 1px solid var(--border);
+      padding: 0.5em;
+    }
+
+    .shadow-tab {
+      grid-template-columns: 1fr;
+      justify-items: center;
+    }
+  }
+}
+
+.extra-content {
+  .style-actions-container {
+    width: 100%;
+    display: flex;
+    justify-content: end;
+
+    .style-actions {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(7em, 1fr));
+      grid-gap: 0.25em;
+    }
+  }
+}

src/components/settings_modal/tabs/style_tab/style_tab.vue

@@ -0,0 +1,402 @@
+<script src="./style_tab.js">
+</script>
+
+<template>
+  <div class="StyleTab">
+    <div class="setting-item heading">
+      <h2> {{ $t('settings.style.themes3.editor.title') }} </h2>
+      <div class="meta-preview">
+        <!-- eslint-disable vue/no-v-text-v-html-on-component -->
+        <!-- eslint-disable vue/no-v-html -->
+        <component
+          :is="'style'"
+          v-html="overallPreviewCssRules"
+        />
+        <!-- eslint-enable vue/no-v-html -->
+        <!-- eslint-enable vue/no-v-text-v-html-on-component -->
+        <Preview id="edited-style-preview" />
+        <teleport
+          v-if="isActive"
+          to="#unscrolled-content"
+        >
+          <div class="style-actions-container">
+            <div class="style-actions">
+              <button
+                class="btn button-default button-new"
+                @click="clearStyle"
+              >
+                <FAIcon icon="arrows-rotate" />
+                {{ $t('settings.style.themes3.editor.reset_style') }}
+              </button>
+              <button
+                class="btn button-default button-load"
+                @click="importStyle"
+              >
+                <FAIcon icon="folder-open" />
+                {{ $t('settings.style.themes3.editor.load_style') }}
+              </button>
+              <button
+                class="btn button-default button-save"
+                @click="exportStyle"
+              >
+                <FAIcon icon="floppy-disk" />
+                {{ $t('settings.style.themes3.editor.save_style') }}
+              </button>
+              <button
+                class="btn button-default button-apply"
+                @click="applyStyle"
+              >
+                <FAIcon icon="check" />
+                {{ $t('settings.style.themes3.editor.apply_preview') }}
+              </button>
+            </div>
+          </div>
+        </teleport>
+        <ul class="setting-list style-metadata">
+          <li>
+            <StringSetting
+              v-model="name"
+              class="meta-field"
+            >
+              {{ $t('settings.style.themes3.editor.style_name') }}
+            </StringSetting>
+          </li>
+          <li>
+            <StringSetting
+              v-model="author"
+              class="meta-field"
+            >
+              {{ $t('settings.style.themes3.editor.style_author') }}
+            </StringSetting>
+          </li>
+          <li>
+            <StringSetting
+              v-model="license"
+              class="meta-field"
+            >
+              {{ $t('settings.style.themes3.editor.style_license') }}
+            </StringSetting>
+          </li>
+          <li>
+            <StringSetting
+              v-model="website"
+              class="meta-field"
+            >
+              {{ $t('settings.style.themes3.editor.style_website') }}
+            </StringSetting>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <tab-switcher>
+      <div
+        key="component"
+        class="setting-item component-editor"
+        :label="$t('settings.style.themes3.editor.component_tab')"
+      >
+        <div class="component-selector">
+          <label for="component-selector">
+            {{ $t('settings.style.themes3.editor.component_selector') }}
+            {{ ' ' }}
+          </label>
+          <Select
+            id="component-selector"
+            v-model="selectedComponentKey"
+          >
+            <option
+              v-for="key in componentKeys"
+              :key="'component-' + key"
+              :value="key"
+            >
+              {{ componentsMap.get(key).name }}
+            </option>
+          </Select>
+        </div>
+        <div
+          v-if="selectedComponentVariants.length > 1"
+          class="variant-selector"
+        >
+          <label for="variant-selector">
+            {{ $t('settings.style.themes3.editor.variant_selector') }}
+          </label>
+          <Select
+            v-model="selectedVariant"
+          >
+            <option
+              v-for="variant in selectedComponentVariants"
+              :key="'component-variant-' + variant"
+              :value="variant"
+            >
+              {{ variant }}
+            </option>
+          </Select>
+        </div>
+        <div
+          v-if="selectedComponentStates.length > 0"
+          class="state-selector"
+        >
+          <label>
+            {{ $t('settings.style.themes3.editor.states_selector') }}
+          </label>
+          <ul
+            class="state-selector-list"
+          >
+            <li
+              v-for="state in selectedComponentStates"
+              :key="'component-state-' + state"
+            >
+              <Checkbox
+                :value="selectedState.has(state)"
+                @update:modelValue="(v) => updateSelectedStates(state, v)"
+              >
+                {{ state }}
+              </Checkbox>
+            </li>
+          </ul>
+        </div>
+        <div class="preview-container">
+          <!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
+          <component
+            :is="'style'"
+            v-html="previewCss"
+          />
+          <!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
+          <ComponentPreview
+            class="component-preview"
+            :show-text="componentHas('Text')"
+            :shadow-control="isShadowTabOpen"
+            :preview-class="previewClass"
+            :preview-style="editorHintStyle"
+            :preview-css="previewCss"
+            :disabled="!editedSubShadow && typeof editedShadow !== 'string'"
+            :shadow="editedSubShadow"
+            :no-color-control="true"
+            @update:shadow="({ axis, value }) => updateSubShadow(axis, value)"
+          />
+        </div>
+        <tab-switcher
+          ref="tabSwitcher"
+          class="component-settings"
+          :on-switch="onTabSwitch"
+        >
+          <div
+            key="main"
+            class="editor-tab"
+            :label="$t('settings.style.themes3.editor.main_tab')"
+          >
+            <ColorInput
+              v-model="editedBackgroundColor"
+              name="component-background-color"
+              :fallback="computeColor(editedBackgroundColor) ?? previewColors.background"
+              :disabled="!isBackgroundColorPresent"
+              :label="$t('settings.style.themes3.editor.background')"
+              :hide-optional-checkbox="true"
+            />
+            <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
+              <Checkbox v-model="isBackgroundColorPresent" />
+            </Tooltip>
+            <ColorInput
+              v-if="componentHas('Text')"
+              v-model="editedTextColor"
+              name="component-text-color"
+              :fallback="computeColor(editedTextColor) ?? previewColors.text"
+              :label="$t('settings.style.themes3.editor.text_color')"
+              :disabled="!isTextColorPresent"
+              :hide-optional-checkbox="true"
+            />
+            <Tooltip
+              v-if="componentHas('Text')"
+              :text="$t('settings.style.themes3.editor.include_in_rule')"
+            >
+              <Checkbox v-model="isTextColorPresent" />
+            </Tooltip>
+            <div
+              v-if="componentHas('Text')"
+              class="style-control suboption"
+            >
+              <label
+                for="textAuto"
+                class="label"
+                :class="{ faint: !isTextAutoPresent }"
+              >
+                {{ $t('settings.style.themes3.editor.text_auto.label') }}
+              </label>
+              <Select
+                id="textAuto"
+                v-model="editedTextAuto"
+                :disabled="!isTextAutoPresent"
+              >
+                <option value="no-preserve">
+                  {{ $t('settings.style.themes3.editor.text_auto.no-preserve') }}
+                </option>
+                <option value="no-auto">
+                  {{ $t('settings.style.themes3.editor.text_auto.no-auto') }}
+                </option>
+                <option value="preserve">
+                  {{ $t('settings.style.themes3.editor.text_auto.preserve') }}
+                </option>
+              </Select>
+            </div>
+            <Tooltip
+              v-if="componentHas('Text')"
+              :text="$t('settings.style.themes3.editor.include_in_rule')"
+            >
+              <Checkbox v-model="isTextAutoPresent" />
+            </Tooltip>
+            <div
+              v-if="componentHas('Text')"
+              class="style-control suboption"
+            >
+              <label class="label">
+                {{ $t('settings.style.themes3.editor.contrast') }}
+              </label>
+              <ContrastRatio
+                :show-ratio="true"
+                :contrast="contrast"
+              />
+            </div>
+            <div v-if="componentHas('Text')" />
+            <ColorInput
+              v-if="componentHas('Link')"
+              v-model="editedLinkColor"
+              name="component-link-color"
+              :fallback="computeColor(editedLinkColor) ?? previewColors.link"
+              :label="$t('settings.style.themes3.editor.link_color')"
+              :disabled="!isLinkColorPresent"
+              :hide-optional-checkbox="true"
+            />
+            <Tooltip
+              v-if="componentHas('Link')"
+              :text="$t('settings.style.themes3.editor.include_in_rule')"
+            >
+              <Checkbox v-model="isLinkColorPresent" />
+            </Tooltip>
+            <ColorInput
+              v-if="componentHas('Icon')"
+              v-model="editedIconColor"
+              name="component-icon-color"
+              :fallback="computeColor(editedIconColor) ?? previewColors.icon"
+              :label="$t('settings.style.themes3.editor.icon_color')"
+              :disabled="!isIconColorPresent"
+              :hide-optional-checkbox="true"
+            />
+            <Tooltip
+              v-if="componentHas('Icon')"
+              :text="$t('settings.style.themes3.editor.include_in_rule')"
+            >
+              <Checkbox v-model="isIconColorPresent" />
+            </Tooltip>
+            <ColorInput
+              v-if="componentHas('Border')"
+              v-model="editedBorderColor"
+              name="component-border-color"
+              :fallback="computeColor(editedBorderColor) ?? previewColors.border"
+              :label="$t('settings.style.themes3.editor.border_color')"
+              :disabled="!isBorderColorPresent"
+              :hide-optional-checkbox="true"
+            />
+            <Tooltip
+              v-if="componentHas('Border')"
+              :text="$t('settings.style.themes3.editor.include_in_rule')"
+            >
+              <Checkbox v-model="isBorderColorPresent" />
+            </Tooltip>
+            <OpacityInput
+              v-model="editedOpacity"
+              name="component-opacity"
+              :disabled="!isOpacityPresent"
+              :label="$t('settings.style.themes3.editor.opacity')"
+            />
+            <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
+              <Checkbox v-model="isOpacityPresent" />
+            </Tooltip>
+            <RoundnessInput
+              v-model="editedRoundness"
+              name="component-roundness"
+              :disabled="!isRoundnessPresent"
+              :label="$t('settings.style.themes3.editor.roundness')"
+            />
+            <Tooltip :text="$t('settings.style.themes3.editor.include_in_rule')">
+              <Checkbox v-model="isRoundnessPresent" />
+            </Tooltip>
+          </div>
+          <div
+            key="shadow"
+            class="editor-tab shadow-tab"
+            :label="$t('settings.style.themes3.editor.shadows_tab')"
+          >
+            <Checkbox
+              v-model="isShadowPresent"
+              class="style-control"
+            >
+              {{ $t('settings.style.themes3.editor.include_in_rule') }}
+            </checkbox>
+            <ShadowControl
+              v-model="editedShadow"
+              :disabled="!isShadowPresent"
+              :no-preview="true"
+              :compact="true"
+              :static-vars="staticVars"
+              @subShadowSelected="onSubShadow"
+            />
+          </div>
+        </tab-switcher>
+      </div>
+      <div
+        key="palette"
+        :label="$t('settings.style.themes3.editor.palette_tab')"
+        class="setting-item list-editor palette-editor"
+      >
+        <label
+          class="list-select-label"
+          for="palette-selector"
+        >
+          {{ $t('settings.style.themes3.palette.label') }}
+          {{ ' ' }}
+        </label>
+        <Select
+          id="palette-selector"
+          v-model="selectedPaletteId"
+          class="list-select"
+          size="4"
+        >
+          <option
+            v-for="(p, index) in palettes"
+            :key="p.name"
+            :value="index"
+          >
+            {{ p.name }}
+          </option>
+        </Select>
+        <SelectMotion
+          class="list-select-movement"
+          :model-value="palettes"
+          :selected-id="selectedPaletteId"
+          :get-add-value="getNewPalette"
+          @update:modelValue="onPalettesUpdate"
+          @update:selectedId="e => selectedPaletteId = e"
+        />
+        <div class="list-edit-area">
+          <StringSetting
+            v-model="selectedPalette.name"
+            class="palette-name-input"
+          >
+            {{ $t('settings.style.themes3.palette.name_label') }}
+          </StringSetting>
+          <PaletteEditor
+            v-model="selectedPalette"
+            class="palette-editor-single"
+          />
+        </div>
+      </div>
+      <VirtualDirectivesTab
+        key="variables"
+        :label="$t('settings.style.themes3.editor.variables_tab')"
+        :model-value="virtualDirectives"
+        @update:modelValue="updateVirtualDirectives"
+      />
+    </tab-switcher>
+  </div>
+</template>
+
+<style src="./style_tab.scss" lang="scss"></style>

src/components/settings_modal/tabs/style_tab/virtual_directives_tab.js

@@ -0,0 +1,132 @@
+import { ref, computed, watch, inject } from 'vue'
+
+import Select from 'src/components/select/select.vue'
+import SelectMotion from 'src/components/select/select_motion.vue'
+import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
+import ColorInput from 'src/components/color_input/color_input.vue'
+
+import { serializeShadow } from 'src/services/theme_data/iss_serializer.js'
+
+// helper for debugging
+// eslint-disable-next-line no-unused-vars
+const toValue = (x) => JSON.parse(JSON.stringify(x === undefined ? 'null' : x))
+
+export default {
+  components: {
+    Select,
+    SelectMotion,
+    ShadowControl,
+    ColorInput
+  },
+  props: ['modelValue'],
+  emits: ['update:modelValue'],
+  setup (props, context) {
+    const exports = {}
+    const emit = context.emit
+
+    exports.emit = emit
+    exports.computeColor = inject('computeColor')
+    exports.staticVars = inject('staticVars')
+
+    const selectedVirtualDirectiveId = ref(0)
+    exports.selectedVirtualDirectiveId = selectedVirtualDirectiveId
+
+    const selectedVirtualDirective = computed({
+      get () {
+        return props.modelValue[selectedVirtualDirectiveId.value]
+      },
+      set (value) {
+        const newVD = [...props.modelValue]
+        newVD[selectedVirtualDirectiveId.value] = value
+
+        emit('update:modelValue', newVD)
+      }
+    })
+    exports.selectedVirtualDirective = selectedVirtualDirective
+
+    exports.selectedVirtualDirectiveValType = computed({
+      get () {
+        return props.modelValue[selectedVirtualDirectiveId.value].valType
+      },
+      set (value) {
+        const newValType = value
+        let newValue
+        switch (value) {
+          case 'shadow':
+            newValue = '0 0 0 #000000 / 1'
+            break
+          case 'color':
+            newValue = '#000000'
+            break
+          default:
+            newValue = 'none'
+        }
+        const newName = props.modelValue[selectedVirtualDirectiveId.value].name
+        props.modelValue[selectedVirtualDirectiveId.value] = {
+          name: newName,
+          value: newValue,
+          valType: newValType
+        }
+      }
+    })
+
+    const draftVirtualDirectiveValid = ref(true)
+    const draftVirtualDirective = ref({})
+    exports.draftVirtualDirective = draftVirtualDirective
+    const normalizeShadows = inject('normalizeShadows')
+
+    watch(
+      selectedVirtualDirective,
+      (directive) => {
+        switch (directive.valType) {
+          case 'shadow': {
+            if (Array.isArray(directive.value)) {
+              draftVirtualDirective.value = normalizeShadows(directive.value)
+            } else {
+              const splitShadow = directive.value.split(/,/g).map(x => x.trim())
+              draftVirtualDirective.value = normalizeShadows(splitShadow)
+            }
+            break
+          }
+          case 'color':
+            draftVirtualDirective.value = directive.value
+            break
+          default:
+            draftVirtualDirective.value = directive.value
+            break
+        }
+      },
+      { immediate: true }
+    )
+
+    watch(
+      draftVirtualDirective,
+      (directive) => {
+        try {
+          switch (selectedVirtualDirective.value.valType) {
+            case 'shadow': {
+              props.modelValue[selectedVirtualDirectiveId.value].value =
+                directive.map(x => serializeShadow(x)).join(', ')
+              break
+            }
+            default:
+              props.modelValue[selectedVirtualDirectiveId.value].value = directive
+          }
+          draftVirtualDirectiveValid.value = true
+        } catch (e) {
+          console.error('Invalid virtual directive value', e)
+          draftVirtualDirectiveValid.value = false
+        }
+      },
+      { immediate: true }
+    )
+
+    exports.getNewVirtualDirective = () => ({
+      name: 'newDirective',
+      valType: 'generic',
+      value: 'foobar'
+    })
+
+    return exports
+  }
+}

src/components/settings_modal/tabs/style_tab/virtual_directives_tab.vue

@@ -0,0 +1,84 @@
+<script src="./virtual_directives_tab.js"></script>
+
+<template>
+  <div class="setting-item list-editor variables-editor">
+    <label
+      class="list-select-label"
+      for="variables-selector"
+    >
+      {{ $t('settings.style.themes3.editor.variables.label') }}
+      {{ ' ' }}
+    </label>
+    <Select
+      id="variables-selector"
+      v-model="selectedVirtualDirectiveId"
+      class="list-select"
+      size="20"
+    >
+      <option
+        v-for="(p, index) in modelValue"
+        :key="p.name"
+        :value="index"
+      >
+        {{ p.name }}
+      </option>
+    </Select>
+    <SelectMotion
+      class="list-select-movement"
+      :model-value="modelValue"
+      :selected-id="selectedVirtualDirectiveId"
+      :get-add-value="getNewVirtualDirective"
+      @update:modelValue="e => emit('update:modelValue', e)"
+      @update:selectedId="e => selectedVirtualDirectiveId = e"
+    />
+    <div class="list-edit-area">
+      <div class="variable-selector">
+        <label
+          class="variable-name-label"
+          for="variables-selector"
+        >
+          {{ $t('settings.style.themes3.editor.variables.name_label') }}
+          {{ ' ' }}
+        </label>
+        <input
+          v-model="selectedVirtualDirective.name"
+          class="input"
+        >
+        <label
+          class="variable-type-label"
+          for="variables-selector"
+        >
+          {{ $t('settings.style.themes3.editor.variables.type_label') }}
+          {{ ' ' }}
+        </label>
+        <Select
+          v-model="selectedVirtualDirectiveValType"
+        >
+          <option value="shadow">
+            {{ $t('settings.style.themes3.editor.variables.type_shadow') }}
+          </option>
+          <option value="color">
+            {{ $t('settings.style.themes3.editor.variables.type_color') }}
+          </option>
+          <option value="generic">
+            {{ $t('settings.style.themes3.editor.variables.type_generic') }}
+          </option>
+        </Select>
+      </div>
+      <ShadowControl
+        v-if="selectedVirtualDirectiveValType === 'shadow'"
+        v-model="draftVirtualDirective"
+        :static-vars="staticVars"
+        :compact="true"
+      />
+      <ColorInput
+        v-if="selectedVirtualDirectiveValType === 'color'"
+        v-model="draftVirtualDirective"
+        name="virtual-directive-color"
+        :fallback="computeColor(draftVirtualDirective)"
+        :label="$t('settings.style.themes3.editor.variables.virtual_color')"
+        :hide-optional-checkbox="true"
+      />
+    </div>
+  </div>
+</template>

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

@@ -1,14 +1,14 @@
 <template>
-  <div class="preview-container">
+  <div class="theme-preview-container">
     <div class="underlay underlay-preview" />
     <div class="panel dummy">
       <div class="panel-heading">
-        <div class="title">
+        <h1 class="title">
           {{ $t('settings.style.preview.header') }}
-          <span class="badge badge-notification">
+          <span class="badge -notification">
             99
           </span>
-        </div>
+        </h1>
         <span class="faint">
           {{ $t('settings.style.preview.header_faint') }}
         </span>
@@ -81,7 +81,7 @@
               class="faint"
               scope="global"
             >
-              <a style="color: var(--faintLink);">
+              <a style="color: var(--linkFaint);">
                 {{ $t('settings.style.preview.faint_link') }}
               </a>
             </i18n-t>
@@ -95,17 +95,13 @@
         <input
           :value="$t('settings.style.preview.input')"
           type="text"
+          class="input"
         >
 
         <div class="actions">
-          <span class="checkbox">
-            <input
-              id="preview_checkbox"
-              checked="very yes"
-              type="checkbox"
-            >
-            <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
-          </span>
+          <Checkbox>
+            {{ $t('settings.style.preview.checkbox') }}
+          </Checkbox>
           <button class="btn button-default">
             {{ $t('settings.style.preview.button') }}
           </button>
@@ -116,6 +112,7 @@
 </template>
 
 <script>
+import Checkbox from 'src/components/checkbox/checkbox.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faTimes,
@@ -131,19 +128,123 @@ library.add(
   faReply
 )
 
-export default {}
+export default {
+  components: {
+    Checkbox
+  }
+}
 </script>
 
 <style lang="scss">
-.preview-container {
+.theme-preview-container {
   position: relative;
-}
+  border-top: 1px dashed;
+  border-bottom: 1px dashed;
+  border-color: var(--border);
+  margin: 1em 0;
+  padding: 1em;
+  background-color: var(--wallpaper);
+  background-image: var(--body-background-image);
+  background-size: cover;
+  background-position: 50% 50%;
 
-.underlay-preview {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 10px;
-  right: 10px;
+  .theme-preview-content {
+    padding: 20px;
+  }
+
+  .dummy {
+    .post {
+      font-family: var(--postFont);
+      display: flex;
+
+      .content {
+        flex: 1;
+
+        h4 {
+          margin-bottom: 0.25em;
+        }
+
+        .icons {
+          margin-top: 0.5em;
+          display: flex;
+
+          i {
+            margin-right: 1em;
+          }
+        }
+      }
+    }
+
+    .after-post {
+      margin-top: 1em;
+      display: flex;
+      align-items: center;
+    }
+
+    .avatar,
+    .avatar-alt {
+      background:
+        linear-gradient(
+          135deg,
+          #b8e1fc 0%,
+          #a9d2f3 10%,
+          #90bae4 25%,
+          #90bcea 37%,
+          #90bff0 50%,
+          #6ba8e5 51%,
+          #a2daf5 83%,
+          #bdf3fd 100%
+        );
+      color: black;
+      font-family: sans-serif;
+      text-align: center;
+      margin-right: 1em;
+    }
+
+    .avatar-alt {
+      flex: 0 auto;
+      margin-left: 28px;
+      font-size: 12px;
+      min-width: 20px;
+      min-height: 20px;
+      line-height: 20px;
+    }
+
+    .avatar {
+      flex: 0 auto;
+      width: 48px;
+      height: 48px;
+      font-size: 14px;
+      line-height: 48px;
+    }
+
+    .actions {
+      display: flex;
+      align-items: baseline;
+
+      .checkbox {
+        margin-right: 1em;
+        flex: 1;
+      }
+    }
+
+    .separator {
+      margin: 1em;
+      border-bottom: 1px solid;
+      border-color: var(--border);
+    }
+
+    .btn {
+      min-width: 3em;
+    }
+  }
+
+  .underlay-preview {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 10px;
+    right: 10px;
+  }
 }
-</style>
+ </style>

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

@@ -1,19 +1,9 @@
 import {
   rgb2hex,
   hex2rgb,
-  getContrastRatioLayers
+  getContrastRatioLayers,
+  relativeLuminance
 } from 'src/services/color_convert/color_convert.js'
-import {
-  DEFAULT_SHADOWS,
-  generateColors,
-  generateShadows,
-  generateRadii,
-  generateFonts,
-  composePreset,
-  getThemes,
-  shadows2to3,
-  colors2to3
-} from 'src/services/style_setter/style_setter.js'
 import {
   newImporter,
   newExporter
@@ -25,8 +15,23 @@ import {
   CURRENT_VERSION,
   OPACITIES,
   getLayers,
-  getOpacitySlot
+  getOpacitySlot,
+  DEFAULT_SHADOWS,
+  generateColors,
+  generateShadows,
+  generateRadii,
+  generateFonts,
+  shadows2to3,
+  colors2to3
 } from 'src/services/theme_data/theme_data.service.js'
+
+import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
+import { init } from 'src/services/theme_data/theme_data_3.service.js'
+import {
+  getCssRules,
+  getScopedVersion
+} from 'src/services/theme_data/css_utils.js'
+
 import ColorInput from 'src/components/color_input/color_input.vue'
 import RangeInput from 'src/components/range_input/range_input.vue'
 import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
@@ -37,7 +42,7 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Select from 'src/components/select/select.vue'
 
-import Preview from './preview.vue'
+import Preview from './theme_preview.vue'
 import { useInterfaceStore } from '../../../../stores/interface'
 
 // List of color values used in v1
@@ -63,6 +68,7 @@ const colorConvert = (color) => {
 export default {
   data () {
     return {
+      themeV3Preview: [],
       themeImporter: newImporter({
         validator: this.importValidator,
         onImport: this.onImport,
@@ -79,10 +85,7 @@ export default {
       tempImportFile: undefined,
       engineVersion: 0,
 
-      previewShadows: {},
-      previewColors: {},
-      previewRadii: {},
-      previewFonts: {},
+      previewTheme: {},
 
       shadowsInvalid: true,
       colorsInvalid: true,
@@ -118,31 +121,24 @@ export default {
     }
   },
   created () {
-    const self = this
+    const currentIndex = this.$store.state.instance.themesIndex
 
-    getThemes()
-      .then((promises) => {
-        return Promise.all(
-          Object.entries(promises)
-            .map(([k, v]) => v.then(res => [k, res]))
-        )
-      })
-      .then(themes => themes.reduce((acc, [k, v]) => {
-        if (v) {
-          return {
-            ...acc,
-            [k]: v
-          }
-        } else {
-          return acc
-        }
-      }, {}))
-      .then((themesComplete) => {
-        self.availableStyles = themesComplete
-      })
+    let promise
+    if (currentIndex) {
+      promise = Promise.resolve(currentIndex)
+    } else {
+      promise = this.$store.dispatch('fetchThemesIndex')
+    }
+
+    promise.then(themesIndex => {
+      Object
+        .values(themesIndex)
+        .forEach(themeFunc => {
+          themeFunc().then(themeData => themeData && this.availableStyles.push(themeData))
+        })
+    })
   },
   mounted () {
-    this.loadThemeFromLocalStorage()
     if (typeof this.shadowSelected === 'undefined') {
       this.shadowSelected = this.shadowsAvailable[0]
     }
@@ -233,13 +229,6 @@ export default {
         chatMessage: this.chatMessageRadiusLocal
       }
     },
-    preview () {
-      return composePreset(this.previewColors, this.previewRadii, this.previewShadows, this.previewFonts)
-    },
-    previewTheme () {
-      if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} }
-      return this.preview.theme
-    },
     // This needs optimization maybe
     previewContrast () {
       try {
@@ -307,13 +296,8 @@ export default {
         return {}
       }
     },
-    previewRules () {
-      if (!this.preview.rules) return ''
-      return [
-        ...Object.values(this.preview.rules),
-        'color: var(--text)',
-        'font-family: var(--interfaceFont, sans-serif)'
-      ].join(';')
+    themeDataUsed () {
+      return this.$store.state.interface.themeDataUsed
     },
     shadowsAvailable () {
       return Object.keys(DEFAULT_SHADOWS).sort()
@@ -324,7 +308,18 @@ export default {
       },
       set (val) {
         if (val) {
-          this.shadowsLocal[this.shadowSelected] = this.currentShadowFallback.map(_ => Object.assign({}, _))
+          this.shadowsLocal[this.shadowSelected] = (this.currentShadowFallback || [])
+            .map(s => ({
+              name: null,
+              x: 0,
+              y: 0,
+              blur: 0,
+              spread: 0,
+              inset: false,
+              color: '#000000',
+              alpha: 1,
+              ...s
+            }))
         } else {
           delete this.shadowsLocal[this.shadowSelected]
         }
@@ -411,9 +406,6 @@ export default {
       forceUseSource = false
     ) {
       this.dismissWarning()
-      if (!source && !theme) {
-        throw new Error('Can\'t load theme: empty')
-      }
       const version = (origin === 'localStorage' && !theme.colors)
         ? 'l1'
         : fileVersion
@@ -489,22 +481,11 @@ export default {
       this.dismissWarning()
     },
     loadThemeFromLocalStorage (confirmLoadSource = false, forceSnapshot = false) {
-      const {
-        customTheme: theme,
-        customThemeSource: source
-      } = this.$store.getters.mergedConfig
-      if (!theme && !source) {
-        // Anon user or never touched themes
-        this.loadTheme(
-          this.$store.state.instance.themeData,
-          'defaults',
-          confirmLoadSource
-        )
-      } else {
+      const theme = this.themeDataUsed?.source
+      if (theme) {
         this.loadTheme(
           {
-            theme,
-            source: forceSnapshot ? theme : source
+            theme
           },
           'localStorage',
           confirmLoadSource
@@ -512,16 +493,15 @@ export default {
       }
     },
     setCustomTheme () {
-      this.$store.dispatch('setOption', {
-        name: 'customTheme',
-        value: {
+      this.$store.dispatch('setThemeV2', {
+        customTheme: {
+          ignore: true,
+          themeFileVersion: this.selectedVersion,
           themeEngineVersion: CURRENT_VERSION,
           ...this.previewTheme
-        }
-      })
-      this.$store.dispatch('setOption', {
-        name: 'customThemeSource',
-        value: {
+        },
+        customThemeSource: {
+          themeFileVersion: this.selectedVersion,
           themeEngineVersion: CURRENT_VERSION,
           shadows: this.shadowsLocal,
           fonts: this.fontsLocal,
@@ -531,16 +511,24 @@ export default {
         }
       })
     },
-    updatePreviewColorsAndShadows () {
-      this.previewColors = generateColors({
+    updatePreviewColors () {
+      const result = generateColors({
         opacity: this.currentOpacity,
         colors: this.currentColors
       })
-      this.previewShadows = generateShadows(
-        { shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion },
-        this.previewColors.theme.colors,
-        this.previewColors.mod
-      )
+      this.previewTheme.colors = result.theme.colors
+      this.previewTheme.opacity = result.theme.opacity
+    },
+    updatePreviewShadows () {
+      this.previewTheme.shadows = generateShadows(
+        {
+          shadows: this.shadowsLocal,
+          opacity: this.previewTheme.opacity,
+          themeEngineVersion: this.engineVersion
+        },
+        this.previewTheme.colors,
+        relativeLuminance(this.previewTheme.colors.bg) < 0.5 ? 1 : -1
+      ).theme.shadows
     },
     importTheme () { this.themeImporter.importData() },
     exportTheme () { this.themeExporter.exportData() },
@@ -609,7 +597,7 @@ export default {
     normalizeLocalState (theme, version = 0, source, forceSource = false) {
       let input
       if (typeof source !== 'undefined') {
-        if (forceSource || source.themeEngineVersion === CURRENT_VERSION) {
+        if (forceSource || source?.themeEngineVersion === CURRENT_VERSION) {
           input = source
           version = source.themeEngineVersion
         } else {
@@ -691,6 +679,8 @@ export default {
         } else {
           this.shadowsLocal = shadows
         }
+        this.updatePreviewColors()
+        this.updatePreviewShadows()
         this.shadowSelected = this.shadowsAvailable[0]
       }
 
@@ -698,12 +688,28 @@ export default {
         this.clearFonts()
         this.fontsLocal = fonts
       }
+    },
+    updateTheme3Preview () {
+      const theme2 = convertTheme2To3(this.previewTheme)
+      const theme3 = init({
+        inputRuleset: theme2,
+        ultimateBackgroundColor: '#000000',
+        liteMode: true
+      })
+
+      this.themeV3Preview = getScopedVersion(
+        getCssRules(theme3.eager),
+        '#theme-preview'
+      ).join('\n')
     }
   },
   watch: {
+    themeDataUsed () {
+      this.loadThemeFromLocalStorage()
+    },
     currentRadii () {
       try {
-        this.previewRadii = generateRadii({ radii: this.currentRadii })
+        this.previewTheme.radii = generateRadii({ radii: this.currentRadii }).theme.radii
         this.radiiInvalid = false
       } catch (e) {
         this.radiiInvalid = true
@@ -712,9 +718,8 @@ export default {
     },
     shadowsLocal: {
       handler () {
-        if (Object.getOwnPropertyNames(this.previewColors).length === 1) return
         try {
-          this.updatePreviewColorsAndShadows()
+          this.updatePreviewShadows()
           this.shadowsInvalid = false
         } catch (e) {
           this.shadowsInvalid = true
@@ -726,7 +731,7 @@ export default {
     fontsLocal: {
       handler () {
         try {
-          this.previewFonts = generateFonts({ fonts: this.fontsLocal })
+          this.previewTheme.fonts = generateFonts({ fonts: this.fontsLocal }).theme.fonts
           this.fontsInvalid = false
         } catch (e) {
           this.fontsInvalid = true
@@ -737,18 +742,16 @@ export default {
     },
     currentColors () {
       try {
-        this.updatePreviewColorsAndShadows()
+        this.updatePreviewColors()
         this.colorsInvalid = false
-        this.shadowsInvalid = false
       } catch (e) {
         this.colorsInvalid = true
-        this.shadowsInvalid = true
         console.warn(e)
       }
     },
     currentOpacity () {
       try {
-        this.updatePreviewColorsAndShadows()
+        this.updatePreviewColors()
       } catch (e) {
         console.warn(e)
       }
@@ -756,7 +759,6 @@ export default {
     selected () {
       this.selectedTheme = Object.entries(this.availableStyles).find(([k, s]) => {
         if (Array.isArray(s)) {
-          console.log(s[0] === this.selected, this.selected)
           return s[0] === this.selected
         } else {
           return s.name === this.selected

src/components/settings_modal/tabs/theme_tab/theme_tab.scss

@@ -1,6 +1,9 @@
-@import "src/variables";
-
 .theme-tab {
+  .deprecation-warning {
+    padding: 0.5em;
+    margin: 2em;
+  }
+
   padding-bottom: 2em;
 
   .preset-switcher {
@@ -12,13 +15,19 @@
     margin-right: 0.25em;
   }
 
+  .btn-group .btn {
+    margin: 0;
+  }
+
   .style-control {
     display: flex;
     align-items: baseline;
     margin-bottom: 5px;
 
     .label {
+      margin-right: 1em;
       flex: 1;
+      line-height: 2;
     }
 
     .opt {
@@ -36,20 +45,23 @@
       flex: 0;
 
       &[type="number"] {
-        min-width: 5em;
+        min-width: 9em;
+
+        &.-small {
+          min-width: 5em;
+        }
       }
 
       &[type="range"] {
         flex: 1;
-        min-width: 3em;
-        align-self: flex-start;
+        min-width: 9em;
+        align-self: center;
+        margin: 0 0.5em;
       }
-    }
 
-    &.disabled {
-      input,
-      select {
-        opacity: 0.5;
+      &[type="checkbox"] + i {
+        height: 1.1em;
+        align-self: center;
       }
     }
   }
@@ -159,111 +171,6 @@
     }
   }
 
-  .preview-container {
-    border-top: 1px dashed;
-    border-bottom: 1px dashed;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    margin: 1em 0;
-    padding: 1em;
-    background-color: var(--wallpaper);
-    background-image: var(--body-background-image);
-    background-size: cover;
-    background-position: 50% 50%;
-
-    .dummy {
-      .post {
-        font-family: var(--postFont);
-        display: flex;
-
-        .content {
-          flex: 1;
-
-          h4 {
-            margin-bottom: 0.25em;
-          }
-
-          .icons {
-            margin-top: 0.5em;
-            display: flex;
-
-            i {
-              margin-right: 1em;
-            }
-          }
-        }
-      }
-
-      .after-post {
-        margin-top: 1em;
-        display: flex;
-        align-items: center;
-      }
-
-      .avatar,
-      .avatar-alt {
-        background:
-          linear-gradient(
-            135deg,
-            #b8e1fc 0%,
-            #a9d2f3 10%,
-            #90bae4 25%,
-            #90bcea 37%,
-            #90bff0 50%,
-            #6ba8e5 51%,
-            #a2daf5 83%,
-            #bdf3fd 100%
-          );
-        color: black;
-        font-family: sans-serif;
-        text-align: center;
-        margin-right: 1em;
-      }
-
-      .avatar-alt {
-        flex: 0 auto;
-        margin-left: 28px;
-        font-size: 12px;
-        min-width: 20px;
-        min-height: 20px;
-        line-height: 20px;
-        border-radius: $fallback--avatarAltRadius;
-        border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-      }
-
-      .avatar {
-        flex: 0 auto;
-        width: 48px;
-        height: 48px;
-        font-size: 14px;
-        line-height: 48px;
-      }
-
-      .actions {
-        display: flex;
-        align-items: baseline;
-
-        .checkbox {
-          display: inline-flex;
-          align-items: baseline;
-          margin-right: 1em;
-          flex: 1;
-        }
-      }
-
-      .separator {
-        margin: 1em;
-        border-bottom: 1px solid;
-        border-color: $fallback--border;
-        border-color: var(--border, $fallback--border);
-      }
-
-      .btn {
-        min-width: 3em;
-      }
-    }
-  }
-
   .radius-item {
     flex-basis: auto;
   }
@@ -296,7 +203,7 @@
     border: 0;
     box-shadow: none;
     background: transparent;
-    color: var(--faint, $fallback--faint);
+    color: var(--textFaint);
     align-self: stretch;
   }
 
@@ -316,10 +223,6 @@
     max-width: 50em;
   }
 
-  .theme-preview-content {
-    padding: 20px;
-  }
-
   .theme-warning {
     display: flex;
     align-items: baseline;

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

@@ -1,5 +1,8 @@
 <template>
   <div class="theme-tab">
+    <div class="alert warning deprecation-warning">
+      {{ $t("settings.style.themes2_outdated") }}
+    </div>
     <div class="presets-container">
       <div class="save-load">
         <div
@@ -120,7 +123,22 @@
       </div>
     </div>
 
-    <preview :style="previewRules" />
+    <!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
+    <component
+      :is="'style'"
+      v-html="themeV3Preview"
+    />
+    <!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
+    <preview id="theme-preview" />
+
+    <div>
+      <button
+        class="btn button-default"
+        @click="updateTheme3Preview"
+      >
+        {{ $t("settings.style.update_preview") }}
+      </button>
+    </div>
 
     <keep-alive>
       <tab-switcher key="style-tweak">
@@ -156,7 +174,7 @@
             <OpacityInput
               v-model="bgOpacityLocal"
               name="bgOpacity"
-              :fallback="previewTheme.opacity.bg"
+              :fallback="previewTheme.opacity?.bg"
             />
             <ColorInput
               v-model="textColorLocal"
@@ -167,16 +185,16 @@
             <ColorInput
               v-model="accentColorLocal"
               name="accentColor"
-              :fallback="previewTheme.colors.link"
+              :fallback="previewTheme.colors?.link"
               :label="$t('settings.accent')"
-              :show-optional-tickbox="typeof linkColorLocal !== 'undefined'"
+              :show-optional-checkbox="typeof linkColorLocal !== 'undefined'"
             />
             <ColorInput
               v-model="linkColorLocal"
               name="linkColor"
-              :fallback="previewTheme.colors.accent"
+              :fallback="previewTheme.colors?.accent"
               :label="$t('settings.links')"
-              :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
+              :show-optional-checkbox="typeof accentColorLocal !== 'undefined'"
             />
             <ContrastRatio :contrast="previewContrast.bgLink" />
           </div>
@@ -190,13 +208,13 @@
               v-model="fgTextColorLocal"
               name="fgTextColor"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.fgText"
+              :fallback="previewTheme.colors?.fgText"
             />
             <ColorInput
               v-model="fgLinkColorLocal"
               name="fgLinkColor"
               :label="$t('settings.links')"
-              :fallback="previewTheme.colors.fgLink"
+              :fallback="previewTheme.colors?.fgLink"
             />
             <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
           </div>
@@ -256,14 +274,14 @@
             <ColorInput
               v-model="postLinkColorLocal"
               name="postLinkColor"
-              :fallback="previewTheme.colors.accent"
+              :fallback="previewTheme.colors?.accent"
               :label="$t('settings.links')"
             />
             <ContrastRatio :contrast="previewContrast.postLink" />
             <ColorInput
               v-model="postGreentextColorLocal"
               name="postGreentextColor"
-              :fallback="previewTheme.colors.cGreen"
+              :fallback="previewTheme.colors?.cGreen"
               :label="$t('settings.greentext')"
             />
             <ContrastRatio :contrast="previewContrast.postGreentext" />
@@ -272,13 +290,13 @@
               v-model="alertErrorColorLocal"
               name="alertError"
               :label="$t('settings.style.advanced_colors.alert_error')"
-              :fallback="previewTheme.colors.alertError"
+              :fallback="previewTheme.colors?.alertError"
             />
             <ColorInput
               v-model="alertErrorTextColorLocal"
               name="alertErrorText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.alertErrorText"
+              :fallback="previewTheme.colors?.alertErrorText"
             />
             <ContrastRatio
               :contrast="previewContrast.alertErrorText"
@@ -288,13 +306,13 @@
               v-model="alertWarningColorLocal"
               name="alertWarning"
               :label="$t('settings.style.advanced_colors.alert_warning')"
-              :fallback="previewTheme.colors.alertWarning"
+              :fallback="previewTheme.colors?.alertWarning"
             />
             <ColorInput
               v-model="alertWarningTextColorLocal"
               name="alertWarningText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.alertWarningText"
+              :fallback="previewTheme.colors?.alertWarningText"
             />
             <ContrastRatio
               :contrast="previewContrast.alertWarningText"
@@ -304,13 +322,13 @@
               v-model="alertNeutralColorLocal"
               name="alertNeutral"
               :label="$t('settings.style.advanced_colors.alert_neutral')"
-              :fallback="previewTheme.colors.alertNeutral"
+              :fallback="previewTheme.colors?.alertNeutral"
             />
             <ColorInput
               v-model="alertNeutralTextColorLocal"
               name="alertNeutralText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.alertNeutralText"
+              :fallback="previewTheme.colors?.alertNeutralText"
             />
             <ContrastRatio
               :contrast="previewContrast.alertNeutralText"
@@ -319,7 +337,7 @@
             <OpacityInput
               v-model="alertOpacityLocal"
               name="alertOpacity"
-              :fallback="previewTheme.opacity.alert"
+              :fallback="previewTheme.opacity?.alert"
             />
           </div>
           <div class="color-item">
@@ -328,13 +346,13 @@
               v-model="badgeNotificationColorLocal"
               name="badgeNotification"
               :label="$t('settings.style.advanced_colors.badge_notification')"
-              :fallback="previewTheme.colors.badgeNotification"
+              :fallback="previewTheme.colors?.badgeNotification"
             />
             <ColorInput
               v-model="badgeNotificationTextColorLocal"
               name="badgeNotificationText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.badgeNotificationText"
+              :fallback="previewTheme.colors?.badgeNotificationText"
             />
             <ContrastRatio
               :contrast="previewContrast.badgeNotificationText"
@@ -346,19 +364,19 @@
             <ColorInput
               v-model="panelColorLocal"
               name="panelColor"
-              :fallback="previewTheme.colors.panel"
+              :fallback="previewTheme.colors?.panel"
               :label="$t('settings.background')"
             />
             <OpacityInput
               v-model="panelOpacityLocal"
               name="panelOpacity"
-              :fallback="previewTheme.opacity.panel"
+              :fallback="previewTheme.opacity?.panel"
               :disabled="panelColorLocal === 'transparent'"
             />
             <ColorInput
               v-model="panelTextColorLocal"
               name="panelTextColor"
-              :fallback="previewTheme.colors.panelText"
+              :fallback="previewTheme.colors?.panelText"
               :label="$t('settings.text')"
             />
             <ContrastRatio
@@ -368,7 +386,7 @@
             <ColorInput
               v-model="panelLinkColorLocal"
               name="panelLinkColor"
-              :fallback="previewTheme.colors.panelLink"
+              :fallback="previewTheme.colors?.panelLink"
               :label="$t('settings.links')"
             />
             <ContrastRatio
@@ -381,20 +399,20 @@
             <ColorInput
               v-model="topBarColorLocal"
               name="topBarColor"
-              :fallback="previewTheme.colors.topBar"
+              :fallback="previewTheme.colors?.topBar"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="topBarTextColorLocal"
               name="topBarTextColor"
-              :fallback="previewTheme.colors.topBarText"
+              :fallback="previewTheme.colors?.topBarText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.topBarText" />
             <ColorInput
               v-model="topBarLinkColorLocal"
               name="topBarLinkColor"
-              :fallback="previewTheme.colors.topBarLink"
+              :fallback="previewTheme.colors?.topBarLink"
               :label="$t('settings.links')"
             />
             <ContrastRatio :contrast="previewContrast.topBarLink" />
@@ -404,19 +422,19 @@
             <ColorInput
               v-model="inputColorLocal"
               name="inputColor"
-              :fallback="previewTheme.colors.input"
+              :fallback="previewTheme.colors?.input"
               :label="$t('settings.background')"
             />
             <OpacityInput
               v-model="inputOpacityLocal"
               name="inputOpacity"
-              :fallback="previewTheme.opacity.input"
+              :fallback="previewTheme.opacity?.input"
               :disabled="inputColorLocal === 'transparent'"
             />
             <ColorInput
               v-model="inputTextColorLocal"
               name="inputTextColor"
-              :fallback="previewTheme.colors.inputText"
+              :fallback="previewTheme.colors?.inputText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.inputText" />
@@ -426,33 +444,33 @@
             <ColorInput
               v-model="btnColorLocal"
               name="btnColor"
-              :fallback="previewTheme.colors.btn"
+              :fallback="previewTheme.colors?.btn"
               :label="$t('settings.background')"
             />
             <OpacityInput
               v-model="btnOpacityLocal"
               name="btnOpacity"
-              :fallback="previewTheme.opacity.btn"
+              :fallback="previewTheme.opacity?.btn"
               :disabled="btnColorLocal === 'transparent'"
             />
             <ColorInput
               v-model="btnTextColorLocal"
               name="btnTextColor"
-              :fallback="previewTheme.colors.btnText"
+              :fallback="previewTheme.colors?.btnText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.btnText" />
             <ColorInput
               v-model="btnPanelTextColorLocal"
               name="btnPanelTextColor"
-              :fallback="previewTheme.colors.btnPanelText"
+              :fallback="previewTheme.colors?.btnPanelText"
               :label="$t('settings.style.advanced_colors.panel_header')"
             />
             <ContrastRatio :contrast="previewContrast.btnPanelText" />
             <ColorInput
               v-model="btnTopBarTextColorLocal"
               name="btnTopBarTextColor"
-              :fallback="previewTheme.colors.btnTopBarText"
+              :fallback="previewTheme.colors?.btnTopBarText"
               :label="$t('settings.style.advanced_colors.top_bar')"
             />
             <ContrastRatio :contrast="previewContrast.btnTopBarText" />
@@ -460,27 +478,27 @@
             <ColorInput
               v-model="btnPressedColorLocal"
               name="btnPressedColor"
-              :fallback="previewTheme.colors.btnPressed"
+              :fallback="previewTheme.colors?.btnPressed"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="btnPressedTextColorLocal"
               name="btnPressedTextColor"
-              :fallback="previewTheme.colors.btnPressedText"
+              :fallback="previewTheme.colors?.btnPressedText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.btnPressedText" />
             <ColorInput
               v-model="btnPressedPanelTextColorLocal"
               name="btnPressedPanelTextColor"
-              :fallback="previewTheme.colors.btnPressedPanelText"
+              :fallback="previewTheme.colors?.btnPressedPanelText"
               :label="$t('settings.style.advanced_colors.panel_header')"
             />
             <ContrastRatio :contrast="previewContrast.btnPressedPanelText" />
             <ColorInput
               v-model="btnPressedTopBarTextColorLocal"
               name="btnPressedTopBarTextColor"
-              :fallback="previewTheme.colors.btnPressedTopBarText"
+              :fallback="previewTheme.colors?.btnPressedTopBarText"
               :label="$t('settings.style.advanced_colors.top_bar')"
             />
             <ContrastRatio :contrast="previewContrast.btnPressedTopBarText" />
@@ -488,52 +506,52 @@
             <ColorInput
               v-model="btnDisabledColorLocal"
               name="btnDisabledColor"
-              :fallback="previewTheme.colors.btnDisabled"
+              :fallback="previewTheme.colors?.btnDisabled"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="btnDisabledTextColorLocal"
               name="btnDisabledTextColor"
-              :fallback="previewTheme.colors.btnDisabledText"
+              :fallback="previewTheme.colors?.btnDisabledText"
               :label="$t('settings.text')"
             />
             <ColorInput
               v-model="btnDisabledPanelTextColorLocal"
               name="btnDisabledPanelTextColor"
-              :fallback="previewTheme.colors.btnDisabledPanelText"
+              :fallback="previewTheme.colors?.btnDisabledPanelText"
               :label="$t('settings.style.advanced_colors.panel_header')"
             />
             <ColorInput
               v-model="btnDisabledTopBarTextColorLocal"
               name="btnDisabledTopBarTextColor"
-              :fallback="previewTheme.colors.btnDisabledTopBarText"
+              :fallback="previewTheme.colors?.btnDisabledTopBarText"
               :label="$t('settings.style.advanced_colors.top_bar')"
             />
             <h5>{{ $t('settings.style.advanced_colors.toggled') }}</h5>
             <ColorInput
               v-model="btnToggledColorLocal"
               name="btnToggledColor"
-              :fallback="previewTheme.colors.btnToggled"
+              :fallback="previewTheme.colors?.btnToggled"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="btnToggledTextColorLocal"
               name="btnToggledTextColor"
-              :fallback="previewTheme.colors.btnToggledText"
+              :fallback="previewTheme.colors?.btnToggledText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.btnToggledText" />
             <ColorInput
               v-model="btnToggledPanelTextColorLocal"
               name="btnToggledPanelTextColor"
-              :fallback="previewTheme.colors.btnToggledPanelText"
+              :fallback="previewTheme.colors?.btnToggledPanelText"
               :label="$t('settings.style.advanced_colors.panel_header')"
             />
             <ContrastRatio :contrast="previewContrast.btnToggledPanelText" />
             <ColorInput
               v-model="btnToggledTopBarTextColorLocal"
               name="btnToggledTopBarTextColor"
-              :fallback="previewTheme.colors.btnToggledTopBarText"
+              :fallback="previewTheme.colors?.btnToggledTopBarText"
               :label="$t('settings.style.advanced_colors.top_bar')"
             />
             <ContrastRatio :contrast="previewContrast.btnToggledTopBarText" />
@@ -543,20 +561,20 @@
             <ColorInput
               v-model="tabColorLocal"
               name="tabColor"
-              :fallback="previewTheme.colors.tab"
+              :fallback="previewTheme.colors?.tab"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="tabTextColorLocal"
               name="tabTextColor"
-              :fallback="previewTheme.colors.tabText"
+              :fallback="previewTheme.colors?.tabText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.tabText" />
             <ColorInput
               v-model="tabActiveTextColorLocal"
               name="tabActiveTextColor"
-              :fallback="previewTheme.colors.tabActiveText"
+              :fallback="previewTheme.colors?.tabActiveText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.tabActiveText" />
@@ -566,13 +584,13 @@
             <ColorInput
               v-model="borderColorLocal"
               name="borderColor"
-              :fallback="previewTheme.colors.border"
+              :fallback="previewTheme.colors?.border"
               :label="$t('settings.style.common.color')"
             />
             <OpacityInput
               v-model="borderOpacityLocal"
               name="borderOpacity"
-              :fallback="previewTheme.opacity.border"
+              :fallback="previewTheme.opacity?.border"
               :disabled="borderColorLocal === 'transparent'"
             />
           </div>
@@ -581,25 +599,25 @@
             <ColorInput
               v-model="faintColorLocal"
               name="faintColor"
-              :fallback="previewTheme.colors.faint"
+              :fallback="previewTheme.colors?.faint"
               :label="$t('settings.text')"
             />
             <ColorInput
               v-model="faintLinkColorLocal"
               name="faintLinkColor"
-              :fallback="previewTheme.colors.faintLink"
+              :fallback="previewTheme.colors?.faintLink"
               :label="$t('settings.links')"
             />
             <ColorInput
               v-model="panelFaintColorLocal"
               name="panelFaintColor"
-              :fallback="previewTheme.colors.panelFaint"
+              :fallback="previewTheme.colors?.panelFaint"
               :label="$t('settings.style.advanced_colors.panel_header')"
             />
             <OpacityInput
               v-model="faintOpacityLocal"
               name="faintOpacity"
-              :fallback="previewTheme.opacity.faint"
+              :fallback="previewTheme.opacity?.faint"
             />
           </div>
           <div class="color-item">
@@ -608,12 +626,12 @@
               v-model="underlayColorLocal"
               name="underlay"
               :label="$t('settings.style.advanced_colors.underlay')"
-              :fallback="previewTheme.colors.underlay"
+              :fallback="previewTheme.colors?.underlay"
             />
             <OpacityInput
               v-model="underlayOpacityLocal"
               name="underlayOpacity"
-              :fallback="previewTheme.opacity.underlay"
+              :fallback="previewTheme.opacity?.underlay"
               :disabled="underlayOpacityLocal === 'transparent'"
             />
           </div>
@@ -623,7 +641,7 @@
               v-model="wallpaperColorLocal"
               name="wallpaper"
               :label="$t('settings.style.advanced_colors.wallpaper')"
-              :fallback="previewTheme.colors.wallpaper"
+              :fallback="previewTheme.colors?.wallpaper"
             />
           </div>
           <div class="color-item">
@@ -632,13 +650,13 @@
               v-model="pollColorLocal"
               name="poll"
               :label="$t('settings.background')"
-              :fallback="previewTheme.colors.poll"
+              :fallback="previewTheme.colors?.poll"
             />
             <ColorInput
               v-model="pollTextColorLocal"
               name="pollText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.pollText"
+              :fallback="previewTheme.colors?.pollText"
             />
           </div>
           <div class="color-item">
@@ -647,7 +665,7 @@
               v-model="iconColorLocal"
               name="icon"
               :label="$t('settings.style.advanced_colors.icons')"
-              :fallback="previewTheme.colors.icon"
+              :fallback="previewTheme.colors?.icon"
             />
           </div>
           <div class="color-item">
@@ -656,20 +674,20 @@
               v-model="highlightColorLocal"
               name="highlight"
               :label="$t('settings.background')"
-              :fallback="previewTheme.colors.highlight"
+              :fallback="previewTheme.colors?.highlight"
             />
             <ColorInput
               v-model="highlightTextColorLocal"
               name="highlightText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.highlightText"
+              :fallback="previewTheme.colors?.highlightText"
             />
             <ContrastRatio :contrast="previewContrast.highlightText" />
             <ColorInput
               v-model="highlightLinkColorLocal"
               name="highlightLink"
               :label="$t('settings.links')"
-              :fallback="previewTheme.colors.highlightLink"
+              :fallback="previewTheme.colors?.highlightLink"
             />
             <ContrastRatio :contrast="previewContrast.highlightLink" />
           </div>
@@ -679,26 +697,26 @@
               v-model="popoverColorLocal"
               name="popover"
               :label="$t('settings.background')"
-              :fallback="previewTheme.colors.popover"
+              :fallback="previewTheme.colors?.popover"
             />
             <OpacityInput
               v-model="popoverOpacityLocal"
               name="popoverOpacity"
-              :fallback="previewTheme.opacity.popover"
+              :fallback="previewTheme.opacity?.popover"
               :disabled="popoverOpacityLocal === 'transparent'"
             />
             <ColorInput
               v-model="popoverTextColorLocal"
               name="popoverText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.popoverText"
+              :fallback="previewTheme.colors?.popoverText"
             />
             <ContrastRatio :contrast="previewContrast.popoverText" />
             <ColorInput
               v-model="popoverLinkColorLocal"
               name="popoverLink"
               :label="$t('settings.links')"
-              :fallback="previewTheme.colors.popoverLink"
+              :fallback="previewTheme.colors?.popoverLink"
             />
             <ContrastRatio :contrast="previewContrast.popoverLink" />
           </div>
@@ -708,20 +726,20 @@
               v-model="selectedPostColorLocal"
               name="selectedPost"
               :label="$t('settings.background')"
-              :fallback="previewTheme.colors.selectedPost"
+              :fallback="previewTheme.colors?.selectedPost"
             />
             <ColorInput
               v-model="selectedPostTextColorLocal"
               name="selectedPostText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.selectedPostText"
+              :fallback="previewTheme.colors?.selectedPostText"
             />
             <ContrastRatio :contrast="previewContrast.selectedPostText" />
             <ColorInput
               v-model="selectedPostLinkColorLocal"
               name="selectedPostLink"
               :label="$t('settings.links')"
-              :fallback="previewTheme.colors.selectedPostLink"
+              :fallback="previewTheme.colors?.selectedPostLink"
             />
             <ContrastRatio :contrast="previewContrast.selectedPostLink" />
           </div>
@@ -731,20 +749,20 @@
               v-model="selectedMenuColorLocal"
               name="selectedMenu"
               :label="$t('settings.background')"
-              :fallback="previewTheme.colors.selectedMenu"
+              :fallback="previewTheme.colors?.selectedMenu"
             />
             <ColorInput
               v-model="selectedMenuTextColorLocal"
               name="selectedMenuText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.selectedMenuText"
+              :fallback="previewTheme.colors?.selectedMenuText"
             />
             <ContrastRatio :contrast="previewContrast.selectedMenuText" />
             <ColorInput
               v-model="selectedMenuLinkColorLocal"
               name="selectedMenuLink"
               :label="$t('settings.links')"
-              :fallback="previewTheme.colors.selectedMenuLink"
+              :fallback="previewTheme.colors?.selectedMenuLink"
             />
             <ContrastRatio :contrast="previewContrast.selectedMenuLink" />
           </div>
@@ -753,57 +771,57 @@
             <ColorInput
               v-model="chatBgColorLocal"
               name="chatBgColor"
-              :fallback="previewTheme.colors.bg"
+              :fallback="previewTheme.colors?.bg"
               :label="$t('settings.background')"
             />
             <h5>{{ $t('settings.style.advanced_colors.chat.incoming') }}</h5>
             <ColorInput
               v-model="chatMessageIncomingBgColorLocal"
               name="chatMessageIncomingBgColor"
-              :fallback="previewTheme.colors.bg"
+              :fallback="previewTheme.colors?.bg"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="chatMessageIncomingTextColorLocal"
               name="chatMessageIncomingTextColor"
-              :fallback="previewTheme.colors.text"
+              :fallback="previewTheme.colors?.text"
               :label="$t('settings.text')"
             />
             <ColorInput
               v-model="chatMessageIncomingLinkColorLocal"
               name="chatMessageIncomingLinkColor"
-              :fallback="previewTheme.colors.link"
+              :fallback="previewTheme.colors?.link"
               :label="$t('settings.links')"
             />
             <ColorInput
               v-model="chatMessageIncomingBorderColorLocal"
               name="chatMessageIncomingBorderLinkColor"
-              :fallback="previewTheme.colors.fg"
+              :fallback="previewTheme.colors?.fg"
               :label="$t('settings.style.advanced_colors.chat.border')"
             />
             <h5>{{ $t('settings.style.advanced_colors.chat.outgoing') }}</h5>
             <ColorInput
               v-model="chatMessageOutgoingBgColorLocal"
               name="chatMessageOutgoingBgColor"
-              :fallback="previewTheme.colors.bg"
+              :fallback="previewTheme.colors?.bg"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="chatMessageOutgoingTextColorLocal"
               name="chatMessageOutgoingTextColor"
-              :fallback="previewTheme.colors.text"
+              :fallback="previewTheme.colors?.text"
               :label="$t('settings.text')"
             />
             <ColorInput
               v-model="chatMessageOutgoingLinkColorLocal"
               name="chatMessageOutgoingLinkColor"
-              :fallback="previewTheme.colors.link"
+              :fallback="previewTheme.colors?.link"
               :label="$t('settings.links')"
             />
             <ColorInput
               v-model="chatMessageOutgoingBorderColorLocal"
               name="chatMessageOutgoingBorderLinkColor"
-              :fallback="previewTheme.colors.bg"
+              :fallback="previewTheme.colors?.bg"
               :label="$t('settings.style.advanced_colors.chat.border')"
             />
           </div>
@@ -826,7 +844,7 @@
             v-model="btnRadiusLocal"
             name="btnRadius"
             :label="$t('settings.btnRadius')"
-            :fallback="previewTheme.radii.btn"
+            :fallback="previewTheme.radii?.btn"
             max="16"
             hard-min="0"
           />
@@ -834,7 +852,7 @@
             v-model="inputRadiusLocal"
             name="inputRadius"
             :label="$t('settings.inputRadius')"
-            :fallback="previewTheme.radii.input"
+            :fallback="previewTheme.radii?.input"
             max="9"
             hard-min="0"
           />
@@ -842,7 +860,7 @@
             v-model="checkboxRadiusLocal"
             name="checkboxRadius"
             :label="$t('settings.checkboxRadius')"
-            :fallback="previewTheme.radii.checkbox"
+            :fallback="previewTheme.radii?.checkbox"
             max="16"
             hard-min="0"
           />
@@ -850,7 +868,7 @@
             v-model="panelRadiusLocal"
             name="panelRadius"
             :label="$t('settings.panelRadius')"
-            :fallback="previewTheme.radii.panel"
+            :fallback="previewTheme.radii?.panel"
             max="50"
             hard-min="0"
           />
@@ -858,7 +876,7 @@
             v-model="avatarRadiusLocal"
             name="avatarRadius"
             :label="$t('settings.avatarRadius')"
-            :fallback="previewTheme.radii.avatar"
+            :fallback="previewTheme.radii?.avatar"
             max="28"
             hard-min="0"
           />
@@ -866,7 +884,7 @@
             v-model="avatarAltRadiusLocal"
             name="avatarAltRadius"
             :label="$t('settings.avatarAltRadius')"
-            :fallback="previewTheme.radii.avatarAlt"
+            :fallback="previewTheme.radii?.avatarAlt"
             max="28"
             hard-min="0"
           />
@@ -874,7 +892,7 @@
             v-model="attachmentRadiusLocal"
             name="attachmentRadius"
             :label="$t('settings.attachmentRadius')"
-            :fallback="previewTheme.radii.attachment"
+            :fallback="previewTheme.radii?.attachment"
             max="50"
             hard-min="0"
           />
@@ -882,7 +900,7 @@
             v-model="tooltipRadiusLocal"
             name="tooltipRadius"
             :label="$t('settings.tooltipRadius')"
-            :fallback="previewTheme.radii.tooltip"
+            :fallback="previewTheme.radii?.tooltip"
             max="50"
             hard-min="0"
           />
@@ -890,7 +908,7 @@
             v-model="chatMessageRadiusLocal"
             name="chatMessageRadius"
             :label="$t('settings.chatMessageRadius')"
-            :fallback="previewTheme.radii.chatMessage || 2"
+            :fallback="previewTheme.radii?.chatMessage || 2"
             max="50"
             hard-min="0"
           />
@@ -919,24 +937,14 @@
               </Select>
             </div>
             <div class="override">
-              <label
-                for="override"
-                class="label"
-              >
-                {{ $t('settings.style.shadows.override') }}
-              </label>
-              {{ ' ' }}
-              <input
+              <Checkbox
                 id="override"
                 v-model="currentShadowOverriden"
                 name="override"
                 class="input-override"
-                type="checkbox"
               >
-              <label
-                class="checkbox-label"
-                for="override"
-              />
+                {{ $t('settings.style.shadows.override') }}
+              </Checkbox>
             </div>
             <button
               class="btn button-default"
@@ -947,38 +955,12 @@
           </div>
           <ShadowControl
             v-model="currentShadow"
-            :ready="!!currentShadowFallback"
+            :separate-inset="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"
             :fallback="currentShadowFallback"
+            :static-vars="previewTheme.colors"
+            :compact="true"
           />
-          <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
-            <i18n-t
-              scope="global"
-              keypath="settings.style.shadows.filter_hint.always_drop_shadow"
-              tag="p"
-            >
-              <code>filter: drop-shadow()</code>
-            </i18n-t>
-            <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
-            <i18n-t
-              scope="global"
-              keypath="settings.style.shadows.filter_hint.drop_shadow_syntax"
-              tag="p"
-            >
-              <code>drop-shadow</code>
-              <code>spread-radius</code>
-              <code>inset</code>
-            </i18n-t>
-            <i18n-t
-              scope="global"
-              keypath="settings.style.shadows.filter_hint.inset_classic"
-              tag="p"
-            >
-              <code>box-shadow</code>
-            </i18n-t>
-            <p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
-          </div>
         </div>
-
         <div
           :label="$t('settings.style.fonts._tab_label')"
           class="fonts-container"
@@ -996,26 +978,26 @@
             v-model="fontsLocal.interface"
             name="ui"
             :label="$t('settings.style.fonts.components.interface')"
-            :fallback="previewTheme.fonts.interface"
+            :fallback="previewTheme.fonts?.interface"
             no-inherit="1"
           />
           <FontControl
             v-model="fontsLocal.input"
             name="input"
             :label="$t('settings.style.fonts.components.input')"
-            :fallback="previewTheme.fonts.input"
+            :fallback="previewTheme.fonts?.input"
           />
           <FontControl
             v-model="fontsLocal.post"
             name="post"
             :label="$t('settings.style.fonts.components.post')"
-            :fallback="previewTheme.fonts.post"
+            :fallback="previewTheme.fonts?.post"
           />
           <FontControl
             v-model="fontsLocal.postCode"
             name="postCode"
             :label="$t('settings.style.fonts.components.postCode')"
-            :fallback="previewTheme.fonts.postCode"
+            :fallback="previewTheme.fonts?.postCode"
           />
         </div>
       </tab-switcher>

src/components/settings_modal/tabs/version_tab.js

@@ -1,22 +1,17 @@
-import { extractCommit } from 'src/services/version/version.service'
-
 const pleromaFeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma-fe/commit/'
-const pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/'
 
 const VersionTab = {
   data () {
     const instance = this.$store.state.instance
     return {
       backendVersion: instance.backendVersion,
+      backendRepository: instance.backendRepository,
       frontendVersion: instance.frontendVersion
     }
   },
   computed: {
     frontendVersionLink () {
       return pleromaFeCommitUrl + this.frontendVersion
-    },
-    backendVersionLink () {
-      return pleromaBeCommitUrl + extractCommit(this.backendVersion)
     }
   }
 }

src/components/settings_modal/tabs/version_tab.vue

@@ -7,7 +7,7 @@
           <ul class="option-list">
             <li>
               <a
-                :href="backendVersionLink"
+                :href="backendRepository"
                 target="_blank"
               >{{ backendVersion }}</a>
             </li>