Merge branch 'dev' into update-actions

* Add renovate.json

* Add renovate config

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Krishan <33421343+kfiven@users.noreply.github.com>

.github/renovate.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base"
+  ],
+  "labels": [ "Dependencies" ],
+  "packageRules": [
+    {
+    "matchUpdateTypes": [ "lockFileMaintenance" ]
+    }
+  ],
+  "lockFileMaintenance": { "enabled": true },
+  "dependencyDashboard": true,
+  "dependencyDashboardApproval": true
+}

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

@@ -6,6 +6,7 @@ on:
 
 jobs:
   build-pull-request:
+    name: 'Build pull request'
     runs-on: ubuntu-latest
     env:
       PR_NUMBER: ${{github.event.number}}
@@ -16,23 +17,22 @@ jobs:
         uses: actions/setup-node@v3.4.1
         with:
           node-version: 17.9.0
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
       - name: Build app
-        run: npm ci && npm run build
+        run: npm run build
       - name: Upload artifact
         uses: actions/upload-artifact@v3.1.0
         with:
-          name: previewbuild
+          name: preview
           path: dist
           retention-days: 1
-      - name: Get PR info
-        uses: actions/github-script@v6.2.0
-        with:
-          script: |
-            var fs = require('fs');
-            fs.writeFileSync('${{github.workspace}}/pr.json', JSON.stringify(context.payload.pull_request));
-      - name: Upload PR Info
+      - name: Save pr number
+        run: echo ${PR_NUMBER} > ./pr.txt
+      - name: Upload pr number
         uses: actions/upload-artifact@v3.1.0
         with:
-          name: pr.json
-          path: pr.json
-          retention-days: 1
+          name: pr
+          path: ./pr.txt
+          retention-days: 1

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

@@ -1,68 +1,40 @@
-name: Upload Preview Build to Netlify
+name: Deploy PR to Netlify
 on:
   workflow_run:
       workflows: ["Build pull request"]
-      types:
-        - completed
+      types: [completed]
 jobs:
-  get-build-and-deploy:
+  deploy-pull-request:
+    name: 'Deploy pull request'
+    runs-on: ubuntu-latest
     permissions:
       contents: read
       pull-requests: write
-    runs-on: ubuntu-latest
-    if: >
-      ${{ github.event.workflow_run.conclusion == 'success' }}
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
     steps:
-      # There's a 'download artifact' action but it hasn't been updated for the
-      # workflow_run action (https://github.com/actions/download-artifact/issues/60)
-      # so instead we get this mess:
+      - name: Download pr number
+        uses: dawidd6/action-download-artifact@7847792dd435a50521b8e3bd3576dae7459d1fa8
+        with:
+          workflow: ${{ github.event.workflow.id }}
+          run_id: ${{ github.event.workflow_run.id }}
+          name: pr
+      - name: Output pr number
+        id: pr
+        run: echo "::set-output name=id::$(<pr.txt)"
       - name: Download artifact
-        uses: actions/github-script@v6.2.0
+        uses: dawidd6/action-download-artifact@7847792dd435a50521b8e3bd3576dae7459d1fa8
         with:
-          script: |
-            var artifacts = await github.rest.actions.listWorkflowRunArtifacts({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              run_id: ${{github.event.workflow_run.id }},
-            });
-            var matchArtifact = artifacts.data.artifacts.filter((artifact) => {
-              return artifact.name == "previewbuild"
-            })[0];
-            var download = await github.rest.actions.downloadArtifact({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              artifact_id: matchArtifact.id,
-              archive_format: 'zip',
-            });
-            var fs = require('fs');
-            fs.writeFileSync('${{github.workspace}}/previewbuild.zip', Buffer.from(download.data));
-            var prInfoArtifact = artifacts.data.artifacts.filter((artifact) => {
-              return artifact.name == "pr.json"
-            })[0];
-            var download = await github.rest.actions.downloadArtifact({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              artifact_id: prInfoArtifact.id,
-              archive_format: 'zip',
-            });
-            var fs = require('fs');
-            fs.writeFileSync('${{github.workspace}}/pr.json.zip', Buffer.from(download.data));
-      - name: Extract Artifacts
-        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.2.0
-        with:
-          script: |
-            var fs = require('fs');
-            var pr = JSON.parse(fs.readFileSync('${{github.workspace}}/pr.json'));
-            console.log(`::set-output name=prnumber::${pr.number}`);
+          workflow: ${{ github.event.workflow.id }}
+          run_id: ${{ github.event.workflow_run.id }}
+          name: preview
+          path: dist
       - name: Deploy to Netlify
         id: netlify
         uses: nwtgck/actions-netlify@b7c1504e00c6b8a249d1848cc1b522a4865eed99
         with:
           publish-dir: dist
-          deploy-message: "Deploy from GitHub Actions"
+          deploy-message: "Deploy PR ${{ steps.pr.outputs.id }}"
+          alias: ${{ steps.pr.outputs.id }}
           # These don't work because we're in workflow_run
           enable-pull-request-comment: false
           enable-commit-comment: false
@@ -75,7 +47,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          pull-request-number: ${{ steps.readctx.outputs.prnumber }}
+          pull-request-number: ${{ steps.pr.outputs.id }}
           description-message: |
               Preview: ${{ steps.netlify.outputs.deploy-url }}
-              ⚠️ Exercise caution. Use test accounts. ⚠️
+              ⚠️ Exercise caution. Use test accounts. ⚠️

.github/workflows/lockfile.yml

@@ -0,0 +1,26 @@
+name: NPM Lockfile Changes
+
+on:
+  pull_request:
+    paths:
+      - 'package-lock.json'
+
+jobs:
+  lockfile_changes:
+    runs-on: ubuntu-latest
+    # Permission overwrite is required for Dependabot PRs, see "Common issues" below.
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3.0.2
+      - name: NPM Lockfile Changes
+        uses: codepunkt/npm-lockfile-changes@b40543471c36394409466fdb277a73a0856d7891
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          # Optional inputs, can be deleted safely if you are happy with default values.
+          collapsibleThreshold: 25
+          failOnDowngrade: false
+          path: package-lock.json
+          updateComment: true

.github/workflows/netlify-dev.yml

@@ -7,10 +7,8 @@ on:
 
 jobs:
   deploy-to-netlify:
-    name: 'Deploy'
+    name: 'Deploy to Netlify'
     runs-on: ubuntu-latest
-    permissions:
-      contents: read
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3.0.2
@@ -18,12 +16,22 @@ jobs:
         uses: actions/setup-node@v3.4.1
         with:
           node-version: 17.9.0
-      - name: Build and deploy to Netlify
-        uses: jsmrcaga/action-netlify-deploy@53de32e559b0b3833615b9788c7a090cd2fddb03
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build app
+        run: npm run build
+      - name: Deploy to Netlify
+        uses: nwtgck/actions-netlify@b7c1504e00c6b8a249d1848cc1b522a4865eed99
         with:
-          install_command: "npm ci"
+          publish-dir: dist
+          deploy-message: "Dev deploy ${{ github.sha }}"
+          enable-commit-comment: false
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          production-deploy: true
+          github-deployment-environment: nightly
+          github-deployment-description: 'Nightly deployment on each commit to dev branch'
+        env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE2_ID }}
-          BUILD_DIRECTORY: "dist"
-          NETLIFY_DEPLOY_MESSAGE: "Dev deploy v${{ github.ref }}"
-          NETLIFY_DEPLOY_TO_PROD: true
+        timeout-minutes: 1

.github/workflows/prod-deploy.yml

@@ -5,8 +5,8 @@ on:
     types: [published]
 
 jobs:
-  create-release-tar:
-    name: 'Create release tar'
+  deploy-and-tarball:
+    name: 'Netlify deploy and tarball'
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
@@ -15,10 +15,25 @@ jobs:
         uses: actions/setup-node@v3.4.1
         with:
           node-version: 17.9.0
-      - name: Build
-        run: |
-          npm ci
-          npm run build
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build app
+        run: npm run build
+      - name: Deploy to Netlify
+        uses: nwtgck/actions-netlify@b7c1504e00c6b8a249d1848cc1b522a4865eed99
+        with:
+          publish-dir: dist
+          deploy-message: "Prod deploy ${{ github.ref_name }}"
+          enable-commit-comment: false
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          production-deploy: true
+          github-deployment-environment: stable
+          github-deployment-description: 'Stable deployment on each release'
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+        timeout-minutes: 1
       - name: Get version from tag
         id: vars
         run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
@@ -41,29 +56,7 @@ jobs:
             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
-      - name: Setup node
-        uses: actions/setup-node@v3.4.1
-        with:
-          node-version: 17.9.0
-      - name: Build and deploy to Netlify
-        uses: jsmrcaga/action-netlify-deploy@53de32e559b0b3833615b9788c7a090cd2fddb03
-        with:
-          install_command: "npm ci"
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
-          BUILD_DIRECTORY: "dist"
-          NETLIFY_DEPLOY_MESSAGE: "Prod deploy v${{ github.ref }}"
-          NETLIFY_DEPLOY_TO_PROD: true
-
-  push-to-dockerhub:
+  publish-image:
     name: Push Docker image to Docker Hub, ghcr
     runs-on: ubuntu-latest
     permissions:

.npmrc

@@ -1 +1,3 @@
-legacy-peer-deps=true
+legacy-peer-deps=true
+save-exact=true
+@matrix-org:registry=https://gitlab.matrix.org/api/v4/projects/27/packages/npm/

package.json

@@ -15,71 +15,69 @@
   "author": "Ajay Bura",
   "license": "MIT",
   "dependencies": {
-    "@fontsource/inter": "^4.5.12",
-    "@fontsource/roboto": "^4.5.8",
-    "@khanacademy/simple-markdown": "^0.8.3",
-    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
-    "@tippyjs/react": "^4.2.6",
-    "babel-polyfill": "^6.26.0",
-    "blurhash": "^1.1.5",
-    "browser-encrypt-attachment": "^0.3.0",
-    "dateformat": "^5.0.3",
-    "emojibase-data": "^7.0.1",
-    "file-saver": "^2.0.5",
-    "flux": "^4.0.3",
-    "formik": "^2.2.9",
-    "html-react-parser": "^3.0.4",
-    "katex": "^0.16.2",
-    "linkify-html": "^4.0.0-beta.5",
-    "linkifyjs": "^4.0.0-beta.5",
-    "matrix-js-sdk": "^19.4.0",
-    "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-autosize-textarea": "^7.1.0",
-    "react-blurhash": "^0.1.3",
-    "react-dnd": "^15.1.2",
-    "react-dnd-html5-backend": "^15.1.3",
-    "react-dom": "^17.0.2",
-    "react-google-recaptcha": "^2.1.0",
-    "react-modal": "^3.15.1",
-    "sanitize-html": "^2.7.1",
-    "tippy.js": "^6.3.7",
-    "twemoji": "^14.0.2"
+    "@fontsource/inter": "4.5.12",
+    "@fontsource/roboto": "4.5.8",
+    "@khanacademy/simple-markdown": "0.8.3",
+    "@matrix-org/olm": "3.2.12",
+    "@tippyjs/react": "4.2.6",
+    "babel-polyfill": "6.26.0",
+    "blurhash": "1.1.5",
+    "browser-encrypt-attachment": "0.3.0",
+    "dateformat": "5.0.3",
+    "emojibase-data": "7.0.1",
+    "file-saver": "2.0.5",
+    "flux": "4.0.3",
+    "formik": "2.2.9",
+    "html-react-parser": "3.0.4",
+    "katex": "0.16.2",
+    "linkify-html": "4.0.0-beta.5",
+    "linkifyjs": "4.0.0-beta.5",
+    "matrix-js-sdk": "19.4.0",
+    "prop-types": "15.8.1",
+    "react": "17.0.2",
+    "react-autosize-textarea": "7.1.0",
+    "react-blurhash": "0.1.3",
+    "react-dnd": "15.1.2",
+    "react-dnd-html5-backend": "15.1.3",
+    "react-dom": "17.0.2",
+    "react-google-recaptcha": "2.1.0",
+    "react-modal": "3.15.1",
+    "sanitize-html": "2.7.1",
+    "tippy.js": "6.3.7",
+    "twemoji": "14.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.13",
-    "@babel/preset-env": "^7.18.10",
-    "@babel/preset-react": "^7.18.6",
-    "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": "^11.0.0",
-    "crypto-browserify": "^3.12.0",
-    "css-loader": "^6.7.1",
-    "css-minimizer-webpack-plugin": "^4.0.0",
-    "eslint": "^8.23.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.31.1",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "favicons": "^6.2.2",
-    "favicons-webpack-plugin": "^5.0.2",
-    "html-loader": "^4.1.0",
-    "html-webpack-plugin": "^5.3.1",
-    "mini-css-extract-plugin": "^2.6.1",
-    "path-browserify": "^1.0.1",
-    "sass": "^1.54.5",
-    "sass-loader": "^13.0.2",
-    "stream-browserify": "^3.0.0",
-    "style-loader": "^3.3.1",
-    "url": "^0.11.0",
-    "util": "^0.12.4",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.10.1",
-    "webpack-merge": "^5.7.3"
+    "@babel/core": "7.18.13",
+    "@babel/preset-env": "7.18.10",
+    "@babel/preset-react": "7.18.6",
+    "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": "11.0.0",
+    "crypto-browserify": "3.12.0",
+    "css-loader": "6.7.1",
+    "css-minimizer-webpack-plugin": "4.0.0",
+    "eslint": "8.23.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jsx-a11y": "6.6.1",
+    "eslint-plugin-react": "7.31.1",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "html-loader": "4.1.0",
+    "html-webpack-plugin": "5.3.1",
+    "mini-css-extract-plugin": "2.6.1",
+    "path-browserify": "1.0.1",
+    "sass": "1.54.5",
+    "sass-loader": "13.0.2",
+    "stream-browserify": "3.0.0",
+    "style-loader": "3.3.1",
+    "url": "0.11.0",
+    "util": "0.12.4",
+    "webpack": "5.74.0",
+    "webpack-cli": "4.10.0",
+    "webpack-dev-server": "4.10.1",
+    "webpack-merge": "5.7.3"
   }
 }

public/index.html

@@ -15,6 +15,28 @@
     <meta property="og:image"       content="https://cinny.in/assets/favicon-48x48.png">
     <meta property="og:description" content="A Matrix client where you can enjoy the conversation using simple, elegant and secure interface protected by e2ee with the power of open source.">
     <meta name="theme-color" content="#000000">
+
+
+    <link id="favicon" rel="shortcut icon" href="./favicon.ico" />
+
+    <link rel="manifest" href="./manifest.json" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="application-name" content="Cinny" />
+    <meta name="apple-mobile-web-app-title" content="Cinny" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+
+    <link rel="apple-touch-icon" sizes="57x57" href="./res/apple/apple-touch-icon-57x57.png"/>
+    <link rel="apple-touch-icon" sizes="60x60" href="./res/apple/apple-touch-icon-60x60.png"/>
+    <link rel="apple-touch-icon" sizes="72x72" href="./res/apple/apple-touch-icon-72x72.png"/>
+    <link rel="apple-touch-icon" sizes="76x76" href="./res/apple/apple-touch-icon-76x76.png"/>
+    <link rel="apple-touch-icon" sizes="114x114" href="./res/apple/apple-touch-icon-114x114.png"/>
+    <link rel="apple-touch-icon" sizes="120x120" href="./res/apple/apple-touch-icon-120x120.png"/>
+    <link rel="apple-touch-icon" sizes="144x144" href="./res/apple/apple-touch-icon-144x144.png"/>
+    <link rel="apple-touch-icon" sizes="152x152" href="./res/apple/apple-touch-icon-152x152.png"/>
+    <link rel="apple-touch-icon" sizes="167x167" href="./res/apple/apple-touch-icon-167x167.png"/>
+    <link rel="apple-touch-icon" sizes="180x180" href="./res/apple/apple-touch-icon-180x180.png"/>
+
 </head>
 <body id="appBody">
     <div id="root"></div>

public/manifest.json

@@ -0,0 +1,59 @@
+{
+  "name": "Cinny",
+  "short_name": "Cinny",
+  "description": "Yet another matrix client",
+  "dir": "auto",
+  "lang": "en-US",
+  "display": "standalone",
+  "orientation": "portrait",
+  "start_url": "/",
+  "background_color": "#fff",
+  "theme_color": "#fff",
+  "icons": [
+    {
+      "src": "android-chrome-36x36.png",
+      "sizes": "36x36",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-256x256.png",
+      "sizes": "256x256",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

src/app/hooks/useAccountData.js

@@ -5,12 +5,12 @@ import initMatrix from '../../client/initMatrix';
 
 export function useAccountData(eventType) {
   const mx = initMatrix.matrixClient;
-  const [event, setEvent] = useState(mx.getAccountData(eventType)?.getContent());
+  const [event, setEvent] = useState(mx.getAccountData(eventType));
 
   useEffect(() => {
     const handleChange = (mEvent) => {
       if (mEvent.getType() !== eventType) return;
-      setEvent(mEvent.getContent());
+      setEvent(mEvent);
     };
     mx.on('accountData', handleChange);
     return () => {

src/app/molecules/global-notification/GlobalNotification.jsx

@@ -53,7 +53,7 @@ export function getTypeActions(type, highlightValue = false) {
 
 function useGlobalNotif() {
   const mx = initMatrix.matrixClient;
-  const pushRules = useAccountData('m.push_rules');
+  const pushRules = useAccountData('m.push_rules')?.getContent();
   const underride = pushRules?.global?.underride ?? [];
   const rulesToType = {
     [DM]: notifType.ON,

src/app/molecules/global-notification/IgnoreUserList.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import './IgnoreUserList.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import * as roomActions from '../../../client/action/room';
+
+import Text from '../../atoms/text/Text';
+import Chip from '../../atoms/chip/Chip';
+import Input from '../../atoms/input/Input';
+import Button from '../../atoms/button/Button';
+import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
+import SettingTile from '../setting-tile/SettingTile';
+
+import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+
+import { useAccountData } from '../../hooks/useAccountData';
+
+function IgnoreUserList() {
+  useAccountData('m.ignored_user_list');
+  const ignoredUsers = initMatrix.matrixClient.getIgnoredUsers();
+
+  const handleSubmit = (evt) => {
+    evt.preventDefault();
+    const { ignoreInput } = evt.target.elements;
+    const value = ignoreInput.value.trim();
+    const userIds = value.split(' ').filter((v) => v.match(/^@\S+:\S+$/));
+    if (userIds.length === 0) return;
+    ignoreInput.value = '';
+    roomActions.ignore(userIds);
+  };
+
+  return (
+    <div className="ignore-user-list">
+      <MenuHeader>Ignored users</MenuHeader>
+      <SettingTile
+        title="Ignore user"
+        content={(
+          <div className="ignore-user-list__users">
+            <Text variant="b3">Ignore userId if you do not want to receive their messages or invites.</Text>
+            <form onSubmit={handleSubmit}>
+              <Input name="ignoreInput" required />
+              <Button variant="primary" type="submit">Ignore</Button>
+            </form>
+            {ignoredUsers.length > 0 && (
+              <div>
+                {ignoredUsers.map((uId) => (
+                  <Chip
+                    iconSrc={CrossIC}
+                    key={uId}
+                    text={uId}
+                    iconColor={CrossIC}
+                    onClick={() => roomActions.unignore([uId])}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      />
+    </div>
+  );
+}
+
+export default IgnoreUserList;

src/app/molecules/global-notification/IgnoreUserList.scss

@@ -0,0 +1,17 @@
+.ignore-user-list {
+  &__users {
+    & form,
+    & > div:last-child {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--sp-tight);
+    }
+
+    & form {
+      margin: var(--sp-extra-tight) 0 var(--sp-normal);
+      .input-container {
+        flex-grow: 1;
+      }
+    }
+  }
+}

src/app/molecules/global-notification/KeywordNotification.jsx

@@ -29,7 +29,7 @@ const KEYWORD = 'keyword';
 
 function useKeywordNotif() {
   const mx = initMatrix.matrixClient;
-  const pushRules = useAccountData('m.push_rules');
+  const pushRules = useAccountData('m.push_rules')?.getContent();
   const override = pushRules?.global?.override ?? [];
   const content = pushRules?.global?.content ?? [];
 

src/app/molecules/global-notification/KeywordNotification.scss

@@ -3,11 +3,12 @@
     & form,
     & > div:last-child {
       display: flex;
+      flex-wrap: wrap;
       gap: var(--sp-tight);
     }
 
     & form {
-      margin: var(--sp-ultra-tight) 0 var(--sp-normal);
+      margin: var(--sp-extra-tight) 0 var(--sp-normal);
       .input-container {
         flex-grow: 1;
       }

src/app/organisms/emoji-board/EmojiBoard.scss

@@ -38,7 +38,7 @@
     @extend .cp-fx__column;
   }
   &__nav-twemoji {
-    background: inherit;
+    background-color: var(--bg-surface);
     position: sticky;
     bottom: -70%;
     z-index: 999;

src/app/organisms/navigation/DrawerBreadcrumb.jsx

@@ -21,7 +21,7 @@ import ChevronRightIC from '../../../../public/res/ic/outlined/chevron-right.svg
 function DrawerBreadcrumb({ spaceId }) {
   const [, forceUpdate] = useState({});
   const scrollRef = useRef(null);
-  const { roomList, notifications } = initMatrix;
+  const { roomList, notifications, accountData } = initMatrix;
   const mx = initMatrix.matrixClient;
   const spacePath = navigation.selectedSpacePath;
 
@@ -49,9 +49,9 @@ function DrawerBreadcrumb({ spaceId }) {
   }, [spaceId]);
 
   function getHomeNotiExcept(childId) {
-    const orphans = roomList.getOrphans();
-    const childIndex = orphans.indexOf(childId);
-    if (childId !== -1) orphans.splice(childIndex, 1);
+    const orphans = roomList.getOrphans()
+      .filter((id) => (id !== childId))
+      .filter((id) => !accountData.spaceShortcut.has(id));
 
     let noti = null;
 

src/app/organisms/profile-editor/ProfileEditor.jsx

@@ -16,11 +16,11 @@ import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
 
 import './ProfileEditor.scss';
 
-// TODO Fix bug that prevents 'Save' button from enabling up until second changed.
 function ProfileEditor({ userId }) {
   const [isEditing, setIsEditing] = useState(false);
   const mx = initMatrix.matrixClient;
   const user = mx.getUser(mx.getUserId());
+  const fallbackUsername = userId.match(/^@?(\S+):(\S+)$/)[1];
 
   const displayNameRef = useRef(null);
   const [avatarSrc, setAvatarSrc] = useState(user.avatarUrl ? mx.mxcUrlToHttp(user.avatarUrl, 80, 80, 'crop') : null);
@@ -96,7 +96,7 @@ function ProfileEditor({ userId }) {
   const renderInfo = () => (
     <div className="profile-editor__info" style={{ marginBottom: avatarSrc ? '24px' : '0' }}>
       <div>
-        <Text variant="h2" primary weight="medium">{twemojify(username)}</Text>
+        <Text variant="h2" primary weight="medium">{twemojify(username) ?? fallbackUsername}</Text>
         <IconButton
           src={PencilIC}
           size="extra-small"
@@ -111,7 +111,7 @@ function ProfileEditor({ userId }) {
   return (
     <div className="profile-editor">
       <ImageUpload
-        text={username}
+        text={username ?? fallbackUsername}
         bgColor={colorMXID(userId)}
         imageSrc={avatarSrc}
         onUpload={handleAvatarUpload}

src/app/organisms/room/RoomViewHeader.jsx

@@ -33,9 +33,10 @@ function RoomViewHeader({ roomId }) {
   const [, forceUpdate] = useForceUpdate();
   const mx = initMatrix.matrixClient;
   const isDM = initMatrix.roomList.directs.has(roomId);
-  let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
-  avatarSrc = isDM ? mx.getRoom(roomId).getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc;
-  const roomName = mx.getRoom(roomId).name;
+  const room = mx.getRoom(roomId);
+  let avatarSrc = room.getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
+  avatarSrc = isDM ? room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc;
+  const roomName = room.name;
 
   const roomHeaderBtnRef = useRef(null);
   useEffect(() => {
@@ -93,7 +94,7 @@ function RoomViewHeader({ roomId }) {
         </TitleWrapper>
         <RawIcon src={ChevronBottomIC} />
       </button>
-      <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} />
+      {mx.isRoomEncrypted(roomId) === false && <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} />}
       <IconButton className="room-header__drawer-btn" onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
       <IconButton className="room-header__members-btn" onClick={() => toggleRoomSettings(tabText.MEMBERS)} tooltip="Members" src={UserIC} />
       <IconButton

src/app/organisms/settings/DeviceManage.jsx

@@ -180,13 +180,15 @@ function DeviceManage() {
         }
         content={(
           <>
-            <Text variant="b3">
-              Last activity
-              <span style={{ color: 'var(--tc-surface-normal)' }}>
-                {dateFormat(new Date(lastTS), ' hh:MM TT, dd/mm/yyyy')}
-              </span>
-              {lastIP ? ` at ${lastIP}` : ''}
-            </Text>
+            {lastTS && (
+              <Text variant="b3">
+                Last activity
+                <span style={{ color: 'var(--tc-surface-normal)' }}>
+                  {dateFormat(new Date(lastTS), ' hh:MM TT, dd/mm/yyyy')}
+                </span>
+                {lastIP ? ` at ${lastIP}` : ''}
+              </Text>
+            )}
             {isCurrentDevice && (
               <Text style={{ marginTop: 'var(--sp-ultra-tight)' }} variant="b3">
                 {`Session Key: ${initMatrix.matrixClient.getDeviceEd25519Key().match(/.{1,4}/g).join(' ')}`}

src/app/organisms/settings/Settings.jsx

@@ -27,6 +27,7 @@ import ExportE2ERoomKeys from '../../molecules/import-export-e2e-room-keys/Expor
 import { ImagePackUser, ImagePackGlobal } from '../../molecules/image-pack/ImagePack';
 import GlobalNotification from '../../molecules/global-notification/GlobalNotification';
 import KeywordNotification from '../../molecules/global-notification/KeywordNotification';
+import IgnoreUserList from '../../molecules/global-notification/IgnoreUserList';
 
 import ProfileEditor from '../profile-editor/ProfileEditor';
 import CrossSigning from './CrossSigning';
@@ -173,6 +174,7 @@ function NotificationsSection() {
       </div>
       <GlobalNotification />
       <KeywordNotification />
+      <IgnoreUserList />
     </>
   );
 }

src/app/organisms/settings/Settings.scss

@@ -40,6 +40,7 @@
 .settings-notifications,
 .global-notification,
 .keyword-notification,
+.ignore-user-list,
 .settings-security__card,
 .settings-security .device-manage,
 .settings-about__card,

src/client/state/Notifications.js

@@ -114,8 +114,7 @@ class Notifications extends EventEmitter {
   }
 
   getTotalNoti(roomId) {
-    const { total, highlight } = this.getNoti(roomId);
-    if (highlight > total) return highlight;
+    const { total } = this.getNoti(roomId);
     return total;
   }
 
@@ -181,7 +180,7 @@ class Notifications extends EventEmitter {
     };
 
     const noti = this.getNoti(roomId);
-    const addT = total - noti.total;
+    const addT = (highlight > total ? highlight : total) - noti.total;
     const addH = highlight - noti.highlight;
     if (addT < 0 || addH < 0) return;
 

src/util/common.js

@@ -120,7 +120,9 @@ export function cssVar(name) {
 }
 
 export function setFavicon(url) {
-  document.querySelector('[rel=icon]').href = url;
+  const favicon = document.querySelector('#favicon');
+  if (!favicon) return;
+  favicon.setAttribute('href', url);
 }
 
 export function copyToClipboard(text) {

src/util/mimetypes.js

@@ -26,12 +26,14 @@ export const ALLOWED_BLOB_MIMETYPES = [
 ];
 
 export function getBlobSafeMimeType(mimetype) {
-  if (!ALLOWED_BLOB_MIMETYPES.includes(mimetype)) {
+  if (typeof mimetype !== 'string') return 'application/octet-stream';
+  const [type] = mimetype.split(';');
+  if (!ALLOWED_BLOB_MIMETYPES.includes(type)) {
     return 'application/octet-stream';
   }
   // Required for Chromium browsers
-  if (mimetype === 'video/quicktime') {
+  if (type === 'video/quicktime') {
     return 'video/mp4';
   }
-  return mimetype;
+  return type;
 }

webpack.common.js

@@ -1,5 +1,4 @@
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 const CopyPlugin = require("copy-webpack-plugin");
 const webpack = require('webpack');
 
@@ -52,27 +51,12 @@ module.exports = {
   },
   plugins: [
     new HtmlWebpackPlugin({ template: './public/index.html' }),
-    new FaviconsWebpackPlugin({
-      logo: './public/res/svg/cinny.svg',
-      mode: 'webapp',
-      devMode: 'light',
-      favicons: {
-        appName: 'Cinny',
-        appDescription: 'Yet another matrix client',
-        developerName: 'Ajay Bura',
-        developerURL: 'https://github.com/ajbura',
-        icons: {
-          coast: false,
-          yandex: false,
-          appleStartup: false,
-        }
-      }
-    }),
     new CopyPlugin({
       patterns: [
-        { from: 'olm.wasm' },
+        { from: 'node_modules/@matrix-org/olm/olm.wasm' },
         { from: '_redirects' },
         { from: 'config.json' },
+        { from: 'public/res/android'}
       ],
     }),
     new webpack.ProvidePlugin({