From a1f0a00892ac11998128974ce39da804d2067011 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sun, 1 Dec 2024 17:56:31 +0100
Subject: [PATCH] feat: :sparkles: Render note attachments

---
 components/notes/attachment.vue  | 21 +++++++++++++++++++++
 components/notes/attachments.vue | 15 +++++++++++++++
 components/notes/content.vue     |  6 +++++-
 components/notes/note.vue        |  2 +-
 4 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 components/notes/attachment.vue
 create mode 100644 components/notes/attachments.vue

diff --git a/components/notes/attachment.vue b/components/notes/attachment.vue
new file mode 100644
index 0000000..4121fb1
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/components/notes/attachments.vue b/components/notes/attachments.vue
new file mode 100644
index 0000000..60ee7d6
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/components/notes/content.vue b/components/notes/content.vue
index 6de5240..153781f 100644
--- a/components/notes/content.vue
+++ b/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>
 
diff --git a/components/notes/note.vue b/components/notes/note.vue
index 0521016..2360545 100644
--- a/components/notes/note.vue
+++ b/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"