Add color-derived blurred side glow behind timeline images

Hop-State: A_06FP8Z3NA8RHHDAGXSGA42R
Hop-Proposal: R_06FP8Z2X1TX81NY6227KPHR
Hop-Task: T_06FP8YSQSSQRHCQ9FVFBJRG
Hop-Attempt: AT_06FP8YSQSRS998YJX8339S8

src/app/globals.css

@@ -451,6 +451,32 @@ a.btn-primary:visited {
   display: block;
 }
 
+/* Fill letterboxed image space with a glow derived from the image itself. */
+.blurred-image-container {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  background: #000;
+  isolation: isolate;
+}
+
+.post-media-item .blurred-image-bg {
+  position: absolute;
+  inset: -32px;
+  width: calc(100% + 64px);
+  height: calc(100% + 64px);
+  max-height: none;
+  object-fit: cover;
+  filter: blur(28px) brightness(0.48) saturate(1.15);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.post-media-item .blurred-image-main {
+  position: relative;
+  z-index: 1;
+}
+
 .post-media-item video {
   width: 100%;
   max-height: 360px;

src/components/BlurredImage.tsx

@@ -0,0 +1,24 @@
+interface BlurredImageProps {
+    src: string;
+    alt: string;
+}
+
+export default function BlurredImage({ src, alt }: BlurredImageProps) {
+    return (
+        <div className="blurred-image-container">
+            <img
+                src={src}
+                alt=""
+                aria-hidden="true"
+                loading="lazy"
+                className="blurred-image-bg"
+            />
+            <img
+                src={src}
+                alt={alt}
+                loading="lazy"
+                className="blurred-image-main"
+            />
+        </div>
+    );
+}

src/components/PostCard.tsx

@@ -9,6 +9,7 @@ import { Post, LinkPreviewMediaItem } from '@/lib/types';
 import { useAuth } from '@/lib/contexts/AuthContext';
 import { useToast } from '@/lib/contexts/ToastContext';
 import { VideoEmbed } from '@/components/VideoEmbed';
+import BlurredImage from '@/components/BlurredImage';
 import BlurredVideo from '@/components/BlurredVideo';
 import { useFormattedHandle } from '@/lib/utils/handle';
 import { useDomain } from '@/lib/contexts/ConfigContext';
@@ -891,7 +892,10 @@ export function PostCard({ post, onLike, onRepost, onComment, onDelete, onHide,
                                             }}
                                         />
                                     ) : (
-                                        <img src={item.url} alt={item.altText || 'Post media'} loading="lazy" />
+                                        <BlurredImage
+                                            src={item.url}
+                                            alt={item.altText || 'Post media'}
+                                        />
                                     )}
                                 </div>
                             );