post session info to service worker instead of asking from sw on each request

config.json

@@ -1,10 +1,11 @@
 {
-  "defaultHomeserver": 1,
+  "defaultHomeserver": 2,
   "homeserverList": [
     "converser.eu",
+    "envs.net",
     "matrix.org",
+    "monero.social",
     "mozilla.org",
-    "unredacted.org",
     "xmr.se"
   ],
   "allowCustomHomeservers": true,
@@ -14,7 +15,7 @@
     "spaces": [
       "#cinny-space:matrix.org",
       "#community:matrix.org",
-      "#space:unredacted.org",
+      "#space:envs.net",
       "#science-space:matrix.org",
       "#libregaming-games:tchncs.de",
       "#mathematics-on:matrix.org"
@@ -27,7 +28,7 @@
       "#PrivSec.dev:arcticfoxes.net",
       "#disroot:aria-net.org"
     ],
-    "servers": [ "matrix.org", "mozilla.org", "unredacted.org" ]
+    "servers": ["envs.net", "matrix.org", "monero.social", "mozilla.org"]
   },
 
   "hashRouter": {

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cinny",
-  "version": "4.10.3",
+  "version": "4.10.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cinny",
-      "version": "4.10.3",
+      "version": "4.10.2",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "1.1.6",
@@ -32,7 +32,7 @@
         "emojibase-data": "15.3.2",
         "file-saver": "2.0.5",
         "focus-trap-react": "10.0.2",
-        "folds": "2.5.0",
+        "folds": "2.4.0",
         "html-dom-parser": "4.0.0",
         "html-react-parser": "4.2.0",
         "i18next": "23.12.2",
@@ -7157,9 +7157,9 @@
       }
     },
     "node_modules/folds": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/folds/-/folds-2.5.0.tgz",
-      "integrity": "sha512-UJhvXAQ1XnZ9w10KJwSW+frvzzWE/zcF0dH3fDVCD70RFHAxwEi0UkkVS8CaZGxZF2Wvt3qTJyTS5LW3LwwUAw==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/folds/-/folds-2.4.0.tgz",
+      "integrity": "sha512-Q5xCmvU3SIM8etQ9qLF6Y5Jtv01c9JpG3QcnF+Z3nlbMvtktfE13Pj7p0XgSPBcA3OuoU0zXiRwiTlMcbU7KhA==",
       "license": "Apache-2.0",
       "peerDependencies": {
         "@vanilla-extract/css": "1.9.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "4.10.3",
+  "version": "4.10.2",
   "description": "Yet another matrix client",
   "main": "index.js",
   "type": "module",
@@ -43,7 +43,7 @@
     "emojibase-data": "15.3.2",
     "file-saver": "2.0.5",
     "focus-trap-react": "10.0.2",
-    "folds": "2.5.0",
+    "folds": "2.4.0",
     "html-dom-parser": "4.0.0",
     "html-react-parser": "4.2.0",
     "i18next": "23.12.2",

src/app/features/room/RoomTimeline.tsx

@@ -471,7 +471,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const permissions = useRoomPermissions(creators, powerLevels);
 
   const canRedact = permissions.action('redact', mx.getSafeUserId());
-  const canDeleteOwn = permissions.event(MessageEvent.RoomRedaction, mx.getSafeUserId());
   const canSendReaction = permissions.event(MessageEvent.Reaction, mx.getSafeUserId());
   const canPinEvent = permissions.stateEvent(StateEvent.RoomPinnedEvents, mx.getSafeUserId());
   const [editId, setEditId] = useState<string>();
@@ -1048,7 +1047,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             collapse={collapse}
             highlight={highlighted}
             edit={editId === mEventId}
-            canDelete={canRedact || canDeleteOwn}
+            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
             canSendReaction={canSendReaction}
             canPinEvent={canPinEvent}
             imagePackRooms={imagePackRooms}
@@ -1130,7 +1129,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             collapse={collapse}
             highlight={highlighted}
             edit={editId === mEventId}
-            canDelete={canRedact || canDeleteOwn}
+            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
             canSendReaction={canSendReaction}
             canPinEvent={canPinEvent}
             imagePackRooms={imagePackRooms}
@@ -1248,7 +1247,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             messageLayout={messageLayout}
             collapse={collapse}
             highlight={highlighted}
-            canDelete={canRedact || canDeleteOwn}
+            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
             canSendReaction={canSendReaction}
             canPinEvent={canPinEvent}
             imagePackRooms={imagePackRooms}

src/app/features/settings/about/About.tsx

@@ -46,7 +46,7 @@ export function About({ requestClose }: AboutProps) {
                   <Box direction="Column" gap="100">
                     <Box gap="100" alignItems="End">
                       <Text size="H3">Cinny</Text>
-                      <Text size="T200">v4.10.3</Text>
+                      <Text size="T200">v4.10.2</Text>
                     </Box>
                     <Text>Yet another matrix client.</Text>
                   </Box>

src/app/pages/Router.tsx

@@ -68,6 +68,7 @@ import { Create } from './client/create';
 import { CreateSpaceModalRenderer } from '../features/create-space';
 import { SearchModalRenderer } from '../features/search';
 import { getFallbackSession } from '../state/sessions';
+import { pushSessionToSW } from '../../sw-session';
 
 export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {
   const { hashRouter } = clientConfig;
@@ -106,7 +107,8 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
 
       <Route
         loader={() => {
-          if (!getFallbackSession()) {
+          const session = getFallbackSession();
+          if (!session) {
             const afterLoginPath = getAppPathFromHref(
               getOriginBaseUrl(hashRouter),
               window.location.href
@@ -114,6 +116,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
             if (afterLoginPath) setAfterLoginRedirectPath(afterLoginPath);
             return redirect(getLoginPath());
           }
+          pushSessionToSW(session.baseUrl, session.accessToken);
           return null;
         }}
         element={

src/app/pages/auth/AuthFooter.tsx

@@ -15,7 +15,7 @@ export function AuthFooter() {
         target="_blank"
         rel="noreferrer"
       >
-        v4.10.3
+        v4.10.2
       </Text>
       <Text as="a" size="T300" href="https://twitter.com/cinnyapp" target="_blank" rel="noreferrer">
         Twitter

src/app/pages/client/WelcomePage.tsx

@@ -24,7 +24,7 @@ export function WelcomePage() {
                   target="_blank"
                   rel="noreferrer noopener"
                 >
-                  v4.10.3
+                  v4.10.2
                 </a>
               </span>
             }

src/client/initMatrix.ts

@@ -2,6 +2,7 @@ import { createClient, MatrixClient, IndexedDBStore, IndexedDBCryptoStore } from
 
 import { cryptoCallbacks } from './secretStorageKeys';
 import { clearNavToActivePathStore } from '../app/state/navToActivePath';
+import { pushSessionToSW } from '../sw-session';
 
 type Session = {
   baseUrl: string;
@@ -53,6 +54,7 @@ export const clearCacheAndReload = async (mx: MatrixClient) => {
 };
 
 export const logoutClient = async (mx: MatrixClient) => {
+  pushSessionToSW();
   mx.stopClient();
   try {
     await mx.logout();

src/index.tsx

@@ -15,6 +15,8 @@ import App from './app/pages/App';
 
 // import i18n (needs to be bundled ;))
 import './app/i18n';
+import { pushSessionToSW } from './sw-session';
+import { getFallbackSession } from './app/state/sessions';
 
 document.body.classList.add(configClass, varsClass);
 
@@ -25,16 +27,9 @@ if ('serviceWorker' in navigator) {
       ? `${trimTrailingSlash(import.meta.env.BASE_URL)}/sw.js`
       : `/dev-sw.js?dev-sw`;
 
-  navigator.serviceWorker.register(swUrl);
-  navigator.serviceWorker.addEventListener('message', (event) => {
-    if (event.data?.type === 'token' && event.data?.responseKey) {
-      // Get the token for SW.
-      const token = localStorage.getItem('cinny_access_token') ?? undefined;
-      event.source!.postMessage({
-        responseKey: event.data.responseKey,
-        token,
-      });
-    }
+  navigator.serviceWorker.register(swUrl).then(() => {
+    const session = getFallbackSession();
+    pushSessionToSW(session?.baseUrl, session?.accessToken);
   });
 }
 

src/sw-session.ts

@@ -0,0 +1,10 @@
+export function pushSessionToSW(baseUrl?: string, accessToken?: string) {
+  if (!('serviceWorker' in navigator)) return;
+  if (!navigator.serviceWorker.controller) return;
+
+  navigator.serviceWorker.controller.postMessage({
+    type: 'setSession',
+    accessToken,
+    baseUrl,
+  });
+}

src/sw.ts

@@ -3,22 +3,64 @@
 export type {};
 declare const self: ServiceWorkerGlobalScope;
 
-async function askForAccessToken(client: Client): Promise<string | undefined> {
-  return new Promise((resolve) => {
-    const responseKey = Math.random().toString(36);
-    const listener = (event: ExtendableMessageEvent) => {
-      if (event.data.responseKey !== responseKey) return;
-      resolve(event.data.token);
-      self.removeEventListener('message', listener);
-    };
-    self.addEventListener('message', listener);
-    client.postMessage({ responseKey, type: 'token' });
+self.addEventListener('install', () => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', (event: ExtendableEvent) => {
+  event.waitUntil(self.clients.claim());
+});
+
+type SessionInfo = {
+  accessToken: string;
+  baseUrl: string;
+};
+
+/**
+ * Store session per client (tab)
+ */
+const sessions = new Map<string, SessionInfo>();
+
+async function cleanupDeadClients() {
+  const activeClients = await self.clients.matchAll();
+  const activeIds = new Set(activeClients.map((c) => c.id));
+
+  Array.from(sessions.keys()).forEach((id) => {
+    if (!activeIds.has(id)) {
+      sessions.delete(id);
+    }
   });
 }
 
-function fetchConfig(token?: string): RequestInit | undefined {
-  if (!token) return undefined;
+/**
+ * Receive session updates from clients
+ */
+self.addEventListener('message', (event: ExtendableMessageEvent) => {
+  const client = event.source as Client | null;
+  if (!client) return;
 
+  const { type, accessToken, baseUrl } = event.data || {};
+
+  if (type !== 'setSession') return;
+
+  cleanupDeadClients();
+
+  if (typeof accessToken === 'string' && typeof baseUrl === 'string') {
+    sessions.set(client.id, { accessToken, baseUrl });
+  } else {
+    // Logout or invalid session
+    sessions.delete(client.id);
+  }
+});
+
+function validMediaRequest(url: string, baseUrl: string): boolean {
+  const downloadUrl = new URL('/_matrix/client/v1/media/download', baseUrl);
+  const thumbnailUrl = new URL('/_matrix/client/v1/media/thumbnail', baseUrl);
+
+  return url.startsWith(downloadUrl.href) || url.startsWith(thumbnailUrl.href);
+}
+
+function fetchConfig(token: string): RequestInit {
   return {
     headers: {
       Authorization: `Bearer ${token}`,
@@ -27,26 +69,16 @@ function fetchConfig(token?: string): RequestInit | undefined {
   };
 }
 
-self.addEventListener('activate', (event: ExtendableEvent) => {
-  event.waitUntil(clients.claim());
-});
-
 self.addEventListener('fetch', (event: FetchEvent) => {
   const { url, method } = event.request;
-  if (method !== 'GET') return;
-  if (
-    !url.includes('/_matrix/client/v1/media/download') &&
-    !url.includes('/_matrix/client/v1/media/thumbnail')
-  ) {
-    return;
-  }
-  event.respondWith(
-    (async (): Promise<Response> => {
-      const client = await self.clients.get(event.clientId);
-      let token: string | undefined;
-      if (client) token = await askForAccessToken(client);
 
-      return fetch(url, fetchConfig(token));
-    })()
-  );
+  if (method !== 'GET') return;
+  if (!event.clientId) return;
+
+  const session = sessions.get(event.clientId);
+  if (!session) return;
+
+  if (!validMediaRequest(url, session.baseUrl)) return;
+
+  event.respondWith(fetch(url, fetchConfig(session.accessToken)));
 });