💄 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>

app/composables/useMarkdownProcessor.ts

@@ -9,13 +9,46 @@ export function useMarkdownProcessor() {
     html: true,
     linkify: true,
     typographer: true
-  // @ts-ignore
+    // @ts-ignore
   }).use(texmath, {
     engine: katex,
-    delimiters: 'dollars',
+    delimiters: "dollars",
     katexOptions: { macros: { "\\RR": "\\mathbb{R}" } }
   })
 
+  const defaultParagraphRenderer =
+    processor.renderer.rules.paragraph_open ||
+    ((tokens, idx, options, env, self) =>
+      self.renderToken(tokens, idx, options))
+  processor.renderer.rules.paragraph_open = function (
+    tokens,
+    idx,
+    options,
+    env,
+    self
+  ) {
+    let result = ""
+    if (idx > 1) {
+      const inline = tokens[idx - 2]
+      const paragraph = tokens[idx]
+      if (
+        inline &&
+        inline.type === "inline" &&
+        inline.map &&
+        inline.map[1] &&
+        paragraph &&
+        paragraph.map &&
+        paragraph.map[0]
+      ) {
+        const diff = paragraph.map[0] - inline.map[1]
+        if (diff > 0) {
+          result = "<br>".repeat(diff)
+        }
+      }
+    }
+    return result + defaultParagraphRenderer(tokens, idx, options, env, self)
+  }
+
   return {
     render: (content: string) => processor.render(content)
   }

app/pages/files/[id].vue

@@ -13,19 +13,57 @@
         <v-row align="center" class="pa-2">
           <v-col cols="12" md="4">
             <div class="d-flex align-center gap-2">
-              <v-icon>mdi-file</v-icon>
+              <v-tooltip location="bottom" :text="fileInfo.mimeType">
-              <span>{{ fileInfo.name || "File" }}</span>
+                <template #activator="{ props }">
+                  <v-icon v-bind="props" :icon="fileIcon"></v-icon>
+                </template>
+              </v-tooltip>
+              <v-tooltip location="bottom" :text="fileInfo.name || 'File'">
+                <template #activator="{ props }">
+                  <span class="line-clamp-1" v-bind="props">
+                    {{ fileInfo.name || "File" }}
+                  </span>
+                </template>
+              </v-tooltip>
+              <!-- Action buttons on mobile -->
+              <div class="d-flex d-md-none gap-2 ml-auto">
+                <v-btn
+                  icon
+                  size="small"
+                  density="compact"
+                  @click="handleDownload"
+                >
+                  <v-icon>mdi-download</v-icon>
+                </v-btn>
+                <v-btn
+                  icon
+                  size="small"
+                  density="compact"
+                  @click="infoDialog = true"
+                >
+                  <v-icon>mdi-information</v-icon>
+                </v-btn>
+              </div>
             </div>
           </v-col>
-          <v-col cols="12" md="8">
+          <v-col cols="12" md="8" class="d-none d-md-block">
             <div class="d-flex align-center justify-end gap-4">
-              <span>{{ fileInfo.mimeType }} ({{ fileType }})</span>
               <span>{{ formatBytes(fileInfo.size) }}</span>
               <span>{{ new Date(fileInfo.createdAt).toLocaleString() }}</span>
-              <v-btn icon size="small" density="compact" @click="handleDownload">
+              <v-btn
+                icon
+                size="small"
+                density="compact"
+                @click="handleDownload"
+              >
                 <v-icon>mdi-download</v-icon>
               </v-btn>
-              <v-btn icon size="small" density="compact" @click="infoDialog = true">
+              <v-btn
+                icon
+                size="small"
+                density="compact"
+                @click="infoDialog = true"
+              >
                 <v-icon>mdi-information</v-icon>
               </v-btn>
             </div>
@@ -61,7 +99,6 @@
             v-if="fileType === 'image'"
             :src="fileSource"
             class="preview-image"
-            contain
           />
           <video
             v-else-if="fileType === 'video'"
@@ -115,15 +152,42 @@
     <v-dialog v-model="infoDialog" max-width="640">
       <v-card title="File Information" prepend-icon="mdi-information">
         <v-card-text>
-          <div class="mb-4">
+          <v-row>
-            <b>FID</b> <span class="font-mono">#{{ fileInfo?.id }}</span>
+            <v-col cols="12" md="6">
-          </div>
+              <div class="mb-4">
+                <strong>File ID</strong>
+                <div class="text-xs">#{{ fileInfo?.id }}</div>
+              </div>
+              <div class="mb-4">
+                <strong>File Name</strong>
+                <div class="text-xs">{{ fileInfo?.name || 'N/A' }}</div>
+              </div>
+              <div class="mb-4">
+                <strong>MIME Type</strong>
+                <div class="text-xs">{{ fileInfo?.mimeType || 'N/A' }}</div>
+              </div>
+              <div class="mb-4">
+                <strong>File Size</strong>
+                <div class="text-xs">{{ fileInfo?.size ? formatBytes(fileInfo.size) : 'N/A' }}</div>
+              </div>
+            </v-col>
+            <v-col cols="12" md="6">
+              <div class="mb-4">
+                <strong>Created At</strong>
+                <div class="text-xs">{{ fileInfo?.createdAt ? new Date(fileInfo.createdAt).toLocaleString() : 'N/A' }}</div>
+              </div>
+              <div class="mb-4">
+                <strong>Encrypted</strong>
+                <div class="text-xs">{{ fileInfo?.isEncrypted ? 'Yes' : 'No' }}</div>
+              </div>
+            </v-col>
+          </v-row>
           <div class="mb-4">
             <strong>Metadata:</strong>
           </div>
           <v-card variant="outlined" class="pa-2">
             <pre
-              class="overflow-x-auto text-body-2"
+              class="overflow-x-auto text-xs"
             ><code>{{ JSON.stringify(fileInfo?.fileMeta, null, 2) }}</code></pre>
           </v-card>
         </v-card-text>
@@ -180,7 +244,11 @@ const api = useSolarNetwork()
 const fileInfo = ref<SnCloudFile | null>(null)
 
 useHead({
-  title: computed(() => fileInfo.value?.name ? `${fileInfo.value.name} - File Preview` : 'File Preview')
+  title: computed(() =>
+    fileInfo.value?.name
+      ? `${fileInfo.value.name} - File Preview`
+      : "File Preview"
+  )
 })
 async function fetchFileInfo() {
   try {
@@ -196,7 +264,7 @@ async function fetchFileInfo() {
 }
 
 function checkForTransition() {
-  const transitionData = sessionStorage.getItem('imageTransition')
+  const transitionData = sessionStorage.getItem("imageTransition")
   if (transitionData) {
     try {
       const data = JSON.parse(transitionData)
@@ -206,20 +274,23 @@ function checkForTransition() {
       // Calculate final position (centered in viewport)
       const viewportWidth = window.innerWidth
       const viewportHeight = window.innerHeight
-      const finalWidth = Math.min(viewportWidth * 0.9, data.width * (viewportHeight / data.height))
+      const finalWidth = Math.min(
+        viewportWidth * 0.9,
+        data.width * (viewportHeight / data.height)
+      )
       const finalHeight = finalWidth / data.aspectRatio
       const finalX = (viewportWidth - finalWidth) / 2
       const finalY = (viewportHeight - finalHeight) / 2
 
       // Set initial position (from original image location)
       transitionStyle.value = {
-        position: 'fixed',
+        position: "fixed",
         top: `${data.y}px`,
         left: `${data.x}px`,
         width: `${data.width}px`,
         height: `${data.height}px`,
         zIndex: 9999,
-        transition: 'all 0.3s ease-out'
+        transition: "all 0.3s ease-out"
       }
 
       // Animate to final position
@@ -235,12 +306,12 @@ function checkForTransition() {
         // Hide transition after animation
         setTimeout(() => {
           isTransitioning.value = false
-          sessionStorage.removeItem('imageTransition')
+          sessionStorage.removeItem("imageTransition")
         }, 300)
       })
     } catch (error) {
-      console.warn('Failed to parse transition data:', error)
+      console.warn("Failed to parse transition data:", error)
-      sessionStorage.removeItem('imageTransition')
+      sessionStorage.removeItem("imageTransition")
     }
   }
 }
@@ -256,6 +327,21 @@ const fileType = computed(() => {
   if (!fileInfo.value) return "unknown"
   return fileInfo.value.mimeType?.split("/")[0] || "unknown"
 })
+const fileIcon = computed(() => {
+  if (!fileInfo.value?.mimeType) return 'mdi-file'
+
+  const mime = fileInfo.value.mimeType.toLowerCase()
+
+  if (mime.startsWith('image/')) return 'mdi-file-image'
+  if (mime.startsWith('video/')) return 'mdi-file-video'
+  if (mime.startsWith('audio/')) return 'mdi-file-music'
+  if (mime === 'application/pdf') return 'mdi-file-pdf'
+  if (mime.startsWith('text/') || mime.includes('javascript') || mime.includes('json') || mime.includes('xml')) return 'mdi-file-code'
+  if (mime.includes('zip') || mime.includes('rar') || mime.includes('tar')) return 'mdi-zip-box'
+  if (mime.includes('document') || mime.includes('word') || mime.includes('excel') || mime.includes('powerpoint')) return 'mdi-file-document'
+
+  return 'mdi-file'
+})
 const fileSource = computed(() => {
   let url = `${apiBase}/drive/files/${fileId}?original=true`
   if (passcode) {