pass 2 + emoji store separation

src/stores/emoji.js

@@ -0,0 +1,246 @@
+import { defineStore } from 'pinia'
+
+import { useInstanceStore } from 'src/stores/instance.js'
+
+import { ensureFinalFallback } from 'src/i18n/languages.js'
+
+import { annotationsLoader } from 'virtual:pleroma-fe/emoji-annotations'
+
+const defaultState = {
+  // Custom emoji from server
+  customEmoji: [],
+  customEmojiFetched: false,
+
+  // Unicode emoji from bundle
+  emoji: {},
+  emojiFetched: false,
+  unicodeEmojiAnnotations: {},
+}
+
+const SORTED_EMOJI_GROUP_IDS = [
+  'smileys-and-emotion',
+  'people-and-body',
+  'animals-and-nature',
+  'food-and-drink',
+  'travel-and-places',
+  'activities',
+  'objects',
+  'symbols',
+  'flags',
+]
+
+const REGIONAL_INDICATORS = (() => {
+  const start = 0x1f1e6
+  const end = 0x1f1ff
+  const A = 'A'.codePointAt(0)
+  const res = new Array(end - start + 1)
+  for (let i = start; i <= end; ++i) {
+    const letter = String.fromCodePoint(A + i - start)
+    res[i - start] = {
+      replacement: String.fromCodePoint(i),
+      imageUrl: false,
+      displayText: 'regional_indicator_' + letter,
+      displayTextI18n: {
+        key: 'emoji.regional_indicator',
+        args: { letter },
+      },
+    }
+  }
+  return res
+})()
+
+const loadAnnotations = (lang) => {
+  return annotationsLoader[lang]().then((k) => k.default)
+}
+
+const injectAnnotations = (emoji, annotations) => {
+  const availableLangs = Object.keys(annotations)
+
+  return {
+    ...emoji,
+    annotations: availableLangs.reduce((acc, cur) => {
+      acc[cur] = annotations[cur][emoji.replacement]
+      return acc
+    }, {}),
+  }
+}
+
+const injectRegionalIndicators = (groups) => {
+  groups.symbols.push(...REGIONAL_INDICATORS)
+  return groups
+}
+
+export const useEmojiStore = defineStore('emoji', {
+  state: () => ({ ...defaultState }),
+  getters: {
+    groupedCustomEmojis(state) {
+      const packsOf = (emoji) => {
+        const packs = emoji.tags
+          .filter((k) => k.startsWith('pack:'))
+          .map((k) => {
+            const packName = k.slice(5) // remove 'pack:' prefix
+            return {
+              id: `custom-${packName}`,
+              text: packName,
+            }
+          })
+
+        if (!packs.length) {
+          return [
+            {
+              id: 'unpacked',
+            },
+          ]
+        } else {
+          return packs
+        }
+      }
+
+      return this.customEmoji.reduce((res, emoji) => {
+        packsOf(emoji).forEach(({ id: packId, text: packName }) => {
+          if (!res[packId]) {
+            res[packId] = {
+              id: packId,
+              text: packName,
+              image: emoji.imageUrl,
+              emojis: [],
+            }
+          }
+          res[packId].emojis.push(emoji)
+        })
+        return res
+      }, {})
+    },
+    standardEmojiList(state) {
+      return SORTED_EMOJI_GROUP_IDS.map((groupId) =>
+        (this.emoji[groupId] || []).map((k) =>
+          injectAnnotations(k, this.unicodeEmojiAnnotations),
+        ),
+      ).reduce((a, b) => a.concat(b), [])
+    },
+    standardEmojiGroupList(state) {
+      return SORTED_EMOJI_GROUP_IDS.map((groupId) => ({
+        id: groupId,
+        emojis: (this.emoji[groupId] || []).map((k) =>
+          injectAnnotations(k, this.unicodeEmojiAnnotations),
+        ),
+      }))
+    },
+  },
+  actions: {
+    async getStaticEmoji() {
+      try {
+        // See build/emojis_plugin for more details
+        const values = (await import('/src/assets/emoji.json')).default
+
+        const emoji = Object.keys(values).reduce((res, groupId) => {
+          res[groupId] = values[groupId].map((e) => ({
+            displayText: e.slug,
+            imageUrl: false,
+            replacement: e.emoji,
+          }))
+          return res
+        }, {})
+        this.emoji = injectRegionalIndicators(emoji)
+      } catch (e) {
+        console.warn("Can't load static emoji\n", e)
+      }
+    },
+
+    loadUnicodeEmojiData(language) {
+      const langList = ensureFinalFallback(language)
+
+      return Promise.all(
+        langList.map(async (lang) => {
+          if (!this.unicodeEmojiAnnotations[lang]) {
+            try {
+              const annotations = await loadAnnotations(lang)
+              this.unicodeEmojiAnnotations[lang] = annotations
+            } catch (e) {
+              console.warn(
+                `Error loading unicode emoji annotations for ${lang}: `,
+                e,
+              )
+              // ignore
+            }
+          }
+        }),
+      )
+    },
+
+    async getCustomEmoji() {
+      try {
+        let res = await window.fetch('/api/v1/pleroma/emoji')
+        if (!res.ok) {
+          res = await window.fetch('/api/pleroma/emoji.json')
+        }
+        if (res.ok) {
+          const result = await res.json()
+          const values = Array.isArray(result)
+            ? Object.assign({}, ...result)
+            : result
+          const caseInsensitiveStrCmp = (a, b) => {
+            const la = a.toLowerCase()
+            const lb = b.toLowerCase()
+            return la > lb ? 1 : la < lb ? -1 : 0
+          }
+          const noPackLast = (a, b) => {
+            const aNull = a === ''
+            const bNull = b === ''
+            if (aNull === bNull) {
+              return 0
+            } else if (aNull && !bNull) {
+              return 1
+            } else {
+              return -1
+            }
+          }
+          const byPackThenByName = (a, b) => {
+            const packOf = (emoji) =>
+              (emoji.tags.filter((k) => k.startsWith('pack:'))[0] || '').slice(
+                5,
+              )
+            const packOfA = packOf(a)
+            const packOfB = packOf(b)
+            return (
+              noPackLast(packOfA, packOfB) ||
+              caseInsensitiveStrCmp(packOfA, packOfB) ||
+              caseInsensitiveStrCmp(a.displayText, b.displayText)
+            )
+          }
+
+          const emoji = Object.entries(values)
+            .map(([key, value]) => {
+              const imageUrl = value.image_url
+              return {
+                displayText: key,
+                imageUrl: imageUrl
+                  ? useInstanceStore().server + imageUrl
+                  : value,
+                tags: imageUrl
+                  ? value.tags.sort((a, b) => (a > b ? 1 : 0))
+                  : ['utf'],
+                replacement: `:${key}: `,
+              }
+              // Technically could use tags but those are kinda useless right now,
+              // should have been "pack" field, that would be more useful
+            })
+            .sort(byPackThenByName)
+          this.customEmoji = emoji
+        } else {
+          throw res
+        }
+      } catch (e) {
+        console.warn("Can't load custom emojis\n", e)
+      }
+    },
+    fetchEmoji() {
+      if (!this.customEmojiFetched) {
+        this.getCustomEmoji().then(() => (this.customEmojiFetched = true))
+      }
+      if (!this.emojiFetched) {
+        this.getStaticEmoji().then(() => (this.emojiFetched = true))
+      }
+    },
+  },
+})

src/stores/instance.js

@@ -129,10 +129,10 @@ export const useInstanceStore = defineStore('instance', {
     },
   },
   actions: {
-    set({ path, value }) {
-      if (get(defaultState, path) === undefined)
-        console.error(`Unknown instance option ${path}, value: ${value}`)
-      set(this, path, value)
+    set({ path, name, value }) {
+      if (get(defaultState, path ?? name) === undefined)
+        console.error(`Unknown instance option ${path ?? name}, value: ${value}`)
+      set(this, path ?? name, value)
       switch (name) {
         case 'name':
           useInterfaceStore().setPageTitle()

src/stores/interface.js

@@ -87,7 +87,7 @@ export const useInterfaceStore = defineStore('interface', {
     },
     setPageTitle(option = '') {
       try {
-        document.title = `${option} ${window.vuex.useInstanceStore().name}`
+        document.title = `${option} ${useInstanceStore().name}`
       } catch (error) {
         console.error(`${error}`)
       }
@@ -222,14 +222,14 @@ export const useInterfaceStore = defineStore('interface', {
     async fetchPalettesIndex() {
       try {
         const value = await getResourcesIndex('/static/palettes/index.json')
-        window.vuex.commit('setInstanceOption', {
+        useInstanceStore().set({
           name: 'palettesIndex',
           value,
         })
         return value
       } catch (e) {
         console.error('Could not fetch palettes index', e)
-        window.vuex.commit('setInstanceOption', {
+        useInstanceStore().set({
           name: 'palettesIndex',
           value: { _error: e },
         })
@@ -258,11 +258,11 @@ export const useInterfaceStore = defineStore('interface', {
           '/static/styles/index.json',
           deserialize,
         )
-        window.vuex.commit('setInstanceOption', { name: 'stylesIndex', value })
+        useInstanceStore().set({ name: 'stylesIndex', value })
         return value
       } catch (e) {
         console.error('Could not fetch styles index', e)
-        window.vuex.commit('setInstanceOption', {
+        useInstanceStore().set({
           name: 'stylesIndex',
           value: { _error: e },
         })
@@ -296,11 +296,11 @@ export const useInterfaceStore = defineStore('interface', {
     async fetchThemesIndex() {
       try {
         const value = await getResourcesIndex('/static/styles.json')
-        window.vuex.commit('setInstanceOption', { name: 'themesIndex', value })
+        useInstanceStore().set({ name: 'themesIndex', value })
         return value
       } catch (e) {
         console.error('Could not fetch themes index', e)
-        window.vuex.commit('setInstanceOption', {
+        useInstanceStore().set({
           name: 'themesIndex',
           value: { _error: e },
         })
@@ -386,14 +386,14 @@ export const useInterfaceStore = defineStore('interface', {
       }
 
       const { style: instanceStyleName, palette: instancePaletteName } =
-        window.vuex.useInstanceStore()
+        useInstanceStore()
 
       let {
         theme: instanceThemeV2Name,
         themesIndex,
         stylesIndex,
         palettesIndex,
-      } = window.vuex.useInstanceStore()
+      } = useInstanceStore()
 
       const {
         style: userStyleName,