Fix sending message not mark as read

Signed-off-by: Ajay Bura <ajbura@gmail.com>

.eslintignore

@@ -1,2 +1,5 @@
+webpack.common.js
+webpack.dev.js
+webpack.prod.js
 experiment
 node_modules

.eslintrc.js

@@ -4,56 +4,25 @@ module.exports = {
     es2021: true,
   },
   extends: [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
+    'plugin:react/recommended',
     'airbnb',
-    'prettier',
   ],
-  parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
-    ecmaVersion: 'latest',
+    ecmaVersion: 12,
     sourceType: 'module',
   },
   plugins: [
     'react',
-    '@typescript-eslint'
   ],
   rules: {
     'linebreak-style': 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",
   },
 };

.github/FUNDING.yml

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

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,33 @@
+---
+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]
+ - Matrix homeserver: [e.g. matrix.org]
+
+#### Additional context
+Add any other context about the problem here.

.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.

.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

.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.

.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.

.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)

.github/dependabot.yml

@@ -1,30 +1,28 @@
 # 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
 
+updates:
   - package-ecosystem: github-actions
     directory: /
-    schedule:
+    schedule: 
       interval: weekly
       day: "tuesday"
       time: "01:00"
       timezone: "Asia/Kolkata"
-    open-pull-requests-limit: 5
 
   - package-ecosystem: docker
     directory: /
-    schedule:
+    schedule: 
+      interval: weekly
+      day: "tuesday"
+      time: "01:00"
+      timezone: "Asia/Kolkata"
+
+  - package-ecosystem: npm
+    directory: /
+    schedule: 
       interval: weekly
       day: "tuesday"
       time: "01:00"
       timezone: "Asia/Kolkata"
-    open-pull-requests-limit: 5

.github/renovate.json

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

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

@@ -1,4 +1,4 @@
-name: Build pull request
+name: 'Build pull request'
 
 on:
   pull_request:
@@ -6,33 +6,34 @@ on:
 
 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: Check out the repo
+        uses: actions/checkout@v3.0.0
       - name: Build app
-        run: npm run build
+        run: npm ci && npm run build
       - name: Upload artifact
-        uses: actions/upload-artifact@v3.1.1
+        uses: actions/upload-artifact@v3.0.0
         with:
-          name: preview
+          name: previewbuild
           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
+      - name: Get PR info
+        uses: actions/github-script@v6.0.0
         with:
-          name: pr
-          path: ./pr.txt
+          script: |
+            var fs = require('fs');
+            fs.writeFileSync('${{github.workspace}}/pr.json', JSON.stringify(context.payload.pull_request));
+      - name: Upload PR Info
+        uses: actions/upload-artifact@v3.0.0
+        with:
+          name: pr.json
+          path: pr.json
           retention-days: 1
+      - name: Build Docker image
+        uses: docker/build-push-action@v2.10.0
+        with:
+          context: .
+          push: false

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

@@ -1,56 +1,78 @@
-name: Deploy PR to Netlify
-
+name: Upload Preview Build to Netlify
 on:
   workflow_run:
       workflows: ["Build pull request"]
-      types: [completed]
-
+      types:
+        - completed
 jobs:
-  deploy-pull-request:
-    name: Deploy pull request
+  get-build-and-deploy:
     runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      pull-requests: write
-    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    if: >
+      ${{ github.event.workflow_run.conclusion == 'success' }}
     steps:
-      - name: Download pr number
-        uses: dawidd6/action-download-artifact@e6e25ac3a2b93187502a8be1ef9e9603afc34925
+      # There's a 'download artifact' action but it hasn't been updated for the
+      # workflow_run action (https://github.com/actions/download-artifact/issues/60)
+      # so instead we get this mess:
+      - name: 'Download artifact'
+        uses: actions/github-script@v6.0.0
         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
+          script: |
+            var artifacts = await github.rest.actions.listWorkflowRunArtifacts({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              run_id: ${{github.event.workflow_run.id }},
+            });
+            var matchArtifact = artifacts.data.artifacts.filter((artifact) => {
+              return artifact.name == "previewbuild"
+            })[0];
+            var download = await github.rest.actions.downloadArtifact({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              artifact_id: matchArtifact.id,
+              archive_format: 'zip',
+            });
+            var fs = require('fs');
+            fs.writeFileSync('${{github.workspace}}/previewbuild.zip', Buffer.from(download.data));
+            var prInfoArtifact = artifacts.data.artifacts.filter((artifact) => {
+              return artifact.name == "pr.json"
+            })[0];
+            var download = await github.rest.actions.downloadArtifact({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              artifact_id: prInfoArtifact.id,
+              archive_format: 'zip',
+            });
+            var fs = require('fs');
+            fs.writeFileSync('${{github.workspace}}/pr.json.zip', Buffer.from(download.data));
+      - name: Extract Artifacts
+        run: unzip -d dist previewbuild.zip && rm previewbuild.zip && unzip pr.json.zip && rm pr.json.zip
+      - name: 'Read PR Info'
+        id: readctx
+        uses: actions/github-script@v6.0.0
         with:
-          workflow: ${{ github.event.workflow.id }}
-          run_id: ${{ github.event.workflow_run.id }}
-          name: preview
-          path: dist
+          script: |
+            var fs = require('fs');
+            var pr = JSON.parse(fs.readFileSync('${{github.workspace}}/pr.json'));
+            console.log(`::set-output name=prnumber::${pr.number}`);
       - name: Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@5da65c9f74c7961c5501a3ba329b8d0912f39c03
+        uses: nwtgck/actions-netlify@v1.2.3
         with:
           publish-dir: dist
-          deploy-message: "Deploy PR ${{ steps.pr.outputs.id }}"
-          alias: ${{ steps.pr.outputs.id }}
+          deploy-message: "Deploy from GitHub Actions"
           # 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 }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE3_ID }}
         timeout-minutes: 1
-      - name: Comment preview on PR
-        uses: thollander/actions-comment-pull-request@c22fb302208b7b170d252a61a505d2ea27245eff
+      - name: Edit PR Description
+        uses: velas/pr-description@v1.0.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          pr_number: ${{ steps.pr.outputs.id }}
-          comment_tag: ${{ steps.pr.outputs.id }}
-          message: |
+          pull-request-number: ${{ steps.readctx.outputs.prnumber }}
+          description-message: |
               Preview: ${{ steps.netlify.outputs.deploy-url }}
-              ⚠️ Exercise caution. Use test accounts. ⚠️
+              ⚠️ Exercise caution. Use test accounts. ⚠️

.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

.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

.github/workflows/netlify-dev.yaml

@@ -0,0 +1,22 @@
+name: 'Deploy to Netlify (dev)'
+
+on:
+  push:
+    branches:
+       - dev
+
+jobs:
+  deploy:
+    name: 'Deploy'
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3.0.0
+      - uses: jsmrcaga/action-netlify-deploy@v1.7.2
+        with:
+          install_command: "npm ci"
+          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

.github/workflows/netlify-dev.yml

@@ -1,37 +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
-        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

.github/workflows/prod-deploy.yaml

@@ -0,0 +1,56 @@
+name: 'Production deploy'
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  deploy-to-netlify:
+    name: 'Deploy to Netlify'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3.0.0
+      - name: Build and deploy to Netlify
+        uses: jsmrcaga/action-netlify-deploy@v1.7.2
+        with:
+          install_command: "npm ci"
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+          BUILD_DIRECTORY: "dist"
+          NETLIFY_DEPLOY_MESSAGE: "Prod deploy v${{ github.ref }}"
+          NETLIFY_DEPLOY_TO_PROD: true
+      - name: Get version from tag
+        id: vars
+        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
+      - name: Create tar.gz
+        run: tar -czvf cinny-${{ steps.vars.outputs.tag }}.tar.gz dist
+      - name: Upload tagged release
+        uses: softprops/action-gh-release@v1
+        with:
+          files: |
+            cinny-${{ steps.vars.outputs.tag }}.tar.gz
+
+  push_to_dockerhub:
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v3.0.0
+      - name: Login to Docker Hub
+        uses: docker/login-action@v1.14.1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v3.6.2
+        with:
+          images: ajbura/cinny
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v2.10.0
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/prod-deploy.yml

@@ -1,97 +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
-        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 ::set-output name=tag::${GITHUB_REF#refs/*/}
-      - name: Create tar.gz
-        run: tar -czvf cinny-${{ steps.vars.outputs.tag }}.tar.gz dist
-      - name: Sign tar.gz
-        run: |
-          echo '${{ secrets.GNUPG_KEY }}' | gpg --batch --import
-          # Sadly a few lines in the private key match a few lines in the public key,
-          # As a result just --export --armor gives us a few lines replaced with ***
-          # making it useless for importing the signing key. Instead, we dump it as
-          # non-armored and hex-encode it so that its printable.
-          echo "PGP Signing key, in raw PGP format in hex. Import with cat ... | xxd -r -p - | gpg --import"
-          gpg --export | xxd -p
-          echo '${{ secrets.GNUPG_PASSPHRASE }}' | gpg --batch --yes --pinentry-mode loopback --passphrase-fd 0 --armor --detach-sign cinny-${{ steps.vars.outputs.tag }}.tar.gz
-      - name: Upload tagged release
-        uses: softprops/action-gh-release@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 }}

.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/

.prettierignore

@@ -1,6 +0,0 @@
-dist
-node_modules
-package.json
-package-lock.json
-LICENSE
-README.md

.prettierrc.json

@@ -1,4 +0,0 @@
-{
-  "printWidth": 100,
-  "singleQuote": true
-}

.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
-}

.vscode/settings.json

@@ -1,5 +0,0 @@
-{
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "typescript.tsdk": "node_modules/typescript/lib"
-}

CONTRIBUTING.md

@@ -36,9 +36,4 @@ It is not always possible to phrase every change in such a manner, but it is des
 
 Also, we use [ESLint](https://eslint.org/) for clean and stylistically consistent code syntax, so make sure your pull request follow it.
 
-**For any query or design discussion, join our [Matrix room](https://matrix.to/#/#cinny:matrix.org).**
-
-## Helpful links
-- [BEM methodology](http://getbem.com/introduction/)
-- [Atomic design](https://bradfrost.com/blog/post/atomic-web-design/)
-- [Matrix JavaScript SDK documentation](https://matrix-org.github.io/matrix-js-sdk/index.html)
+**For any query or design discussion, join our [Matrix room](https://matrix.to/#/#cinny:matrix.org).**

Dockerfile

@@ -1,16 +1,16 @@
 ## Builder
-FROM node:18.12.1-alpine3.15 as builder
+FROM node:17.7.1-alpine3.15 as builder
 
 WORKDIR /src
 
-COPY .npmrc package.json package-lock.json /src/
+COPY package.json package-lock.json /src/
 RUN npm ci
 COPY . /src/
 RUN npm run build
 
 
 ## App
-FROM nginx:1.23.3-alpine
+FROM nginx:1.21.6-alpine
 
 COPY --from=builder /src/dist /app
 

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021-present Ajay Bura (ajbura)
+Copyright (c) 2021 Ajay Bura (ajbura) and other contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,120 +1,65 @@
 # 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.
-- [Roadmap](https://github.com/ajbura/cinny/projects/11)
+## Table of Contents
+
+- [About](#about)
+- [Getting Started](https://cinny.in)
 - [Contributing](./CONTRIBUTING.md)
+- [Roadmap](https://github.com/ajbura/cinny/projects/11)
 
-## Getting started
-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.
+## About <a name = "about"></a>
 
-You can also download our desktop app from [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).
+Cinny is a [Matrix](https://matrix.org) client focusing primarily on simple, elegant and secure interface.
 
-To host Cinny on your own, download tarball of the app from [GitHub release](https://github.com/cinnyapp/cinny/releases/latest).
-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.
+![preview](https://github.com/ajbura/cinny-site/blob/master/assets/preview-light.png)
 
-Alternatively you can just pull the [DockerHub image](https://hub.docker.com/r/ajbura/cinny) by:
-```
-docker pull ajbura/cinny
-```
-or [ghcr image](https://github.com/cinnyapp/cinny/pkgs/container/cinny) by:
-```
-docker pull ghcr.io/cinnyapp/cinny:latest
-```
+## Building and Running
 
-<details>
-<summary>PGP Public Key to verify tarball</summary>
+### Running pre-compiled
 
-```
------BEGIN PGP PUBLIC KEY BLOCK-----
+A tarball of pre-compiled version of the app is provided with each [release](https://github.com/ajbura/cinny/releases).
+You can serve the application with a webserver of your choosing by simply copying `dist/` directory to the webroot.
 
-mQGNBGJw/g0BDAC8qQeLqDMzYzfPyOmRlHVEoguVTo+eo1aVdQH2X7OELdjjBlyj
-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>
+### Building from source
 
-## 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 compile the app from its source code:
 
-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 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`.
+
+### Configuring default Homeserver
+
+To set default Homeserver on login and register page, place a customized [`config.json`](config.json) in webroot of your choice.
 
 ## License
 
-Copyright (c) 2021-present Ajay Bura (ajbura)
+Copyright (c) 2021 Ajay Bura (ajbura) and contributors
 
 Code licensed under the MIT License: <http://opensource.org/licenses/MIT>
 

config.json

@@ -1,11 +1,11 @@
 {
-  "defaultHomeserver": 3,
+  "defaultHomeserver": 4,
   "homeserverList": [
     "converser.eu",
     "envs.net",
     "halogen.city",
+    "kde.org",
     "matrix.org",
-    "mozilla.org"
-  ],
-  "allowCustomHomeservers": true
-}
+    "chat.mozilla.org"
+  ]
+}

index.html

@@ -1,101 +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.jsx"></script>
-  </body>
-</html>

package.json

@@ -1,77 +1,85 @@
 {
   "name": "cinny",
-  "version": "2.2.3",
+  "version": "1.8.1",
   "description": "Yet another matrix client",
   "main": "index.js",
   "engines": {
-    "node": ">=16.0.0"
+    "npm": ">=6.14.11",
+    "node": ">=14.6.0"
   },
   "scripts": {
-    "start": "vite",
-    "build": "vite build",
-    "lint": "yarn check:eslint && yarn check:prettier",
-    "check:eslint": "eslint src/*",
-    "check:prettier": "prettier --check .",
-    "fix:prettier": "prettier --write .",
-    "typecheck": "tsc --noEmit"
+    "start": "webpack serve --config ./webpack.dev.js --open",
+    "build": "webpack --config ./webpack.prod.js"
   },
   "keywords": [],
   "author": "Ajay Bura",
   "license": "MIT",
   "dependencies": {
-    "@fontsource/inter": "4.5.14",
-    "@fontsource/roboto": "4.5.8",
-    "@khanacademy/simple-markdown": "0.8.6",
-    "@matrix-org/olm": "3.2.14",
-    "@tippyjs/react": "4.2.6",
-    "blurhash": "2.0.4",
-    "browser-encrypt-attachment": "0.3.0",
-    "dateformat": "5.0.3",
-    "emojibase-data": "7.0.1",
-    "file-saver": "2.0.5",
-    "flux": "4.0.3",
-    "formik": "2.2.9",
-    "html-react-parser": "3.0.4",
-    "katex": "0.16.4",
-    "linkify-html": "4.0.2",
-    "linkifyjs": "4.0.2",
-    "matrix-js-sdk": "22.0.0",
-    "prop-types": "15.8.1",
-    "react": "17.0.2",
-    "react-autosize-textarea": "7.1.0",
-    "react-blurhash": "0.2.0",
-    "react-dnd": "15.1.2",
-    "react-dnd-html5-backend": "15.1.3",
-    "react-dom": "17.0.2",
-    "react-google-recaptcha": "2.1.0",
-    "react-modal": "3.16.1",
-    "sanitize-html": "2.8.0",
-    "tippy.js": "6.3.7",
-    "twemoji": "14.0.2"
+    "@fontsource/inter": "^4.5.5",
+    "@fontsource/roboto": "^4.5.3",
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
+    "@tippyjs/react": "^4.2.6",
+    "babel-polyfill": "^6.26.0",
+    "browser-encrypt-attachment": "^0.3.0",
+    "dateformat": "^5.0.3",
+    "emojibase-data": "^7.0.1",
+    "file-saver": "^2.0.5",
+    "flux": "^4.0.3",
+    "formik": "^2.2.9",
+    "html-react-parser": "^1.4.8",
+    "linkifyjs": "^2.1.9",
+    "matrix-js-sdk": "^15.6.0",
+    "micromark": "^3.0.10",
+    "micromark-extension-gfm": "^2.0.1",
+    "micromark-util-chunked": "^1.0.0",
+    "micromark-util-resolve-all": "^1.0.0",
+    "micromark-util-symbol": "^1.0.1",
+    "prop-types": "^15.8.1",
+    "react": "^17.0.2",
+    "react-autosize-textarea": "^7.1.0",
+    "react-dnd": "^15.1.1",
+    "react-dnd-html5-backend": "^15.1.2",
+    "react-dom": "^17.0.2",
+    "react-google-recaptcha": "^2.1.0",
+    "react-modal": "^3.14.4",
+    "sanitize-html": "^2.7.0",
+    "tippy.js": "^6.3.7",
+    "twemoji": "^14.0.1"
   },
   "devDependencies": {
-    "@esbuild-plugins/node-globals-polyfill": "0.2.3",
-    "@rollup/plugin-inject": "5.0.3",
-    "@rollup/plugin-wasm": "6.1.1",
-    "@types/node": "18.11.18",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.9",
-    "@typescript-eslint/eslint-plugin": "5.46.1",
-    "@typescript-eslint/parser": "5.46.1",
-    "@vitejs/plugin-react": "3.0.0",
-    "buffer": "6.0.3",
-    "eslint": "8.29.0",
-    "eslint-config-airbnb": "19.0.4",
-    "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsx-a11y": "6.6.1",
-    "eslint-plugin-react": "7.31.11",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "mini-svg-data-uri": "1.4.4",
-    "prettier": "2.8.1",
-    "sass": "1.56.2",
-    "typescript": "4.9.4",
-    "vite": "4.0.1",
-    "vite-plugin-static-copy": "0.13.0"
+    "@babel/core": "^7.17.7",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "assert": "^2.0.0",
+    "babel-loader": "^8.2.2",
+    "browserify-fs": "^1.0.0",
+    "buffer": "^6.0.3",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^10.2.4",
+    "crypto-browserify": "^3.12.0",
+    "css-loader": "^6.7.1",
+    "css-minimizer-webpack-plugin": "^3.4.1",
+    "eslint": "^8.11.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "favicons": "^6.2.2",
+    "favicons-webpack-plugin": "^5.0.2",
+    "html-loader": "^3.1.0",
+    "html-webpack-plugin": "^5.3.1",
+    "mini-css-extract-plugin": "^2.6.0",
+    "path-browserify": "^1.0.1",
+    "sass": "^1.49.9",
+    "sass-loader": "^12.6.0",
+    "stream-browserify": "^3.0.0",
+    "style-loader": "^3.3.1",
+    "url": "^0.11.0",
+    "util": "^0.12.4",
+    "webpack": "^5.70.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4",
+    "webpack-merge": "^5.7.3"
   }
 }

public/index.html

@@ -0,0 +1,22 @@
+<!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">
+</head>
+<body id="appBody">
+    <div id="root"></div>
+</body>
+</html>

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"
-    }
-  ]
-}

public/res/README.md

@@ -1,4 +1,4 @@
-Copyright (c) 2021-present Ajay Bura (ajbura)
+Graphics (c) by Ajay Bura (ajbura)
 
 Graphic content is licensed under a
 Creative Commons Attribution 4.0 International License.

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">
-<path d="M14 3V5H17.8L12.9 9.9L14.3 11.3L19 6.6V10.2H21V3H14Z" fill="black"/>
-<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"/>
+<?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="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>

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>

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">
-<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"/>
-<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"/>
+<?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>
+		<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>

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>

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>

public/res/ic/outlined/recent-clock.svg

@@ -4,14 +4,13 @@
 <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"/>
+	<polygon fill="#010101" points="11,6 11,12 15.2,16.2 16.7,14.8 13,11.2 13,6 	"/>
+	<path fill="#010101" d="M12,2C6.5,2,2,6.5,2,12H0.2L3,14.8L5.8,12H4c0-4.4,3.6-8,8-8s8,3.6,8,8s-3.6,8-8,8c-1.9,0-3.7-0.7-5-1.8
+		l-1.2,1.6C7.4,21.2,9.6,22,12,22c5.5,0,10-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"/>
+	<polygon fill="#010101" points="49,44 49,50 53.2,54.2 54.7,52.8 51,49.2 51,44 	"/>
+	<path fill="#010101" d="M50,40c-5.5,0-10,4.5-10,10h-1.8l2.8,2.8l2.8-2.8H42c0-4.4,3.6-8,8-8s8,3.6,8,8s-3.6,8-8,8
+		c-1.9,0-3.7-0.7-5-1.8l-1.2,1.6c1.7,1.4,3.9,2.2,6.3,2.2c5.5,0,10-4.5,10-10S55.5,40,50,40z"/>
 </g>
 </svg>

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>

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>

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>

src/app/atoms/avatar/render.js

@@ -1,4 +1,8 @@
-import { avatarInitials, cssVar } from '../../../util/common';
+import { avatarInitials } from '../../../util/common';
+
+function cssVar(name) {
+  return getComputedStyle(document.body).getPropertyValue(name);
+}
 
 // renders the avatar and returns it as an URL
 export default async function renderAvatar({

src/app/atoms/button/Button.scss

@@ -26,10 +26,10 @@
   &--icon {
     @include dir.side(padding, var(--sp-tight), var(--sp-loose));
 
-  }
-  .ic-raw {
-    @include dir.side(margin, 0, var(--sp-extra-tight));
-    flex-shrink: 0;
+    .ic-raw {
+      @include dir.side(margin, 0, var(--sp-extra-tight));
+      flex-shrink: 0;
+    }
   }
 }
 

src/app/atoms/button/IconButton.jsx

@@ -11,12 +11,11 @@ const IconButton = React.forwardRef(({
   variant, 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
@@ -48,7 +47,6 @@ IconButton.defaultProps = {
   tabIndex: 0,
   disabled: false,
   isImage: false,
-  className: '',
 };
 
 IconButton.propTypes = {
@@ -62,7 +60,6 @@ IconButton.propTypes = {
   tabIndex: PropTypes.number,
   disabled: PropTypes.bool,
   isImage: PropTypes.bool,
-  className: PropTypes.string,
 };
 
 export default IconButton;

src/app/atoms/card/InfoCard.jsx

@@ -1,59 +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;

src/app/atoms/card/InfoCard.scss

@@ -1,79 +0,0 @@
-@use '.././../partials/flex';
-@use '.././../partials/dir';
-
-.info-card {
-  display: flex;
-  align-items: flex-start;
-  line-height: 0;
-  padding: var(--sp-tight);
-  @include dir.prop(border-left, 4px solid transparent, none);
-  @include dir.prop(border-right, none, 4px solid transparent);
-
-  & > .ic-btn {
-    padding: 0;
-    border-radius: 4;
-  }
-
-  &__content {
-    margin: 0 var(--sp-tight);
-    @extend .cp-fx__item-one;
-
-    & > *:nth-child(2) {
-      margin-top: var(--sp-ultra-tight);
-    }
-  }
-
-  &--rounded {
-    @include dir.prop(
-      border-radius,
-      0 var(--bo-radius) var(--bo-radius) 0,
-      var(--bo-radius) 0 0 var(--bo-radius)
-    );
-  }
-
-  &--surface {
-    border-color: var(--bg-surface-border);
-    background-color: var(--bg-surface-hover);
-
-  }
-  &--primary {
-    border-color: var(--bg-primary);
-    background-color: var(--bg-primary-hover);
-    & .text {
-      color: var(--tc-primary-high);
-      &-b3 {
-        color: var(--tc-primary-normal);
-      }
-    }
-  }
-  &--positive {
-    border-color: var(--bg-positive-border);
-    background-color: var(--bg-positive-hover);
-    & .text {
-      color: var(--tc-positive-high);
-      &-b3 {
-        color: var(--tc-positive-normal);
-      }
-    }
-  }
-  &--caution {
-    border-color: var(--bg-caution-border);
-    background-color: var(--bg-caution-hover);
-    & .text {
-      color: var(--tc-caution-high);
-      &-b3 {
-        color: var(--tc-caution-normal);
-      }
-    }
-  }
-  &--danger {
-    border-color: var(--bg-danger-border);
-    background-color: var(--bg-danger-hover);
-    & .text {
-      color: var(--tc-danger-high);
-      &-b3 {
-        color: var(--tc-danger-normal);
-      }
-    }
-  }
-}

src/app/atoms/input/Input.jsx

@@ -16,7 +16,6 @@ function Input({
       { resizable
         ? (
           <TextareaAutosize
-            dir="auto"
             style={{ minHeight: `${minHeight}px` }}
             name={name}
             id={id}
@@ -35,7 +34,6 @@ function Input({
           />
         ) : (
           <input
-            dir="auto"
             ref={forwardRef}
             id={id}
             name={name}

src/app/atoms/math/Math.jsx

@@ -1,33 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import './Math.scss';
-
-import katex from 'katex';
-import 'katex/dist/katex.min.css';
-
-import 'katex/dist/contrib/copy-tex';
-
-const Math = React.memo(({
-  content, throwOnError, errorColor, displayMode,
-}) => {
-  const ref = useRef(null);
-
-  useEffect(() => {
-    katex.render(content, ref.current, { throwOnError, errorColor, displayMode });
-  }, [content, throwOnError, errorColor, displayMode]);
-
-  return <span ref={ref} />;
-});
-Math.defaultProps = {
-  throwOnError: null,
-  errorColor: null,
-  displayMode: null,
-};
-Math.propTypes = {
-  content: PropTypes.string.isRequired,
-  throwOnError: PropTypes.bool,
-  errorColor: PropTypes.string,
-  displayMode: PropTypes.bool,
-};
-
-export default Math;

src/app/atoms/math/Math.scss

@@ -1,3 +0,0 @@
-.katex-display {
-  margin: 0 !important;
-}

src/app/atoms/modal/RawModal.jsx

@@ -42,6 +42,7 @@ function RawModal({
       shouldCloseOnEsc={closeFromOutside}
       shouldCloseOnOverlayClick={closeFromOutside}
       shouldReturnFocusAfterClose={false}
+      closeTimeoutMS={300}
     >
       {children}
     </Modal>

src/app/atoms/modal/RawModal.scss

@@ -1,9 +1,33 @@
+.ReactModal__Overlay {
+  opacity: 0;
+  transition: opacity 200ms var(--fluid-slide-up);
+}
+.ReactModal__Overlay--after-open{
+  opacity: 1;
+}
+.ReactModal__Overlay--before-close{
+  opacity: 0;
+}
+
+.ReactModal__Content {
+  transform: translateY(100%);
+  transition: transform 200ms var(--fluid-slide-up);
+}
+
+.ReactModal__Content--after-open{
+  transform: translateY(0);
+}
+
+.ReactModal__Content--before-close{
+  transform: translateY(100%);
+}
+
 .raw-modal {
   --small-modal-width: 525px;
   --medium-modal-width: 712px;
   --large-modal-width: 1024px;
 
-  position: relative;
+
   width: 100%;
   max-height: 100%;
   border-radius: var(--bo-radius);
@@ -36,31 +60,4 @@
     height: 100%;
     background-color: var(--bg-overlay);
   }
-}
-
-.ReactModal__Overlay {
-  animation: raw-modal--overlay 150ms;
-}
-
-.ReactModal__Content {
-  animation: raw-modal--content 150ms;
-}
-
-@keyframes raw-modal--content {
-  0% {
-    transform: translateY(100px);
-    opacity: .5;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-@keyframes raw-modal--overlay {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
+}

src/app/atoms/system-icons/RawIcon.jsx

@@ -2,18 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './RawIcon.scss';
 
-function RawIcon({ color, size, src, isImage }) {
+function RawIcon({
+  color, size, src, isImage,
+}) {
   const style = {};
   if (color !== null) style.backgroundColor = color;
   if (isImage) {
     style.backgroundColor = 'transparent';
-    style.backgroundImage = `url("${src}")`;
+    style.backgroundImage = `url(${src})`;
   } else {
-    style.WebkitMaskImage = `url("${src}")`;
-    style.maskImage = `url("${src}")`;
+    style.WebkitMaskImage = `url(${src})`;
+    style.maskImage = `url(${src})`;
   }
 
-  return <span className={`ic-raw ic-raw-${size}`} style={style} />;
+  return <span className={`ic-raw ic-raw-${size}`} style={style}> </span>;
 }
 
 RawIcon.defaultProps = {

src/app/atoms/tabs/Tabs.jsx

@@ -74,7 +74,7 @@ Tabs.defaultProps = {
 
 Tabs.propTypes = {
   items: PropTypes.arrayOf(
-    PropTypes.shape({
+    PropTypes.exact({
       iconSrc: PropTypes.string,
       text: PropTypes.string,
       disabled: PropTypes.bool,
@@ -84,4 +84,4 @@ Tabs.propTypes = {
   onSelect: PropTypes.func.isRequired,
 };
 
-export default Tabs;
+export { Tabs as default };

src/app/atoms/time/Time.jsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import dateFormat from 'dateformat';
-import { isInSameDay } from '../../../util/common';
-
-function Time({ timestamp, fullTime }) {
-  const date = new Date(timestamp);
-
-  const formattedFullTime = dateFormat(date, 'dd mmmm yyyy, hh:MM TT');
-  let formattedDate = formattedFullTime;
-
-  if (!fullTime) {
-    const compareDate = new Date();
-    const isToday = isInSameDay(date, compareDate);
-    compareDate.setDate(compareDate.getDate() - 1);
-    const isYesterday = isInSameDay(date, compareDate);
-
-    formattedDate = dateFormat(date, isToday || isYesterday ? 'hh:MM TT' : 'dd/mm/yyyy');
-    if (isYesterday) {
-      formattedDate = `Yesterday, ${formattedDate}`;
-    }
-  }
-
-  return (
-    <time
-      dateTime={date.toISOString()}
-      title={formattedFullTime}
-    >
-      {formattedDate}
-    </time>
-  );
-}
-
-Time.defaultProps = {
-  fullTime: false,
-};
-
-Time.propTypes = {
-  timestamp: PropTypes.number.isRequired,
-  fullTime: PropTypes.bool,
-};
-
-export default Time;

src/app/hooks/useAccountData.js

@@ -1,22 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
-
-import initMatrix from '../../client/initMatrix';
-
-export function useAccountData(eventType) {
-  const mx = initMatrix.matrixClient;
-  const [event, setEvent] = useState(mx.getAccountData(eventType));
-
-  useEffect(() => {
-    const handleChange = (mEvent) => {
-      if (mEvent.getType() !== eventType) return;
-      setEvent(mEvent);
-    };
-    mx.on('accountData', handleChange);
-    return () => {
-      mx.removeListener('accountData', handleChange);
-    };
-  }, [eventType]);
-
-  return event;
-}

src/app/hooks/useCrossSigningStatus.js

@@ -1,25 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
-
-import initMatrix from '../../client/initMatrix';
-import { hasCrossSigningAccountData } from '../../util/matrixUtil';
-
-export function useCrossSigningStatus() {
-  const mx = initMatrix.matrixClient;
-  const [isCSEnabled, setIsCSEnabled] = useState(hasCrossSigningAccountData());
-
-  useEffect(() => {
-    if (isCSEnabled) return null;
-    const handleAccountData = (event) => {
-      if (event.getType() === 'm.cross_signing.master') {
-        setIsCSEnabled(true);
-      }
-    };
-
-    mx.on('accountData', handleAccountData);
-    return () => {
-      mx.removeListener('accountData', handleAccountData);
-    };
-  }, [isCSEnabled === false]);
-  return isCSEnabled;
-}

src/app/hooks/useDeviceList.js

@@ -1,32 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
-
-import initMatrix from '../../client/initMatrix';
-
-export function useDeviceList() {
-  const mx = initMatrix.matrixClient;
-  const [deviceList, setDeviceList] = useState(null);
-
-  useEffect(() => {
-    let isMounted = true;
-
-    const updateDevices = () => mx.getDevices().then((data) => {
-      if (!isMounted) return;
-      setDeviceList(data.devices || []);
-    });
-    updateDevices();
-
-    const handleDevicesUpdate = (users) => {
-      if (users.includes(mx.getUserId())) {
-        updateDevices();
-      }
-    };
-
-    mx.on('crypto.devicesUpdated', handleDevicesUpdate);
-    return () => {
-      mx.removeListener('crypto.devicesUpdated', handleDevicesUpdate);
-      isMounted = false;
-    };
-  }, []);
-  return deviceList;
-}

src/app/molecules/confirm-dialog/ConfirmDialog.jsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './ConfirmDialog.scss';
-
-import { openReusableDialog } from '../../../client/action/navigation';
-
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-
-function ConfirmDialog({
-  desc, actionTitle, actionType, onComplete,
-}) {
-  return (
-    <div className="confirm-dialog">
-      <Text>{desc}</Text>
-      <div className="confirm-dialog__btn">
-        <Button variant={actionType} onClick={() => onComplete(true)}>{actionTitle}</Button>
-        <Button onClick={() => onComplete(false)}>Cancel</Button>
-      </div>
-    </div>
-  );
-}
-ConfirmDialog.propTypes = {
-  desc: PropTypes.string.isRequired,
-  actionTitle: PropTypes.string.isRequired,
-  actionType: PropTypes.oneOf(['primary', 'positive', 'danger', 'caution']).isRequired,
-  onComplete: PropTypes.func.isRequired,
-};
-
-/**
- * @param {string} title title of confirm dialog
- * @param {string} desc description of confirm dialog
- * @param {string} actionTitle title of main action to take
- * @param {'primary' | 'positive' | 'danger' | 'caution'} actionType type of action. default=primary
- * @return {Promise<boolean>} does it get's confirmed or not
- */
-// eslint-disable-next-line import/prefer-default-export
-export const confirmDialog = (title, desc, actionTitle, actionType = 'primary') => new Promise((resolve) => {
-  let isCompleted = false;
-  openReusableDialog(
-    <Text variant="s1" weight="medium">{title}</Text>,
-    (requestClose) => (
-      <ConfirmDialog
-        desc={desc}
-        actionTitle={actionTitle}
-        actionType={actionType}
-        onComplete={(isConfirmed) => {
-          isCompleted = true;
-          resolve(isConfirmed);
-          requestClose();
-        }}
-      />
-    ),
-    () => {
-      if (!isCompleted) resolve(false);
-    },
-  );
-});

src/app/molecules/confirm-dialog/ConfirmDialog.scss

@@ -1,11 +0,0 @@
-.confirm-dialog {
-  padding: var(--sp-normal);
-
-  & > .text {
-    padding-bottom: var(--sp-normal);
-  }
-  &__btn {
-    display: flex;
-    gap: var(--sp-normal);
-  }
-}

src/app/molecules/dialog/Dialog.jsx

@@ -12,11 +12,10 @@ import RawModal from '../../atoms/modal/RawModal';
 function Dialog({
   className, isOpen, title, onAfterOpen, onAfterClose,
   contentOptions, onRequestClose, closeFromOutside, children,
-  invisibleScroll,
 }) {
   return (
     <RawModal
-      className={`${className === null ? '' : `${className} `}dialog-modal`}
+      className={`${className === null ? '' : `${className} `}dialog-model`}
       isOpen={isOpen}
       onAfterOpen={onAfterOpen}
       onAfterClose={onAfterClose}
@@ -37,7 +36,7 @@ function Dialog({
             {contentOptions}
           </Header>
           <div className="dialog__content__wrapper">
-            <ScrollView autoHide={!invisibleScroll} invisible={invisibleScroll}>
+            <ScrollView autoHide>
               <div className="dialog__content-container">
                 {children}
               </div>
@@ -56,7 +55,6 @@ Dialog.defaultProps = {
   onAfterClose: null,
   onRequestClose: null,
   closeFromOutside: true,
-  invisibleScroll: false,
 };
 
 Dialog.propTypes = {
@@ -69,7 +67,6 @@ Dialog.propTypes = {
   onRequestClose: PropTypes.func,
   closeFromOutside: PropTypes.bool,
   children: PropTypes.node.isRequired,
-  invisibleScroll: PropTypes.bool,
 };
 
 export default Dialog;

src/app/molecules/dialog/Dialog.scss

@@ -1,4 +1,4 @@
-.dialog-modal {
+.dialog-model {
   --modal-height: 656px;
   max-height: min(100%, var(--modal-height));
   display: flex;
@@ -21,3 +21,8 @@
     flex-direction: column;
   }
 }
+
+.dialog__content-container {
+  padding-top: var(--sp-extra-tight);
+  padding-bottom: var(--sp-extra-loose);
+}

src/app/molecules/dialog/ReusableDialog.jsx

@@ -1,49 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-import cons from '../../../client/state/cons';
-
-import navigation from '../../../client/state/navigation';
-import IconButton from '../../atoms/button/IconButton';
-import Dialog from './Dialog';
-
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
-
-function ReusableDialog() {
-  const [isOpen, setIsOpen] = useState(false);
-  const [data, setData] = useState(null);
-
-  useEffect(() => {
-    const handleOpen = (title, render, afterClose) => {
-      setIsOpen(true);
-      setData({ title, render, afterClose });
-    };
-    navigation.on(cons.events.navigation.REUSABLE_DIALOG_OPENED, handleOpen);
-    return () => {
-      navigation.removeListener(cons.events.navigation.REUSABLE_DIALOG_OPENED, handleOpen);
-    };
-  }, []);
-
-  const handleAfterClose = () => {
-    data.afterClose?.();
-    setData(null);
-  };
-
-  const handleRequestClose = () => {
-    setIsOpen(false);
-  };
-
-  return (
-    <Dialog
-      isOpen={isOpen}
-      title={data?.title || ''}
-      onAfterClose={handleAfterClose}
-      onRequestClose={handleRequestClose}
-      contentOptions={<IconButton src={CrossIC} onClick={handleRequestClose} tooltip="Close" />}
-      invisibleScroll
-    >
-      {data?.render(handleRequestClose) || <div />}
-    </Dialog>
-  );
-}
-
-export default ReusableDialog;

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

@@ -1,174 +0,0 @@
-import React from 'react';
-
-import initMatrix from '../../../client/initMatrix';
-import { openReusableContextMenu } from '../../../client/action/navigation';
-import { getEventCords } from '../../../util/common';
-
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import SettingTile from '../setting-tile/SettingTile';
-
-import NotificationSelector from './NotificationSelector';
-
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
-
-import { useAccountData } from '../../hooks/useAccountData';
-
-export const notifType = {
-  ON: 'on',
-  OFF: 'off',
-  NOISY: 'noisy',
-};
-export const typeToLabel = {
-  [notifType.ON]: 'On',
-  [notifType.OFF]: 'Off',
-  [notifType.NOISY]: 'Noisy',
-};
-Object.freeze(notifType);
-
-const DM = '.m.rule.room_one_to_one';
-const ENC_DM = '.m.rule.encrypted_room_one_to_one';
-const ROOM = '.m.rule.message';
-const ENC_ROOM = '.m.rule.encrypted';
-
-export function getActionType(rule) {
-  const { actions } = rule;
-  if (actions.find((action) => action?.set_tweak === 'sound')) return notifType.NOISY;
-  if (actions.find((action) => action?.set_tweak === 'highlight')) return notifType.ON;
-  if (actions.find((action) => action === 'dont_notify')) return notifType.OFF;
-  return notifType.OFF;
-}
-
-export function getTypeActions(type, highlightValue = false) {
-  if (type === notifType.OFF) return ['dont_notify'];
-
-  const highlight = { set_tweak: 'highlight' };
-  if (typeof highlightValue === 'boolean') highlight.value = highlightValue;
-  if (type === notifType.ON) return ['notify', highlight];
-
-  const sound = { set_tweak: 'sound', value: 'default' };
-  return ['notify', sound, highlight];
-}
-
-function useGlobalNotif() {
-  const mx = initMatrix.matrixClient;
-  const pushRules = useAccountData('m.push_rules')?.getContent();
-  const underride = pushRules?.global?.underride ?? [];
-  const rulesToType = {
-    [DM]: notifType.ON,
-    [ENC_DM]: notifType.ON,
-    [ROOM]: notifType.NOISY,
-    [ENC_ROOM]: notifType.NOISY,
-  };
-
-  const getRuleCondition = (rule) => {
-    const condition = [];
-    if (rule === DM || rule === ENC_DM) {
-      condition.push({ kind: 'room_member_count', is: '2' });
-    }
-    condition.push({
-      kind: 'event_match',
-      key: 'type',
-      pattern: [ENC_DM, ENC_ROOM].includes(rule) ? 'm.room.encrypted' : 'm.room.message',
-    });
-    return condition;
-  };
-
-  const setRule = (rule, type) => {
-    const content = pushRules ?? {};
-    if (!content.global) content.global = {};
-    if (!content.global.underride) content.global.underride = [];
-    const ur = content.global.underride;
-    let ruleContent = ur.find((action) => action?.rule_id === rule);
-    if (!ruleContent) {
-      ruleContent = {
-        conditions: getRuleCondition(type),
-        actions: [],
-        rule_id: rule,
-        default: true,
-        enabled: true,
-      };
-      ur.push(ruleContent);
-    }
-    ruleContent.actions = getTypeActions(type);
-
-    mx.setAccountData('m.push_rules', content);
-  };
-
-  const dmRule = underride.find((rule) => rule.rule_id === DM);
-  const encDmRule = underride.find((rule) => rule.rule_id === ENC_DM);
-  const roomRule = underride.find((rule) => rule.rule_id === ROOM);
-  const encRoomRule = underride.find((rule) => rule.rule_id === ENC_ROOM);
-
-  if (dmRule) rulesToType[DM] = getActionType(dmRule);
-  if (encDmRule) rulesToType[ENC_DM] = getActionType(encDmRule);
-  if (roomRule) rulesToType[ROOM] = getActionType(roomRule);
-  if (encRoomRule) rulesToType[ENC_ROOM] = getActionType(encRoomRule);
-
-  return [rulesToType, setRule];
-}
-
-function GlobalNotification() {
-  const [rulesToType, setRule] = useGlobalNotif();
-
-  const onSelect = (evt, rule) => {
-    openReusableContextMenu(
-      'bottom',
-      getEventCords(evt, '.btn-surface'),
-      (requestClose) => (
-        <NotificationSelector
-          value={rulesToType[rule]}
-          onSelect={(value) => {
-            if (rulesToType[rule] !== value) setRule(rule, value);
-            requestClose();
-          }}
-        />
-      ),
-    );
-  };
-
-  return (
-    <div className="global-notification">
-      <MenuHeader>Global Notifications</MenuHeader>
-      <SettingTile
-        title="Direct messages"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, DM)} iconSrc={ChevronBottomIC}>
-            { typeToLabel[rulesToType[DM]] }
-          </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all direct message.</Text>}
-      />
-      <SettingTile
-        title="Encrypted direct messages"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, ENC_DM)} iconSrc={ChevronBottomIC}>
-            {typeToLabel[rulesToType[ENC_DM]]}
-          </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all encrypted direct message.</Text>}
-      />
-      <SettingTile
-        title="Rooms messages"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, ROOM)} iconSrc={ChevronBottomIC}>
-            {typeToLabel[rulesToType[ROOM]]}
-          </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all room message.</Text>}
-      />
-      <SettingTile
-        title="Encrypted rooms messages"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, ENC_ROOM)} iconSrc={ChevronBottomIC}>
-            {typeToLabel[rulesToType[ENC_ROOM]]}
-          </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all encrypted room message.</Text>}
-      />
-    </div>
-  );
-}
-
-export default GlobalNotification;

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

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

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

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

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

@@ -1,239 +0,0 @@
-import React from 'react';
-import './KeywordNotification.scss';
-
-import initMatrix from '../../../client/initMatrix';
-import { openReusableContextMenu } from '../../../client/action/navigation';
-import { getEventCords } from '../../../util/common';
-
-import Text from '../../atoms/text/Text';
-import Chip from '../../atoms/chip/Chip';
-import Input from '../../atoms/input/Input';
-import Button from '../../atoms/button/Button';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import SettingTile from '../setting-tile/SettingTile';
-
-import NotificationSelector from './NotificationSelector';
-
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
-
-import { useAccountData } from '../../hooks/useAccountData';
-import {
-  notifType, typeToLabel, getActionType, getTypeActions,
-} from './GlobalNotification';
-
-const DISPLAY_NAME = '.m.rule.contains_display_name';
-const ROOM_PING = '.m.rule.roomnotif';
-const USERNAME = '.m.rule.contains_user_name';
-const KEYWORD = 'keyword';
-
-function useKeywordNotif() {
-  const mx = initMatrix.matrixClient;
-  const pushRules = useAccountData('m.push_rules')?.getContent();
-  const override = pushRules?.global?.override ?? [];
-  const content = pushRules?.global?.content ?? [];
-
-  const rulesToType = {
-    [DISPLAY_NAME]: notifType.NOISY,
-    [ROOM_PING]: notifType.NOISY,
-    [USERNAME]: notifType.NOISY,
-  };
-
-  const setRule = (rule, type) => {
-    const evtContent = pushRules ?? {};
-    if (!evtContent.global) evtContent.global = {};
-    if (!evtContent.global.override) evtContent.global.override = [];
-    if (!evtContent.global.content) evtContent.global.content = [];
-    const or = evtContent.global.override;
-    const ct = evtContent.global.content;
-
-    if (rule === DISPLAY_NAME || rule === ROOM_PING) {
-      let orRule = or.find((r) => r?.rule_id === rule);
-      if (!orRule) {
-        orRule = {
-          conditions: [],
-          actions: [],
-          rule_id: rule,
-          default: true,
-          enabled: true,
-        };
-        or.push(orRule);
-      }
-      if (rule === DISPLAY_NAME) {
-        orRule.conditions = [{ kind: 'contains_display_name' }];
-        orRule.actions = getTypeActions(type, true);
-      } else {
-        orRule.conditions = [
-          { kind: 'event_match', key: 'content.body', pattern: '@room' },
-          { kind: 'sender_notification_permission', key: 'room' },
-        ];
-        orRule.actions = getTypeActions(type, true);
-      }
-    } else if (rule === USERNAME) {
-      let usernameRule = ct.find((r) => r?.rule_id === rule);
-      if (!usernameRule) {
-        const userId = mx.getUserId();
-        const username = userId.match(/^@?(\S+):(\S+)$/)?.[1] ?? userId;
-        usernameRule = {
-          actions: [],
-          default: true,
-          enabled: true,
-          pattern: username,
-          rule_id: rule,
-        };
-        ct.push(usernameRule);
-      }
-      usernameRule.actions = getTypeActions(type, true);
-    } else {
-      const keyRules = ct.filter((r) => r.rule_id !== USERNAME);
-      keyRules.forEach((r) => {
-        // eslint-disable-next-line no-param-reassign
-        r.actions = getTypeActions(type, true);
-      });
-    }
-
-    mx.setAccountData('m.push_rules', evtContent);
-  };
-
-  const addKeyword = (keyword) => {
-    if (content.find((r) => r.rule_id === keyword)) return;
-    content.push({
-      rule_id: keyword,
-      pattern: keyword,
-      enabled: true,
-      default: false,
-      actions: getTypeActions(rulesToType[KEYWORD] ?? notifType.NOISY, true),
-    });
-    mx.setAccountData('m.push_rules', pushRules);
-  };
-  const removeKeyword = (rule) => {
-    pushRules.global.content = content.filter((r) => r.rule_id !== rule.rule_id);
-    mx.setAccountData('m.push_rules', pushRules);
-  };
-
-  const dsRule = override.find((rule) => rule.rule_id === DISPLAY_NAME);
-  const roomRule = override.find((rule) => rule.rule_id === ROOM_PING);
-  const usernameRule = content.find((rule) => rule.rule_id === USERNAME);
-  const keywordRule = content.find((rule) => rule.rule_id !== USERNAME);
-
-  if (dsRule) rulesToType[DISPLAY_NAME] = getActionType(dsRule);
-  if (roomRule) rulesToType[ROOM_PING] = getActionType(roomRule);
-  if (usernameRule) rulesToType[USERNAME] = getActionType(usernameRule);
-  if (keywordRule) rulesToType[KEYWORD] = getActionType(keywordRule);
-
-  return {
-    rulesToType,
-    pushRules,
-    setRule,
-    addKeyword,
-    removeKeyword,
-  };
-}
-
-function GlobalNotification() {
-  const {
-    rulesToType,
-    pushRules,
-    setRule,
-    addKeyword,
-    removeKeyword,
-  } = useKeywordNotif();
-
-  const keywordRules = pushRules?.global?.content.filter((r) => r.rule_id !== USERNAME) ?? [];
-
-  const onSelect = (evt, rule) => {
-    openReusableContextMenu(
-      'bottom',
-      getEventCords(evt, '.btn-surface'),
-      (requestClose) => (
-        <NotificationSelector
-          value={rulesToType[rule]}
-          onSelect={(value) => {
-            if (rulesToType[rule] !== value) setRule(rule, value);
-            requestClose();
-          }}
-        />
-      ),
-    );
-  };
-
-  const handleSubmit = (evt) => {
-    evt.preventDefault();
-    const { keywordInput } = evt.target.elements;
-    const value = keywordInput.value.trim();
-    if (value === '') return;
-    addKeyword(value);
-    keywordInput.value = '';
-  };
-
-  return (
-    <div className="keyword-notification">
-      <MenuHeader>Mentions & keywords</MenuHeader>
-      <SettingTile
-        title="Message containing my display name"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, DISPLAY_NAME)} iconSrc={ChevronBottomIC}>
-            { typeToLabel[rulesToType[DISPLAY_NAME]] }
-          </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all message containing your display name.</Text>}
-      />
-      <SettingTile
-        title="Message containing my username"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, USERNAME)} iconSrc={ChevronBottomIC}>
-            { typeToLabel[rulesToType[USERNAME]] }
-          </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all message containing your username.</Text>}
-      />
-      <SettingTile
-        title="Message containing @room"
-        options={(
-          <Button onClick={(evt) => onSelect(evt, ROOM_PING)} iconSrc={ChevronBottomIC}>
-            {typeToLabel[rulesToType[ROOM_PING]]}
-          </Button>
-        )}
-        content={<Text variant="b3">Default notification settings for all messages containing @room.</Text>}
-      />
-      { rulesToType[KEYWORD] && (
-        <SettingTile
-          title="Message containing keywords"
-          options={(
-            <Button onClick={(evt) => onSelect(evt, KEYWORD)} iconSrc={ChevronBottomIC}>
-              {typeToLabel[rulesToType[KEYWORD]]}
-            </Button>
-          )}
-          content={<Text variant="b3">Default notification settings for all message containing keywords.</Text>}
-        />
-      )}
-      <SettingTile
-        title="Keywords"
-        content={(
-          <div className="keyword-notification__keyword">
-            <Text variant="b3">Get notification when a message contains keyword.</Text>
-            <form onSubmit={handleSubmit}>
-              <Input name="keywordInput" required />
-              <Button variant="primary" type="submit">Add</Button>
-            </form>
-            {keywordRules.length > 0 && (
-              <div>
-                {keywordRules.map((rule) => (
-                  <Chip
-                    iconSrc={CrossIC}
-                    key={rule.rule_id}
-                    text={rule.pattern}
-                    iconColor={CrossIC}
-                    onClick={() => removeKeyword(rule)}
-                  />
-                ))}
-              </div>
-            )}
-          </div>
-        )}
-      />
-    </div>
-  );
-}
-
-export default GlobalNotification;

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

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

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

@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
-
-import CheckIC from '../../../../public/res/ic/outlined/check.svg';
-
-function NotificationSelector({
-  value, onSelect,
-}) {
-  return (
-    <div>
-      <MenuHeader>Notification</MenuHeader>
-      <MenuItem iconSrc={value === 'off' ? CheckIC : null} variant={value === 'off' ? 'positive' : 'surface'} onClick={() => onSelect('off')}>Off</MenuItem>
-      <MenuItem iconSrc={value === 'on' ? CheckIC : null} variant={value === 'on' ? 'positive' : 'surface'} onClick={() => onSelect('on')}>On</MenuItem>
-      <MenuItem iconSrc={value === 'noisy' ? CheckIC : null} variant={value === 'noisy' ? 'positive' : 'surface'} onClick={() => onSelect('noisy')}>Noisy</MenuItem>
-    </div>
-  );
-}
-
-NotificationSelector.propTypes = {
-  value: PropTypes.oneOf(['off', 'on', 'noisy']).isRequired,
-  onSelect: PropTypes.func.isRequired,
-};
-
-export default NotificationSelector;

src/app/molecules/image-lightbox/ImageLightbox.jsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './ImageLightbox.scss';
-import FileSaver from 'file-saver';
-
-import Text from '../../atoms/text/Text';
-import RawModal from '../../atoms/modal/RawModal';
-import IconButton from '../../atoms/button/IconButton';
-
-import DownloadSVG from '../../../../public/res/ic/outlined/download.svg';
-import ExternalSVG from '../../../../public/res/ic/outlined/external.svg';
-
-function ImageLightbox({
-  url, alt, isOpen, onRequestClose,
-}) {
-  const handleDownload = () => {
-    FileSaver.saveAs(url, alt);
-  };
-
-  return (
-    <RawModal
-      className="image-lightbox__modal"
-      overlayClassName="image-lightbox__overlay"
-      isOpen={isOpen}
-      onRequestClose={onRequestClose}
-      size="large"
-    >
-      <div className="image-lightbox__header">
-        <Text variant="b2" weight="medium">{alt}</Text>
-        <IconButton onClick={() => window.open(url)} size="small" src={ExternalSVG} />
-        <IconButton onClick={handleDownload} size="small" src={DownloadSVG} />
-      </div>
-      <div className="image-lightbox__content">
-        <img src={url} alt={alt} />
-      </div>
-    </RawModal>
-  );
-}
-
-ImageLightbox.propTypes = {
-  url: PropTypes.string.isRequired,
-  alt: PropTypes.string.isRequired,
-  isOpen: PropTypes.bool.isRequired,
-  onRequestClose: PropTypes.func.isRequired,
-};
-
-export default ImageLightbox;

src/app/molecules/image-lightbox/ImageLightbox.scss

@@ -1,50 +0,0 @@
-@use '../../partials/flex';
-@use '../../partials/text';
-
-.image-lightbox__modal {
-  box-shadow: none;
-  width: unset;
-  gap: var(--sp-normal);
-
-  border-radius: 0;
-  pointer-events: none;
-
-  & .text {
-    color: white;
-  }
-  & .ic-raw {
-    background-color: white;
-  }
-}
-
-.image-lightbox__overlay {
-  background-color: var(--bg-overlay-low);
-}
-
-
-.image-lightbox__header > *,
-.image-lightbox__content > * {
-  pointer-events: all;
-}
-.image-lightbox__header {
-  display: flex;
-  align-items: center;
-
-  & > .text {
-    @extend .cp-fx__item-one;
-    @extend .cp-txt__ellipsis;
-  }
-}
-.image-lightbox__content {
-  display: flex;
-  justify-content: center;
-  max-height: 80vh;
-
-  & img {
-    background-color: var(--bg-surface-low);
-    object-fit: contain;
-    max-width: 100%;
-    max-height: 100%;
-    border-radius: var(--bo-radius);
-  }
-}

src/app/molecules/image-pack/ImagePack.jsx

@@ -1,469 +0,0 @@
-import React, {
-  useState, useMemo, useReducer, useEffect,
-} from 'react';
-import PropTypes from 'prop-types';
-import './ImagePack.scss';
-
-import initMatrix from '../../../client/initMatrix';
-import { openReusableDialog } from '../../../client/action/navigation';
-import { suffixRename } from '../../../util/common';
-
-import Button from '../../atoms/button/Button';
-import Text from '../../atoms/text/Text';
-import Input from '../../atoms/input/Input';
-import Checkbox from '../../atoms/button/Checkbox';
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
-
-import { ImagePack as ImagePackBuilder } from '../../organisms/emoji-board/custom-emoji';
-import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
-import ImagePackProfile from './ImagePackProfile';
-import ImagePackItem from './ImagePackItem';
-import ImagePackUpload from './ImagePackUpload';
-
-const renameImagePackItem = (shortcode) => new Promise((resolve) => {
-  let isCompleted = false;
-
-  openReusableDialog(
-    <Text variant="s1" weight="medium">Rename</Text>,
-    (requestClose) => (
-      <div style={{ padding: 'var(--sp-normal)' }}>
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            const sc = e.target.shortcode.value;
-            if (sc.trim() === '') return;
-            isCompleted = true;
-            resolve(sc.trim());
-            requestClose();
-          }}
-        >
-          <Input
-            value={shortcode}
-            name="shortcode"
-            label="Shortcode"
-            autoFocus
-            required
-          />
-          <div style={{ height: 'var(--sp-normal)' }} />
-          <Button variant="primary" type="submit">Rename</Button>
-        </form>
-      </div>
-    ),
-    () => {
-      if (!isCompleted) resolve(null);
-    },
-  );
-});
-
-function getUsage(usage) {
-  if (usage.includes('emoticon') && usage.includes('sticker')) return 'both';
-  if (usage.includes('emoticon')) return 'emoticon';
-  if (usage.includes('sticker')) return 'sticker';
-
-  return 'both';
-}
-
-function isGlobalPack(roomId, stateKey) {
-  const mx = initMatrix.matrixClient;
-  const globalContent = mx.getAccountData('im.ponies.emote_rooms')?.getContent();
-  if (typeof globalContent !== 'object') return false;
-
-  const { rooms } = globalContent;
-  if (typeof rooms !== 'object') return false;
-
-  return rooms[roomId]?.[stateKey] !== undefined;
-}
-
-function useRoomImagePack(roomId, stateKey) {
-  const mx = initMatrix.matrixClient;
-  const room = mx.getRoom(roomId);
-
-  const packEvent = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
-  const pack = useMemo(() => (
-    ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent())
-  ), [room, stateKey]);
-
-  const sendPackContent = (content) => {
-    mx.sendStateEvent(roomId, 'im.ponies.room_emotes', content, stateKey);
-  };
-
-  return {
-    pack,
-    sendPackContent,
-  };
-}
-
-function useUserImagePack() {
-  const mx = initMatrix.matrixClient;
-  const packEvent = mx.getAccountData('im.ponies.user_emotes');
-  const pack = useMemo(() => (
-    ImagePackBuilder.parsePack(mx.getUserId(), packEvent?.getContent() ?? {
-      pack: { display_name: 'Personal' },
-      images: {},
-    })
-  ), []);
-
-  const sendPackContent = (content) => {
-    mx.setAccountData('im.ponies.user_emotes', content);
-  };
-
-  return {
-    pack,
-    sendPackContent,
-  };
-}
-
-function useImagePackHandles(pack, sendPackContent) {
-  const [, forceUpdate] = useReducer((count) => count + 1, 0);
-
-  const getNewKey = (key) => {
-    if (typeof key !== 'string') return undefined;
-    let newKey = key?.replace(/\s/g, '_');
-    if (pack.getImages().get(newKey)) {
-      newKey = suffixRename(
-        newKey,
-        (suffixedKey) => pack.getImages().get(suffixedKey),
-      );
-    }
-    return newKey;
-  };
-
-  const handleAvatarChange = (url) => {
-    pack.setAvatarUrl(url);
-    sendPackContent(pack.getContent());
-    forceUpdate();
-  };
-  const handleEditProfile = (name, attribution) => {
-    pack.setDisplayName(name);
-    pack.setAttribution(attribution);
-    sendPackContent(pack.getContent());
-    forceUpdate();
-  };
-  const handleUsageChange = (newUsage) => {
-    const usage = [];
-    if (newUsage === 'emoticon' || newUsage === 'both') usage.push('emoticon');
-    if (newUsage === 'sticker' || newUsage === 'both') usage.push('sticker');
-    pack.setUsage(usage);
-    pack.getImages().forEach((img) => pack.setImageUsage(img.shortcode, undefined));
-
-    sendPackContent(pack.getContent());
-    forceUpdate();
-  };
-
-  const handleRenameItem = async (key) => {
-    const newKey = getNewKey(await renameImagePackItem(key));
-
-    if (!newKey || newKey === key) return;
-    pack.updateImageKey(key, newKey);
-
-    sendPackContent(pack.getContent());
-    forceUpdate();
-  };
-  const handleDeleteItem = async (key) => {
-    const isConfirmed = await confirmDialog(
-      'Delete',
-      `Are you sure that you want to delete "${key}"?`,
-      'Delete',
-      'danger',
-    );
-    if (!isConfirmed) return;
-    pack.removeImage(key);
-
-    sendPackContent(pack.getContent());
-    forceUpdate();
-  };
-  const handleUsageItem = (key, newUsage) => {
-    const usage = [];
-    if (newUsage === 'emoticon' || newUsage === 'both') usage.push('emoticon');
-    if (newUsage === 'sticker' || newUsage === 'both') usage.push('sticker');
-    pack.setImageUsage(key, usage);
-
-    sendPackContent(pack.getContent());
-    forceUpdate();
-  };
-  const handleAddItem = (key, url) => {
-    const newKey = getNewKey(key);
-    if (!newKey || !url) return;
-
-    pack.addImage(newKey, {
-      url,
-    });
-
-    sendPackContent(pack.getContent());
-    forceUpdate();
-  };
-
-  return {
-    handleAvatarChange,
-    handleEditProfile,
-    handleUsageChange,
-    handleRenameItem,
-    handleDeleteItem,
-    handleUsageItem,
-    handleAddItem,
-  };
-}
-
-function addGlobalImagePack(mx, roomId, stateKey) {
-  const content = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? {};
-  if (!content.rooms) content.rooms = {};
-  if (!content.rooms[roomId]) content.rooms[roomId] = {};
-  content.rooms[roomId][stateKey] = {};
-  return mx.setAccountData('im.ponies.emote_rooms', content);
-}
-function removeGlobalImagePack(mx, roomId, stateKey) {
-  const content = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? {};
-  if (!content.rooms) return Promise.resolve();
-  if (!content.rooms[roomId]) return Promise.resolve();
-  delete content.rooms[roomId][stateKey];
-  if (Object.keys(content.rooms[roomId]).length === 0) {
-    delete content.rooms[roomId];
-  }
-  return mx.setAccountData('im.ponies.emote_rooms', content);
-}
-
-function ImagePack({ roomId, stateKey, handlePackDelete }) {
-  const mx = initMatrix.matrixClient;
-  const room = mx.getRoom(roomId);
-  const [viewMore, setViewMore] = useState(false);
-  const [isGlobal, setIsGlobal] = useState(isGlobalPack(roomId, stateKey));
-
-  const { pack, sendPackContent } = useRoomImagePack(roomId, stateKey);
-
-  const {
-    handleAvatarChange,
-    handleEditProfile,
-    handleUsageChange,
-    handleRenameItem,
-    handleDeleteItem,
-    handleUsageItem,
-    handleAddItem,
-  } = useImagePackHandles(pack, sendPackContent);
-
-  const handleGlobalChange = (isG) => {
-    setIsGlobal(isG);
-    if (isG) addGlobalImagePack(mx, roomId, stateKey);
-    else removeGlobalImagePack(mx, roomId, stateKey);
-  };
-
-  const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
-  const canChange = room.currentState.hasSufficientPowerLevelFor('state_default', myPowerlevel);
-
-  const handleDeletePack = async () => {
-    const isConfirmed = await confirmDialog(
-      'Delete Pack',
-      `Are you sure that you want to delete "${pack.displayName}"?`,
-      'Delete',
-      'danger',
-    );
-    if (!isConfirmed) return;
-    handlePackDelete(stateKey);
-  };
-
-  const images = [...pack.images].slice(0, viewMore ? pack.images.size : 2);
-
-  return (
-    <div className="image-pack">
-      <ImagePackProfile
-        avatarUrl={pack.avatarUrl ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, 'crop') : null}
-        displayName={pack.displayName ?? 'Unknown'}
-        attribution={pack.attribution}
-        usage={getUsage(pack.usage)}
-        onUsageChange={canChange ? handleUsageChange : null}
-        onAvatarChange={canChange ? handleAvatarChange : null}
-        onEditProfile={canChange ? handleEditProfile : null}
-      />
-      { canChange && (
-        <ImagePackUpload onUpload={handleAddItem} />
-      )}
-      { images.length === 0 ? null : (
-        <div>
-          <div className="image-pack__header">
-            <Text variant="b3">Image</Text>
-            <Text variant="b3">Shortcode</Text>
-            <Text variant="b3">Usage</Text>
-          </div>
-          {images.map(([shortcode, image]) => (
-            <ImagePackItem
-              key={shortcode}
-              url={mx.mxcUrlToHttp(image.mxc)}
-              shortcode={shortcode}
-              usage={getUsage(image.usage)}
-              onUsageChange={canChange ? handleUsageItem : undefined}
-              onDelete={canChange ? handleDeleteItem : undefined}
-              onRename={canChange ? handleRenameItem : undefined}
-            />
-          ))}
-        </div>
-      )}
-      {(pack.images.size > 2 || handlePackDelete) && (
-        <div className="image-pack__footer">
-          {pack.images.size > 2 && (
-            <Button onClick={() => setViewMore(!viewMore)}>
-              {
-                viewMore
-                  ? 'View less'
-                  : `View ${pack.images.size - 2} more`
-              }
-            </Button>
-          )}
-          { handlePackDelete && <Button variant="danger" onClick={handleDeletePack}>Delete Pack</Button>}
-        </div>
-      )}
-      <div className="image-pack__global">
-        <Checkbox variant="positive" onToggle={handleGlobalChange} isActive={isGlobal} />
-        <div>
-          <Text variant="b2">Use globally</Text>
-          <Text variant="b3">Add this pack to your account to use in all rooms.</Text>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-ImagePack.defaultProps = {
-  handlePackDelete: null,
-};
-ImagePack.propTypes = {
-  roomId: PropTypes.string.isRequired,
-  stateKey: PropTypes.string.isRequired,
-  handlePackDelete: PropTypes.func,
-};
-
-function ImagePackUser() {
-  const mx = initMatrix.matrixClient;
-  const [viewMore, setViewMore] = useState(false);
-
-  const { pack, sendPackContent } = useUserImagePack();
-
-  const {
-    handleAvatarChange,
-    handleEditProfile,
-    handleUsageChange,
-    handleRenameItem,
-    handleDeleteItem,
-    handleUsageItem,
-    handleAddItem,
-  } = useImagePackHandles(pack, sendPackContent);
-
-  const images = [...pack.images].slice(0, viewMore ? pack.images.size : 2);
-
-  return (
-    <div className="image-pack">
-      <ImagePackProfile
-        avatarUrl={pack.avatarUrl ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, 'crop') : null}
-        displayName={pack.displayName ?? 'Personal'}
-        attribution={pack.attribution}
-        usage={getUsage(pack.usage)}
-        onUsageChange={handleUsageChange}
-        onAvatarChange={handleAvatarChange}
-        onEditProfile={handleEditProfile}
-      />
-      <ImagePackUpload onUpload={handleAddItem} />
-      { images.length === 0 ? null : (
-        <div>
-          <div className="image-pack__header">
-            <Text variant="b3">Image</Text>
-            <Text variant="b3">Shortcode</Text>
-            <Text variant="b3">Usage</Text>
-          </div>
-          {images.map(([shortcode, image]) => (
-            <ImagePackItem
-              key={shortcode}
-              url={mx.mxcUrlToHttp(image.mxc)}
-              shortcode={shortcode}
-              usage={getUsage(image.usage)}
-              onUsageChange={handleUsageItem}
-              onDelete={handleDeleteItem}
-              onRename={handleRenameItem}
-            />
-          ))}
-        </div>
-      )}
-      {(pack.images.size > 2) && (
-        <div className="image-pack__footer">
-          <Button onClick={() => setViewMore(!viewMore)}>
-            {
-              viewMore
-                ? 'View less'
-                : `View ${pack.images.size - 2} more`
-            }
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function useGlobalImagePack() {
-  const [, forceUpdate] = useReducer((count) => count + 1, 0);
-  const mx = initMatrix.matrixClient;
-
-  const roomIdToStateKeys = new Map();
-  const globalContent = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? { rooms: {} };
-  const { rooms } = globalContent;
-
-  Object.keys(rooms).forEach((roomId) => {
-    if (typeof rooms[roomId] !== 'object') return;
-    const room = mx.getRoom(roomId);
-    const stateKeys = Object.keys(rooms[roomId]);
-    if (!room || stateKeys.length === 0) return;
-    roomIdToStateKeys.set(roomId, stateKeys);
-  });
-
-  useEffect(() => {
-    const handleEvent = (event) => {
-      if (event.getType() === 'im.ponies.emote_rooms') forceUpdate();
-    };
-    mx.addListener('accountData', handleEvent);
-    return () => {
-      mx.removeListener('accountData', handleEvent);
-    };
-  }, []);
-
-  return roomIdToStateKeys;
-}
-
-function ImagePackGlobal() {
-  const mx = initMatrix.matrixClient;
-  const roomIdToStateKeys = useGlobalImagePack();
-
-  const handleChange = (roomId, stateKey) => {
-    removeGlobalImagePack(mx, roomId, stateKey);
-  };
-
-  return (
-    <div className="image-pack-global">
-      <MenuHeader>Global packs</MenuHeader>
-      <div>
-        {
-          roomIdToStateKeys.size > 0
-            ? [...roomIdToStateKeys].map(([roomId, stateKeys]) => {
-              const room = mx.getRoom(roomId);
-              return (
-                stateKeys.map((stateKey) => {
-                  const data = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
-                  const pack = ImagePackBuilder.parsePack(data?.getId(), data?.getContent());
-                  if (!pack) return null;
-                  return (
-                    <div className="image-pack__global" key={pack.id}>
-                      <Checkbox variant="positive" onToggle={() => handleChange(roomId, stateKey)} isActive />
-                      <div>
-                        <Text variant="b2">{pack.displayName ?? 'Unknown'}</Text>
-                        <Text variant="b3">{room.name}</Text>
-                      </div>
-                    </div>
-                  );
-                })
-              );
-            })
-            : <div className="image-pack-global__empty"><Text>No global packs</Text></div>
-        }
-      </div>
-    </div>
-  );
-}
-
-export default ImagePack;
-
-export { ImagePackUser, ImagePackGlobal };

src/app/molecules/image-pack/ImagePack.scss

@@ -1,47 +0,0 @@
-@use '../../partials/flex';
-
-.image-pack {
-  &-item {
-    border-top: 1px solid var(--bg-surface-border);
-  }
-
-  &__header {
-    padding: var(--sp-extra-tight) var(--sp-normal);
-    display: flex;
-    align-items: center;
-    gap: var(--sp-normal);
-
-    & > *:nth-child(2) {
-      @extend .cp-fx__item-one;
-    }
-  }
-
-  &__footer {
-    padding: var(--sp-normal);
-    display: flex;
-    justify-content: space-between;
-    gap: var(--sp-tight);
-  }
-
-  &__global {
-    padding: var(--sp-normal);
-    padding-top: var(--sp-tight);
-    display: flex;
-    align-items: center;
-    gap: var(--sp-normal);
-  }
-}
-
-.image-pack-global {
-  &__empty {
-    text-align: center;
-    padding: var(--sp-extra-loose) var(--sp-normal);
-  }
-  & .image-pack__global {
-    padding: 0 var(--sp-normal);
-    padding-bottom: var(--sp-normal);
-    &:first-child {
-      padding-top: var(--sp-normal);
-    }
-  }
-}

src/app/molecules/image-pack/ImagePackItem.jsx

@@ -1,76 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './ImagePackItem.scss';
-
-import { openReusableContextMenu } from '../../../client/action/navigation';
-import { getEventCords } from '../../../util/common';
-
-import Avatar from '../../atoms/avatar/Avatar';
-import Text from '../../atoms/text/Text';
-import Button from '../../atoms/button/Button';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import IconButton from '../../atoms/button/IconButton';
-import ImagePackUsageSelector from './ImagePackUsageSelector';
-
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
-import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
-import BinIC from '../../../../public/res/ic/outlined/bin.svg';
-
-function ImagePackItem({
-  url, shortcode, usage, onUsageChange, onDelete, onRename,
-}) {
-  const handleUsageSelect = (event) => {
-    openReusableContextMenu(
-      'bottom',
-      getEventCords(event, '.btn-surface'),
-      (closeMenu) => (
-        <ImagePackUsageSelector
-          usage={usage}
-          onSelect={(newUsage) => {
-            onUsageChange(shortcode, newUsage);
-            closeMenu();
-          }}
-        />
-      ),
-    );
-  };
-
-  return (
-    <div className="image-pack-item">
-      <Avatar imageSrc={url} size="extra-small" text={shortcode} bgColor="black" />
-      <div className="image-pack-item__content">
-        <Text>{shortcode}</Text>
-      </div>
-      <div className="image-pack-item__usage">
-        <div className="image-pack-item__btn">
-          {onRename && <IconButton tooltip="Rename" size="extra-small" src={PencilIC} onClick={() => onRename(shortcode)} />}
-          {onDelete && <IconButton tooltip="Delete" size="extra-small" src={BinIC} onClick={() => onDelete(shortcode)} />}
-        </div>
-        <Button onClick={onUsageChange ? handleUsageSelect : undefined}>
-          {onUsageChange && <RawIcon src={ChevronBottomIC} size="extra-small" />}
-          <Text variant="b2">
-            {usage === 'emoticon' && 'Emoji'}
-            {usage === 'sticker' && 'Sticker'}
-            {usage === 'both' && 'Both'}
-          </Text>
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-ImagePackItem.defaultProps = {
-  onUsageChange: null,
-  onDelete: null,
-  onRename: null,
-};
-ImagePackItem.propTypes = {
-  url: PropTypes.string.isRequired,
-  shortcode: PropTypes.string.isRequired,
-  usage: PropTypes.oneOf(['emoticon', 'sticker', 'both']).isRequired,
-  onUsageChange: PropTypes.func,
-  onDelete: PropTypes.func,
-  onRename: PropTypes.func,
-};
-
-export default ImagePackItem;

src/app/molecules/image-pack/ImagePackItem.scss

@@ -1,43 +0,0 @@
-@use '../../partials/flex';
-@use '../../partials/dir';
-
-.image-pack-item {
-  margin: 0 var(--sp-normal);
-  padding: var(--sp-tight) 0;
-  display: flex;
-  align-items: center;
-  gap: var(--sp-normal);
-
-  & .avatar-container img {
-    object-fit: contain;
-    border-radius: 0;
-  }
-
-  &__content {
-    @extend .cp-fx__item-one;
-  }
-
-  &__usage {
-    display: flex;
-    gap: var(--sp-ultra-tight);
-    & button {
-      padding: 6px;
-    }
-    & > button.btn-surface {
-      padding: 6px var(--sp-tight);
-      min-width: 0;
-      @include dir.side(margin, var(--sp-ultra-tight), 0);
-    }
-  }
-
-  &__btn {
-    display: none;
-  }
-  &:hover,
-  &:focus-within {
-    .image-pack-item__btn {
-      display: flex;
-      gap: var(--sp-ultra-tight);
-    }
-  }
-}