update ask access token login in service worker

.github/workflows/build-pull-request.yml

@@ -12,9 +12,9 @@ jobs:
       PR_NUMBER: ${{github.event.number}}
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.2.0
+        uses: actions/checkout@v4.1.7
       - name: Setup node
-        uses: actions/setup-node@v4.0.4
+        uses: actions/setup-node@v4.0.3
         with:
           node-version: 20.12.2
           cache: 'npm'

.github/workflows/cla.yml

@@ -12,7 +12,7 @@ jobs:
       - name: 'CLA Assistant'
         if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
         # Beta Release
-        uses: cla-assistant/github-action@v2.6.1
+        uses: cla-assistant/github-action@v2.5.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           # the below token should have repo scope and must be manually added by you in the repository's secret

.github/workflows/docker-pr.yml

@@ -11,9 +11,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.2.0
+        uses: actions/checkout@v4.1.7
       - name: Build Docker image
-        uses: docker/build-push-action@v6.9.0
+        uses: docker/build-push-action@v6.7.0
         with:
           context: .
           push: false

.github/workflows/lockfile.yml

@@ -14,7 +14,7 @@ jobs:
       pull-requests: write
     steps:
       - name: Checkout
-        uses: actions/checkout@v4.2.0
+        uses: actions/checkout@v4.1.7
       - name: NPM Lockfile Changes
         uses: codepunkt/npm-lockfile-changes@b40543471c36394409466fdb277a73a0856d7891
         with:

.github/workflows/netlify-dev.yml

@@ -11,9 +11,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.2.0
+        uses: actions/checkout@v4.1.7
       - name: Setup node
-        uses: actions/setup-node@v4.0.4
+        uses: actions/setup-node@v4.0.3
         with:
           node-version: 20.12.2
           cache: 'npm'

.github/workflows/prod-deploy.yml

@@ -10,9 +10,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.2.0
+        uses: actions/checkout@v4.1.7
       - name: Setup node
-        uses: actions/setup-node@v4.0.4
+        uses: actions/setup-node@v4.0.3
         with:
           node-version: 20.12.2
           cache: 'npm'
@@ -66,7 +66,7 @@ jobs:
       packages: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.2.0
+        uses: actions/checkout@v4.1.7
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3.2.0
       - name: Set up Docker Buildx
@@ -90,7 +90,7 @@ jobs:
             ${{ secrets.DOCKER_USERNAME }}/cinny
             ghcr.io/${{ github.repository }}
       - name: Build and push Docker image
-        uses: docker/build-push-action@v6.9.0
+        uses: docker/build-push-action@v6.7.0
         with:
           context: .
           platforms: linux/amd64,linux/arm64

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cinny",
-  "version": "4.2.2",
+  "version": "4.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cinny",
-      "version": "4.2.2",
+      "version": "4.1.0",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "1.1.6",
@@ -45,7 +45,7 @@
         "jotai": "2.6.0",
         "linkify-react": "4.1.3",
         "linkifyjs": "4.1.3",
-        "matrix-js-sdk": "34.8.0",
+        "matrix-js-sdk": "34.5.0",
         "millify": "6.1.0",
         "pdfjs-dist": "4.2.67",
         "prismjs": "1.29.0",
@@ -2646,9 +2646,9 @@
       }
     },
     "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-9.1.0.tgz",
-      "integrity": "sha512-CtPoNcoRW6ehwxpRQAksG3tR+NJ7k4DV02nMFYTDwQtie1V4R8OTY77BjEIs97NOblhtS26jU8m1lWsOBEz0Og==",
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-7.0.0.tgz",
+      "integrity": "sha512-MOencXiW/gI5MuTtCNsuojjwT5DXCrjMqv9xOslJC9h2tPdLFFFMGr58dY5Lis4DRd9MRWcgrGowUIHOqieWTA==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">= 10"
@@ -9117,13 +9117,13 @@
       "integrity": "sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA=="
     },
     "node_modules/matrix-js-sdk": {
-      "version": "34.8.0",
-      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-34.8.0.tgz",
-      "integrity": "sha512-zHYPE+vb6PP/dnRa6X3ktXf34yQg/Pct9r5CSP263hA4tRg5sKEVQgnY7KDADaABTvNMb9h7BZ5Xm9vjXsowNQ==",
+      "version": "34.5.0",
+      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-34.5.0.tgz",
+      "integrity": "sha512-pbp+IxAkSwGmefrlUGCrtrs3UWyqN2iWh4lKnJW+jFIlsksXq7A8vL4cS1z8LXmpcHQAg3mKNuj8n8uhm51t1A==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@matrix-org/matrix-sdk-crypto-wasm": "^9.0.0",
+        "@matrix-org/matrix-sdk-crypto-wasm": "^7.0.0",
         "@matrix-org/olm": "3.2.15",
         "another-json": "^0.2.0",
         "bs58": "^6.0.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "4.2.2",
+  "version": "4.1.0",
   "description": "Yet another matrix client",
   "main": "index.js",
   "type": "module",
@@ -56,7 +56,7 @@
     "jotai": "2.6.0",
     "linkify-react": "4.1.3",
     "linkifyjs": "4.1.3",
-    "matrix-js-sdk": "34.8.0",
+    "matrix-js-sdk": "34.5.0",
     "millify": "6.1.0",
     "pdfjs-dist": "4.2.67",
     "prismjs": "1.29.0",

src/app/hooks/useMediaAuthentication.ts

@@ -1,11 +1,10 @@
 import { useSpecVersions } from './useSpecVersions';
 
 export const useMediaAuthentication = (): boolean => {
-  const { versions, unstable_features: unstableFeatures } = useSpecVersions();
+  const { versions } = useSpecVersions();
 
   // Media authentication is introduced in spec version 1.11
-  const authenticatedMedia =
-    unstableFeatures?.['org.matrix.msc3916.stable'] || versions.includes('v1.11');
+  const authenticatedMedia = versions.includes('v1.11');
 
   return authenticatedMedia;
 };

src/app/hooks/useMentionClickHandler.ts

@@ -14,7 +14,6 @@ export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLEl
 
   const handleClick: ReactEventHandler<HTMLElement> = useCallback(
     (evt) => {
-      evt.stopPropagation();
       evt.preventDefault();
       const target = evt.currentTarget;
       const mentionId = target.getAttribute('data-mention-id');

src/app/pages/auth/AuthFooter.tsx

@@ -15,7 +15,7 @@ export function AuthFooter() {
         target="_blank"
         rel="noreferrer"
       >
-        v4.2.2
+        v4.1.0
       </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.2.2
+                  v4.1.0
                 </a>
               </span>
             }

src/client/state/cons.js

@@ -1,5 +1,5 @@
 const cons = {
-  version: '4.2.2',
+  version: '4.1.0',
   secretKey: {
     ACCESS_TOKEN: 'cinny_access_token',
     DEVICE_ID: 'cinny_device_id',

src/config.css.ts

@@ -5,7 +5,7 @@ export const onLightFontWeight = createTheme(config.fontWeight, {
   W100: '100',
   W200: '200',
   W300: '300',
-  W400: '400',
+  W400: '420',
   W500: '500',
   W600: '600',
   W700: '700',
@@ -17,10 +17,10 @@ export const onDarkFontWeight = createTheme(config.fontWeight, {
   W100: '100',
   W200: '200',
   W300: '300',
-  W400: '400',
-  W500: '500',
-  W600: '600',
-  W700: '700',
-  W800: '800',
-  W900: '900',
+  W400: '350',
+  W500: '450',
+  W600: '550',
+  W700: '650',
+  W800: '750',
+  W900: '850',
 });

src/index.tsx

@@ -21,25 +21,30 @@ import './app/i18n';
 document.body.classList.add(configClass, varsClass);
 settings.applyTheme();
 
-// Register Service Worker
-if ('serviceWorker' in navigator) {
-  const swUrl =
-    import.meta.env.MODE === 'production'
-      ? `${trimTrailingSlash(import.meta.env.BASE_URL)}/sw.js`
-      : `/dev-sw.js?dev-sw`;
+const registerServiceWorker = async () => {
+  if ('serviceWorker' in navigator) {
+    const swUrl =
+      import.meta.env.MODE === 'production'
+        ? `${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,
+    await navigator.serviceWorker.register(swUrl);
+
+    navigator.serviceWorker.ready.then((registration) => {
+      navigator.serviceWorker.addEventListener('message', (event) => {
+        if (event.data?.type === 'token' && event.data?.messageId) {
+          const token = localStorage.getItem('cinny_access_token') ?? undefined;
+          registration.active?.postMessage({
+            messageId: event.data.messageId,
+            token,
+          });
+        }
       });
-    }
-  });
-}
+    });
+  }
+};
+
+window.addEventListener('load', registerServiceWorker);
 
 const mountApp = () => {
   const rootContainer = document.getElementById('root');

src/sw.ts

@@ -3,16 +3,26 @@
 export type {};
 declare const self: ServiceWorkerGlobalScope;
 
+type Message = { messageId: string };
+type MessageListener = (message: Message) => void;
+const messageListeners = new Map<string, MessageListener>();
+
+self.addEventListener('message', (event) => {
+  const { messageId } = event.data;
+  if (typeof messageId === 'string') {
+    messageListeners.get(messageId)?.(event.data);
+    messageListeners.delete(messageId);
+  }
+});
+
+type TokenMessage = Message & {
+  token?: string;
+};
 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' });
+    const messageId = Math.random().toString(36);
+    messageListeners.set(messageId, (message: TokenMessage) => resolve(message.token));
+    client.postMessage({ messageId, type: 'token' });
   });
 }
 
@@ -23,14 +33,9 @@ function fetchConfig(token?: string): RequestInit | undefined {
     headers: {
       Authorization: `Bearer ${token}`,
     },
-    cache: 'default',
   };
 }
 
-self.addEventListener('activate', (event: ExtendableEvent) => {
-  event.waitUntil(clients.claim());
-});
-
 self.addEventListener('fetch', (event: FetchEvent) => {
   const { url, method } = event.request;
   if (method !== 'GET') return;