Release v2.1.3

.eslintignore

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

.eslintrc.cjs

@@ -1,72 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended",
-    'airbnb',
-    'prettier',
-  ],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  "globals": {
-    JSX: "readonly"
-  },
-  plugins: [
-    'react',
-    '@typescript-eslint'
-  ],
-  rules: {
-    'linebreak-style': 0,
-    'no-underscore-dangle': 0,
-    "no-shadow": "off",
-
-    "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",
-    "@typescript-eslint/no-shadow": "error"
-  },
-  overrides: [
-    {
-      files: ['*.ts'],
-      rules: {
-        'no-undef': 'off',
-      },
-    },
-  ],
-};

.eslintrc.js

@@ -0,0 +1,28 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'plugin:react/recommended',
+    'airbnb',
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: 'module',
+  },
+  plugins: [
+    'react',
+  ],
+  rules: {
+    'linebreak-style': 0,
+    'no-underscore-dangle': 0,
+    'react/no-unstable-nested-components': [
+      'error',
+      { allowAsProps: true },
+    ],
+  },
+};

.github/dependabot.yml

@@ -2,14 +2,14 @@
 
 version: 2
 updates:
-#   - package-ecosystem: npm
+  - package-ecosystem: npm
-#     directory: /
+    directory: /
-#     schedule:
+    schedule:
-#       interval: weekly
+      interval: weekly
-#       day: "tuesday"
+      day: "tuesday"
-#       time: "01:00"
+      time: "01:00"
-#       timezone: "Asia/Kolkata"
+      timezone: "Asia/Kolkata"
-#     open-pull-requests-limit: 15
+    open-pull-requests-limit: 15
 
   - package-ecosystem: github-actions
     directory: /

.github/renovate.json

@@ -1,14 +0,0 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["config:recommended", ":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,35 +6,33 @@ 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@v4.2.0
+        uses: actions/checkout@v3.0.2
       - name: Setup node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v3.4.1
         with:
-          node-version: 20.12.2
+          node-version: 17.9.0
-          cache: 'npm'
-      - name: Install dependencies
-        run: npm ci
       - name: Build app
-        env:
+        run: npm ci && npm run build
-          NODE_OPTIONS: '--max_old_space_size=4096'
-        run: npm run build
       - name: Upload artifact
-        uses: actions/upload-artifact@v4.6.2
+        uses: actions/upload-artifact@v3.1.0
         with:
-          name: preview
+          name: previewbuild
           path: dist
           retention-days: 1
-      - name: Save pr number
+      - name: Get PR info
-        run: echo ${PR_NUMBER} > ./pr.txt
+        uses: actions/github-script@v6.1.0
-      - name: Upload pr number
-        uses: actions/upload-artifact@v4.6.2
         with:
-          name: pr
+          script: |
-          path: ./pr.txt
+            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.1.0
+        with:
+          name: pr.json
+          path: pr.json
           retention-days: 1

.github/workflows/cla.yml

@@ -1,36 +0,0 @@
-name: 'CLA Assistant'
-on:
-  issue_comment:
-    types: [created]
-  pull_request_target:
-    types: [opened, closed, synchronize]
-
-jobs:
-  CLAssistant:
-    runs-on: ubuntu-latest
-    steps:
-      - name: 'CLA Assistant'
-        if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
-        # Beta Release
-        uses: cla-assistant/github-action@v2.6.1
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          # the below token should have repo scope and must be manually added by you in the repository's secret
-          PERSONAL_ACCESS_TOKEN: ${{ secrets.CLA_PAT }}
-        with:
-          path-to-signatures: 'signatures.json'
-          path-to-document: 'https://github.com/cinnyapp/cla/blob/main/cla.md' # e.g. a CLA or a DCO document
-          # branch should not be protected
-          branch: 'main'
-          allowlist: ajbura,bot*
-
-          #below are the optional inputs - If the optional inputs are not given, then default values will be taken
-          remote-organization-name: cinnyapp
-          remote-repository-name: cla
-          #create-file-commit-message: 'For example: Creating file for storing CLA Signatures'
-          #signed-commit-message: 'For example: $contributorName has signed the CLA in #$pullRequestNo'
-          #custom-notsigned-prcomment: 'pull request comment with Introductory message to ask new contributors to sign'
-          #custom-pr-sign-comment: 'The signature to be committed in order to sign the CLA'
-          #custom-allsigned-prcomment: 'pull request comment when all contributors has signed, defaults to **CLA Assistant Lite bot** All Contributors have signed the CLA.'
-          #lock-pullrequest-aftermerge: false - if you don't want this bot to automatically lock the pull request after merging (default - true)
-          #use-dco-flag: true - If you are using DCO instead of CLA

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

@@ -1,56 +1,81 @@
-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:
+  get-build-and-deploy:
-    name: Deploy pull request
-    runs-on: ubuntu-latest
     permissions:
       contents: read
       pull-requests: write
-    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    runs-on: ubuntu-latest
+    if: >
+      ${{ github.event.workflow_run.conclusion == 'success' }}
     steps:
-      - name: Download pr number
+      # There's a 'download artifact' action but it hasn't been updated for the
-        uses: dawidd6/action-download-artifact@ac66b43f0e6a346234dd65d4d0c8fbb31cb316e5
+      # workflow_run action (https://github.com/actions/download-artifact/issues/60)
-        with:
+      # so instead we get this mess:
-          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@ac66b43f0e6a346234dd65d4d0c8fbb31cb316e5
+        uses: actions/github-script@v6.1.0
         with:
-          workflow: ${{ github.event.workflow.id }}
+          script: |
-          run_id: ${{ github.event.workflow_run.id }}
+            var artifacts = await github.rest.actions.listWorkflowRunArtifacts({
-          name: preview
+              owner: context.repo.owner,
-          path: dist
+              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.1.0
+        with:
+          script: |
+            var fs = require('fs');
+            var pr = JSON.parse(fs.readFileSync('${{github.workspace}}/pr.json'));
+            console.log(`::set-output name=prnumber::${pr.number}`);
       - name: Deploy to Netlify
         id: netlify
-        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
+        uses: nwtgck/actions-netlify@b7c1504e00c6b8a249d1848cc1b522a4865eed99
         with:
           publish-dir: dist
-          deploy-message: "Deploy PR ${{ steps.pr.outputs.id }}"
+          deploy-message: "Deploy from GitHub Actions"
-          alias: ${{ steps.pr.outputs.id }}
           # These don't work because we're in workflow_run
           enable-pull-request-comment: false
           enable-commit-comment: false
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_PR_CINNY }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE3_ID }}
         timeout-minutes: 1
-      - name: Comment preview on PR
+      - name: Edit PR Description
-        uses: thollander/actions-comment-pull-request@fabd468d3a1a0b97feee5f6b9e499eab0dd903f6
+        uses: Beakyn/gha-comment-pull-request@2167a7aee24f9e61ce76a23039f322e49a990409
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
-          pr_number: ${{ steps.pr.outputs.id }}
+          pull-request-number: ${{ steps.readctx.outputs.prnumber }}
-          comment_tag: ${{ steps.pr.outputs.id }}
+          description-message: |
-          message: |
               Preview: ${{ steps.netlify.outputs.deploy-url }}
-              ⚠️ Exercise caution. Use test accounts. ⚠️
+              ⚠️ Exercise caution. Use test accounts. ⚠️

.github/workflows/docker-pr.yml

@@ -9,11 +9,13 @@ on:
 jobs:
   docker-build:
     runs-on: ubuntu-latest
+    env:
+      PR_NUMBER: ${{github.event.number}}
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.2.0
+        uses: actions/checkout@v3.0.2
       - name: Build Docker image
-        uses: docker/build-push-action@v6.18.0
+        uses: docker/build-push-action@v3.1.1
         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@v4.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.yml

@@ -1,39 +1,29 @@
-name: Deploy to Netlify (dev)
+name: 'Deploy to Netlify (dev)'
 
 on:
   push:
     branches:
-      - dev
+       - dev
 
 jobs:
   deploy-to-netlify:
-    name: Deploy to Netlify
+    name: 'Deploy'
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.2.0
+        uses: actions/checkout@v3.0.2
       - name: Setup node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v3.4.1
         with:
-          node-version: 20.12.2
+          node-version: 17.9.0
-          cache: 'npm'
+      - name: Build and deploy to Netlify
-      - name: Install dependencies
+        uses: jsmrcaga/action-netlify-deploy@53de32e559b0b3833615b9788c7a090cd2fddb03
-        run: npm ci
-      - name: Build app
-        env:
-          NODE_OPTIONS: '--max_old_space_size=4096'
-        run: npm run build
-      - name: Deploy to Netlify
-        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
         with:
-          publish-dir: dist
+          install_command: "npm ci"
-          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 }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE2_ID }}
-        timeout-minutes: 1
+          BUILD_DIRECTORY: "dist"
+          NETLIFY_DEPLOY_MESSAGE: "Dev deploy v${{ github.ref }}"
+          NETLIFY_DEPLOY_TO_PROD: true

.github/workflows/prod-deploy.yml

@@ -1,44 +1,27 @@
-name: Production deploy
+name: 'Production deploy'
 
 on:
   release:
     types: [published]
 
 jobs:
-  deploy-and-tarball:
+  create-release-tar:
-    name: Netlify deploy and tarball
+    name: 'Create release tar'
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.2.0
+        uses: actions/checkout@v3.0.2
       - name: Setup node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v3.4.1
         with:
-          node-version: 20.12.2
+          node-version: 17.9.0
-          cache: 'npm'
+      - name: Build
-      - name: Install dependencies
+        run: |
-        run: npm ci
+          npm ci
-      - name: Build app
+          npm run build
-        env:
-          NODE_OPTIONS: '--max_old_space_size=4096'
-        run: npm run build
-      - name: Deploy to Netlify
-        uses: nwtgck/actions-netlify@4cbaf4c08f1a7bfa537d6113472ef4424e4eb654
-        with:
-          publish-dir: dist
-          deploy-message: 'Prod deploy ${{ github.ref_name }}'
-          enable-commit-comment: false
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          production-deploy: true
-          github-deployment-environment: stable
-          github-deployment-description: 'Stable deployment on each release'
-        env:
-          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
-          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_APP }}
-        timeout-minutes: 1
       - name: Get version from tag
         id: vars
-        run: echo "tag=${GITHUB_REF#refs/*/}" >> $GITHUB_OUTPUT
+        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
@@ -52,45 +35,58 @@ jobs:
           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@72f2c25fcb47643c292f7107632f7a47c1df5cd8
+        uses: softprops/action-gh-release@1e07f4398721186383de40550babbdf2b84acfc5
         with:
           files: |
             cinny-${{ steps.vars.outputs.tag }}.tar.gz
             cinny-${{ steps.vars.outputs.tag }}.tar.gz.asc
 
-  publish-image:
+  deploy-to-netlify:
-    name: Push Docker image to Docker Hub, ghcr
+    name: 'Deploy to Netlify'
     runs-on: ubuntu-latest
     permissions:
       contents: read
-      packages: write
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4.2.0
+        uses: actions/checkout@v3.0.2
+      - name: Setup node
+        uses: actions/setup-node@v3.4.1
+        with:
+          node-version: 17.9.0
+      - name: Build and deploy to Netlify
+        uses: jsmrcaga/action-netlify-deploy@53de32e559b0b3833615b9788c7a090cd2fddb03
+        with:
+          install_command: "npm ci"
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+          BUILD_DIRECTORY: "dist"
+          NETLIFY_DEPLOY_MESSAGE: "Prod deploy v${{ github.ref }}"
+          NETLIFY_DEPLOY_TO_PROD: true
+
+  push-to-dockerhub:
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3.0.2
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3.6.0
+        uses: docker/setup-qemu-action@v2.0.0
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.10.0
+        uses: docker/setup-buildx-action@v2.0.0
       - name: Login to Docker Hub
-        uses: docker/login-action@v3.4.0
+        uses: docker/login-action@v2.0.0
         with:
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
-      - name: Login to the Container registry
-        uses: docker/login-action@v3.4.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@v5.7.0
+        uses: docker/metadata-action@v4.0.1
         with:
-          images: |
+          images: ajbura/cinny
-            ${{ secrets.DOCKER_USERNAME }}/cinny
-            ghcr.io/${{ github.repository }}
       - name: Build and push Docker image
-        uses: docker/build-push-action@v6.18.0
+        uses: docker/build-push-action@v3.1.1
         with:
           context: .
           platforms: linux/amd64,linux/arm64

.gitignore

@@ -4,4 +4,3 @@ node_modules
 devAssets
 
 .DS_Store
-.idea

.npmrc

@@ -1,2 +0,0 @@
-legacy-peer-deps=true
-save-exact=true

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

CODE_OF_CONDUCT.md

@@ -1,128 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-We as members, contributors, and leaders pledge to make participation in our
-community a harassment-free experience for everyone, regardless of age, body
-size, visible or invisible disability, ethnicity, sex characteristics, gender
-identity and expression, level of experience, education, socio-economic status,
-nationality, personal appearance, race, religion, or sexual identity
-and orientation.
-
-We pledge to act and interact in ways that contribute to an open, welcoming,
-diverse, inclusive, and healthy community.
-
-## Our Standards
-
-Examples of behavior that contributes to a positive environment for our
-community include:
-
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
-  and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
-  overall community
-
-Examples of unacceptable behavior include:
-
-* The use of sexualized language or imagery, and sexual attention or
-  advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
-  address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
-  professional setting
-
-## Enforcement Responsibilities
-
-Community leaders are responsible for clarifying and enforcing our standards of
-acceptable behavior and will take appropriate and fair corrective action in
-response to any behavior that they deem inappropriate, threatening, offensive,
-or harmful.
-
-Community leaders have the right and responsibility to remove, edit, or reject
-comments, commits, code, wiki edits, issues, and other contributions that are
-not aligned to this Code of Conduct, and will communicate reasons for moderation
-decisions when appropriate.
-
-## Scope
-
-This Code of Conduct applies within all community spaces, and also applies when
-an individual is officially representing the community in public spaces.
-Examples of representing our community include using an official e-mail address,
-posting via an official social media account, or acting as an appointed
-representative at an online or offline event.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported to the community leaders responsible for enforcement at
-cinnyapp@gmail.com.
-All complaints will be reviewed and investigated promptly and fairly.
-
-All community leaders are obligated to respect the privacy and security of the
-reporter of any incident.
-
-## Enforcement Guidelines
-
-Community leaders will follow these Community Impact Guidelines in determining
-the consequences for any action they deem in violation of this Code of Conduct:
-
-### 1. Correction
-
-**Community Impact**: Use of inappropriate language or other behavior deemed
-unprofessional or unwelcome in the community.
-
-**Consequence**: A private, written warning from community leaders, providing
-clarity around the nature of the violation and an explanation of why the
-behavior was inappropriate. A public apology may be requested.
-
-### 2. Warning
-
-**Community Impact**: A violation through a single incident or series
-of actions.
-
-**Consequence**: A warning with consequences for continued behavior. No
-interaction with the people involved, including unsolicited interaction with
-those enforcing the Code of Conduct, for a specified period of time. This
-includes avoiding interactions in community spaces as well as external channels
-like social media. Violating these terms may lead to a temporary or
-permanent ban.
-
-### 3. Temporary Ban
-
-**Community Impact**: A serious violation of community standards, including
-sustained inappropriate behavior.
-
-**Consequence**: A temporary ban from any sort of interaction or public
-communication with the community for a specified period of time. No public or
-private interaction with the people involved, including unsolicited interaction
-with those enforcing the Code of Conduct, is allowed during this period.
-Violating these terms may lead to a permanent ban.
-
-### 4. Permanent Ban
-
-**Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
-individual, or aggression toward or disparagement of classes of individuals.
-
-**Consequence**: A permanent ban from any sort of public interaction within
-the community.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage],
-version 2.0, available at
-https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
-
-Community Impact Guidelines were inspired by [Mozilla's code of conduct
-enforcement ladder](https://github.com/mozilla/diversity).
-
-[homepage]: https://www.contributor-covenant.org
-
-For answers to common questions about this code of conduct, see the FAQ at
-https://www.contributor-covenant.org/faq. Translations are available at
-https://www.contributor-covenant.org/translations.

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

Dockerfile

@@ -1,20 +1,18 @@
 ## Builder
-FROM node:20.12.2-alpine3.18 as builder
+FROM node:17.9.0-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/
-ENV NODE_OPTIONS=--max_old_space_size=4096
 RUN npm run build
 
 
 ## App
-FROM nginx:1.29.0-alpine
+FROM nginx:1.23.1-alpine
 
 COPY --from=builder /src/dist /app
-COPY --from=builder /src/docker-nginx.conf /etc/nginx/conf.d/default.conf
 
 RUN rm -rf /usr/share/nginx/html \
   && ln -s /app /usr/share/nginx/html

LICENSE

@@ -1,661 +1,21 @@
-                    GNU AFFERO GENERAL PUBLIC LICENSE
+MIT License
-                       Version 3, 19 November 2007
+
-
+Copyright (c) 2021 Ajay Bura (ajbura)
- Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+
- Everyone is permitted to copy and distribute verbatim copies
+Permission is hereby granted, free of charge, to any person obtaining a copy
- of this license document, but changing it is not allowed.
+of this software and associated documentation files (the "Software"), to deal
-
+in the Software without restriction, including without limitation the rights
-                            Preamble
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-
+copies of the Software, and to permit persons to whom the Software is
-  The GNU Affero General Public License is a free, copyleft license for
+furnished to do so, subject to the following conditions:
-software and other kinds of works, specifically designed to ensure
+
-cooperation with the community in the case of network server software.
+The above copyright notice and this permission notice shall be included in all
-
+copies or substantial portions of the Software.
-  The licenses for most software and other practical works are designed
+
-to take away your freedom to share and change the works.  By contrast,
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-our General Public Licenses are intended to guarantee your freedom to
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-share and change all versions of a program--to make sure it remains free
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-software for all its users.
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-  When we speak of free software, we are referring to freedom, not
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-price.  Our General Public Licenses are designed to make sure that you
+SOFTWARE.
-have the freedom to distribute copies of free software (and charge for
-them if you wish), that you receive source code or can get it if you
-want it, that you can change the software or use pieces of it in new
-free programs, and that you know you can do these things.
-
-  Developers that use our General Public Licenses protect your rights
-with two steps: (1) assert copyright on the software, and (2) offer
-you this License which gives you legal permission to copy, distribute
-and/or modify the software.
-
-  A secondary benefit of defending all users' freedom is that
-improvements made in alternate versions of the program, if they
-receive widespread use, become available for other developers to
-incorporate.  Many developers of free software are heartened and
-encouraged by the resulting cooperation.  However, in the case of
-software used on network servers, this result may fail to come about.
-The GNU General Public License permits making a modified version and
-letting the public access it on a server without ever releasing its
-source code to the public.
-
-  The GNU Affero General Public License is designed specifically to
-ensure that, in such cases, the modified source code becomes available
-to the community.  It requires the operator of a network server to
-provide the source code of the modified version running there to the
-users of that server.  Therefore, public use of a modified version, on
-a publicly accessible server, gives the public access to the source
-code of the modified version.
-
-  An older license, called the Affero General Public License and
-published by Affero, was designed to accomplish similar goals.  This is
-a different license, not a version of the Affero GPL, but Affero has
-released a new version of the Affero GPL which permits relicensing under
-this license.
-
-  The precise terms and conditions for copying, distribution and
-modification follow.
-
-                       TERMS AND CONDITIONS
-
-  0. Definitions.
-
-  "This License" refers to version 3 of the GNU Affero General Public License.
-
-  "Copyright" also means copyright-like laws that apply to other kinds of
-works, such as semiconductor masks.
-
-  "The Program" refers to any copyrightable work licensed under this
-License.  Each licensee is addressed as "you".  "Licensees" and
-"recipients" may be individuals or organizations.
-
-  To "modify" a work means to copy from or adapt all or part of the work
-in a fashion requiring copyright permission, other than the making of an
-exact copy.  The resulting work is called a "modified version" of the
-earlier work or a work "based on" the earlier work.
-
-  A "covered work" means either the unmodified Program or a work based
-on the Program.
-
-  To "propagate" a work means to do anything with it that, without
-permission, would make you directly or secondarily liable for
-infringement under applicable copyright law, except executing it on a
-computer or modifying a private copy.  Propagation includes copying,
-distribution (with or without modification), making available to the
-public, and in some countries other activities as well.
-
-  To "convey" a work means any kind of propagation that enables other
-parties to make or receive copies.  Mere interaction with a user through
-a computer network, with no transfer of a copy, is not conveying.
-
-  An interactive user interface displays "Appropriate Legal Notices"
-to the extent that it includes a convenient and prominently visible
-feature that (1) displays an appropriate copyright notice, and (2)
-tells the user that there is no warranty for the work (except to the
-extent that warranties are provided), that licensees may convey the
-work under this License, and how to view a copy of this License.  If
-the interface presents a list of user commands or options, such as a
-menu, a prominent item in the list meets this criterion.
-
-  1. Source Code.
-
-  The "source code" for a work means the preferred form of the work
-for making modifications to it.  "Object code" means any non-source
-form of a work.
-
-  A "Standard Interface" means an interface that either is an official
-standard defined by a recognized standards body, or, in the case of
-interfaces specified for a particular programming language, one that
-is widely used among developers working in that language.
-
-  The "System Libraries" of an executable work include anything, other
-than the work as a whole, that (a) is included in the normal form of
-packaging a Major Component, but which is not part of that Major
-Component, and (b) serves only to enable use of the work with that
-Major Component, or to implement a Standard Interface for which an
-implementation is available to the public in source code form.  A
-"Major Component", in this context, means a major essential component
-(kernel, window system, and so on) of the specific operating system
-(if any) on which the executable work runs, or a compiler used to
-produce the work, or an object code interpreter used to run it.
-
-  The "Corresponding Source" for a work in object code form means all
-the source code needed to generate, install, and (for an executable
-work) run the object code and to modify the work, including scripts to
-control those activities.  However, it does not include the work's
-System Libraries, or general-purpose tools or generally available free
-programs which are used unmodified in performing those activities but
-which are not part of the work.  For example, Corresponding Source
-includes interface definition files associated with source files for
-the work, and the source code for shared libraries and dynamically
-linked subprograms that the work is specifically designed to require,
-such as by intimate data communication or control flow between those
-subprograms and other parts of the work.
-
-  The Corresponding Source need not include anything that users
-can regenerate automatically from other parts of the Corresponding
-Source.
-
-  The Corresponding Source for a work in source code form is that
-same work.
-
-  2. Basic Permissions.
-
-  All rights granted under this License are granted for the term of
-copyright on the Program, and are irrevocable provided the stated
-conditions are met.  This License explicitly affirms your unlimited
-permission to run the unmodified Program.  The output from running a
-covered work is covered by this License only if the output, given its
-content, constitutes a covered work.  This License acknowledges your
-rights of fair use or other equivalent, as provided by copyright law.
-
-  You may make, run and propagate covered works that you do not
-convey, without conditions so long as your license otherwise remains
-in force.  You may convey covered works to others for the sole purpose
-of having them make modifications exclusively for you, or provide you
-with facilities for running those works, provided that you comply with
-the terms of this License in conveying all material for which you do
-not control copyright.  Those thus making or running the covered works
-for you must do so exclusively on your behalf, under your direction
-and control, on terms that prohibit them from making any copies of
-your copyrighted material outside their relationship with you.
-
-  Conveying under any other circumstances is permitted solely under
-the conditions stated below.  Sublicensing is not allowed; section 10
-makes it unnecessary.
-
-  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
-
-  No covered work shall be deemed part of an effective technological
-measure under any applicable law fulfilling obligations under article
-11 of the WIPO copyright treaty adopted on 20 December 1996, or
-similar laws prohibiting or restricting circumvention of such
-measures.
-
-  When you convey a covered work, you waive any legal power to forbid
-circumvention of technological measures to the extent such circumvention
-is effected by exercising rights under this License with respect to
-the covered work, and you disclaim any intention to limit operation or
-modification of the work as a means of enforcing, against the work's
-users, your or third parties' legal rights to forbid circumvention of
-technological measures.
-
-  4. Conveying Verbatim Copies.
-
-  You may convey verbatim copies of the Program's source code as you
-receive it, in any medium, provided that you conspicuously and
-appropriately publish on each copy an appropriate copyright notice;
-keep intact all notices stating that this License and any
-non-permissive terms added in accord with section 7 apply to the code;
-keep intact all notices of the absence of any warranty; and give all
-recipients a copy of this License along with the Program.
-
-  You may charge any price or no price for each copy that you convey,
-and you may offer support or warranty protection for a fee.
-
-  5. Conveying Modified Source Versions.
-
-  You may convey a work based on the Program, or the modifications to
-produce it from the Program, in the form of source code under the
-terms of section 4, provided that you also meet all of these conditions:
-
-    a) The work must carry prominent notices stating that you modified
-    it, and giving a relevant date.
-
-    b) The work must carry prominent notices stating that it is
-    released under this License and any conditions added under section
-    7.  This requirement modifies the requirement in section 4 to
-    "keep intact all notices".
-
-    c) You must license the entire work, as a whole, under this
-    License to anyone who comes into possession of a copy.  This
-    License will therefore apply, along with any applicable section 7
-    additional terms, to the whole of the work, and all its parts,
-    regardless of how they are packaged.  This License gives no
-    permission to license the work in any other way, but it does not
-    invalidate such permission if you have separately received it.
-
-    d) If the work has interactive user interfaces, each must display
-    Appropriate Legal Notices; however, if the Program has interactive
-    interfaces that do not display Appropriate Legal Notices, your
-    work need not make them do so.
-
-  A compilation of a covered work with other separate and independent
-works, which are not by their nature extensions of the covered work,
-and which are not combined with it such as to form a larger program,
-in or on a volume of a storage or distribution medium, is called an
-"aggregate" if the compilation and its resulting copyright are not
-used to limit the access or legal rights of the compilation's users
-beyond what the individual works permit.  Inclusion of a covered work
-in an aggregate does not cause this License to apply to the other
-parts of the aggregate.
-
-  6. Conveying Non-Source Forms.
-
-  You may convey a covered work in object code form under the terms
-of sections 4 and 5, provided that you also convey the
-machine-readable Corresponding Source under the terms of this License,
-in one of these ways:
-
-    a) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by the
-    Corresponding Source fixed on a durable physical medium
-    customarily used for software interchange.
-
-    b) Convey the object code in, or embodied in, a physical product
-    (including a physical distribution medium), accompanied by a
-    written offer, valid for at least three years and valid for as
-    long as you offer spare parts or customer support for that product
-    model, to give anyone who possesses the object code either (1) a
-    copy of the Corresponding Source for all the software in the
-    product that is covered by this License, on a durable physical
-    medium customarily used for software interchange, for a price no
-    more than your reasonable cost of physically performing this
-    conveying of source, or (2) access to copy the
-    Corresponding Source from a network server at no charge.
-
-    c) Convey individual copies of the object code with a copy of the
-    written offer to provide the Corresponding Source.  This
-    alternative is allowed only occasionally and noncommercially, and
-    only if you received the object code with such an offer, in accord
-    with subsection 6b.
-
-    d) Convey the object code by offering access from a designated
-    place (gratis or for a charge), and offer equivalent access to the
-    Corresponding Source in the same way through the same place at no
-    further charge.  You need not require recipients to copy the
-    Corresponding Source along with the object code.  If the place to
-    copy the object code is a network server, the Corresponding Source
-    may be on a different server (operated by you or a third party)
-    that supports equivalent copying facilities, provided you maintain
-    clear directions next to the object code saying where to find the
-    Corresponding Source.  Regardless of what server hosts the
-    Corresponding Source, you remain obligated to ensure that it is
-    available for as long as needed to satisfy these requirements.
-
-    e) Convey the object code using peer-to-peer transmission, provided
-    you inform other peers where the object code and Corresponding
-    Source of the work are being offered to the general public at no
-    charge under subsection 6d.
-
-  A separable portion of the object code, whose source code is excluded
-from the Corresponding Source as a System Library, need not be
-included in conveying the object code work.
-
-  A "User Product" is either (1) a "consumer product", which means any
-tangible personal property which is normally used for personal, family,
-or household purposes, or (2) anything designed or sold for incorporation
-into a dwelling.  In determining whether a product is a consumer product,
-doubtful cases shall be resolved in favor of coverage.  For a particular
-product received by a particular user, "normally used" refers to a
-typical or common use of that class of product, regardless of the status
-of the particular user or of the way in which the particular user
-actually uses, or expects or is expected to use, the product.  A product
-is a consumer product regardless of whether the product has substantial
-commercial, industrial or non-consumer uses, unless such uses represent
-the only significant mode of use of the product.
-
-  "Installation Information" for a User Product means any methods,
-procedures, authorization keys, or other information required to install
-and execute modified versions of a covered work in that User Product from
-a modified version of its Corresponding Source.  The information must
-suffice to ensure that the continued functioning of the modified object
-code is in no case prevented or interfered with solely because
-modification has been made.
-
-  If you convey an object code work under this section in, or with, or
-specifically for use in, a User Product, and the conveying occurs as
-part of a transaction in which the right of possession and use of the
-User Product is transferred to the recipient in perpetuity or for a
-fixed term (regardless of how the transaction is characterized), the
-Corresponding Source conveyed under this section must be accompanied
-by the Installation Information.  But this requirement does not apply
-if neither you nor any third party retains the ability to install
-modified object code on the User Product (for example, the work has
-been installed in ROM).
-
-  The requirement to provide Installation Information does not include a
-requirement to continue to provide support service, warranty, or updates
-for a work that has been modified or installed by the recipient, or for
-the User Product in which it has been modified or installed.  Access to a
-network may be denied when the modification itself materially and
-adversely affects the operation of the network or violates the rules and
-protocols for communication across the network.
-
-  Corresponding Source conveyed, and Installation Information provided,
-in accord with this section must be in a format that is publicly
-documented (and with an implementation available to the public in
-source code form), and must require no special password or key for
-unpacking, reading or copying.
-
-  7. Additional Terms.
-
-  "Additional permissions" are terms that supplement the terms of this
-License by making exceptions from one or more of its conditions.
-Additional permissions that are applicable to the entire Program shall
-be treated as though they were included in this License, to the extent
-that they are valid under applicable law.  If additional permissions
-apply only to part of the Program, that part may be used separately
-under those permissions, but the entire Program remains governed by
-this License without regard to the additional permissions.
-
-  When you convey a copy of a covered work, you may at your option
-remove any additional permissions from that copy, or from any part of
-it.  (Additional permissions may be written to require their own
-removal in certain cases when you modify the work.)  You may place
-additional permissions on material, added by you to a covered work,
-for which you have or can give appropriate copyright permission.
-
-  Notwithstanding any other provision of this License, for material you
-add to a covered work, you may (if authorized by the copyright holders of
-that material) supplement the terms of this License with terms:
-
-    a) Disclaiming warranty or limiting liability differently from the
-    terms of sections 15 and 16 of this License; or
-
-    b) Requiring preservation of specified reasonable legal notices or
-    author attributions in that material or in the Appropriate Legal
-    Notices displayed by works containing it; or
-
-    c) Prohibiting misrepresentation of the origin of that material, or
-    requiring that modified versions of such material be marked in
-    reasonable ways as different from the original version; or
-
-    d) Limiting the use for publicity purposes of names of licensors or
-    authors of the material; or
-
-    e) Declining to grant rights under trademark law for use of some
-    trade names, trademarks, or service marks; or
-
-    f) Requiring indemnification of licensors and authors of that
-    material by anyone who conveys the material (or modified versions of
-    it) with contractual assumptions of liability to the recipient, for
-    any liability that these contractual assumptions directly impose on
-    those licensors and authors.
-
-  All other non-permissive additional terms are considered "further
-restrictions" within the meaning of section 10.  If the Program as you
-received it, or any part of it, contains a notice stating that it is
-governed by this License along with a term that is a further
-restriction, you may remove that term.  If a license document contains
-a further restriction but permits relicensing or conveying under this
-License, you may add to a covered work material governed by the terms
-of that license document, provided that the further restriction does
-not survive such relicensing or conveying.
-
-  If you add terms to a covered work in accord with this section, you
-must place, in the relevant source files, a statement of the
-additional terms that apply to those files, or a notice indicating
-where to find the applicable terms.
-
-  Additional terms, permissive or non-permissive, may be stated in the
-form of a separately written license, or stated as exceptions;
-the above requirements apply either way.
-
-  8. Termination.
-
-  You may not propagate or modify a covered work except as expressly
-provided under this License.  Any attempt otherwise to propagate or
-modify it is void, and will automatically terminate your rights under
-this License (including any patent licenses granted under the third
-paragraph of section 11).
-
-  However, if you cease all violation of this License, then your
-license from a particular copyright holder is reinstated (a)
-provisionally, unless and until the copyright holder explicitly and
-finally terminates your license, and (b) permanently, if the copyright
-holder fails to notify you of the violation by some reasonable means
-prior to 60 days after the cessation.
-
-  Moreover, your license from a particular copyright holder is
-reinstated permanently if the copyright holder notifies you of the
-violation by some reasonable means, this is the first time you have
-received notice of violation of this License (for any work) from that
-copyright holder, and you cure the violation prior to 30 days after
-your receipt of the notice.
-
-  Termination of your rights under this section does not terminate the
-licenses of parties who have received copies or rights from you under
-this License.  If your rights have been terminated and not permanently
-reinstated, you do not qualify to receive new licenses for the same
-material under section 10.
-
-  9. Acceptance Not Required for Having Copies.
-
-  You are not required to accept this License in order to receive or
-run a copy of the Program.  Ancillary propagation of a covered work
-occurring solely as a consequence of using peer-to-peer transmission
-to receive a copy likewise does not require acceptance.  However,
-nothing other than this License grants you permission to propagate or
-modify any covered work.  These actions infringe copyright if you do
-not accept this License.  Therefore, by modifying or propagating a
-covered work, you indicate your acceptance of this License to do so.
-
-  10. Automatic Licensing of Downstream Recipients.
-
-  Each time you convey a covered work, the recipient automatically
-receives a license from the original licensors, to run, modify and
-propagate that work, subject to this License.  You are not responsible
-for enforcing compliance by third parties with this License.
-
-  An "entity transaction" is a transaction transferring control of an
-organization, or substantially all assets of one, or subdividing an
-organization, or merging organizations.  If propagation of a covered
-work results from an entity transaction, each party to that
-transaction who receives a copy of the work also receives whatever
-licenses to the work the party's predecessor in interest had or could
-give under the previous paragraph, plus a right to possession of the
-Corresponding Source of the work from the predecessor in interest, if
-the predecessor has it or can get it with reasonable efforts.
-
-  You may not impose any further restrictions on the exercise of the
-rights granted or affirmed under this License.  For example, you may
-not impose a license fee, royalty, or other charge for exercise of
-rights granted under this License, and you may not initiate litigation
-(including a cross-claim or counterclaim in a lawsuit) alleging that
-any patent claim is infringed by making, using, selling, offering for
-sale, or importing the Program or any portion of it.
-
-  11. Patents.
-
-  A "contributor" is a copyright holder who authorizes use under this
-License of the Program or a work on which the Program is based.  The
-work thus licensed is called the contributor's "contributor version".
-
-  A contributor's "essential patent claims" are all patent claims
-owned or controlled by the contributor, whether already acquired or
-hereafter acquired, that would be infringed by some manner, permitted
-by this License, of making, using, or selling its contributor version,
-but do not include claims that would be infringed only as a
-consequence of further modification of the contributor version.  For
-purposes of this definition, "control" includes the right to grant
-patent sublicenses in a manner consistent with the requirements of
-this License.
-
-  Each contributor grants you a non-exclusive, worldwide, royalty-free
-patent license under the contributor's essential patent claims, to
-make, use, sell, offer for sale, import and otherwise run, modify and
-propagate the contents of its contributor version.
-
-  In the following three paragraphs, a "patent license" is any express
-agreement or commitment, however denominated, not to enforce a patent
-(such as an express permission to practice a patent or covenant not to
-sue for patent infringement).  To "grant" such a patent license to a
-party means to make such an agreement or commitment not to enforce a
-patent against the party.
-
-  If you convey a covered work, knowingly relying on a patent license,
-and the Corresponding Source of the work is not available for anyone
-to copy, free of charge and under the terms of this License, through a
-publicly available network server or other readily accessible means,
-then you must either (1) cause the Corresponding Source to be so
-available, or (2) arrange to deprive yourself of the benefit of the
-patent license for this particular work, or (3) arrange, in a manner
-consistent with the requirements of this License, to extend the patent
-license to downstream recipients.  "Knowingly relying" means you have
-actual knowledge that, but for the patent license, your conveying the
-covered work in a country, or your recipient's use of the covered work
-in a country, would infringe one or more identifiable patents in that
-country that you have reason to believe are valid.
-
-  If, pursuant to or in connection with a single transaction or
-arrangement, you convey, or propagate by procuring conveyance of, a
-covered work, and grant a patent license to some of the parties
-receiving the covered work authorizing them to use, propagate, modify
-or convey a specific copy of the covered work, then the patent license
-you grant is automatically extended to all recipients of the covered
-work and works based on it.
-
-  A patent license is "discriminatory" if it does not include within
-the scope of its coverage, prohibits the exercise of, or is
-conditioned on the non-exercise of one or more of the rights that are
-specifically granted under this License.  You may not convey a covered
-work if you are a party to an arrangement with a third party that is
-in the business of distributing software, under which you make payment
-to the third party based on the extent of your activity of conveying
-the work, and under which the third party grants, to any of the
-parties who would receive the covered work from you, a discriminatory
-patent license (a) in connection with copies of the covered work
-conveyed by you (or copies made from those copies), or (b) primarily
-for and in connection with specific products or compilations that
-contain the covered work, unless you entered into that arrangement,
-or that patent license was granted, prior to 28 March 2007.
-
-  Nothing in this License shall be construed as excluding or limiting
-any implied license or other defenses to infringement that may
-otherwise be available to you under applicable patent law.
-
-  12. No Surrender of Others' Freedom.
-
-  If conditions are imposed on you (whether by court order, agreement or
-otherwise) that contradict the conditions of this License, they do not
-excuse you from the conditions of this License.  If you cannot convey a
-covered work so as to satisfy simultaneously your obligations under this
-License and any other pertinent obligations, then as a consequence you may
-not convey it at all.  For example, if you agree to terms that obligate you
-to collect a royalty for further conveying from those to whom you convey
-the Program, the only way you could satisfy both those terms and this
-License would be to refrain entirely from conveying the Program.
-
-  13. Remote Network Interaction; Use with the GNU General Public License.
-
-  Notwithstanding any other provision of this License, if you modify the
-Program, your modified version must prominently offer all users
-interacting with it remotely through a computer network (if your version
-supports such interaction) an opportunity to receive the Corresponding
-Source of your version by providing access to the Corresponding Source
-from a network server at no charge, through some standard or customary
-means of facilitating copying of software.  This Corresponding Source
-shall include the Corresponding Source for any work covered by version 3
-of the GNU General Public License that is incorporated pursuant to the
-following paragraph.
-
-  Notwithstanding any other provision of this License, you have
-permission to link or combine any covered work with a work licensed
-under version 3 of the GNU General Public License into a single
-combined work, and to convey the resulting work.  The terms of this
-License will continue to apply to the part which is the covered work,
-but the work with which it is combined will remain governed by version
-3 of the GNU General Public License.
-
-  14. Revised Versions of this License.
-
-  The Free Software Foundation may publish revised and/or new versions of
-the GNU Affero General Public License from time to time.  Such new versions
-will be similar in spirit to the present version, but may differ in detail to
-address new problems or concerns.
-
-  Each version is given a distinguishing version number.  If the
-Program specifies that a certain numbered version of the GNU Affero General
-Public License "or any later version" applies to it, you have the
-option of following the terms and conditions either of that numbered
-version or of any later version published by the Free Software
-Foundation.  If the Program does not specify a version number of the
-GNU Affero General Public License, you may choose any version ever published
-by the Free Software Foundation.
-
-  If the Program specifies that a proxy can decide which future
-versions of the GNU Affero General Public License can be used, that proxy's
-public statement of acceptance of a version permanently authorizes you
-to choose that version for the Program.
-
-  Later license versions may give you additional or different
-permissions.  However, no additional obligations are imposed on any
-author or copyright holder as a result of your choosing to follow a
-later version.
-
-  15. Disclaimer of Warranty.
-
-  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
-APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
-HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
-OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
-THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
-PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
-IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
-ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
-
-  16. Limitation of Liability.
-
-  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
-WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
-THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
-GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
-USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
-DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
-PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
-EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
-SUCH DAMAGES.
-
-  17. Interpretation of Sections 15 and 16.
-
-  If the disclaimer of warranty and limitation of liability provided
-above cannot be given local legal effect according to their terms,
-reviewing courts shall apply local law that most closely approximates
-an absolute waiver of all civil liability in connection with the
-Program, unless a warranty or assumption of liability accompanies a
-copy of the Program in return for a fee.
-
-                     END OF TERMS AND CONDITIONS
-
-            How to Apply These Terms to Your New Programs
-
-  If you develop a new program, and you want it to be of the greatest
-possible use to the public, the best way to achieve this is to make it
-free software which everyone can redistribute and change under these terms.
-
-  To do so, attach the following notices to the program.  It is safest
-to attach them to the start of each source file to most effectively
-state the exclusion of warranty; and each file should have at least
-the "copyright" line and a pointer to where the full notice is found.
-
-    <one line to give the program's name and a brief idea of what it does.>
-    Copyright (C) <year>  <name of author>
-
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU Affero General Public License as published by
-    the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
-
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-    GNU Affero General Public License for more details.
-
-    You should have received a copy of the GNU Affero General Public License
-    along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-Also add information on how to contact you by electronic and paper mail.
-
-  If your software can interact with users remotely through a computer
-network, you should also make sure that it provides a way for users to
-get its source.  For example, if your program is a web application, its
-interface could display a "Source" link that leads users to an archive
-of the code.  There are many ways you could offer source, and different
-solutions will be better for different programs; see section 13 for the
-specific requirements.
-
-  You should also get your employer (if you work as a programmer) or school,
-if any, to sign a "copyright disclaimer" for the program, if necessary.
-For more information on this, and how to apply and follow the GNU AGPL, see
-<https://www.gnu.org/licenses/>.

README.md

@@ -1,5 +1,9 @@
-# Cinny
+<p align="center">
-<p>
+    <img src="https://raw.githubusercontent.com/ajbura/cinny/dev/public/res/svg/cinny.svg?sanitize=true"
+        height="16">
+    <span><b>Cinny</b></span>
+</p>
+<p align="center">
     <a href="https://github.com/ajbura/cinny/releases">
         <img alt="GitHub release downloads" src="https://img.shields.io/github/downloads/ajbura/cinny/total?logo=github&style=social"></a>
     <a href="https://hub.docker.com/r/ajbura/cinny">
@@ -12,29 +16,21 @@
         <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.
+**Cinny** is a Matrix client focusing primarily on simple, elegant and secure interface. The main goal is to have a client that is easy on end user 
-- [Roadmap](https://github.com/orgs/cinnyapp/projects/1)
+and feels a modern chat application.
+
 - [Contributing](./CONTRIBUTING.md)
+- [Roadmap](https://github.com/ajbura/cinny/projects/11)
 
-<img align="center" src="https://raw.githubusercontent.com/cinnyapp/cinny-site/main/assets/preview2-light.png" height="380">
+## Building and Running
 
-## Getting started
+### Running pre-compiled
-The web app is available at [app.cinny.in](https://app.cinny.in/) and gets updated on each new release. The `dev` branch is continuously deployed at [dev.cinny.in](https://dev.cinny.in) but keep in mind that it could have things broken.
 
-You can also download our desktop app from the [cinny-desktop repository](https://github.com/cinnyapp/cinny-desktop).
+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.
 
-## Self-hosting
+<details>
-To host Cinny on your own, simply download the tarball from [GitHub releases](https://github.com/cinnyapp/cinny/releases/latest), and serve the files from `dist/` using your preferred webserver. Alternatively, you can just pull the docker image from [DockerHub](https://hub.docker.com/r/ajbura/cinny) or [GitHub Container Registry](https://github.com/cinnyapp/cinny/pkgs/container/cinny).
+<summary>PGP Public Key to verify pre-compiled tarball</summary>
-
-* The default homeservers and explore pages are defined in [`config.json`](config.json).
-
-* You need to set up redirects to serve the assests. Example configurations; [netlify](netlify.toml), [nginx](contrib/nginx/cinny.domain.tld.conf), [caddy](contrib/caddy/caddyfile).
-    * If you have trouble configuring redirects you can [enable hash routing](config.json#L35) — the url in the browser will have a `/#/` between the domain and open channel (ie. `app.cinny.in/#/home/` instead of `app.cinny.in/home/`) but you won't have to configure your webserver.
-
-* To deploy on subdirectory, you need to rebuild the app youself after updating the `base` path in [`build.config.ts`](build.config.ts).
-    * For example, if you want to deploy on `https://cinny.in/app`, then set `base: '/app'`.
-
-<details><summary><b>PGP Public Key to verify tarball</b></summary>
 
 ```
 -----BEGIN PGP PUBLIC KEY BLOCK-----
@@ -48,16 +44,16 @@ Frn9ttCEzV55Y+so4X2e4ZnB+5gOnNw+ecifGVdj/+UyWnqvqqDvLrEjjK890nLb
 Pil4siecNMEpiwAN6WSmKpWaCwQAHEGDVeZCc/kT0iYfj5FBcsTVqWiO6eaxkUlm
 jnulqWqRrlB8CJQQvih/g//uSEBdzIibo+ro+3Jpe120U/XVUH62i9HoRQEm6ADG
 4zS5hIq4xyA8fL8AEQEAAbQdQ2lubnlBcHAgPGNpbm55YXBwQGdtYWlsLmNvbT6J
-AdQEEwEIAD4CGwMFCwkIBwIGFQoJCAsCBBYCAwECHgECF4AWIQSRri2MHidaaZv+
+AdQEEwEIAD4WIQSRri2MHidaaZv+vvuUMwx6UK/M8wUCYnD+DQIbAwUJA8JnAAUL
-vvuUMwx6UK/M8wUCZqEDwAUJFvwIswAKCRCUMwx6UK/M877qC/4lxXOQIoWnLLkK
+CQgHAgYVCgkICwIEFgIDAQIeAQIXgAAKCRCUMwx6UK/M88ApC/9HAdbum1lYBC0s
-YiRCTkGsH6NdxgeYr6wpXT4xuQ45ZxCytwHpOGQmO/5up5961TxWW8D1frRIJHjj
+1k7GwP2A7B4sQtBWjy771BzybWlHeaeG+BGJwg4YiuowXZMm5dubFJFoI/CfeY07
-AZGoRCL3EKEuY8nt3D99fpf3DvZrs1uoVAhiyn737hRlZAg+QsJheeGCmdSJ0hX5
+B5aK40/bmT6Xcfkp0VA74c1wUpubBUEJN7tH5HG/OGd9BKeq9E/HHtVaJLVT1k3w
-Yud8SE+9zxLS1+CEjMrsUd/RGre/phme+wNXfaHfREAC9ewolgVChPIbMxG2f+vs
+Rhv9VuHO6nR30EEp7IDthftotl5S4lio3+W0pKk4TAKV8vjaCNp3y/lAHzoP1BU9
-K8Xv52BFng7ta9fgsl1XuOjpuaSbQv6g+4ONk/lxKF0SmnhEGM3dmIYPONxW47Yf
+bUSao+7GXVeArKBjuqxN+t1uuiaxPH4L0oe2pMVjTig04zGJM5fTVoly859MEcC/
-atnIjRra/YhPTNwrNBGMmG4IFKaOsMbjW/eakjWTWOVKKJNBMoDdRcYYWIMCpLy8
+R7Taq9RWGfXFmgCXy8Dviz3eOD90vqpCzhX4+ypK0cp2X0UwhMH4dpKUzExmdbhl
-AQUrMtQEsHSnqCwrw818S5A6rrhcfVGk36RGm0nOy6LS5g5jmqaYsvbCcBGY9B2c
+eBO5GcHB4VxvloRBNf9/Lr7YOTgWejMUw+MlhZE2RE8unfW1LnM/cjL4dhXzO/XB
-SUAVNm17oo7TtEajk8hcSXoZod1t++pyjcVKEmSn3nFK7v5m3V+cPhNTxZMK459P
+FUHHNq8d6d4e02rfWqw7mZo2/NVJgFRcvzw2rgx7w7CKtCNwF4lNjUetB2waZzDb
-3x1Ucqj/kTqrxKw6s2Uknuk0ajmw0ljV+BQwgL6maguo9BKgCNW5AY0EYnD+DQEM
+fAE0kwhK4Iuwvy12JOBzL0Yy9MxANtwUryr/LQz9AmdT4Rwnp0S5AY0EYnD+DQEM
 ANOu/d6ZMF8bW+Df9RDCUQKytbaZfa+ZbIHBus7whCD/SQMOhPKntv3HX7SmMCs+
 5i27kJMu4YN623JCS7hdCoXVO1R5kXCEcneW/rPBMDutaM472YvIWMIqK9Wwl5+0
 Piu2N+uTkKhe9uS2u7eN+Khef3d7xfjGRxoppM+xI9dZO+jhYiy8LuC0oBohTjJq
@@ -66,46 +62,64 @@ s1+eh00n/tVpi2Jj9pCm7S0csSXvXj8v2OTdK1jt4YjpzR0/rwh4+/xlOjDjZEqH
 vMPhpzpbgnwkxZ3X8BFne9dJ3maC5zQ3LAeCP5m1W0hXzagYhfyjo74slJgD1O8c
 LDf2Oxc5MyM8Y/UK497zfqSPfgT3NhQmhHzk83DjXw3I6Z3A3U+Jp61w0eBRI1nx
 H1UIG+gldcAKUTcfwL0lghoT3nmi9JAbvek0Smhz00Bbo8/dx8vwQRxDUxlt7Exx
-NwARAQABiQG8BBgBCAAmAhsMFiEEka4tjB4nWmmb/r77lDMMelCvzPMFAmahA9IF
+NwARAQABiQG8BBgBCAAmFiEEka4tjB4nWmmb/r77lDMMelCvzPMFAmJw/g0CGwwF
-CRb8CMUACgkQlDMMelCvzPPQgQv/d5/z+fxgKqgfhQX+V49X4WgTVxZ/CzztDoJ1
+CQPCZwAACgkQlDMMelCvzPPT7Qv8CjXUEhphZFLwpBfaNOzRNfIXJST9aDit8zHW
-XAq1dzTNEy8AFguXIo6eVXPSpMxec7ZreN3+UPQBnCf3eR5YxWNYOYKmk0G4E8D2
+IMmfSpORVfpU71IyIB3o/DtTUPwCeb8nvNJs7aj1QT1ZUSsqFa3yY2S16V/g8+WN
-KGUJept7TSA42/8N2ov6tToXFg4CgzKZj0fYLwgutly7K8eiWmSU6ptaO8aEQBHB
+sHca6oDSc1J+A0eEpEL1HbG1b5OPBC0AeGvvMOoqrbqThBZVKg1Jc/0SD3cvKElv
-gTGIOO3h6vJMGVycmoeRnHjv4wV84YWSVFSoJ7cY0he4Z9UznJBbE/KHZjrkXsPo
+aHeCZCNNmfcZ2Ib4HYhhc8//ZtC9TeI+5J/YesctY1M12EoWMxMrc27Y3P5Pa0BI
-N+Gg5lDuOP5xjKzM5SogV9lhxBAhMWAg3URUF15yruZBiA8uV1FOK8sal/9C1G7V
+Uc3qxWggPq1vOFYsEshL0w99HyJvREJmQA7Fa0crV+rICxyrBxJeNnEvjH/0KCBU
-M6ygA6uOZqXlZtcdA94RoSsW2pZ9eLVPsxz2B3Zko7tu11MpNP/wYmfGTI3KxZBj
+LCkEonLY1QwrxyeeV3VpxGE3zHHE3azOdAjTIoAdzX5f/qhbgYlM68GL2f8xdDkp
-n/eodvwjJSgHpGOFSmbNzvPJo3to5nNlp7wH1KxIMc6Uuu9hgfDfwkFZgV2bnFIa
+O0igSGHWhO4F8BfmE7IOTx1Bi7daczp8nCFxh73cKpKB0RUsd9xxrqYpovjmEAlo
-Q6gyF548Ub48z7Dz83+WwLgbX19ve4oZx+dqSdczP6ILHRQomtrzrkkP2LU52oI5
+w7aHpdzt64NQcsrbK10OSVDF3gFa9Vz20/NQvdUrp8jGmAb/8+nYqI94Jsc28H36
-mxFo+ioe/ABCufSmyqFye0psX3Sp
+UeGsouhyuITLwEhScounZDqop+Dx
-=WtqZ
+=Zg+6
 -----END PGP PUBLIC KEY BLOCK-----
 ```
 </details>
 
-## Local development
+### Building from source
-> [!TIP]
+> We recommend using a version manager as versions change very quickly. You will likely need to switch 
-> 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. Recommended nodejs version is Iron LTS (v20).
+between multiple Node.js versions based on the needs of different projects you're working on. [NVM on windows](https://github.com/coreybutler/nvm-windows#installation--upgrades) on Windows and [nvm](https://github.com/nvm-sh/nvm) on Linux/macOS are pretty good choices. Also recommended nodejs version is 16.15.0 LTS.
+
+Execute the following commands to compile the app from its source code:
 
-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 need to 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 Ajay Bura (ajbura)
+
+Code licensed under the MIT License: <http://opensource.org/licenses/MIT>
+
+Graphics licensed under CC-BY 4.0: <https://creativecommons.org/licenses/by/4.0/>

_redirects

@@ -0,0 +1,3 @@
+# Redirects from what the browser requests to what we serve
+/login       /
+/register    /

build.config.ts

@@ -1,3 +0,0 @@
-export default {
-  base: '/',
-};

config.json

@@ -1,38 +1,11 @@
 {
-  "defaultHomeserver": 2,
+  "defaultHomeserver": 3,
   "homeserverList": [
-    "converser.eu",
     "envs.net",
+    "halogen.city",
+    "kde.org",
     "matrix.org",
-    "monero.social",
+    "mozilla.org"
-    "mozilla.org",
-    "xmr.se"
   ],
-  "allowCustomHomeservers": true,
+  "allowCustomHomeservers": true
-
-  "featuredCommunities": {
-    "openAsDefault": false,
-    "spaces": [
-      "#cinny-space:matrix.org",
-      "#community:matrix.org",
-      "#space:envs.net",
-      "#science-space:matrix.org",
-      "#libregaming-games:tchncs.de",
-      "#mathematics-on:matrix.org"
-    ],
-    "rooms": [
-      "#cinny:matrix.org",
-      "#freesoftware:matrix.org",
-      "#pcapdroid:matrix.org",
-      "#gentoo:matrix.org",
-      "#PrivSec.dev:arcticfoxes.net",
-      "#disroot:aria-net.org"
-    ],
-    "servers": ["envs.net", "matrix.org", "monero.social", "mozilla.org"]
-  },
-
-  "hashRouter": {
-    "enabled": false,
-    "basename": "/"
-  }
 }

contrib/caddy/caddyfile

@@ -1,6 +0,0 @@
-# more info: https://caddyserver.com/docs/caddyfile/patterns#single-page-apps-spas
-cinny.domain.tld {
-  root * /path/to/cinny/dist
-  try_files {path} / index.html
-  file_server
-}

contrib/nginx/cinny.domain.tld.conf

@@ -1,34 +1,27 @@
 server {
-    listen 80;
+	listen 80;
-    listen [::]:80;
+	listen [::]:80;
-    server_name cinny.domain.tld;
+	server_name cinny.domain.tld;
 
-    location / {
+	location / {
-        return 301 https://$host$request_uri;
+		return 301 https://$host$request_uri;
-    }
+	}
 
-    location /.well-known/acme-challenge/ {
+	location /.well-known/acme-challenge/ {
-        alias /var/lib/letsencrypt/.well-known/acme-challenge/;
+		alias /var/lib/letsencrypt/.well-known/acme-challenge/;
-    }
+	}
 }
 
 server {
-    listen 443 ssl http2;
+	listen 443 ssl http2;
-    listen [::]:443 ssl;
+	listen [::]:443 ssl;
-    server_name cinny.domain.tld;
+	server_name cinny.domain.tld;
 
-    location / {
+	location / {
-        root /opt/cinny/dist/;
+		root /opt/cinny/dist/;
-
+		index index.html;
-        rewrite ^/config.json$ /config.json break;
+	}
-        rewrite ^/manifest.json$ /manifest.json break;
+	location ~* ^\/(login|register) {
-
+		try_files $uri $uri/ /index.html;
-        rewrite ^/sw.js$ /sw.js break;
+	}
-        rewrite ^/pdf.worker.min.js$ /pdf.worker.min.js break;
-
-        rewrite ^/public/(.*)$ /public/$1 break;
-        rewrite ^/assets/(.*)$ /assets/$1 break;
-
-        rewrite ^(.+)$ /index.html break;
-    }
 }

docker-nginx.conf

@@ -1,19 +0,0 @@
-server {
-  listen 80;
-  listen [::]:80;
-
-  location / {
-    root /usr/share/nginx/html;
-
-    rewrite ^/config.json$ /config.json break;
-    rewrite ^/manifest.json$ /manifest.json break;
-
-    rewrite ^/sw.js$ /sw.js break;
-    rewrite ^/pdf.worker.min.js$ /pdf.worker.min.js break;
-
-    rewrite ^/public/(.*)$ /public/$1 break;
-    rewrite ^/assets/(.*)$ /assets/$1 break;
-
-    rewrite ^(.+)$ /index.html break;
-  }
-}

index.html

@@ -1,95 +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, maximum-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>
-    <script type="module" src="./src/index.tsx"></script>
-  </body>
-</html>

netlify.toml

@@ -1,36 +0,0 @@
-[[redirects]]
-  from = "/config.json"
-  to = "/config.json"
-  status = 200
-
-[[redirects]]
-  from = "/manifest.json"
-  to = "/manifest.json"
-  status = 200
-
-[[redirects]]
-  from = "/sw.js"
-  to = "/sw.js"
-  status = 200
-
-  
-[[redirects]]
-  from = "/pdf.worker.min.js"
-  to = "/pdf.worker.min.js"
-  status = 200
-
-[[redirects]]
-  from = "/public/*"
-  to = "/public/:splat"
-  status = 200
-
-[[redirects]]
-  from = "/assets/*"
-  to = "/assets/:splat"
-  status = 200
-
-[[redirects]]
-  from = "/*"
-  to = "/index.html"
-  status = 200
-  force = true

package.json

@@ -1,118 +1,90 @@
 {
   "name": "cinny",
-  "version": "4.8.1",
+  "version": "2.1.3",
   "description": "Yet another matrix client",
   "main": "index.js",
-  "type": "module",
   "engines": {
-    "node": ">=16.0.0"
+    "npm": ">=6.14.8 <=8.5.5",
+    "node": ">=14.15.0 <=17.9.0"
   },
   "scripts": {
-    "start": "vite",
+    "start": "webpack serve --config ./webpack.dev.js --open",
-    "build": "vite build",
+    "build": "webpack --config ./webpack.prod.js"
-    "lint": "yarn check:eslint && yarn check:prettier",
-    "check:eslint": "eslint src/*",
-    "check:prettier": "prettier --check .",
-    "fix:prettier": "prettier --write .",
-    "typecheck": "tsc --noEmit"
   },
   "keywords": [],
   "author": "Ajay Bura",
-  "license": "AGPL-3.0-only",
+  "license": "MIT",
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "1.1.6",
+    "@fontsource/inter": "^4.5.12",
-    "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
+    "@fontsource/roboto": "^4.5.8",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
+    "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.12.tgz",
-    "@fontsource/inter": "4.5.14",
+    "@tippyjs/react": "^4.2.6",
-    "@tanstack/react-query": "5.24.1",
+    "babel-polyfill": "^6.26.0",
-    "@tanstack/react-query-devtools": "5.24.1",
+    "blurhash": "^1.1.5",
-    "@tanstack/react-virtual": "3.2.0",
+    "browser-encrypt-attachment": "^0.3.0",
-    "@tippyjs/react": "4.2.6",
+    "dateformat": "^5.0.3",
-    "@vanilla-extract/css": "1.9.3",
+    "emojibase-data": "^7.0.1",
-    "@vanilla-extract/recipes": "0.3.0",
+    "file-saver": "^2.0.5",
-    "@vanilla-extract/vite-plugin": "3.7.1",
+    "flux": "^4.0.3",
-    "await-to-js": "3.0.0",
+    "formik": "^2.2.9",
-    "badwords-list": "2.0.1-4",
+    "html-react-parser": "^3.0.1",
-    "blurhash": "2.0.4",
+    "katex": "^0.16.0",
-    "browser-encrypt-attachment": "0.3.0",
+    "linkify-html": "^4.0.0-beta.5",
-    "chroma-js": "3.1.2",
+    "linkifyjs": "^4.0.0-beta.5",
-    "classnames": "2.3.2",
+    "matrix-js-sdk": "^19.4.0",
-    "dateformat": "5.0.3",
+    "micromark": "^3.0.10",
-    "dayjs": "1.11.10",
+    "micromark-extension-gfm": "^2.0.1",
-    "domhandler": "5.0.3",
+    "micromark-extension-math": "^2.0.2",
-    "emojibase": "15.3.1",
+    "micromark-util-chunked": "^1.0.0",
-    "emojibase-data": "15.3.2",
+    "micromark-util-resolve-all": "^1.0.0",
-    "file-saver": "2.0.5",
+    "micromark-util-symbol": "^1.0.1",
-    "flux": "4.0.3",
+    "prop-types": "^15.8.1",
-    "focus-trap-react": "10.0.2",
+    "react": "^17.0.2",
-    "folds": "2.2.0",
+    "react-autosize-textarea": "^7.1.0",
-    "formik": "2.4.6",
+    "react-blurhash": "^0.1.3",
-    "html-dom-parser": "4.0.0",
+    "react-dnd": "^15.1.2",
-    "html-react-parser": "4.2.0",
+    "react-dnd-html5-backend": "^15.1.3",
-    "i18next": "23.12.2",
+    "react-dom": "^17.0.2",
-    "i18next-browser-languagedetector": "8.0.0",
+    "react-google-recaptcha": "^2.1.0",
-    "i18next-http-backend": "2.5.2",
+    "react-modal": "^3.15.1",
-    "immer": "9.0.16",
+    "sanitize-html": "^2.7.1",
-    "is-hotkey": "0.2.0",
+    "tippy.js": "^6.3.7",
-    "jotai": "2.6.0",
+    "twemoji": "^14.0.2"
-    "linkify-react": "4.1.3",
-    "linkifyjs": "4.1.3",
-    "matrix-js-sdk": "37.5.0",
-    "millify": "6.1.0",
-    "pdfjs-dist": "4.2.67",
-    "prismjs": "1.30.0",
-    "prop-types": "15.8.1",
-    "react": "18.2.0",
-    "react-aria": "3.29.1",
-    "react-autosize-textarea": "7.1.0",
-    "react-blurhash": "0.2.0",
-    "react-colorful": "5.6.1",
-    "react-dom": "18.2.0",
-    "react-error-boundary": "4.0.13",
-    "react-google-recaptcha": "2.1.0",
-    "react-i18next": "15.0.0",
-    "react-modal": "3.16.1",
-    "react-range": "1.8.14",
-    "react-router-dom": "6.20.0",
-    "sanitize-html": "2.12.1",
-    "slate": "0.112.0",
-    "slate-dom": "0.112.2",
-    "slate-history": "0.110.3",
-    "slate-react": "0.112.1",
-    "tippy.js": "6.3.7",
-    "ua-parser-js": "1.0.35"
   },
   "devDependencies": {
-    "@esbuild-plugins/node-globals-polyfill": "0.2.3",
+    "@babel/core": "^7.18.10",
-    "@rollup/plugin-inject": "5.0.3",
+    "@babel/preset-env": "^7.18.10",
-    "@rollup/plugin-wasm": "6.1.1",
+    "@babel/preset-react": "^7.18.6",
-    "@types/chroma-js": "3.1.1",
+    "assert": "^2.0.0",
-    "@types/file-saver": "2.0.5",
+    "babel-loader": "^8.2.5",
-    "@types/is-hotkey": "0.1.10",
+    "browserify-fs": "^1.0.0",
-    "@types/node": "18.11.18",
+    "buffer": "^6.0.3",
-    "@types/prismjs": "1.26.0",
+    "clean-webpack-plugin": "^4.0.0",
-    "@types/react": "18.2.39",
+    "copy-webpack-plugin": "^11.0.0",
-    "@types/react-dom": "18.2.17",
+    "crypto-browserify": "^3.12.0",
-    "@types/react-google-recaptcha": "2.1.8",
+    "css-loader": "^6.7.1",
-    "@types/sanitize-html": "2.9.0",
+    "css-minimizer-webpack-plugin": "^4.0.0",
-    "@types/ua-parser-js": "0.7.36",
+    "eslint": "^8.21.0",
-    "@typescript-eslint/eslint-plugin": "5.46.1",
+    "eslint-config-airbnb": "^19.0.4",
-    "@typescript-eslint/parser": "5.46.1",
+    "eslint-plugin-import": "^2.26.0",
-    "@vitejs/plugin-react": "4.2.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "buffer": "6.0.3",
+    "eslint-plugin-react": "^7.30.1",
-    "eslint": "8.29.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-config-airbnb": "19.0.4",
+    "favicons": "^6.2.2",
-    "eslint-config-prettier": "8.5.0",
+    "favicons-webpack-plugin": "^5.0.2",
-    "eslint-plugin-import": "2.29.1",
+    "html-loader": "^4.1.0",
-    "eslint-plugin-jsx-a11y": "6.6.1",
+    "html-webpack-plugin": "^5.3.1",
-    "eslint-plugin-react": "7.31.11",
+    "mini-css-extract-plugin": "^2.6.1",
-    "eslint-plugin-react-hooks": "4.6.0",
+    "path-browserify": "^1.0.1",
-    "prettier": "2.8.1",
+    "sass": "^1.54.3",
-    "sass": "1.56.2",
+    "sass-loader": "^13.0.2",
-    "typescript": "4.9.4",
+    "stream-browserify": "^3.0.0",
-    "vite": "5.4.19",
+    "style-loader": "^3.3.1",
-    "vite-plugin-pwa": "0.20.5",
+    "url": "^0.11.0",
-    "vite-plugin-static-copy": "1.0.4",
+    "util": "^0.12.4",
-    "vite-plugin-top-level-await": "1.4.4"
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.3",
+    "webpack-merge": "^5.7.3"
   }
 }

public/index.html

@@ -0,0 +1,28 @@
+<!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>
+    <audio id="notificationSound">
+        <source src="./sound/notification.ogg" type="audio/ogg" />
+    </audio>
+    <audio id="inviteSound">
+        <source src="./sound/invite.ogg" type="audio/ogg" />
+    </audio>
+</body>
+</html>

public/locales/de.json

@@ -1,7 +0,0 @@
-{
-  "Organisms": {
-    "RoomCommon": {
-      "changed_room_name": " hat den Raum Name geändert"
-    }
-  }
-}

public/locales/en.json

@@ -1,7 +0,0 @@
-{
-  "Organisms": {
-    "RoomCommon": {
-      "changed_room_name": " changed room name"
-    }
-  }
-}

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

@@ -0,0 +1,395 @@
+Attribution 4.0 International
+
+=======================================================================
+
+Creative Commons Corporation ("Creative Commons") is not a law firm and
+does not provide legal services or legal advice. Distribution of
+Creative Commons public licenses does not create a lawyer-client or
+other relationship. Creative Commons makes its licenses and related
+information available on an "as-is" basis. Creative Commons gives no
+warranties regarding its licenses, any material licensed under their
+terms and conditions, or any related information. Creative Commons
+disclaims all liability for damages resulting from their use to the
+fullest extent possible.
+
+Using Creative Commons Public Licenses
+
+Creative Commons public licenses provide a standard set of terms and
+conditions that creators and other rights holders may use to share
+original works of authorship and other material subject to copyright
+and certain other rights specified in the public license below. The
+following considerations are for informational purposes only, are not
+exhaustive, and do not form part of our licenses.
+
+     Considerations for licensors: Our public licenses are
+     intended for use by those authorized to give the public
+     permission to use material in ways otherwise restricted by
+     copyright and certain other rights. Our licenses are
+     irrevocable. Licensors should read and understand the terms
+     and conditions of the license they choose before applying it.
+     Licensors should also secure all rights necessary before
+     applying our licenses so that the public can reuse the
+     material as expected. Licensors should clearly mark any
+     material not subject to the license. This includes other CC-
+     licensed material, or material used under an exception or
+     limitation to copyright. More considerations for licensors:
+    wiki.creativecommons.org/Considerations_for_licensors
+
+     Considerations for the public: By using one of our public
+     licenses, a licensor grants the public permission to use the
+     licensed material under specified terms and conditions. If
+     the licensor's permission is not necessary for any reason--for
+     example, because of any applicable exception or limitation to
+     copyright--then that use is not regulated by the license. Our
+     licenses grant only permissions under copyright and certain
+     other rights that a licensor has authority to grant. Use of
+     the licensed material may still be restricted for other
+     reasons, including because others have copyright or other
+     rights in the material. A licensor may make special requests,
+     such as asking that all changes be marked or described.
+     Although not required by our licenses, you are encouraged to
+     respect those requests where reasonable. More considerations
+     for the public:
+    wiki.creativecommons.org/Considerations_for_licensees
+
+=======================================================================
+
+Creative Commons Attribution 4.0 International Public License
+
+By exercising the Licensed Rights (defined below), You accept and agree
+to be bound by the terms and conditions of this Creative Commons
+Attribution 4.0 International Public License ("Public License"). To the
+extent this Public License may be interpreted as a contract, You are
+granted the Licensed Rights in consideration of Your acceptance of
+these terms and conditions, and the Licensor grants You such rights in
+consideration of benefits the Licensor receives from making the
+Licensed Material available under these terms and conditions.
+
+
+Section 1 -- Definitions.
+
+  a. Adapted Material means material subject to Copyright and Similar
+     Rights that is derived from or based upon the Licensed Material
+     and in which the Licensed Material is translated, altered,
+     arranged, transformed, or otherwise modified in a manner requiring
+     permission under the Copyright and Similar Rights held by the
+     Licensor. For purposes of this Public License, where the Licensed
+     Material is a musical work, performance, or sound recording,
+     Adapted Material is always produced where the Licensed Material is
+     synched in timed relation with a moving image.
+
+  b. Adapter's License means the license You apply to Your Copyright
+     and Similar Rights in Your contributions to Adapted Material in
+     accordance with the terms and conditions of this Public License.
+
+  c. Copyright and Similar Rights means copyright and/or similar rights
+     closely related to copyright including, without limitation,
+     performance, broadcast, sound recording, and Sui Generis Database
+     Rights, without regard to how the rights are labeled or
+     categorized. For purposes of this Public License, the rights
+     specified in Section 2(b)(1)-(2) are not Copyright and Similar
+     Rights.
+
+  d. Effective Technological Measures means those measures that, in the
+     absence of proper authority, may not be circumvented under laws
+     fulfilling obligations under Article 11 of the WIPO Copyright
+     Treaty adopted on December 20, 1996, and/or similar international
+     agreements.
+
+  e. Exceptions and Limitations means fair use, fair dealing, and/or
+     any other exception or limitation to Copyright and Similar Rights
+     that applies to Your use of the Licensed Material.
+
+  f. Licensed Material means the artistic or literary work, database,
+     or other material to which the Licensor applied this Public
+     License.
+
+  g. Licensed Rights means the rights granted to You subject to the
+     terms and conditions of this Public License, which are limited to
+     all Copyright and Similar Rights that apply to Your use of the
+     Licensed Material and that the Licensor has authority to license.
+
+  h. Licensor means the individual(s) or entity(ies) granting rights
+     under this Public License.
+
+  i. Share means to provide material to the public by any means or
+     process that requires permission under the Licensed Rights, such
+     as reproduction, public display, public performance, distribution,
+     dissemination, communication, or importation, and to make material
+     available to the public including in ways that members of the
+     public may access the material from a place and at a time
+     individually chosen by them.
+
+  j. Sui Generis Database Rights means rights other than copyright
+     resulting from Directive 96/9/EC of the European Parliament and of
+     the Council of 11 March 1996 on the legal protection of databases,
+     as amended and/or succeeded, as well as other essentially
+     equivalent rights anywhere in the world.
+
+  k. You means the individual or entity exercising the Licensed Rights
+     under this Public License. Your has a corresponding meaning.
+
+
+Section 2 -- Scope.
+
+  a. License grant.
+
+       1. Subject to the terms and conditions of this Public License,
+          the Licensor hereby grants You a worldwide, royalty-free,
+          non-sublicensable, non-exclusive, irrevocable license to
+          exercise the Licensed Rights in the Licensed Material to:
+
+            a. reproduce and Share the Licensed Material, in whole or
+               in part; and
+
+            b. produce, reproduce, and Share Adapted Material.
+
+       2. Exceptions and Limitations. For the avoidance of doubt, where
+          Exceptions and Limitations apply to Your use, this Public
+          License does not apply, and You do not need to comply with
+          its terms and conditions.
+
+       3. Term. The term of this Public License is specified in Section
+          6(a).
+
+       4. Media and formats; technical modifications allowed. The
+          Licensor authorizes You to exercise the Licensed Rights in
+          all media and formats whether now known or hereafter created,
+          and to make technical modifications necessary to do so. The
+          Licensor waives and/or agrees not to assert any right or
+          authority to forbid You from making technical modifications
+          necessary to exercise the Licensed Rights, including
+          technical modifications necessary to circumvent Effective
+          Technological Measures. For purposes of this Public License,
+          simply making modifications authorized by this Section 2(a)
+          (4) never produces Adapted Material.
+
+       5. Downstream recipients.
+
+            a. Offer from the Licensor -- Licensed Material. Every
+               recipient of the Licensed Material automatically
+               receives an offer from the Licensor to exercise the
+               Licensed Rights under the terms and conditions of this
+               Public License.
+
+            b. No downstream restrictions. You may not offer or impose
+               any additional or different terms or conditions on, or
+               apply any Effective Technological Measures to, the
+               Licensed Material if doing so restricts exercise of the
+               Licensed Rights by any recipient of the Licensed
+               Material.
+
+       6. No endorsement. Nothing in this Public License constitutes or
+          may be construed as permission to assert or imply that You
+          are, or that Your use of the Licensed Material is, connected
+          with, or sponsored, endorsed, or granted official status by,
+          the Licensor or others designated to receive attribution as
+          provided in Section 3(a)(1)(A)(i).
+
+  b. Other rights.
+
+       1. Moral rights, such as the right of integrity, are not
+          licensed under this Public License, nor are publicity,
+          privacy, and/or other similar personality rights; however, to
+          the extent possible, the Licensor waives and/or agrees not to
+          assert any such rights held by the Licensor to the limited
+          extent necessary to allow You to exercise the Licensed
+          Rights, but not otherwise.
+
+       2. Patent and trademark rights are not licensed under this
+          Public License.
+
+       3. To the extent possible, the Licensor waives any right to
+          collect royalties from You for the exercise of the Licensed
+          Rights, whether directly or through a collecting society
+          under any voluntary or waivable statutory or compulsory
+          licensing scheme. In all other cases the Licensor expressly
+          reserves any right to collect such royalties.
+
+
+Section 3 -- License Conditions.
+
+Your exercise of the Licensed Rights is expressly made subject to the
+following conditions.
+
+  a. Attribution.
+
+       1. If You Share the Licensed Material (including in modified
+          form), You must:
+
+            a. retain the following if it is supplied by the Licensor
+               with the Licensed Material:
+
+                 i. identification of the creator(s) of the Licensed
+                    Material and any others designated to receive
+                    attribution, in any reasonable manner requested by
+                    the Licensor (including by pseudonym if
+                    designated);
+
+                ii. a copyright notice;
+
+               iii. a notice that refers to this Public License;
+
+                iv. a notice that refers to the disclaimer of
+                    warranties;
+
+                 v. a URI or hyperlink to the Licensed Material to the
+                    extent reasonably practicable;
+
+            b. indicate if You modified the Licensed Material and
+               retain an indication of any previous modifications; and
+
+            c. indicate the Licensed Material is licensed under this
+               Public License, and include the text of, or the URI or
+               hyperlink to, this Public License.
+
+       2. You may satisfy the conditions in Section 3(a)(1) in any
+          reasonable manner based on the medium, means, and context in
+          which You Share the Licensed Material. For example, it may be
+          reasonable to satisfy the conditions by providing a URI or
+          hyperlink to a resource that includes the required
+          information.
+
+       3. If requested by the Licensor, You must remove any of the
+          information required by Section 3(a)(1)(A) to the extent
+          reasonably practicable.
+
+       4. If You Share Adapted Material You produce, the Adapter's
+          License You apply must not prevent recipients of the Adapted
+          Material from complying with this Public License.
+
+
+Section 4 -- Sui Generis Database Rights.
+
+Where the Licensed Rights include Sui Generis Database Rights that
+apply to Your use of the Licensed Material:
+
+  a. for the avoidance of doubt, Section 2(a)(1) grants You the right
+     to extract, reuse, reproduce, and Share all or a substantial
+     portion of the contents of the database;
+
+  b. if You include all or a substantial portion of the database
+     contents in a database in which You have Sui Generis Database
+     Rights, then the database in which You have Sui Generis Database
+     Rights (but not its individual contents) is Adapted Material; and
+
+  c. You must comply with the conditions in Section 3(a) if You Share
+     all or a substantial portion of the contents of the database.
+
+For the avoidance of doubt, this Section 4 supplements and does not
+replace Your obligations under this Public License where the Licensed
+Rights include other Copyright and Similar Rights.
+
+
+Section 5 -- Disclaimer of Warranties and Limitation of Liability.
+
+  a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
+     EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
+     AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
+     ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
+     IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
+     WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
+     PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
+     ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
+     KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
+     ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
+
+  b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
+     TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
+     NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
+     INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
+     COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
+     USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
+     ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
+     DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
+     IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
+
+  c. The disclaimer of warranties and limitation of liability provided
+     above shall be interpreted in a manner that, to the extent
+     possible, most closely approximates an absolute disclaimer and
+     waiver of all liability.
+
+
+Section 6 -- Term and Termination.
+
+  a. This Public License applies for the term of the Copyright and
+     Similar Rights licensed here. However, if You fail to comply with
+     this Public License, then Your rights under this Public License
+     terminate automatically.
+
+  b. Where Your right to use the Licensed Material has terminated under
+     Section 6(a), it reinstates:
+
+       1. automatically as of the date the violation is cured, provided
+          it is cured within 30 days of Your discovery of the
+          violation; or
+
+       2. upon express reinstatement by the Licensor.
+
+     For the avoidance of doubt, this Section 6(b) does not affect any
+     right the Licensor may have to seek remedies for Your violations
+     of this Public License.
+
+  c. For the avoidance of doubt, the Licensor may also offer the
+     Licensed Material under separate terms or conditions or stop
+     distributing the Licensed Material at any time; however, doing so
+     will not terminate this Public License.
+
+  d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
+     License.
+
+
+Section 7 -- Other Terms and Conditions.
+
+  a. The Licensor shall not be bound by any additional or different
+     terms or conditions communicated by You unless expressly agreed.
+
+  b. Any arrangements, understandings, or agreements regarding the
+     Licensed Material not stated herein are separate from and
+     independent of the terms and conditions of this Public License.
+
+
+Section 8 -- Interpretation.
+
+  a. For the avoidance of doubt, this Public License does not, and
+     shall not be interpreted to, reduce, limit, restrict, or impose
+     conditions on any use of the Licensed Material that could lawfully
+     be made without permission under this Public License.
+
+  b. To the extent possible, if any provision of this Public License is
+     deemed unenforceable, it shall be automatically reformed to the
+     minimum extent necessary to make it enforceable. If the provision
+     cannot be reformed, it shall be severed from this Public License
+     without affecting the enforceability of the remaining terms and
+     conditions.
+
+  c. No term or condition of this Public License will be waived and no
+     failure to comply consented to unless expressly agreed to by the
+     Licensor.
+
+  d. Nothing in this Public License constitutes or may be interpreted
+     as a limitation upon, or waiver of, any privileges and immunities
+     that apply to the Licensor or You, including from the legal
+     processes of any jurisdiction or authority.
+
+
+=======================================================================
+
+Creative Commons is not a party to its public
+licenses. Notwithstanding, Creative Commons may elect to apply one of
+its public licenses to material it publishes and in those instances
+will be considered the “Licensor.” The text of the Creative Commons
+public licenses is dedicated to the public domain under the CC0 Public
+Domain Dedication. Except for the limited purpose of indicating that
+material is shared under a Creative Commons public license or as
+otherwise permitted by the Creative Commons policies published at
+creativecommons.org/policies, Creative Commons does not authorize the
+use of the trademark "Creative Commons" or any other trademark or logo
+of Creative Commons without its prior written consent including,
+without limitation, in connection with any unauthorized modifications
+to any of its public licenses or any other arrangements,
+understandings, or agreements concerning use of licensed material. For
+the avoidance of doubt, this paragraph does not form part of the
+public licenses.
+
+Creative Commons may be contacted at creativecommons.org.

public/res/README.md

@@ -0,0 +1,7 @@
+Graphics (c) by Ajay Bura (ajbura)
+
+Graphic content is licensed under a
+Creative Commons Attribution 4.0 International License.
+
+You should have received a copy of the license along with this
+work. If not, see <http://creativecommons.org/licenses/by/4.0/>;.

public/res/ic/outlined/external.svg

@@ -1,4 +1,12 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<?xml version="1.0" encoding="utf-8"?>
-<path d="M14 3V5H17.8L12.9 9.9L14.3 11.3L19 6.6V10.2H21V3H14Z" fill="black"/>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<path d="M5 5H10V3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V14.2H19V19H5V5Z" fill="black"/>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="14,3 14,5 17.8,5 12.9,9.9 14.3,11.3 19,6.6 19,10.2 21,10.2 21,3 	"/>
+	<path d="M3,10.2h2V5h5V3H5C3.9,3,3,3.9,3,5V10.2z"/>
+	<path d="M5,14.2H3V19c0,1.1,0.9,2,2,2h5v-2H5V14.2z"/>
+	<path d="M19,19h-5v2h5c1.1,0,2-0.9,2-2v-4.8h-2V19z"/>
+</g>
 </svg>

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

@@ -2,13 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './Avatar.scss';
 
+import { twemojify } from '../../../util/twemojify';
+
 import Text from '../text/Text';
 import RawIcon from '../system-icons/RawIcon';
 
 import ImageBrokenSVG from '../../../../public/res/svg/image-broken.svg';
 import { avatarInitials } from '../../../util/common';
 
-const Avatar = React.forwardRef(({ text, bgColor, iconSrc, iconColor, imageSrc, size }, ref) => {
+const Avatar = React.forwardRef(({
+  text, bgColor, iconSrc, iconColor, imageSrc, size,
+}, ref) => {
   let textSize = 's1';
   if (size === 'large') textSize = 'h1';
   if (size === 'small') textSize = 'b1';
@@ -16,34 +20,34 @@ const Avatar = React.forwardRef(({ text, bgColor, iconSrc, iconColor, imageSrc,
 
   return (
     <div ref={ref} className={`avatar-container avatar-container__${size} noselect`}>
-      {imageSrc !== null ? (
+      {
-        <img
+        imageSrc !== null
-          draggable="false"
+          ? (
-          src={imageSrc}
+            <img
-          onLoad={(e) => {
+              draggable="false"
-            e.target.style.backgroundColor = 'transparent';
+              src={imageSrc}
-          }}
+              onLoad={(e) => { e.target.style.backgroundColor = 'transparent'; }}
-          onError={(e) => {
+              onError={(e) => { e.target.src = ImageBrokenSVG; }}
-            e.target.src = ImageBrokenSVG;
+              alt=""
-          }}
+            />
-          alt=""
+          )
-        />
+          : (
-      ) : (
+            <span
-        <span
+              style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
-          style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
+              className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
-          className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
+            >
-        >
+              {
-          {iconSrc !== null ? (
+                iconSrc !== null
-            <RawIcon size={size} src={iconSrc} color={iconColor} />
+                  ? <RawIcon size={size} src={iconSrc} color={iconColor} />
-          ) : (
+                  : text !== null && (
-            text !== null && (
+                    <Text variant={textSize} primary>
-              <Text variant={textSize} primary>
+                      {twemojify(avatarInitials(text))}
-                {avatarInitials(text)}
+                    </Text>
-              </Text>
+                  )
-            )
+              }
-          )}
+            </span>
-        </span>
+          )
-      )}
+      }
     </div>
   );
 });

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

@@ -22,7 +22,8 @@
     height: 16px;
     background-color: var(--tc-surface-low);
     border-radius: calc(var(--bo-radius) / 2);
-    transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
+    transition: transform 200ms ease-in-out,
+      opacity 200ms ease-in-out;
     opacity: 0.6;
   }
 
@@ -35,8 +36,8 @@
       @include dir.prop(transform, var(--ltr), var(--rtl));
 
       transform: translateX(calc(125%));
-      background-color: var(--bg-surface);
+      background-color: white;
       opacity: 1;
     }
   }
-}
+}

src/app/atoms/math/Math.jsx

@@ -0,0 +1,32 @@
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+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/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.WebkitMaskImage = `url(${src})`;
-    style.maskImage = `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

@@ -41,9 +41,8 @@ TabItem.propTypes = {
 function Tabs({ items, defaultSelected, onSelect }) {
   const [selectedItem, setSelectedItem] = useState(items[defaultSelected]);
 
-  const handleTabSelection = (item, index, target) => {
+  const handleTabSelection = (item, index) => {
     if (selectedItem === item) return;
-    target.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
     setSelectedItem(item);
     onSelect(item, index);
   };
@@ -58,7 +57,7 @@ function Tabs({ items, defaultSelected, onSelect }) {
               selected={selectedItem.text === item.text}
               iconSrc={item.iconSrc}
               disabled={item.disabled}
-              onClick={(e) => handleTabSelection(item, index, e.currentTarget)}
+              onClick={() => handleTabSelection(item, index)}
             >
               {item.text}
             </TabItem>

src/app/atoms/time/Time.jsx

@@ -4,25 +4,10 @@ import PropTypes from 'prop-types';
 import dateFormat from 'dateformat';
 import { isInSameDay } from '../../../util/common';
 
-/**
+function Time({ timestamp, fullTime }) {
- * Renders a formatted timestamp.
- *
- * Displays the time in hour:minute format if the message is from today or yesterday, unless `fullTime` is true.
- * For older messages, it shows the date and time.
- *
- * @param {number} timestamp - The timestamp to display.
- * @param {boolean} [fullTime=false] - If true, always show the full date and time.
- * @param {boolean} hour24Clock - Whether to use 24-hour time format.
- * @param {string} dateFormatString - Format string for the date part.
- * @returns {JSX.Element} A <time> element with the formatted date/time.
- */
-function Time({ timestamp, fullTime, hour24Clock, dateFormatString }) {
   const date = new Date(timestamp);
 
-  const formattedFullTime = dateFormat(
+  const formattedFullTime = dateFormat(date, 'dd mmmm yyyy, hh:MM TT');
-    date,
-    hour24Clock ? 'dd mmmm yyyy, HH:MM' : 'dd mmmm yyyy, hh:MM TT'
-  );
   let formattedDate = formattedFullTime;
 
   if (!fullTime) {
@@ -31,19 +16,17 @@ function Time({ timestamp, fullTime, hour24Clock, dateFormatString }) {
     compareDate.setDate(compareDate.getDate() - 1);
     const isYesterday = isInSameDay(date, compareDate);
 
-    const timeFormat = hour24Clock ? 'HH:MM' : 'hh:MM TT';
+    formattedDate = dateFormat(date, isToday || isYesterday ? 'hh:MM TT' : 'dd/mm/yyyy');
-
-    formattedDate = dateFormat(
-      date,
-      isToday || isYesterday ? timeFormat : dateFormatString.toLowerCase()
-    );
     if (isYesterday) {
       formattedDate = `Yesterday, ${formattedDate}`;
     }
   }
 
   return (
-    <time dateTime={date.toISOString()} title={formattedFullTime}>
+    <time
+      dateTime={date.toISOString()}
+      title={formattedFullTime}
+    >
       {formattedDate}
     </time>
   );
@@ -56,8 +39,6 @@ Time.defaultProps = {
 Time.propTypes = {
   timestamp: PropTypes.number.isRequired,
   fullTime: PropTypes.bool,
-  hour24Clock: PropTypes.bool.isRequired,
-  dateFormatString: PropTypes.string.isRequired,
 };
 
 export default Time;

src/app/components/AccountDataEditor.tsx

@@ -1,322 +0,0 @@
-import React, { FormEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  Box,
-  Text,
-  Icon,
-  Icons,
-  IconButton,
-  Input,
-  Button,
-  TextArea as TextAreaComponent,
-  color,
-  Spinner,
-  Chip,
-  Scroll,
-  config,
-} from 'folds';
-import { MatrixError } from 'matrix-js-sdk';
-import { Cursor } from '../plugins/text-area';
-import { syntaxErrorPosition } from '../utils/dom';
-import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { Page, PageHeader } from './page';
-import { useAlive } from '../hooks/useAlive';
-import { SequenceCard } from './sequence-card';
-import { TextViewerContent } from './text-viewer';
-import { useTextAreaCodeEditor } from '../hooks/useTextAreaCodeEditor';
-
-const EDITOR_INTENT_SPACE_COUNT = 2;
-
-export type AccountDataSubmitCallback = (type: string, content: object) => Promise<void>;
-
-type AccountDataInfo = {
-  type: string;
-  content: object;
-};
-
-type AccountDataEditProps = {
-  type: string;
-  defaultContent: string;
-  submitChange: AccountDataSubmitCallback;
-  onCancel: () => void;
-  onSave: (info: AccountDataInfo) => void;
-};
-function AccountDataEdit({
-  type,
-  defaultContent,
-  submitChange,
-  onCancel,
-  onSave,
-}: AccountDataEditProps) {
-  const alive = useAlive();
-
-  const textAreaRef = useRef<HTMLTextAreaElement>(null);
-  const [jsonError, setJSONError] = useState<SyntaxError>();
-
-  const { handleKeyDown, operations, getTarget } = useTextAreaCodeEditor(
-    textAreaRef,
-    EDITOR_INTENT_SPACE_COUNT
-  );
-
-  const [submitState, submit] = useAsyncCallback<void, MatrixError, [string, object]>(submitChange);
-  const submitting = submitState.status === AsyncStatus.Loading;
-
-  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
-    evt.preventDefault();
-    if (submitting) return;
-
-    const target = evt.target as HTMLFormElement | undefined;
-    const typeInput = target?.typeInput as HTMLInputElement | undefined;
-    const contentTextArea = target?.contentTextArea as HTMLTextAreaElement | undefined;
-    if (!typeInput || !contentTextArea) return;
-
-    const typeStr = typeInput.value.trim();
-    const contentStr = contentTextArea.value.trim();
-
-    let parsedContent: object;
-    try {
-      parsedContent = JSON.parse(contentStr);
-    } catch (e) {
-      setJSONError(e as SyntaxError);
-      return;
-    }
-    setJSONError(undefined);
-
-    if (
-      !typeStr ||
-      parsedContent === null ||
-      defaultContent === JSON.stringify(parsedContent, null, EDITOR_INTENT_SPACE_COUNT)
-    ) {
-      return;
-    }
-
-    submit(typeStr, parsedContent).then(() => {
-      if (alive()) {
-        onSave({
-          type: typeStr,
-          content: parsedContent,
-        });
-      }
-    });
-  };
-
-  useEffect(() => {
-    if (jsonError) {
-      const errorPosition = syntaxErrorPosition(jsonError) ?? 0;
-      const cursor = new Cursor(errorPosition, errorPosition, 'none');
-      operations.select(cursor);
-      getTarget()?.focus();
-    }
-  }, [jsonError, operations, getTarget]);
-
-  return (
-    <Box
-      as="form"
-      onSubmit={handleSubmit}
-      grow="Yes"
-      style={{
-        padding: config.space.S400,
-      }}
-      direction="Column"
-      gap="400"
-      aria-disabled={submitting}
-    >
-      <Box shrink="No" direction="Column" gap="100">
-        <Text size="L400">Account Data</Text>
-        <Box gap="300">
-          <Box grow="Yes" direction="Column">
-            <Input
-              variant={type.length > 0 || submitting ? 'SurfaceVariant' : 'Background'}
-              name="typeInput"
-              size="400"
-              radii="300"
-              readOnly={type.length > 0 || submitting}
-              defaultValue={type}
-              required
-            />
-          </Box>
-          <Button
-            variant="Success"
-            size="400"
-            radii="300"
-            type="submit"
-            disabled={submitting}
-            before={submitting && <Spinner variant="Primary" fill="Solid" size="300" />}
-          >
-            <Text size="B400">Save</Text>
-          </Button>
-          <Button
-            variant="Secondary"
-            fill="Soft"
-            size="400"
-            radii="300"
-            type="button"
-            onClick={onCancel}
-            disabled={submitting}
-          >
-            <Text size="B400">Cancel</Text>
-          </Button>
-        </Box>
-
-        {submitState.status === AsyncStatus.Error && (
-          <Text size="T200" style={{ color: color.Critical.Main }}>
-            <b>{submitState.error.message}</b>
-          </Text>
-        )}
-      </Box>
-      <Box grow="Yes" direction="Column" gap="100">
-        <Box shrink="No">
-          <Text size="L400">JSON Content</Text>
-        </Box>
-        <TextAreaComponent
-          ref={textAreaRef}
-          name="contentTextArea"
-          style={{
-            fontFamily: 'monospace',
-          }}
-          onKeyDown={handleKeyDown}
-          defaultValue={defaultContent}
-          resize="None"
-          spellCheck="false"
-          required
-          readOnly={submitting}
-        />
-        {jsonError && (
-          <Text size="T200" style={{ color: color.Critical.Main }}>
-            <b>
-              {jsonError.name}: {jsonError.message}
-            </b>
-          </Text>
-        )}
-      </Box>
-    </Box>
-  );
-}
-
-type AccountDataViewProps = {
-  type: string;
-  defaultContent: string;
-  onEdit: () => void;
-};
-function AccountDataView({ type, defaultContent, onEdit }: AccountDataViewProps) {
-  return (
-    <Box
-      direction="Column"
-      style={{
-        padding: config.space.S400,
-      }}
-      gap="400"
-    >
-      <Box shrink="No" gap="300" alignItems="End">
-        <Box grow="Yes" direction="Column" gap="100">
-          <Text size="L400">Account Data</Text>
-          <Input
-            variant="SurfaceVariant"
-            size="400"
-            radii="300"
-            readOnly
-            defaultValue={type}
-            required
-          />
-        </Box>
-        <Button variant="Secondary" size="400" radii="300" onClick={onEdit}>
-          <Text size="B400">Edit</Text>
-        </Button>
-      </Box>
-      <Box grow="Yes" direction="Column" gap="100">
-        <Text size="L400">JSON Content</Text>
-        <SequenceCard variant="SurfaceVariant">
-          <Scroll visibility="Always" size="300" hideTrack>
-            <TextViewerContent
-              size="T300"
-              style={{
-                padding: `${config.space.S300} ${config.space.S100} ${config.space.S300} ${config.space.S300}`,
-              }}
-              text={defaultContent}
-              langName="JSON"
-            />
-          </Scroll>
-        </SequenceCard>
-      </Box>
-    </Box>
-  );
-}
-
-export type AccountDataEditorProps = {
-  type?: string;
-  content?: object;
-  submitChange: AccountDataSubmitCallback;
-  requestClose: () => void;
-};
-
-export function AccountDataEditor({
-  type,
-  content,
-  submitChange,
-  requestClose,
-}: AccountDataEditorProps) {
-  const [data, setData] = useState<AccountDataInfo>({
-    type: type ?? '',
-    content: content ?? {},
-  });
-
-  const [edit, setEdit] = useState(!type);
-
-  const closeEdit = useCallback(() => {
-    if (!type) {
-      requestClose();
-      return;
-    }
-    setEdit(false);
-  }, [type, requestClose]);
-
-  const handleSave = useCallback((info: AccountDataInfo) => {
-    setData(info);
-    setEdit(false);
-  }, []);
-
-  const contentJSONStr = useMemo(
-    () => JSON.stringify(data.content, null, EDITOR_INTENT_SPACE_COUNT),
-    [data.content]
-  );
-
-  return (
-    <Page>
-      <PageHeader outlined={false} balance>
-        <Box alignItems="Center" grow="Yes" gap="200">
-          <Box alignItems="Inherit" grow="Yes" gap="200">
-            <Chip
-              size="500"
-              radii="Pill"
-              onClick={requestClose}
-              before={<Icon size="100" src={Icons.ArrowLeft} />}
-            >
-              <Text size="T300">Developer Tools</Text>
-            </Chip>
-          </Box>
-          <Box shrink="No">
-            <IconButton onClick={requestClose} variant="Surface">
-              <Icon src={Icons.Cross} />
-            </IconButton>
-          </Box>
-        </Box>
-      </PageHeader>
-      <Box grow="Yes" direction="Column">
-        {edit ? (
-          <AccountDataEdit
-            type={data.type}
-            defaultContent={contentJSONStr}
-            submitChange={submitChange}
-            onCancel={closeEdit}
-            onSave={handleSave}
-          />
-        ) : (
-          <AccountDataView
-            type={data.type}
-            defaultContent={contentJSONStr}
-            onEdit={() => setEdit(true)}
-          />
-        )}
-      </Box>
-    </Page>
-  );
-}

src/app/components/ActionUIA.tsx

@@ -1,73 +0,0 @@
-import React, { ReactNode } from 'react';
-import { AuthDict, AuthType, IAuthData, UIAFlow } from 'matrix-js-sdk';
-import { getUIAFlowForStages } from '../utils/matrix-uia';
-import { useSupportedUIAFlows, useUIACompleted, useUIAFlow } from '../hooks/useUIAFlows';
-import { UIAFlowOverlay } from './UIAFlowOverlay';
-import { PasswordStage, SSOStage } from './uia-stages';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-
-export const SUPPORTED_IN_APP_UIA_STAGES = [AuthType.Password, AuthType.Sso];
-
-export const pickUIAFlow = (uiaFlows: UIAFlow[]): UIAFlow | undefined => {
-  const passwordFlow = getUIAFlowForStages(uiaFlows, [AuthType.Password]);
-  if (passwordFlow) return passwordFlow;
-  return getUIAFlowForStages(uiaFlows, [AuthType.Sso]);
-};
-
-type ActionUIAProps = {
-  authData: IAuthData;
-  ongoingFlow: UIAFlow;
-  action: (authDict: AuthDict) => void;
-  onCancel: () => void;
-};
-export function ActionUIA({ authData, ongoingFlow, action, onCancel }: ActionUIAProps) {
-  const mx = useMatrixClient();
-  const completed = useUIACompleted(authData);
-  const { getStageToComplete } = useUIAFlow(authData, ongoingFlow);
-
-  const stageToComplete = getStageToComplete();
-
-  if (!stageToComplete) return null;
-  return (
-    <UIAFlowOverlay
-      currentStep={completed.length + 1}
-      stepCount={ongoingFlow.stages.length}
-      onCancel={onCancel}
-    >
-      {stageToComplete.type === AuthType.Password && (
-        <PasswordStage
-          userId={mx.getUserId()!}
-          stageData={stageToComplete}
-          onCancel={onCancel}
-          submitAuthDict={action}
-        />
-      )}
-      {stageToComplete.type === AuthType.Sso && stageToComplete.session && (
-        <SSOStage
-          ssoRedirectURL={mx.getFallbackAuthUrl(AuthType.Sso, stageToComplete.session)}
-          stageData={stageToComplete}
-          onCancel={onCancel}
-          submitAuthDict={action}
-        />
-      )}
-    </UIAFlowOverlay>
-  );
-}
-
-type ActionUIAFlowsLoaderProps = {
-  authData: IAuthData;
-  unsupported: () => ReactNode;
-  children: (ongoingFlow: UIAFlow) => ReactNode;
-};
-export function ActionUIAFlowsLoader({
-  authData,
-  unsupported,
-  children,
-}: ActionUIAFlowsLoaderProps) {
-  const supportedFlows = useSupportedUIAFlows(authData.flows ?? [], SUPPORTED_IN_APP_UIA_STAGES);
-  const ongoingFlow = supportedFlows.length > 0 ? supportedFlows[0] : undefined;
-
-  if (!ongoingFlow) return unsupported();
-
-  return children(ongoingFlow);
-}

src/app/components/AuthFlowsLoader.tsx

@@ -1,64 +0,0 @@
-import { ReactNode, useCallback, useEffect, useMemo } from 'react';
-import { MatrixError, createClient } from 'matrix-js-sdk';
-import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { useAutoDiscoveryInfo } from '../hooks/useAutoDiscoveryInfo';
-import { promiseFulfilledResult, promiseRejectedResult } from '../utils/common';
-import {
-  AuthFlows,
-  RegisterFlowStatus,
-  RegisterFlowsResponse,
-  parseRegisterErrResp,
-} from '../hooks/useAuthFlows';
-
-type AuthFlowsLoaderProps = {
-  fallback?: () => ReactNode;
-  error?: (err: unknown) => ReactNode;
-  children: (authFlows: AuthFlows) => ReactNode;
-};
-export function AuthFlowsLoader({ fallback, error, children }: AuthFlowsLoaderProps) {
-  const autoDiscoveryInfo = useAutoDiscoveryInfo();
-  const baseUrl = autoDiscoveryInfo['m.homeserver'].base_url;
-
-  const mx = useMemo(() => createClient({ baseUrl }), [baseUrl]);
-
-  const [state, load] = useAsyncCallback(
-    useCallback(async () => {
-      const result = await Promise.allSettled([mx.loginFlows(), mx.registerRequest({})]);
-      const loginFlows = promiseFulfilledResult(result[0]);
-      const registerResp = promiseRejectedResult(result[1]) as MatrixError | undefined;
-      let registerFlows: RegisterFlowsResponse = { status: RegisterFlowStatus.InvalidRequest };
-
-      if (typeof registerResp === 'object' && registerResp.httpStatus) {
-        registerFlows = parseRegisterErrResp(registerResp);
-      }
-
-      if (!loginFlows) {
-        throw new Error('Missing auth flow!');
-      }
-      if ('errcode' in loginFlows) {
-        throw new Error('Failed to load auth flow!');
-      }
-
-      const authFlows: AuthFlows = {
-        loginFlows,
-        registerFlows,
-      };
-
-      return authFlows;
-    }, [mx])
-  );
-
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  if (state.status === AsyncStatus.Idle || state.status === AsyncStatus.Loading) {
-    return fallback?.();
-  }
-
-  if (state.status === AsyncStatus.Error) {
-    return error?.(state.error);
-  }
-
-  return children(state.data);
-}

src/app/components/BackRouteHandler.tsx

@@ -1,86 +0,0 @@
-import { ReactNode, useCallback } from 'react';
-import { matchPath, useLocation, useNavigate } from 'react-router-dom';
-import {
-  getDirectPath,
-  getExplorePath,
-  getHomePath,
-  getInboxPath,
-  getSpacePath,
-} from '../pages/pathUtils';
-import { DIRECT_PATH, EXPLORE_PATH, HOME_PATH, INBOX_PATH, SPACE_PATH } from '../pages/paths';
-
-type BackRouteHandlerProps = {
-  children: (onBack: () => void) => ReactNode;
-};
-export function BackRouteHandler({ children }: BackRouteHandlerProps) {
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  const goBack = useCallback(() => {
-    if (
-      matchPath(
-        {
-          path: HOME_PATH,
-          caseSensitive: true,
-          end: false,
-        },
-        location.pathname
-      )
-    ) {
-      navigate(getHomePath());
-      return;
-    }
-    if (
-      matchPath(
-        {
-          path: DIRECT_PATH,
-          caseSensitive: true,
-          end: false,
-        },
-        location.pathname
-      )
-    ) {
-      navigate(getDirectPath());
-      return;
-    }
-    const spaceMatch = matchPath(
-      {
-        path: SPACE_PATH,
-        caseSensitive: true,
-        end: false,
-      },
-      location.pathname
-    );
-    if (spaceMatch?.params.spaceIdOrAlias) {
-      navigate(getSpacePath(spaceMatch.params.spaceIdOrAlias));
-      return;
-    }
-    if (
-      matchPath(
-        {
-          path: EXPLORE_PATH,
-          caseSensitive: true,
-          end: false,
-        },
-        location.pathname
-      )
-    ) {
-      navigate(getExplorePath());
-      return;
-    }
-    if (
-      matchPath(
-        {
-          path: INBOX_PATH,
-          caseSensitive: true,
-          end: false,
-        },
-        location.pathname
-      )
-    ) {
-      navigate(getInboxPath());
-    }
-  }, [navigate, location]);
-
-  return children(goBack);
-}

src/app/components/BackupRestore.tsx

@@ -1,281 +0,0 @@
-import React, { MouseEventHandler, useCallback, useState } from 'react';
-import { useAtom } from 'jotai';
-import { CryptoApi, KeyBackupInfo } from 'matrix-js-sdk/lib/crypto-api';
-import {
-  Badge,
-  Box,
-  Button,
-  color,
-  config,
-  Icon,
-  IconButton,
-  Icons,
-  Menu,
-  percent,
-  PopOut,
-  ProgressBar,
-  RectCords,
-  Spinner,
-  Text,
-} from 'folds';
-import FocusTrap from 'focus-trap-react';
-import { BackupProgressStatus, backupRestoreProgressAtom } from '../state/backupRestore';
-import { InfoCard } from './info-card';
-import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import {
-  useKeyBackupInfo,
-  useKeyBackupStatus,
-  useKeyBackupSync,
-  useKeyBackupTrust,
-} from '../hooks/useKeyBackup';
-import { stopPropagation } from '../utils/keyboard';
-import { useRestoreBackupOnVerification } from '../hooks/useRestoreBackupOnVerification';
-
-type BackupStatusProps = {
-  enabled: boolean;
-};
-function BackupStatus({ enabled }: BackupStatusProps) {
-  return (
-    <Box as="span" gap="100" alignItems="Center">
-      <Badge variant={enabled ? 'Success' : 'Critical'} fill="Solid" size="200" radii="Pill" />
-      <Text
-        as="span"
-        size="L400"
-        style={{ color: enabled ? color.Success.Main : color.Critical.Main }}
-      >
-        {enabled ? 'Connected' : 'Disconnected'}
-      </Text>
-    </Box>
-  );
-}
-type BackupSyncingProps = {
-  count: number;
-};
-function BackupSyncing({ count }: BackupSyncingProps) {
-  return (
-    <Box as="span" gap="100" alignItems="Center">
-      <Spinner size="50" variant="Primary" fill="Soft" />
-      <Text as="span" size="L400" style={{ color: color.Primary.Main }}>
-        Syncing ({count})
-      </Text>
-    </Box>
-  );
-}
-
-function BackupProgressFetching() {
-  return (
-    <Box grow="Yes" gap="200" alignItems="Center">
-      <Badge variant="Secondary" fill="Solid" radii="300">
-        <Text size="L400">Restoring: 0%</Text>
-      </Badge>
-      <Box grow="Yes" direction="Column">
-        <ProgressBar variant="Secondary" size="300" min={0} max={1} value={0} />
-      </Box>
-      <Spinner size="50" variant="Secondary" fill="Soft" />
-    </Box>
-  );
-}
-
-type BackupProgressProps = {
-  total: number;
-  downloaded: number;
-};
-function BackupProgress({ total, downloaded }: BackupProgressProps) {
-  return (
-    <Box grow="Yes" gap="200" alignItems="Center">
-      <Badge variant="Secondary" fill="Solid" radii="300">
-        <Text size="L400">Restoring: {`${Math.round(percent(0, total, downloaded))}%`}</Text>
-      </Badge>
-      <Box grow="Yes" direction="Column">
-        <ProgressBar variant="Secondary" size="300" min={0} max={total} value={downloaded} />
-      </Box>
-      <Badge variant="Secondary" fill="Soft" radii="Pill">
-        <Text size="L400">
-          {downloaded} / {total}
-        </Text>
-      </Badge>
-    </Box>
-  );
-}
-
-type BackupTrustInfoProps = {
-  crypto: CryptoApi;
-  backupInfo: KeyBackupInfo;
-};
-function BackupTrustInfo({ crypto, backupInfo }: BackupTrustInfoProps) {
-  const trust = useKeyBackupTrust(crypto, backupInfo);
-
-  if (!trust) return null;
-
-  return (
-    <Box direction="Column">
-      {trust.matchesDecryptionKey ? (
-        <Text size="T200" style={{ color: color.Success.Main }}>
-          <b>Backup has trusted decryption key.</b>
-        </Text>
-      ) : (
-        <Text size="T200" style={{ color: color.Critical.Main }}>
-          <b>Backup does not have trusted decryption key!</b>
-        </Text>
-      )}
-      {trust.trusted ? (
-        <Text size="T200" style={{ color: color.Success.Main }}>
-          <b>Backup has trusted by signature.</b>
-        </Text>
-      ) : (
-        <Text size="T200" style={{ color: color.Critical.Main }}>
-          <b>Backup does not have trusted signature!</b>
-        </Text>
-      )}
-    </Box>
-  );
-}
-
-type BackupRestoreTileProps = {
-  crypto: CryptoApi;
-};
-export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
-  const [restoreProgress, setRestoreProgress] = useAtom(backupRestoreProgressAtom);
-  const restoring =
-    restoreProgress.status === BackupProgressStatus.Fetching ||
-    restoreProgress.status === BackupProgressStatus.Loading;
-
-  const backupEnabled = useKeyBackupStatus(crypto);
-  const backupInfo = useKeyBackupInfo(crypto);
-  const [remainingSession, syncFailure] = useKeyBackupSync();
-
-  const [menuCords, setMenuCords] = useState<RectCords>();
-
-  const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    setMenuCords(evt.currentTarget.getBoundingClientRect());
-  };
-
-  const [restoreState, restoreBackup] = useAsyncCallback<void, Error, []>(
-    useCallback(async () => {
-      await crypto.restoreKeyBackup({
-        progressCallback(progress) {
-          setRestoreProgress(progress);
-        },
-      });
-    }, [crypto, setRestoreProgress])
-  );
-
-  const handleRestore = () => {
-    setMenuCords(undefined);
-    restoreBackup();
-  };
-
-  return (
-    <InfoCard
-      variant="Surface"
-      title="Encryption Backup"
-      after={
-        <Box alignItems="Center" gap="200">
-          {remainingSession === 0 ? (
-            <BackupStatus enabled={backupEnabled} />
-          ) : (
-            <BackupSyncing count={remainingSession} />
-          )}
-          <IconButton
-            aria-pressed={!!menuCords}
-            size="300"
-            variant="Surface"
-            radii="300"
-            onClick={handleMenu}
-          >
-            <Icon size="100" src={Icons.VerticalDots} />
-          </IconButton>
-          <PopOut
-            anchor={menuCords}
-            offset={5}
-            position="Bottom"
-            align="End"
-            content={
-              <FocusTrap
-                focusTrapOptions={{
-                  initialFocus: false,
-                  onDeactivate: () => setMenuCords(undefined),
-                  clickOutsideDeactivates: true,
-                  isKeyForward: (evt: KeyboardEvent) =>
-                    evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
-                  isKeyBackward: (evt: KeyboardEvent) =>
-                    evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
-                  escapeDeactivates: stopPropagation,
-                }}
-              >
-                <Menu
-                  style={{
-                    padding: config.space.S100,
-                  }}
-                >
-                  <Box direction="Column" gap="100">
-                    <Box direction="Column" gap="200">
-                      <InfoCard
-                        variant="SurfaceVariant"
-                        title="Backup Details"
-                        description={
-                          <>
-                            <span>Version: {backupInfo?.version ?? 'NIL'}</span>
-                            <br />
-                            <span>Keys: {backupInfo?.count ?? 'NIL'}</span>
-                          </>
-                        }
-                      />
-                    </Box>
-                    <Button
-                      size="300"
-                      variant="Success"
-                      radii="300"
-                      aria-disabled={restoreState.status === AsyncStatus.Loading || restoring}
-                      onClick={
-                        restoreState.status === AsyncStatus.Loading || restoring
-                          ? undefined
-                          : handleRestore
-                      }
-                      before={<Icon size="100" src={Icons.Download} />}
-                    >
-                      <Text size="B300">Restore Backup</Text>
-                    </Button>
-                  </Box>
-                </Menu>
-              </FocusTrap>
-            }
-          />
-        </Box>
-      }
-    >
-      {syncFailure && (
-        <Text size="T200" style={{ color: color.Critical.Main }}>
-          <b>{syncFailure}</b>
-        </Text>
-      )}
-      {!backupEnabled && backupInfo === null && (
-        <Text size="T200" style={{ color: color.Critical.Main }}>
-          <b>No backup present on server!</b>
-        </Text>
-      )}
-      {!syncFailure && !backupEnabled && backupInfo && (
-        <BackupTrustInfo crypto={crypto} backupInfo={backupInfo} />
-      )}
-      {restoreState.status === AsyncStatus.Loading && !restoring && <BackupProgressFetching />}
-      {restoreProgress.status === BackupProgressStatus.Fetching && <BackupProgressFetching />}
-      {restoreProgress.status === BackupProgressStatus.Loading && (
-        <BackupProgress
-          total={restoreProgress.data.total}
-          downloaded={restoreProgress.data.downloaded}
-        />
-      )}
-      {restoreState.status === AsyncStatus.Error && (
-        <Text size="T200" style={{ color: color.Critical.Main }}>
-          <b>{restoreState.error.message}</b>
-        </Text>
-      )}
-    </InfoCard>
-  );
-}
-
-export function AutoRestoreBackupOnVerification() {
-  useRestoreBackupOnVerification();
-
-  return null;
-}

src/app/components/BetaNoticeBadge.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { TooltipProvider, Tooltip, Box, Text, Badge, toRem } from 'folds';
-
-export function BetaNoticeBadge() {
-  return (
-    <TooltipProvider
-      position="Right"
-      align="Center"
-      tooltip={
-        <Tooltip style={{ maxWidth: toRem(200) }}>
-          <Box direction="Column">
-            <Text size="L400">Notice</Text>
-            <Text size="T200">This feature is under testing and may change over time.</Text>
-          </Box>
-        </Tooltip>
-      }
-    >
-      {(triggerRef) => (
-        <Badge size="500" tabIndex={0} ref={triggerRef} variant="Primary" fill="Solid">
-          <Text size="L400">Beta</Text>
-        </Badge>
-      )}
-    </TooltipProvider>
-  );
-}

src/app/components/CapabilitiesLoader.tsx

@@ -1,19 +0,0 @@
-import { ReactNode, useCallback, useEffect } from 'react';
-import { Capabilities } from 'matrix-js-sdk';
-import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-
-type CapabilitiesLoaderProps = {
-  children: (capabilities: Capabilities | undefined) => ReactNode;
-};
-export function CapabilitiesLoader({ children }: CapabilitiesLoaderProps) {
-  const mx = useMatrixClient();
-
-  const [state, load] = useAsyncCallback(useCallback(() => mx.getCapabilities(), [mx]));
-
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  return children(state.status === AsyncStatus.Success ? state.data : undefined);
-}

src/app/components/ClientConfigLoader.tsx

@@ -1,38 +0,0 @@
-import { ReactNode, useCallback, useEffect, useState } from 'react';
-import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { ClientConfig } from '../hooks/useClientConfig';
-import { trimTrailingSlash } from '../utils/common';
-
-const getClientConfig = async (): Promise<ClientConfig> => {
-  const url = `${trimTrailingSlash(import.meta.env.BASE_URL)}/config.json`;
-  const config = await fetch(url, { method: 'GET' });
-  return config.json();
-};
-
-type ClientConfigLoaderProps = {
-  fallback?: () => ReactNode;
-  error?: (err: unknown, retry: () => void, ignore: () => void) => ReactNode;
-  children: (config: ClientConfig) => ReactNode;
-};
-export function ClientConfigLoader({ fallback, error, children }: ClientConfigLoaderProps) {
-  const [state, load] = useAsyncCallback(getClientConfig);
-  const [ignoreError, setIgnoreError] = useState(false);
-
-  const ignoreCallback = useCallback(() => setIgnoreError(true), []);
-
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  if (state.status === AsyncStatus.Idle || state.status === AsyncStatus.Loading) {
-    return fallback?.();
-  }
-
-  if (!ignoreError && state.status === AsyncStatus.Error) {
-    return error?.(state.error, load, ignoreCallback);
-  }
-
-  const config: ClientConfig = state.status === AsyncStatus.Success ? state.data : {};
-
-  return children(config);
-}

src/app/components/ConfirmPasswordMatch.tsx

@@ -1,35 +0,0 @@
-import { ReactNode, RefObject, useCallback, useRef, useState } from 'react';
-import { useDebounce } from '../hooks/useDebounce';
-
-type ConfirmPasswordMatchProps = {
-  initialValue: boolean;
-  children: (
-    match: boolean,
-    doMatch: () => void,
-    passRef: RefObject<HTMLInputElement>,
-    confPassRef: RefObject<HTMLInputElement>
-  ) => ReactNode;
-};
-export function ConfirmPasswordMatch({ initialValue, children }: ConfirmPasswordMatchProps) {
-  const [match, setMatch] = useState(initialValue);
-  const passRef = useRef<HTMLInputElement>(null);
-  const confPassRef = useRef<HTMLInputElement>(null);
-
-  const doMatch = useDebounce(
-    useCallback(() => {
-      const pass = passRef.current?.value;
-      const confPass = confPassRef.current?.value;
-      if (!confPass) {
-        setMatch(initialValue);
-        return;
-      }
-      setMatch(pass === confPass);
-    }, [initialValue]),
-    {
-      wait: 500,
-      immediate: false,
-    }
-  );
-
-  return children(match, doMatch, passRef, confPassRef);
-}

src/app/components/DeviceVerification.tsx

@@ -1,318 +0,0 @@
-import {
-  ShowSasCallbacks,
-  VerificationPhase,
-  VerificationRequest,
-  Verifier,
-} from 'matrix-js-sdk/lib/crypto-api';
-import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
-import { VerificationMethod } from 'matrix-js-sdk/lib/types';
-import {
-  Box,
-  Button,
-  config,
-  Dialog,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Spinner,
-  Text,
-} from 'folds';
-import FocusTrap from 'focus-trap-react';
-import {
-  useVerificationRequestPhase,
-  useVerificationRequestReceived,
-  useVerifierCancel,
-  useVerifierShowSas,
-} from '../hooks/useVerificationRequest';
-import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { ContainerColor } from '../styles/ContainerColor.css';
-
-const DialogHeaderStyles: CSSProperties = {
-  padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
-  borderBottomWidth: config.borderWidth.B300,
-};
-
-type WaitingMessageProps = {
-  message: string;
-};
-function WaitingMessage({ message }: WaitingMessageProps) {
-  return (
-    <Box alignItems="Center" gap="200">
-      <Spinner variant="Secondary" size="200" />
-      <Text size="T300">{message}</Text>
-    </Box>
-  );
-}
-
-type VerificationUnexpectedProps = { message: string; onClose: () => void };
-function VerificationUnexpected({ message, onClose }: VerificationUnexpectedProps) {
-  return (
-    <Box direction="Column" gap="400">
-      <Text>{message}</Text>
-      <Button variant="Secondary" fill="Soft" onClick={onClose}>
-        <Text size="B400">Close</Text>
-      </Button>
-    </Box>
-  );
-}
-
-function VerificationWaitAccept() {
-  return (
-    <Box direction="Column" gap="400">
-      <Text>Please accept the request from other device.</Text>
-      <WaitingMessage message="Waiting for request to be accepted..." />
-    </Box>
-  );
-}
-
-type VerificationAcceptProps = {
-  onAccept: () => Promise<void>;
-};
-function VerificationAccept({ onAccept }: VerificationAcceptProps) {
-  const [acceptState, accept] = useAsyncCallback(onAccept);
-
-  const accepting = acceptState.status === AsyncStatus.Loading;
-  return (
-    <Box direction="Column" gap="400">
-      <Text>Click accept to start the verification process.</Text>
-      <Button
-        variant="Primary"
-        fill="Solid"
-        onClick={accept}
-        before={accepting && <Spinner size="100" variant="Primary" fill="Solid" />}
-        disabled={accepting}
-      >
-        <Text size="B400">Accept</Text>
-      </Button>
-    </Box>
-  );
-}
-
-function VerificationWaitStart() {
-  return (
-    <Box direction="Column" gap="400">
-      <Text>Verification request has been accepted.</Text>
-      <WaitingMessage message="Waiting for the response from other device..." />
-    </Box>
-  );
-}
-
-type VerificationStartProps = {
-  onStart: () => Promise<void>;
-};
-function AutoVerificationStart({ onStart }: VerificationStartProps) {
-  useEffect(() => {
-    onStart();
-  }, [onStart]);
-
-  return (
-    <Box direction="Column" gap="400">
-      <WaitingMessage message="Starting verification using emoji comparison..." />
-    </Box>
-  );
-}
-
-function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
-  const [confirmState, confirm] = useAsyncCallback(useCallback(() => sasData.confirm(), [sasData]));
-
-  const confirming =
-    confirmState.status === AsyncStatus.Loading || confirmState.status === AsyncStatus.Success;
-
-  return (
-    <Box direction="Column" gap="400">
-      <Text>Confirm the emoji below are displayed on both devices, in the same order:</Text>
-      <Box
-        className={ContainerColor({ variant: 'SurfaceVariant' })}
-        style={{
-          borderRadius: config.radii.R400,
-          padding: config.space.S500,
-        }}
-        gap="700"
-        wrap="Wrap"
-        justifyContent="Center"
-      >
-        {sasData.sas.emoji?.map(([emoji, name], index) => (
-          <Box
-            // eslint-disable-next-line react/no-array-index-key
-            key={`${emoji}${name}${index}`}
-            direction="Column"
-            gap="100"
-            justifyContent="Center"
-            alignItems="Center"
-          >
-            <Text size="H1">{emoji}</Text>
-            <Text size="T200">{name}</Text>
-          </Box>
-        ))}
-      </Box>
-      <Box direction="Column" gap="200">
-        <Button
-          variant="Primary"
-          fill="Soft"
-          onClick={confirm}
-          disabled={confirming}
-          before={confirming && <Spinner size="100" variant="Primary" />}
-        >
-          <Text size="B400">They Match</Text>
-        </Button>
-        <Button
-          variant="Primary"
-          fill="Soft"
-          onClick={() => sasData.mismatch()}
-          disabled={confirming}
-        >
-          <Text size="B400">Do not Match</Text>
-        </Button>
-      </Box>
-    </Box>
-  );
-}
-
-type SasVerificationProps = {
-  verifier: Verifier;
-  onCancel: () => void;
-};
-function SasVerification({ verifier, onCancel }: SasVerificationProps) {
-  const [sasData, setSasData] = useState<ShowSasCallbacks>();
-
-  useVerifierShowSas(verifier, setSasData);
-  useVerifierCancel(verifier, onCancel);
-
-  useEffect(() => {
-    verifier.verify();
-  }, [verifier]);
-
-  if (sasData) {
-    return <CompareEmoji sasData={sasData} />;
-  }
-
-  return (
-    <Box direction="Column" gap="400">
-      <WaitingMessage message="Starting verification using emoji comparison..." />
-    </Box>
-  );
-}
-
-type VerificationDoneProps = {
-  onExit: () => void;
-};
-function VerificationDone({ onExit }: VerificationDoneProps) {
-  return (
-    <Box direction="Column" gap="400">
-      <div>
-        <Text>Your device is verified.</Text>
-      </div>
-      <Button variant="Primary" fill="Solid" onClick={onExit}>
-        <Text size="B400">Okay</Text>
-      </Button>
-    </Box>
-  );
-}
-
-type VerificationCanceledProps = {
-  onClose: () => void;
-};
-function VerificationCanceled({ onClose }: VerificationCanceledProps) {
-  return (
-    <Box direction="Column" gap="400">
-      <Text>Verification has been canceled.</Text>
-      <Button variant="Secondary" fill="Soft" onClick={onClose}>
-        <Text size="B400">Close</Text>
-      </Button>
-    </Box>
-  );
-}
-
-type DeviceVerificationProps = {
-  request: VerificationRequest;
-  onExit: () => void;
-};
-export function DeviceVerification({ request, onExit }: DeviceVerificationProps) {
-  const phase = useVerificationRequestPhase(request);
-
-  const handleCancel = useCallback(() => {
-    if (request.phase !== VerificationPhase.Done && request.phase !== VerificationPhase.Cancelled) {
-      request.cancel();
-    }
-    onExit();
-  }, [request, onExit]);
-
-  const handleAccept = useCallback(() => request.accept(), [request]);
-  const handleStart = useCallback(async () => {
-    await request.startVerification(VerificationMethod.Sas);
-  }, [request]);
-
-  return (
-    <Overlay open backdrop={<OverlayBackdrop />}>
-      <OverlayCenter>
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: false,
-            clickOutsideDeactivates: false,
-            escapeDeactivates: false,
-          }}
-        >
-          <Dialog variant="Surface">
-            <Header style={DialogHeaderStyles} variant="Surface" size="500">
-              <Box grow="Yes">
-                <Text size="H4">Device Verification</Text>
-              </Box>
-              <IconButton size="300" radii="300" onClick={handleCancel}>
-                <Icon src={Icons.Cross} />
-              </IconButton>
-            </Header>
-            <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
-              {phase === VerificationPhase.Requested &&
-                (request.initiatedByMe ? (
-                  <VerificationWaitAccept />
-                ) : (
-                  <VerificationAccept onAccept={handleAccept} />
-                ))}
-              {phase === VerificationPhase.Ready &&
-                (request.initiatedByMe ? (
-                  <AutoVerificationStart onStart={handleStart} />
-                ) : (
-                  <VerificationWaitStart />
-                ))}
-              {phase === VerificationPhase.Started &&
-                (request.verifier ? (
-                  <SasVerification verifier={request.verifier} onCancel={handleCancel} />
-                ) : (
-                  <VerificationUnexpected
-                    message="Unexpected Error! Verification is started but verifier is missing."
-                    onClose={handleCancel}
-                  />
-                ))}
-              {phase === VerificationPhase.Done && <VerificationDone onExit={onExit} />}
-              {phase === VerificationPhase.Cancelled && (
-                <VerificationCanceled onClose={handleCancel} />
-              )}
-            </Box>
-          </Dialog>
-        </FocusTrap>
-      </OverlayCenter>
-    </Overlay>
-  );
-}
-
-export function ReceiveSelfDeviceVerification() {
-  const [request, setRequest] = useState<VerificationRequest>();
-
-  useVerificationRequestReceived(setRequest);
-
-  const handleExit = useCallback(() => {
-    setRequest(undefined);
-  }, []);
-
-  if (!request) return null;
-
-  if (!request.isSelfVerification) {
-    return null;
-  }
-
-  return <DeviceVerification request={request} onExit={handleExit} />;
-}

src/app/components/DeviceVerificationSetup.tsx

@@ -1,375 +0,0 @@
-import React, { FormEventHandler, forwardRef, useCallback, useState } from 'react';
-import {
-  Dialog,
-  Header,
-  Box,
-  Text,
-  IconButton,
-  Icon,
-  Icons,
-  config,
-  Button,
-  Chip,
-  color,
-  Spinner,
-} from 'folds';
-import FileSaver from 'file-saver';
-import to from 'await-to-js';
-import { AuthDict, IAuthData, MatrixError, UIAuthCallback } from 'matrix-js-sdk';
-import { PasswordInput } from './password-input';
-import { ContainerColor } from '../styles/ContainerColor.css';
-import { copyToClipboard } from '../utils/dom';
-import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { clearSecretStorageKeys } from '../../client/state/secretStorageKeys';
-import { ActionUIA, ActionUIAFlowsLoader } from './ActionUIA';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-import { useAlive } from '../hooks/useAlive';
-import { UseStateProvider } from './UseStateProvider';
-
-type UIACallback<T> = (
-  authDict: AuthDict | null
-) => Promise<[IAuthData, undefined] | [undefined, T]>;
-
-type PerformAction<T> = (authDict: AuthDict | null) => Promise<T>;
-
-type UIAAction<T> = {
-  authData: IAuthData;
-  callback: UIACallback<T>;
-  cancelCallback: () => void;
-};
-
-function makeUIAAction<T>(
-  authData: IAuthData,
-  performAction: PerformAction<T>,
-  resolve: (data: T) => void,
-  reject: (error?: any) => void
-): UIAAction<T> {
-  const action: UIAAction<T> = {
-    authData,
-    callback: async (authDict) => {
-      const [error, data] = await to<T, MatrixError | Error>(performAction(authDict));
-
-      if (error instanceof MatrixError && error.httpStatus === 401) {
-        return [error.data as IAuthData, undefined];
-      }
-
-      if (error) {
-        reject(error);
-        throw error;
-      }
-
-      resolve(data);
-      return [undefined, data];
-    },
-    cancelCallback: reject,
-  };
-
-  return action;
-}
-
-type SetupVerificationProps = {
-  onComplete: (recoveryKey: string) => void;
-};
-function SetupVerification({ onComplete }: SetupVerificationProps) {
-  const mx = useMatrixClient();
-  const alive = useAlive();
-
-  const [uiaAction, setUIAAction] = useState<UIAAction<void>>();
-  const [nextAuthData, setNextAuthData] = useState<IAuthData | null>(); // null means no next action.
-
-  const handleAction = useCallback(
-    async (authDict: AuthDict) => {
-      if (!uiaAction) {
-        throw new Error('Unexpected Error! UIA action is perform without data.');
-      }
-      if (alive()) {
-        setNextAuthData(null);
-      }
-      const [authData] = await uiaAction.callback(authDict);
-
-      if (alive() && authData) {
-        setNextAuthData(authData);
-      }
-    },
-    [uiaAction, alive]
-  );
-
-  const resetUIA = useCallback(() => {
-    if (!alive()) return;
-    setUIAAction(undefined);
-    setNextAuthData(undefined);
-  }, [alive]);
-
-  const authUploadDeviceSigningKeys: UIAuthCallback<void> = useCallback(
-    (makeRequest) =>
-      new Promise<void>((resolve, reject) => {
-        makeRequest(null)
-          .then(() => {
-            resolve();
-            resetUIA();
-          })
-          .catch((error) => {
-            if (error instanceof MatrixError && error.httpStatus === 401) {
-              const authData = error.data as IAuthData;
-              const action = makeUIAAction(
-                authData,
-                makeRequest as PerformAction<void>,
-                resolve,
-                (err) => {
-                  resetUIA();
-                  reject(err);
-                }
-              );
-              if (alive()) {
-                setUIAAction(action);
-              } else {
-                reject(new Error('Authentication failed! Failed to setup device verification.'));
-              }
-              return;
-            }
-            reject(error);
-          });
-      }),
-    [alive, resetUIA]
-  );
-
-  const [setupState, setup] = useAsyncCallback<void, Error, [string | undefined]>(
-    useCallback(
-      async (passphrase) => {
-        const crypto = mx.getCrypto();
-        if (!crypto) throw new Error('Unexpected Error! Crypto module not found!');
-
-        const recoveryKeyData = await crypto.createRecoveryKeyFromPassphrase(passphrase);
-        if (!recoveryKeyData.encodedPrivateKey) {
-          throw new Error('Unexpected Error! Failed to create recovery key.');
-        }
-        clearSecretStorageKeys();
-
-        await crypto.bootstrapSecretStorage({
-          createSecretStorageKey: async () => recoveryKeyData,
-          setupNewSecretStorage: true,
-        });
-
-        await crypto.bootstrapCrossSigning({
-          authUploadDeviceSigningKeys,
-          setupNewCrossSigning: true,
-        });
-
-        await crypto.resetKeyBackup();
-
-        onComplete(recoveryKeyData.encodedPrivateKey);
-      },
-      [mx, onComplete, authUploadDeviceSigningKeys]
-    )
-  );
-
-  const loading = setupState.status === AsyncStatus.Loading;
-
-  const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
-    evt.preventDefault();
-    if (loading) return;
-
-    const target = evt.target as HTMLFormElement | undefined;
-    const passphraseInput = target?.passphraseInput as HTMLInputElement | undefined;
-    let passphrase: string | undefined;
-    if (passphraseInput && passphraseInput.value.length > 0) {
-      passphrase = passphraseInput.value;
-    }
-
-    setup(passphrase);
-  };
-
-  return (
-    <Box as="form" onSubmit={handleSubmit} direction="Column" gap="400">
-      <Text size="T300">
-        Generate a <b>Recovery Key</b> for verifying identity if you do not have access to other
-        devices. Additionally, setup a passphrase as a memorable alternative.
-      </Text>
-      <Box direction="Column" gap="100">
-        <Text size="L400">Passphrase (Optional)</Text>
-        <PasswordInput name="passphraseInput" size="400" readOnly={loading} />
-      </Box>
-      <Button
-        type="submit"
-        disabled={loading}
-        before={loading && <Spinner size="200" variant="Primary" fill="Solid" />}
-      >
-        <Text size="B400">Continue</Text>
-      </Button>
-      {setupState.status === AsyncStatus.Error && (
-        <Text size="T200" style={{ color: color.Critical.Main }}>
-          <b>{setupState.error ? setupState.error.message : 'Unexpected Error!'}</b>
-        </Text>
-      )}
-      {nextAuthData !== null && uiaAction && (
-        <ActionUIAFlowsLoader
-          authData={nextAuthData ?? uiaAction.authData}
-          unsupported={() => (
-            <Text size="T200">
-              Authentication steps to perform this action are not supported by client.
-            </Text>
-          )}
-        >
-          {(ongoingFlow) => (
-            <ActionUIA
-              authData={nextAuthData ?? uiaAction.authData}
-              ongoingFlow={ongoingFlow}
-              action={handleAction}
-              onCancel={uiaAction.cancelCallback}
-            />
-          )}
-        </ActionUIAFlowsLoader>
-      )}
-    </Box>
-  );
-}
-
-type RecoveryKeyDisplayProps = {
-  recoveryKey: string;
-};
-function RecoveryKeyDisplay({ recoveryKey }: RecoveryKeyDisplayProps) {
-  const [show, setShow] = useState(false);
-
-  const handleCopy = () => {
-    copyToClipboard(recoveryKey);
-  };
-
-  const handleDownload = () => {
-    const blob = new Blob([recoveryKey], {
-      type: 'text/plain;charset=us-ascii',
-    });
-    FileSaver.saveAs(blob, 'recovery-key.txt');
-  };
-
-  const safeToDisplayKey = show ? recoveryKey : recoveryKey.replace(/[^\s]/g, '*');
-
-  return (
-    <Box direction="Column" gap="400">
-      <Text size="T300">
-        Store the Recovery Key in a safe place for future use, as you will need it to verify your
-        identity if you do not have access to other devices.
-      </Text>
-      <Box direction="Column" gap="100">
-        <Text size="L400">Recovery Key</Text>
-        <Box
-          className={ContainerColor({ variant: 'SurfaceVariant' })}
-          style={{
-            padding: config.space.S300,
-            borderRadius: config.radii.R400,
-          }}
-          alignItems="Center"
-          justifyContent="Center"
-          gap="400"
-        >
-          <Text style={{ fontFamily: 'monospace' }} size="T200" priority="300">
-            {safeToDisplayKey}
-          </Text>
-          <Chip onClick={() => setShow(!show)} variant="Secondary" radii="Pill">
-            <Text size="B300">{show ? 'Hide' : 'Show'}</Text>
-          </Chip>
-        </Box>
-      </Box>
-      <Box direction="Column" gap="200">
-        <Button onClick={handleCopy}>
-          <Text size="B400">Copy</Text>
-        </Button>
-        <Button onClick={handleDownload} fill="Soft">
-          <Text size="B400">Download</Text>
-        </Button>
-      </Box>
-    </Box>
-  );
-}
-
-type DeviceVerificationSetupProps = {
-  onCancel: () => void;
-};
-export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerificationSetupProps>(
-  ({ onCancel }, ref) => {
-    const [recoveryKey, setRecoveryKey] = useState<string>();
-
-    return (
-      <Dialog ref={ref}>
-        <Header
-          style={{
-            padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
-            borderBottomWidth: config.borderWidth.B300,
-          }}
-          variant="Surface"
-          size="500"
-        >
-          <Box grow="Yes">
-            <Text size="H4">Setup Device Verification</Text>
-          </Box>
-          <IconButton size="300" radii="300" onClick={onCancel}>
-            <Icon src={Icons.Cross} />
-          </IconButton>
-        </Header>
-        <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
-          {recoveryKey ? (
-            <RecoveryKeyDisplay recoveryKey={recoveryKey} />
-          ) : (
-            <SetupVerification onComplete={setRecoveryKey} />
-          )}
-        </Box>
-      </Dialog>
-    );
-  }
-);
-type DeviceVerificationResetProps = {
-  onCancel: () => void;
-};
-export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerificationResetProps>(
-  ({ onCancel }, ref) => {
-    const [reset, setReset] = useState(false);
-
-    return (
-      <Dialog ref={ref}>
-        <Header
-          style={{
-            padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
-            borderBottomWidth: config.borderWidth.B300,
-          }}
-          variant="Surface"
-          size="500"
-        >
-          <Box grow="Yes">
-            <Text size="H4">Reset Device Verification</Text>
-          </Box>
-          <IconButton size="300" radii="300" onClick={onCancel}>
-            <Icon src={Icons.Cross} />
-          </IconButton>
-        </Header>
-        {reset ? (
-          <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
-            <UseStateProvider initial={undefined}>
-              {(recoveryKey: string | undefined, setRecoveryKey) =>
-                recoveryKey ? (
-                  <RecoveryKeyDisplay recoveryKey={recoveryKey} />
-                ) : (
-                  <SetupVerification onComplete={setRecoveryKey} />
-                )
-              }
-            </UseStateProvider>
-          </Box>
-        ) : (
-          <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
-            <Box direction="Column" gap="200">
-              <Text size="H1">✋🧑‍🚒🤚</Text>
-              <Text size="T300">Resetting device verification is permanent.</Text>
-              <Text size="T300">
-                Anyone you have verified with will see security alerts and your encryption backup
-                will be lost. You almost certainly do not want to do this, unless you have lost{' '}
-                <b>Recovery Key</b> or <b>Recovery Passphrase</b> and every device you can verify
-                from.
-              </Text>
-            </Box>
-            <Button variant="Critical" onClick={() => setReset(true)}>
-              <Text size="B400">Reset</Text>
-            </Button>
-          </Box>
-        )}
-      </Dialog>
-    );
-  }
-);

src/app/components/DeviceVerificationStatus.ts

@@ -1,24 +0,0 @@
-import { ReactNode } from 'react';
-import { CryptoApi } from 'matrix-js-sdk/lib/crypto-api';
-import {
-  useDeviceVerificationStatus,
-  VerificationStatus,
-} from '../hooks/useDeviceVerificationStatus';
-
-type DeviceVerificationStatusProps = {
-  crypto?: CryptoApi;
-  userId: string;
-  deviceId: string;
-  children: (verificationStatus: VerificationStatus) => ReactNode;
-};
-
-export function DeviceVerificationStatus({
-  crypto,
-  userId,
-  deviceId,
-  children,
-}: DeviceVerificationStatusProps) {
-  const status = useDeviceVerificationStatus(crypto, userId, deviceId);
-
-  return children(status);
-}

src/app/components/HexColorPickerPopOut.tsx

@@ -1,59 +0,0 @@
-import FocusTrap from 'focus-trap-react';
-import { Box, Button, config, Menu, PopOut, RectCords, Text } from 'folds';
-import React, { MouseEventHandler, ReactNode, useState } from 'react';
-import { stopPropagation } from '../utils/keyboard';
-
-type HexColorPickerPopOutProps = {
-  children: (onOpen: MouseEventHandler<HTMLElement>, opened: boolean) => ReactNode;
-  picker: ReactNode;
-  onRemove?: () => void;
-};
-export function HexColorPickerPopOut({ picker, onRemove, children }: HexColorPickerPopOutProps) {
-  const [cords, setCords] = useState<RectCords>();
-
-  const handleOpen: MouseEventHandler<HTMLElement> = (evt) => {
-    setCords(evt.currentTarget.getBoundingClientRect());
-  };
-
-  return (
-    <PopOut
-      anchor={cords}
-      position="Bottom"
-      align="Center"
-      content={
-        <FocusTrap
-          focusTrapOptions={{
-            onDeactivate: () => setCords(undefined),
-            clickOutsideDeactivates: true,
-            escapeDeactivates: stopPropagation,
-          }}
-        >
-          <Menu
-            style={{
-              padding: config.space.S100,
-              borderRadius: config.radii.R500,
-              overflow: 'initial',
-            }}
-          >
-            <Box direction="Column" gap="200">
-              {picker}
-              {onRemove && (
-                <Button
-                  size="300"
-                  variant="Secondary"
-                  fill="Soft"
-                  radii="400"
-                  onClick={() => onRemove()}
-                >
-                  <Text size="B300">Remove</Text>
-                </Button>
-              )}
-            </Box>
-          </Menu>
-        </FocusTrap>
-      }
-    >
-      {children(handleOpen, !!cords)}
-    </PopOut>
-  );
-}

src/app/components/JoinRulesSwitcher.tsx

@@ -1,155 +0,0 @@
-import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
-import {
-  config,
-  Box,
-  MenuItem,
-  Text,
-  Icon,
-  Icons,
-  IconSrc,
-  RectCords,
-  PopOut,
-  Menu,
-  Button,
-  Spinner,
-} from 'folds';
-import { JoinRule } from 'matrix-js-sdk';
-import FocusTrap from 'focus-trap-react';
-import { stopPropagation } from '../utils/keyboard';
-
-export type ExtraJoinRules = 'knock_restricted';
-export type ExtendedJoinRules = JoinRule | ExtraJoinRules;
-
-type JoinRuleIcons = Record<ExtendedJoinRules, IconSrc>;
-export const useRoomJoinRuleIcon = (): JoinRuleIcons =>
-  useMemo(
-    () => ({
-      [JoinRule.Invite]: Icons.HashLock,
-      [JoinRule.Knock]: Icons.HashLock,
-      knock_restricted: Icons.Hash,
-      [JoinRule.Restricted]: Icons.Hash,
-      [JoinRule.Public]: Icons.HashGlobe,
-      [JoinRule.Private]: Icons.HashLock,
-    }),
-    []
-  );
-export const useSpaceJoinRuleIcon = (): JoinRuleIcons =>
-  useMemo(
-    () => ({
-      [JoinRule.Invite]: Icons.SpaceLock,
-      [JoinRule.Knock]: Icons.SpaceLock,
-      knock_restricted: Icons.Space,
-      [JoinRule.Restricted]: Icons.Space,
-      [JoinRule.Public]: Icons.SpaceGlobe,
-      [JoinRule.Private]: Icons.SpaceLock,
-    }),
-    []
-  );
-
-type JoinRuleLabels = Record<ExtendedJoinRules, string>;
-export const useRoomJoinRuleLabel = (): JoinRuleLabels =>
-  useMemo(
-    () => ({
-      [JoinRule.Invite]: 'Invite Only',
-      [JoinRule.Knock]: 'Knock & Invite',
-      knock_restricted: 'Space Members or Knock',
-      [JoinRule.Restricted]: 'Space Members',
-      [JoinRule.Public]: 'Public',
-      [JoinRule.Private]: 'Invite Only',
-    }),
-    []
-  );
-
-type JoinRulesSwitcherProps<T extends ExtendedJoinRules[]> = {
-  icons: JoinRuleIcons;
-  labels: JoinRuleLabels;
-  rules: T;
-  value: T[number];
-  onChange: (value: T[number]) => void;
-  disabled?: boolean;
-  changing?: boolean;
-};
-export function JoinRulesSwitcher<T extends ExtendedJoinRules[]>({
-  icons,
-  labels,
-  rules,
-  value,
-  onChange,
-  disabled,
-  changing,
-}: JoinRulesSwitcherProps<T>) {
-  const [cords, setCords] = useState<RectCords>();
-
-  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    setCords(evt.currentTarget.getBoundingClientRect());
-  };
-
-  const handleChange = useCallback(
-    (selectedRule: ExtendedJoinRules) => {
-      setCords(undefined);
-      onChange(selectedRule);
-    },
-    [onChange]
-  );
-
-  return (
-    <PopOut
-      anchor={cords}
-      position="Bottom"
-      align="End"
-      content={
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: false,
-            onDeactivate: () => setCords(undefined),
-            clickOutsideDeactivates: true,
-            isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-            escapeDeactivates: stopPropagation,
-          }}
-        >
-          <Menu>
-            <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
-              {rules.map((rule) => (
-                <MenuItem
-                  key={rule}
-                  size="300"
-                  variant="Surface"
-                  radii="300"
-                  aria-pressed={value === rule}
-                  onClick={() => handleChange(rule)}
-                  before={<Icon size="100" src={icons[rule]} />}
-                  disabled={disabled}
-                >
-                  <Box grow="Yes">
-                    <Text size="T300">{labels[rule]}</Text>
-                  </Box>
-                </MenuItem>
-              ))}
-            </Box>
-          </Menu>
-        </FocusTrap>
-      }
-    >
-      <Button
-        size="300"
-        variant="Secondary"
-        fill="Soft"
-        radii="300"
-        outlined
-        before={<Icon size="100" src={icons[value] ?? icons[JoinRule.Restricted]} />}
-        after={
-          changing ? (
-            <Spinner size="100" variant="Secondary" fill="Soft" />
-          ) : (
-            <Icon size="100" src={Icons.ChevronBottom} />
-          )
-        }
-        onClick={handleOpenMenu}
-        disabled={disabled}
-      >
-        <Text size="B300">{labels[value] ?? 'Unsupported'}</Text>
-      </Button>
-    </PopOut>
-  );
-}

src/app/components/LogoutDialog.tsx

@@ -1,89 +0,0 @@
-import React, { forwardRef, useCallback } from 'react';
-import { Dialog, Header, config, Box, Text, Button, Spinner, color } from 'folds';
-import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { logoutClient } from '../../client/initMatrix';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-import { useCrossSigningActive } from '../hooks/useCrossSigning';
-import { InfoCard } from './info-card';
-import {
-  useDeviceVerificationStatus,
-  VerificationStatus,
-} from '../hooks/useDeviceVerificationStatus';
-
-type LogoutDialogProps = {
-  handleClose: () => void;
-};
-export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
-  ({ handleClose }, ref) => {
-    const mx = useMatrixClient();
-    const hasEncryptedRoom = !!mx.getRooms().find((room) => room.hasEncryptionStateEvent());
-    const crossSigningActive = useCrossSigningActive();
-    const verificationStatus = useDeviceVerificationStatus(
-      mx.getCrypto(),
-      mx.getSafeUserId(),
-      mx.getDeviceId() ?? undefined
-    );
-
-    const [logoutState, logout] = useAsyncCallback<void, Error, []>(
-      useCallback(async () => {
-        await logoutClient(mx);
-      }, [mx])
-    );
-
-    const ongoingLogout = logoutState.status === AsyncStatus.Loading;
-
-    return (
-      <Dialog variant="Surface" ref={ref}>
-        <Header
-          style={{
-            padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
-            borderBottomWidth: config.borderWidth.B300,
-          }}
-          variant="Surface"
-          size="500"
-        >
-          <Box grow="Yes">
-            <Text size="H4">Logout</Text>
-          </Box>
-        </Header>
-        <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
-          {hasEncryptedRoom &&
-            (crossSigningActive ? (
-              verificationStatus === VerificationStatus.Unverified && (
-                <InfoCard
-                  variant="Critical"
-                  title="Unverified Device"
-                  description="Verify your device before logging out to save your encrypted messages."
-                />
-              )
-            ) : (
-              <InfoCard
-                variant="Critical"
-                title="Alert"
-                description="Enable device verification or export your encrypted data from settings to avoid losing access to your messages."
-              />
-            ))}
-          <Text priority="400">You’re about to log out. Are you sure?</Text>
-          {logoutState.status === AsyncStatus.Error && (
-            <Text style={{ color: color.Critical.Main }} size="T300">
-              Failed to logout! {logoutState.error.message}
-            </Text>
-          )}
-          <Box direction="Column" gap="200">
-            <Button
-              variant="Critical"
-              onClick={logout}
-              disabled={ongoingLogout}
-              before={ongoingLogout && <Spinner variant="Critical" fill="Solid" size="200" />}
-            >
-              <Text size="B400">Logout</Text>
-            </Button>
-            <Button variant="Secondary" fill="Soft" onClick={handleClose} disabled={ongoingLogout}>
-              <Text size="B400">Cancel</Text>
-            </Button>
-          </Box>
-        </Box>
-      </Dialog>
-    );
-  }
-);

src/app/components/ManualVerification.tsx

@@ -1,199 +0,0 @@
-import React, { MouseEventHandler, ReactNode, useCallback, useState } from 'react';
-import {
-  Box,
-  Text,
-  Chip,
-  Icon,
-  Icons,
-  RectCords,
-  PopOut,
-  Menu,
-  config,
-  MenuItem,
-  color,
-} from 'folds';
-import FocusTrap from 'focus-trap-react';
-import { stopPropagation } from '../utils/keyboard';
-import { SettingTile } from './setting-tile';
-import { SecretStorageKeyContent } from '../../types/matrix/accountData';
-import { SecretStorageRecoveryKey, SecretStorageRecoveryPassphrase } from './SecretStorage';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { storePrivateKey } from '../../client/state/secretStorageKeys';
-
-export enum ManualVerificationMethod {
-  RecoveryPassphrase = 'passphrase',
-  RecoveryKey = 'key',
-}
-type ManualVerificationMethodSwitcherProps = {
-  value: ManualVerificationMethod;
-  onChange: (value: ManualVerificationMethod) => void;
-};
-export function ManualVerificationMethodSwitcher({
-  value,
-  onChange,
-}: ManualVerificationMethodSwitcherProps) {
-  const [menuCords, setMenuCords] = useState<RectCords>();
-
-  const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    setMenuCords(evt.currentTarget.getBoundingClientRect());
-  };
-
-  const handleSelect = (method: ManualVerificationMethod) => {
-    setMenuCords(undefined);
-    onChange(method);
-  };
-
-  return (
-    <>
-      <Chip
-        type="button"
-        variant="Secondary"
-        fill="Soft"
-        radii="Pill"
-        before={<Icon size="100" src={Icons.ChevronBottom} />}
-        onClick={handleMenu}
-      >
-        <Text as="span" size="B300">
-          {value === ManualVerificationMethod.RecoveryPassphrase && 'Recovery Passphrase'}
-          {value === ManualVerificationMethod.RecoveryKey && 'Recovery Key'}
-        </Text>
-      </Chip>
-      <PopOut
-        anchor={menuCords}
-        offset={5}
-        position="Bottom"
-        align="End"
-        content={
-          <FocusTrap
-            focusTrapOptions={{
-              initialFocus: false,
-              onDeactivate: () => setMenuCords(undefined),
-              clickOutsideDeactivates: true,
-              isKeyForward: (evt: KeyboardEvent) =>
-                evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
-              isKeyBackward: (evt: KeyboardEvent) =>
-                evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
-              escapeDeactivates: stopPropagation,
-            }}
-          >
-            <Menu>
-              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
-                <MenuItem
-                  size="300"
-                  variant="Surface"
-                  aria-selected={value === ManualVerificationMethod.RecoveryPassphrase}
-                  radii="300"
-                  onClick={() => handleSelect(ManualVerificationMethod.RecoveryPassphrase)}
-                >
-                  <Box grow="Yes">
-                    <Text size="T300">Recovery Passphrase</Text>
-                  </Box>
-                </MenuItem>
-                <MenuItem
-                  size="300"
-                  variant="Surface"
-                  aria-selected={value === ManualVerificationMethod.RecoveryKey}
-                  radii="300"
-                  onClick={() => handleSelect(ManualVerificationMethod.RecoveryKey)}
-                >
-                  <Box grow="Yes">
-                    <Text size="T300">Recovery Key</Text>
-                  </Box>
-                </MenuItem>
-              </Box>
-            </Menu>
-          </FocusTrap>
-        }
-      />
-    </>
-  );
-}
-
-type ManualVerificationTileProps = {
-  secretStorageKeyId: string;
-  secretStorageKeyContent: SecretStorageKeyContent;
-  options?: ReactNode;
-};
-export function ManualVerificationTile({
-  secretStorageKeyId,
-  secretStorageKeyContent,
-  options,
-}: ManualVerificationTileProps) {
-  const mx = useMatrixClient();
-
-  const hasPassphrase = !!secretStorageKeyContent.passphrase;
-  const [method, setMethod] = useState(
-    hasPassphrase
-      ? ManualVerificationMethod.RecoveryPassphrase
-      : ManualVerificationMethod.RecoveryKey
-  );
-
-  const verifyAndRestoreBackup = useCallback(
-    async (recoveryKey: Uint8Array) => {
-      const crypto = mx.getCrypto();
-      if (!crypto) {
-        throw new Error('Unexpected Error! Crypto object not found.');
-      }
-
-      storePrivateKey(secretStorageKeyId, recoveryKey);
-
-      await crypto.bootstrapCrossSigning({});
-      await crypto.bootstrapSecretStorage({});
-
-      await crypto.loadSessionBackupPrivateKeyFromSecretStorage();
-    },
-    [mx, secretStorageKeyId]
-  );
-
-  const [verifyState, handleDecodedRecoveryKey] = useAsyncCallback<void, Error, [Uint8Array]>(
-    verifyAndRestoreBackup
-  );
-  const verifying = verifyState.status === AsyncStatus.Loading;
-
-  return (
-    <Box direction="Column" gap="200">
-      <SettingTile
-        title="Verify Manually"
-        description={hasPassphrase ? 'Select a verification method.' : 'Provide recovery key.'}
-        after={
-          <Box alignItems="Center" gap="200">
-            {hasPassphrase && (
-              <ManualVerificationMethodSwitcher value={method} onChange={setMethod} />
-            )}
-            {options}
-          </Box>
-        }
-      />
-      {verifyState.status === AsyncStatus.Success ? (
-        <Text size="T200" style={{ color: color.Success.Main }}>
-          <b>Device verified!</b>
-        </Text>
-      ) : (
-        <Box direction="Column" gap="100">
-          {method === ManualVerificationMethod.RecoveryKey && (
-            <SecretStorageRecoveryKey
-              processing={verifying}
-              keyContent={secretStorageKeyContent}
-              onDecodedRecoveryKey={handleDecodedRecoveryKey}
-            />
-          )}
-          {method === ManualVerificationMethod.RecoveryPassphrase &&
-            secretStorageKeyContent.passphrase && (
-              <SecretStorageRecoveryPassphrase
-                processing={verifying}
-                keyContent={secretStorageKeyContent}
-                passphraseContent={secretStorageKeyContent.passphrase}
-                onDecodedRecoveryKey={handleDecodedRecoveryKey}
-              />
-            )}
-          {verifyState.status === AsyncStatus.Error && (
-            <Text size="T200" style={{ color: color.Critical.Main }}>
-              <b>{verifyState.error.message}</b>
-            </Text>
-          )}
-        </Box>
-      )}
-    </Box>
-  );
-}

src/app/components/MediaConfigLoader.tsx

@@ -1,19 +0,0 @@
-import { ReactNode, useCallback, useEffect } from 'react';
-import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-import { MediaConfig } from '../hooks/useMediaConfig';
-
-type MediaConfigLoaderProps = {
-  children: (mediaConfig: MediaConfig | undefined) => ReactNode;
-};
-export function MediaConfigLoader({ children }: MediaConfigLoaderProps) {
-  const mx = useMatrixClient();
-
-  const [state, load] = useAsyncCallback(useCallback(() => mx.getMediaConfig(), [mx]));
-
-  useEffect(() => {
-    load();
-  }, [load]);
-
-  return children(state.status === AsyncStatus.Success ? state.data : undefined);
-}

src/app/components/MemberSortMenu.tsx

@@ -1,45 +0,0 @@
-import FocusTrap from 'focus-trap-react';
-import React from 'react';
-import { config, Menu, MenuItem, Text } from 'folds';
-import { stopPropagation } from '../utils/keyboard';
-import { useMemberSortMenu } from '../hooks/useMemberSort';
-
-type MemberSortMenuProps = {
-  requestClose: () => void;
-  selected: number;
-  onSelect: (index: number) => void;
-};
-export function MemberSortMenu({ selected, onSelect, requestClose }: MemberSortMenuProps) {
-  const memberSortMenu = useMemberSortMenu();
-
-  return (
-    <FocusTrap
-      focusTrapOptions={{
-        initialFocus: false,
-        onDeactivate: requestClose,
-        clickOutsideDeactivates: true,
-        isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-        isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-        escapeDeactivates: stopPropagation,
-      }}
-    >
-      <Menu style={{ padding: config.space.S100 }}>
-        {memberSortMenu.map((menuItem, index) => (
-          <MenuItem
-            key={menuItem.name}
-            variant="Surface"
-            aria-pressed={selected === index}
-            size="300"
-            radii="300"
-            onClick={() => {
-              onSelect(index);
-              requestClose();
-            }}
-          >
-            <Text size="T300">{menuItem.name}</Text>
-          </MenuItem>
-        ))}
-      </Menu>
-    </FocusTrap>
-  );
-}

src/app/components/MembershipFilterMenu.tsx

@@ -1,49 +0,0 @@
-import FocusTrap from 'focus-trap-react';
-import React from 'react';
-import { config, Menu, MenuItem, Text } from 'folds';
-import { stopPropagation } from '../utils/keyboard';
-import { useMembershipFilterMenu } from '../hooks/useMemberFilter';
-
-type MembershipFilterMenuProps = {
-  requestClose: () => void;
-  selected: number;
-  onSelect: (index: number) => void;
-};
-export function MembershipFilterMenu({
-  selected,
-  onSelect,
-  requestClose,
-}: MembershipFilterMenuProps) {
-  const membershipFilterMenu = useMembershipFilterMenu();
-
-  return (
-    <FocusTrap
-      focusTrapOptions={{
-        initialFocus: false,
-        onDeactivate: requestClose,
-        clickOutsideDeactivates: true,
-        isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-        isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-        escapeDeactivates: stopPropagation,
-      }}
-    >
-      <Menu style={{ padding: config.space.S100 }}>
-        {membershipFilterMenu.map((menuItem, index) => (
-          <MenuItem
-            key={menuItem.name}
-            variant="Surface"
-            aria-pressed={selected === index}
-            size="300"
-            radii="300"
-            onClick={() => {
-              onSelect(index);
-              requestClose();
-            }}
-          >
-            <Text size="T300">{menuItem.name}</Text>
-          </MenuItem>
-        ))}
-      </Menu>
-    </FocusTrap>
-  );
-}

src/app/components/Modal500.tsx

@@ -1,29 +0,0 @@
-import React, { ReactNode } from 'react';
-import FocusTrap from 'focus-trap-react';
-import { Modal, Overlay, OverlayBackdrop, OverlayCenter } from 'folds';
-import { stopPropagation } from '../utils/keyboard';
-
-type Modal500Props = {
-  requestClose: () => void;
-  children: ReactNode;
-};
-export function Modal500({ requestClose, children }: Modal500Props) {
-  return (
-    <Overlay open backdrop={<OverlayBackdrop />}>
-      <OverlayCenter>
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: false,
-            clickOutsideDeactivates: true,
-            onDeactivate: requestClose,
-            escapeDeactivates: stopPropagation,
-          }}
-        >
-          <Modal size="500" variant="Background">
-            {children}
-          </Modal>
-        </FocusTrap>
-      </OverlayCenter>
-    </Overlay>
-  );
-}

src/app/components/Pdf-viewer/PdfViewer.css.ts

@@ -1,37 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { DefaultReset, color, config } from 'folds';
-
-export const PdfViewer = style([
-  DefaultReset,
-  {
-    height: '100%',
-  },
-]);
-
-export const PdfViewerHeader = style([
-  DefaultReset,
-  {
-    paddingLeft: config.space.S200,
-    paddingRight: config.space.S200,
-    borderBottomWidth: config.borderWidth.B300,
-    flexShrink: 0,
-    gap: config.space.S200,
-  },
-]);
-export const PdfViewerFooter = style([
-  PdfViewerHeader,
-  {
-    borderTopWidth: config.borderWidth.B300,
-    borderBottomWidth: 0,
-  },
-]);
-
-export const PdfViewerContent = style([
-  DefaultReset,
-  {
-    margin: 'auto',
-    display: 'inline-block',
-    backgroundColor: color.Surface.Container,
-    color: color.Surface.OnContainer,
-  },
-]);

src/app/components/Pdf-viewer/PdfViewer.tsx

@@ -1,261 +0,0 @@
-/* eslint-disable no-param-reassign */
-/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
-import React, { FormEventHandler, MouseEventHandler, useEffect, useRef, useState } from 'react';
-import classNames from 'classnames';
-import {
-  Box,
-  Button,
-  Chip,
-  Header,
-  Icon,
-  IconButton,
-  Icons,
-  Input,
-  Menu,
-  PopOut,
-  RectCords,
-  Scroll,
-  Spinner,
-  Text,
-  as,
-  config,
-} from 'folds';
-import FocusTrap from 'focus-trap-react';
-import FileSaver from 'file-saver';
-import * as css from './PdfViewer.css';
-import { AsyncStatus } from '../../hooks/useAsyncCallback';
-import { useZoom } from '../../hooks/useZoom';
-import { createPage, usePdfDocumentLoader, usePdfJSLoader } from '../../plugins/pdfjs-dist';
-import { stopPropagation } from '../../utils/keyboard';
-
-export type PdfViewerProps = {
-  name: string;
-  src: string;
-  requestClose: () => void;
-};
-
-export const PdfViewer = as<'div', PdfViewerProps>(
-  ({ className, name, src, requestClose, ...props }, ref) => {
-    const containerRef = useRef<HTMLDivElement>(null);
-    const scrollRef = useRef<HTMLDivElement>(null);
-    const { zoom, zoomIn, zoomOut, setZoom } = useZoom(0.2);
-
-    const [pdfJSState, loadPdfJS] = usePdfJSLoader();
-    const [docState, loadPdfDocument] = usePdfDocumentLoader(
-      pdfJSState.status === AsyncStatus.Success ? pdfJSState.data : undefined,
-      src
-    );
-    const isLoading =
-      pdfJSState.status === AsyncStatus.Loading || docState.status === AsyncStatus.Loading;
-    const isError =
-      pdfJSState.status === AsyncStatus.Error || docState.status === AsyncStatus.Error;
-    const [pageNo, setPageNo] = useState(1);
-    const [jumpAnchor, setJumpAnchor] = useState<RectCords>();
-
-    useEffect(() => {
-      loadPdfJS();
-    }, [loadPdfJS]);
-    useEffect(() => {
-      if (pdfJSState.status === AsyncStatus.Success) {
-        loadPdfDocument();
-      }
-    }, [pdfJSState, loadPdfDocument]);
-
-    useEffect(() => {
-      if (docState.status === AsyncStatus.Success) {
-        const doc = docState.data;
-        if (pageNo < 0 || pageNo > doc.numPages) return;
-        createPage(doc, pageNo, { scale: zoom }).then((canvas) => {
-          const container = containerRef.current;
-          if (!container) return;
-          container.textContent = '';
-          container.append(canvas);
-          scrollRef.current?.scrollTo({
-            top: 0,
-          });
-        });
-      }
-    }, [docState, pageNo, zoom]);
-
-    const handleDownload = () => {
-      FileSaver.saveAs(src, name);
-    };
-
-    const handleJumpSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
-      evt.preventDefault();
-      if (docState.status !== AsyncStatus.Success) return;
-      const jumpInput = evt.currentTarget.jumpInput as HTMLInputElement;
-      if (!jumpInput) return;
-      const jumpTo = parseInt(jumpInput.value, 10);
-      setPageNo(Math.max(1, Math.min(docState.data.numPages, jumpTo)));
-      setJumpAnchor(undefined);
-    };
-
-    const handlePrevPage = () => {
-      setPageNo((n) => Math.max(n - 1, 1));
-    };
-
-    const handleNextPage = () => {
-      if (docState.status !== AsyncStatus.Success) return;
-      setPageNo((n) => Math.min(n + 1, docState.data.numPages));
-    };
-
-    const handleOpenJump: MouseEventHandler<HTMLButtonElement> = (evt) => {
-      setJumpAnchor(evt.currentTarget.getBoundingClientRect());
-    };
-
-    return (
-      <Box className={classNames(css.PdfViewer, className)} direction="Column" {...props} ref={ref}>
-        <Header className={css.PdfViewerHeader} size="400">
-          <Box grow="Yes" alignItems="Center" gap="200">
-            <IconButton size="300" radii="300" onClick={requestClose}>
-              <Icon size="50" src={Icons.ArrowLeft} />
-            </IconButton>
-            <Text size="T300" truncate>
-              {name}
-            </Text>
-          </Box>
-          <Box shrink="No" alignItems="Center" gap="200">
-            <IconButton
-              variant={zoom < 1 ? 'Success' : 'SurfaceVariant'}
-              outlined={zoom < 1}
-              size="300"
-              radii="Pill"
-              onClick={zoomOut}
-              aria-label="Zoom Out"
-            >
-              <Icon size="50" src={Icons.Minus} />
-            </IconButton>
-            <Chip variant="SurfaceVariant" radii="Pill" onClick={() => setZoom(zoom === 1 ? 2 : 1)}>
-              <Text size="B300">{Math.round(zoom * 100)}%</Text>
-            </Chip>
-            <IconButton
-              variant={zoom > 1 ? 'Success' : 'SurfaceVariant'}
-              outlined={zoom > 1}
-              size="300"
-              radii="Pill"
-              onClick={zoomIn}
-              aria-label="Zoom In"
-            >
-              <Icon size="50" src={Icons.Plus} />
-            </IconButton>
-            <Chip
-              variant="Primary"
-              onClick={handleDownload}
-              radii="300"
-              before={<Icon size="50" src={Icons.Download} />}
-            >
-              <Text size="B300">Download</Text>
-            </Chip>
-          </Box>
-        </Header>
-        <Box direction="Column" grow="Yes" alignItems="Center" justifyContent="Center" gap="200">
-          {isLoading && <Spinner variant="Secondary" size="600" />}
-          {isError && (
-            <>
-              <Text>Failed to load PDF</Text>
-              <Button
-                variant="Critical"
-                fill="Soft"
-                size="300"
-                radii="300"
-                before={<Icon src={Icons.Warning} size="50" />}
-                onClick={loadPdfJS}
-              >
-                <Text size="B300">Retry</Text>
-              </Button>
-            </>
-          )}
-          {docState.status === AsyncStatus.Success && (
-            <Scroll
-              ref={scrollRef}
-              size="300"
-              direction="Both"
-              variant="Surface"
-              visibility="Hover"
-            >
-              <Box>
-                <div className={css.PdfViewerContent} ref={containerRef} />
-              </Box>
-            </Scroll>
-          )}
-        </Box>
-        {docState.status === AsyncStatus.Success && (
-          <Header as="footer" className={css.PdfViewerFooter} size="400">
-            <Chip
-              variant="Secondary"
-              radii="300"
-              before={<Icon size="50" src={Icons.ChevronLeft} />}
-              onClick={handlePrevPage}
-              aria-disabled={pageNo <= 1}
-            >
-              <Text size="B300">Previous</Text>
-            </Chip>
-            <Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
-              <PopOut
-                anchor={jumpAnchor}
-                align="Center"
-                position="Top"
-                content={
-                  <FocusTrap
-                    focusTrapOptions={{
-                      initialFocus: false,
-                      onDeactivate: () => setJumpAnchor(undefined),
-                      clickOutsideDeactivates: true,
-                      escapeDeactivates: stopPropagation,
-                    }}
-                  >
-                    <Menu variant="Surface">
-                      <Box
-                        as="form"
-                        onSubmit={handleJumpSubmit}
-                        style={{ padding: config.space.S200 }}
-                        direction="Column"
-                        gap="200"
-                      >
-                        <Input
-                          name="jumpInput"
-                          size="300"
-                          variant="Background"
-                          defaultValue={pageNo}
-                          min={1}
-                          max={docState.data.numPages}
-                          step={1}
-                          outlined
-                          type="number"
-                          radii="300"
-                          aria-label="Page Number"
-                        />
-                        <Button type="submit" size="300" variant="Primary" radii="300">
-                          <Text size="B300">Jump To Page</Text>
-                        </Button>
-                      </Box>
-                    </Menu>
-                  </FocusTrap>
-                }
-              >
-                <Chip
-                  onClick={handleOpenJump}
-                  variant="SurfaceVariant"
-                  radii="300"
-                  aria-pressed={jumpAnchor !== undefined}
-                >
-                  <Text size="B300">{`${pageNo}/${docState.data.numPages}`}</Text>
-                </Chip>
-              </PopOut>
-            </Box>
-            <Chip
-              variant="Primary"
-              radii="300"
-              after={<Icon size="50" src={Icons.ChevronRight} />}
-              onClick={handleNextPage}
-              aria-disabled={pageNo >= docState.data.numPages}
-            >
-              <Text size="B300">Next</Text>
-            </Chip>
-          </Header>
-        )}
-      </Box>
-    );
-  }
-);

src/app/components/Pdf-viewer/index.ts

@@ -1 +0,0 @@
-export * from './PdfViewer';

src/app/components/RenderMessageContent.tsx

@@ -1,270 +0,0 @@
-import React from 'react';
-import { MsgType } from 'matrix-js-sdk';
-import { HTMLReactParserOptions } from 'html-react-parser';
-import { Opts } from 'linkifyjs';
-import { config } from 'folds';
-import {
-  AudioContent,
-  DownloadFile,
-  FileContent,
-  ImageContent,
-  MAudio,
-  MBadEncrypted,
-  MEmote,
-  MFile,
-  MImage,
-  MLocation,
-  MNotice,
-  MText,
-  MVideo,
-  ReadPdfFile,
-  ReadTextFile,
-  RenderBody,
-  ThumbnailContent,
-  UnsupportedContent,
-  VideoContent,
-} from './message';
-import { UrlPreviewCard, UrlPreviewHolder } from './url-preview';
-import { Image, MediaControl, Video } from './media';
-import { ImageViewer } from './image-viewer';
-import { PdfViewer } from './Pdf-viewer';
-import { TextViewer } from './text-viewer';
-import { testMatrixTo } from '../plugins/matrix-to';
-import { IImageContent } from '../../types/matrix/common';
-
-type RenderMessageContentProps = {
-  displayName: string;
-  msgType: string;
-  ts: number;
-  edited?: boolean;
-  getContent: <T>() => T;
-  mediaAutoLoad?: boolean;
-  urlPreview?: boolean;
-  highlightRegex?: RegExp;
-  htmlReactParserOptions: HTMLReactParserOptions;
-  linkifyOpts: Opts;
-  outlineAttachment?: boolean;
-};
-export function RenderMessageContent({
-  displayName,
-  msgType,
-  ts,
-  edited,
-  getContent,
-  mediaAutoLoad,
-  urlPreview,
-  highlightRegex,
-  htmlReactParserOptions,
-  linkifyOpts,
-  outlineAttachment,
-}: RenderMessageContentProps) {
-  const renderUrlsPreview = (urls: string[]) => {
-    const filteredUrls = urls.filter((url) => !testMatrixTo(url));
-    if (filteredUrls.length === 0) return undefined;
-    return (
-      <UrlPreviewHolder>
-        {filteredUrls.map((url) => (
-          <UrlPreviewCard key={url} url={url} ts={ts} />
-        ))}
-      </UrlPreviewHolder>
-    );
-  };
-  const renderCaption = () => {
-    const content: IImageContent = getContent();
-    if (content.filename && content.filename !== content.body) {
-      return (
-        <MText
-          style={{ marginTop: config.space.S200 }}
-          edited={edited}
-          content={content}
-          renderBody={(props) => (
-            <RenderBody
-              {...props}
-              highlightRegex={highlightRegex}
-              htmlReactParserOptions={htmlReactParserOptions}
-              linkifyOpts={linkifyOpts}
-            />
-          )}
-          renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
-        />
-      );
-    }
-    return null;
-  };
-
-  const renderFile = () => (
-    <>
-      <MFile
-        content={getContent()}
-        renderFileContent={({ body, mimeType, info, encInfo, url }) => (
-          <FileContent
-            body={body}
-            mimeType={mimeType}
-            renderAsPdfFile={() => (
-              <ReadPdfFile
-                body={body}
-                mimeType={mimeType}
-                url={url}
-                encInfo={encInfo}
-                renderViewer={(p) => <PdfViewer {...p} />}
-              />
-            )}
-            renderAsTextFile={() => (
-              <ReadTextFile
-                body={body}
-                mimeType={mimeType}
-                url={url}
-                encInfo={encInfo}
-                renderViewer={(p) => <TextViewer {...p} />}
-              />
-            )}
-          >
-            <DownloadFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} info={info} />
-          </FileContent>
-        )}
-        outlined={outlineAttachment}
-      />
-      {renderCaption()}
-    </>
-  );
-
-  if (msgType === MsgType.Text) {
-    return (
-      <MText
-        edited={edited}
-        content={getContent()}
-        renderBody={(props) => (
-          <RenderBody
-            {...props}
-            highlightRegex={highlightRegex}
-            htmlReactParserOptions={htmlReactParserOptions}
-            linkifyOpts={linkifyOpts}
-          />
-        )}
-        renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
-      />
-    );
-  }
-
-  if (msgType === MsgType.Emote) {
-    return (
-      <MEmote
-        displayName={displayName}
-        edited={edited}
-        content={getContent()}
-        renderBody={(props) => (
-          <RenderBody
-            {...props}
-            highlightRegex={highlightRegex}
-            htmlReactParserOptions={htmlReactParserOptions}
-            linkifyOpts={linkifyOpts}
-          />
-        )}
-        renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
-      />
-    );
-  }
-
-  if (msgType === MsgType.Notice) {
-    return (
-      <MNotice
-        edited={edited}
-        content={getContent()}
-        renderBody={(props) => (
-          <RenderBody
-            {...props}
-            highlightRegex={highlightRegex}
-            htmlReactParserOptions={htmlReactParserOptions}
-            linkifyOpts={linkifyOpts}
-          />
-        )}
-        renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
-      />
-    );
-  }
-
-  if (msgType === MsgType.Image) {
-    return (
-      <>
-        <MImage
-          content={getContent()}
-          renderImageContent={(props) => (
-            <ImageContent
-              {...props}
-              autoPlay={mediaAutoLoad}
-              renderImage={(p) => <Image {...p} loading="lazy" />}
-              renderViewer={(p) => <ImageViewer {...p} />}
-            />
-          )}
-          outlined={outlineAttachment}
-        />
-        {renderCaption()}
-      </>
-    );
-  }
-
-  if (msgType === MsgType.Video) {
-    return (
-      <>
-        <MVideo
-          content={getContent()}
-          renderAsFile={renderFile}
-          renderVideoContent={({ body, info, mimeType, url, encInfo }) => (
-            <VideoContent
-              body={body}
-              info={info}
-              mimeType={mimeType}
-              url={url}
-              encInfo={encInfo}
-              renderThumbnail={
-                mediaAutoLoad
-                  ? () => (
-                      <ThumbnailContent
-                        info={info}
-                        renderImage={(src) => (
-                          <Image alt={body} title={body} src={src} loading="lazy" />
-                        )}
-                      />
-                    )
-                  : undefined
-              }
-              renderVideo={(p) => <Video {...p} />}
-            />
-          )}
-          outlined={outlineAttachment}
-        />
-        {renderCaption()}
-      </>
-    );
-  }
-
-  if (msgType === MsgType.Audio) {
-    return (
-      <>
-        <MAudio
-          content={getContent()}
-          renderAsFile={renderFile}
-          renderAudioContent={(props) => (
-            <AudioContent {...props} renderMediaControl={(p) => <MediaControl {...p} />} />
-          )}
-          outlined={outlineAttachment}
-        />
-        {renderCaption()}
-      </>
-    );
-  }
-
-  if (msgType === MsgType.File) {
-    return renderFile();
-  }
-
-  if (msgType === MsgType.Location) {
-    return <MLocation content={getContent()} />;
-  }
-
-  if (msgType === 'm.bad.encrypted') {
-    return <MBadEncrypted />;
-  }
-
-  return <UnsupportedContent />;
-}

src/app/components/RoomNotificationSwitcher.tsx

@@ -1,120 +0,0 @@
-import { Box, config, Icon, Menu, MenuItem, PopOut, RectCords, Text } from 'folds';
-import React, { MouseEventHandler, ReactNode, useMemo, useState } from 'react';
-import FocusTrap from 'focus-trap-react';
-import { stopPropagation } from '../utils/keyboard';
-import {
-  getRoomNotificationModeIcon,
-  RoomNotificationMode,
-  useSetRoomNotificationPreference,
-} from '../hooks/useRoomsNotificationPreferences';
-import { AsyncStatus } from '../hooks/useAsyncCallback';
-
-const useRoomNotificationModes = (): RoomNotificationMode[] =>
-  useMemo(
-    () => [
-      RoomNotificationMode.Unset,
-      RoomNotificationMode.AllMessages,
-      RoomNotificationMode.SpecialMessages,
-      RoomNotificationMode.Mute,
-    ],
-    []
-  );
-
-const useRoomNotificationModeStr = (): Record<RoomNotificationMode, string> =>
-  useMemo(
-    () => ({
-      [RoomNotificationMode.Unset]: 'Default',
-      [RoomNotificationMode.AllMessages]: 'All Messages',
-      [RoomNotificationMode.SpecialMessages]: 'Mention & Keywords',
-      [RoomNotificationMode.Mute]: 'Mute',
-    }),
-    []
-  );
-
-type NotificationModeSwitcherProps = {
-  roomId: string;
-  value?: RoomNotificationMode;
-  children: (
-    handleOpen: MouseEventHandler<HTMLButtonElement>,
-    opened: boolean,
-    changing: boolean
-  ) => ReactNode;
-};
-export function RoomNotificationModeSwitcher({
-  roomId,
-  value = RoomNotificationMode.Unset,
-  children,
-}: NotificationModeSwitcherProps) {
-  const modes = useRoomNotificationModes();
-  const modeToStr = useRoomNotificationModeStr();
-
-  const { modeState, setMode } = useSetRoomNotificationPreference(roomId);
-  const changing = modeState.status === AsyncStatus.Loading;
-
-  const [menuCords, setMenuCords] = useState<RectCords>();
-
-  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    setMenuCords(evt.currentTarget.getBoundingClientRect());
-  };
-
-  const handleClose = () => {
-    setMenuCords(undefined);
-  };
-
-  const handleSelect = (mode: RoomNotificationMode) => {
-    if (changing) return;
-    setMode(mode, value);
-    handleClose();
-  };
-
-  return (
-    <PopOut
-      anchor={menuCords}
-      offset={5}
-      position="Right"
-      align="Start"
-      content={
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: false,
-            onDeactivate: handleClose,
-            clickOutsideDeactivates: true,
-            isKeyForward: (evt: KeyboardEvent) =>
-              evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
-            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
-            escapeDeactivates: stopPropagation,
-          }}
-        >
-          <Menu>
-            <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
-              {modes.map((mode) => (
-                <MenuItem
-                  key={mode}
-                  size="300"
-                  variant="Surface"
-                  aria-pressed={mode === value}
-                  radii="300"
-                  disabled={changing}
-                  onClick={() => handleSelect(mode)}
-                  before={
-                    <Icon
-                      size="100"
-                      src={getRoomNotificationModeIcon(mode)}
-                      filled={mode === value}
-                    />
-                  }
-                >
-                  <Text size="T300">
-                    {mode === value ? <b>{modeToStr[mode]}</b> : modeToStr[mode]}
-                  </Text>
-                </MenuItem>
-              ))}
-            </Box>
-          </Menu>
-        </FocusTrap>
-      }
-    >
-      {children(handleOpenMenu, !!menuCords, changing)}
-    </PopOut>
-  );
-}

src/app/components/RoomSummaryLoader.tsx

@@ -1,90 +0,0 @@
-import { ReactNode, useCallback, useState } from 'react';
-import { MatrixClient, Room } from 'matrix-js-sdk';
-import { useQuery } from '@tanstack/react-query';
-import { IHierarchyRoom } from 'matrix-js-sdk/lib/@types/spaces';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-import { LocalRoomSummary, useLocalRoomSummary } from '../hooks/useLocalRoomSummary';
-import { AsyncState, AsyncStatus } from '../hooks/useAsyncCallback';
-
-export type IRoomSummary = Awaited<ReturnType<MatrixClient['getRoomSummary']>>;
-
-type RoomSummaryLoaderProps = {
-  roomIdOrAlias: string;
-  children: (roomSummary?: IRoomSummary) => ReactNode;
-};
-
-export function RoomSummaryLoader({ roomIdOrAlias, children }: RoomSummaryLoaderProps) {
-  const mx = useMatrixClient();
-
-  const fetchSummary = useCallback(() => mx.getRoomSummary(roomIdOrAlias), [mx, roomIdOrAlias]);
-
-  const { data } = useQuery({
-    queryKey: [roomIdOrAlias, `summary`],
-    queryFn: fetchSummary,
-  });
-
-  return children(data);
-}
-
-export function LocalRoomSummaryLoader({
-  room,
-  children,
-}: {
-  room: Room;
-  children: (roomSummary: LocalRoomSummary) => ReactNode;
-}) {
-  const summary = useLocalRoomSummary(room);
-
-  return children(summary);
-}
-
-export function HierarchyRoomSummaryLoader({
-  roomId,
-  children,
-}: {
-  roomId: string;
-  children: (state: AsyncState<IHierarchyRoom, Error>) => ReactNode;
-}) {
-  const mx = useMatrixClient();
-
-  const fetchSummary = useCallback(() => mx.getRoomHierarchy(roomId, 1, 1), [mx, roomId]);
-  const [errorMemo, setError] = useState<Error>();
-
-  const { data, error } = useQuery({
-    queryKey: [roomId, `hierarchy`],
-    queryFn: fetchSummary,
-    retryOnMount: false,
-    refetchOnWindowFocus: false,
-    retry: (failureCount, err) => {
-      setError(err);
-      if (failureCount > 3) return false;
-      return true;
-    },
-  });
-
-  let state: AsyncState<IHierarchyRoom, Error> = {
-    status: AsyncStatus.Loading,
-  };
-  if (error) {
-    state = {
-      status: AsyncStatus.Error,
-      error,
-    };
-  }
-  if (errorMemo) {
-    state = {
-      status: AsyncStatus.Error,
-      error: errorMemo,
-    };
-  }
-
-  const summary = data?.rooms[0] ?? undefined;
-  if (summary) {
-    state = {
-      status: AsyncStatus.Success,
-      data: summary,
-    };
-  }
-
-  return children(state);
-}