Fix authenticated media loading for Tauri/WebKit environments

- Add useAuthenticatedMediaUrl hook that fetches media with auth headers
- Add AuthenticatedMedia, AuthenticatedAvatarImage components
- Update downloadMedia and downloadEncryptedMedia to accept access token
- Update all media components to pass access token for auth media
- Fix 401 errors on Matrix servers requiring authenticated media (v1.11+)

This fixes media loading in Tauri desktop apps where service workers
may not work reliably for cross-origin authenticated requests.

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

@@ -4,6 +4,8 @@ import React, { ComponentProps, ReactEventHandler, ReactNode, forwardRef, useSta
 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';
 
 type RoomAvatarProps = {
   roomId: string;
@@ -13,12 +15,14 @@ type RoomAvatarProps = {
 };
 export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps) {
   const [error, setError] = useState(false);
+  const useAuthentication = useMediaAuthentication();
+  const authenticatedSrc = useAuthenticatedMediaUrl(src, useAuthentication);
 
   const handleLoad: ReactEventHandler<HTMLImageElement> = (evt) => {
     evt.currentTarget.setAttribute('data-image-loaded', 'true');
   };
 
-  if (!src || error) {
+  if (!authenticatedSrc || error) {
     return (
       <AvatarFallback
         style={{ backgroundColor: colorMXID(roomId ?? ''), color: color.Surface.Container }}
@@ -32,7 +36,7 @@ export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps
   return (
     <AvatarImage
       className={css.RoomAvatar}
-      src={src}
+      src={authenticatedSrc}
       alt={alt}
       onError={() => setError(true)}
       onLoad={handleLoad}