pleroma-fe/src/stores/interface.js

import { defineStore } from 'pinia'

import { CURRENT_VERSION, generatePreset } from 'src/services/theme_data/theme_data.service.js'
import { getResourcesIndex, applyTheme, tryLoadCache } from '../services/style_setter/style_setter.js'
import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
import { deserialize } from '../services/theme_data/iss_deserializer.js'

export const useInterfaceStore = defineStore('interface', {
  state: () => ({
    localFonts: null,
    themeApplied: false,
    themeChangeInProgress: false,
    themeVersion: 'v3',
    styleNameUsed: null,
    styleDataUsed: null,
    useStylePalette: false, // hack for applying styles from appearance tab
    paletteNameUsed: null,
    paletteDataUsed: null,
    themeNameUsed: null,
    themeDataUsed: null,
    temporaryChangesTimeoutId: null, // used for temporary options that revert after a timeout
    temporaryChangesConfirm: () => {}, // used for applying temporary options
    temporaryChangesRevert: () => {}, // used for reverting temporary options
    settingsModalState: 'hidden',
    settingsModalLoadedUser: false,
    settingsModalLoadedAdmin: false,
    settingsModalTargetTab: null,
    settingsModalMode: 'user',
    settings: {
      currentSaveStateNotice: null,
      noticeClearTimeout: null,
      notificationPermission: null
    },
    browserSupport: {
      cssFilter: window.CSS && window.CSS.supports && (
        window.CSS.supports('filter', 'drop-shadow(0 0)') ||
        window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
      )
    },
    layoutType: 'normal',
    globalNotices: [],
    layoutHeight: 0,
    lastTimeline: null
  }),
  actions: {
    setPageTitle (option = '') {
      try {
        document.title = `${option} ${window.vuex.state.instance.name}`
      } catch (error) {
        console.error(`${error}`)
      }
    },
    settingsSaved ({ success, error }) {
      if (success) {
        if (this.noticeClearTimeout) {
          clearTimeout(this.noticeClearTimeout)
        }
        this.settings.currentSaveStateNotice = { error: false, data: success }
        this.settings.noticeClearTimeout = setTimeout(() => delete this.settings.currentSaveStateNotice, 2000)
      } else {
        this.settings.currentSaveStateNotice = { error: true, errorData: error }
      }
    },
    setNotificationPermission (permission) {
      this.notificationPermission = permission
    },
    closeSettingsModal () {
      this.settingsModalState = 'hidden'
    },
    openSettingsModal (value) {
      this.settingsModalMode = value
      this.settingsModalState = 'visible'
      if (value === 'user') {
        if (!this.settingsModalLoadedUser) {
          this.settingsModalLoadedUser = true
        }
      } else if (value === 'admin') {
        if (!this.settingsModalLoadedAdmin) {
          this.settingsModalLoadedAdmin = true
        }
      }
    },
    togglePeekSettingsModal () {
      switch (this.settingsModalState) {
        case 'minimized':
          this.settingsModalState = 'visible'
          return
        case 'visible':
          this.settingsModalState = 'minimized'
          return
        default:
          throw new Error('Illegal minimization state of settings modal')
      }
    },
    clearSettingsModalTargetTab () {
      this.settingsModalTargetTab = null
    },
    openSettingsModalTab (value) {
      this.settingsModalTargetTab = value
      this.openSettingsModal()
    },
    removeGlobalNotice (notice) {
      this.globalNotices = this.globalNotices.filter(n => n !== notice)
    },
    pushGlobalNotice (
      {
        messageKey,
        messageArgs = {},
        level = 'error',
        timeout = 0
      }) {
      const notice = {
        messageKey,
        messageArgs,
        level
      }

      this.globalNotices.push(notice)

      // Adding a new element to array wraps it in a Proxy, which breaks the comparison
      // TODO: Generate UUID or something instead or relying on !== operator?
      const newNotice = this.globalNotices[this.globalNotices.length - 1]
      if (timeout) {
        setTimeout(() => this.removeGlobalNotice(newNotice), timeout)
      }

      return newNotice
    },
    setLayoutHeight (value) {
      this.layoutHeight = value
    },
    setLayoutWidth (value) {
      let width = value
      if (value !== undefined) {
        this.layoutWidth = value
      } else {
        width = this.layoutWidth
      }

      const mobileLayout = width <= 800
      const normalOrMobile = mobileLayout ? 'mobile' : 'normal'
      const { thirdColumnMode } = window.vuex.getters.mergedConfig
      if (thirdColumnMode === 'none' || !window.vuex.state.users.currentUser) {
        this.layoutType = normalOrMobile
      } else {
        const wideLayout = width >= 1300
        this.layoutType = wideLayout ? 'wide' : normalOrMobile
      }
    },
    setLastTimeline (value) {
      this.lastTimeline = value
    },
    async fetchPalettesIndex () {
      try {
        const value = await getResourcesIndex('/static/palettes/index.json')
        window.vuex.commit('setInstanceOption', { name: 'palettesIndex', value })
        return value
      } catch (e) {
        console.error('Could not fetch palettes index', e)
        window.vuex.commit('setInstanceOption', { name: 'palettesIndex', value: { _error: e } })
        return Promise.resolve({})
      }
    },
    setPalette (value) {
      this.resetThemeV3Palette()
      this.resetThemeV2()

      window.vuex.commit('setOption', { name: 'palette', value })

      this.applyTheme({ recompile: true })
    },
    setPaletteCustom (value) {
      this.resetThemeV3Palette()
      this.resetThemeV2()

      window.vuex.commit('setOption', { name: 'paletteCustomData', value })

      this.applyTheme({ recompile: true })
    },
    async fetchStylesIndex () {
      try {
        const value = await getResourcesIndex(
          '/static/styles/index.json',
          deserialize
        )
        window.vuex.commit('setInstanceOption', { name: 'stylesIndex', value })
        return value
      } catch (e) {
        console.error('Could not fetch styles index', e)
        window.vuex.commit('setInstanceOption', { name: 'stylesIndex', value: { _error: e } })
        return Promise.resolve({})
      }
    },
    setStyle (value) {
      this.resetThemeV3()
      this.resetThemeV2()
      this.resetThemeV3Palette()

      window.vuex.commit('setOption', { name: 'style', value })
      this.useStylePalette = true

      this.applyTheme({ recompile: true }).then(() => {
        this.useStylePalette = false
      })
    },
    setStyleCustom (value) {
      this.resetThemeV3()
      this.resetThemeV2()
      this.resetThemeV3Palette()

      window.vuex.commit('setOption', { name: 'styleCustomData', value })

      this.useStylePalette = true
      this.applyTheme({ recompile: true }).then(() => {
        this.useStylePalette = false
      })
    },
    async fetchThemesIndex () {
      try {
        const value = await getResourcesIndex('/static/styles.json')
        window.vuex.commit('setInstanceOption', { name: 'themesIndex', value })
        return value
      } catch (e) {
        console.error('Could not fetch themes index', e)
        window.vuex.commit('setInstanceOption', { name: 'themesIndex', value: { _error: e } })
        return Promise.resolve({})
      }
    },
    setTheme (value) {
      this.resetThemeV3()
      this.resetThemeV3Palette()
      this.resetThemeV2()

      window.vuex.commit('setOption', { name: 'theme', value })

      this.applyTheme({ recompile: true })
    },
    setThemeCustom (value) {
      this.resetThemeV3()
      this.resetThemeV3Palette()
      this.resetThemeV2()

      window.vuex.commit('setOption', { name: 'customTheme', value })
      window.vuex.commit('setOption', { name: 'customThemeSource', value })

      this.applyTheme({ recompile: true })
    },
    resetThemeV3 () {
      window.vuex.commit('setOption', { name: 'style', value: null })
      window.vuex.commit('setOption', { name: 'styleCustomData', value: null })
    },
    resetThemeV3Palette () {
      window.vuex.commit('setOption', { name: 'palette', value: null })
      window.vuex.commit('setOption', { name: 'paletteCustomData', value: null })
    },
    resetThemeV2 () {
      window.vuex.commit('setOption', { name: 'theme', value: null })
      window.vuex.commit('setOption', { name: 'customTheme', value: null })
      window.vuex.commit('setOption', { name: 'customThemeSource', value: null })
    },
    async getThemeData () {
      const getData = async (resource, index, customData, name) => {
        const capitalizedResource = resource[0].toUpperCase() + resource.slice(1)
        const result = {}

        if (customData) {
          result.nameUsed = 'custom' // custom data overrides name
          result.dataUsed = customData
        } else {
          result.nameUsed = name

          if (result.nameUsed == null) {
            result.dataUsed = null
            return result
          }

          let fetchFunc = index[result.nameUsed]
          // Fallbacks
          if (!fetchFunc) {
            if (resource === 'style' || resource === 'palette') {
              return result
            }
            const newName = Object.keys(index)[0]
            fetchFunc = index[newName]
            console.warn(`${capitalizedResource} with id '${this.styleNameUsed}' not found, trying back to '${newName}'`)
            if (!fetchFunc) {
              console.warn(`${capitalizedResource} doesn't have a fallback, defaulting to stock.`)
              fetchFunc = () => Promise.resolve(null)
            }
          }
          result.dataUsed = await fetchFunc()
        }
        return result
      }

      const {
        style: instanceStyleName,
        palette: instancePaletteName
      } = window.vuex.state.instance

      let {
        theme: instanceThemeV2Name,
        themesIndex,
        stylesIndex,
        palettesIndex
      } = window.vuex.state.instance

      const {
        style: userStyleName,
        styleCustomData: userStyleCustomData,
        palette: userPaletteName,
        paletteCustomData: userPaletteCustomData
      } = window.vuex.state.config

      let {
        theme: userThemeV2Name,
        customTheme: userThemeV2Snapshot,
        customThemeSource: userThemeV2Source
      } = window.vuex.state.config

      let majorVersionUsed

      console.debug(
        `User V3 palette: ${userPaletteName}, style: ${userStyleName} , custom: ${!!userStyleCustomData}`
      )
      console.debug(
        `User V2 name: ${userThemeV2Name}, source: ${!!userThemeV2Source}, snapshot: ${!!userThemeV2Snapshot}`
      )

      console.debug(`Instance V3 palette: ${instancePaletteName}, style: ${instanceStyleName}`)
      console.debug('Instance V2 theme: ' + instanceThemeV2Name)

      if (userPaletteName || userPaletteCustomData ||
          userStyleName || userStyleCustomData ||
          (
            // User V2 overrides instance V3
            (instancePaletteName ||
             instanceStyleName) &&
              instanceThemeV2Name == null &&
              userThemeV2Name == null
          )
      ) {
        // Palette and/or style overrides V2 themes
        instanceThemeV2Name = null
        userThemeV2Name = null
        userThemeV2Source = null
        userThemeV2Snapshot = null

        majorVersionUsed = 'v3'
      } else if (
        (userThemeV2Name ||
          userThemeV2Snapshot ||
          userThemeV2Source ||
         instanceThemeV2Name)
      ) {
        majorVersionUsed = 'v2'
      } else {
        // if all fails fallback to v3
        majorVersionUsed = 'v3'
      }

      if (majorVersionUsed === 'v3') {
        const result = await Promise.all([
          this.fetchPalettesIndex(),
          this.fetchStylesIndex()
        ])

        palettesIndex = result[0]
        stylesIndex = result[1]
      } else {
        // Promise.all just to be uniform with v3
        const result = await Promise.all([
          this.fetchThemesIndex()
        ])

        themesIndex = result[0]
      }

      this.themeVersion = majorVersionUsed

      console.debug('Version used', majorVersionUsed)

      if (majorVersionUsed === 'v3') {
        this.themeDataUsed = null
        this.themeNameUsed = null

        const style = await getData(
          'style',
          stylesIndex,
          userStyleCustomData,
          userStyleName || instanceStyleName
        )
        this.styleNameUsed = style.nameUsed
        this.styleDataUsed = style.dataUsed

        let firstStylePaletteName = null
        style
          .dataUsed
          ?.filter(x => x.component === '@palette')
          .map(x => {
            const cleanDirectives = Object.fromEntries(
              Object
                .entries(x.directives)
                .filter(([k, v]) => k)
            )

            return { name: x.variant, ...cleanDirectives }
          })
          .forEach(palette => {
            const key = 'style.' + palette.name.toLowerCase().replace(/ /g, '_')
            if (!firstStylePaletteName) firstStylePaletteName = key
            palettesIndex[key] = () => Promise.resolve(palette)
          })

        const palette = await getData(
          'palette',
          palettesIndex,
          userPaletteCustomData,
          this.useStylePalette ? firstStylePaletteName : (userPaletteName || instancePaletteName)
        )

        if (this.useStylePalette) {
          window.vuex.commit('setOption', { name: 'palette', value: firstStylePaletteName })
        }

        this.paletteNameUsed = palette.nameUsed
        this.paletteDataUsed = palette.dataUsed

        if (this.paletteDataUsed) {
          this.paletteDataUsed.link = this.paletteDataUsed.link || this.paletteDataUsed.accent
          this.paletteDataUsed.accent = this.paletteDataUsed.accent || this.paletteDataUsed.link
        }
        if (Array.isArray(this.paletteDataUsed)) {
          const [
            name,
            bg,
            fg,
            text,
            link,
            cRed = '#FF0000',
            cGreen = '#00FF00',
            cBlue = '#0000FF',
            cOrange = '#E3FF00'
          ] = palette.dataUsed
          this.paletteDataUsed = {
            name,
            bg,
            fg,
            text,
            link,
            accent: link,
            cRed,
            cBlue,
            cGreen,
            cOrange
          }
        }
        console.debug('Palette data used', palette.dataUsed)
      } else {
        this.styleNameUsed = null
        this.styleDataUsed = null
        this.paletteNameUsed = null
        this.paletteDataUsed = null

        const theme = await getData(
          'theme',
          themesIndex,
          userThemeV2Source || userThemeV2Snapshot,
          userThemeV2Name || instanceThemeV2Name
        )
        this.themeNameUsed = theme.nameUsed
        this.themeDataUsed = theme.dataUsed
      }
    },
    async setThemeApplied () {
      this.themeApplied = true
    },
    async applyTheme (
      { recompile = false } = {}
    ) {
      const {
        forceThemeRecompilation,
        themeDebug,
        theme3hacks
      } = window.vuex.state.config
      this.themeChangeInProgress = true
      // If we're not not forced to recompile try using
      // cache (tryLoadCache return true if load successful)

      const forceRecompile = forceThemeRecompilation || recompile
      if (!forceRecompile && !themeDebug && await tryLoadCache()) {
        this.themeChangeInProgress = false
        return this.setThemeApplied()
      }
      window.splashUpdate('splash.theme')
      await this.getThemeData()

      try {
        const paletteIss = (() => {
          if (!this.paletteDataUsed) return null
          const result = {
            component: 'Root',
            directives: {}
          }

          Object
            .entries(this.paletteDataUsed)
            .filter(([k]) => k !== 'name')
            .forEach(([k, v]) => {
              let issRootDirectiveName
              switch (k) {
                case 'background':
                  issRootDirectiveName = 'bg'
                  break
                case 'foreground':
                  issRootDirectiveName = 'fg'
                  break
                default:
                  issRootDirectiveName = k
              }
              result.directives['--' + issRootDirectiveName] = 'color | ' + v
            })
          return result
        })()

        const theme2ruleset = this.themeDataUsed && convertTheme2To3(normalizeThemeData(this.themeDataUsed))
        const hacks = []

        Object.entries(theme3hacks).forEach(([key, value]) => {
          switch (key) {
            case 'fonts': {
              Object.entries(theme3hacks.fonts).forEach(([fontKey, font]) => {
                if (!font?.family) return
                switch (fontKey) {
                  case 'interface':
                    hacks.push({
                      component: 'Root',
                      directives: {
                        '--font': 'generic | ' + font.family
                      }
                    })
                    break
                  case 'input':
                    hacks.push({
                      component: 'Input',
                      directives: {
                        '--font': 'generic | ' + font.family
                      }
                    })
                    break
                  case 'post':
                    hacks.push({
                      component: 'RichContent',
                      directives: {
                        '--font': 'generic | ' + font.family
                      }
                    })
                    break
                  case 'monospace':
                    hacks.push({
                      component: 'Root',
                      directives: {
                        '--monoFont': 'generic | ' + font.family
                      }
                    })
                    break
                }
              })
              break
            }
            case 'underlay': {
              if (value !== 'none') {
                const newRule = {
                  component: 'Underlay',
                  directives: {}
                }
                if (value === 'opaque') {
                  newRule.directives.opacity = 1
                  newRule.directives.background = '--wallpaper'
                }
                if (value === 'transparent') {
                  newRule.directives.opacity = 0
                }
                hacks.push(newRule)
              }
              break
            }
          }
        })

        const rulesetArray = [
          theme2ruleset,
          this.styleDataUsed,
          paletteIss,
          hacks
        ].filter(x => x)

        return applyTheme(
          rulesetArray.flat(),
          () => this.setThemeApplied(),
          () => {
            this.themeChangeInProgress = false
          },
          themeDebug
        )
      } catch (e) {
        window.splashError(e)
      }
    }
  }
})

export const normalizeThemeData = (input) => {
  let themeData, themeSource

  if (input.themeFileVerison === 1) {
    // this might not be even used at all, some leftover of unimplemented code in V2 editor
    return generatePreset(input).theme
  } else if (
    Object.prototype.hasOwnProperty.call(input, '_pleroma_theme_version') ||
      Object.prototype.hasOwnProperty.call(input, 'source') ||
      Object.prototype.hasOwnProperty.call(input, 'theme')
  ) {
    // We got passed a full theme file
    themeData = input.theme
    themeSource = input.source
  } else if (
    Object.prototype.hasOwnProperty.call(input, 'themeEngineVersion') ||
      Object.prototype.hasOwnProperty.call(input, 'colors')
  ) {
    // We got passed a source/snapshot
    themeData = input
    themeSource = input
  }
  // New theme presets don't have 'theme' property, they use 'source'

  let out // shout, shout let it all out
  if (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION) {
    // There are some themes in wild that have completely broken source
    out = { ...(themeData || {}), ...themeSource }
  } else {
    out = themeData
  }

  // generatePreset here basically creates/updates "snapshot",
  // while also fixing the 2.2 -> 2.3 colors/shadows/etc
  return generatePreset(out).theme
}