refactor: un-hardcode file urls

app/components/Attachment/Display.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import ImageViewer from '~/components/ImageViewer.vue';
+import { resolveFileUrl } from '~~/utils/url';
 
 const props = defineProps<{
     file: {
@@ -17,6 +18,8 @@ const isVideo = computed(() => props.file.mimeType.startsWith('video/'));
 const isAudio = computed(() => props.file.mimeType.startsWith('audio/'));
 const isPdf = computed(() => props.file.mimeType === 'application/pdf');
 
+const resolvedUrl = computed(() => resolveFileUrl(props.file.url));
+
 const imageViewerOpen = ref(false);
 const imageRef = ref<HTMLImageElement | null>(null);
 const imageViewerOriginRect = ref<DOMRect | null>(null);
@@ -45,16 +48,16 @@ function openImageViewer() {
 <template>
     <div class="relative h-full w-fit flex">
         <div v-if="isImage">
-            <img ref="imageRef" :src="props.file.url"
+            <img ref="imageRef" :src="resolvedUrl"
                 class="rounded-lg h-full w-full max-h-36 max-w-64 object-cover cursor-zoom-in hover:opacity-90 transition-opacity"
                 @click="openImageViewer" />
-            <ImageViewer v-if="imageViewerOpen" :src="props.file.url" :alt="props.file.name"
+            <ImageViewer v-if="imageViewerOpen" :src="resolvedUrl" :alt="props.file.name"
                 :origin-rect="imageViewerOriginRect" :origin-element="imageRef"
                 @close="imageViewerOpen = false" />
         </div>
-        <video v-else-if="isVideo" controls :src="props.file.url"
+        <video v-else-if="isVideo" controls :src="resolvedUrl"
             class="rounded-lg h-full w-full max-h-36 max-w-64 object-cover" />
-        <audio v-else-if="isAudio" controls :src="props.file.url" class="rounded-lg h-full w-full max-h-36 max-w-64" />
+        <audio v-else-if="isAudio" controls :src="resolvedUrl" class="rounded-lg h-full w-full max-h-36 max-w-64" />
 
         <div v-else class="flex items-center gap-2 p-2 rounded-lg bg-[var(--color-hover)] min-w-40 max-w-48">
             <span :class="[fileIcon, 'text-6 text-[var(--color-accent)]']"></span>