feat: ✨ Implement custom emojis

components/notes/content.vue

@@ -3,7 +3,7 @@
         maxHeight: collapsed ? '18rem' : `${container?.scrollHeight}px`
     }">
         <div :class="['prose prose-sm block relative dark:prose-invert duration-200 !max-w-full break-words prose-a:no-underline prose-a:hover:underline', $style.content]"
-            v-html="content">
+            v-html="content" v-render-emojis="emojis">
         </div>
         <div v-if="isOverflowing && collapsed"
             class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black/5 to-transparent rounded-b">
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { Attachment, Status } from "@versia/client/types";
+import type { Attachment, Emoji, Status } from "@versia/client/types";
 import { Button } from "~/components/ui/button";
 import Attachments from "./attachments.vue";
 import Note from "./note.vue";
@@ -33,6 +33,7 @@ const { content, plainContent } = defineProps<{
     plainContent?: string;
     content: string;
     quote?: NonNullable<Status["quote"]>;
+    emojis: Emoji[];
     attachments: Attachment[];
 }>();
 const container = ref<HTMLDivElement | null>(null);

components/notes/header.vue

@@ -11,7 +11,7 @@
             </Avatar>
         </NuxtLink>
         <div :class="cn('flex flex-col gap-0.5 justify-center flex-1 text-left leading-tight', smallLayout && 'text-sm')">
-            <span class="truncate font-semibold">{{
+            <span class="truncate font-semibold" v-render-emojis="emojis">{{
                 displayName
                 }}</span>
             <span class="truncate text-sm tracking-tight">
@@ -36,7 +36,7 @@
 
 <script lang="ts" setup>
 import { cn } from "@/lib/utils";
-import type { StatusVisibility } from "@versia/client/types";
+import type { Emoji, StatusVisibility } from "@versia/client/types";
 import type {
     UseTimeAgoMessages,
     UseTimeAgoUnitNamesDefault,
@@ -49,6 +49,7 @@ const { acct, createdAt, url } = defineProps<{
     cornerAvatar?: string;
     acct: string;
     displayName: string;
+    emojis: Emoji[];
     visibility: StatusVisibility;
     url: string;
     createdAt: Date;

components/notes/note.vue

@@ -2,14 +2,14 @@
     <Card as="article" class="rounded-none border-0 duration-200 shadow- max-w-full">
         <CardHeader class="pb-4" as="header">
             <ReblogHeader v-if="note.reblog" :avatar="note.account.avatar" :display-name="note.account.display_name"
-                :url="reblogAccountUrl" />
+                :url="reblogAccountUrl" :emojis="note.account.emojis" />
             <Header :avatar="noteToUse.account.avatar" :corner-avatar="note.reblog ? note.account.avatar : undefined"
                 :acct="noteToUse.account.acct" :display-name="noteToUse.account.display_name"
                 :visibility="noteToUse.visibility" :url="accountUrl" :created-at="new Date(noteToUse.created_at)"
-                :small-layout="smallLayout" />
+                :small-layout="smallLayout" :emojis="noteToUse.account.emojis" />
         </CardHeader>
         <CardContent>
-            <Content :content="noteToUse.content" :quote="note.quote ?? undefined" :attachments="noteToUse.media_attachments" :plain-content="noteToUse.plain_content ?? undefined"/>
+            <Content :content="noteToUse.content" :quote="note.quote ?? undefined" :attachments="noteToUse.media_attachments" :plain-content="noteToUse.plain_content ?? undefined" :emojis="noteToUse.emojis" />
         </CardContent>
         <CardFooter v-if="!hideActions" class="p-4 pt-0">
             <Actions :reply-count="noteToUse.replies_count" :like-count="noteToUse.favourites_count" :url="url"

components/notes/reblog-header.vue

@@ -5,18 +5,20 @@
             <AvatarImage :src="avatar" alt="" />
             <AvatarFallback class="rounded-lg"> AA </AvatarFallback>
         </Avatar>
-        <span class="font-semibold">{{ displayName }}</span>
+        <span class="font-semibold" v-render-emojis="emojis">{{ displayName }}</span>
         reblogged
     </NuxtLink>
 </template>
 
 <script lang="ts" setup>
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import type { Emoji } from "@versia/client/types";
 import { Repeat } from "lucide-vue-next";
 
 const { url } = defineProps<{
     avatar: string;
     displayName: string;
+    emojis: Emoji[];
     url: string;
 }>();