💄 Optimize the post item

app/components/Attachment/AttachmentItem.vue

@@ -50,45 +50,18 @@ import type { SnAttachment } from "~/types/api"
 const props = defineProps<{
   item: SnAttachment
   original?: boolean
-  maxHeight?: string
+  maxHeight?: number
 }>()
 
 const itemType = computed(() => props.item.mimeType.split("/")[0] ?? "unknown")
 const blurhash = computed(() => props.item.fileMeta?.blur)
-const imageWidth = computed(() => props.item.fileMeta?.width)
 const imageHeight = computed(() => props.item.fileMeta?.height)
 const aspectRatio = computed(
   () =>
-    props.item.fileMeta?.ratio ??
-    (imageWidth.value && imageHeight.value
-      ? imageHeight.value / imageWidth.value
-      : null)
+    props.item.fileMeta?.ratio ?? null
 )
 const imageLoaded = ref(false)
 
-const router = useRouter()
-
-function openExternally() {
-  // Capture image position for transition
-  const img = event?.target as HTMLImageElement
-  if (img && itemType.value === "image") {
-    const rect = img.getBoundingClientRect()
-    const transitionData = {
-      src: remoteSource.value,
-      x: rect.left,
-      y: rect.top,
-      width: rect.width,
-      height: rect.height,
-      aspectRatio: aspectRatio.value == null ? 0 : aspectRatio.value
-    }
-
-    // Store transition data
-    sessionStorage.setItem("imageTransition", JSON.stringify(transitionData))
-  }
-
-  router.push("/files/" + props.item.id)
-}
-
 const blurCanvas = ref<HTMLCanvasElement | null>(null)
 
 const apiBase = useSolarNetworkUrl()
@@ -108,8 +81,8 @@ const blurhashContainerStyle = computed(() => {
 
 const containerStyle = computed(() => {
   return {
-    maxHeight: props.maxHeight ?? "720px",
-    aspectRatio: aspectRatio.value?.toString()
+    maxHeight: Math.min(props.maxHeight ?? 720, imageHeight.value).toString() + "px",
+    aspectRatio: aspectRatio.value != null ? aspectRatio.value.toString() : void 0
   }
 })
 

app/components/Attachment/AttachmentList.vue

@@ -62,24 +62,28 @@ const carouselHeight = computed(() => {
   if (!isAllImages.value) return Math.min(400, props.maxHeight || 400)
 
   const aspectRatio = calculateAspectRatio()
+  if (aspectRatio == null) return null
+
   // Use a base width of 600px for calculation, adjust height accordingly
   const baseWidth = 600
   const calculatedHeight = Math.round(baseWidth / aspectRatio)
 
   // Respect maxHeight constraint if provided
-  const constrainedHeight = props.maxHeight
+  return props.maxHeight
     ? Math.min(calculatedHeight, props.maxHeight)
     : calculatedHeight
-
-  return constrainedHeight
 })
 
 const carouselStyle = computed(() => {
   if (!isAllImages.value) return {}
 
   const aspectRatio = calculateAspectRatio()
+  if (aspectRatio == null) {
+    return {}
+  }
+
   const height = carouselHeight.value
-  const width = Math.round(height * aspectRatio)
+  const width = Math.round(height! * aspectRatio)
 
   return {
     width: `${width}px`,
@@ -88,7 +92,7 @@ const carouselStyle = computed(() => {
   }
 })
 
-function calculateAspectRatio(): number {
+function calculateAspectRatio(): number | null {
   const ratios: number[] = []
 
   // Collect all valid ratios
@@ -110,8 +114,7 @@ function calculateAspectRatio(): number {
   }
 
   if (ratios.length === 0) {
-    // Default to 4:3 aspect ratio when no valid ratios found
-    return 4 / 3
+    return null
   }
 
   if (ratios.length === 1 && ratios[0]) {