feat: custom emojis, close #500

components/publish/PublishEmojiPicker.client.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Picker } from 'emoji-mart'
+import { updateCustomEmojis } from '~/composables/emojis'
 
 const emit = defineEmits<{
   (e: 'select', code: string): void
@@ -10,26 +11,33 @@ let picker = $ref<Picker>()
 
 async function openEmojiPicker() {
   if (!picker) {
+    updateCustomEmojis()
+    const promise = import('@emoji-mart/data').then(r => r.default)
     const { Picker } = await import('emoji-mart')
     picker = new Picker({
-      data: () => import('@emoji-mart/data').then(r => r.default),
+      data: () => promise,
       onEmojiSelect(e: any) {
-        emit('select', e.native)
+        emit('select', e.native || e.shortcodes)
       },
       theme: isDark.value ? 'dark' : 'light',
+      custom: customEmojisData.value,
     })
     // TODO: custom picker
     el?.appendChild(picker as any as HTMLElement)
   }
 }
 
-watchEffect(() => {
+watch(isDark, () => {
-  if (!picker)
+  picker?.update({
-    return
-  picker.update({
     theme: isDark.value ? 'dark' : 'light',
   })
 })
+
+watch(customEmojisData, () => {
+  picker?.update({
+    custom: customEmojisData.value,
+  })
+})
 </script>
 
 <template>
@@ -40,7 +48,7 @@ watchEffect(() => {
       <div i-ri:emotion-line />
     </button>
     <template #popper>
-      <div ref="el" />
+      <div ref="el" min-w-10 min-h-10 />
     </template>
   </VDropdown>
 </template>

composables/emojis.ts

@@ -0,0 +1,53 @@
+import type { Emoji } from 'masto'
+import type { CustomEmojisInfo } from './push-notifications/types'
+import { STORAGE_KEY_CUSTOM_EMOJIS } from '~/constants'
+
+const TTL = 1000 * 60 * 60 * 24 // 1 day
+
+function getDefault(): CustomEmojisInfo {
+  return {
+    lastUpdate: 0,
+    emojis: [],
+  }
+}
+
+export const currentCustomEmojis = process.server
+  ? computed(getDefault)
+  : useUserLocalStorage(STORAGE_KEY_CUSTOM_EMOJIS, getDefault)
+
+export async function updateCustomEmojis() {
+  if (Date.now() - currentCustomEmojis.value.lastUpdate < TTL)
+    return
+
+  const masto = useMasto()
+  const emojis = await masto.customEmojis.fetchAll()
+  Object.assign(currentCustomEmojis.value, {
+    lastUpdate: Date.now(),
+    emojis,
+  })
+}
+
+function transformEmojiData(emojis: Emoji[]) {
+  const result = []
+
+  for (const emoji of emojis) {
+    if (!emoji.visibleInPicker)
+      continue
+    result.push({
+      id: emoji.shortcode,
+      native: ':emoji.shortcode:',
+      name: emoji.shortcode,
+      skins: [{ src: emoji.url || emoji.staticUrl }],
+    })
+  }
+
+  return result
+}
+
+export const customEmojisData = computed(() => currentCustomEmojis.value.emojis.length
+  ? [{
+      id: 'custom',
+      name: `Custom emojis on ${currentServer.value}`,
+      emojis: transformEmojiData(currentCustomEmojis.value.emojis),
+    }]
+  : undefined)

composables/push-notifications/types.ts

@@ -1,4 +1,4 @@
-import type { PushSubscription as MastoPushSubscription, PushSubscriptionAlerts, SubscriptionPolicy } from 'masto'
+import type { Emoji, PushSubscription as MastoPushSubscription, PushSubscriptionAlerts, SubscriptionPolicy } from 'masto'
 
 import type { UserLogin } from '~/types'
 
@@ -19,3 +19,8 @@ export interface CreatePushNotification {
 
 export type PushNotificationRequest = Record<string, boolean>
 export type PushNotificationPolicy = Record<string, SubscriptionPolicy>
+
+export interface CustomEmojisInfo {
+  lastUpdate: number
+  emojis: Emoji[]
+}

constants/index.ts

@@ -13,6 +13,7 @@ export const STORAGE_KEY_ZEN_MODE = 'elk-zenmode'
 export const STORAGE_KEY_LANG = 'elk-lang'
 export const STORAGE_KEY_FONT_SIZE = 'elk-font-size'
 export const STORAGE_KEY_FEATURE_FLAGS = 'elk-feature-flags'
+export const STORAGE_KEY_CUSTOM_EMOJIS = 'elk-custom-emojis'
 export const STORAGE_KEY_HIDE_EXPLORE_POSTS_TIPS = 'elk-hide-explore-posts-tips'
 export const STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS = 'elk-hide-explore-news-tips'
 export const STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS = 'elk-hide-explore-tags-tips'