request session per origin for better multi account requests

src/app/hooks/sw/useSessionRequest.ts

@@ -8,12 +8,19 @@ const getServiceWorker = () => {
   return undefined;
 };
 
-export const useSessionRequest = (session?: Session) => {
+export const useSessionRequest = (sessions: Session[], userId?: string) => {
   useEffect(() => {
-    const handleSWMessages = (ev: MessageEvent<any>) => {
-      if (!session) return;
+    const userSession = sessions.find((s) => s.userId === userId);
 
-      const { type, id } = ev.data ?? {};
+    const handleSWMessages = (ev: MessageEvent<any>) => {
+      const { type, id, origin } = ev.data ?? {};
+
+      const session =
+        userSession && userSession.baseUrl.startsWith(origin)
+          ? userSession
+          : sessions.find((s) => s.baseUrl.startsWith(origin));
+
+      if (!session) return;
 
       if (type === 'session-request') {
         getServiceWorker()?.controller?.postMessage({
@@ -30,5 +37,5 @@ export const useSessionRequest = (session?: Session) => {
     return () => {
       getServiceWorker()?.removeEventListener('message', handleSWMessages);
     };
-  }, [session]);
+  }, [sessions, userId]);
 };

src/app/pages/AccountSelector.tsx

@@ -121,7 +121,7 @@ export function AccountSelector() {
   const navigate = useNavigate();
 
   const sessions = useSessions();
-  useSessionRequest(sessions[0]);
+  useSessionRequest(sessions);
 
   if (sessions.length === 0) {
     return <Navigate to={getLoginPath()} replace />;
@@ -186,7 +186,7 @@ export function ClientAccountSelector() {
   const sessions = useSessions();
   const session = useMemo(() => sessions.find((s) => userId === s.userId), [userId, sessions]);
 
-  useSessionRequest(session ?? sessions[0]);
+  useSessionRequest(sessions, userId);
   useSingleSessionTab(session?.userId);
 
   const handleVisibility = useCallback(

src/app/pages/client/sidebar/SettingsTab.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, useState } from 'react';
+import React, { MouseEventHandler, useMemo, useState } from 'react';
 import {
   Avatar,
   Box,
@@ -23,7 +23,7 @@ import { getMxIdLocalPart, getMxIdServer } from '../../../utils/matrix';
 import { nameInitials } from '../../../utils/common';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { Settings } from '../../../features/settings';
-import { useUserProfile } from '../../../hooks/useUserProfile';
+import { useUserProfile, useUserProfileRequest } from '../../../hooks/useUserProfile';
 import { Modal500 } from '../../../components/Modal500';
 import { useClient } from '../../../hooks/useClient';
 import { mxcToHttp } from '../../../../client/mxcToHttp';
@@ -32,6 +32,7 @@ import { stopPropagation } from '../../../utils/keyboard';
 import { useSession, useSessions } from '../../../hooks/useSessions';
 import { sessionUserIdAtom } from '../../../state/sessions';
 import { Session } from '../../../../client/sessions';
+import { getAuthJSONRequest } from '../../../../client/request';
 
 type AccountTileProps = {
   session: Session;
@@ -44,7 +45,11 @@ function AccountTile({ session }: AccountTileProps) {
 
   const setSessionUserId = useSetAtom(sessionUserIdAtom);
 
-  const profile = useUserProfile(userId);
+  const request = useMemo(
+    () => getAuthJSONRequest(session.baseUrl, session.accessToken),
+    [session]
+  );
+  const profile = useUserProfileRequest(userId, request);
 
   const username = getMxIdLocalPart(userId) ?? userId;
   const server = getMxIdServer(userId) ?? userId;

src/sw.ts

@@ -16,7 +16,7 @@ const getRequestId = () => {
 
 const pendingSessionRequests = new Map<number, (sessionInfo: SessionInfo | undefined) => void>();
 
-async function requestSession(clientId: string): Promise<SessionInfo | undefined> {
+async function requestSession(clientId: string, origin: string): Promise<SessionInfo | undefined> {
   const client = await self.clients.get(clientId);
   if (!client) return undefined;
 
@@ -24,7 +24,7 @@ async function requestSession(clientId: string): Promise<SessionInfo | undefined
 
   const sessionPromise = new Promise<SessionInfo | undefined>((resolve) => {
     pendingSessionRequests.set(id, resolve);
-    client.postMessage({ type: 'session-request', id });
+    client.postMessage({ type: 'session-request', id, origin });
   });
 
   const timeout = new Promise<undefined>((resolve) => {
@@ -101,7 +101,7 @@ self.addEventListener('fetch', (event: FetchEvent) => {
   if (!clientId) return;
 
   event.respondWith(
-    requestSession(clientId).then((s) => {
+    requestSession(clientId, new URL(url).origin).then((s) => {
       if (s && validMediaRequest(url, s.baseUrl)) {
         return fetch(url, fetchConfig(s.accessToken));
       }