Improve timeline scroll, media layout, avatars, and emoji coverage.

Remember room scroll position across switches, reserve image/video heights from Matrix dimensions, cache authenticated media blobs for avatars, restore jumbo emoji-only messages, and extend emoji font unicode-range for Unicode 15 glyphs.

package.json

@@ -8,7 +8,7 @@
     "node": ">=16.0.0"
   },
   "scripts": {
-    "start": "vite --open false",
+    "start": "vite",
     "build": "vite build",
     "lint": "yarn check:eslint && yarn check:prettier",
     "check:eslint": "eslint src/*",

src/app/components/message/MsgTypeRenderers.tsx

@@ -28,6 +28,7 @@ import {
 } from '../../../types/matrix/common';
 import { FALLBACK_MIMETYPE, getBlobSafeMimeType } from '../../utils/mimeTypes';
 import { parseGeoUri, scaleYDimension } from '../../utils/common';
+import { resolveAttachmentBoxSize } from '../../state/mediaDimensionCache';
 import { Attachment, AttachmentBox, AttachmentContent, AttachmentHeader } from './attachment';
 import { FileHeader, FileDownloadButton } from './FileHeader';
 
@@ -199,6 +200,13 @@ type MImageProps = {
   renderImageContent: (props: RenderImageContentProps) => ReactNode;
   outlined?: boolean;
 };
+
+const resolveMediaBoxSize = (
+  mxcUrl: string,
+  w?: number,
+  h?: number
+): { width: number; height: number } => resolveAttachmentBoxSize(mxcUrl, w, h);
+
 export function MImage({ content, renderImageContent, outlined }: MImageProps) {
   const imgInfo = content?.info;
   const mxcUrl = content.file?.url ?? content.url;
@@ -206,9 +214,14 @@ export function MImage({ content, renderImageContent, outlined }: MImageProps) {
     return <BrokenContent />;
   }
 
+  const { width, height } = resolveMediaBoxSize(mxcUrl, imgInfo?.w, imgInfo?.h);
+
   return (
     <Attachment outlined={outlined} transparent>
-      <AttachmentBox>
+      <AttachmentBox
+        style={{ width: toRem(width), height: toRem(height) }}
+        data-paarrot-media-height={height}
+      >
         {renderImageContent({
           body: content.body || 'Image',
           info: imgInfo,
@@ -251,6 +264,11 @@ export function MVideo({ content, renderAsFile, renderVideoContent, outlined }:
   }
 
   const filename = content.filename ?? content.body ?? 'Video';
+  const { width, height } = resolveMediaBoxSize(
+    mxcUrl,
+    videoInfo.w ?? videoInfo.thumbnail_info?.w,
+    videoInfo.h ?? videoInfo.thumbnail_info?.h
+  );
 
   return (
     <Attachment outlined={outlined} transparent>
@@ -268,7 +286,10 @@ export function MVideo({ content, renderAsFile, renderVideoContent, outlined }:
           }
         />
       </AttachmentHeader>
-      <AttachmentBox>
+      <AttachmentBox
+        style={{ width: toRem(width), height: toRem(height) }}
+        data-paarrot-media-height={height}
+      >
         {renderVideoContent({
           body: content.body || 'Video',
           info: videoInfo,

src/app/components/message/content/ImageContent.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode, useCallback, useEffect, useState } from 'react';
 import { Badge, Box, Button, Chip, Modal, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, Tooltip, TooltipProvider, as } from 'folds';
 import { Icon, Icons } from '../../icons';
 import classNames from 'classnames';
-import { BlurhashCanvas } from 'react-blurhash';
+import { Blurhash } from 'react-blurhash';
 import FocusTrap from 'focus-trap-react';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import { IImageInfo, MATRIX_BLUR_HASH_PROPERTY_NAME } from '../../../../types/matrix/common';
@@ -17,6 +17,7 @@ import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { ModalWide } from '../../../styles/Modal.css';
 import { validBlurHash } from '../../../utils/blurHash';
 import { getCurrentAccessToken } from '../../../utils/auth';
+import { setMediaDimensions, getMediaBlurHash, getMediaDimensions, rememberMediaBlurHash } from '../../../state/mediaDimensionCache';
 
 /**
  * Fetches media with authentication headers and returns a blob URL.
@@ -68,7 +69,7 @@ type RenderImageProps = {
   alt: string;
   title: string;
   src: string;
-  onLoad: () => void;
+  onLoad: (event?: React.SyntheticEvent<HTMLImageElement>) => void;
   onError: () => void;
   onClick: () => void;
   tabIndex: number;
@@ -105,12 +106,23 @@ export const ImageContent = as<'div', ImageContentProps>(
   ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
-    const blurHash = validBlurHash(info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
+    const eventBlurHash = validBlurHash(info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
+    const cachedBlurHash = getMediaBlurHash(url);
+    const blurHash = eventBlurHash ?? cachedBlurHash;
+    const cachedDims = getMediaDimensions(url);
+    const blurResolutionX = 32;
+    const ratioW = info?.w || cachedDims?.w;
+    const ratioH = info?.h || cachedDims?.h;
+    const blurResolutionY =
+      ratioW && ratioH && ratioW > 0
+        ? Math.max(1, Math.round(blurResolutionX * (ratioH / ratioW)))
+        : 32;
 
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);
     const [viewer, setViewer] = useState(false);
     const [blurred, setBlurred] = useState(markedAsSpoiler ?? false);
+    const [showPlaceholder, setShowPlaceholder] = useState(true);
 
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
@@ -139,6 +151,7 @@ export const ImageContent = as<'div', ImageContentProps>(
     const handleError = () => {
       setLoad(false);
       setError(true);
+      setShowPlaceholder(true);
     };
 
     const handleRetry = () => {
@@ -150,8 +163,34 @@ export const ImageContent = as<'div', ImageContentProps>(
       if (autoPlay) loadSrc();
     }, [autoPlay, loadSrc]);
 
+    // Keep blurhash under the fade, then remove it once the image is fully opaque.
+    useEffect(() => {
+      if (!load) {
+        setShowPlaceholder(true);
+        return undefined;
+      }
+      const timer = window.setTimeout(() => setShowPlaceholder(false), 540);
+      return () => window.clearTimeout(timer);
+    }, [load]);
+
     return (
       <Box className={classNames(css.RelativeBase, className)} {...props} ref={ref}>
+        {showPlaceholder &&
+          (typeof blurHash === 'string' ? (
+            <div className={css.BlurhashPlaceholder}>
+              <Blurhash
+                hash={blurHash}
+                width="100%"
+                height="100%"
+                resolutionX={blurResolutionX}
+                resolutionY={blurResolutionY}
+                punch={1.2}
+                style={{ display: 'block' }}
+              />
+            </div>
+          ) : (
+            <div className={css.MediaSkeleton} />
+          ))}
         {srcState.status === AsyncStatus.Success && (
           <Overlay open={viewer} backdrop={<OverlayBackdrop />}>
             <OverlayCenter>
@@ -177,15 +216,6 @@ export const ImageContent = as<'div', ImageContentProps>(
             </OverlayCenter>
           </Overlay>
         )}
-        {typeof blurHash === 'string' && !load && (
-          <BlurhashCanvas
-            style={{ width: '100%', height: '100%' }}
-            width={32}
-            height={32}
-            hash={blurHash}
-            punch={1}
-          />
-        )}
         {!autoPlay && !markedAsSpoiler && srcState.status === AsyncStatus.Idle && (
           <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
             <Button
@@ -201,12 +231,26 @@ export const ImageContent = as<'div', ImageContentProps>(
           </Box>
         )}
         {srcState.status === AsyncStatus.Success && (
-          <Box className={classNames(css.AbsoluteContainer, blurred && css.Blur)}>
+          <Box
+            className={classNames(
+              css.AbsoluteContainer,
+              css.MediaFadeIn,
+              load && css.MediaFadeInLoaded,
+              blurred && css.Blur
+            )}
+          >
             {renderImage({
               alt: body,
               title: body,
               src: srcState.data,
-              onLoad: handleLoad,
+              onLoad: (e?: React.SyntheticEvent<HTMLImageElement>) => {
+                const img = e?.currentTarget;
+                if (img?.naturalWidth && img?.naturalHeight) {
+                  setMediaDimensions(url, img.naturalWidth, img.naturalHeight);
+                }
+                if (img) rememberMediaBlurHash(url, img);
+                handleLoad();
+              },
               onError: handleError,
               onClick: () => setViewer(true),
               tabIndex: 0,
@@ -248,7 +292,8 @@ export const ImageContent = as<'div', ImageContentProps>(
         )}
         {(srcState.status === AsyncStatus.Loading || srcState.status === AsyncStatus.Success) &&
           !load &&
-          !blurred && (
+          !blurred &&
+          typeof blurHash !== 'string' && (
             <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
               <Spinner variant="Secondary" />
             </Box>

src/app/components/message/content/VideoContent.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode, useCallback, useEffect, useState } from 'react';
 import { Badge, Box, Button, Chip, Modal, Overlay, OverlayBackdrop, OverlayCenter, Spinner, Text, Tooltip, TooltipProvider, as } from 'folds';
 import { Icon, Icons } from '../../icons';
 import classNames from 'classnames';
-import { BlurhashCanvas } from 'react-blurhash';
+import { Blurhash } from 'react-blurhash';
 import FocusTrap from 'focus-trap-react';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import {
@@ -25,6 +25,7 @@ import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { validBlurHash } from '../../../utils/blurHash';
 import { ModalWide } from '../../../styles/Modal.css';
 import { stopPropagation } from '../../../utils/keyboard';
+import { setMediaDimensions, getMediaBlurHash, getMediaDimensions, rememberMediaBlurHash } from '../../../state/mediaDimensionCache';
 
 type RenderViewerProps = {
   src: string;
@@ -34,7 +35,7 @@ type RenderViewerProps = {
 type RenderVideoProps = {
   title: string;
   src: string;
-  onLoadedMetadata: () => void;
+  onLoadedMetadata: (event?: React.SyntheticEvent<HTMLVideoElement>) => void;
   onError: () => void;
   autoPlay: boolean;
   controls: boolean;
@@ -74,12 +75,23 @@ export const VideoContent = as<'div', VideoContentProps>(
   ) => {
     const mx = useMatrixClient();
     const useAuthentication = useMediaAuthentication();
-    const blurHash = validBlurHash(info.thumbnail_info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
+    const eventBlurHash = validBlurHash(info.thumbnail_info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
+    const cachedBlurHash = getMediaBlurHash(url);
+    const blurHash = eventBlurHash ?? cachedBlurHash;
+    const cachedDims = getMediaDimensions(url);
+    const blurResolutionX = 32;
+    const blurW = info.w ?? info.thumbnail_info?.w ?? cachedDims?.w;
+    const blurH = info.h ?? info.thumbnail_info?.h ?? cachedDims?.h;
+    const blurResolutionY =
+      blurW && blurH && blurW > 0
+        ? Math.max(1, Math.round(blurResolutionX * (blurH / blurW)))
+        : 32;
 
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);
     const [viewer, setViewer] = useState(false);
     const [blurred, setBlurred] = useState(markedAsSpoiler ?? false);
+    const [showPlaceholder, setShowPlaceholder] = useState(true);
 
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
@@ -95,12 +107,17 @@ export const VideoContent = as<'div', VideoContentProps>(
       }, [mx, url, useAuthentication, mimeType, encInfo])
     );
 
-    const handleLoad = () => {
+    const handleLoad = (video?: HTMLVideoElement) => {
+      if (video?.videoWidth && video?.videoHeight) {
+        setMediaDimensions(url, video.videoWidth, video.videoHeight);
+      }
+      if (video) rememberMediaBlurHash(url, video);
       setLoad(true);
     };
     const handleError = () => {
       setLoad(false);
       setError(true);
+      setShowPlaceholder(true);
     };
 
     const handleRetry = () => {
@@ -112,8 +129,33 @@ export const VideoContent = as<'div', VideoContentProps>(
       if (autoPlay) loadSrc();
     }, [autoPlay, loadSrc]);
 
+    useEffect(() => {
+      if (!load) {
+        setShowPlaceholder(true);
+        return undefined;
+      }
+      const timer = window.setTimeout(() => setShowPlaceholder(false), 540);
+      return () => window.clearTimeout(timer);
+    }, [load]);
+
     return (
       <Box className={classNames(css.RelativeBase, className)} {...props} ref={ref}>
+        {showPlaceholder &&
+          (typeof blurHash === 'string' ? (
+            <div className={css.BlurhashPlaceholder}>
+              <Blurhash
+                hash={blurHash}
+                width="100%"
+                height="100%"
+                resolutionX={blurResolutionX}
+                resolutionY={blurResolutionY}
+                punch={1.2}
+                style={{ display: 'block' }}
+              />
+            </div>
+          ) : (
+            <div className={css.MediaSkeleton} />
+          ))}
         {renderViewer && srcState.status === AsyncStatus.Success && (
           <Overlay open={viewer} backdrop={<OverlayBackdrop />}>
             <OverlayCenter>
@@ -136,15 +178,6 @@ export const VideoContent = as<'div', VideoContentProps>(
             </OverlayCenter>
           </Overlay>
         )}
-        {typeof blurHash === 'string' && !load && (
-          <BlurhashCanvas
-            style={{ width: '100%', height: '100%' }}
-            width={32}
-            height={32}
-            hash={blurHash}
-            punch={1}
-          />
-        )}
         {renderThumbnail && !load && (
           <Box
             className={classNames(css.AbsoluteContainer, blurred && css.Blur)}
@@ -169,11 +202,20 @@ export const VideoContent = as<'div', VideoContentProps>(
           </Box>
         )}
         {srcState.status === AsyncStatus.Success && (
-          <Box className={classNames(css.AbsoluteContainer, blurred && css.Blur)}>
+          <Box
+            className={classNames(
+              css.AbsoluteContainer,
+              css.MediaFadeIn,
+              load && css.MediaFadeInLoaded,
+              blurred && css.Blur
+            )}
+          >
             {renderVideo({
               title: body,
               src: srcState.data,
-              onLoadedMetadata: handleLoad,
+              onLoadedMetadata: (e?: React.SyntheticEvent<HTMLVideoElement>) => {
+                handleLoad(e?.currentTarget);
+              },
               onError: handleError,
               autoPlay: true,
               controls: true,
@@ -213,7 +255,8 @@ export const VideoContent = as<'div', VideoContentProps>(
         )}
         {(srcState.status === AsyncStatus.Loading || srcState.status === AsyncStatus.Success) &&
           !load &&
-          !blurred && (
+          !blurred &&
+          typeof blurHash !== 'string' && (
             <Box className={css.AbsoluteContainer} alignItems="Center" justifyContent="Center">
               <Spinner variant="Secondary" />
             </Box>

src/app/components/message/content/style.css.ts

@@ -1,11 +1,13 @@
-import { style } from '@vanilla-extract/css';
+import { keyframes, style } from '@vanilla-extract/css';
-import { DefaultReset, config } from 'folds';
+import { DefaultReset, color, config } from 'folds';
 
 export const RelativeBase = style([
   DefaultReset,
   {
     position: 'relative',
     display: 'flex',
+    width: '100%',
+    height: '100%',
     maxWidth: '100%',
     maxHeight: '100%',
     borderRadius: '7px',
@@ -16,9 +18,13 @@ export const RelativeBase = style([
 export const AbsoluteContainer = style([
   DefaultReset,
   {
+    position: 'absolute',
+    inset: 0,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
+    width: '100%',
+    height: '100%',
     maxWidth: '100%',
     maxHeight: '100%',
     borderRadius: 'inherit',
@@ -34,6 +40,7 @@ export const AbsoluteFooter = style([
     bottom: config.space.S100,
     left: config.space.S100,
     right: config.space.S100,
+    zIndex: 1,
   },
 ]);
 
@@ -43,3 +50,67 @@ export const Blur = style([
     filter: 'blur(44px)',
   },
 ]);
+
+const shimmer = keyframes({
+  '0%': {
+    backgroundPosition: '200% 0',
+  },
+  '100%': {
+    backgroundPosition: '-200% 0',
+  },
+});
+
+/** Soft fallback when no blurhash is available. */
+export const MediaSkeleton = style([
+  DefaultReset,
+  {
+    position: 'absolute',
+    inset: 0,
+    borderRadius: 'inherit',
+    backgroundImage: `linear-gradient(
+      90deg,
+      ${color.SurfaceVariant.Container} 0%,
+      ${color.SurfaceVariant.ContainerHover} 40%,
+      ${color.SurfaceVariant.Container} 80%
+    )`,
+    backgroundSize: '200% 100%',
+    animation: `${shimmer} 1.4s ease-in-out infinite`,
+  },
+]);
+
+const blurhashFadeIn = keyframes({
+  from: {
+    opacity: 0,
+  },
+  to: {
+    opacity: 1,
+  },
+});
+
+/** Soft blurhash layer that fills the reserved media box. */
+export const BlurhashPlaceholder = style([
+  DefaultReset,
+  {
+    position: 'absolute',
+    inset: 0,
+    overflow: 'hidden',
+    borderRadius: 'inherit',
+    zIndex: 0,
+    // Soften the decode so it reads as color blobs; slight scale hides blur edges.
+    filter: 'blur(14px)',
+    transform: 'scale(1.06)',
+    opacity: 0,
+    animation: `${blurhashFadeIn} 560ms cubic-bezier(0.22, 1, 0.36, 1) forwards`,
+  },
+]);
+
+/** Media starts invisible and fades in once loaded over the placeholder. */
+export const MediaFadeIn = style({
+  zIndex: 1,
+  opacity: 0,
+  transition: 'opacity 520ms cubic-bezier(0.22, 1, 0.36, 1)',
+});
+
+export const MediaFadeInLoaded = style({
+  opacity: 1,
+});

src/app/components/message/layout/layout.css.ts

@@ -1,4 +1,5 @@
-import { createVar, keyframes, style, styleVariants } from '@vanilla-extract/css';
+import { createVar, globalStyle, keyframes, style, styleVariants } from '@vanilla-extract/css';
+import * as htmlCss from '../../../styles/CustomHtml.css';
 import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
 import { DefaultReset, color, config, toRem } from 'folds';
 
@@ -117,6 +118,7 @@ export const MessageBase = recipe({
     collapse: {
       true: {
         marginTop: 0,
+        paddingTop: config.space.S0,
       },
     },
     autoCollapse: {
@@ -209,6 +211,8 @@ export const UsernameBold = style({
   fontWeight: 550,
 });
 
+const jumboEmojiSize = toRem(70);
+
 export const MessageTextBody = recipe({
   base: {
     wordBreak: 'break-word',
@@ -226,8 +230,9 @@ export const MessageTextBody = recipe({
     },
     jumboEmoji: {
       true: {
-        fontSize: '1.504em',
+        lineHeight: 1,
-        lineHeight: '1.4962em',
+        overflow: 'visible',
+        overflowY: 'visible',
       },
     },
     emote: {
@@ -240,3 +245,29 @@ export const MessageTextBody = recipe({
 });
 
 export type MessageTextBodyVariants = RecipeVariants<typeof MessageTextBody>;
+
+const jumboEmojiClass = MessageTextBody.classNames.variants.jumboEmoji.true;
+
+globalStyle(`${jumboEmojiClass} .${htmlCss.EmoticonBase}`, {
+  height: jumboEmojiSize,
+  padding: 0,
+  overflow: 'visible',
+  verticalAlign: 'middle',
+});
+
+globalStyle(`${jumboEmojiClass} .${htmlCss.Emoticon.classNames.base}`, {
+  fontSize: jumboEmojiSize,
+  height: jumboEmojiSize,
+  minWidth: jumboEmojiSize,
+  lineHeight: 1,
+  position: 'static',
+  top: 0,
+  overflow: 'visible',
+});
+
+globalStyle(`${jumboEmojiClass} .${htmlCss.EmoticonImg}`, {
+  height: jumboEmojiSize,
+  width: jumboEmojiSize,
+  maxHeight: 'none',
+  objectFit: 'contain',
+});

src/app/components/room-avatar/RoomAvatar.tsx

@@ -1,13 +1,23 @@
 import { JoinRule } from 'matrix-js-sdk';
 import { AvatarFallback, AvatarImage, color } from 'folds';
 import { Icon, Icons } from '../icons';
-import React, { ComponentProps, ReactEventHandler, ReactNode, forwardRef, useState } from 'react';
+import React, { ComponentProps, ReactEventHandler, ReactNode, forwardRef, useEffect, useState } from 'react';
+import { Blurhash } from 'react-blurhash';
 import * as css from './RoomAvatar.css';
 import { joinRuleToIconSrc } from '../../utils/room';
 import colorMXID from '../../../util/colorMXID';
 import { useAuthenticatedMediaUrl } from '../../hooks/useAuthenticatedMediaUrl';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { cacheAvatar, isAvatarCached, pruneAvatarCache } from '../../utils/avatarCache';
+import {
+  getCachedAuthenticatedMediaUrl,
+  isAuthenticatedMediaUrl,
+} from '../../utils/authenticatedMediaCache';
+import {
+  getMediaBlurHash,
+  getMediaDimensions,
+  rememberMediaBlurHash,
+} from '../../state/mediaDimensionCache';
 
 type RoomAvatarProps = {
   roomId: string;
@@ -17,19 +27,36 @@ type RoomAvatarProps = {
 };
 export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps) {
   const [error, setError] = useState(false);
-  const [loaded, setLoaded] = useState(() => isAvatarCached(src));
   const useAuthentication = useMediaAuthentication();
   const authenticatedSrc = useAuthenticatedMediaUrl(src, useAuthentication);
+  const blurHash = getMediaBlurHash(src ?? '');
+  const dims = getMediaDimensions(src ?? '');
+  const blobCached =
+    !!src &&
+    (!useAuthentication ||
+      !isAuthenticatedMediaUrl(src) ||
+      !!getCachedAuthenticatedMediaUrl(src));
+  const [loaded, setLoaded] = useState(() => isAvatarCached(src) || blobCached);
+
+  useEffect(() => {
+    if (
+      authenticatedSrc &&
+      (isAvatarCached(src) ||
+        (src && (!useAuthentication || !isAuthenticatedMediaUrl(src) || getCachedAuthenticatedMediaUrl(src))))
+    ) {
+      setLoaded(true);
+    }
+  }, [authenticatedSrc, src, useAuthentication]);
 
   const handleLoad: ReactEventHandler<HTMLImageElement> = (evt) => {
     evt.currentTarget.setAttribute('data-image-loaded', 'true');
     setLoaded(true);
     cacheAvatar(src);
     pruneAvatarCache();
+    rememberMediaBlurHash(src ?? '', evt.currentTarget);
   };
 
-  // No src or error - show fallback only
+  if (!src || error) {
-  if (!authenticatedSrc || error) {
     return (
       <AvatarFallback
         style={{ backgroundColor: colorMXID(roomId ?? ''), color: color.Surface.Container }}
@@ -40,8 +67,7 @@ export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps
     );
   }
 
-  // If already cached, show image directly without fallback flash
+  if (authenticatedSrc && loaded) {
-  if (loaded) {
     return (
       <AvatarImage
         className={css.RoomAvatar}
@@ -55,7 +81,12 @@ export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps
     );
   }
 
-  // Loading state - render fallback with image overlay
+  const blurResolutionX = 32;
+  const blurResolutionY =
+    dims?.w && dims?.h && dims.w > 0
+      ? Math.max(1, Math.round(blurResolutionX * (dims.h / dims.w)))
+      : 32;
+
   return (
     <div style={{ position: 'relative', width: '100%', height: '100%' }}>
       <AvatarFallback
@@ -69,15 +100,39 @@ export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps
       >
         {renderFallback()}
       </AvatarFallback>
+      {blurHash && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            overflow: 'hidden',
+            borderRadius: 'inherit',
+            filter: 'blur(6px)',
+            transform: 'scale(1.08)',
+          }}
+        >
+          <Blurhash
+            hash={blurHash}
+            width="100%"
+            height="100%"
+            resolutionX={blurResolutionX}
+            resolutionY={blurResolutionY}
+            punch={1.1}
+            style={{ display: 'block' }}
+          />
+        </div>
+      )}
+      {authenticatedSrc && (
         <AvatarImage
           className={css.RoomAvatar}
-        style={{ position: 'relative', zIndex: 1 }}
+          style={{ position: 'relative', zIndex: 1, opacity: loaded ? 1 : 0 }}
           src={authenticatedSrc}
           alt={alt}
           onError={() => setError(true)}
           onLoad={handleLoad}
           draggable={false}
         />
+      )}
     </div>
   );
 }

src/app/components/user-avatar/UserAvatar.tsx

@@ -1,18 +1,21 @@
 import { AvatarFallback, AvatarImage, color } from 'folds';
 import React, { ReactEventHandler, ReactNode, useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
+import { Blurhash } from 'react-blurhash';
 import * as css from './UserAvatar.css';
 import colorMXID from '../../../util/colorMXID';
 import { useAuthenticatedMediaUrl } from '../../hooks/useAuthenticatedMediaUrl';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { cacheAvatar, isAvatarCached, pruneAvatarCache } from '../../utils/avatarCache';
-
+import {
-// Check if image is already in browser cache
+  getCachedAuthenticatedMediaUrl,
-function isImageInBrowserCache(url: string): boolean {
+  isAuthenticatedMediaUrl,
-  const img = new Image();
+} from '../../utils/authenticatedMediaCache';
-  img.src = url;
+import {
-  return img.complete && img.naturalWidth > 0;
+  getMediaBlurHash,
-}
+  getMediaDimensions,
+  rememberMediaBlurHash,
+} from '../../state/mediaDimensionCache';
 
 type UserAvatarProps = {
   className?: string;
@@ -25,20 +28,28 @@ export function UserAvatar({ className, userId, src, alt, renderFallback }: User
   const [error, setError] = useState(false);
   const useAuthentication = useMediaAuthentication();
   const authenticatedSrc = useAuthenticatedMediaUrl(src, useAuthentication);
+  const blurHash = getMediaBlurHash(src ?? '');
+  const dims = getMediaDimensions(src ?? '');
+  const blobCached =
+    !!src &&
+    (!useAuthentication ||
+      !isAuthenticatedMediaUrl(src) ||
+      !!getCachedAuthenticatedMediaUrl(src));
 
-  // Check both our cache and browser's native cache
+  const [loaded, setLoaded] = useState(() => isAvatarCached(src) || blobCached);
-  const [loaded, setLoaded] = useState(() => {
+
-    if (isAvatarCached(src)) return true;
+  useEffect(() => {
-    if (authenticatedSrc && isImageInBrowserCache(authenticatedSrc)) {
+    if (
-      cacheAvatar(src);
+      authenticatedSrc &&
-      return true;
+      (isAvatarCached(src) ||
+        (src && (!useAuthentication || !isAuthenticatedMediaUrl(src) || getCachedAuthenticatedMediaUrl(src))))
+    ) {
+      setLoaded(true);
     }
-    return false;
+  }, [authenticatedSrc, src, useAuthentication]);
-  });
 
   const imgRef = useRef<HTMLImageElement>(null);
 
-  // Also check on mount if image is already complete (browser cached)
   useEffect(() => {
     if (!loaded && imgRef.current?.complete && imgRef.current?.naturalWidth > 0) {
       setLoaded(true);
@@ -51,10 +62,10 @@ export function UserAvatar({ className, userId, src, alt, renderFallback }: User
     setLoaded(true);
     cacheAvatar(src);
     pruneAvatarCache();
+    rememberMediaBlurHash(src ?? '', evt.currentTarget);
   };
 
-  // No src or error - show fallback only
+  if (!src || error) {
-  if (!authenticatedSrc || error) {
     return (
       <AvatarFallback
         style={{ backgroundColor: colorMXID(userId), color: color.Surface.Container }}
@@ -65,8 +76,7 @@ export function UserAvatar({ className, userId, src, alt, renderFallback }: User
     );
   }
 
-  // If already cached, show image directly without fallback flash
+  if (authenticatedSrc && loaded) {
-  if (loaded) {
     return (
       <AvatarImage
         className={classNames(css.UserAvatar, className)}
@@ -80,8 +90,12 @@ export function UserAvatar({ className, userId, src, alt, renderFallback }: User
     );
   }
 
-  // Loading state - render image with hidden fallback behind it
+  const blurResolutionX = 32;
-  // Image loads invisibly, then we show it once complete
+  const blurResolutionY =
+    dims?.w && dims?.h && dims.w > 0
+      ? Math.max(1, Math.round(blurResolutionX * (dims.h / dims.w)))
+      : 32;
+
   return (
     <div style={{ position: 'relative', width: '100%', height: '100%' }}>
       <AvatarFallback
@@ -95,16 +109,40 @@ export function UserAvatar({ className, userId, src, alt, renderFallback }: User
       >
         {renderFallback()}
       </AvatarFallback>
+      {blurHash && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            overflow: 'hidden',
+            borderRadius: 'inherit',
+            filter: 'blur(6px)',
+            transform: 'scale(1.08)',
+          }}
+        >
+          <Blurhash
+            hash={blurHash}
+            width="100%"
+            height="100%"
+            resolutionX={blurResolutionX}
+            resolutionY={blurResolutionY}
+            punch={1.1}
+            style={{ display: 'block' }}
+          />
+        </div>
+      )}
+      {authenticatedSrc && (
         <AvatarImage
           ref={imgRef}
           className={classNames(css.UserAvatar, className)}
-        style={{ position: 'relative', zIndex: 1 }}
+          style={{ position: 'relative', zIndex: 1, opacity: loaded ? 1 : 0 }}
           src={authenticatedSrc}
           alt={alt}
           onError={() => setError(true)}
           onLoad={handleLoad}
           draggable={false}
         />
+      )}
     </div>
   );
 }

src/app/features/room/RoomTimeline.tsx

@@ -103,6 +103,11 @@ import { useInertialHorizontalScroll } from '../../hooks/useInertialHorizontalSc
 import { roomToParentsAtom } from '../../state/room/roomToParents';
 import { useRoomUnread } from '../../state/hooks/unread';
 import { roomToUnreadAtom } from '../../state/room/roomToUnread';
+import {
+  clearRoomScrollState,
+  getRoomScrollState,
+  saveRoomScrollState,
+} from '../../state/roomScrollCache';
 import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
 import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
@@ -620,6 +625,10 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const location = useLocation();
   const scrollToLatest = (location.state as { scrollToLatest?: boolean } | null)?.scrollToLatest;
 
+  const savedScrollRef = useRef(
+    eventId || scrollToLatest ? undefined : getRoomScrollState(room.roomId)
+  );
+
   const imagePackRooms: Room[] = useImagePackRooms(room.roomId, roomToParents);
 
   const [unreadInfo, setUnreadInfo] = useState(() =>
@@ -631,7 +640,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   }
 
   const atBottomAnchorRef = useRef<HTMLElement>(null);
-  const [atBottom, setAtBottom] = useState<boolean>(true);
+  const [atBottom, setAtBottom] = useState<boolean>(
+    () => savedScrollRef.current?.atBottom ?? true
+  );
   const atBottomRef = useRef(atBottom);
   atBottomRef.current = atBottom;
 
@@ -643,6 +654,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const scrollRef = useRef<HTMLDivElement>(null);
   const timelineContentRef = useRef<HTMLDivElement>(null);
   const timelineContentHeightRef = useRef(0);
+  const restoringScrollRef = useRef(false);
   const scrollToBottomRef = useRef({
     count: 0,
     smooth: true,
@@ -680,9 +692,40 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   );
   const parseMemberEvent = useMemberEventParser();
 
-  const [timeline, setTimeline] = useState<Timeline>(() =>
+  const [timeline, setTimeline] = useState<Timeline>(() => {
-    eventId ? getEmptyTimeline() : getInitialTimeline(room)
+    if (eventId) return getEmptyTimeline();
+    const initial = getInitialTimeline(room);
+    const saved = savedScrollRef.current;
+    if (!saved?.range) return initial;
+
+    const evLength = getTimelinesEventsCount(initial.linkedTimelines);
+    if (evLength === 0) return initial;
+
+    const start = Math.min(saved.range.start, Math.max(0, evLength - 1));
+    const end = Math.min(Math.max(start + 1, saved.range.end), evLength);
+
+    return { ...initial, range: { start, end } };
+  });
+  const timelineRef = useRef(timeline);
+  timelineRef.current = timeline;
+
+  const persistTimelineScroll = useCallback(
+    (roomId: string) => {
+      if (eventId) return;
+      const scrollEl = scrollRef.current;
+      if (!scrollEl) return;
+
+      const distanceFromBottom =
+        scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight;
+      saveRoomScrollState(roomId, {
+        top: scrollEl.scrollTop,
+        atBottom: distanceFromBottom <= 50,
+        range: timelineRef.current.range,
+      });
+    },
+    [eventId]
   );
+
   const eventsLength = getTimelinesEventsCount(timeline.linkedTimelines);
   const liveTimelineLinked =
     timeline.linkedTimelines[timeline.linkedTimelines.length - 1] === getLiveTimeline(room);
@@ -861,6 +904,8 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
         const scrollElement = getScrollElement();
         if (!editorBaseEntry || !scrollElement) return;
 
+        if (restoringScrollRef.current) return;
+
         if (isScrolledToBottom(scrollElement)) {
           autoScrollToBottom(scrollElement, false, true);
         }
@@ -882,6 +927,18 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       const previousHeight = timelineContentHeightRef.current;
       timelineContentHeightRef.current = nextHeight;
 
+      if (restoringScrollRef.current) {
+        const saved = savedScrollRef.current;
+        if (saved) {
+          if (saved.atBottom) {
+            scrollElement.scrollTop = scrollElement.scrollHeight;
+          } else {
+            scrollElement.scrollTop = saved.top;
+          }
+        }
+        return;
+      }
+
       if (previousHeight === 0 || nextHeight <= previousHeight || !isScrolledToBottom(scrollElement)) {
         return;
       }
@@ -994,6 +1051,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   // Scroll to latest when clicking on already-selected room
   useEffect(() => {
     if (scrollToLatest) {
+      clearRoomScrollState(room.roomId);
       setLatestUnreadMessage(null);
       setUnreadInfo(undefined);
       setTimeline(getInitialTimeline(room));
@@ -1003,12 +1061,78 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     }
   }, [scrollToLatest, room]);
 
-  // Scroll to bottom on initial timeline load
+  // Remember scroll position when leaving a room (switch DM, nav away, etc.).
+  useLayoutEffect(() => {
+    const roomId = room.roomId;
+    return () => {
+      persistTimelineScroll(roomId);
+    };
+  }, [room.roomId, persistTimelineScroll]);
+
+  // Keep scroll cache updated while reading (useEffect cleanup runs after DOM teardown).
+  useEffect(() => {
+    const scrollEl = scrollRef.current;
+    if (!scrollEl || eventId) return undefined;
+
+    const roomId = room.roomId;
+    let raf = 0;
+    const onScroll = () => {
+      if (restoringScrollRef.current) return;
+      window.cancelAnimationFrame(raf);
+      raf = window.requestAnimationFrame(() => persistTimelineScroll(roomId));
+    };
+
+    scrollEl.addEventListener('scroll', onScroll, { passive: true });
+    return () => {
+      window.cancelAnimationFrame(raf);
+      scrollEl.removeEventListener('scroll', onScroll);
+    };
+  }, [room.roomId, eventId, persistTimelineScroll]);
+
+  // Restore saved scroll or default to bottom on first open.
   useLayoutEffect(() => {
     const scrollEl = scrollRef.current;
-    if (scrollEl) {
+    if (!scrollEl) return undefined;
+
+    if (scrollToLatest) {
       autoScrollToBottom(scrollEl, false, true);
+      return undefined;
     }
+
+    const saved = savedScrollRef.current;
+    if (!saved) {
+      autoScrollToBottom(scrollEl, false, true);
+      return undefined;
+    }
+
+    restoringScrollRef.current = true;
+    setAtBottom(saved.atBottom);
+
+    const restore = () => {
+      if (saved.atBottom) {
+        scrollEl.scrollTop = scrollEl.scrollHeight;
+      } else {
+        scrollEl.scrollTop = saved.top;
+      }
+    };
+
+    restore();
+    const raf1 = window.requestAnimationFrame(() => {
+      restore();
+      window.requestAnimationFrame(() => {
+        restore();
+        window.setTimeout(() => {
+          restore();
+          window.setTimeout(() => {
+            restoringScrollRef.current = false;
+          }, 150);
+        }, 50);
+      });
+    });
+    return () => {
+      window.cancelAnimationFrame(raf1);
+      restoringScrollRef.current = false;
+    };
   }, []);
 
   // if live timeline is linked and unreadInfo change
@@ -1052,7 +1176,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   // scroll to bottom of timeline
   const scrollToBottomCount = scrollToBottomRef.current.count;
   useLayoutEffect(() => {
-    if (scrollToBottomCount > 0) {
+    if (scrollToBottomCount > 0 && !restoringScrollRef.current) {
       const scrollEl = scrollRef.current;
       if (scrollEl) {
         autoScrollToBottom(
@@ -1113,6 +1237,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     if (eventId) {
       navigateRoom(room.roomId, undefined, { replace: true });
     }
+    clearRoomScrollState(room.roomId);
     setLatestUnreadMessage(null);
     setTimeline(getInitialTimeline(room));
     scrollToBottomRef.current.count += 1;
@@ -2291,7 +2416,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           </Chip>
         </TimelineFloat>
       )}
-      <Scroll ref={scrollRef} visibility="Hover">
+      <Scroll ref={scrollRef} visibility="Hover" data-room-timeline-scroll="">
         <Box
           ref={timelineContentRef}
           direction="Column"

src/app/features/room/msgContent.ts

@@ -59,10 +59,14 @@ export const getImageMsgContent = async (
     [MATRIX_SPOILER_PROPERTY_NAME]: metadata.markedAsSpoiler,
   };
   if (imgEl) {
-    const blurHash = encodeBlurHash(imgEl, 512, scaleYDimension(imgEl.width, 512, imgEl.height));
+    const naturalW = imgEl.naturalWidth || imgEl.width;
+    const naturalH = imgEl.naturalHeight || imgEl.height;
+    const blurHash = encodeBlurHash(imgEl, 512, scaleYDimension(naturalW, 512, naturalH));
 
     content.info = {
       ...getImageInfo(imgEl, file),
+      w: naturalW,
+      h: naturalH,
       [MATRIX_BLUR_HASH_PROPERTY_NAME]: blurHash,
     };
   }

src/app/hooks/useAuthenticatedMediaUrl.ts

@@ -1,89 +1,57 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useMatrixClient } from './useMatrixClient';
-import { getCurrentAccessToken } from '../utils/auth';
+import {
+  getCachedAuthenticatedMediaUrl,
+  isAuthenticatedMediaUrl,
+  resolveAuthenticatedMediaUrl,
+} from '../utils/authenticatedMediaCache';
 
 /**
- * Fetches media with authentication and returns a blob URL.
+ * Resolves media URLs for Matrix authenticated media.
- * This is needed because service workers may not work reliably in Tauri/WebKit environments,
+ * Uses a shared blob-URL cache so avatars/thumbs are not re-fetched on every remount.
- * and cross-origin image requests cannot include Authorization headers.
  */
 export const useAuthenticatedMediaUrl = (
   src: string | undefined,
   useAuthentication: boolean
 ): string | undefined => {
   const mx = useMatrixClient();
-  const [blobUrl, setBlobUrl] = useState<string | undefined>(undefined);
+  const [blobUrl, setBlobUrl] = useState<string | undefined>(() => {
+    if (!src) return undefined;
+    if (!useAuthentication || !isAuthenticatedMediaUrl(src)) return src;
+    return getCachedAuthenticatedMediaUrl(src);
+  });
 
   useEffect(() => {
     if (!src) {
       setBlobUrl(undefined);
-      return;
+      return undefined;
     }
 
-    // If not using authentication, just return the original URL
+    if (!useAuthentication || !isAuthenticatedMediaUrl(src)) {
-    if (!useAuthentication) {
       setBlobUrl(src);
-      return;
+      return undefined;
     }
 
-    // Check if this is an authenticated media URL
+    const cached = getCachedAuthenticatedMediaUrl(src);
-    const isAuthenticatedMediaUrl =
+    if (cached) {
-      src.includes('/_matrix/client/v1/media/download') ||
+      setBlobUrl(cached);
-      src.includes('/_matrix/client/v1/media/thumbnail') ||
+      return undefined;
-      (src.includes('/_matrix/media/') &&
-        (src.includes('/download/') || src.includes('/thumbnail/')));
-
-    if (!isAuthenticatedMediaUrl) {
-      setBlobUrl(src);
-      return;
     }
 
     let cancelled = false;
-    let objectUrl: string | undefined;
 
-    const fetchMedia = async () => {
+    resolveAuthenticatedMediaUrl(src, useAuthentication)
-      try {
+      .then((url) => {
-        // Always use current session's token to avoid stale tokens during account switches
+        if (!cancelled) setBlobUrl(url);
-        const accessToken = getCurrentAccessToken();
+      })
-        let response = await fetch(src, {
+      .catch((error) => {
-          method: 'GET',
+        console.warn('[useAuthenticatedMediaUrl] Error fetching authenticated media:', error);
-          headers: accessToken
+        if (!cancelled) setBlobUrl(src);
-            ? { Authorization: `Bearer ${accessToken}` }
-            : undefined,
       });
 
-        // If we got a 401 and we tried with auth, fallback to unauthenticated request
-        if (!response.ok && response.status === 401 && accessToken) {
-          console.warn('[useAuthenticatedMediaUrl] Auth failed (401), attempting unauthenticated fallback for:', src);
-          response = await fetch(src, { method: 'GET' });
-        }
-
-        if (!response.ok) {
-          console.warn(`Failed to fetch authenticated media: ${response.status}`);
-          // Fall back to original URL in case server doesn't require auth
-          if (!cancelled) setBlobUrl(src);
-          return;
-        }
-
-        const blob = await response.blob();
-        if (!cancelled) {
-          objectUrl = URL.createObjectURL(blob);
-          setBlobUrl(objectUrl);
-        }
-      } catch (error) {
-        console.warn('Error fetching authenticated media:', error);
-        // Fall back to original URL
-        if (!cancelled) setBlobUrl(src);
-      }
-    };
-
-    fetchMedia();
-
     return () => {
       cancelled = true;
-      if (objectUrl) {
+      // Shared cache owns blob URLs — do not revoke on unmount.
-        URL.revokeObjectURL(objectUrl);
-      }
     };
   }, [src, useAuthentication, mx]);
 
@@ -98,42 +66,11 @@ export const useAuthenticatedMediaFetch = () => {
   const mx = useMatrixClient();
 
   return useCallback(
-    async (src: string): Promise<string> => {
+    async (src: string, useAuthentication = true): Promise<string> => {
-      const isAuthenticatedMediaUrl =
-        src.includes('/_matrix/client/v1/media/download') ||
-        src.includes('/_matrix/client/v1/media/thumbnail') ||
-        (src.includes('/_matrix/media/') &&
-          (src.includes('/download/') || src.includes('/thumbnail/')));
-
-      if (!isAuthenticatedMediaUrl) {
-        return src;
-      }
-
       try {
-        // Always use current session's token to avoid stale tokens during account switches
+        return await resolveAuthenticatedMediaUrl(src, useAuthentication);
-        const accessToken = getCurrentAccessToken();
-        let response = await fetch(src, {
-          method: 'GET',
-          headers: accessToken
-            ? { Authorization: `Bearer ${accessToken}` }
-            : undefined,
-        });
-
-        // If we got a 401 and we tried with auth, fallback to unauthenticated request
-        if (!response.ok && response.status === 401 && accessToken) {
-          console.warn('[useAuthenticatedMediaFetch] Auth failed (401), attempting unauthenticated fallback');
-          response = await fetch(src, { method: 'GET' });
-        }
-
-        if (!response.ok) {
-          console.warn(`Failed to fetch authenticated media: ${response.status}`);
-          return src;
-        }
-
-        const blob = await response.blob();
-        return URL.createObjectURL(blob);
       } catch (error) {
-        console.warn('Error fetching authenticated media:', error);
+        console.warn('[useAuthenticatedMediaFetch] Error fetching authenticated media:', error);
         return src;
       }
     },

src/app/state/mediaDimensionCache.ts

@@ -0,0 +1,168 @@
+import { encodeBlurHash, validBlurHash } from '../utils/blurHash';
+import { fitMediaSize } from '../utils/common';
+
+const STORAGE_KEY = 'paarrot.media.meta';
+const LEGACY_DIMENSIONS_KEY = 'paarrot.media.dimensions';
+const MAX_ENTRIES = 500;
+
+/** Same max box as MImage / MVideo attachment rendering. */
+export const ATTACHMENT_MAX_SIZE = 400;
+
+export type MediaMeta = {
+  w: number;
+  h: number;
+  blurHash?: string;
+};
+
+export type MediaDimensions = Pick<MediaMeta, 'w' | 'h'>;
+
+type CacheMap = Record<string, MediaMeta>;
+
+let memoryCache: CacheMap | null = null;
+
+const loadCache = (): CacheMap => {
+  if (memoryCache) return memoryCache;
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw) {
+      memoryCache = JSON.parse(raw) as CacheMap;
+      return memoryCache;
+    }
+    // Migrate older dimensions-only cache once.
+    const legacy = localStorage.getItem(LEGACY_DIMENSIONS_KEY);
+    if (legacy) {
+      memoryCache = JSON.parse(legacy) as CacheMap;
+      localStorage.setItem(STORAGE_KEY, legacy);
+      localStorage.removeItem(LEGACY_DIMENSIONS_KEY);
+      return memoryCache;
+    }
+  } catch {
+    // ignore
+  }
+  memoryCache = {};
+  return memoryCache;
+};
+
+const persistCache = (cache: CacheMap) => {
+  memoryCache = cache;
+  try {
+    const keys = Object.keys(cache);
+    if (keys.length > MAX_ENTRIES) {
+      const trimmed: CacheMap = {};
+      keys.slice(keys.length - MAX_ENTRIES).forEach((key) => {
+        trimmed[key] = cache[key];
+      });
+      memoryCache = trimmed;
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(trimmed));
+      return;
+    }
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(cache));
+  } catch {
+    // Quota / private mode — keep in-memory only.
+  }
+};
+
+const touchEntry = (mxcUrl: string, patch: Partial<MediaMeta>): void => {
+  if (!mxcUrl) return;
+  const cache = loadCache();
+  const prev = cache[mxcUrl];
+  const next: MediaMeta = {
+    w: patch.w ?? prev?.w ?? 0,
+    h: patch.h ?? prev?.h ?? 0,
+    blurHash: patch.blurHash ?? prev?.blurHash,
+  };
+  if (next.w <= 0 || next.h <= 0) return;
+  if (
+    prev &&
+    prev.w === next.w &&
+    prev.h === next.h &&
+    prev.blurHash === next.blurHash
+  ) {
+    return;
+  }
+  if (prev) delete cache[mxcUrl];
+  cache[mxcUrl] = next;
+  persistCache(cache);
+};
+
+export const getMediaDimensions = (mxcUrl: string): MediaDimensions | undefined => {
+  if (!mxcUrl) return undefined;
+  const entry = loadCache()[mxcUrl];
+  if (!entry || entry.w <= 0 || entry.h <= 0) return undefined;
+  return { w: entry.w, h: entry.h };
+};
+
+/** Fit attachment box size using event info, then local dimension cache. */
+export const resolveAttachmentBoxSize = (
+  mxcUrl: string | undefined,
+  w?: number,
+  h?: number,
+  maxSize: number = ATTACHMENT_MAX_SIZE
+): { width: number; height: number } => {
+  const cached = mxcUrl && (!w || !h) ? getMediaDimensions(mxcUrl) : undefined;
+  const naturalW = w && w > 0 ? w : cached?.w;
+  const naturalH = h && h > 0 ? h : cached?.h;
+  return fitMediaSize(naturalW ?? 0, naturalH ?? 0, maxSize, maxSize);
+};
+
+export const setMediaDimensions = (mxcUrl: string, w: number, h: number): void => {
+  if (!mxcUrl || w <= 0 || h <= 0) return;
+  touchEntry(mxcUrl, { w, h });
+};
+
+export const getMediaBlurHash = (mxcUrl: string): string | undefined => {
+  if (!mxcUrl) return undefined;
+  return validBlurHash(loadCache()[mxcUrl]?.blurHash);
+};
+
+export const setMediaBlurHash = (mxcUrl: string, blurHash: string, w?: number, h?: number): void => {
+  const hash = validBlurHash(blurHash);
+  if (!mxcUrl || !hash) return;
+  const cache = loadCache();
+  const prev = cache[mxcUrl];
+  const nextW = w && w > 0 ? w : prev?.w;
+  const nextH = h && h > 0 ? h : prev?.h;
+  if (!nextW || !nextH) {
+    // Dimensions required for the shared meta entry; skip until we know size.
+    return;
+  }
+  touchEntry(mxcUrl, { w: nextW, h: nextH, blurHash: hash });
+};
+
+/** Encode + cache a blurhash from a loaded image/video (idle, non-blocking). */
+export const rememberMediaBlurHash = (
+  mxcUrl: string,
+  media: HTMLImageElement | HTMLVideoElement
+): void => {
+  if (!mxcUrl || typeof window === 'undefined') return;
+
+  const run = () => {
+    try {
+      const w =
+        media instanceof HTMLVideoElement
+          ? media.videoWidth
+          : media.naturalWidth || media.width;
+      const h =
+        media instanceof HTMLVideoElement
+          ? media.videoHeight
+          : media.naturalHeight || media.height;
+      if (w <= 0 || h <= 0) return;
+
+      setMediaDimensions(mxcUrl, w, h);
+      if (getMediaBlurHash(mxcUrl)) return;
+
+      const encW = 32;
+      const encH = Math.max(1, Math.round(encW * (h / w)));
+      const hash = encodeBlurHash(media, encW, encH);
+      if (hash) setMediaBlurHash(mxcUrl, hash, w, h);
+    } catch {
+      // Encoding can fail for tainted canvases; ignore.
+    }
+  };
+
+  if (typeof window.requestIdleCallback === 'function') {
+    window.requestIdleCallback(() => run(), { timeout: 1500 });
+  } else {
+    window.setTimeout(run, 0);
+  }
+};

src/app/state/roomScrollCache.ts

@@ -0,0 +1,32 @@
+export type RoomScrollRange = {
+  start: number;
+  end: number;
+};
+
+export type RoomScrollState = {
+  top: number;
+  atBottom: boolean;
+  range: RoomScrollRange;
+};
+
+const cache = new Map<string, RoomScrollState>();
+
+const MAX_ENTRIES = 20;
+
+export const getRoomScrollState = (roomId: string): RoomScrollState | undefined =>
+  cache.get(roomId);
+
+export const saveRoomScrollState = (roomId: string, state: RoomScrollState): void => {
+  if (cache.has(roomId)) cache.delete(roomId);
+  cache.set(roomId, state);
+
+  while (cache.size > MAX_ENTRIES) {
+    const oldest = cache.keys().next().value as string | undefined;
+    if (!oldest) break;
+    cache.delete(oldest);
+  }
+};
+
+export const clearRoomScrollState = (roomId: string): void => {
+  cache.delete(roomId);
+};

src/app/styles/CustomHtml.css.ts

@@ -262,9 +262,10 @@ export const EmoticonBase = style([
   DefaultReset,
   {
     display: 'inline-block',
-    padding: '0.05rem',
+    verticalAlign: '-0.1em',
-    height: '1em',
+    lineHeight: 1,
-    verticalAlign: 'middle',
+    height: 'auto',
+    padding: 0,
   },
 ]);
 
@@ -272,18 +273,10 @@ export const Emoticon = recipe({
   base: [
     DefaultReset,
     {
-      display: 'inline-flex',
+      display: 'inline',
-      justifyContent: 'center',
+      fontSize: '1.2em',
-      alignItems: 'center',
+      lineHeight: 1,
-
+      verticalAlign: 'inherit',
-      height: '1em',
-      minWidth: '1em',
-      fontSize: '1.33em',
-      lineHeight: '1em',
-      verticalAlign: 'middle',
-      position: 'relative',
-      top: '-0.35em',
-      borderRadius: config.radii.R300,
     },
   ],
   variants: {
@@ -298,7 +291,9 @@ export const Emoticon = recipe({
 export const EmoticonImg = style([
   DefaultReset,
   {
-    height: '1em',
+    display: 'block',
+    height: '1.2em',
+    width: '1.2em',
     cursor: 'default',
   },
 ]);

src/app/utils/authenticatedMediaCache.ts

@@ -0,0 +1,87 @@
+import { getCurrentAccessToken } from './auth';
+
+const MAX_ENTRIES = 250;
+
+/** Shared blob URLs for authenticated Matrix media (avatars, thumbs, etc.). */
+const blobCache = new Map<string, string>();
+const inflight = new Map<string, Promise<string>>();
+
+export const isAuthenticatedMediaUrl = (url: string): boolean =>
+  url.includes('/_matrix/client/v1/media/download') ||
+  url.includes('/_matrix/client/v1/media/thumbnail') ||
+  (url.includes('/_matrix/media/') &&
+    (url.includes('/download/') || url.includes('/thumbnail/')));
+
+export const getCachedAuthenticatedMediaUrl = (src: string | undefined): string | undefined => {
+  if (!src) return undefined;
+  return blobCache.get(src);
+};
+
+const touch = (src: string, blobUrl: string) => {
+  // Re-insert for LRU ordering (Map preserves insertion order).
+  if (blobCache.has(src)) blobCache.delete(src);
+  blobCache.set(src, blobUrl);
+
+  while (blobCache.size > MAX_ENTRIES) {
+    const oldest = blobCache.keys().next().value as string | undefined;
+    if (!oldest) break;
+    const oldUrl = blobCache.get(oldest);
+    blobCache.delete(oldest);
+    if (oldUrl) URL.revokeObjectURL(oldUrl);
+  }
+};
+
+const fetchBlobUrl = async (src: string): Promise<string> => {
+  const accessToken = getCurrentAccessToken();
+  let response = await fetch(src, {
+    method: 'GET',
+    headers: accessToken ? { Authorization: `Bearer ${accessToken}` } : undefined,
+  });
+
+  if (!response.ok && response.status === 401 && accessToken) {
+    response = await fetch(src, { method: 'GET' });
+  }
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch authenticated media: ${response.status}`);
+  }
+
+  const blob = await response.blob();
+  return URL.createObjectURL(blob);
+};
+
+/**
+ * Returns a stable blob: URL for authenticated media, reusing cache across mounts.
+ * Non-auth URLs are returned as-is.
+ */
+export const resolveAuthenticatedMediaUrl = async (
+  src: string,
+  useAuthentication: boolean
+): Promise<string> => {
+  if (!useAuthentication || !isAuthenticatedMediaUrl(src)) {
+    return src;
+  }
+
+  const cached = blobCache.get(src);
+  if (cached) {
+    touch(src, cached);
+    return cached;
+  }
+
+  let pending = inflight.get(src);
+  if (!pending) {
+    pending = fetchBlobUrl(src)
+      .then((blobUrl) => {
+        touch(src, blobUrl);
+        inflight.delete(src);
+        return blobUrl;
+      })
+      .catch((err) => {
+        inflight.delete(src);
+        throw err;
+      });
+    inflight.set(src, pending);
+  }
+
+  return pending;
+};

src/app/utils/common.ts

@@ -87,6 +87,23 @@ export const scaleYDimension = (x: number, scaledX: number, y: number): number =
   return scaleFactor * y;
 };
 
+/** Fit natural media size into a max box without upscaling. */
+export const fitMediaSize = (
+  w: number,
+  h: number,
+  maxW: number,
+  maxH: number
+): { width: number; height: number } => {
+  if (w <= 0 || h <= 0) {
+    return { width: maxW, height: Math.round(maxW * 0.75) };
+  }
+  const scale = Math.min(maxW / w, maxH / h, 1);
+  return {
+    width: Math.max(1, Math.round(w * scale)),
+    height: Math.max(1, Math.round(h * scale)),
+  };
+};
+
 export const parseGeoUri = (location: string) => {
   const [, data] = location.split(':');
   const [cords] = data.split(';');

src/index.css

@@ -4,7 +4,8 @@
   src: url('../public/font/Twemoji.Mozilla.v15.1.0.woff2'),
     url('../public/font/Twemoji.Mozilla.v15.1.0.ttf');
   font-display: swap;
-  unicode-range: U+1F300-1F9FF, U+2600-26FF, U+2700-27BF, U+FE0F, U+200D, U+1F1E6-1F1FF;
+  unicode-range: U+1F300-1F9FF, U+2600-26FF, U+2700-27BF, U+FE0F, U+200D, U+1F1E6-1F1FF,
+    U+1FA70-1FAFF, U+1FAB0-1FABF, U+1FAC0-1FAFF;
 }
 
 /* Apple Color Emoji - uses local Apple Color Emoji if available (macOS/iOS),
@@ -15,7 +16,8 @@
     local('Segoe UI Emoji'),
     local('Noto Color Emoji');
   font-display: swap;
-  unicode-range: U+1F300-1F9FF, U+2600-26FF, U+2700-27BF, U+FE0F, U+200D, U+1F1E6-1F1FF;
+  unicode-range: U+1F300-1F9FF, U+2600-26FF, U+2700-27BF, U+FE0F, U+200D, U+1F1E6-1F1FF,
+    U+1FA70-1FAFF, U+1FAB0-1FABF, U+1FAC0-1FAFF;
 }
 
 /* System emoji - uses native OS emoji */
@@ -28,7 +30,8 @@
     local('Android Emoji'),
     local('EmojiOne Color');
   font-display: swap;
-  unicode-range: U+1F300-1F9FF, U+2600-26FF, U+2700-27BF, U+FE0F, U+200D, U+1F1E6-1F1FF;
+  unicode-range: U+1F300-1F9FF, U+2600-26FF, U+2700-27BF, U+FE0F, U+200D, U+1F1E6-1F1FF,
+    U+1FA70-1FAFF, U+1FAB0-1FABF, U+1FAC0-1FAFF;
 }
 
 :root {