From 90c5241de0288f081cb86efea09aa85170452d0e Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sat, 7 Dec 2024 18:04:07 +0100
Subject: [PATCH] feat: :sparkles: Implement attachment viewer

---
 components/notes/attachment.vue | 67 ++++++++++++++++++++++++++++-----
 1 file changed, 57 insertions(+), 10 deletions(-)

diff --git a/components/notes/attachment.vue b/components/notes/attachment.vue
index 4121fb1..54f4c52 100644
--- a/components/notes/attachment.vue
+++ b/components/notes/attachment.vue
@@ -1,19 +1,66 @@
 <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>
+    <Dialog>
+        <DialogTrigger :as-child="true">
+            <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>
+        </DialogTrigger>
+        <DialogContent :hide-close="true"
+            class="fixed inset-0 z-50 w-screen h-screen p-6 duration-200 bg-transparent border-none grid grid-rows-[auto,1fr,auto] overflow-hidden translate-x-0 translate-y-0 max-w-full !animate-none gap-6">
+            <div class="flex flex-row gap-2 w-full">
+                <DialogTitle class="sr-only">{{ attachment.type }}</DialogTitle>
+                <Button as="a" :href="attachment?.url" target="_blank" :download="true" variant="ghost" size="icon" class="[&_svg]:size-6  ml-auto">
+                    <Download />
+                </Button>
+                <DialogClose :as-child="true">
+                    <Button variant="ghost" size="icon" class="[&_svg]:size-6">
+                        <X />
+                    </Button>
+                </DialogClose>
+            </div>
+            <div class="flex items-center justify-center overflow-hidden *:max-h-[80vh] *:max-w-[80vh]">
+                <img v-if="attachment.type === 'image'" :src="attachment.url" :alt="attachment.description ?? ''"
+                    class="object-contain" />
+                <video v-else-if="attachment.type === 'video' || attachment.type === 'gifv'" :src="attachment.url"
+                    :alt="attachment.description ?? ''" class="object-cover" controls />
+                <audio v-else-if="attachment.type === 'audio'" :src="attachment.url" :alt="attachment.description ?? ''"
+                    class="object-cover" controls />
+                <div v-else class="flex flex-col items-center justify-center">
+                    <File class="size-12" />
+                    <span class="text-sm"></span>
+                </div>
+            </div>
+            <DialogDescription class="flex items-center justify-center">
+                <Card v-if="attachment.description" class="p-4 max-w-md max-h-48 overflow-auto">
+                    <p class="text-sm">{{ attachment.description }}</p>
+                </Card>
+            </DialogDescription>
+        </DialogContent>
+    </Dialog>
 </template>
 
 <script lang="ts" setup>
 import type { Attachment } from "@versia/client/types";
-import { File } from "lucide-vue-next";
+import { Download, File, X } from "lucide-vue-next";
 import { Card } from "~/components/ui/card";
+import { Button } from "../ui/button";
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogTitle,
+    DialogTrigger,
+} from "../ui/dialog";
 
 defineProps<{
     attachment: Attachment;