💄 Optimize file previewer

app/components/AttachmentItem.vue

@@ -45,7 +45,11 @@ import { computed, ref, onMounted, watch } from "vue"
 import { decode } from "blurhash"
 import type { SnAttachment } from "~/types/api"
 
-const props = defineProps<{ item: SnAttachment; maxHeight?: string }>()
+const props = defineProps<{
+  item: SnAttachment
+  original?: boolean
+  maxHeight?: string
+}>()
 
 const itemType = computed(() => props.item.mimeType.split("/")[0] ?? "unknown")
 const blurhash = computed(() => props.item.fileMeta?.blur)
@@ -65,7 +69,7 @@ const router = useRouter()
 function openExternally() {
   // Capture image position for transition
   const img = event?.target as HTMLImageElement
-  if (img && itemType.value === 'image') {
+  if (img && itemType.value === "image") {
     const rect = img.getBoundingClientRect()
     const transitionData = {
       src: remoteSource.value,
@@ -77,16 +81,20 @@ function openExternally() {
     }
 
     // Store transition data
-    sessionStorage.setItem('imageTransition', JSON.stringify(transitionData))
+    sessionStorage.setItem("imageTransition", JSON.stringify(transitionData))
   }
 
-  router.push('/files/' + props.item.id)
+  router.push("/files/" + props.item.id)
 }
 
 const blurCanvas = ref<HTMLCanvasElement | null>(null)
 
 const apiBase = useSolarNetworkUrl()
-const remoteSource = computed(() => `${apiBase}/drive/files/${props.item.id}`)
+const remoteSource = computed(
+  () =>
+    `${apiBase}/drive/files/${props.item.id}` +
+    (props.original ? "?original=true" : "")
+)
 
 const blurhashContainerStyle = computed(() => {
   return {

app/components/AttachmentList.vue

@@ -14,7 +14,7 @@
         class="carousel-container rounded-lg overflow-hidden"
         :style="carouselStyle"
       >
-        <v-card width="100%" border>
+        <v-card width="100%" class="transition-all duration-300" border>
           <v-carousel
             height="100%"
             hide-delimiter-background
@@ -25,9 +25,13 @@
             <v-carousel-item
               v-for="attachment in attachments"
               :key="attachment.id"
-              :src="getAttachmentUrl(attachment)"
               cover
-            />
+            >
+              <attachment-item
+                original
+                :item="attachment"
+              />
+            </v-carousel-item>
           </v-carousel>
         </v-card>
       </div>