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/hooks/useAuthenticatedMediaUrl.ts

@@ -0,0 +1,123 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useMatrixClient } from './useMatrixClient';
+
+/**
+ * Fetches media with authentication and returns a blob URL.
+ * This is needed because service workers may not work reliably in Tauri/WebKit environments,
+ * 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);
+
+  useEffect(() => {
+    if (!src) {
+      setBlobUrl(undefined);
+      return;
+    }
+
+    // If not using authentication, just return the original URL
+    if (!useAuthentication) {
+      setBlobUrl(src);
+      return;
+    }
+
+    // Check if this is an authenticated media URL
+    const isAuthenticatedMediaUrl =
+      src.includes('/_matrix/client/v1/media/download') ||
+      src.includes('/_matrix/client/v1/media/thumbnail');
+
+    if (!isAuthenticatedMediaUrl) {
+      setBlobUrl(src);
+      return;
+    }
+
+    let cancelled = false;
+    let objectUrl: string | undefined;
+
+    const fetchMedia = async () => {
+      try {
+        const accessToken = mx.getAccessToken();
+        const response = await fetch(src, {
+          method: 'GET',
+          headers: accessToken
+            ? { Authorization: `Bearer ${accessToken}` }
+            : undefined,
+        });
+
+        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) {
+        URL.revokeObjectURL(objectUrl);
+      }
+    };
+  }, [src, useAuthentication, mx]);
+
+  return blobUrl;
+};
+
+/**
+ * Creates an authenticated fetch function for media URLs.
+ * Useful for components that need to load multiple images.
+ */
+export const useAuthenticatedMediaFetch = () => {
+  const mx = useMatrixClient();
+
+  return useCallback(
+    async (src: string): Promise<string> => {
+      const isAuthenticatedMediaUrl =
+        src.includes('/_matrix/client/v1/media/download') ||
+        src.includes('/_matrix/client/v1/media/thumbnail');
+
+      if (!isAuthenticatedMediaUrl) {
+        return src;
+      }
+
+      try {
+        const accessToken = mx.getAccessToken();
+        const response = await fetch(src, {
+          method: 'GET',
+          headers: accessToken
+            ? { Authorization: `Bearer ${accessToken}` }
+            : undefined,
+        });
+
+        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);
+        return src;
+      }
+    },
+    [mx]
+  );
+};