feat: ✨ Render note attachments

components/notes/attachment.vue

@@ -0,0 +1,21 @@
+<template>
+    <Card class="w-full h-full overflow-hidden">
+        <img v-if="attachment.type === 'image'" :src="attachment.url" :alt="attachment.description ?? ''" class="w-full h-full object-contain bg-muted/20" />
+        <video v-else-if="attachment.type === 'video' || attachment.type === 'gifv'" :src="attachment.url" :alt="attachment.description ?? ''" class="w-full h-full object-cover bg-muted/20" controls />
+        <audio v-else-if="attachment.type === 'audio'" :src="attachment.url" :alt="attachment.description ?? ''" class="w-full h-full object-cover bg-muted/20" controls />
+        <div v-else class="w-full h-full flex flex-col items-center justify-center bg-muted/20">
+            <File class="size-12" />
+            <span class="text-sm"></span>
+        </div>
+    </Card>
+</template>
+
+<script lang="ts" setup>
+import type { Attachment } from "@versia/client/types";
+import { File } from "lucide-vue-next";
+import { Card } from "~/components/ui/card";
+
+defineProps<{
+    attachment: Attachment;
+}>();
+</script>

components/notes/attachments.vue

@@ -0,0 +1,15 @@
+<template>
+    <!-- [&:has(>:last-child:nth-child(1))] means "when this element has 1 child" -->
+    <div class="mt-4 grid gap-4 grid-cols-2 *:max-h-56 sm:[&:has(>:last-child:nth-child(1))]:grid-cols-1 sm:[&:has(>:last-child:nth-child(1))>*]:max-h-72">
+        <Attachment v-for="attachment in attachments" :key="attachment.id" :attachment="attachment" />    
+    </div>
+</template>
+
+<script lang="ts" setup>
+import type { Attachment as AttachmentType } from "@versia/client/types";
+import Attachment from "./attachment.vue";
+
+defineProps<{
+    attachments: AttachmentType[];
+}>();
+</script>

components/notes/content.vue

@@ -2,18 +2,22 @@
     <div :class="['prose 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">
     </div>
 
+    <Attachments v-if="attachments.length > 0" :attachments="attachments" />
+
     <div v-if="quote" class="mt-4 rounded border overflow-hidden">
         <Note :note="quote" :hide-actions="true" :small-layout="true" />
     </div>
 </template>
 
 <script lang="ts" setup>
-import type { Status } from "@versia/client/types";
+import type { Attachment, Status } from "@versia/client/types";
+import Attachments from "./attachments.vue";
 import Note from "./note.vue";
 
 const { content } = defineProps<{
     content: string;
     quote?: NonNullable<Status["quote"]>;
+    attachments: Attachment[];
 }>();
 </script>
 

components/notes/note.vue

@@ -9,7 +9,7 @@
                 :small-layout="smallLayout" />
         </CardHeader>
         <CardContent>
-            <Content :content="noteToUse.content" :quote="note.quote ?? undefined" />
+            <Content :content="noteToUse.content" :quote="note.quote ?? undefined" :attachments="noteToUse.media_attachments"/>
         </CardContent>
         <CardFooter v-if="!hideActions">
             <Actions :reply-count="noteToUse.replies_count" :like-count="noteToUse.favourites_count" :url="url"