v1.4.0: SSO login and profile viewer

Signed-off-by: Ajay Bura <ajbura@gmail.com>
Fix reaction selector doesn't focus msg input (#62 )
2021-10-25 17:59:57 +05:30 · 2021-10-25 17:59:57 +05:30 · 2021-10-25 17:59:57 +05:30 · 2021-10-25 17:59:57 +05:30 · 2021-10-25 17:59:57 +05:30 · 2021-10-25 17:59:57 +05:30
370 changed files with 21644 additions and 31419 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -1,2 +0,0 @@
 node_modules/
 .git/
--- a/.eslintignore
+++ b/.eslintignore
@ -1,2 +1,5 @@
 webpack.common.js
 webpack.dev.js
 webpack.prod.js
 experiment
 node_modules
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -4,50 +4,21 @@ module.exports = {
    es2021: true,
  },
  extends: [
-    "eslint:recommended",
+    'plugin:react/recommended',
-    "plugin:react/recommended",
+    'airbnb',
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "airbnb",
    "prettier",
  ],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
-    ecmaVersion: "latest",
+    ecmaVersion: 12,
-    sourceType: "module",
+    sourceType: 'module',
  },
-  plugins: ["react", "@typescript-eslint"],
+  plugins: [
    'react',
  ],
  rules: {
-    "linebreak-style": 0,
+    'linebreak-style': 0,
-    "no-underscore-dangle": 0,
+    'no-underscore-dangle': 0,
    "import/prefer-default-export": "off",
    "import/extensions": "off",
    "import/no-unresolved": "off",
    "import/no-extraneous-dependencies": [
      "error",
      {
        devDependencies: true,
      },
    ],
    "react/no-unstable-nested-components": ["error", { allowAsProps: true }],
    "react/jsx-filename-extension": [
      "error",
      {
        extensions: [".tsx", ".jsx"],
      },
    ],
    "react/require-default-props": "off",
    "react/jsx-props-no-spreading": "off",
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "error",
    "@typescript-eslint/no-unused-vars": "error",
  },
 };
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@ -1,3 +1,2 @@
 github: ajbura
 liberapay: ajbura
 open_collective: cinny
 liberapay: ajbura
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@ -0,0 +1,32 @@
 ---
 name: Bug report
 about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
 ---
 #### Describe the bug
 A clear and concise description of what the bug is.
 #### To Reproduce
 Steps to reproduce the behavior:
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
 4. See error
 #### Expected behavior
 A clear and concise description of what you expected to happen.
 #### Screenshots
 If applicable, add screenshots to help explain your problem.
 #### Desktop (please complete the following information):
 - OS: [e.g. Windows, MacOS]
 - Browser: [e.g. chrome, firefox]
 - Version: [e.g. 3.22]
 #### Additional context
 Add any other context about the problem here.
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@ -1,57 +0,0 @@
 name: 🐞 Bug Report
 description: Report a bug
 body:
  - type: markdown
    attributes:
      value: |
        ## First of all
        1. Please search for [existing issues](https://github.com/ajbura/cinny/issues?q=is%3Aissue) about this problem first.
        2. Make sure Cinny is up to date.
        3. Make sure it's an issue with Cinny and not something else you are using.
        4. Remember to be friendly.
  - type: textarea
    id: description
    attributes:
      label: Describe the bug
      description: A clear description of what the bug is. Include screenshots if applicable.
      placeholder: Bug description
    validations:
      required: true
  - type: textarea
    id: reproduction
    attributes:
      label: Reproduction
      description: Steps to reproduce the behavior.
      placeholder: |
        1. Go to ...
        2. Click on ...
        3. See error
  - type: textarea
    id: expected-behavior
    attributes:
      label: Expected behavior
      description: A clear description of what you expected to happen.
  - type: textarea
    id: info
    attributes:
      label: Platform and versions
      description: "Provide OS, browser and Cinny version with your Homeserver."
      placeholder: |
        1. OS: [e.g. Windows 10, MacOS]
        2. Browser: [e.g. chrome 99.5, firefox 97.2]
        3. Cinny version: [e.g. 1.8.1 (app.cinny.in)]
        4. Matrix homeserver: [e.g. matrix.org]
      render: shell
    validations:
      required: true
  - type: textarea
    id: context
    attributes:
      label: Additional context
      description: Add any other context about the problem here.
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@ -1,4 +0,0 @@
 contact_links:
  - name: 💬 Matrix Chat
    url: https://matrix.to/#/#cinny:matrix.org
    about: Ask questions and talk to other Cinny users and the maintainers
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@ -0,0 +1,20 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
 title: ''
 labels: ''
 assignees: ''
 ---
 #### Is your feature request related to a problem? Please describe.
 A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 #### Describe the solution you'd like
 A clear and concise description of what you want to happen.
 #### Describe alternatives you've considered
 A clear and concise description of any alternative solutions or features you've considered.
 #### Additional context
 Add any other context or screenshots about the feature request here.
--- a/.github/ISSUE_TEMPLATE/feature_request.yml
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@ -1,33 +0,0 @@
 name: 💡 Feature Request
 description: Suggest an idea
 body:
  - type: textarea
    id: problem
    attributes:
      label: Describe the problem
      description: A clear description of the problem this feature would solve
      placeholder: "I'm always frustrated when..."
    validations:
      required: true
  - type: textarea
    id: solution
    attributes:
      label: "Describe the solution you'd like"
      description: A clear description of what change you would like
      placeholder: "I would like to..."
    validations:
      required: true
  - type: textarea
    id: alternatives
    attributes:
      label: Alternatives considered
      description: "Any alternative solutions you've considered"
  - type: textarea
    id: context
    attributes:
      label: Additional context
      description: Add any other context about the problem here.
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -1,13 +1,15 @@
-<!-- Please read https://github.com/ajbura/cinny/blob/dev/CONTRIBUTING.md before submitting your pull request -->
+<!-- Please read https://github.com/ajbura/cinny/CONTRIBUTING.md before submitting your pull request -->
 ### Description
-<!-- Please include a summary of the change. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
+Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
-Fixes #
+Fixes # (issue)
 #### Type of change
 Please delete options that are not relevant.
 - [ ] Bug fix (non-breaking change which fixes an issue)
 - [ ] New feature (non-breaking change which adds functionality)
 - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -1,30 +0,0 @@
 # Docs: <https://docs.github.com/en/code-security/supply-chain-security/keeping-your-dependencies-updated-automatically/customizing-dependency-updates>
 version: 2
 updates:
  - package-ecosystem: npm
    directory: /
    schedule:
      interval: weekly
      day: "tuesday"
      time: "01:00"
      timezone: "Asia/Kolkata"
    open-pull-requests-limit: 15
  - package-ecosystem: github-actions
    directory: /
    schedule:
      interval: weekly
      day: "tuesday"
      time: "01:00"
      timezone: "Asia/Kolkata"
    open-pull-requests-limit: 5
  - package-ecosystem: docker
    directory: /
    schedule:
      interval: weekly
      day: "tuesday"
      time: "01:00"
      timezone: "Asia/Kolkata"
    open-pull-requests-limit: 5
--- a/.github/renovate.json
+++ b/.github/renovate.json
@ -1,12 +0,0 @@
 {
  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
  "extends": ["config:base", ":dependencyDashboardApproval"],
  "labels": ["Dependencies"],
  "packageRules": [
    {
      "matchUpdateTypes": ["lockFileMaintenance"]
    }
  ],
  "lockFileMaintenance": { "enabled": true },
  "dependencyDashboard": true
 }
--- a/.github/workflows/build-pull-request.yml
+++ b/.github/workflows/build-pull-request.yml
@ -1,40 +0,0 @@
 name: Build pull request
 on:
  pull_request:
    types: ["opened", "synchronize"]
 jobs:
  build-pull-request:
    name: Build pull request
    runs-on: ubuntu-latest
    env:
      PR_NUMBER: ${{github.event.number}}
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3.2.0
      - name: Setup node
        uses: actions/setup-node@v3.5.1
        with:
          node-version: 18.12.1
          cache: "npm"
      - name: Install dependencies
        run: npm ci
      - name: Build app
        env:
          NODE_OPTIONS: "--max_old_space_size=4096"
        run: npm run build
      - name: Upload artifact
        uses: actions/upload-artifact@v3.1.1
        with:
          name: preview
          path: dist
          retention-days: 1
      - name: Save pr number
        run: echo ${PR_NUMBER} > ./pr.txt
      - name: Upload pr number
        uses: actions/upload-artifact@v3.1.1
        with:
          name: pr
          path: ./pr.txt
          retention-days: 1
--- a/.github/workflows/cla.yml
+++ b/.github/workflows/cla.yml
@ -1,36 +0,0 @@
 name: "CLA Assistant"
 on:
  issue_comment:
    types: [created]
  pull_request_target:
    types: [opened, closed, synchronize]
 jobs:
  CLAssistant:
    runs-on: ubuntu-latest
    steps:
      - 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.2.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
          PERSONAL_ACCESS_TOKEN: ${{ secrets.CLA_PAT }}
        with:
          path-to-signatures: "signatures.json"
          path-to-document: "https://github.com/cinnyapp/cla/blob/main/cla.md" # e.g. a CLA or a DCO document
          # branch should not be protected
          branch: "main"
          allowlist: ajbura,bot*
          #below are the optional inputs - If the optional inputs are not given, then default values will be taken
          remote-organization-name: cinnyapp
          remote-repository-name: cla
          #create-file-commit-message: 'For example: Creating file for storing CLA Signatures'
          #signed-commit-message: 'For example: $contributorName has signed the CLA in #$pullRequestNo'
          #custom-notsigned-prcomment: 'pull request comment with Introductory message to ask new contributors to sign'
          #custom-pr-sign-comment: 'The signature to be committed in order to sign the CLA'
          #custom-allsigned-prcomment: 'pull request comment when all contributors has signed, defaults to **CLA Assistant Lite bot** All Contributors have signed the CLA.'
          #lock-pullrequest-aftermerge: false - if you don't want this bot to automatically lock the pull request after merging (default - true)
          #use-dco-flag: true - If you are using DCO instead of CLA
--- a/.github/workflows/deploy-pull-request.yml
+++ b/.github/workflows/deploy-pull-request.yml
@ -1,56 +0,0 @@
 name: Deploy PR to Netlify
 on:
  workflow_run:
    workflows: ["Build pull request"]
    types: [completed]
 jobs:
  deploy-pull-request:
    name: Deploy pull request
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write
    if: ${{ github.event.workflow_run.conclusion == 'success' }}
    steps:
      - name: Download pr number
        uses: dawidd6/action-download-artifact@e6e25ac3a2b93187502a8be1ef9e9603afc34925
        with:
          workflow: ${{ github.event.workflow.id }}
          run_id: ${{ github.event.workflow_run.id }}
          name: pr
      - name: Output pr number
        id: pr
        run: echo "id=$(<pr.txt)" >> $GITHUB_OUTPUT
      - name: Download artifact
        uses: dawidd6/action-download-artifact@e6e25ac3a2b93187502a8be1ef9e9603afc34925
        with:
          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@5da65c9f74c7961c5501a3ba329b8d0912f39c03
        with:
          publish-dir: dist
          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
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_PR_CINNY }}
        timeout-minutes: 1
      - name: Comment preview on PR
        uses: thollander/actions-comment-pull-request@c22fb302208b7b170d252a61a505d2ea27245eff
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          pr_number: ${{ steps.pr.outputs.id }}
          comment_tag: ${{ steps.pr.outputs.id }}
          message: |
            Preview: ${{ steps.netlify.outputs.deploy-url }}
            ⚠️ Exercise caution. Use test accounts. ⚠️
--- a/.github/workflows/docker-pr.yml
+++ b/.github/workflows/docker-pr.yml
@ -1,19 +0,0 @@
 name: "Docker check"
 on:
  pull_request:
    paths:
      - "Dockerfile"
      - ".github/workflows/docker-pr.yml"
 jobs:
  docker-build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3.2.0
      - name: Build Docker image
        uses: docker/build-push-action@v3.2.0
        with:
          context: .
          push: false
--- a/.github/workflows/docker.yaml
+++ b/.github/workflows/docker.yaml
@ -0,0 +1,34 @@
 name: Publish Docker image
 on:
  release:
    types: [published]
 jobs:
   push_to_registry:
    name: Push Docker image to Docker Hub
    runs-on: ubuntu-latest
    steps:
      - name: Check out the repo
        uses: actions/checkout@v2
      - name: Log in to Docker Hub
        uses: docker/login-action@v1
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
      - name: Extract metadata (tags, labels) for Docker
        id: meta
        uses: docker/metadata-action@v3
        with:
          images: ajbura/cinny
      - name: Build and push Docker image
        uses: docker/build-push-action@v2
        with:
          context: .
          push: true
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}
--- a/.github/workflows/lockfile.yml
+++ b/.github/workflows/lockfile.yml
@ -1,26 +0,0 @@
 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.2.0
      - 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
--- a/.github/workflows/netlify-dev.yaml
+++ b/.github/workflows/netlify-dev.yaml
@ -0,0 +1,21 @@
 name: 'Deploy to Netlify (dev)'
 on:
  push:
    branches:
       - dev
 jobs:
  deploy:
    name: 'Deploy'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: jsmrcaga/action-netlify-deploy@master
        with:
          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
--- a/.github/workflows/netlify-dev.yml
+++ b/.github/workflows/netlify-dev.yml
@ -1,39 +0,0 @@
 name: Deploy to Netlify (dev)
 on:
  push:
    branches:
      - dev
 jobs:
  deploy-to-netlify:
    name: Deploy to Netlify
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3.2.0
      - name: Setup node
        uses: actions/setup-node@v3.5.1
        with:
          node-version: 18.12.1
          cache: "npm"
      - name: Install dependencies
        run: npm ci
      - name: Build app
        env:
          NODE_OPTIONS: "--max_old_space_size=4096"
        run: npm run build
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@5da65c9f74c7961c5501a3ba329b8d0912f39c03
        with:
          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_SITE_ID_DEV }}
        timeout-minutes: 1
--- a/.github/workflows/netlify-prod.yaml
+++ b/.github/workflows/netlify-prod.yaml
@ -0,0 +1,20 @@
 name: 'Deploy to Netlify (prod)'
 on:
  release:
    types: [published]
 jobs:
  deploy:
    name: 'Deploy'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: jsmrcaga/action-netlify-deploy@master
        with:
          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
--- a/.github/workflows/prod-deploy.yml
+++ b/.github/workflows/prod-deploy.yml
@ -1,99 +0,0 @@
 name: Production deploy
 on:
  release:
    types: [published]
 jobs:
  deploy-and-tarball:
    name: Netlify deploy and tarball
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3.2.0
      - name: Setup node
        uses: actions/setup-node@v3.5.1
        with:
          node-version: 18.12.1
          cache: "npm"
      - name: Install dependencies
        run: npm ci
      - name: Build app
        env:
          NODE_OPTIONS: "--max_old_space_size=4096"
        run: npm run build
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@5da65c9f74c7961c5501a3ba329b8d0912f39c03
        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_APP }}
        timeout-minutes: 1
      - name: Get version from tag
        id: vars
        run: echo "tag=${GITHUB_REF#refs/*/}" >> $GITHUB_OUTPUT
      - 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@de2c0eb89ae2a093876385947365aca7b0e5f844
        with:
          files: |
            cinny-${{ steps.vars.outputs.tag }}.tar.gz
            cinny-${{ steps.vars.outputs.tag }}.tar.gz.asc
  publish-image:
    name: Push Docker image to Docker Hub, ghcr
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3.2.0
      - name: Set up QEMU
        uses: docker/setup-qemu-action@v2.1.0
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v2.2.1
      - name: Login to Docker Hub
        uses: docker/login-action@v2.1.0
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
      - name: Login to the Container registry
        uses: docker/login-action@v2.1.0
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
      - name: Extract metadata (tags, labels) for Docker
        id: meta
        uses: docker/metadata-action@v4.1.1
        with:
          images: |
            ${{ secrets.DOCKER_USERNAME }}/cinny
            ghcr.io/${{ github.repository }}
      - name: Build and push Docker image
        uses: docker/build-push-action@v3.2.0
        with:
          context: .
          platforms: linux/amd64,linux/arm64
          push: true
          tags: ${{ steps.meta.outputs.tags }}
          labels: ${{ steps.meta.outputs.labels }}
--- a/.github/workflows/pull-request.yml
+++ b/.github/workflows/pull-request.yml
@ -0,0 +1,30 @@
 name: 'Netlify Preview Deploy'
 on:
  pull_request_target:
    types: ['opened', 'synchronize']
 jobs:
  deploy:
    name: "Deploy to Netlify"
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1      
      - uses: jsmrcaga/action-netlify-deploy@master
        with:          
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE3_ID }}
          BUILD_DIRECTORY: "dist"
      - name: Post on PR
        uses: nwtgck/actions-netlify@v1.1
        with:
          publish-dir: "dist"
          github-token: ${{ secrets.GITHUB_TOKEN }}
          deploy-message: "Deploy from GitHub Actions"
          enable-pull-request-comment: true
          enable-commit-comment: false
          overwrites-pull-request-comment: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE3_ID }}
--- a/.npmrc
+++ b/.npmrc
@ -1,3 +0,0 @@
 legacy-peer-deps=true
 save-exact=true
@matrix-org:registry=https://gitlab.matrix.org/api/v4/projects/27/packages/npm/
--- a/.prettierignore
+++ b/.prettierignore
@ -1,6 +0,0 @@
 dist
 node_modules
 package.json
 package-lock.json
 LICENSE
 README.md
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -1,8 +0,0 @@
 {
  "tabWidth": 2,
  "semi": true,
  "useTabs": false,
  "singleQuote": false,
  "trailingComma": "es5",
  "printWidth": 80
 }
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -1,3 +0,0 @@
 {
  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
 }
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,5 +0,0 @@
 {
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "typescript.tsdk": "node_modules/typescript/lib"
 }
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -1,47 +1,139 @@
 <!-- omit in toc -->
 # Contributing to Cinny
 First off, thanks for taking the time to contribute! ❤️
-All types of contributions are encouraged and valued. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉
+All types of contributions are encouraged and valued. See the [Table of Contents](#table-of-contents) for different ways to help and details about how this project handles them. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉
 > And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about:
 >
 > - Star the project
 > - Tweet about it (tag @cinnyapp)
 > - Refer this project in your project's readme
 > - Mention the project at local meetups and tell your friends/colleagues
-> - [Donate to us](https://cinny.in/#sponsor)
+> - [Donate to us](https://liberapay.com/ajbura/donate)
-## Bug reports
+<!-- omit in toc -->
 ## Table of Contents
-Bug reports and feature suggestions must use descriptive and concise titles and be submitted to [GitHub Issues](https://github.com/ajbura/cinny/issues). Please use the search function to make sure that you are not submitting duplicates, and that a similar report or request has not already been resolved or rejected.
+- [I Have a Question](#i-have-a-question)
 - [I Want To Contribute](#i-want-to-contribute)
  - [Reporting Bugs](#reporting-bugs)
  - [Suggesting Enhancements](#suggesting-enhancements)
  - [Your First Code Contribution](#your-first-code-contribution)
 - [Styleguides](#styleguides)
  - [Commit Messages](#commit-messages)
  - [Coding conventions](#coding-conventions)
-## Pull requests
+## I Have a Question
-> ### Legal Notice
+Before you ask a question, it is best to search for existing [Issues](https://github.com/ajbura/cinny/issues) that might help you. In case you have found a suitable issue and still need clarification, you can write your question in this issue.
->
+
 If you then still feel the need to ask a question and need clarification, we recommend the following:
 - Ask in our [Matrix room](https://matrix.to/#/#cinny:matrix.org) or [IRC channel](https://web.libera.chat/?channel=#cinny).
 - If no one respond in our channel, please open an [Issue](https://github.com/ajbura/cinny/issues/new).
 - Provide as much context as you can about what you're running into.
 - Provide project and platform versions (nodejs, npm, etc), depending on what seems relevant.
 We will then take care of the issue as soon as possible.
 ## I Want To Contribute
 > ### Legal Notice <!-- omit in toc -->
 > When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license.
-**NOTE: If you want to add new features, please discuss with maintainers before coding or opening a pull request.** This is to ensure that we are on same track and following our roadmap.
+### Reporting Bugs
-**Please use clean, concise titles for your pull requests.** We use commit squashing, so the final commit in the dev branch will carry the title of the pull request. For easier sorting in changelog, start your pull request titles using one of the verbs "Add", "Change", "Remove", or "Fix" (present tense).
+<!-- omit in toc -->
 #### Before Submitting a Bug Report
-Example:
+A good bug report shouldn't leave others needing to chase you up for more information. Therefore, we ask you to investigate carefully, collect information and describe the issue in detail in your report. Please complete the following steps in advance to help us fix any potential bug as fast as possible.
-| Not ideal                           | Better                                        |
+- Make sure that you are using the latest version.
-| ----------------------------------- | --------------------------------------------- |
+- Determine if your bug is really a bug and not an error on your side. If you are looking for support, you might want to check [this section](#i-have-a-question)).
-| Fixed markAllAsRead in RoomTimeline | Fix read marker when paginating room timeline |
+- To see if other users have experienced (and potentially already solved) the same issue you are having, check if there is not already a bug report existing for your bug or error in the [bug tracker](https://github.com/ajbura/cinny/issues?q=label%3Abug).
 - Collect information about the bug:
  - OS, Platform and Version (Windows, Linux, macOS, x86, ARM)
  - Possibly your input and the output
  - Can you reliably reproduce the issue?
-It is not always possible to phrase every change in such a manner, but it is desired.
+<!-- omit in toc -->
 #### How Do I Submit a Good Bug Report?
-**The smaller the set of changes in the pull request is, the quicker it can be reviewed and merged.** Splitting tasks into multiple smaller pull requests is often preferable.
+> You must never report security related issues, vulnerabilities or bugs to the issue tracker, or elsewhere in public. Instead sensitive bugs must be sent by email to <cinnyapp@gmail.com>.
-Also, we use [ESLint](https://eslint.org/) for clean and stylistically consistent code syntax, so make sure your pull request follow it.
+We use GitHub issues to track bugs and errors. If you run into an issue with the project:
-**For any query or design discussion, join our [Matrix room](https://matrix.to/#/#cinny:matrix.org).**
+- Open an [Issue](https://github.com/ajbura/cinny/issues/new). (Since we can't be sure at this point whether it is a bug or not, we ask you not to talk about a bug yet and not to label the issue.)
 - Explain the behavior you would expect and the actual behavior.
 - Please provide as much context as possible and describe the *reproduction steps* that someone else can follow to recreate the issue on their own. For good bug reports you should isolate the problem and create a reduced test case.
 - Provide the information you collected in the previous section.
-## Helpful links
+Once it's filed:
- [BEM methodology](http://getbem.com/introduction/)
+- The project team will label the issue accordingly.
- [Atomic design](https://bradfrost.com/blog/post/atomic-web-design/)
+- A team member will try to reproduce the issue with your provided steps. If there are no reproduction steps or no obvious way to reproduce the issue, the team will ask you for those steps and mark the issue as `needs-repro`. Bugs with the `needs-repro` tag will not be addressed until they are reproduced.
- [Matrix JavaScript SDK documentation](https://matrix-org.github.io/matrix-js-sdk/index.html)
+- If the team is able to reproduce the issue, it will be marked `needs-fix`, as well as possibly other tags (such as `critical`), and the issue will be left to be [implemented by someone](#your-first-code-contribution).
 ### Suggesting Enhancements
 This section guides you through submitting an enhancement suggestion for Cinny, **including completely new features and minor improvements to existing functionality**. Following these guidelines will help maintainers and the community to understand your suggestion and find related suggestions.
 <!-- omit in toc -->
 #### Before Submitting an Enhancement
 - Make sure that you are using the latest version.
 - Perform a [search](https://github.com/ajbura/cinny/issues) to see if the enhancement has already been suggested. If it has, add a comment to the existing issue instead of opening a new one.
 - Find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the project's developers of the merits of this feature. Keep in mind that we want features that will be useful to the majority of our users and not just a small subset.
 <!-- omit in toc -->
 #### How Do I Submit a Good Enhancement Suggestion?
 Enhancement suggestions are tracked as [GitHub issues](https://github.com/ajbura/cinny/issues).
 - Use a **clear and descriptive title** for the issue to identify the suggestion.
 - Provide a **step-by-step description of the suggested enhancement** in as many details as possible.
 - **Describe the current behavior** and **explain which behavior you expected to see instead** and why. At this point you can also tell which alternatives do not work for you.
 - You may want to **include screenshots and animated GIFs** which help you demonstrate the steps or point out the part which the suggestion is related to. You can use [this tool](https://www.cockos.com/licecap/) to record GIFs on macOS and Windows, and [this tool](https://github.com/colinkeenan/silentcast) on Linux.
 - **Explain why this enhancement would be useful** to most Cinny users. You may also want to point out the other projects that solved it better and which could serve as inspiration.
 ### Your First Code Contribution
 Please send a [GitHub Pull Request to cinny](https://github.com/ajbura/cinny/pull/new/master) with a clear list of what you've done (read more about [pull requests](http://help.github.com/pull-requests/)).
 When proposing a PR:
 - Describe what problem it solves, what side effects come with it.
 - Adding some screenshots will help.
 - Add some documentation if relevant.
 - Add some comments around blocks/functions if relevant.
 Some reasons why a PR could be refused:
 - PR is not meeting one of the previous points.
 - PR is not meeting project goals.
 - PR is conflicting with another PR, and the latter is being preferred.
 - PR slows down Cinny, or it obviously does too many
  computations for the task being accomplished. It needs to be optimized.
 - PR is using copy-n-paste-programming. It needs to be factorized.
 - PR contains commented code: remove it.
 - PR adds new features or changes the behavior of Cinny without
  having be approved by the current project owners first.
 - PR is too big and needs to be splitted in many smaller ones.
 - PR contains unnecessary "space/indentations fixes".
 If a PR stays in a stale/WIP/POC state for too long, it may be closed
 at any time.
 ## Styleguides
 ### Commit Messages
 Always write a clear log message for your commits. One-line messages are fine for small changes, but bigger changes should look like this:
    $ git commit -m "A brief summary of the commit
    > 
    > A paragraph describing what changed and its impact."
 ### Coding conventions
 We use [ESLint](https://eslint.org/) for clean and stylistically consistent code syntax.
--- a/15
+++ b/15
@ -1,19 +1,20 @@
 ## Builder
-FROM node:18.12.1-alpine3.15 as builder
+FROM node:14-alpine as builder
 WORKDIR /src
-COPY .npmrc package.json package-lock.json /src/
+COPY . /src
-RUN npm ci
+RUN npm install \
-COPY . /src/
+  && npm run build
 ENV NODE_OPTIONS=--max_old_space_size=4096
 RUN npm run build
 ## App
-FROM nginx:1.23.3-alpine
+FROM nginx:alpine
 COPY --from=builder /src/dist /app
 # Insert wasm type into Nginx mime.types file so they load correctly.
 RUN sed -i '3i\ \ \ \ application/wasm wasm\;' /etc/nginx/mime.types
 RUN rm -rf /usr/share/nginx/html \
  && ln -s /app /usr/share/nginx/html
--- a/682
+++ b/682
@ -1,661 +1,21 @@
-                    GNU AFFERO GENERAL PUBLIC LICENSE
+MIT License
-                       Version 3, 19 November 2007
+
-
+Copyright (c) 2021 Ajay Bura (ajbura) and other contributors
- Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+
- Everyone is permitted to copy and distribute verbatim copies
+Permission is hereby granted, free of charge, to any person obtaining a copy
- of this license document, but changing it is not allowed.
+of this software and associated documentation files (the "Software"), to deal
-
+in the Software without restriction, including without limitation the rights
-                            Preamble
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-
+copies of the Software, and to permit persons to whom the Software is
-  The GNU Affero General Public License is a free, copyleft license for
+furnished to do so, subject to the following conditions:
-software and other kinds of works, specifically designed to ensure
+
-cooperation with the community in the case of network server software.
+The above copyright notice and this permission notice shall be included in all
-
+copies or substantial portions of the Software.
-  The licenses for most software and other practical works are designed
+
-to take away your freedom to share and change the works.  By contrast,
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-our General Public Licenses are intended to guarantee your freedom to
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-share and change all versions of a program--to make sure it remains free
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-software for all its users.
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-  When we speak of free software, we are referring to freedom, not
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-price.  Our General Public Licenses are designed to make sure that you
+SOFTWARE.
 have the freedom to distribute copies of free software (and charge for
 them if you wish), that you receive source code or can get it if you
 want it, that you can change the software or use pieces of it in new
 free programs, and that you know you can do these things.
  Developers that use our General Public Licenses protect your rights
 with two steps: (1) assert copyright on the software, and (2) offer
 you this License which gives you legal permission to copy, distribute
 and/or modify the software.
  A secondary benefit of defending all users' freedom is that
 improvements made in alternate versions of the program, if they
 receive widespread use, become available for other developers to
 incorporate.  Many developers of free software are heartened and
 encouraged by the resulting cooperation.  However, in the case of
 software used on network servers, this result may fail to come about.
 The GNU General Public License permits making a modified version and
 letting the public access it on a server without ever releasing its
 source code to the public.
  The GNU Affero General Public License is designed specifically to
 ensure that, in such cases, the modified source code becomes available
 to the community.  It requires the operator of a network server to
 provide the source code of the modified version running there to the
 users of that server.  Therefore, public use of a modified version, on
 a publicly accessible server, gives the public access to the source
 code of the modified version.
  An older license, called the Affero General Public License and
 published by Affero, was designed to accomplish similar goals.  This is
 a different license, not a version of the Affero GPL, but Affero has
 released a new version of the Affero GPL which permits relicensing under
 this license.
  The precise terms and conditions for copying, distribution and
 modification follow.
                       TERMS AND CONDITIONS
  0. Definitions.
  "This License" refers to version 3 of the GNU Affero General Public License.
  "Copyright" also means copyright-like laws that apply to other kinds of
 works, such as semiconductor masks.
  "The Program" refers to any copyrightable work licensed under this
 License.  Each licensee is addressed as "you".  "Licensees" and
 "recipients" may be individuals or organizations.
  To "modify" a work means to copy from or adapt all or part of the work
 in a fashion requiring copyright permission, other than the making of an
 exact copy.  The resulting work is called a "modified version" of the
 earlier work or a work "based on" the earlier work.
  A "covered work" means either the unmodified Program or a work based
 on the Program.
  To "propagate" a work means to do anything with it that, without
 permission, would make you directly or secondarily liable for
 infringement under applicable copyright law, except executing it on a
 computer or modifying a private copy.  Propagation includes copying,
 distribution (with or without modification), making available to the
 public, and in some countries other activities as well.
  To "convey" a work means any kind of propagation that enables other
 parties to make or receive copies.  Mere interaction with a user through
 a computer network, with no transfer of a copy, is not conveying.
  An interactive user interface displays "Appropriate Legal Notices"
 to the extent that it includes a convenient and prominently visible
 feature that (1) displays an appropriate copyright notice, and (2)
 tells the user that there is no warranty for the work (except to the
 extent that warranties are provided), that licensees may convey the
 work under this License, and how to view a copy of this License.  If
 the interface presents a list of user commands or options, such as a
 menu, a prominent item in the list meets this criterion.
  1. Source Code.
  The "source code" for a work means the preferred form of the work
 for making modifications to it.  "Object code" means any non-source
 form of a work.
  A "Standard Interface" means an interface that either is an official
 standard defined by a recognized standards body, or, in the case of
 interfaces specified for a particular programming language, one that
 is widely used among developers working in that language.
  The "System Libraries" of an executable work include anything, other
 than the work as a whole, that (a) is included in the normal form of
 packaging a Major Component, but which is not part of that Major
 Component, and (b) serves only to enable use of the work with that
 Major Component, or to implement a Standard Interface for which an
 implementation is available to the public in source code form.  A
 "Major Component", in this context, means a major essential component
 (kernel, window system, and so on) of the specific operating system
 (if any) on which the executable work runs, or a compiler used to
 produce the work, or an object code interpreter used to run it.
  The "Corresponding Source" for a work in object code form means all
 the source code needed to generate, install, and (for an executable
 work) run the object code and to modify the work, including scripts to
 control those activities.  However, it does not include the work's
 System Libraries, or general-purpose tools or generally available free
 programs which are used unmodified in performing those activities but
 which are not part of the work.  For example, Corresponding Source
 includes interface definition files associated with source files for
 the work, and the source code for shared libraries and dynamically
 linked subprograms that the work is specifically designed to require,
 such as by intimate data communication or control flow between those
 subprograms and other parts of the work.
  The Corresponding Source need not include anything that users
 can regenerate automatically from other parts of the Corresponding
 Source.
  The Corresponding Source for a work in source code form is that
 same work.
  2. Basic Permissions.
  All rights granted under this License are granted for the term of
 copyright on the Program, and are irrevocable provided the stated
 conditions are met.  This License explicitly affirms your unlimited
 permission to run the unmodified Program.  The output from running a
 covered work is covered by this License only if the output, given its
 content, constitutes a covered work.  This License acknowledges your
 rights of fair use or other equivalent, as provided by copyright law.
  You may make, run and propagate covered works that you do not
 convey, without conditions so long as your license otherwise remains
 in force.  You may convey covered works to others for the sole purpose
 of having them make modifications exclusively for you, or provide you
 with facilities for running those works, provided that you comply with
 the terms of this License in conveying all material for which you do
 not control copyright.  Those thus making or running the covered works
 for you must do so exclusively on your behalf, under your direction
 and control, on terms that prohibit them from making any copies of
 your copyrighted material outside their relationship with you.
  Conveying under any other circumstances is permitted solely under
 the conditions stated below.  Sublicensing is not allowed; section 10
 makes it unnecessary.
  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
  No covered work shall be deemed part of an effective technological
 measure under any applicable law fulfilling obligations under article
 11 of the WIPO copyright treaty adopted on 20 December 1996, or
 similar laws prohibiting or restricting circumvention of such
 measures.
  When you convey a covered work, you waive any legal power to forbid
 circumvention of technological measures to the extent such circumvention
 is effected by exercising rights under this License with respect to
 the covered work, and you disclaim any intention to limit operation or
 modification of the work as a means of enforcing, against the work's
 users, your or third parties' legal rights to forbid circumvention of
 technological measures.
  4. Conveying Verbatim Copies.
  You may convey verbatim copies of the Program's source code as you
 receive it, in any medium, provided that you conspicuously and
 appropriately publish on each copy an appropriate copyright notice;
 keep intact all notices stating that this License and any
 non-permissive terms added in accord with section 7 apply to the code;
 keep intact all notices of the absence of any warranty; and give all
 recipients a copy of this License along with the Program.
  You may charge any price or no price for each copy that you convey,
 and you may offer support or warranty protection for a fee.
  5. Conveying Modified Source Versions.
  You may convey a work based on the Program, or the modifications to
 produce it from the Program, in the form of source code under the
 terms of section 4, provided that you also meet all of these conditions:
    a) The work must carry prominent notices stating that you modified
    it, and giving a relevant date.
    b) The work must carry prominent notices stating that it is
    released under this License and any conditions added under section
    7.  This requirement modifies the requirement in section 4 to
    "keep intact all notices".
    c) You must license the entire work, as a whole, under this
    License to anyone who comes into possession of a copy.  This
    License will therefore apply, along with any applicable section 7
    additional terms, to the whole of the work, and all its parts,
    regardless of how they are packaged.  This License gives no
    permission to license the work in any other way, but it does not
    invalidate such permission if you have separately received it.
    d) If the work has interactive user interfaces, each must display
    Appropriate Legal Notices; however, if the Program has interactive
    interfaces that do not display Appropriate Legal Notices, your
    work need not make them do so.
  A compilation of a covered work with other separate and independent
 works, which are not by their nature extensions of the covered work,
 and which are not combined with it such as to form a larger program,
 in or on a volume of a storage or distribution medium, is called an
 "aggregate" if the compilation and its resulting copyright are not
 used to limit the access or legal rights of the compilation's users
 beyond what the individual works permit.  Inclusion of a covered work
 in an aggregate does not cause this License to apply to the other
 parts of the aggregate.
  6. Conveying Non-Source Forms.
  You may convey a covered work in object code form under the terms
 of sections 4 and 5, provided that you also convey the
 machine-readable Corresponding Source under the terms of this License,
 in one of these ways:
    a) Convey the object code in, or embodied in, a physical product
    (including a physical distribution medium), accompanied by the
    Corresponding Source fixed on a durable physical medium
    customarily used for software interchange.
    b) Convey the object code in, or embodied in, a physical product
    (including a physical distribution medium), accompanied by a
    written offer, valid for at least three years and valid for as
    long as you offer spare parts or customer support for that product
    model, to give anyone who possesses the object code either (1) a
    copy of the Corresponding Source for all the software in the
    product that is covered by this License, on a durable physical
    medium customarily used for software interchange, for a price no
    more than your reasonable cost of physically performing this
    conveying of source, or (2) access to copy the
    Corresponding Source from a network server at no charge.
    c) Convey individual copies of the object code with a copy of the
    written offer to provide the Corresponding Source.  This
    alternative is allowed only occasionally and noncommercially, and
    only if you received the object code with such an offer, in accord
    with subsection 6b.
    d) Convey the object code by offering access from a designated
    place (gratis or for a charge), and offer equivalent access to the
    Corresponding Source in the same way through the same place at no
    further charge.  You need not require recipients to copy the
    Corresponding Source along with the object code.  If the place to
    copy the object code is a network server, the Corresponding Source
    may be on a different server (operated by you or a third party)
    that supports equivalent copying facilities, provided you maintain
    clear directions next to the object code saying where to find the
    Corresponding Source.  Regardless of what server hosts the
    Corresponding Source, you remain obligated to ensure that it is
    available for as long as needed to satisfy these requirements.
    e) Convey the object code using peer-to-peer transmission, provided
    you inform other peers where the object code and Corresponding
    Source of the work are being offered to the general public at no
    charge under subsection 6d.
  A separable portion of the object code, whose source code is excluded
 from the Corresponding Source as a System Library, need not be
 included in conveying the object code work.
  A "User Product" is either (1) a "consumer product", which means any
 tangible personal property which is normally used for personal, family,
 or household purposes, or (2) anything designed or sold for incorporation
 into a dwelling.  In determining whether a product is a consumer product,
 doubtful cases shall be resolved in favor of coverage.  For a particular
 product received by a particular user, "normally used" refers to a
 typical or common use of that class of product, regardless of the status
 of the particular user or of the way in which the particular user
 actually uses, or expects or is expected to use, the product.  A product
 is a consumer product regardless of whether the product has substantial
 commercial, industrial or non-consumer uses, unless such uses represent
 the only significant mode of use of the product.
  "Installation Information" for a User Product means any methods,
 procedures, authorization keys, or other information required to install
 and execute modified versions of a covered work in that User Product from
 a modified version of its Corresponding Source.  The information must
 suffice to ensure that the continued functioning of the modified object
 code is in no case prevented or interfered with solely because
 modification has been made.
  If you convey an object code work under this section in, or with, or
 specifically for use in, a User Product, and the conveying occurs as
 part of a transaction in which the right of possession and use of the
 User Product is transferred to the recipient in perpetuity or for a
 fixed term (regardless of how the transaction is characterized), the
 Corresponding Source conveyed under this section must be accompanied
 by the Installation Information.  But this requirement does not apply
 if neither you nor any third party retains the ability to install
 modified object code on the User Product (for example, the work has
 been installed in ROM).
  The requirement to provide Installation Information does not include a
 requirement to continue to provide support service, warranty, or updates
 for a work that has been modified or installed by the recipient, or for
 the User Product in which it has been modified or installed.  Access to a
 network may be denied when the modification itself materially and
 adversely affects the operation of the network or violates the rules and
 protocols for communication across the network.
  Corresponding Source conveyed, and Installation Information provided,
 in accord with this section must be in a format that is publicly
 documented (and with an implementation available to the public in
 source code form), and must require no special password or key for
 unpacking, reading or copying.
  7. Additional Terms.
  "Additional permissions" are terms that supplement the terms of this
 License by making exceptions from one or more of its conditions.
 Additional permissions that are applicable to the entire Program shall
 be treated as though they were included in this License, to the extent
 that they are valid under applicable law.  If additional permissions
 apply only to part of the Program, that part may be used separately
 under those permissions, but the entire Program remains governed by
 this License without regard to the additional permissions.
  When you convey a copy of a covered work, you may at your option
 remove any additional permissions from that copy, or from any part of
 it.  (Additional permissions may be written to require their own
 removal in certain cases when you modify the work.)  You may place
 additional permissions on material, added by you to a covered work,
 for which you have or can give appropriate copyright permission.
  Notwithstanding any other provision of this License, for material you
 add to a covered work, you may (if authorized by the copyright holders of
 that material) supplement the terms of this License with terms:
    a) Disclaiming warranty or limiting liability differently from the
    terms of sections 15 and 16 of this License; or
    b) Requiring preservation of specified reasonable legal notices or
    author attributions in that material or in the Appropriate Legal
    Notices displayed by works containing it; or
    c) Prohibiting misrepresentation of the origin of that material, or
    requiring that modified versions of such material be marked in
    reasonable ways as different from the original version; or
    d) Limiting the use for publicity purposes of names of licensors or
    authors of the material; or
    e) Declining to grant rights under trademark law for use of some
    trade names, trademarks, or service marks; or
    f) Requiring indemnification of licensors and authors of that
    material by anyone who conveys the material (or modified versions of
    it) with contractual assumptions of liability to the recipient, for
    any liability that these contractual assumptions directly impose on
    those licensors and authors.
  All other non-permissive additional terms are considered "further
 restrictions" within the meaning of section 10.  If the Program as you
 received it, or any part of it, contains a notice stating that it is
 governed by this License along with a term that is a further
 restriction, you may remove that term.  If a license document contains
 a further restriction but permits relicensing or conveying under this
 License, you may add to a covered work material governed by the terms
 of that license document, provided that the further restriction does
 not survive such relicensing or conveying.
  If you add terms to a covered work in accord with this section, you
 must place, in the relevant source files, a statement of the
 additional terms that apply to those files, or a notice indicating
 where to find the applicable terms.
  Additional terms, permissive or non-permissive, may be stated in the
 form of a separately written license, or stated as exceptions;
 the above requirements apply either way.
  8. Termination.
  You may not propagate or modify a covered work except as expressly
 provided under this License.  Any attempt otherwise to propagate or
 modify it is void, and will automatically terminate your rights under
 this License (including any patent licenses granted under the third
 paragraph of section 11).
  However, if you cease all violation of this License, then your
 license from a particular copyright holder is reinstated (a)
 provisionally, unless and until the copyright holder explicitly and
 finally terminates your license, and (b) permanently, if the copyright
 holder fails to notify you of the violation by some reasonable means
 prior to 60 days after the cessation.
  Moreover, your license from a particular copyright holder is
 reinstated permanently if the copyright holder notifies you of the
 violation by some reasonable means, this is the first time you have
 received notice of violation of this License (for any work) from that
 copyright holder, and you cure the violation prior to 30 days after
 your receipt of the notice.
  Termination of your rights under this section does not terminate the
 licenses of parties who have received copies or rights from you under
 this License.  If your rights have been terminated and not permanently
 reinstated, you do not qualify to receive new licenses for the same
 material under section 10.
  9. Acceptance Not Required for Having Copies.
  You are not required to accept this License in order to receive or
 run a copy of the Program.  Ancillary propagation of a covered work
 occurring solely as a consequence of using peer-to-peer transmission
 to receive a copy likewise does not require acceptance.  However,
 nothing other than this License grants you permission to propagate or
 modify any covered work.  These actions infringe copyright if you do
 not accept this License.  Therefore, by modifying or propagating a
 covered work, you indicate your acceptance of this License to do so.
  10. Automatic Licensing of Downstream Recipients.
  Each time you convey a covered work, the recipient automatically
 receives a license from the original licensors, to run, modify and
 propagate that work, subject to this License.  You are not responsible
 for enforcing compliance by third parties with this License.
  An "entity transaction" is a transaction transferring control of an
 organization, or substantially all assets of one, or subdividing an
 organization, or merging organizations.  If propagation of a covered
 work results from an entity transaction, each party to that
 transaction who receives a copy of the work also receives whatever
 licenses to the work the party's predecessor in interest had or could
 give under the previous paragraph, plus a right to possession of the
 Corresponding Source of the work from the predecessor in interest, if
 the predecessor has it or can get it with reasonable efforts.
  You may not impose any further restrictions on the exercise of the
 rights granted or affirmed under this License.  For example, you may
 not impose a license fee, royalty, or other charge for exercise of
 rights granted under this License, and you may not initiate litigation
 (including a cross-claim or counterclaim in a lawsuit) alleging that
 any patent claim is infringed by making, using, selling, offering for
 sale, or importing the Program or any portion of it.
  11. Patents.
  A "contributor" is a copyright holder who authorizes use under this
 License of the Program or a work on which the Program is based.  The
 work thus licensed is called the contributor's "contributor version".
  A contributor's "essential patent claims" are all patent claims
 owned or controlled by the contributor, whether already acquired or
 hereafter acquired, that would be infringed by some manner, permitted
 by this License, of making, using, or selling its contributor version,
 but do not include claims that would be infringed only as a
 consequence of further modification of the contributor version.  For
 purposes of this definition, "control" includes the right to grant
 patent sublicenses in a manner consistent with the requirements of
 this License.
  Each contributor grants you a non-exclusive, worldwide, royalty-free
 patent license under the contributor's essential patent claims, to
 make, use, sell, offer for sale, import and otherwise run, modify and
 propagate the contents of its contributor version.
  In the following three paragraphs, a "patent license" is any express
 agreement or commitment, however denominated, not to enforce a patent
 (such as an express permission to practice a patent or covenant not to
 sue for patent infringement).  To "grant" such a patent license to a
 party means to make such an agreement or commitment not to enforce a
 patent against the party.
  If you convey a covered work, knowingly relying on a patent license,
 and the Corresponding Source of the work is not available for anyone
 to copy, free of charge and under the terms of this License, through a
 publicly available network server or other readily accessible means,
 then you must either (1) cause the Corresponding Source to be so
 available, or (2) arrange to deprive yourself of the benefit of the
 patent license for this particular work, or (3) arrange, in a manner
 consistent with the requirements of this License, to extend the patent
 license to downstream recipients.  "Knowingly relying" means you have
 actual knowledge that, but for the patent license, your conveying the
 covered work in a country, or your recipient's use of the covered work
 in a country, would infringe one or more identifiable patents in that
 country that you have reason to believe are valid.
  If, pursuant to or in connection with a single transaction or
 arrangement, you convey, or propagate by procuring conveyance of, a
 covered work, and grant a patent license to some of the parties
 receiving the covered work authorizing them to use, propagate, modify
 or convey a specific copy of the covered work, then the patent license
 you grant is automatically extended to all recipients of the covered
 work and works based on it.
  A patent license is "discriminatory" if it does not include within
 the scope of its coverage, prohibits the exercise of, or is
 conditioned on the non-exercise of one or more of the rights that are
 specifically granted under this License.  You may not convey a covered
 work if you are a party to an arrangement with a third party that is
 in the business of distributing software, under which you make payment
 to the third party based on the extent of your activity of conveying
 the work, and under which the third party grants, to any of the
 parties who would receive the covered work from you, a discriminatory
 patent license (a) in connection with copies of the covered work
 conveyed by you (or copies made from those copies), or (b) primarily
 for and in connection with specific products or compilations that
 contain the covered work, unless you entered into that arrangement,
 or that patent license was granted, prior to 28 March 2007.
  Nothing in this License shall be construed as excluding or limiting
 any implied license or other defenses to infringement that may
 otherwise be available to you under applicable patent law.
  12. No Surrender of Others' Freedom.
  If conditions are imposed on you (whether by court order, agreement or
 otherwise) that contradict the conditions of this License, they do not
 excuse you from the conditions of this License.  If you cannot convey a
 covered work so as to satisfy simultaneously your obligations under this
 License and any other pertinent obligations, then as a consequence you may
 not convey it at all.  For example, if you agree to terms that obligate you
 to collect a royalty for further conveying from those to whom you convey
 the Program, the only way you could satisfy both those terms and this
 License would be to refrain entirely from conveying the Program.
  13. Remote Network Interaction; Use with the GNU General Public License.
  Notwithstanding any other provision of this License, if you modify the
 Program, your modified version must prominently offer all users
 interacting with it remotely through a computer network (if your version
 supports such interaction) an opportunity to receive the Corresponding
 Source of your version by providing access to the Corresponding Source
 from a network server at no charge, through some standard or customary
 means of facilitating copying of software.  This Corresponding Source
 shall include the Corresponding Source for any work covered by version 3
 of the GNU General Public License that is incorporated pursuant to the
 following paragraph.
  Notwithstanding any other provision of this License, you have
 permission to link or combine any covered work with a work licensed
 under version 3 of the GNU General Public License into a single
 combined work, and to convey the resulting work.  The terms of this
 License will continue to apply to the part which is the covered work,
 but the work with which it is combined will remain governed by version
 3 of the GNU General Public License.
  14. Revised Versions of this License.
  The Free Software Foundation may publish revised and/or new versions of
 the GNU Affero General Public License from time to time.  Such new versions
 will be similar in spirit to the present version, but may differ in detail to
 address new problems or concerns.
  Each version is given a distinguishing version number.  If the
 Program specifies that a certain numbered version of the GNU Affero General
 Public License "or any later version" applies to it, you have the
 option of following the terms and conditions either of that numbered
 version or of any later version published by the Free Software
 Foundation.  If the Program does not specify a version number of the
 GNU Affero General Public License, you may choose any version ever published
 by the Free Software Foundation.
  If the Program specifies that a proxy can decide which future
 versions of the GNU Affero General Public License can be used, that proxy's
 public statement of acceptance of a version permanently authorizes you
 to choose that version for the Program.
  Later license versions may give you additional or different
 permissions.  However, no additional obligations are imposed on any
 author or copyright holder as a result of your choosing to follow a
 later version.
  15. Disclaimer of Warranty.
  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
 APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
 HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
 OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
 THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
 IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
 ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
  16. Limitation of Liability.
  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
 WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
 THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
 GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
 USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
 DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
 PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
 EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
 SUCH DAMAGES.
  17. Interpretation of Sections 15 and 16.
  If the disclaimer of warranty and limitation of liability provided
 above cannot be given local legal effect according to their terms,
 reviewing courts shall apply local law that most closely approximates
 an absolute waiver of all civil liability in connection with the
 Program, unless a warranty or assumption of liability accompanies a
 copy of the Program in return for a fee.
                     END OF TERMS AND CONDITIONS
            How to Apply These Terms to Your New Programs
  If you develop a new program, and you want it to be of the greatest
 possible use to the public, the best way to achieve this is to make it
 free software which everyone can redistribute and change under these terms.
  To do so, attach the following notices to the program.  It is safest
 to attach them to the start of each source file to most effectively
 state the exclusion of warranty; and each file should have at least
 the "copyright" line and a pointer to where the full notice is found.
    <one line to give the program's name and a brief idea of what it does.>
    Copyright (C) <year>  <name of author>
    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU Affero General Public License for more details.
    You should have received a copy of the GNU Affero General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
 Also add information on how to contact you by electronic and paper mail.
  If your software can interact with users remotely through a computer
 network, you should also make sure that it provides a way for users to
 get its source.  For example, if your program is a web application, its
 interface could display a "Source" link that leads users to an archive
 of the code.  There are many ways you could offer source, and different
 solutions will be better for different programs; see section 13 for the
 specific requirements.
  You should also get your employer (if you work as a programmer) or school,
 if any, to sign a "copyright disclaimer" for the program, if necessary.
 For more information on this, and how to apply and follow the GNU AGPL, see
 <https://www.gnu.org/licenses/>.
--- a/README.md
+++ b/README.md
@ -1,114 +1,60 @@
 # Cinny
 <p>
    <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>
-A Matrix client focusing primarily on simple, elegant and secure interface. The main goal is to have an instant messaging application that is easy on people and has a modern touch.
+## Table of Contents
- [Roadmap](https://github.com/ajbura/cinny/projects/11)
+
 - [About](#about)
 - [Getting Started](https://cinny.in)
 - [Contributing](./CONTRIBUTING.md)
-<img align="center" src="https://raw.githubusercontent.com/cinnyapp/cinny-site/main/assets/preview2-light.png" height="380">
+## About <a name = "about"></a>
-## Getting started
+Cinny is a [Matrix](https://matrix.org) client focusing primarily on simple, elegant and secure interface.
 Web app is available at https://app.cinny.in and gets updated on each new release. The `dev` branch is continuously deployed at https://dev.cinny.in but keep in mind that it could have things broken.
-You can also download our desktop app from [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).
+![preview](https://github.com/ajbura/cinny-site/blob/master/assets/preview-light.png)
-To host Cinny on your own, download tarball of the app from [GitHub release](https://github.com/cinnyapp/cinny/releases/latest).
+## Building and Running
 You can serve the application with a webserver of your choice by simply copying `dist/` directory to the webroot. 
 To set default Homeserver on login and register page, place a customized [`config.json`](config.json) in webroot of your choice.
-Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by:
+### Running pre-compiled
 ```
 docker pull ajbura/cinny
 ```
 or [ghcr image](https://github.com/cinnyapp/cinny/pkgs/container/cinny) by:
 ```
 docker pull ghcr.io/cinnyapp/cinny:latest
 ```
-<details>
+A tarball of pre-compiled version of the app is provided with each [release](https://github.com/ajbura/cinny/releases).
-<summary>PGP Public Key to verify tarball</summary>
+You can serve the application with a webserver of your choosing by simply copying `dist/` directory to the webroot.
-```
+### Building from source
 -----BEGIN PGP PUBLIC KEY BLOCK-----
-mQGNBGJw/g0BDAC8qQeLqDMzYzfPyOmRlHVEoguVTo+eo1aVdQH2X7OELdjjBlyj
+Execute the following commands to compile the app from its source code:
 6d6c1adv/uF2g83NNMoQY7GEeHjRnXE4m8kYSaarb840pxrYUagDc0dAbJOGaCBY
 FKTo7U1Kvg0vdiaRuus0pvc1NVdXSxRNQbFXBSwduD+zn66TI3HfcEHNN62FG1cE
 K1jWDwLAU0P3kKmj8+CAc3h9ZklPu0k/+t5bf/LJkvdBJAUzGZpehbPL5f3u3BZ0
 leZLIrR8uV7PiV5jKFahxlKR5KQHld8qQm+qVhYbUzpuMBGmh419I6UvTzxuRcvU
 Frn9ttCEzV55Y+so4X2e4ZnB+5gOnNw+ecifGVdj/+UyWnqvqqDvLrEjjK890nLb
 Pil4siecNMEpiwAN6WSmKpWaCwQAHEGDVeZCc/kT0iYfj5FBcsTVqWiO6eaxkUlm
 jnulqWqRrlB8CJQQvih/g//uSEBdzIibo+ro+3Jpe120U/XVUH62i9HoRQEm6ADG
 4zS5hIq4xyA8fL8AEQEAAbQdQ2lubnlBcHAgPGNpbm55YXBwQGdtYWlsLmNvbT6J
 AdQEEwEIAD4WIQSRri2MHidaaZv+vvuUMwx6UK/M8wUCYnD+DQIbAwUJA8JnAAUL
 CQgHAgYVCgkICwIEFgIDAQIeAQIXgAAKCRCUMwx6UK/M88ApC/9HAdbum1lYBC0s
 1k7GwP2A7B4sQtBWjy771BzybWlHeaeG+BGJwg4YiuowXZMm5dubFJFoI/CfeY07
 B5aK40/bmT6Xcfkp0VA74c1wUpubBUEJN7tH5HG/OGd9BKeq9E/HHtVaJLVT1k3w
 Rhv9VuHO6nR30EEp7IDthftotl5S4lio3+W0pKk4TAKV8vjaCNp3y/lAHzoP1BU9
 bUSao+7GXVeArKBjuqxN+t1uuiaxPH4L0oe2pMVjTig04zGJM5fTVoly859MEcC/
 R7Taq9RWGfXFmgCXy8Dviz3eOD90vqpCzhX4+ypK0cp2X0UwhMH4dpKUzExmdbhl
 eBO5GcHB4VxvloRBNf9/Lr7YOTgWejMUw+MlhZE2RE8unfW1LnM/cjL4dhXzO/XB
 FUHHNq8d6d4e02rfWqw7mZo2/NVJgFRcvzw2rgx7w7CKtCNwF4lNjUetB2waZzDb
 fAE0kwhK4Iuwvy12JOBzL0Yy9MxANtwUryr/LQz9AmdT4Rwnp0S5AY0EYnD+DQEM
 ANOu/d6ZMF8bW+Df9RDCUQKytbaZfa+ZbIHBus7whCD/SQMOhPKntv3HX7SmMCs+
 5i27kJMu4YN623JCS7hdCoXVO1R5kXCEcneW/rPBMDutaM472YvIWMIqK9Wwl5+0
 Piu2N+uTkKhe9uS2u7eN+Khef3d7xfjGRxoppM+xI9dZO+jhYiy8LuC0oBohTjJq
 QPqfGDpowBwRkkOsGz/XVcesJ1Pzg4bKivTS9kZjZSyT9RRSY8As0sVUN57AwYul
 s1+eh00n/tVpi2Jj9pCm7S0csSXvXj8v2OTdK1jt4YjpzR0/rwh4+/xlOjDjZEqH
 vMPhpzpbgnwkxZ3X8BFne9dJ3maC5zQ3LAeCP5m1W0hXzagYhfyjo74slJgD1O8c
 LDf2Oxc5MyM8Y/UK497zfqSPfgT3NhQmhHzk83DjXw3I6Z3A3U+Jp61w0eBRI1nx
 H1UIG+gldcAKUTcfwL0lghoT3nmi9JAbvek0Smhz00Bbo8/dx8vwQRxDUxlt7Exx
 NwARAQABiQG8BBgBCAAmFiEEka4tjB4nWmmb/r77lDMMelCvzPMFAmJw/g0CGwwF
 CQPCZwAACgkQlDMMelCvzPPT7Qv8CjXUEhphZFLwpBfaNOzRNfIXJST9aDit8zHW
 IMmfSpORVfpU71IyIB3o/DtTUPwCeb8nvNJs7aj1QT1ZUSsqFa3yY2S16V/g8+WN
 sHca6oDSc1J+A0eEpEL1HbG1b5OPBC0AeGvvMOoqrbqThBZVKg1Jc/0SD3cvKElv
 aHeCZCNNmfcZ2Ib4HYhhc8//ZtC9TeI+5J/YesctY1M12EoWMxMrc27Y3P5Pa0BI
 Uc3qxWggPq1vOFYsEshL0w99HyJvREJmQA7Fa0crV+rICxyrBxJeNnEvjH/0KCBU
 LCkEonLY1QwrxyeeV3VpxGE3zHHE3azOdAjTIoAdzX5f/qhbgYlM68GL2f8xdDkp
 O0igSGHWhO4F8BfmE7IOTx1Bi7daczp8nCFxh73cKpKB0RUsd9xxrqYpovjmEAlo
 w7aHpdzt64NQcsrbK10OSVDF3gFa9Vz20/NQvdUrp8jGmAb/8+nYqI94Jsc28H36
 UeGsouhyuITLwEhScounZDqop+Dx
 =Zg+6
 -----END PGP PUBLIC KEY BLOCK-----
 ```
 </details>
 ## Local development
 > 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 Hydrogen LTS (v18).
 Execute the following commands to start a development server:
 ```sh
 npm ci # Installs all dependencies
 npm start # Serve a development version
 ```
 To build the app:
 ```sh
 npm install # Installs all dependencies
 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`.
 ### Running with Docker
 This repository includes a Dockerfile, which builds the application from source and serves it with Nginx on port 80. To
 use this locally, you can build the container like so:
 ```
 docker build -t cinny:latest .
 ```
 You can then run the container you've built with a command similar to this:
 ```
 docker run -p 8080:80 cinny:latest
 ```
-This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by navigating to `http://localhost:8080`.
+This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by
 navigating to `http://localhost:8080`.
 Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by `docker pull ajbura/cinny`.
 ## License
 Copyright (c) 2021 Ajay Bura (ajbura) and other contributors
 Code licensed under the MIT License: <http://opensource.org/licenses/MIT>
 Graphics licensed under CC-BY 4.0: <https://creativecommons.org/licenses/by/4.0/>
--- a/4
+++ b/4
@ -1,4 +0,0 @@
 {
  "schemaVersion": 2,
  "dockerfilePath": "./Dockerfile"
 }
--- a/config.json
+++ b/config.json
@ -1,11 +0,0 @@
 {
  "defaultHomeserver": 3,
  "homeserverList": [
    "converser.eu",
    "envs.net",
    "halogen.city",
    "matrix.org",
    "mozilla.org"
  ],
  "allowCustomHomeservers": true
 }
--- a/index.html
+++ b/index.html
@ -1,107 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cinny</title>
    <meta name="name" content="Cinny" />
    <meta name="author" content="Ajay Bura" />
    <meta
      name="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="keywords"
      content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element"
    />
    <meta property="og:title" content="Cinny" />
    <meta property="og:url" content="https://cinny.in" />
    <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="./public/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="./public/res/apple/apple-touch-icon-57x57.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="60x60"
      href="./public/res/apple/apple-touch-icon-60x60.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="72x72"
      href="./public/res/apple/apple-touch-icon-72x72.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="76x76"
      href="./public/res/apple/apple-touch-icon-76x76.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="114x114"
      href="./public/res/apple/apple-touch-icon-114x114.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="120x120"
      href="./public/res/apple/apple-touch-icon-120x120.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="144x144"
      href="./public/res/apple/apple-touch-icon-144x144.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="152x152"
      href="./public/res/apple/apple-touch-icon-152x152.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="167x167"
      href="./public/res/apple/apple-touch-icon-167x167.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="./public/res/apple/apple-touch-icon-180x180.png"
    />
  </head>
  <body id="appBody">
    <script>
      window.global ||= window;
    </script>
    <div id="root"></div>
    <audio id="notificationSound">
      <source src="./public/sound/notification.ogg" type="audio/ogg" />
    </audio>
    <audio id="inviteSound">
      <source src="./public/sound/invite.ogg" type="audio/ogg" />
    </audio>
    <script type="module" src="./src/index.tsx"></script>
  </body>
 </html>
--- a/olm.wasm
+++ b/olm.wasm
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,79 +1,79 @@
 {
  "name": "cinny",
-  "version": "2.2.6",
+  "version": "1.4.0",
  "description": "Yet another matrix client",
  "main": "index.js",
  "engines": {
-    "node": ">=16.0.0"
+    "npm": ">=6.14.11",
    "node": ">=14.6.0"
  },
  "scripts": {
-    "start": "vite",
+    "start": "webpack serve --config ./webpack.dev.js --open",
-    "build": "vite build",
+    "build": "webpack --config ./webpack.prod.js"
    "lint": "npm run check:eslint && npm run check:prettier",
    "check:eslint": "eslint src/*",
    "check:prettier": "prettier --check .",
    "fix:prettier": "prettier --write .",
    "typecheck": "tsc --noEmit"
  },
  "keywords": [],
  "author": "Ajay Bura",
-  "license": "AGPL-3.0-only",
+  "license": "MIT",
  "dependencies": {
-    "@fontsource/inter": "4.5.14",
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.4.tgz",
-    "@fontsource/roboto": "4.5.8",
+    "@tippyjs/react": "^4.2.5",
-    "@khanacademy/simple-markdown": "0.8.6",
+    "babel-polyfill": "^6.26.0",
-    "@matrix-org/olm": "3.2.14",
+    "browser-encrypt-attachment": "^0.3.0",
-    "@tippyjs/react": "4.2.6",
+    "dateformat": "^4.5.1",
-    "@types/flux": "3.1.11",
+    "emojibase-data": "^6.2.0",
-    "blurhash": "2.0.4",
+    "flux": "^4.0.1",
-    "browser-encrypt-attachment": "0.3.0",
+    "html-react-parser": "^1.2.7",
-    "dateformat": "5.0.3",
+    "linkifyjs": "^3.0.0-beta.3",
-    "emojibase-data": "7.0.1",
+    "matrix-js-sdk": "^12.4.1",
-    "file-saver": "2.0.5",
+    "micromark": "^3.0.3",
-    "flux": "4.0.3",
+    "micromark-extension-gfm": "^1.0.0",
-    "formik": "2.2.9",
+    "prop-types": "^15.7.2",
-    "html-react-parser": "3.0.4",
+    "react": "^17.0.2",
-    "katex": "0.16.4",
+    "react-autosize-textarea": "^7.1.0",
-    "linkify-html": "4.0.2",
+    "react-dom": "^17.0.2",
-    "linkifyjs": "4.0.2",
+    "react-google-recaptcha": "^2.1.0",
-    "matrix-js-sdk": "24.0.0",
+    "react-markdown": "^6.0.1",
-    "prop-types": "15.8.1",
+    "react-modal": "^3.13.1",
-    "react": "17.0.2",
+    "react-router-dom": "^5.2.0",
-    "react-autosize-textarea": "7.1.0",
+    "react-syntax-highlighter": "^15.4.3",
-    "react-blurhash": "0.2.0",
+    "remark-gfm": "^1.0.0",
-    "react-dnd": "15.1.2",
+    "tippy.js": "^6.3.1",
-    "react-dnd-html5-backend": "15.1.3",
+    "twemoji": "^13.1.0"
    "react-dom": "17.0.2",
    "react-google-recaptcha": "2.1.0",
    "react-modal": "3.16.1",
    "sanitize-html": "2.8.0",
    "tippy.js": "6.3.7",
    "twemoji": "14.0.2"
  },
  "devDependencies": {
-    "@esbuild-plugins/node-globals-polyfill": "0.2.3",
+    "@babel/core": "^7.15.5",
-    "@rollup/plugin-inject": "5.0.3",
+    "@babel/preset-env": "^7.13.12",
-    "@rollup/plugin-wasm": "6.1.1",
+    "@babel/preset-react": "^7.13.13",
-    "@types/dateformat": "5.0.0",
+    "assert": "^2.0.0",
-    "@types/node": "18.11.18",
+    "babel-loader": "^8.2.2",
-    "@types/react": "18.0.26",
+    "browserify-fs": "^1.0.0",
-    "@types/react-dom": "18.0.9",
+    "buffer": "^6.0.3",
-    "@typescript-eslint/eslint-plugin": "5.46.1",
+    "clean-webpack-plugin": "^3.0.0",
-    "@typescript-eslint/parser": "5.46.1",
+    "copy-webpack-plugin": "^9.0.1",
-    "@vitejs/plugin-react": "3.0.0",
+    "crypto-browserify": "^3.12.0",
-    "buffer": "6.0.3",
+    "css-loader": "^5.2.0",
-    "eslint": "8.29.0",
+    "css-minimizer-webpack-plugin": "^1.3.0",
-    "eslint-config-airbnb": "19.0.4",
+    "eslint": "^7.23.0",
-    "eslint-config-prettier": "8.5.0",
+    "eslint-config-airbnb": "^18.2.1",
-    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "6.6.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "7.31.11",
+    "eslint-plugin-react": "^7.23.1",
-    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
-    "mini-svg-data-uri": "1.4.4",
+    "favicons": "^6.2.1",
-    "prettier": "2.8.1",
+    "favicons-webpack-plugin": "^5.0.2",
-    "sass": "1.56.2",
+    "file-loader": "^6.2.0",
-    "typescript": "4.9.4",
+    "html-loader": "^2.1.2",
-    "vite": "4.0.1",
+    "html-webpack-plugin": "^5.3.1",
-    "vite-plugin-static-copy": "0.13.0"
+    "mini-css-extract-plugin": "^1.4.0",
    "path-browserify": "^1.0.1",
    "sass": "^1.32.8",
    "sass-loader": "^11.0.1",
    "stream-browserify": "^3.0.0",
    "style-loader": "^2.0.0",
    "util": "^0.12.4",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-merge": "^5.7.3"
  }
 }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -0,0 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://api.fontshare.com/css?f[]=supreme@300,301,400,401,500,501,700,701&display=swap" rel="stylesheet">
    <title>Cinny</title>
    <meta name="name"        content="Cinny">
    <meta name="author"      content="Ajay Bura">
    <meta name="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="keywords"    content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element">
    <meta property="og:title"       content="Cinny">
    <meta property="og:url"         content="https://cinny.in">
    <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">
 </head>
 <body id="appBody">
    <div id="root"></div>
 </body>
 </html>
--- a/public/manifest.json
+++ b/public/manifest.json
@ -1,59 +0,0 @@
 {
  "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": "/public/android/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "/public/android/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/public/android/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/public/android/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/public/android/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/public/android/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/public/android/android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/public/android/android-chrome-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/public/android/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
 }
--- a/public/res/android/android-chrome-144x144.png
+++ b/public/res/android/android-chrome-144x144.png
--- a/public/res/android/android-chrome-192x192.png
+++ b/public/res/android/android-chrome-192x192.png
--- a/public/res/android/android-chrome-256x256.png
+++ b/public/res/android/android-chrome-256x256.png
--- a/public/res/android/android-chrome-36x36.png
+++ b/public/res/android/android-chrome-36x36.png
--- a/public/res/android/android-chrome-384x384.png
+++ b/public/res/android/android-chrome-384x384.png
--- a/public/res/android/android-chrome-48x48.png
+++ b/public/res/android/android-chrome-48x48.png
--- a/public/res/android/android-chrome-512x512.png
+++ b/public/res/android/android-chrome-512x512.png
--- a/public/res/android/android-chrome-72x72.png
+++ b/public/res/android/android-chrome-72x72.png
--- a/public/res/android/android-chrome-96x96.png
+++ b/public/res/android/android-chrome-96x96.png
--- a/public/res/apple/apple-touch-icon-114x114.png
+++ b/public/res/apple/apple-touch-icon-114x114.png
--- a/public/res/apple/apple-touch-icon-120x120.png
+++ b/public/res/apple/apple-touch-icon-120x120.png
--- a/public/res/apple/apple-touch-icon-144x144.png
+++ b/public/res/apple/apple-touch-icon-144x144.png
--- a/public/res/apple/apple-touch-icon-152x152.png
+++ b/public/res/apple/apple-touch-icon-152x152.png
--- a/public/res/apple/apple-touch-icon-167x167.png
+++ b/public/res/apple/apple-touch-icon-167x167.png
--- a/public/res/apple/apple-touch-icon-180x180.png
+++ b/public/res/apple/apple-touch-icon-180x180.png
--- a/public/res/apple/apple-touch-icon-57x57.png
+++ b/public/res/apple/apple-touch-icon-57x57.png
--- a/public/res/apple/apple-touch-icon-60x60.png
+++ b/public/res/apple/apple-touch-icon-60x60.png
--- a/public/res/apple/apple-touch-icon-72x72.png
+++ b/public/res/apple/apple-touch-icon-72x72.png
--- a/public/res/apple/apple-touch-icon-76x76.png
+++ b/public/res/apple/apple-touch-icon-76x76.png
--- a/public/res/ic/filled/category.svg
+++ b/public/res/ic/filled/category.svg
@ -1,18 +0,0 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
 <g>
 	<path fill="#231F20" d="M9,11H5c-1.1,0-2-0.9-2-2V5c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2v4C11,10.1,10.1,11,9,11z"/>
 </g>
 <g>
 	<path fill="#231F20" d="M19,11h-4c-1.1,0-2-0.9-2-2V5c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2v4C21,10.1,20.1,11,19,11z"/>
 </g>
 <g>
 	<path fill="#231F20" d="M9,21H5c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2v4C11,20.1,10.1,21,9,21z"/>
 </g>
 <g>
 	<path fill="#231F20" d="M19,21h-4c-1.1,0-2-0.9-2-2v-4c0-1.1,0.9-2,2-2h4c1.1,0,2,0.9,2,2v4C21,20.1,20.1,21,19,21z"/>
 </g>
 </svg>
--- a/public/res/ic/outlined/add-pin.svg
+++ b/public/res/ic/outlined/add-pin.svg
@ -1,11 +0,0 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
 <g>
 	<path d="M13.8,4.7l0.7,0.7l-3.4,3.4L7.7,10l-1-1l-1.4,1.4l3.5,3.5l-5.7,5.7L4.6,21l5.7-5.7l3.5,3.5l1.4-1.4l-1-1l1.1-3.4l3.4-3.4
 		l0.7,0.7L20.9,9l-5.7-5.7L13.8,4.7z M13.7,12l-1,2.9l-3.4-3.4l2.9-1l3.7-3.7l1.4,1.4L13.7,12z"/>
 	<polygon points="10,3.3 7.8,3.3 7.8,1 6.3,1 6.3,3.3 4,3.3 4,4.8 6.3,4.8 6.3,7 7.8,7 7.8,4.8 10,4.8 	"/>
 </g>
 </svg>
--- a/public/res/ic/outlined/category.svg
+++ b/public/res/ic/outlined/category.svg
@ -1,15 +0,0 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
 <g>
 	<path fill="#221F1F" d="M9,5v4H5V5H9 M9,3H5C3.9,3,3,3.9,3,5v4c0,1.1,0.9,2,2,2h4c1.1,0,2-0.9,2-2V5C11,3.9,10.1,3,9,3L9,3z"/>
 	<path fill="#221F1F" d="M19,5v4h-4V5H19 M19,3h-4c-1.1,0-2,0.9-2,2v4c0,1.1,0.9,2,2,2h4c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3L19,3
 		z"/>
 	<path fill="#221F1F" d="M9,15v4H5v-4H9 M9,13H5c-1.1,0-2,0.9-2,2v4c0,1.1,0.9,2,2,2h4c1.1,0,2-0.9,2-2v-4C11,13.9,10.1,13,9,13
 		L9,13z"/>
 	<path fill="#221F1F" d="M19,15v4h-4v-4H19 M19,13h-4c-1.1,0-2,0.9-2,2v4c0,1.1,0.9,2,2,2h4c1.1,0,2-0.9,2-2v-4
 		C21,13.9,20.1,13,19,13L19,13z"/>
 </g>
 </svg>
--- a/public/res/ic/outlined/check.svg
+++ b/public/res/ic/outlined/check.svg
@ -1,7 +0,0 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
 <polygon points="9.5,14.1 6,10.6 4.6,12 8.1,15.5 9.5,16.9 19.4,7 18,5.6 "/>
 </svg>
--- a/public/res/ic/outlined/external.svg
+++ b/public/res/ic/outlined/external.svg
@ -1,4 +1,12 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<?xml version="1.0" encoding="utf-8"?>
-<path d="M14 3V5H17.8L12.9 9.9L14.3 11.3L19 6.6V10.2H21V3H14Z" fill="black"/>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<path d="M5 5H10V3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V14.2H19V19H5V5Z" fill="black"/>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
 <g>
 	<polygon points="14,3 14,5 17.8,5 12.9,9.9 14.3,11.3 19,6.6 19,10.2 21,10.2 21,3 	"/>
 	<path d="M3,10.2h2V5h5V3H5C3.9,3,3,3.9,3,5V10.2z"/>
 	<path d="M5,14.2H3V19c0,1.1,0.9,2,2,2h5v-2H5V14.2z"/>
 	<path d="M19,19h-5v2h5c1.1,0,2-0.9,2-2v-4.8h-2V19z"/>
 </g>
 </svg>
--- a/public/res/ic/outlined/eye-blind.svg
+++ b/public/res/ic/outlined/eye-blind.svg
@ -1,4 +0,0 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M4.92896 3.51471L3.51474 4.92892L5.97515 7.38933C4.46742 8.5776 3.32116 9.93994 2.7 10.8C2.1 11.5 2.1 12.5 2.7 13.2C4 15 7.6 19 12 19C13.5709 19 15.0398 18.4902 16.3384 17.7526L19.0711 20.4853L20.4853 19.0711L4.92896 3.51471ZM4.2 12C4.68291 11.3561 5.85678 9.9637 7.39721 8.81139L9.29238 10.7066C9.10496 11.0982 9 11.5368 9 12C9 13.6569 10.3431 15 12 15C12.4632 15 12.9018 14.895 13.2934 14.7076L14.8573 16.2715C13.9566 16.7128 12.9896 17 12 17C8.4 17 5.1 13.2 4.2 12Z" fill="black"/>
 <path d="M9.6226 5.37995L11.2906 7.04797C11.5254 7.01661 11.762 7 12 7C15.6 7 18.9 10.8 19.8 12C19.493 12.4094 18.9066 13.1213 18.1244 13.8817L19.5194 15.2768C20.2973 14.4974 20.9049 13.7471 21.3 13.2C21.9 12.5 21.9 11.5 21.3 10.8C20 9 16.4 5 12 5C11.1762 5 10.3805 5.14021 9.6226 5.37995Z" fill="black"/>
 </svg>
--- a/public/res/ic/outlined/eye.svg
+++ b/public/res/ic/outlined/eye.svg
@ -1,4 +1,13 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<?xml version="1.0" encoding="utf-8"?>
-<path d="M12 19C7.6 19 4 15 2.7 13.2C2.1 12.5 2.1 11.5 2.7 10.8C4 9 7.6 5 12 5C16.4 5 20 9 21.3 10.8C21.9 11.5 21.9 12.5 21.3 13.2C20 15 16.4 19 12 19ZM12 7C8.4 7 5.1 10.8 4.2 12C5.1 13.2 8.4 17 12 17C15.6 17 18.9 13.2 19.8 12C18.9 10.8 15.6 7 12 7Z" fill="black"/>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" fill="black"/>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
 <g>
 	<g>
 		<path d="M12,19c-4.4,0-8-4-9.3-5.8c-0.6-0.7-0.6-1.7,0-2.4C4,9,7.6,5,12,5s8,4,9.3,5.8c0.6,0.7,0.6,1.7,0,2.4C20,15,16.4,19,12,19
 			z M12,7c-3.6,0-6.9,3.8-7.8,5c0.9,1.2,4.2,5,7.8,5s6.9-3.8,7.8-5C18.9,10.8,15.6,7,12,7z"/>
 	</g>
 	<circle cx="12" cy="12" r="3"/>
 </g>
 </svg>
--- a/public/res/ic/outlined/hash-globe.svg
+++ b/public/res/ic/outlined/hash-globe.svg
@ -1,14 +0,0 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
 <g>
 	<polygon points="16,12 14,12 14,14 10,14 10,10 12,10 12,8 10,8 10,3 8,3 8,8 3,8 3,10 8,10 8,14 3,14 3,16 8,16 8,21 10,21 10,16 
 		14,16 14,21 16,21 16,16 21,16 21,14 16,14 	"/>
 	<path d="M18.5,1C16,1,14,3,14,5.5s2,4.5,4.5,4.5S23,8,23,5.5S21,1,18.5,1z M17.5,7C17.5,7,17.5,7,17.5,7c-0.2-0.1-0.3-0.1-0.3-0.2
 		c-0.6-0.5-1.7-1.1-1.8-2c-0.1-0.7,0.8-1.6,1.3-2c0.8-0.6,2.3-1.1,3.2-0.5c0.6,0.4-1.2,1-1.4,1.3c-0.3,0.4-0.3,0.9-0.3,1.4
 		c0,0.5,0.1,1.2-0.2,1.6C17.9,6.9,17.7,7,17.5,7z M20.8,7.9c-0.4,0.3-0.9,0.2-1.3,0.5c-0.1,0.1-0.2,0.2-0.3,0.2
 		c-0.2,0.1-0.5-0.1-0.5-0.3c-0.3-0.8,0.3-1.2,0.9-1.3c0.3,0,0.7,0,1,0c0.2,0,0.4,0.1,0.4,0.3C21.1,7.5,20.9,7.7,20.8,7.9z"/>
 </g>
 </svg>
--- a/public/res/ic/outlined/horizontal-menu.svg
+++ b/public/res/ic/outlined/horizontal-menu.svg
@ -1,11 +0,0 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
 <g>
 	<circle cx="5" cy="12" r="2"/>
 	<circle cx="12" cy="12" r="2"/>
 	<circle cx="19" cy="12" r="2"/>
 </g>
 </svg>
--- a/public/res/ic/outlined/message-unread.svg
+++ b/public/res/ic/outlined/message-unread.svg
@ -1,15 +0,0 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
 <g>
 	<rect x="7" y="12" fill="#010101" width="10" height="2"/>
 	<g>
 		<circle fill="#010101" cx="19" cy="6" r="4"/>
 	</g>
 	<path fill="#010101" d="M13.3,8H7v2h7.5C14,9.4,13.6,8.7,13.3,8z"/>
 	<path fill="#010101" d="M19,12v5.6l-2.4-1.3L16.1,16h-0.5H5V6h8c0-0.7,0.1-1.4,0.3-2H4.8C3.8,4,3,4.9,3,6v10c0,1.1,0.8,2,1.8,2
 		h10.8l5.4,3v-9.3C20.4,11.9,19.7,12,19,12z"/>
 </g>
 </svg>
--- a/public/res/ic/outlined/message.svg
+++ b/public/res/ic/outlined/message.svg
@ -1,12 +0,0 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
 <g>
 	<path fill="#010101" d="M19,6v11.6l-2.4-1.3L16.1,16h-0.5H5V6H19 M19.2,4H4.8C3.8,4,3,4.9,3,6v10c0,1.1,0.8,2,1.8,2h10.8l5.4,3V6
 		C21,4.9,20.2,4,19.2,4L19.2,4z"/>
 	<rect x="7" y="8" fill="#010101" width="10" height="2"/>
 	<rect x="7" y="12" fill="#010101" width="10" height="2"/>
 </g>
 </svg>
--- a/public/res/ic/outlined/recent-clock.svg
+++ b/public/res/ic/outlined/recent-clock.svg
@ -1,17 +0,0 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
 <g>
 	<polygon points="11,7 11,13 14.5,16.5 15.9,15.1 13,12.2 13,7 	"/>
 	<path d="M12,2C8.7,2,5.8,3.6,4,6V4H2.5v5h5V7.5H5.4C6.9,5.4,9.3,4,12,4c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8H2
 		c0,5.5,4.5,10,10,10s10-4.5,10-10S17.5,2,12,2z"/>
 </g>
 <g>
 	<polygon points="49,44 49,50 53.2,54.2 54.7,52.8 51,49.2 51,44 	"/>
 	<polygon points="45.5,47 40.5,47 40.5,42 42,42 42,45.5 45.5,45.5 	"/>
 	<path d="M50,40c-4.1,0-7.6,2.5-9.2,6h2.2c1.4-2.4,4-4,6.9-4c4.4,0,8,3.6,8,8s-3.6,8-8,8s-8-3.6-8-8h-2c0,5.5,4.5,10,10,10
 		s10-4.5,10-10S55.5,40,50,40z"/>
 </g>
 </svg>
--- a/public/res/ic/outlined/shield-user.svg
+++ b/public/res/ic/outlined/shield-user.svg
@ -1,11 +0,0 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
 <g>
 	<path d="M12,2L3,6v7c0,5,4,9,9,9c5,0,9-4,9-9V6L12,2z M19,13c0,3.9-3.1,7-7,7s-7-3.1-7-7V7.3l7-3.1l7,3.1V13z"/>
 	<circle cx="12" cy="9" r="2"/>
 	<path d="M15,16H9v-1c0-1.7,1.3-3,3-3h0c1.7,0,3,1.3,3,3V16z"/>
 </g>
 </svg>
--- a/public/res/ic/outlined/space-globe.svg
+++ b/public/res/ic/outlined/space-globe.svg
@ -1,15 +0,0 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
 <g>
 	<path d="M15.4,13.7L14,14l-0.2,1.4c-0.4,2.8-1.3,4.2-1.7,4.6c-0.4-0.3-1.3-1.8-1.7-4.6L10,14l-1.4-0.2c-2.8-0.4-4.2-1.3-4.6-1.7
 		c0.3-0.4,1.8-1.3,4.6-1.7L10,10l0.2-1.4c0.4-2.8,1.3-4.2,1.7-4.6V2c-1.7,0-3.1,2.6-3.7,6.3C4.6,8.9,2,10.3,2,12s2.6,3.1,6.3,3.7
 		c0.6,3.7,2,6.3,3.7,6.3s3.1-2.6,3.7-6.3c3.7-0.6,6.3-2,6.3-3.7h-2.1C19.6,12.4,18.2,13.3,15.4,13.7z"/>
 	<path d="M18.5,1C16,1,14,3,14,5.5s2,4.5,4.5,4.5S23,8,23,5.5S21,1,18.5,1z M17.5,7C17.5,7,17.5,7,17.5,7c-0.2-0.1-0.3-0.1-0.3-0.2
 		c-0.6-0.5-1.7-1.1-1.8-2c-0.1-0.7,0.8-1.6,1.3-2c0.8-0.6,2.3-1.1,3.2-0.5c0.6,0.4-1.2,1-1.4,1.3c-0.3,0.4-0.3,0.9-0.3,1.4
 		c0,0.5,0.1,1.2-0.2,1.6C17.9,6.9,17.7,7,17.5,7z M20.8,7.9c-0.4,0.3-0.9,0.2-1.3,0.5c-0.1,0.1-0.2,0.2-0.3,0.2
 		c-0.2,0.1-0.5-0.1-0.5-0.3c-0.3-0.8,0.3-1.2,0.9-1.3c0.3,0,0.7,0,1,0c0.2,0,0.4,0.1,0.4,0.3C21.1,7.5,20.9,7.7,20.8,7.9z"/>
 </g>
 </svg>
--- a/public/res/ic/outlined/space-plus.svg
+++ b/public/res/ic/outlined/space-plus.svg
@ -1,12 +0,0 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
 <g>
 	<path d="M15.4,13.7L14,14l-0.2,1.4c-0.4,2.8-1.3,4.2-1.7,4.6c-0.4-0.3-1.3-1.8-1.7-4.6L10,14l-1.4-0.2c-2.8-0.4-4.2-1.3-4.6-1.7
 		c0.3-0.4,1.8-1.3,4.6-1.7L10,10l0.2-1.4c0.4-2.8,1.3-4.2,1.7-4.6V2c-1.7,0-3.1,2.6-3.7,6.3C4.6,8.9,2,10.3,2,12s2.6,3.1,6.3,3.7
 		c0.6,3.7,2,6.3,3.7,6.3s3.1-2.6,3.7-6.3c3.7-0.6,6.3-2,6.3-3.7h-2.1C19.6,12.4,18.2,13.3,15.4,13.7z"/>
  <path d="M19,0c-2.8,0-5,2.2-5,5s2.2,5,5,5s5-2.2,5-5S21.8,0,19,0z M22,5.8h-2.3V8h-1.5V5.8H16V4.3h2.3V2h1.5v2.3H22V5.8z"/>
 </g>
 </svg>
--- a/public/res/ic/outlined/sticker.svg
+++ b/public/res/ic/outlined/sticker.svg
@ -1,4 +0,0 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M16 3L21 8V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5C3 3.89543 3.89543 3 5 3H16ZM19 9H17C15.8954 9 15 8.10457 15 7V5H5V19H19V9Z" fill="black"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12H17C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12H9Z" fill="black"/>
 </svg>
--- a/public/res/svg/cinny-highlight.svg
+++ b/public/res/svg/cinny-highlight.svg
@ -1,13 +0,0 @@
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_2707_1961)">
 <path d="M10.5867 17.3522C10.0727 17.4492 9.54226 17.5 9 17.5C4.30558 17.5 0.5 13.6944 0.5 9C0.5 4.30558 4.30558 0.5 9 0.5C13.6944 0.5 17.5 4.30558 17.5 9C17.5 9.54226 17.4492 10.0727 17.3522 10.5867C16.6511 10.2123 15.8503 10 15 10C12.2386 10 10 12.2386 10 15C10 15.8503 10.2123 16.6511 10.5867 17.3522Z" fill="white"/>
 <path d="M10 6.39999C10 6.67614 9.77614 6.89999 9.5 6.89999C9.22386 6.89999 9 6.67614 9 6.39999C9 6.12385 9.22386 5.89999 9.5 5.89999C9.77614 5.89999 10 6.12385 10 6.39999Z" fill="black"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C4 0 0 4 0 9C0 14 4 18 9 18C9.63967 18 10.263 17.9345 10.8636 17.8099C10.3186 17.0091 10 16.0417 10 15C10 12.2386 12.2386 10 15 10C16.0417 10 17.0091 10.3186 17.8099 10.8636C17.9345 10.263 18 9.63967 18 9C18 4 14 0 9 0ZM1.2 10.8L4.7 8.5V8.2C4.7 6.4 6 5 7.8 4.8H8.2C9.4 4.8 10.5 5.4 11.1 6.4C11.4 6.3 11.7 6.3 12 6.3C12.4 6.3 12.8 6.3 13.2 6.4C13.9 6.6 14.6 6.9 15.2 7.3C14.6 7.1 14 7 13.3 7C12.1 7 11.1 7.4 10.4 8.4C9.7 9.3 9.3 10.4 9.3 11.6C9.3 13.1 8.9 14.5 8 15.8C7.93744 15.8834 7.87923 15.9625 7.82356 16.0381C7.6123 16.325 7.43739 16.5626 7.2 16.8C4.2 16.1 1.9 13.8 1.2 10.8Z" fill="black"/>
 <path d="M18 15C18 16.6569 16.6569 18 15 18C13.3431 18 12 16.6569 12 15C12 13.3431 13.3431 12 15 12C16.6569 12 18 13.3431 18 15Z" fill="#45B83B"/>
 </g>
 <defs>
 <clipPath id="clip0_2707_1961">
 <rect width="18" height="18" fill="white"/>
 </clipPath>
 </defs>
 </svg>
--- a/public/res/svg/cinny-unread.svg
+++ b/public/res/svg/cinny-unread.svg
@ -1,13 +0,0 @@
 <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_2707_2015)">
 <path d="M10.5867 17.3522C10.0727 17.4492 9.54226 17.5 9 17.5C4.30558 17.5 0.5 13.6944 0.5 9C0.5 4.30558 4.30558 0.5 9 0.5C13.6944 0.5 17.5 4.30558 17.5 9C17.5 9.54226 17.4492 10.0727 17.3522 10.5867C16.6511 10.2123 15.8503 10 15 10C12.2386 10 10 12.2386 10 15C10 15.8503 10.2123 16.6511 10.5867 17.3522Z" fill="white"/>
 <path d="M10 6.39999C10 6.67614 9.77614 6.89999 9.5 6.89999C9.22386 6.89999 9 6.67614 9 6.39999C9 6.12385 9.22386 5.89999 9.5 5.89999C9.77614 5.89999 10 6.12385 10 6.39999Z" fill="black"/>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M9 0C4 0 0 4 0 9C0 14 4 18 9 18C9.63967 18 10.263 17.9345 10.8636 17.8099C10.3186 17.0091 10 16.0417 10 15C10 12.2386 12.2386 10 15 10C16.0417 10 17.0091 10.3186 17.8099 10.8636C17.9345 10.263 18 9.63967 18 9C18 4 14 0 9 0ZM1.2 10.8L4.7 8.5V8.2C4.7 6.4 6 5 7.8 4.8H8.2C9.4 4.8 10.5 5.4 11.1 6.4C11.4 6.3 11.7 6.3 12 6.3C12.4 6.3 12.8 6.3 13.2 6.4C13.9 6.6 14.6 6.9 15.2 7.3C14.6 7.1 14 7 13.3 7C12.1 7 11.1 7.4 10.4 8.4C9.7 9.3 9.3 10.4 9.3 11.6C9.3 13.1 8.9 14.5 8 15.8C7.93744 15.8834 7.87923 15.9625 7.82356 16.0381C7.6123 16.325 7.43739 16.5626 7.2 16.8C4.2 16.1 1.9 13.8 1.2 10.8Z" fill="black"/>
 <path d="M18 15C18 16.6569 16.6569 18 15 18C13.3431 18 12 16.6569 12 15C12 13.3431 13.3431 12 15 12C16.6569 12 18 13.3431 18 15Z" fill="#989898"/>
 </g>
 <defs>
 <clipPath id="clip0_2707_2015">
 <rect width="18" height="18" fill="white"/>
 </clipPath>
 </defs>
 </svg>
--- a/public/res/svg/image-broken.svg
+++ b/public/res/svg/image-broken.svg
@ -1,18 +0,0 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
 <g>
 	<g>
 		<polygon fill="#7F7F7F" points="20,7 20,5 18,5 18,7 16,7 16,5 18,5 18,3 16,3 16,2 3,2 3,22 11,22 11,20 19,12 21,12 21,7 		"/>
 		<polygon fill="#7F7F7F" points="19,16 21,16 21,22 15,22 15,20 19,20 		"/>
 	</g>
 	<polygon fill="#6FBEFF" points="19,9 14,9 14,4 5,4 5,20 11,20 13,20 13,18 15,18 15,16 17,16 17,14 19,14 	"/>
 	<polygon fill="#FFFFFF" points="7,10 12,10 12,8 10,8 10,7 8,7 8,8 7,8 	"/>
 	<g>
 		<rect x="17" y="18" fill="#00C72C" width="2" height="2"/>
 		<polygon fill="#00C72C" points="5,20 5,18 7,18 7,16 9,16 9,14 11,14 11,12 13,12 13,14 15,14 15,18 13,18 13,20 		"/>
 	</g>
 </g>
 </svg>
--- a/public/res/svg/matrix-logo.svg
+++ b/public/res/svg/matrix-logo.svg
@ -0,0 +1,49 @@
 <?xml version="1.0" encoding="utf-8"?>
 <!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14576)  -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 width="789.322px" height="336.807px" viewBox="0 0 789.322 336.807" enable-background="new 0 0 789.322 336.807"
 	 xml:space="preserve">
 <path d="M8.876,7.71v321.386h23.13v7.711H0V0h32.006v7.71H8.876z"/>
 <path d="M97.989,109.594v16.264h0.463c4.338-6.191,9.563-10.998,15.684-14.406c6.117-3.402,13.129-5.11,21.027-5.11
 	c7.588,0,14.521,1.475,20.793,4.415c6.274,2.945,11.038,8.131,14.291,15.567c3.56-5.265,8.4-9.913,14.521-13.94
 	c6.117-4.025,13.358-6.042,21.724-6.042c6.351,0,12.234,0.776,17.66,2.325c5.418,1.549,10.065,4.027,13.938,7.434
 	c3.869,3.41,6.889,7.863,9.062,13.357c2.167,5.504,3.253,12.122,3.253,19.869v80.385h-32.993v-68.074
 	c0-4.025-0.154-7.82-0.465-11.385c-0.313-3.56-1.161-6.656-2.555-9.293c-1.395-2.631-3.45-4.724-6.157-6.274
 	c-2.711-1.543-6.391-2.322-11.037-2.322s-8.403,0.896-11.269,2.671c-2.868,1.784-5.112,4.109-6.737,6.971
 	c-1.626,2.869-2.711,6.12-3.252,9.762c-0.545,3.638-0.814,7.318-0.814,11.035v66.91h-32.991v-67.375c0-3.562-0.081-7.087-0.23-10.57
 	c-0.158-3.487-0.814-6.7-1.978-9.645c-1.162-2.94-3.099-5.304-5.809-7.088c-2.711-1.775-6.699-2.671-11.965-2.671
 	c-1.551,0-3.603,0.349-6.156,1.048c-2.556,0.697-5.036,2.016-7.435,3.949c-2.404,1.938-4.454,4.726-6.158,8.363
 	c-1.705,3.642-2.556,8.402-2.556,14.287v69.701h-32.99V109.594H97.989z"/>
 <path d="M271.545,127.254c3.405-5.113,7.744-9.215,13.012-12.316c5.264-3.097,11.186-5.303,17.771-6.621
 	c6.582-1.315,13.205-1.976,19.865-1.976c6.042,0,12.158,0.428,18.354,1.277c6.195,0.855,11.85,2.522,16.962,4.997
 	c5.111,2.477,9.292,5.926,12.546,10.338c3.253,4.414,4.879,10.262,4.879,17.543v62.494c0,5.428,0.31,10.611,0.931,15.567
 	c0.615,4.959,1.701,8.676,3.251,11.153h-33.455c-0.621-1.86-1.126-3.755-1.511-5.693c-0.39-1.933-0.661-3.908-0.813-5.923
 	c-5.267,5.422-11.465,9.217-18.585,11.386c-7.127,2.163-14.407,3.251-21.842,3.251c-5.733,0-11.077-0.698-16.033-2.09
 	c-4.958-1.395-9.293-3.562-13.01-6.51c-3.718-2.938-6.622-6.656-8.713-11.147s-3.138-9.84-3.138-16.033
 	c0-6.813,1.199-12.43,3.604-16.84c2.399-4.417,5.495-7.939,9.295-10.575c3.793-2.632,8.129-4.607,13.01-5.923
 	c4.878-1.315,9.795-2.358,14.752-3.137c4.957-0.772,9.835-1.393,14.638-1.857c4.801-0.466,9.062-1.164,12.779-2.093
 	c3.718-0.929,6.658-2.282,8.829-4.065c2.165-1.781,3.172-4.375,3.02-7.785c0-3.56-0.58-6.389-1.742-8.479
 	c-1.161-2.09-2.711-3.719-4.646-4.88c-1.937-1.161-4.183-1.936-6.737-2.325c-2.557-0.382-5.309-0.58-8.248-0.58
 	c-6.506,0-11.617,1.395-15.335,4.183c-3.716,2.788-5.889,7.437-6.506,13.94h-32.991C266.2,138.793,268.133,132.362,271.545,127.254z
 	 M336.714,173.837c-2.09,0.696-4.337,1.275-6.736,1.741c-2.402,0.465-4.918,0.853-7.551,1.161c-2.635,0.313-5.268,0.698-7.899,1.163
 	c-2.48,0.461-4.919,1.086-7.317,1.857c-2.404,0.779-4.495,1.822-6.274,3.138c-1.784,1.317-3.216,2.985-4.3,4.994
 	c-1.085,2.014-1.626,4.571-1.626,7.668c0,2.94,0.541,5.422,1.626,7.431c1.084,2.017,2.558,3.604,4.416,4.765
 	s4.025,1.976,6.507,2.438c2.475,0.466,5.031,0.698,7.665,0.698c6.505,0,11.537-1.082,15.103-3.253
 	c3.561-2.166,6.192-4.762,7.899-7.785c1.702-3.019,2.749-6.072,3.137-9.174c0.384-3.097,0.58-5.576,0.58-7.434V170.93
 	C340.548,172.172,338.806,173.139,336.714,173.837z"/>
 <path d="M461.826,109.594v22.072h-24.161v59.479c0,5.573,0.928,9.292,2.788,11.149c1.856,1.859,5.576,2.788,11.152,2.788
 	c1.859,0,3.638-0.076,5.343-0.232c1.703-0.152,3.33-0.388,4.878-0.696v25.557c-2.788,0.465-5.887,0.773-9.293,0.931
 	c-3.407,0.149-6.737,0.23-9.99,0.23c-5.111,0-9.953-0.35-14.521-1.048c-4.571-0.695-8.597-2.047-12.081-4.063
 	c-3.486-2.011-6.236-4.88-8.248-8.597c-2.016-3.714-3.021-8.595-3.021-14.639v-70.859h-19.98v-22.072h19.98V73.582h32.992v36.012
 	H461.826z"/>
 <path d="M508.989,109.594v22.306h0.465c1.546-3.72,3.636-7.163,6.272-10.341c2.634-3.172,5.652-5.885,9.06-8.131
 	c3.405-2.242,7.047-3.985,10.923-5.228c3.868-1.237,7.898-1.859,12.081-1.859c2.168,0,4.566,0.39,7.202,1.163v30.67
 	c-1.551-0.312-3.41-0.584-5.576-0.814c-2.17-0.233-4.26-0.35-6.274-0.35c-6.041,0-11.152,1.01-15.332,3.021
 	c-4.182,2.014-7.55,4.761-10.107,8.247c-2.555,3.487-4.379,7.55-5.462,12.198c-1.083,4.645-1.625,9.682-1.625,15.102v54.133h-32.991
 	V109.594H508.989z"/>
 <path d="M568.931,91.006V63.823h32.994v27.183H568.931z M601.925,109.594v120.117h-32.994V109.594H601.925z"/>
 <path d="M619.116,109.594h37.637l21.144,31.365l20.911-31.365h36.476l-39.496,56.226l44.377,63.892h-37.64l-25.093-37.87
 	l-25.094,37.87H615.4l43.213-63.193L619.116,109.594z"/>
 <path d="M780.444,329.096V7.71h-23.13V0h32.008v336.807h-32.008v-7.711H780.444z"/>
 </svg>
--- a/public/sound/invite.ogg
+++ b/public/sound/invite.ogg
--- a/public/sound/notification.ogg
+++ b/public/sound/notification.ogg
--- a/src/app/atoms/avatar/Avatar.jsx
+++ b/src/app/atoms/avatar/Avatar.jsx
@ -1,78 +1,57 @@
-import React from "react";
+import React, { useState, useEffect } from 'react';
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import "./Avatar.scss";
+import './Avatar.scss';
-import { twemojify } from "../../../util/twemojify";
+import Text from '../text/Text';
 import RawIcon from '../system-icons/RawIcon';
-import Text from "../text/Text";
+function Avatar({
-import RawIcon from "../system-icons/RawIcon";
+  text, bgColor, iconSrc, imageSrc, size,
 }) {
  const [image, updateImage] = useState(imageSrc);
  let textSize = 's1';
  if (size === 'large') textSize = 'h1';
  if (size === 'small') textSize = 'b1';
  if (size === 'extra-small') textSize = 'b3';
-import ImageBrokenSVG from "../../../../public/res/svg/image-broken.svg";
+  useEffect(() => updateImage(imageSrc), [imageSrc]);
 import { avatarInitials } from "../../../util/common";
 const Avatar = React.forwardRef(
  ({ text, bgColor, iconSrc, iconColor, imageSrc, size }, ref) => {
    let textSize = "s1";
    if (size === "large") textSize = "h1";
    if (size === "small") textSize = "b1";
    if (size === "extra-small") textSize = "b3";
  return (
-      <div
+    <div className={`avatar-container avatar-container__${size} noselect`}>
-        ref={ref}
+      {
-        className={`avatar-container avatar-container__${size} noselect`}
+        image !== null
-      >
+          ? <img src={image} onError={() => updateImage(null)} alt="avatar" />
-        {imageSrc !== null ? (
+          : (
          <img
            draggable="false"
            src={imageSrc}
            onLoad={(e) => {
              e.target.style.backgroundColor = "transparent";
            }}
            onError={(e) => {
              e.target.src = ImageBrokenSVG;
            }}
            alt=""
          />
        ) : (
            <span
-            style={{
+              style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
-              backgroundColor: iconSrc === null ? bgColor : "transparent",
+              className={`avatar__border${iconSrc !== null ? ' avatar__bordered' : ''} inline-flex--center`}
            }}
            className={`avatar__border${iconSrc !== null ? "--active" : ""}`}
            >
-            {iconSrc !== null ? (
+              {
-              <RawIcon size={size} src={iconSrc} color={iconColor} />
+                iconSrc !== null
-            ) : (
+                  ? <RawIcon size={size} src={iconSrc} />
-              text !== null && (
+                  : text !== null && <Text variant={textSize}>{text}</Text>
-                <Text variant={textSize} primary>
+              }
                  {twemojify(avatarInitials(text))}
                </Text>
              )
            )}
            </span>
-        )}
+          )
      }
    </div>
  );
-  }
+}
 );
 Avatar.defaultProps = {
  text: null,
-  bgColor: "transparent",
+  bgColor: 'transparent',
  iconSrc: null,
  iconColor: null,
  imageSrc: null,
-  size: "normal",
+  size: 'normal',
 };
 Avatar.propTypes = {
  text: PropTypes.string,
  bgColor: PropTypes.string,
  iconSrc: PropTypes.string,
  iconColor: PropTypes.string,
  imageSrc: PropTypes.string,
-  size: PropTypes.oneOf(["large", "normal", "small", "extra-small"]),
+  size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']),
 };
 export default Avatar;
--- a/src/app/atoms/avatar/Avatar.scss
+++ b/src/app/atoms/avatar/Avatar.scss
@ -1,5 +1,3 @@
@use "../../partials/flex";
 .avatar-container {
  display: inline-flex;
  width: 42px;
@ -26,17 +24,18 @@
    height: var(--av-extra-small);
  }
-  > img {
+  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
-    background-color: var(--bg-surface-hover);
+  }
  .avatar__bordered {
    box-shadow: var(--bs-surface-border);
  }
  .avatar__border {
    @extend .cp-fx__row--c-c;
    position: absolute;
    top: 0;
    left: 0;
@ -46,11 +45,7 @@
    border-radius: inherit;
    .text {
-      color: white;
+      color: var(--tc-primary-high);
    }
    &--active {
      @extend .avatar__border;
      box-shadow: var(--bs-surface-border);
    }
  }
 }
--- a/src/app/atoms/avatar/render.js
+++ b/src/app/atoms/avatar/render.js
@ -1,62 +0,0 @@
 import { avatarInitials, cssVar } from "../../../util/common";
 // renders the avatar and returns it as an URL
 export default async function renderAvatar({
  text,
  bgColor,
  imageSrc,
  size,
  borderRadius,
  scale,
 }) {
  try {
    const canvas = document.createElement("canvas");
    canvas.width = size * scale;
    canvas.height = size * scale;
    const ctx = canvas.getContext("2d");
    ctx.scale(scale, scale);
    // rounded corners
    ctx.beginPath();
    ctx.moveTo(size, size);
    ctx.arcTo(0, size, 0, 0, borderRadius);
    ctx.arcTo(0, 0, size, 0, borderRadius);
    ctx.arcTo(size, 0, size, size, borderRadius);
    ctx.arcTo(size, size, 0, size, borderRadius);
    if (imageSrc) {
      // clip corners of image
      ctx.closePath();
      ctx.clip();
      const img = new Image();
      img.crossOrigin = "anonymous";
      const promise = new Promise((resolve, reject) => {
        img.onerror = reject;
        img.onload = resolve;
      });
      img.src = imageSrc;
      await promise;
      ctx.drawImage(img, 0, 0, size, size);
    } else {
      // colored background
      ctx.fillStyle = cssVar(bgColor);
      ctx.fill();
      // centered letter
      ctx.fillStyle = "#fff";
      ctx.font = `${cssVar("--fs-s1")} ${cssVar("--font-primary")}`;
      ctx.textBaseline = "middle";
      ctx.textAlign = "center";
      ctx.fillText(avatarInitials(text), size / 2, size / 2);
    }
    return canvas.toDataURL();
  } catch (e) {
    console.error(e);
    return imageSrc;
  }
 }
--- a/src/app/atoms/badge/NotificationBadge.jsx
+++ b/src/app/atoms/badge/NotificationBadge.jsx
@ -1,18 +1,14 @@
-import React from "react";
+import React from 'react';
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import "./NotificationBadge.scss";
+import './NotificationBadge.scss';
-import Text from "../text/Text";
+import Text from '../text/Text';
 function NotificationBadge({ alert, content }) {
-  const notificationClass = alert ? " notification-badge--alert" : "";
+  const notificationClass = alert ? ' notification-badge--alert' : '';
  return (
    <div className={`notification-badge${notificationClass}`}>
-      {content !== null && (
+      {content !== null && <Text variant="b3">{content}</Text>}
        <Text variant="b3" weight="bold">
          {content}
        </Text>
      )}
    </div>
  );
 }
@ -24,7 +20,10 @@ NotificationBadge.defaultProps = {
 NotificationBadge.propTypes = {
  alert: PropTypes.bool,
-  content: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  content: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
  ]),
 };
 export default NotificationBadge;
--- a/src/app/atoms/badge/NotificationBadge.scss
+++ b/src/app/atoms/badge/NotificationBadge.scss
@ -8,6 +8,7 @@
  .text {
    color: var(--tc-badge);
    text-align: center;
    font-weight: 700;
  }
  &--alert {
--- a/src/app/atoms/button/Button.jsx
+++ b/src/app/atoms/button/Button.jsx
@ -1,24 +1,20 @@
-import React from "react";
+import React from 'react';
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import "./Button.scss";
+import './Button.scss';
-import Text from "../text/Text";
+import Text from '../text/Text';
-import RawIcon from "../system-icons/RawIcon";
+import RawIcon from '../system-icons/RawIcon';
-import { blurOnBubbling } from "./script";
+import { blurOnBubbling } from './script';
-const Button = React.forwardRef(
+function Button({
-  (
+  id, className, variant, iconSrc,
-    { id, className, variant, iconSrc, type, onClick, children, disabled },
+  type, onClick, children, disabled,
-    ref
+}) {
-  ) => {
+  const iconClass = (iconSrc === null) ? '' : `btn-${variant}--icon`;
    const iconClass = iconSrc === null ? "" : `btn-${variant}--icon`;
  return (
    <button
-        ref={ref}
+      id={id === '' ? undefined : id}
-        id={id === "" ? undefined : id}
+      className={`${className ? `${className} ` : ''}btn-${variant} ${iconClass} noselect`}
        className={`${
          className ? `${className} ` : ""
        }btn-${variant} ${iconClass} noselect`}
      onMouseUp={(e) => blurOnBubbling(e, `.btn-${variant}`)}
      onClick={onClick}
      // eslint-disable-next-line react/button-has-type
@ -26,19 +22,18 @@ const Button = React.forwardRef(
      disabled={disabled}
    >
      {iconSrc !== null && <RawIcon size="small" src={iconSrc} />}
-        {typeof children === "string" && <Text variant="b1">{children}</Text>}
+      {typeof children === 'string' && <Text variant="b1">{ children }</Text>}
-        {typeof children !== "string" && children}
+      {typeof children !== 'string' && children }
    </button>
  );
-  }
+}
 );
 Button.defaultProps = {
-  id: "",
+  id: '',
  className: null,
-  variant: "surface",
+  variant: 'surface',
  iconSrc: null,
-  type: "button",
+  type: 'button',
  onClick: null,
  disabled: false,
 };
@ -46,15 +41,9 @@ Button.defaultProps = {
 Button.propTypes = {
  id: PropTypes.string,
  className: PropTypes.string,
-  variant: PropTypes.oneOf([
+  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
    "surface",
    "primary",
    "positive",
    "caution",
    "danger",
  ]),
  iconSrc: PropTypes.string,
-  type: PropTypes.oneOf(["button", "submit", "reset"]),
+  type: PropTypes.oneOf(['button', 'submit', 'reset']),
  onClick: PropTypes.func,
  children: PropTypes.node.isRequired,
  disabled: PropTypes.bool,
--- a/src/app/atoms/button/Button.scss
+++ b/src/app/atoms/button/Button.scss
@ -1,6 +1,4 @@
-@use "state";
+@use 'state';
@use "../../partials/dir";
@use "../../partials/text";
 .btn-surface,
 .btn-primary,
@ -19,16 +17,29 @@
  cursor: pointer;
  @include state.disabled;
-  & .text {
+  &--icon {
-    @extend .cp-txt__ellipsis;
+    padding: {
      left: var(--sp-tight);
      right: var(--sp-loose);
    }
-  &--icon {
+    [dir=rtl] & {
-    @include dir.side(padding, var(--sp-tight), var(--sp-loose));
+      padding: {
        left: var(--sp-loose);
        right: var(--sp-tight);
      }
    }
    .ic-raw {
-    @include dir.side(margin, 0, var(--sp-extra-tight));
+      margin-right: var(--sp-extra-tight);
-    flex-shrink: 0;
+
      [dir=rtl] & {
        margin: {
          right: 0;
          left: var(--sp-extra-tight);
        }
      }
    }
  }
 }
@ -41,6 +52,7 @@
  }
 }
 .btn-surface {
  box-shadow: var(--bs-surface-border);
  @include color(var(--tc-surface-high), var(--ic-surface-normal));
--- a/src/app/atoms/button/Checkbox.jsx
+++ b/src/app/atoms/button/Checkbox.jsx
@ -1,38 +0,0 @@
 import React from "react";
 import PropTypes from "prop-types";
 import "./Checkbox.scss";
 function Checkbox({ variant, isActive, onToggle, disabled, tabIndex }) {
  const className = `checkbox checkbox-${variant}${
    isActive ? " checkbox--active" : ""
  }`;
  if (onToggle === null) return <span className={className} />;
  return (
    // eslint-disable-next-line jsx-a11y/control-has-associated-label
    <button
      onClick={() => onToggle(!isActive)}
      className={className}
      type="button"
      disabled={disabled}
      tabIndex={tabIndex}
    />
  );
 }
 Checkbox.defaultProps = {
  variant: "primary",
  isActive: false,
  onToggle: null,
  disabled: false,
  tabIndex: 0,
 };
 Checkbox.propTypes = {
  variant: PropTypes.oneOf(["primary", "positive", "caution", "danger"]),
  isActive: PropTypes.bool,
  onToggle: PropTypes.func,
  disabled: PropTypes.bool,
  tabIndex: PropTypes.number,
 };
 export default Checkbox;
--- a/src/app/atoms/button/Checkbox.scss
+++ b/src/app/atoms/button/Checkbox.scss
@ -1,39 +0,0 @@
@use "../../partials/flex";
@use "./state";
 .checkbox {
  width: 20px;
  height: 20px;
  border-radius: calc(var(--bo-radius) / 2);
  background-color: var(--bg-surface-border);
  box-shadow: var(--bs-surface-border);
  cursor: pointer;
  @include state.disabled;
  @extend .cp-fx__row--c-c;
  &--active {
    background-color: black;
    &::before {
      content: "";
      display: inline-block;
      width: 12px;
      height: 6px;
      border: 6px solid white;
      border-width: 0 0 3px 3px;
      transform: rotateZ(-45deg) translate(1px, -1px);
    }
  }
 }
 .checkbox-primary.checkbox--active {
  background-color: var(--bg-primary);
 }
 .checkbox-positive.checkbox--active {
  background-color: var(--bg-positive);
 }
 .checkbox-caution.checkbox--active {
  background-color: var(--bg-caution);
 }
 .checkbox-danger.checkbox--active {
  background-color: var(--bg-danger);
 }
--- a/src/app/atoms/button/IconButton.jsx
+++ b/src/app/atoms/button/IconButton.jsx
@ -1,41 +1,26 @@
-import React from "react";
+import React from 'react';
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import "./IconButton.scss";
+import './IconButton.scss';
-import RawIcon from "../system-icons/RawIcon";
+import RawIcon from '../system-icons/RawIcon';
-import Tooltip from "../tooltip/Tooltip";
+import Tooltip from '../tooltip/Tooltip';
-import { blurOnBubbling } from "./script";
+import { blurOnBubbling } from './script';
-import Text from "../text/Text";
+import Text from '../text/Text';
-const IconButton = React.forwardRef(
+const IconButton = React.forwardRef(({
-  (
+  variant, size, type,
-    {
+  tooltip, tooltipPlacement, src, onClick,
-      variant,
+}, ref) => {
      size,
      type,
      tooltip,
      tooltipPlacement,
      src,
      onClick,
      tabIndex,
      disabled,
      isImage,
      className,
    },
    ref
  ) => {
  const btn = (
    <button
      ref={ref}
-        className={`ic-btn ic-btn-${variant} ${className}`}
+      className={`ic-btn ic-btn-${variant}`}
      onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)}
      onClick={onClick}
      // eslint-disable-next-line react/button-has-type
      type={type}
        tabIndex={tabIndex}
        disabled={disabled}
    >
-        <RawIcon size={size} src={src} isImage={isImage} />
+      <RawIcon size={size} src={src} />
    </button>
  );
  if (tooltip === null) return btn;
@ -47,40 +32,25 @@ const IconButton = React.forwardRef(
      {btn}
    </Tooltip>
  );
-  }
+});
 );
 IconButton.defaultProps = {
-  variant: "surface",
+  variant: 'surface',
-  size: "normal",
+  size: 'normal',
-  type: "button",
+  type: 'button',
  tooltip: null,
-  tooltipPlacement: "top",
+  tooltipPlacement: 'top',
  onClick: null,
  tabIndex: 0,
  disabled: false,
  isImage: false,
  className: "",
 };
 IconButton.propTypes = {
-  variant: PropTypes.oneOf([
+  variant: PropTypes.oneOf(['surface', 'positive', 'caution', 'danger']),
-    "surface",
+  size: PropTypes.oneOf(['normal', 'small', 'extra-small']),
-    "primary",
+  type: PropTypes.oneOf(['button', 'submit', 'reset']),
    "positive",
    "caution",
    "danger",
  ]),
  size: PropTypes.oneOf(["normal", "small", "extra-small"]),
  type: PropTypes.oneOf(["button", "submit", "reset"]),
  tooltip: PropTypes.string,
-  tooltipPlacement: PropTypes.oneOf(["top", "right", "bottom", "left"]),
+  tooltipPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
  src: PropTypes.string.isRequired,
  onClick: PropTypes.func,
  tabIndex: PropTypes.number,
  disabled: PropTypes.bool,
  isImage: PropTypes.bool,
  className: PropTypes.string,
 };
 export default IconButton;
--- a/src/app/atoms/button/IconButton.scss
+++ b/src/app/atoms/button/IconButton.scss
@ -1,4 +1,4 @@
-@use "state";
+@use 'state';
 .ic-btn {
  padding: var(--sp-extra-tight);
@ -29,13 +29,6 @@
  @include focus(var(--bg-surface-hover));
  @include state.active(var(--bg-surface-active));
 }
 .ic-btn-primary {
  @include color(var(--ic-primary-normal));
  @include state.hover(var(--bg-primary-hover));
  @include focus(var(--bg-primary-hover));
  @include state.active(var(--bg-primary-active));
  background-color: var(--bg-primary);
 }
 .ic-btn-positive {
  @include color(var(--ic-positive-normal));
  @include state.hover(var(--bg-positive-hover));
--- a/src/app/atoms/button/RadioButton.jsx
+++ b/src/app/atoms/button/RadioButton.jsx
@ -1,33 +0,0 @@
 import React from "react";
 import PropTypes from "prop-types";
 import "./RadioButton.scss";
 function RadioButton({ isActive, onToggle, disabled }) {
  if (onToggle === null)
    return (
      <span className={`radio-btn${isActive ? " radio-btn--active" : ""}`} />
    );
  return (
    // eslint-disable-next-line jsx-a11y/control-has-associated-label
    <button
      onClick={() => onToggle(!isActive)}
      className={`radio-btn${isActive ? " radio-btn--active" : ""}`}
      type="button"
      disabled={disabled}
    />
  );
 }
 RadioButton.defaultProps = {
  isActive: false,
  onToggle: null,
  disabled: false,
 };
 RadioButton.propTypes = {
  isActive: PropTypes.bool,
  onToggle: PropTypes.func,
  disabled: PropTypes.bool,
 };
 export default RadioButton;
--- a/src/app/atoms/button/RadioButton.scss
+++ b/src/app/atoms/button/RadioButton.scss
@ -1,28 +0,0 @@
@use "../../partials/flex";
@use "./state";
 .radio-btn {
  @extend .cp-fx__row--c-c;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--bg-surface-border);
  border: 2px solid var(--bg-surface-border);
  cursor: pointer;
  @include state.disabled;
  &::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: var(--bg-surface-border);
    border-radius: 50%;
  }
  &--active {
    border: 2px solid var(--bg-positive);
    &::before {
      background-color: var(--bg-positive);
    }
  }
 }
--- a/src/app/atoms/button/Toggle.jsx
+++ b/src/app/atoms/button/Toggle.jsx
@ -1,31 +1,25 @@
-import React from "react";
+import React from 'react';
-import PropTypes from "prop-types";
+import PropTypes from 'prop-types';
-import "./Toggle.scss";
+import './Toggle.scss';
-function Toggle({ isActive, onToggle, disabled }) {
+function Toggle({ isActive, onToggle }) {
  const className = `toggle${isActive ? " toggle--active" : ""}`;
  if (onToggle === null) return <span className={className} />;
  return (
    // eslint-disable-next-line jsx-a11y/control-has-associated-label
    <button
      onClick={() => onToggle(!isActive)}
-      className={className}
+      className={`toggle${isActive ? ' toggle--active' : ''}`}
      type="button"
      disabled={disabled}
    />
  );
 }
 Toggle.defaultProps = {
  isActive: false,
  disabled: false,
  onToggle: null,
 };
 Toggle.propTypes = {
  isActive: PropTypes.bool,
-  onToggle: PropTypes.func,
+  onToggle: PropTypes.func.isRequired,
  disabled: PropTypes.bool,
 };
 export default Toggle;
--- a/src/app/atoms/button/Toggle.scss
+++ b/src/app/atoms/button/Toggle.scss
@ -1,6 +1,3 @@
@use "../../partials/dir";
@use "./state";
 .toggle {
  width: 44px;
  height: 24px;
@ -11,18 +8,18 @@
  box-shadow: var(--bs-surface-border);
  cursor: pointer;
  background-color: var(--bg-surface-low);
  @include state.disabled;
  transition: background 200ms ease-in-out;
  &::before {
-    content: "";
+    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: var(--tc-surface-low);
    border-radius: calc(var(--bo-radius) / 2);
-    transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
+    transition: transform 200ms ease-in-out,
      opacity 200ms ease-in-out;
    opacity: 0.6;
  }
@ -30,13 +27,13 @@
    background-color: var(--bg-positive);
    &::before {
      --ltr: translateX(calc(125%));
      --rtl: translateX(calc(-125%));
      @include dir.prop(transform, var(--ltr), var(--rtl));
      transform: translateX(calc(125%));
      background-color: white;
      transform: translateX(calc(125%));
      opacity: 1;
      [dir=rtl] & {
        transform: translateX(calc(-125%));
      }
    }
  }
 }
--- a/src/app/atoms/button/_state.scss
+++ b/src/app/atoms/button/_state.scss
@ -1,3 +1,4 @@
@mixin hover($color) {
  @media (hover: hover) {
    &:hover {
--- a/src/app/atoms/button/script.js
+++ b/src/app/atoms/button/script.js
@ -10,10 +10,7 @@ function blurOnBubbling(e, selector) {
  for (let elIndex = 0; elIndex < bubblingPath.length; elIndex += 1) {
    if (bubblingPath[elIndex] === document) {
-      console.warn(
+      console.warn(blurOnBubbling, 'blurOnBubbling: not found selector in bubbling path');
        blurOnBubbling,
        "blurOnBubbling: not found selector in bubbling path"
      );
      break;
    }
    if (bubblingPath[elIndex].matches(selector)) {
--- a/src/app/atoms/card/InfoCard.jsx
+++ b/src/app/atoms/card/InfoCard.jsx
@ -1,69 +0,0 @@
 import React from "react";
 import PropTypes from "prop-types";
 import "./InfoCard.scss";
 import Text from "../text/Text";
 import RawIcon from "../system-icons/RawIcon";
 import IconButton from "../button/IconButton";
 import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
 function InfoCard({
  className,
  style,
  variant,
  iconSrc,
  title,
  content,
  rounded,
  requestClose,
 }) {
  const classes = [`info-card info-card--${variant}`];
  if (rounded) classes.push("info-card--rounded");
  if (className) classes.push(className);
  return (
    <div className={classes.join(" ")} style={style}>
      {iconSrc && (
        <div className="info-card__icon">
          <RawIcon color={`var(--ic-${variant}-high)`} src={iconSrc} />
        </div>
      )}
      <div className="info-card__content">
        <Text>{title}</Text>
        {content}
      </div>
      {requestClose && (
        <IconButton src={CrossIC} variant={variant} onClick={requestClose} />
      )}
    </div>
  );
 }
 InfoCard.defaultProps = {
  className: null,
  style: null,
  variant: "surface",
  iconSrc: null,
  content: null,
  rounded: false,
  requestClose: null,
 };
 InfoCard.propTypes = {
  className: PropTypes.string,
  style: PropTypes.shape({}),
  variant: PropTypes.oneOf([
    "surface",
    "primary",
    "positive",
    "caution",
    "danger",
  ]),
  iconSrc: PropTypes.string,
  title: PropTypes.string.isRequired,
  content: PropTypes.node,
  rounded: PropTypes.bool,
  requestClose: PropTypes.func,
 };
 export default InfoCard;
--- a/Show more
+++ b/Show more
Author	SHA1	Message	Date
Ajay Bura	253e3eb855	v1.4.0: SSO login and profile viewer Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	54dd5a4edb	Fix reaction selector doesn't focus msg input (#62 ) Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	0bd22bee13	Fix message menu placement on large screen (#113 ) Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	6703614c78	Fix wildcard matching in emojisearch (#121 ) Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	32923a1c34	Fix profile picture inconsistency (#104 , #147 ) Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	1dc0f9288a	UI improvement in SSO Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	2e62f103f2	SegmentedControl bug fixed Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	d0e9aea788	Add option to filter PeopleDrawer Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	e12a75e431	Enhanced people search UX Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	5ece37fffe	Added button reset type. Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	e6f228b63e	Fixed inconsistent search in emojiboard. Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	5018df11f1	Add search in People drawer Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	5f6667debf	SSO login bug fixed Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	5b1d5d0326	Fix redirect on SSO login (#142 ), #27 , #94 Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
James Julich	012e933e43	Address 301 redirect issue and Safari regex issue. (#143 ) * Address 301 redirect issue and Safari regex issue. * Restored login redirect as this doesn't not fix the sso redirect #143. Co-authored-by: Ajay Bura <32841439+ajbura@users.noreply.github.com>	2021-10-25 17:59:57 +05:30
Gero Gerke	825db633a0	Implement Profile Viewer (#130 ) * Implement Profile Viewer Fixes #111 * Make user avatar in chat clickable * design progress * Refactored code * progress * Updated chip comp Signed-off-by: Ajay Bura <ajbura@gmail.com> * Refactored ProfileViewer comp Signed-off-by: Ajay Bura <ajbura@gmail.com> * Added msg functionality in ProfileViewer Signed-off-by: Ajay Bura <ajbura@gmail.com> * Added Ignore functionality in ProfileViewer Signed-off-by: Ajay Bura <ajbura@gmail.com> * Fixed Ignore btn bug Signed-off-by: Ajay Bura <ajbura@gmail.com> * Refectored ProfileViewer comp Signed-off-by: Ajay Bura <ajbura@gmail.com> Co-authored-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	4dfe40333e	Update pull-request.yml	2021-10-25 17:59:57 +05:30
Ajay Bura	a34c35fbe3	Update pull-request.yml	2021-10-25 17:59:57 +05:30
Ajay Bura	8b4beccf82	Fixed deploy on PR	2021-10-25 17:59:57 +05:30
Ajay Bura	d067fe776d	Update pull-request.yml	2021-10-25 17:59:57 +05:30
Ajay Bura	9fad8a1098	added action for pull request previews	2021-10-25 17:59:57 +05:30
jamesjulich	8a1b749667	Add support for SSO login.	2021-10-25 17:59:57 +05:30
kfiven	7b67e4a6e6	Fix unable to send msg in DM from IRC users (#135 )	2021-10-25 17:59:57 +05:30
Ajay Bura	824a7f2095	Fix make both user admin on DM create Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Ajay Bura	b4d4cefe23	Updated support link Signed-off-by: Ajay Bura <ajbura@gmail.com>	2021-10-25 17:59:57 +05:30
Krishan	bdb94d7145	Merge pull request #131 from ajbura/dev v1.3.2	2021-10-06 13:22:18 +05:30