feat: support custom emoji

components/account/AccountInfo.vue

@@ -14,9 +14,7 @@ defineProps<{
       </NuxtLink>
     </div>
     <NuxtLink flex flex-col :to="`/@${account.acct}`">
-      <h4 font-bold>
-        {{ account.displayName }}
-      </h4>
+      <CommonRichContent font-bold :content="account.displayName" />
       <p op35 text-sm>
         @{{ account.acct }}
       </p>

components/account/AccountInlineInfo.vue

@@ -9,6 +9,6 @@ defineProps<{
 <template>
   <a :href="`/@${account.acct}`" flex gap-2 font-bold items-center>
     <img :src="account.avatar" class="w-5 h-5 rounded">
-    {{ account.displayName }}
+    <CommonRichContent :content="account.displayName" />
   </a>
 </template>

components/common/RichContent.ts

@@ -1,3 +1,5 @@
+import type { Emoji } from 'masto'
+
 export default defineComponent({
   props: {
     content: {
@@ -6,6 +8,15 @@ export default defineComponent({
     },
   },
   setup(props) {
-    return () => contentToVNode(props.content)
+    const emojis = shallowRef<Record<string, Emoji>>({})
+
+    onMounted(() => {
+      const { server } = useAppCookies()
+      const { serverInfos } = useClientState()
+      if (server.value)
+        emojis.value = serverInfos.value[server.value].customEmojis || {}
+    })
+
+    return () => h('div', { class: 'rich-content' }, contentToVNode(props.content, undefined, emojis.value))
   },
 })

components/status/StatusBody.vue

@@ -11,23 +11,3 @@ const { status } = defineProps<{
     <CommonRichContent :content="status.content" />
   </div>
 </template>
-
-<style lang="postcss">
-.status-body {
-  a {
-    --at-apply: text-primary hover:underline;
-    .invisible {
-      --at-apply: hidden;
-    }
-    .ellipsis {
-      --at-apply: truncate overflow-hidden ws-nowrap;
-    }
-  }
-  b {
-    --at-apply: font-bold;
-  }
-  p {
-    --at-apply: my-2;
-  }
-}
-</style>