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>

app/components/Message/index.vue

@@ -42,7 +42,7 @@ watch(() => message.children.length, (newCount, oldCount) => {
     }
 
     if (oldCount > newCount) {
-        const activeChild = message.children.find(c => c.id === message.activeChildId);
+        const activeChild = message.children.find(c => c?.id === message.activeChildId);
         if (!activeChild) {
             emit('patch', { activeChildId: message.children[newCount - 1]?.id ?? null });
         }
@@ -57,7 +57,7 @@ watch(() => message.children.length, (newCount, oldCount) => {
 
 const activeMessage = computed(() => {
     if (message.activeChildId && message.children.length > 0) {
-        const child = message.children.find(c => c.id === message.activeChildId);
+        const child = message.children.find(c => c?.id === message.activeChildId);
         if (child) return child;
     }
 
@@ -140,7 +140,7 @@ const messageCount = computed(() => {
 
 const currentChildIndex = computed(() => {
     if (!message.activeChildId) return 0;
-    const idx = message.children.findIndex(c => c.id === message.activeChildId);
+    const idx = message.children.findIndex(c => c?.id === message.activeChildId);
     return idx >= 0 ? idx + 1 : 0;
 });
 
@@ -150,7 +150,7 @@ const navigateChild = (direction: -1 | 1) => {
         : [null, ...message.children];
 
     const currentIdx = allItems.findIndex(item =>
-        item === null ? !message.activeChildId : item.id === message.activeChildId
+        !item ? !message.activeChildId : item.id === message.activeChildId
     );
 
     const newIdx = Math.max(0, Math.min(allItems.length - 1, currentIdx + direction));

app/composables/useResources.ts

@@ -1,5 +1,6 @@
 import { attempt } from "~~/types/result";
 import * as schema from '~~/drizzle/schema';
+import { resolveFileUrl } from '~~/utils/url';
 
 export type ResourceFile = typeof schema.files.$inferSelect;
 
@@ -118,12 +119,12 @@ export const useResources = async () => {
     };
 
     const copyLink = async (file: ResourceFile) => {
-        const url = file.url;
+        const url = resolveFileUrl(file.url);
         await navigator.clipboard.writeText(url);
     };
 
     const downloadFile = (file: ResourceFile) => {
-        const url = file.url;
+        const url = resolveFileUrl(file.url);
         const a = document.createElement('a');
         a.href = url;
         a.download = file.name;

app/pages/resources.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useFloating, offset, flip, shift, autoUpdate, hide } from '@floating-ui/vue';
+import { resolveFileUrl } from '~~/utils/url';
 
 const { open: sidebarOpen, openSidebar } = useSidebar();
 const {
@@ -88,7 +89,7 @@ const handleRowClick = (e: MouseEvent) => {
             if (file && isImage(file.mimeType)) {
                 const row = trigger.closest('[data-file-id]') as HTMLElement;
                 previewOrigin.value = row?.getBoundingClientRect() ?? null;
-                previewSrc.value = file.url;
+                previewSrc.value = resolveFileUrl(file.url);
             }
             break;
     }