v2.0.4 (#590)

* Update docker-pr.yml

* setup docker build for linux/arm64

* Update prod-deploy.yml

* Apply PR suggestion

.github/FUNDING.yml

@@ -1,2 +1,3 @@
-open_collective: cinny
+github: ajbura
 liberapay: ajbura
+open_collective: cinny

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

@@ -15,19 +15,19 @@ jobs:
       - name: Build app
         run: npm ci && npm run build
       - name: Upload artifact
-        uses: actions/upload-artifact@v3.0.0
+        uses: actions/upload-artifact@v3.1.0
         with:
           name: previewbuild
           path: dist
           retention-days: 1
       - name: Get PR info
-        uses: actions/github-script@v6.0.0
+        uses: actions/github-script@v6.1.0
         with:
           script: |
             var fs = require('fs');
             fs.writeFileSync('${{github.workspace}}/pr.json', JSON.stringify(context.payload.pull_request));
       - name: Upload PR Info
-        uses: actions/upload-artifact@v3.0.0
+        uses: actions/upload-artifact@v3.1.0
         with:
           name: pr.json
           path: pr.json

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

@@ -6,6 +6,9 @@ on:
         - completed
 jobs:
   get-build-and-deploy:
+    permissions:
+      contents: read
+      pull-requests: write
     runs-on: ubuntu-latest
     if: >
       ${{ github.event.workflow_run.conclusion == 'success' }}
@@ -14,7 +17,7 @@ jobs:
       # workflow_run action (https://github.com/actions/download-artifact/issues/60)
       # so instead we get this mess:
       - name: Download artifact
-        uses: actions/github-script@v6.0.0
+        uses: actions/github-script@v6.1.0
         with:
           script: |
             var artifacts = await github.rest.actions.listWorkflowRunArtifacts({
@@ -48,7 +51,7 @@ jobs:
         run: unzip -d dist previewbuild.zip && rm previewbuild.zip && unzip pr.json.zip && rm pr.json.zip
       - name: Read PR Info
         id: readctx
-        uses: actions/github-script@v6.0.0
+        uses: actions/github-script@v6.1.0
         with:
           script: |
             var fs = require('fs');

.github/workflows/docker-pr.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2
       - name: Build Docker image
-        uses: docker/build-push-action@v2.10.0
+        uses: docker/build-push-action@v3.0.0
         with:
           context: .
           push: false

.github/workflows/netlify-dev.yml

@@ -9,7 +9,8 @@ jobs:
   deploy-to-netlify:
     name: 'Deploy'
     runs-on: ubuntu-latest
-
+    permissions:
+      contents: read
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2

.github/workflows/prod-deploy.yml

@@ -5,9 +5,43 @@ on:
     types: [published]
 
 jobs:
+  create-release-tar:
+    name: 'Create release tar'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3.0.2
+      - name: Build
+        run: |
+          npm ci
+          npm run build
+      - name: Get version from tag
+        id: vars
+        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
+      - name: Create tar.gz
+        run: tar -czvf cinny-${{ steps.vars.outputs.tag }}.tar.gz dist
+      - name: Sign tar.gz
+        run: |
+          echo '${{ secrets.GNUPG_KEY }}' | gpg --batch --import
+          # Sadly a few lines in the private key match a few lines in the public key,
+          # As a result just --export --armor gives us a few lines replaced with ***
+          # making it useless for importing the signing key. Instead, we dump it as
+          # non-armored and hex-encode it so that its printable.
+          echo "PGP Signing key, in raw PGP format in hex. Import with cat ... | xxd -r -p - | gpg --import"
+          gpg --export | xxd -p
+          echo '${{ secrets.GNUPG_PASSPHRASE }}' | gpg --batch --yes --pinentry-mode loopback --passphrase-fd 0 --armor --detach-sign cinny-${{ steps.vars.outputs.tag }}.tar.gz
+      - name: Upload tagged release
+        uses: softprops/action-gh-release@1e07f4398721186383de40550babbdf2b84acfc5
+        with:
+          files: |
+            cinny-${{ steps.vars.outputs.tag }}.tar.gz
+            cinny-${{ steps.vars.outputs.tag }}.tar.gz.asc
+
   deploy-to-netlify:
     name: 'Deploy to Netlify'
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2
@@ -20,45 +54,34 @@ jobs:
           BUILD_DIRECTORY: "dist"
           NETLIFY_DEPLOY_MESSAGE: "Prod deploy v${{ github.ref }}"
           NETLIFY_DEPLOY_TO_PROD: true
-      - name: Get version from tag
-        id: vars
-        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
-      - name: Create tar.gz
-        run: tar -czvf cinny-${{ steps.vars.outputs.tag }}.tar.gz dist
-      - name: Sign tar.gz
-        uses: actionhippie/gpgsign@4e28208b142cae93e1582401dcda1cf79e4f72c0
-        with:
-          private_key: ${{ secrets.GNUPG_KEY }}
-          passphrase: ${{ secrets.GNUPG_PASSPHRASE }}
-          detach_sign: true
-          files: cinny-${{ steps.vars.outputs.tag }}.tar.gz
-      - name: Upload tagged release
-        uses: softprops/action-gh-release@1e07f4398721186383de40550babbdf2b84acfc5
-        with:
-          files: |
-            cinny-${{ steps.vars.outputs.tag }}.tar.gz
-            cinny-${{ steps.vars.outputs.tag }}.tar.gz.asc
 
-  push_to_dockerhub:
+  push-to-dockerhub:
     name: Push Docker image to Docker Hub
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1.2.0
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1.6.0
       - name: Login to Docker Hub
-        uses: docker/login-action@v1.14.1
+        uses: docker/login-action@v2.0.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
       - name: Extract metadata (tags, labels) for Docker
         id: meta
-        uses: docker/metadata-action@v3.8.0
+        uses: docker/metadata-action@v4.0.1
         with:
           images: ajbura/cinny
       - name: Build and push Docker image
-        uses: docker/build-push-action@v2.10.0
+        uses: docker/build-push-action@v3.0.0
         with:
           context: .
+          platforms: linux/amd64,linux/arm64
           push: true
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}

README.md

@@ -1,23 +1,27 @@
-# Cinny
+<p align="center">
+    <img src="https://raw.githubusercontent.com/ajbura/cinny/dev/public/res/svg/cinny.svg?sanitize=true"
+        height="16">
+    <span><b>Cinny</b></span>
+</p>
+<p align="center">
+    <a href="https://github.com/ajbura/cinny/releases">
+        <img alt="GitHub release downloads" src="https://img.shields.io/github/downloads/ajbura/cinny/total?logo=github&style=social"></a>
+    <a href="https://hub.docker.com/r/ajbura/cinny">
+        <img alt="DockerHub downloads" src="https://img.shields.io/docker/pulls/ajbura/cinny?logo=docker&style=social"></a>
+    <a href="https://fosstodon.org/@cinnyapp">
+        <img alt="Follow on Mastodon" src="https://img.shields.io/mastodon/follow/106845779685925461?domain=https%3A%2F%2Ffosstodon.org&logo=mastodon&style=social"></a>
+    <a href="https://twitter.com/intent/follow?screen_name=cinnyapp">
+        <img alt="Follow on Twitter" src="https://img.shields.io/twitter/follow/cinnyapp?logo=twitter&style=social"></a>
+    <a href="https://cinny.in/#sponsor">
+        <img alt="Sponsor Cinny" src="https://img.shields.io/opencollective/all/cinny?logo=opencollective&style=social"></a>
+</p>
 
-[![Star](https://img.shields.io/github/stars/ajbura/cinny)](https://github.com/ajbura/cinny/tree/dev)
+**Cinny** is a Matrix client focusing primarily on simple, elegant and secure interface. The main goal is to have a client that is easy on end user 
-[![Chat](https://img.shields.io/badge/chat-on%20matrix-orange)](https://matrix.to/#/#cinny:matrix.org)
+and feels a modern chat application.
-[![Twitter](https://img.shields.io/twitter/url?url=https://twitter.com/@cinnyapp)](https://twitter.com/@cinnyapp)
-[![Support](https://img.shields.io/badge/sponsor-open%20collective-blue.svg)](https://opencollective.com/cinny)
 
-## Table of Contents
-
-- [About](#about)
-- [Getting Started](https://cinny.in)
 - [Contributing](./CONTRIBUTING.md)
 - [Roadmap](https://github.com/ajbura/cinny/projects/11)
 
-## About <a name = "about"></a>
-
-Cinny is a [Matrix](https://matrix.org) client focusing primarily on simple, elegant and secure interface.
-
-![preview](https://github.com/cinnyapp/cinny-site/blob/main/assets/preview-light.png)
-
 ## Building and Running
 
 ### Running pre-compiled
@@ -25,7 +29,57 @@ Cinny is a [Matrix](https://matrix.org) client focusing primarily on simple, ele
 A tarball of pre-compiled version of the app is provided with each [release](https://github.com/ajbura/cinny/releases).
 You can serve the application with a webserver of your choosing by simply copying `dist/` directory to the webroot.
 
+<details>
+<summary>PGP Public Key to verify pre-compiled tarball</summary>
+
+```
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+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
+UeGsouhyuITLwEhScounZDqop+Dx
+=Zg+6
+-----END PGP PUBLIC KEY BLOCK-----
+```
+</details>
+
 ### Building from source
+> We recommend using a version manager as versions change very quickly. You will likely need to switch 
+between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Also recommended nodejs version is 16.15.0 LTS.
 
 Execute the following commands to compile the app from its source code:
 
@@ -36,7 +90,7 @@ npm run build # Compiles the app into the dist/ directory
 
 You can then copy the files to a webserver's webroot of your choice.
 
-To serve a development version of the app locally for testing, you may also use the command `npm start`.
+To serve a development version of the app locally for testing, you need to use the command `npm start`.
 
 ### Running with Docker
 

package.json

@@ -1,11 +1,11 @@
 {
   "name": "cinny",
-  "version": "2.0.1",
+  "version": "2.0.4",
   "description": "Yet another matrix client",
   "main": "index.js",
   "engines": {
-    "npm": ">=6.14.11",
+    "npm": ">=6.14.8 <=8.5.5",
-    "node": ">=14.6.0"
+    "node": ">=14.15.0 <=17.9.0"
   },
   "scripts": {
     "start": "webpack serve --config ./webpack.dev.js --open",
@@ -16,7 +16,7 @@
   "license": "MIT",
   "dependencies": {
     "@fontsource/inter": "^4.5.10",
-    "@fontsource/roboto": "^4.5.5",
+    "@fontsource/roboto": "^4.5.7",
     "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
     "@tippyjs/react": "^4.2.6",
     "babel-polyfill": "^6.26.0",
@@ -27,9 +27,9 @@
     "flux": "^4.0.3",
     "formik": "^2.2.9",
     "html-react-parser": "^1.4.12",
-    "katex": "^0.15.3",
+    "katex": "^0.15.6",
     "linkifyjs": "^2.1.9",
-    "matrix-js-sdk": "^17.1.0",
+    "matrix-js-sdk": "^17.2.0",
     "micromark": "^3.0.10",
     "micromark-extension-gfm": "^2.0.1",
     "micromark-extension-math": "^2.0.2",
@@ -49,23 +49,23 @@
     "twemoji": "^14.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.10",
+    "@babel/core": "^7.18.0",
-    "@babel/preset-env": "^7.17.10",
+    "@babel/preset-env": "^7.18.0",
-    "@babel/preset-react": "^7.16.7",
+    "@babel/preset-react": "^7.17.12",
     "assert": "^2.0.0",
     "babel-loader": "^8.2.5",
     "browserify-fs": "^1.0.0",
     "buffer": "^6.0.3",
     "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^10.2.4",
+    "copy-webpack-plugin": "^11.0.0",
     "crypto-browserify": "^3.12.0",
     "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^3.4.1",
+    "css-minimizer-webpack-plugin": "^4.0.0",
-    "eslint": "^8.14.0",
+    "eslint": "^8.16.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.5.0",
     "favicons": "^6.2.2",
     "favicons-webpack-plugin": "^5.0.2",
@@ -73,13 +73,13 @@
     "html-webpack-plugin": "^5.3.1",
     "mini-css-extract-plugin": "^2.6.0",
     "path-browserify": "^1.0.1",
-    "sass": "^1.51.0",
+    "sass": "^1.52.1",
-    "sass-loader": "^12.6.0",
+    "sass-loader": "^13.0.0",
     "stream-browserify": "^3.0.0",
     "style-loader": "^3.3.1",
     "url": "^0.11.0",
     "util": "^0.12.4",
-    "webpack": "^5.72.0",
+    "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.9.0",
     "webpack-merge": "^5.7.3"

src/app/molecules/room-notification/RoomNotification.jsx

@@ -20,7 +20,7 @@ const items = [{
   type: cons.notifs.DEFAULT,
 }, {
   iconSrc: BellRingIC,
-  text: 'All message',
+  text: 'All messages',
   type: cons.notifs.ALL_MESSAGES,
 }, {
   iconSrc: BellPingIC,

src/app/organisms/emoji-board/recent.js

@@ -4,7 +4,7 @@ import { emojis } from './emoji';
 const eventType = 'io.element.recent_emoji';
 
 function getRecentEmojisRaw() {
-  return initMatrix.matrixClient.getAccountData(eventType).getContent().recent_emoji ?? [];
+  return initMatrix.matrixClient.getAccountData(eventType)?.getContent().recent_emoji ?? [];
 }
 
 export function getRecentEmojis(limit) {

src/app/organisms/settings/DeviceManage.jsx

@@ -155,6 +155,7 @@ function DeviceManage() {
     const lastIP = device.last_seen_ip;
     const lastTS = device.last_seen_ts;
     const isCurrentDevice = mx.deviceId === deviceId;
+    const canVerify = isVerified === false && (isMeVerified || isCurrentDevice);
 
     return (
       <SettingTile
@@ -171,7 +172,7 @@ function DeviceManage() {
             ? <Spinner size="small" />
             : (
               <>
-                {((isMeVerified && isVerified === false) || (isCurrentDevice && isVerified === false)) && <Button onClick={() => verify(deviceId, isCurrentDevice)} variant="positive">Verify</Button>}
+                {(isCSEnabled && canVerify) && <Button onClick={() => verify(deviceId, isCurrentDevice)} variant="positive">Verify</Button>}
                 <IconButton size="small" onClick={() => handleRename(device)} src={PencilIC} tooltip="Rename" />
                 <IconButton size="small" onClick={() => handleRemove(device)} src={BinIC} tooltip="Remove session" />
               </>

src/client/event/hotkeys.js

@@ -33,22 +33,25 @@ function listenKeyboard(event) {
     // open search modal
     if (event.code === 'KeyK') {
       event.preventDefault();
-      if (navigation.isRawModalVisible) {
+      if (navigation.isRawModalVisible) return;
-        return;
-      }
       openSearch();
     }
 
     // focus message field on paste
     if (event.code === 'KeyV') {
+      if (navigation.isRawModalVisible) return;
       const msgTextarea = document.getElementById('message-textarea');
+      const { activeElement } = document;
+      if (activeElement !== msgTextarea
+        && ['input', 'textarea'].includes(activeElement.tagName.toLowerCase())
+      ) return;
       msgTextarea?.focus();
     }
   }
 
   if (!event.ctrlKey && !event.altKey && !event.metaKey) {
     if (navigation.isRawModalVisible) return;
-    if (['text', 'textarea'].includes(document.activeElement.type)) {
+    if (['input', 'textarea'].includes(document.activeElement.tagName.toLowerCase())) {
       return;
     }
 

src/client/state/cons.js

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

src/client/state/navigation.js

@@ -14,7 +14,7 @@ class Navigation extends EventEmitter {
     this.isRoomSettings = false;
     this.recentRooms = [];
 
-    this.isRawModalVisible = false;
+    this.rawModelStack = [];
   }
 
   _setSpacePath(roomId) {
@@ -47,8 +47,13 @@ class Navigation extends EventEmitter {
     }
   }
 
+  get isRawModalVisible() {
+    return this.rawModelStack.length > 0;
+  }
+
   setIsRawModalVisible(visible) {
-    this.isRawModalVisible = visible;
+    if (visible) this.rawModelStack.push(true);
+    else this.rawModelStack.pop();
   }
 
   navigate(action) {