From a207dea81757e5dc8ea839b67dee3144c5243380 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Sat, 7 Dec 2024 18:09:34 +0100
Subject: [PATCH] feat: :sparkles: Add alt text viewer to media

---
 components/notes/attachment.vue          | 41 ++++++++++++++------
 components/ui/popover/Popover.vue        | 15 ++++++++
 components/ui/popover/PopoverContent.vue | 48 ++++++++++++++++++++++++
 components/ui/popover/PopoverTrigger.vue | 11 ++++++
 components/ui/popover/index.ts           |  3 ++
 5 files changed, 106 insertions(+), 12 deletions(-)
 create mode 100644 components/ui/popover/Popover.vue
 create mode 100644 components/ui/popover/PopoverContent.vue
 create mode 100644 components/ui/popover/PopoverTrigger.vue
 create mode 100644 components/ui/popover/index.ts

diff --git a/components/notes/attachment.vue b/components/notes/attachment.vue
index 54f4c52..d6eeca4 100644
--- a/components/notes/attachment.vue
+++ b/components/notes/attachment.vue
@@ -1,24 +1,40 @@
 <template>
     <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 ?? ''"
+        <Card class="w-full h-full overflow-hidden relative">
+            <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" />
-                <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">
+            </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">
                     <File class="size-12" />
                     <span class="text-sm"></span>
                 </div>
-            </Card>
-        </DialogTrigger>
+            </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">
+                            <Captions />
+                        </Button>
+                    </PopoverTrigger>
+                </div>
+                <PopoverContent>
+                    <p class="text-sm">{{ attachment.description }}</p>
+                </PopoverContent>
+            </Popover>
+        </Card>
         <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">
+                <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">
@@ -50,7 +66,7 @@
 
 <script lang="ts" setup>
 import type { Attachment } from "@versia/client/types";
-import { Download, File, X } from "lucide-vue-next";
+import { Captions, Download, File, X } from "lucide-vue-next";
 import { Card } from "~/components/ui/card";
 import { Button } from "../ui/button";
 import {
@@ -61,6 +77,7 @@ import {
     DialogTitle,
     DialogTrigger,
 } from "../ui/dialog";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 
 defineProps<{
     attachment: Attachment;
diff --git a/components/ui/popover/Popover.vue b/components/ui/popover/Popover.vue
new file mode 100644
index 0000000..5a3f344
--- /dev/null
+++ b/components/ui/popover/Popover.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from "radix-vue";
+import { PopoverRoot, useForwardPropsEmits } from "radix-vue";
+
+const props = defineProps<PopoverRootProps>();
+const emits = defineEmits<PopoverRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>
diff --git a/components/ui/popover/PopoverContent.vue b/components/ui/popover/PopoverContent.vue
new file mode 100644
index 0000000..165f002
--- /dev/null
+++ b/components/ui/popover/PopoverContent.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { cn } from "@/lib/utils";
+import {
+    PopoverContent,
+    type PopoverContentEmits,
+    type PopoverContentProps,
+    PopoverPortal,
+    useForwardPropsEmits,
+} from "radix-vue";
+import { type HTMLAttributes, computed } from "vue";
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = withDefaults(
+    defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
+    {
+        align: "center",
+        sideOffset: 4,
+    },
+);
+const emits = defineEmits<PopoverContentEmits>();
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props;
+
+    return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
diff --git a/components/ui/popover/PopoverTrigger.vue b/components/ui/popover/PopoverTrigger.vue
new file mode 100644
index 0000000..a824de9
--- /dev/null
+++ b/components/ui/popover/PopoverTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { PopoverTrigger, type PopoverTriggerProps } from "radix-vue";
+
+const props = defineProps<PopoverTriggerProps>();
+</script>
+
+<template>
+  <PopoverTrigger v-bind="props">
+    <slot />
+  </PopoverTrigger>
+</template>
diff --git a/components/ui/popover/index.ts b/components/ui/popover/index.ts
new file mode 100644
index 0000000..b3e258f
--- /dev/null
+++ b/components/ui/popover/index.ts
@@ -0,0 +1,3 @@
+export { default as Popover } from "./Popover.vue";
+export { default as PopoverContent } from "./PopoverContent.vue";
+export { default as PopoverTrigger } from "./PopoverTrigger.vue";