refactor: ♻️ Rewrite attachment renderers

components/notes/attachments/audio.vue

@@ -0,0 +1,14 @@
+<template>
+    <Base :attachment="attachment">
+        <audio :src="attachment.url" :alt="attachment.description ?? undefined" controls />
+    </Base>
+</template>
+
+<script lang="ts" setup>
+import type { Attachment } from "@versia/client/types";
+import Base from "./base.vue";
+
+const { attachment } = defineProps<{
+    attachment: Attachment;
+}>();
+</script>

components/notes/attachments/base.vue

@@ -0,0 +1,73 @@
+<template>
+    <Dialog>
+        <Card class="w-full h-full overflow-hidden relative p-0 *:first:w-full *:first:h-full *:first:object-contain *:first:bg-muted/20">
+            <DialogTrigger v-if="lightbox" :as-child="true">
+                <slot />
+            </DialogTrigger>
+            <slot v-else />
+            <!-- Alt text viewer -->
+            <Popover v-if="attachment.description">
+                <div class="absolute top-0 right-0 p-2">
+                    <PopoverTrigger :as-child="true">
+                        <Button variant="outline" size="icon" title="View alt text">
+                            <Captions />
+                        </Button>
+                    </PopoverTrigger>
+                </div>
+                <PopoverContent>
+                    <p class="text-sm">{{ attachment.description }}</p>
+                </PopoverContent>
+            </Popover>
+        </Card>
+        <DialogContent :hide-close="true"
+            class="duration-200 bg-transparent border-none overflow-hidden !animate-none gap-6 w-screen h-screen !max-w-none">
+            <div class="grid grid-rows-[auto_1fr_auto]">
+                <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="outline" size="icon"
+                        class="ml-auto">
+                        <Download />
+                    </Button>
+                    <DialogClose :as-child="true">
+                        <Button variant="outline" size="icon">
+                            <X />
+                        </Button>
+                    </DialogClose>
+                </div>
+                <div class="flex items-center justify-center overflow-hidden *:max-h-[80vh] *:max-w-[80vw] *:w-full *:h-full *:object-contain">
+                   <slot />
+                </div>
+                <DialogDescription class="flex items-center justify-center">
+                    <Card v-if="attachment.description" class="max-w-md max-h-48 overflow-auto text-sm">
+                        <p>{{ attachment.description }}</p>
+                    </Card>
+                </DialogDescription>
+            </div>
+        </DialogContent>
+    </Dialog>
+</template>
+
+<script lang="ts" setup>
+import type { Attachment } from "@versia/client/types";
+import { Captions, Download, File, X } from "lucide-vue-next";
+import { Button } from "~/components/ui/button";
+import { Card } from "~/components/ui/card";
+import {
+    Dialog,
+    DialogClose,
+    DialogContent,
+    DialogDescription,
+    DialogTitle,
+    DialogTrigger,
+} from "~/components/ui/dialog";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "~/components/ui/popover";
+
+const { attachment, lightbox = false } = defineProps<{
+    attachment: Attachment;
+    lightbox?: boolean;
+}>();
+</script>

components/notes/attachments/file.vue

@@ -0,0 +1,18 @@
+<template>
+    <Base :attachment="attachment" lightbox>
+        <div class="flex flex-col items-center justify-center min-h-48 text-sm gap-2">
+            <File class="size-12" />
+            <span>File attachment</span>
+        </div>
+    </Base>
+</template>
+
+<script lang="ts" setup>
+import type { Attachment } from "@versia/client/types";
+import { File } from "lucide-vue-next";
+import Base from "./base.vue";
+
+const { attachment } = defineProps<{
+    attachment: Attachment;
+}>();
+</script>

components/notes/attachments/image.vue

@@ -0,0 +1,14 @@
+<template>
+    <Base :attachment="attachment" lightbox>
+        <img :src="attachment.url" :alt="attachment.description ?? undefined" />
+    </Base>
+</template>
+
+<script lang="ts" setup>
+import type { Attachment } from "@versia/client/types";
+import Base from "./base.vue";
+
+const { attachment } = defineProps<{
+    attachment: Attachment;
+}>();
+</script>

components/notes/attachments/video.vue

@@ -0,0 +1,14 @@
+<template>
+    <Base :attachment="attachment">
+        <video :src="attachment.url" :alt="attachment.description ?? undefined" controls />
+    </Base>
+</template>
+
+<script lang="ts" setup>
+import type { Attachment } from "@versia/client/types";
+import Base from "./base.vue";
+
+const { attachment } = defineProps<{
+    attachment: Attachment;
+}>();
+</script>