refactor: ♻️ Rewrite attachment renderers

bun.lock

@@ -1121,7 +1121,7 @@
 
     "destr": ["destr@2.0.5", "", {}, "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA=="],
 
-    "detect-libc": ["detect-libc@2.0.4", "", {}, "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA=="],
+    "detect-libc": ["detect-libc@1.0.3", "", { "bin": { "detect-libc": "./bin/detect-libc.js" } }, "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg=="],
 
     "detective-amd": ["detective-amd@5.0.2", "", { "dependencies": { "ast-module-types": "^5.0.0", "escodegen": "^2.0.0", "get-amd-module-type": "^5.0.1", "node-source-walk": "^6.0.1" }, "bin": { "detective-amd": "bin/cli.js" } }, "sha512-XFd/VEQ76HSpym80zxM68ieB77unNuoMwopU2TFT/ErUk5n4KvUTwW4beafAVUugrjV48l4BmmR0rh2MglBaiA=="],
 
@@ -2499,6 +2499,8 @@
 
     "@mapbox/node-pre-gyp/consola": ["consola@3.4.2", "", {}, "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA=="],
 
+    "@mapbox/node-pre-gyp/detect-libc": ["detect-libc@2.0.4", "", {}, "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA=="],
+
     "@netlify/dev-utils/uuid": ["uuid@11.1.0", "", { "bin": { "uuid": "dist/esm/bin/uuid" } }, "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A=="],
 
     "@netlify/functions/is-stream": ["is-stream@4.0.1", "", {}, "sha512-Dnz92NInDqYckGEUJv689RbRiTSEHCQ7wOVeALbkOz999YpqT46yMRIGtSNl2iCL1waAZSx40+h59NV/EwzV/A=="],
@@ -2555,8 +2557,6 @@
 
     "@oxc-parser/wasm/@oxc-project/types": ["@oxc-project/types@0.50.0", "", {}, "sha512-VGV87PmDCGv1D+57iEmIuDoso3ig8d8D4VIK9AS0H7h2aNiRwFoCpVyp01+3jvIuHjPcEM2wbo3NG5EKyfx6Jw=="],
 
-    "@parcel/watcher/detect-libc": ["detect-libc@1.0.3", "", { "bin": { "detect-libc": "./bin/detect-libc.js" } }, "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg=="],
-
     "@parcel/watcher-wasm/napi-wasm": ["napi-wasm@1.1.3", "", { "bundled": true }, "sha512-h/4nMGsHjZDCYmQVNODIrYACVJ+I9KItbG+0si6W/jSjdA9JbWDoU4LLeMXVcEQGHjttI2tuXqDrbGF7qkUHHg=="],
 
     "@poppinss/colors/kleur": ["kleur@4.1.5", "", {}, "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="],
@@ -2659,6 +2659,8 @@
 
     "lazystream/readable-stream": ["readable-stream@2.3.8", "", { "dependencies": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", "isarray": "~1.0.0", "process-nextick-args": "~2.0.0", "safe-buffer": "~5.1.1", "string_decoder": "~1.1.1", "util-deprecate": "~1.0.1" } }, "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA=="],
 
+    "lightningcss/detect-libc": ["detect-libc@2.0.4", "", {}, "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA=="],
+
     "listhen/consola": ["consola@3.4.2", "", {}, "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA=="],
 
     "listhen/pathe": ["pathe@1.1.2", "", {}, "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ=="],
@@ -2955,6 +2957,8 @@
 
     "wrap-ansi/strip-ansi/ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
 
+    "@netlify/zip-it-and-ship-it/@vercel/nft/@mapbox/node-pre-gyp/detect-libc": ["detect-libc@2.0.4", "", {}, "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA=="],
+
     "@netlify/zip-it-and-ship-it/@vercel/nft/@mapbox/node-pre-gyp/https-proxy-agent": ["https-proxy-agent@5.0.1", "", { "dependencies": { "agent-base": "6", "debug": "4" } }, "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA=="],
 
     "@netlify/zip-it-and-ship-it/@vercel/nft/@mapbox/node-pre-gyp/nopt": ["nopt@5.0.0", "", { "dependencies": { "abbrev": "1" }, "bin": { "nopt": "bin/nopt.js" } }, "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ=="],

components/errors/AuthRequired.vue

@@ -1,5 +1,5 @@
 <template>
-    <Alert layout="button" class="grid">
+    <Alert layout="button">
         <LogIn />
         <AlertTitle>{{ m.sunny_quick_lionfish_flip() }}</AlertTitle>
         <AlertDescription>

components/notes/attachment.vue

@@ -1,85 +1,16 @@
 <template>
-    <Dialog>
-        <Card class="w-full h-full overflow-hidden relative p-0">
-            <DialogTrigger v-if="attachment.type === 'image'" :as-child="true">
-                <img :src="attachment.url" :alt="attachment.description ?? undefined"
-                    class="w-full h-full object-contain bg-muted/20" />
-            </DialogTrigger>
-            <video v-else-if="attachment.type === 'video' || attachment.type === 'gifv'" :src="attachment.url"
-                :alt="attachment.description ?? undefined" class="w-full h-full object-cover bg-muted/20" controls />
-            <audio v-else-if="attachment.type === 'audio'" :src="attachment.url"
-                :alt="attachment.description ?? undefined" class="w-full h-full object-cover bg-muted/20" controls />
-            <DialogTrigger v-else :as-child="true">
-                <div class="w-full h-full flex flex-col items-center justify-center bg-muted/20 min-h-48">
-                    <File class="size-12" />
-                    <span class="text-sm"></span>
-                </div>
-            </DialogTrigger>
-            <!-- 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" class="[&_svg]:size-6" title="View alt text">
-                            <Captions />
-                        </Button>
-                    </PopoverTrigger>
-                </div>
-                <PopoverContent>
-                    <p class="text-sm">{{ attachment.description }}</p>
-                </PopoverContent>
-            </Popover>
-        </Card>
-        <DialogContent :hide-close="true"
-            class="p-6 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="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-[80vw]">
-                    <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>
-            </div>
-        </DialogContent>
-    </Dialog>
+    <ImageAttachment v-if="attachment.type === 'image'" :attachment="attachment" />
+    <VideoAttachment v-else-if="attachment.type === 'video' || attachment.type === 'gifv'" :attachment="attachment" />
+    <AudioAttachment v-else-if="attachment.type === 'audio'" :attachment="attachment" />
+    <FileAttachment v-else :attachment="attachment" />
 </template>
 
 <script lang="ts" setup>
 import type { Attachment } from "@versia/client/types";
-import { Captions, 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";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import AudioAttachment from "./attachments/audio.vue";
+import FileAttachment from "./attachments/file.vue";
+import ImageAttachment from "./attachments/image.vue";
+import VideoAttachment from "./attachments/video.vue";
 
 defineProps<{
     attachment: Attachment;

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>

components/notes/content-warning.vue

@@ -1,10 +1,7 @@
 <template>
     <Alert layout="button">
         <TriangleAlert />
-        <AlertTitle class="sr-only">{{ m.livid_tangy_lionfish_clasp() }}</AlertTitle>
-        <AlertDescription>
-            {{ contentWarning || m.sour_seemly_bird_hike() }}
-        </AlertDescription>
+        <AlertTitle>{{ contentWarning || m.sour_seemly_bird_hike() }}</AlertTitle>
         <Button @click="blurred = !blurred" variant="outline" size="sm">{{ blurred ? m.bald_direct_turtle_win() :
             m.known_flaky_cockroach_dash() }}</Button>
     </Alert>

components/notes/content.vue

@@ -1,7 +1,7 @@
 <template>
     <ContentWarning v-if="(sensitive || contentWarning) && preferences.show_content_warning" :content-warning="contentWarning" v-model="blurred" />
 
-    <OverflowGuard :character-count="characterCount" :class="(blurred && preferences.show_content_warning) && 'blur-md'">
+    <OverflowGuard v-if="content" :character-count="characterCount" :class="(blurred && preferences.show_content_warning) && 'blur-md'">
         <Prose v-html="content" v-render-emojis="emojis"></Prose>
     </OverflowGuard>
 

components/preferences/dialog.vue

@@ -77,6 +77,8 @@ const { account: author3 } = useAccountFromAcct(
     "lina@social.lysand.org",
 );
 
+const { account: author4 } = useAccountFromAcct(client, "nyx@v.everypizza.im");
+
 const open = ref(false);
 
 useListen("preferences:open", () => {
@@ -144,6 +146,7 @@ useListen("preferences:open", () => {
                                 <TinyCard v-if="author1" :account="author1" domain="vs.cpluspatch.com" />
                                 <TinyCard v-if="author2" :account="author2" domain="social.lysand.org" />
                                 <TinyCard v-if="author3" :account="author3" domain="social.lysand.org" />
+                                <TinyCard v-if="author4" :account="author4" domain="v.everypizza.im" />
                             </div>
                         </section>
                         <Separator />