feat: add message attachments (wip)

app/components/Attachment/Display.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const props = defineProps<{
+    file: {
+        id: string;
+        name: string;
+        mimeType: string;
+        status: 'pending' | 'uploaded';
+        url: string;
+    }
+}>();
+</script>
+
+<template>
+    <img v-if="props.file.mimeType.startsWith('image/')" :src="props.file.url"
+        class="rounded-lg h-full w-full max-h-36 max-w-64 object-cover" />
+    <video v-else-if="props.file.mimeType.startsWith('video/')" controls :src="props.file.url"
+        class="rounded-lg h-full w-full max-h-36 max-w-64 aspect-ratio-video object-cover" />
+    <audio v-else-if="props.file.mimeType.startsWith('audio/')" :src="props.file.url"
+        class="rounded-lg h-full w-full max-h-36 max-w-64 object-cover" />
+</template>

app/components/Attachment/Preview.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import Display from './Display.vue';
+
+const props = defineProps<{
+    file: {
+        id: string;
+        name: string;
+        mimeType: string;
+        status: 'pending' | 'uploaded';
+        url: string;
+    }
+}>();
+
+const emit = defineEmits<{
+    delete: [];
+}>();
+
+const handleDelete = async () => {
+    emit('delete');
+};
+</script>
+
+<template>
+    <div class="relative h-full w-fit">
+        <Display :file="props.file" />
+
+        <button @click="handleDelete"
+            class="absolute top-0 right-0 translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-4 h-4 rounded-full bg-[var(--bg-base)] border border-[var(--color-border)] text-xs text-[#ff3b3b]">
+            <span class="i-mynaui-x text-3"></span>
+        </button>
+    </div>
+</template>