fix: ImageLightbox renders full-resolution image without upscaling

The lightbox previously displayed the proxied thumbnail URL stretched to
`w-[90vw] h-[85vh]`, which forced the browser to upscale the small preview
on wide displays and made it look blurry.

Switch to `max-w-[90vw] max-h-[85vh]` so the image never exceeds its natural
size, and proxy `attachment.url` (the full-resolution original) inside the
lightbox itself. The already-proxied thumbnail is passed as an optional
placeholder and shown while the full image loads.

Author: mremond

apps/fluux/src/components/FileAttachments.tsx

@@ -141,7 +141,8 @@ export const ImageAttachment = memo(function ImageAttachment({ attachment, onLoa
       </button>
       {lightboxOpen && (
         <ImageLightbox
-          src={proxiedImageSrc}
+          src={attachment.url}
+          placeholderSrc={proxiedImageSrc ?? undefined}
           alt={attachment.name || 'Image attachment'}
           downloadUrl={attachment.url}
           filename={attachment.name}

apps/fluux/src/components/ImageLightbox.tsx

@@ -4,25 +4,29 @@
  */
 import { useEffect, useRef } from 'react'
 import { createPortal } from 'react-dom'
-import { X, Download } from 'lucide-react'
+import { X, Download, Loader2 } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
+import { useProxiedUrl } from '@/hooks'
 
 interface ImageLightboxProps {
-  /** Image source URL (proxied/cached) for display */
+  /** Original full-resolution image URL (proxied internally for display) */
   src: string
   /** Alt text for the image */
   alt?: string
   /** Original URL for downloading */
   downloadUrl: string
   /** Original filename */
   filename?: string
+  /** Optional preview URL (e.g. already-proxied thumbnail) shown while the full-size image loads */
+  placeholderSrc?: string
   /** Close handler */
   onClose: () => void
 }
 
-export function ImageLightbox({ src, alt, downloadUrl, filename, onClose }: ImageLightboxProps) {
+export function ImageLightbox({ src, alt, downloadUrl, filename, placeholderSrc, onClose }: ImageLightboxProps) {
   const { t } = useTranslation()
   const mouseDownTargetRef = useRef<EventTarget | null>(null)
+  const { url: proxiedSrc, isLoading } = useProxiedUrl(src)
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -32,6 +36,8 @@ export function ImageLightbox({ src, alt, downloadUrl, filename, onClose }: Imag
     return () => document.removeEventListener('keydown', handleKeyDown)
   }, [onClose])
 
+  const displaySrc = proxiedSrc ?? placeholderSrc
+
   return createPortal(
     <div
       className="fixed inset-0 bg-black/90 flex flex-col items-center justify-center z-50"
@@ -60,12 +66,16 @@ export function ImageLightbox({ src, alt, downloadUrl, filename, onClose }: Imag
       </div>
 
       {/* Image */}
-      <img
-        src={src}
-        alt={alt || 'Image'}
-        className="w-[90vw] h-[85vh] object-contain rounded-lg select-none"
-        draggable={false}
-      />
+      {displaySrc ? (
+        <img
+          src={displaySrc}
+          alt={alt || 'Image'}
+          className="max-w-[90vw] max-h-[85vh] object-contain rounded-lg select-none"
+          draggable={false}
+        />
+      ) : (
+        isLoading && <Loader2 className="w-8 h-8 text-white/70 animate-spin" />
+      )}
 
       {/* Filename label */}
       {filename && (