add captain definition file

- Add sticky positioning for tabs on the Settings panel
- Also add sticky position for SpaceSettings

.eslintrc.js

@@ -9,24 +9,21 @@ module.exports = {
     "plugin:react-hooks/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
-    'airbnb',
+    "airbnb",
-    'prettier',
+    "prettier",
   ],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
-    ecmaVersion: 'latest',
+    ecmaVersion: "latest",
-    sourceType: 'module',
+    sourceType: "module",
   },
-  plugins: [
+  plugins: ["react", "@typescript-eslint"],
-    'react',
-    '@typescript-eslint'
-  ],
   rules: {
-    'linebreak-style': 0,
+    "linebreak-style": 0,
-    'no-underscore-dangle': 0,
+    "no-underscore-dangle": 0,
 
     "import/prefer-default-export": "off",
     "import/extensions": "off",
@@ -38,10 +35,7 @@ module.exports = {
       },
     ],
 
-    'react/no-unstable-nested-components': [
+    "react/no-unstable-nested-components": ["error", { allowAsProps: true }],
-      'error',
-      { allowAsProps: true },
-    ],
     "react/jsx-filename-extension": [
       "error",
       {

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -42,10 +42,10 @@ body:
       label: Platform and versions
       description: "Provide OS, browser and Cinny version with your Homeserver."
       placeholder: |
-       1. OS: [e.g. Windows 10, MacOS]
+        1. OS: [e.g. Windows 10, MacOS]
-       2. Browser: [e.g. chrome 99.5, firefox 97.2]
+        2. Browser: [e.g. chrome 99.5, firefox 97.2]
-       3. Cinny version: [e.g. 1.8.1 (app.cinny.in)]
+        3. Cinny version: [e.g. 1.8.1 (app.cinny.in)]
-       4. Matrix homeserver: [e.g. matrix.org]
+        4. Matrix homeserver: [e.g. matrix.org]
       render: shell
     validations:
       required: true

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,8 +1,8 @@
 <!-- Please read https://github.com/ajbura/cinny/blob/dev/CONTRIBUTING.md before submitting your pull request -->
 
 ### Description
-<!-- Please include a summary of the change. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
 
+<!-- Please include a summary of the change. Please also include relevant motivation and context. List any dependencies that are required for this change. -->
 
 Fixes #
 

.github/renovate.json

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

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

@@ -2,7 +2,7 @@ name: Build pull request
 
 on:
   pull_request:
-    types: ['opened', 'synchronize']
+    types: ["opened", "synchronize"]
 
 jobs:
   build-pull-request:

.github/workflows/cla.yml

@@ -1,4 +1,4 @@
-name: 'CLA Assistant'
+name: "CLA Assistant"
 on:
   issue_comment:
     types: [created]
@@ -9,7 +9,7 @@ jobs:
   CLAssistant:
     runs-on: ubuntu-latest
     steps:
-      - name: 'CLA Assistant'
+      - name: "CLA Assistant"
         if: (github.event.comment.body == 'recheck' || github.event.comment.body == 'I have read the CLA Document and I hereby sign the CLA') || github.event_name == 'pull_request_target'
         # Beta Release
         uses: cla-assistant/github-action@v2.2.1
@@ -18,10 +18,10 @@ jobs:
           # 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-signatures: "signatures.json"
-          path-to-document: 'https://github.com/cinnyapp/cla/blob/main/cla.md' # e.g. a CLA or a DCO document
+          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'
+          branch: "main"
           allowlist: ajbura,bot*
 
           #below are the optional inputs - If the optional inputs are not given, then default values will be taken

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

@@ -2,8 +2,8 @@ name: Deploy PR to Netlify
 
 on:
   workflow_run:
-      workflows: ["Build pull request"]
+    workflows: ["Build pull request"]
-      types: [completed]
+    types: [completed]
 
 jobs:
   deploy-pull-request:
@@ -52,5 +52,5 @@ jobs:
           pr_number: ${{ steps.pr.outputs.id }}
           comment_tag: ${{ steps.pr.outputs.id }}
           message: |
-              Preview: ${{ steps.netlify.outputs.deploy-url }}
+            Preview: ${{ steps.netlify.outputs.deploy-url }}
-              ⚠️ Exercise caution. Use test accounts. ⚠️
+            ⚠️ Exercise caution. Use test accounts. ⚠️

.github/workflows/docker-pr.yml

@@ -1,10 +1,10 @@
-name: 'Docker check'
+name: "Docker check"
 
 on:
   pull_request:
     paths:
-      - 'Dockerfile'
+      - "Dockerfile"
-      - '.github/workflows/docker-pr.yml'
+      - ".github/workflows/docker-pr.yml"
 
 jobs:
   docker-build:

.github/workflows/lockfile.yml

@@ -3,7 +3,7 @@ name: NPM Lockfile Changes
 on:
   pull_request:
     paths:
-      - 'package-lock.json'
+      - "package-lock.json"
 
 jobs:
   lockfile_changes:

.github/workflows/netlify-dev.yml

@@ -3,7 +3,7 @@ name: Deploy to Netlify (dev)
 on:
   push:
     branches:
-       - dev
+      - dev
 
 jobs:
   deploy-to-netlify:
@@ -32,7 +32,7 @@ jobs:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           production-deploy: true
           github-deployment-environment: nightly
-          github-deployment-description: 'Nightly deployment on each commit to dev branch'
+          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 }}

.github/workflows/prod-deploy.yml

@@ -31,7 +31,7 @@ jobs:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           production-deploy: true
           github-deployment-environment: stable
-          github-deployment-description: 'Stable deployment on each release'
+          github-deployment-description: "Stable deployment on each release"
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID_APP }}

.prettierrc.json

@@ -1,4 +1,8 @@
 {
-  "printWidth": 100,
+  "tabWidth": 2,
-  "singleQuote": true
+  "semi": true,
+  "useTabs": false,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "printWidth": 80
 }

CONTRIBUTING.md

@@ -5,6 +5,7 @@ First off, thanks for taking the time to contribute! ❤️
 All types of contributions are encouraged and valued. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉
 
 > And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about:
+>
 > - Star the project
 > - Tweet about it (tag @cinnyapp)
 > - Refer this project in your project's readme
@@ -18,6 +19,7 @@ Bug reports and feature suggestions must use descriptive and concise titles and
 ## Pull requests
 
 > ### Legal Notice
+>
 > When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license.
 
 **NOTE: If you want to add new features, please discuss with maintainers before coding or opening a pull request.** This is to ensure that we are on same track and following our roadmap.
@@ -26,9 +28,9 @@ Bug reports and feature suggestions must use descriptive and concise titles and
 
 Example:
 
-|Not ideal|Better|
+| Not ideal                           | Better                                        |
-|---|----|
+| ----------------------------------- | --------------------------------------------- |
-|Fixed markAllAsRead in RoomTimeline|Fix read marker when paginating room timeline|
+| Fixed markAllAsRead in RoomTimeline | Fix read marker when paginating room timeline |
 
 It is not always possible to phrase every change in such a manner, but it is desired.
 
@@ -39,6 +41,7 @@ Also, we use [ESLint](https://eslint.org/) for clean and stylistically consisten
 **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)

captain-definition

@@ -0,0 +1,4 @@
+{
+  "schemaVersion": 2,
+  "dockerfilePath": "./Dockerfile"
+}

index.html

@@ -18,7 +18,10 @@
 
     <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: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."
@@ -32,7 +35,10 @@
     <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" />
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content="black-translucent"
+    />
 
     <link
       rel="apple-touch-icon"
@@ -96,6 +102,6 @@
     <audio id="inviteSound">
       <source src="./public/sound/invite.ogg" type="audio/ogg" />
     </audio>
-    <script type="module" src="./src/index.jsx"></script>
+    <script type="module" src="./src/index.tsx"></script>
   </body>
 </html>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cinny",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "cinny",
-      "version": "2.2.5",
+      "version": "2.2.6",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@fontsource/inter": "4.5.14",
@@ -14,6 +14,7 @@
         "@khanacademy/simple-markdown": "0.8.6",
         "@matrix-org/olm": "3.2.14",
         "@tippyjs/react": "4.2.6",
+        "@types/flux": "3.1.11",
         "blurhash": "2.0.4",
         "browser-encrypt-attachment": "0.3.0",
         "dateformat": "5.0.3",
@@ -43,6 +44,7 @@
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rollup/plugin-inject": "5.0.3",
         "@rollup/plugin-wasm": "6.1.1",
+        "@types/dateformat": "5.0.0",
         "@types/node": "18.11.18",
         "@types/react": "18.0.26",
         "@types/react-dom": "18.0.9",
@@ -1115,6 +1117,12 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/@types/dateformat": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/dateformat/-/dateformat-5.0.0.tgz",
+      "integrity": "sha512-SZg4JdHIWHQGEokbYGZSDvo5wA4TLYPXaqhigs/wH+REDOejcJzgH+qyY+HtEUtWOZxEUkbhbdYPqQDiEgrXeA==",
+      "dev": true
+    },
     "node_modules/@types/estree": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.0.tgz",
@@ -1126,6 +1134,20 @@
       "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
       "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g=="
     },
+    "node_modules/@types/fbemitter": {
+      "version": "2.0.32",
+      "resolved": "https://registry.npmjs.org/@types/fbemitter/-/fbemitter-2.0.32.tgz",
+      "integrity": "sha512-Hwq28bBlbmfCgLnNJvjl5ssTrbZCTSblI4vqPpqZrbbEL8vn5l2UivxhlMYfUY7a4SR8UB6RKoLjOZfljqAa6g=="
+    },
+    "node_modules/@types/flux": {
+      "version": "3.1.11",
+      "resolved": "https://registry.npmjs.org/@types/flux/-/flux-3.1.11.tgz",
+      "integrity": "sha512-Aq4UB1ZqAKcPbhB0GpgMw2sntvOh71he9tjz53TLKrI7rw3Y3LxCW5pTYY9IV455hQapm4pmxFjpqlWOs308Yg==",
+      "dependencies": {
+        "@types/fbemitter": "*",
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "Yet another matrix client",
   "main": "index.js",
   "engines": {
@@ -9,7 +9,7 @@
   "scripts": {
     "start": "vite",
     "build": "vite build",
-    "lint": "yarn check:eslint && yarn check:prettier",
+    "lint": "npm run check:eslint && npm run check:prettier",
     "check:eslint": "eslint src/*",
     "check:prettier": "prettier --check .",
     "fix:prettier": "prettier --write .",
@@ -24,6 +24,7 @@
     "@khanacademy/simple-markdown": "0.8.6",
     "@matrix-org/olm": "3.2.14",
     "@tippyjs/react": "4.2.6",
+    "@types/flux": "3.1.11",
     "blurhash": "2.0.4",
     "browser-encrypt-attachment": "0.3.0",
     "dateformat": "5.0.3",
@@ -53,6 +54,7 @@
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@rollup/plugin-inject": "5.0.3",
     "@rollup/plugin-wasm": "6.1.1",
+    "@types/dateformat": "5.0.0",
     "@types/node": "18.11.18",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",

src/app/atoms/avatar/Avatar.jsx

@@ -1,64 +1,69 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './Avatar.scss';
+import "./Avatar.scss";
 
-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";
 
-import Text from '../text/Text';
+import Text from "../text/Text";
-import RawIcon from '../system-icons/RawIcon';
+import RawIcon from "../system-icons/RawIcon";
 
-import ImageBrokenSVG from '../../../../public/res/svg/image-broken.svg';
+import ImageBrokenSVG from "../../../../public/res/svg/image-broken.svg";
-import { avatarInitials } from '../../../util/common';
+import { avatarInitials } from "../../../util/common";
 
-const Avatar = React.forwardRef(({
+const Avatar = React.forwardRef(
-  text, bgColor, iconSrc, iconColor, imageSrc, size,
+  ({ text, bgColor, iconSrc, iconColor, imageSrc, size }, ref) => {
-}, ref) => {
+    let textSize = "s1";
-  let textSize = 's1';
+    if (size === "large") textSize = "h1";
-  if (size === 'large') textSize = 'h1';
+    if (size === "small") textSize = "b1";
-  if (size === 'small') textSize = 'b1';
+    if (size === "extra-small") textSize = "b3";
-  if (size === 'extra-small') textSize = 'b3';
 
-  return (
+    return (
-    <div ref={ref} className={`avatar-container avatar-container__${size} noselect`}>
+      <div
-      {
+        ref={ref}
-        imageSrc !== null
+        className={`avatar-container avatar-container__${size} noselect`}
-          ? (
+      >
-            <img
+        {imageSrc !== null ? (
-              draggable="false"
+          <img
-              src={imageSrc}
+            draggable="false"
-              onLoad={(e) => { e.target.style.backgroundColor = 'transparent'; }}
+            src={imageSrc}
-              onError={(e) => { e.target.src = ImageBrokenSVG; }}
+            onLoad={(e) => {
-              alt=""
+              e.target.style.backgroundColor = "transparent";
-            />
+            }}
-          )
+            onError={(e) => {
-          : (
+              e.target.src = ImageBrokenSVG;
-            <span
+            }}
-              style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
+            alt=""
-              className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
+          />
-            >
+        ) : (
-              {
+          <span
-                iconSrc !== null
+            style={{
-                  ? <RawIcon size={size} src={iconSrc} color={iconColor} />
+              backgroundColor: iconSrc === null ? bgColor : "transparent",
-                  : text !== null && (
+            }}
-                    <Text variant={textSize} primary>
+            className={`avatar__border${iconSrc !== null ? "--active" : ""}`}
-                      {twemojify(avatarInitials(text))}
+          >
-                    </Text>
+            {iconSrc !== null ? (
-                  )
+              <RawIcon size={size} src={iconSrc} color={iconColor} />
-              }
+            ) : (
-            </span>
+              text !== null && (
-          )
+                <Text variant={textSize} primary>
-      }
+                  {twemojify(avatarInitials(text))}
-    </div>
+                </Text>
-  );
+              )
-});
+            )}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
 
 Avatar.defaultProps = {
   text: null,
-  bgColor: 'transparent',
+  bgColor: "transparent",
   iconSrc: null,
   iconColor: null,
   imageSrc: null,
-  size: 'normal',
+  size: "normal",
 };
 
 Avatar.propTypes = {
@@ -67,7 +72,7 @@ Avatar.propTypes = {
   iconSrc: PropTypes.string,
   iconColor: PropTypes.string,
   imageSrc: PropTypes.string,
-  size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']),
+  size: PropTypes.oneOf(["large", "normal", "small", "extra-small"]),
 };
 
 export default Avatar;

src/app/atoms/avatar/Avatar.scss

@@ -1,4 +1,4 @@
-@use '../../partials/flex';
+@use "../../partials/flex";
 
 .avatar-container {
   display: inline-flex;

src/app/atoms/avatar/render.js

@@ -1,15 +1,20 @@
-import { avatarInitials, cssVar } from '../../../util/common';
+import { avatarInitials, cssVar } from "../../../util/common";
 
 // renders the avatar and returns it as an URL
 export default async function renderAvatar({
-  text, bgColor, imageSrc, size, borderRadius, scale,
+  text,
+  bgColor,
+  imageSrc,
+  size,
+  borderRadius,
+  scale,
 }) {
   try {
-    const canvas = document.createElement('canvas');
+    const canvas = document.createElement("canvas");
     canvas.width = size * scale;
     canvas.height = size * scale;
 
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
 
     ctx.scale(scale, scale);
 
@@ -27,7 +32,7 @@ export default async function renderAvatar({
       ctx.clip();
 
       const img = new Image();
-      img.crossOrigin = 'anonymous';
+      img.crossOrigin = "anonymous";
       const promise = new Promise((resolve, reject) => {
         img.onerror = reject;
         img.onload = resolve;
@@ -42,10 +47,10 @@ export default async function renderAvatar({
       ctx.fill();
 
       // centered letter
-      ctx.fillStyle = '#fff';
+      ctx.fillStyle = "#fff";
-      ctx.font = `${cssVar('--fs-s1')} ${cssVar('--font-primary')}`;
+      ctx.font = `${cssVar("--fs-s1")} ${cssVar("--font-primary")}`;
-      ctx.textBaseline = 'middle';
+      ctx.textBaseline = "middle";
-      ctx.textAlign = 'center';
+      ctx.textAlign = "center";
       ctx.fillText(avatarInitials(text), size / 2, size / 2);
     }
 

src/app/atoms/badge/NotificationBadge.jsx

@@ -1,14 +1,18 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './NotificationBadge.scss';
+import "./NotificationBadge.scss";
 
-import Text from '../text/Text';
+import Text from "../text/Text";
 
 function NotificationBadge({ alert, content }) {
-  const notificationClass = alert ? ' notification-badge--alert' : '';
+  const notificationClass = alert ? " notification-badge--alert" : "";
   return (
     <div className={`notification-badge${notificationClass}`}>
-      {content !== null && <Text variant="b3" weight="bold">{content}</Text>}
+      {content !== null && (
+        <Text variant="b3" weight="bold">
+          {content}
+        </Text>
+      )}
     </div>
   );
 }
@@ -20,10 +24,7 @@ NotificationBadge.defaultProps = {
 
 NotificationBadge.propTypes = {
   alert: PropTypes.bool,
-  content: PropTypes.oneOfType([
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    PropTypes.string,
-    PropTypes.number,
-  ]),
 };
 
 export default NotificationBadge;

src/app/atoms/button/Button.jsx

@@ -1,40 +1,44 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './Button.scss';
+import "./Button.scss";
 
-import Text from '../text/Text';
+import Text from "../text/Text";
-import RawIcon from '../system-icons/RawIcon';
+import RawIcon from "../system-icons/RawIcon";
-import { blurOnBubbling } from './script';
+import { blurOnBubbling } from "./script";
 
-const Button = React.forwardRef(({
+const Button = React.forwardRef(
-  id, className, variant, iconSrc,
+  (
-  type, onClick, children, disabled,
+    { id, className, variant, iconSrc, type, onClick, children, disabled },
-}, ref) => {
+    ref
-  const iconClass = (iconSrc === null) ? '' : `btn-${variant}--icon`;
+  ) => {
-  return (
+    const iconClass = iconSrc === null ? "" : `btn-${variant}--icon`;
-    <button
+    return (
-      ref={ref}
+      <button
-      id={id === '' ? undefined : id}
+        ref={ref}
-      className={`${className ? `${className} ` : ''}btn-${variant} ${iconClass} noselect`}
+        id={id === "" ? undefined : id}
-      onMouseUp={(e) => blurOnBubbling(e, `.btn-${variant}`)}
+        className={`${
-      onClick={onClick}
+          className ? `${className} ` : ""
-      // eslint-disable-next-line react/button-has-type
+        }btn-${variant} ${iconClass} noselect`}
-      type={type}
+        onMouseUp={(e) => blurOnBubbling(e, `.btn-${variant}`)}
-      disabled={disabled}
+        onClick={onClick}
-    >
+        // eslint-disable-next-line react/button-has-type
-      {iconSrc !== null && <RawIcon size="small" src={iconSrc} />}
+        type={type}
-      {typeof children === 'string' && <Text variant="b1">{ children }</Text>}
+        disabled={disabled}
-      {typeof children !== 'string' && children }
+      >
-    </button>
+        {iconSrc !== null && <RawIcon size="small" src={iconSrc} />}
-  );
+        {typeof children === "string" && <Text variant="b1">{children}</Text>}
-});
+        {typeof children !== "string" && children}
+      </button>
+    );
+  }
+);
 
 Button.defaultProps = {
-  id: '',
+  id: "",
   className: null,
-  variant: 'surface',
+  variant: "surface",
   iconSrc: null,
-  type: 'button',
+  type: "button",
   onClick: null,
   disabled: false,
 };
@@ -42,9 +46,15 @@ Button.defaultProps = {
 Button.propTypes = {
   id: PropTypes.string,
   className: PropTypes.string,
-  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
+  variant: PropTypes.oneOf([
+    "surface",
+    "primary",
+    "positive",
+    "caution",
+    "danger",
+  ]),
   iconSrc: PropTypes.string,
-  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+  type: PropTypes.oneOf(["button", "submit", "reset"]),
   onClick: PropTypes.func,
   children: PropTypes.node.isRequired,
   disabled: PropTypes.bool,

src/app/atoms/button/Button.scss

@@ -1,6 +1,6 @@
-@use 'state';
+@use "state";
-@use '../../partials/dir';
+@use "../../partials/dir";
-@use '../../partials/text';
+@use "../../partials/text";
 
 .btn-surface,
 .btn-primary,
@@ -25,7 +25,6 @@
 
   &--icon {
     @include dir.side(padding, var(--sp-tight), var(--sp-loose));
-
   }
   .ic-raw {
     @include dir.side(margin, 0, var(--sp-extra-tight));
@@ -42,7 +41,6 @@
   }
 }
 
-
 .btn-surface {
   box-shadow: var(--bs-surface-border);
   @include color(var(--tc-surface-high), var(--ic-surface-normal));

src/app/atoms/button/Checkbox.jsx

@@ -1,12 +1,11 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './Checkbox.scss';
+import "./Checkbox.scss";
 
-function Checkbox({
+function Checkbox({ variant, isActive, onToggle, disabled, tabIndex }) {
-  variant, isActive, onToggle,
+  const className = `checkbox checkbox-${variant}${
-  disabled, tabIndex,
+    isActive ? " checkbox--active" : ""
-}) {
+  }`;
-  const className = `checkbox checkbox-${variant}${isActive ? ' checkbox--active' : ''}`;
   if (onToggle === null) return <span className={className} />;
   return (
     // eslint-disable-next-line jsx-a11y/control-has-associated-label
@@ -21,7 +20,7 @@ function Checkbox({
 }
 
 Checkbox.defaultProps = {
-  variant: 'primary',
+  variant: "primary",
   isActive: false,
   onToggle: null,
   disabled: false,
@@ -29,7 +28,7 @@ Checkbox.defaultProps = {
 };
 
 Checkbox.propTypes = {
-  variant: PropTypes.oneOf(['primary', 'positive', 'caution', 'danger']),
+  variant: PropTypes.oneOf(["primary", "positive", "caution", "danger"]),
   isActive: PropTypes.bool,
   onToggle: PropTypes.func,
   disabled: PropTypes.bool,

src/app/atoms/button/Checkbox.scss

@@ -1,5 +1,5 @@
-@use '../../partials/flex';
+@use "../../partials/flex";
-@use './state';
+@use "./state";
 
 .checkbox {
   width: 20px;

src/app/atoms/button/IconButton.jsx

@@ -1,62 +1,80 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './IconButton.scss';
+import "./IconButton.scss";
 
-import RawIcon from '../system-icons/RawIcon';
+import RawIcon from "../system-icons/RawIcon";
-import Tooltip from '../tooltip/Tooltip';
+import Tooltip from "../tooltip/Tooltip";
-import { blurOnBubbling } from './script';
+import { blurOnBubbling } from "./script";
-import Text from '../text/Text';
+import Text from "../text/Text";
 
-const IconButton = React.forwardRef(({
+const IconButton = React.forwardRef(
-  variant, size, type,
+  (
-  tooltip, tooltipPlacement, src,
+    {
-  onClick, tabIndex, disabled, isImage,
+      variant,
-  className,
+      size,
-}, ref) => {
+      type,
-  const btn = (
+      tooltip,
-    <button
+      tooltipPlacement,
-      ref={ref}
+      src,
-      className={`ic-btn ic-btn-${variant} ${className}`}
+      onClick,
-      onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)}
+      tabIndex,
-      onClick={onClick}
+      disabled,
-      // eslint-disable-next-line react/button-has-type
+      isImage,
-      type={type}
+      className,
-      tabIndex={tabIndex}
+    },
-      disabled={disabled}
+    ref
-    >
+  ) => {
-      <RawIcon size={size} src={src} isImage={isImage} />
+    const btn = (
-    </button>
+      <button
-  );
+        ref={ref}
-  if (tooltip === null) return btn;
+        className={`ic-btn ic-btn-${variant} ${className}`}
-  return (
+        onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)}
-    <Tooltip
+        onClick={onClick}
-      placement={tooltipPlacement}
+        // eslint-disable-next-line react/button-has-type
-      content={<Text variant="b2">{tooltip}</Text>}
+        type={type}
-    >
+        tabIndex={tabIndex}
-      {btn}
+        disabled={disabled}
-    </Tooltip>
+      >
-  );
+        <RawIcon size={size} src={src} isImage={isImage} />
-});
+      </button>
+    );
+    if (tooltip === null) return btn;
+    return (
+      <Tooltip
+        placement={tooltipPlacement}
+        content={<Text variant="b2">{tooltip}</Text>}
+      >
+        {btn}
+      </Tooltip>
+    );
+  }
+);
 
 IconButton.defaultProps = {
-  variant: 'surface',
+  variant: "surface",
-  size: 'normal',
+  size: "normal",
-  type: 'button',
+  type: "button",
   tooltip: null,
-  tooltipPlacement: 'top',
+  tooltipPlacement: "top",
   onClick: null,
   tabIndex: 0,
   disabled: false,
   isImage: false,
-  className: '',
+  className: "",
 };
 
 IconButton.propTypes = {
-  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
+  variant: PropTypes.oneOf([
-  size: PropTypes.oneOf(['normal', 'small', 'extra-small']),
+    "surface",
-  type: PropTypes.oneOf(['button', 'submit', 'reset']),
+    "primary",
+    "positive",
+    "caution",
+    "danger",
+  ]),
+  size: PropTypes.oneOf(["normal", "small", "extra-small"]),
+  type: PropTypes.oneOf(["button", "submit", "reset"]),
   tooltip: PropTypes.string,
-  tooltipPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+  tooltipPlacement: PropTypes.oneOf(["top", "right", "bottom", "left"]),
   src: PropTypes.string.isRequired,
   onClick: PropTypes.func,
   tabIndex: PropTypes.number,

src/app/atoms/button/IconButton.scss

@@ -1,4 +1,4 @@
-@use 'state';
+@use "state";
 
 .ic-btn {
   padding: var(--sp-extra-tight);

src/app/atoms/button/RadioButton.jsx

@@ -1,14 +1,17 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './RadioButton.scss';
+import "./RadioButton.scss";
 
 function RadioButton({ isActive, onToggle, disabled }) {
-  if (onToggle === null) return <span className={`radio-btn${isActive ? ' radio-btn--active' : ''}`} />;
+  if (onToggle === null)
+    return (
+      <span className={`radio-btn${isActive ? " radio-btn--active" : ""}`} />
+    );
   return (
     // eslint-disable-next-line jsx-a11y/control-has-associated-label
     <button
       onClick={() => onToggle(!isActive)}
-      className={`radio-btn${isActive ? ' radio-btn--active' : ''}`}
+      className={`radio-btn${isActive ? " radio-btn--active" : ""}`}
       type="button"
       disabled={disabled}
     />

src/app/atoms/button/RadioButton.scss

@@ -1,5 +1,5 @@
-@use '../../partials/flex';
+@use "../../partials/flex";
-@use './state';
+@use "./state";
 
 .radio-btn {
   @extend .cp-fx__row--c-c;
@@ -12,7 +12,7 @@
   @include state.disabled;
 
   &::before {
-    content: '';
+    content: "";
     display: inline-block;
     width: 12px;
     height: 12px;

src/app/atoms/button/Toggle.jsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './Toggle.scss';
+import "./Toggle.scss";
 
 function Toggle({ isActive, onToggle, disabled }) {
-  const className = `toggle${isActive ? ' toggle--active' : ''}`;
+  const className = `toggle${isActive ? " toggle--active" : ""}`;
   if (onToggle === null) return <span className={className} />;
   return (
     // eslint-disable-next-line jsx-a11y/control-has-associated-label

src/app/atoms/button/Toggle.scss

@@ -1,5 +1,5 @@
-@use '../../partials/dir';
+@use "../../partials/dir";
-@use './state';
+@use "./state";
 
 .toggle {
   width: 44px;
@@ -16,14 +16,13 @@
   transition: background 200ms ease-in-out;
 
   &::before {
-    content: '';
+    content: "";
     display: inline-block;
     width: 16px;
     height: 16px;
     background-color: var(--tc-surface-low);
     border-radius: calc(var(--bo-radius) / 2);
-    transition: transform 200ms ease-in-out,
+    transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
-      opacity 200ms ease-in-out;
     opacity: 0.6;
   }
 

src/app/atoms/button/_state.scss

@@ -1,4 +1,3 @@
-
 @mixin hover($color) {
   @media (hover: hover) {
     &:hover {

src/app/atoms/button/script.js

@@ -10,7 +10,10 @@ function blurOnBubbling(e, selector) {
 
   for (let elIndex = 0; elIndex < bubblingPath.length; elIndex += 1) {
     if (bubblingPath[elIndex] === document) {
-      console.warn(blurOnBubbling, 'blurOnBubbling: not found selector in bubbling path');
+      console.warn(
+        blurOnBubbling,
+        "blurOnBubbling: not found selector in bubbling path"
+      );
       break;
     }
     if (bubblingPath[elIndex].matches(selector)) {

src/app/atoms/card/InfoCard.jsx

@@ -1,24 +1,28 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './InfoCard.scss';
+import "./InfoCard.scss";
 
-import Text from '../text/Text';
+import Text from "../text/Text";
-import RawIcon from '../system-icons/RawIcon';
+import RawIcon from "../system-icons/RawIcon";
-import IconButton from '../button/IconButton';
+import IconButton from "../button/IconButton";
 
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
 
 function InfoCard({
-  className, style,
+  className,
-  variant, iconSrc,
+  style,
-  title, content,
+  variant,
-  rounded, requestClose,
+  iconSrc,
+  title,
+  content,
+  rounded,
+  requestClose,
 }) {
   const classes = [`info-card info-card--${variant}`];
-  if (rounded) classes.push('info-card--rounded');
+  if (rounded) classes.push("info-card--rounded");
   if (className) classes.push(className);
   return (
-    <div className={classes.join(' ')} style={style}>
+    <div className={classes.join(" ")} style={style}>
       {iconSrc && (
         <div className="info-card__icon">
           <RawIcon color={`var(--ic-${variant}-high)`} src={iconSrc} />
@@ -38,7 +42,7 @@ function InfoCard({
 InfoCard.defaultProps = {
   className: null,
   style: null,
-  variant: 'surface',
+  variant: "surface",
   iconSrc: null,
   content: null,
   rounded: false,
@@ -48,7 +52,13 @@ InfoCard.defaultProps = {
 InfoCard.propTypes = {
   className: PropTypes.string,
   style: PropTypes.shape({}),
-  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
+  variant: PropTypes.oneOf([
+    "surface",
+    "primary",
+    "positive",
+    "caution",
+    "danger",
+  ]),
   iconSrc: PropTypes.string,
   title: PropTypes.string.isRequired,
   content: PropTypes.node,

src/app/atoms/card/InfoCard.scss

@@ -1,5 +1,5 @@
-@use '.././../partials/flex';
+@use ".././../partials/flex";
-@use '.././../partials/dir';
+@use ".././../partials/dir";
 
 .info-card {
   display: flex;
@@ -34,7 +34,6 @@
   &--surface {
     border-color: var(--bg-surface-border);
     background-color: var(--bg-surface-hover);
-
   }
   &--primary {
     border-color: var(--bg-primary);

src/app/atoms/chip/Chip.jsx

@@ -1,18 +1,17 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './Chip.scss';
+import "./Chip.scss";
 
-import Text from '../text/Text';
+import Text from "../text/Text";
-import RawIcon from '../system-icons/RawIcon';
+import RawIcon from "../system-icons/RawIcon";
 
-function Chip({
+function Chip({ iconSrc, iconColor, text, children, onClick }) {
-  iconSrc, iconColor, text, children,
-  onClick,
-}) {
   return (
     <button className="chip" type="button" onClick={onClick}>
-      {iconSrc != null && <RawIcon src={iconSrc} color={iconColor} size="extra-small" />}
+      {iconSrc != null && (
-      {(text != null && text !== '') && <Text variant="b3">{text}</Text>}
+        <RawIcon src={iconSrc} color={iconColor} size="extra-small" />
+      )}
+      {text != null && text !== "" && <Text variant="b3">{text}</Text>}
       {children}
     </button>
   );

src/app/atoms/chip/Chip.scss

@@ -1,4 +1,4 @@
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .chip {
   padding: var(--sp-ultra-tight) var(--sp-extra-tight);

src/app/atoms/context-menu/ContextMenu.jsx

@@ -1,17 +1,15 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './ContextMenu.scss';
+import "./ContextMenu.scss";
 
-import Tippy from '@tippyjs/react';
+import Tippy from "@tippyjs/react";
-import 'tippy.js/animations/scale-extreme.css';
+import "tippy.js/animations/scale-extreme.css";
 
-import Text from '../text/Text';
+import Text from "../text/Text";
-import Button from '../button/Button';
+import Button from "../button/Button";
-import ScrollView from '../scroll/ScrollView';
+import ScrollView from "../scroll/ScrollView";
 
-function ContextMenu({
+function ContextMenu({ content, placement, maxWidth, render, afterToggle }) {
-  content, placement, maxWidth, render, afterToggle,
-}) {
   const [isVisible, setVisibility] = useState(false);
   const showMenu = () => setVisibility(true);
   const hideMenu = () => setVisibility(false);
@@ -26,7 +24,11 @@ function ContextMenu({
       className="context-menu"
       visible={isVisible}
       onClickOutside={hideMenu}
-      content={<ScrollView invisible>{typeof content === 'function' ? content(hideMenu) : content}</ScrollView>}
+      content={
+        <ScrollView invisible>
+          {typeof content === "function" ? content(hideMenu) : content}
+        </ScrollView>
+      }
       placement={placement}
       interactive
       arrow={false}
@@ -39,21 +41,15 @@ function ContextMenu({
 }
 
 ContextMenu.defaultProps = {
-  maxWidth: 'unset',
+  maxWidth: "unset",
-  placement: 'right',
+  placement: "right",
   afterToggle: null,
 };
 
 ContextMenu.propTypes = {
-  content: PropTypes.oneOfType([
+  content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-    PropTypes.node,
+  placement: PropTypes.oneOf(["top", "right", "bottom", "left"]),
-    PropTypes.func,
+  maxWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  ]).isRequired,
-  placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
-  maxWidth: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
   render: PropTypes.func.isRequired,
   afterToggle: PropTypes.func,
 };
@@ -61,7 +57,7 @@ ContextMenu.propTypes = {
 function MenuHeader({ children }) {
   return (
     <div className="context-menu__header">
-      <Text variant="b3">{ children }</Text>
+      <Text variant="b3">{children}</Text>
     </div>
   );
 }
@@ -70,10 +66,7 @@ MenuHeader.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-function MenuItem({
+function MenuItem({ variant, iconSrc, type, onClick, children, disabled }) {
-  variant, iconSrc, type,
-  onClick, children, disabled,
-}) {
   return (
     <div className="context-menu__item">
       <Button
@@ -83,33 +76,33 @@ function MenuItem({
         onClick={onClick}
         disabled={disabled}
       >
-        { children }
+        {children}
       </Button>
     </div>
   );
 }
 
 MenuItem.defaultProps = {
-  variant: 'surface',
+  variant: "surface",
   iconSrc: null,
-  type: 'button',
+  type: "button",
   disabled: false,
   onClick: null,
 };
 
 MenuItem.propTypes = {
-  variant: PropTypes.oneOf(['surface', 'positive', 'caution', 'danger']),
+  variant: PropTypes.oneOf(["surface", "positive", "caution", "danger"]),
   iconSrc: PropTypes.string,
-  type: PropTypes.oneOf(['button', 'submit']),
+  type: PropTypes.oneOf(["button", "submit"]),
   onClick: PropTypes.func,
   children: PropTypes.node.isRequired,
   disabled: PropTypes.bool,
 };
 
 function MenuBorder() {
-  return <div style={{ borderBottom: '1px solid var(--bg-surface-border)' }}> </div>;
+  return (
+    <div style={{ borderBottom: "1px solid var(--bg-surface-border)" }}> </div>
+  );
 }
 
-export {
+export { ContextMenu as default, MenuHeader, MenuItem, MenuBorder };
-  ContextMenu as default, MenuHeader, MenuItem, MenuBorder,
-};

src/app/atoms/context-menu/ContextMenu.scss

@@ -1,6 +1,6 @@
-@use '../../partials/flex';
+@use "../../partials/flex";
-@use '../../partials/text';
+@use "../../partials/text";
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .context-menu {
   background-color: var(--bg-surface);
@@ -59,11 +59,7 @@
 
     // if item doesn't have icon
     .text:first-child {
-      @include dir.side(
+      @include dir.side(margin, calc(var(--ic-small) + var(--sp-tight)), 0);
-        margin,
-        calc(var(--ic-small) + var(--sp-tight)),
-        0
-      );
     }
   }
   .btn-surface:focus {

src/app/atoms/context-menu/ReusableContextMenu.jsx

@@ -1,9 +1,9 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from "react";
 
-import cons from '../../../client/state/cons';
+import cons from "../../../client/state/cons";
-import navigation from '../../../client/state/navigation';
+import navigation from "../../../client/state/navigation";
 
-import ContextMenu from './ContextMenu';
+import ContextMenu from "./ContextMenu";
 
 let key = null;
 function ReusableContextMenu() {
@@ -29,14 +29,20 @@ function ReusableContextMenu() {
         return;
       }
       setData({
-        placement, cords, render, afterClose,
+        placement,
+        cords,
+        render,
+        afterClose,
       });
     };
-    navigation.on(cons.events.navigation.REUSABLE_CONTEXT_MENU_OPENED, handleContextMenuOpen);
+    navigation.on(
+      cons.events.navigation.REUSABLE_CONTEXT_MENU_OPENED,
+      handleContextMenuOpen
+    );
     return () => {
       navigation.removeListener(
         cons.events.navigation.REUSABLE_CONTEXT_MENU_OPENED,
-        handleContextMenuOpen,
+        handleContextMenuOpen
       );
     };
   }, [data]);
@@ -59,24 +65,24 @@ function ReusableContextMenu() {
   return (
     <ContextMenu
       afterToggle={handleAfterToggle}
-      placement={data?.placement || 'right'}
+      placement={data?.placement || "right"}
-      content={data?.render(closeMenu) ?? ''}
+      content={data?.render(closeMenu) ?? ""}
       render={(toggleMenu) => (
         <input
           ref={openerRef}
           onClick={toggleMenu}
           type="button"
           style={{
-            width: '32px',
+            width: "32px",
-            height: '32px',
+            height: "32px",
-            backgroundColor: 'transparent',
+            backgroundColor: "transparent",
-            position: 'fixed',
+            position: "fixed",
             top: 0,
             left: 0,
             padding: 0,
-            border: 'none',
+            border: "none",
-            visibility: 'hidden',
+            visibility: "hidden",
-            appearance: 'none',
+            appearance: "none",
           }}
         />
       )}

src/app/atoms/divider/Divider.jsx

@@ -1,28 +1,38 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './Divider.scss';
+import "./Divider.scss";
 
-import Text from '../text/Text';
+import Text from "../text/Text";
 
 function Divider({ text, variant, align }) {
   const dividerClass = ` divider--${variant} divider--${align}`;
   return (
     <div className={`divider${dividerClass}`}>
-      {text !== null && <Text className="divider__text" variant="b3" weight="bold">{text}</Text>}
+      {text !== null && (
+        <Text className="divider__text" variant="b3" weight="bold">
+          {text}
+        </Text>
+      )}
     </div>
   );
 }
 
 Divider.defaultProps = {
   text: null,
-  variant: 'surface',
+  variant: "surface",
-  align: 'center',
+  align: "center",
 };
 
 Divider.propTypes = {
   text: PropTypes.string,
-  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
+  variant: PropTypes.oneOf([
-  align: PropTypes.oneOf(['left', 'center', 'right']),
+    "surface",
+    "primary",
+    "positive",
+    "caution",
+    "danger",
+  ]),
+  align: PropTypes.oneOf(["left", "center", "right"]),
 };
 
 export default Divider;

src/app/atoms/divider/Divider.scss

@@ -1,5 +1,5 @@
 .divider-line {
-  content: '';
+  content: "";
   display: inline-block;
   flex: 1;
   border-bottom: 1px solid var(--local-divider-color);
@@ -36,7 +36,7 @@
 }
 .divider--primary {
   --local-divider-color: var(--bg-primary);
-  --local-divider-opacity: .8;
+  --local-divider-opacity: 0.8;
   .divider__text {
     color: var(--tc-primary-high);
     background-color: var(--bg-primary);
@@ -44,7 +44,7 @@
 }
 .divider--positive {
   --local-divider-color: var(--bg-positive);
-  --local-divider-opacity: .8;
+  --local-divider-opacity: 0.8;
   .divider__text {
     color: var(--bg-surface);
     background-color: var(--bg-positive);
@@ -52,7 +52,7 @@
 }
 .divider--danger {
   --local-divider-color: var(--bg-danger);
-  --local-divider-opacity: .8;
+  --local-divider-opacity: 0.8;
   .divider__text {
     color: var(--bg-surface);
     background-color: var(--bg-danger);
@@ -60,7 +60,7 @@
 }
 .divider--caution {
   --local-divider-color: var(--bg-caution);
-  --local-divider-opacity: .8;
+  --local-divider-opacity: 0.8;
   .divider__text {
     color: var(--bg-surface);
     background-color: var(--bg-caution);

src/app/atoms/header/Header.jsx

@@ -1,13 +1,9 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './Header.scss';
+import "./Header.scss";
 
 function Header({ children }) {
-  return (
+  return <div className="header">{children}</div>;
-    <div className="header">
-      {children}
-    </div>
-  );
 }
 
 Header.propTypes = {
@@ -15,11 +11,7 @@ Header.propTypes = {
 };
 
 function TitleWrapper({ children }) {
-  return (
+  return <div className="header__title-wrapper">{children}</div>;
-    <div className="header__title-wrapper">
-      {children}
-    </div>
-  );
 }
 
 TitleWrapper.propTypes = {

src/app/atoms/header/Header.scss

@@ -1,5 +1,5 @@
-@use '../../partials/text';
+@use "../../partials/text";
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .header {
   @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
@@ -24,7 +24,7 @@
       @extend .cp-txt__ellipsis;
       min-width: 0;
     }
-    & > .text-b3{
+    & > .text-b3 {
       flex: 1;
       min-width: 0;
 

src/app/atoms/input/Input.jsx

@@ -1,75 +1,92 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './Input.scss';
+import "./Input.scss";
 
-import TextareaAutosize from 'react-autosize-textarea';
+import TextareaAutosize from "react-autosize-textarea";
 
 function Input({
-  id, label, name, value, placeholder,
+  id,
-  required, type, onChange, forwardRef,
+  label,
-  resizable, minHeight, onResize, state,
+  name,
-  onKeyDown, disabled, autoFocus,
+  value,
+  placeholder,
+  required,
+  type,
+  onChange,
+  forwardRef,
+  resizable,
+  minHeight,
+  onResize,
+  state,
+  onKeyDown,
+  disabled,
+  autoFocus,
 }) {
   return (
     <div className="input-container">
-      { label !== '' && <label className="input__label text-b2" htmlFor={id}>{label}</label> }
+      {label !== "" && (
-      { resizable
+        <label className="input__label text-b2" htmlFor={id}>
-        ? (
+          {label}
-          <TextareaAutosize
+        </label>
-            dir="auto"
+      )}
-            style={{ minHeight: `${minHeight}px` }}
+      {resizable ? (
-            name={name}
+        <TextareaAutosize
-            id={id}
+          dir="auto"
-            className={`input input--resizable${state !== 'normal' ? ` input--${state}` : ''}`}
+          style={{ minHeight: `${minHeight}px` }}
-            ref={forwardRef}
+          name={name}
-            type={type}
+          id={id}
-            placeholder={placeholder}
+          className={`input input--resizable${
-            required={required}
+            state !== "normal" ? ` input--${state}` : ""
-            defaultValue={value}
+          }`}
-            autoComplete="off"
+          ref={forwardRef}
-            onChange={onChange}
+          type={type}
-            onResize={onResize}
+          placeholder={placeholder}
-            onKeyDown={onKeyDown}
+          required={required}
-            disabled={disabled}
+          defaultValue={value}
-            autoFocus={autoFocus}
+          autoComplete="off"
-          />
+          onChange={onChange}
-        ) : (
+          onResize={onResize}
-          <input
+          onKeyDown={onKeyDown}
-            dir="auto"
+          disabled={disabled}
-            ref={forwardRef}
+          autoFocus={autoFocus}
-            id={id}
+        />
-            name={name}
+      ) : (
-            className={`input ${state !== 'normal' ? ` input--${state}` : ''}`}
+        <input
-            type={type}
+          dir="auto"
-            placeholder={placeholder}
+          ref={forwardRef}
-            required={required}
+          id={id}
-            defaultValue={value}
+          name={name}
-            autoComplete="off"
+          className={`input ${state !== "normal" ? ` input--${state}` : ""}`}
-            onChange={onChange}
+          type={type}
-            onKeyDown={onKeyDown}
+          placeholder={placeholder}
-            disabled={disabled}
+          required={required}
-            // eslint-disable-next-line jsx-a11y/no-autofocus
+          defaultValue={value}
-            autoFocus={autoFocus}
+          autoComplete="off"
-          />
+          onChange={onChange}
-        )}
+          onKeyDown={onKeyDown}
+          disabled={disabled}
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus={autoFocus}
+        />
+      )}
     </div>
   );
 }
 
 Input.defaultProps = {
   id: null,
-  name: '',
+  name: "",
-  label: '',
+  label: "",
-  value: '',
+  value: "",
-  placeholder: '',
+  placeholder: "",
-  type: 'text',
+  type: "text",
   required: false,
   onChange: null,
   forwardRef: null,
   resizable: false,
   minHeight: 46,
   onResize: null,
-  state: 'normal',
+  state: "normal",
   onKeyDown: null,
   disabled: false,
   autoFocus: false,
@@ -88,7 +105,7 @@ Input.propTypes = {
   resizable: PropTypes.bool,
   minHeight: PropTypes.number,
   onResize: PropTypes.func,
-  state: PropTypes.oneOf(['normal', 'success', 'error']),
+  state: PropTypes.oneOf(["normal", "success", "error"]),
   onKeyDown: PropTypes.func,
   disabled: PropTypes.bool,
   autoFocus: PropTypes.bool,

src/app/atoms/input/Input.scss

@@ -1,4 +1,4 @@
-@use '../../atoms/scroll/scrollbar';
+@use "../../atoms/scroll/scrollbar";
 
 .input {
   display: block;
@@ -47,6 +47,6 @@
     box-shadow: var(--bs-primary-border);
   }
   &::placeholder {
-    color: var(--tc-surface-low)
+    color: var(--tc-surface-low);
   }
 }

src/app/atoms/math/Math.jsx

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

src/app/atoms/modal/RawModal.jsx

@@ -1,36 +1,43 @@
-import React, { useEffect } from 'react';
+import React, { useEffect } from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './RawModal.scss';
+import "./RawModal.scss";
 
-import Modal from 'react-modal';
+import Modal from "react-modal";
 
-import navigation from '../../../client/state/navigation';
+import navigation from "../../../client/state/navigation";
 
-Modal.setAppElement('#root');
+Modal.setAppElement("#root");
 
 function RawModal({
-  className, overlayClassName,
+  className,
-  isOpen, size, onAfterOpen, onAfterClose,
+  overlayClassName,
-  onRequestClose, closeFromOutside, children,
+  isOpen,
+  size,
+  onAfterOpen,
+  onAfterClose,
+  onRequestClose,
+  closeFromOutside,
+  children,
 }) {
-  let modalClass = (className !== null) ? `${className} ` : '';
+  let modalClass = className !== null ? `${className} ` : "";
   switch (size) {
-    case 'large':
+    case "large":
-      modalClass += 'raw-modal__large ';
+      modalClass += "raw-modal__large ";
       break;
-    case 'medium':
+    case "medium":
-      modalClass += 'raw-modal__medium ';
+      modalClass += "raw-modal__medium ";
       break;
-    case 'small':
+    case "small":
     default:
-      modalClass += 'raw-modal__small ';
+      modalClass += "raw-modal__small ";
   }
 
   useEffect(() => {
     navigation.setIsRawModalVisible(isOpen);
   }, [isOpen]);
 
-  const modalOverlayClass = (overlayClassName !== null) ? `${overlayClassName} ` : '';
+  const modalOverlayClass =
+    overlayClassName !== null ? `${overlayClassName} ` : "";
   return (
     <Modal
       className={`${modalClass}raw-modal`}
@@ -51,7 +58,7 @@ function RawModal({
 RawModal.defaultProps = {
   className: null,
   overlayClassName: null,
-  size: 'small',
+  size: "small",
   onAfterOpen: null,
   onAfterClose: null,
   onRequestClose: null,
@@ -62,7 +69,7 @@ RawModal.propTypes = {
   className: PropTypes.string,
   overlayClassName: PropTypes.string,
   isOpen: PropTypes.bool.isRequired,
-  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  size: PropTypes.oneOf(["large", "medium", "small"]),
   onAfterOpen: PropTypes.func,
   onAfterClose: PropTypes.func,
   onRequestClose: PropTypes.func,

src/app/atoms/modal/RawModal.scss

@@ -49,7 +49,7 @@
 @keyframes raw-modal--content {
   0% {
     transform: translateY(100px);
-    opacity: .5;
+    opacity: 0.5;
   }
   100% {
     transform: translateY(0);

src/app/atoms/scroll/ScrollView.jsx

@@ -1,21 +1,25 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './ScrollView.scss';
+import "./ScrollView.scss";
 
-const ScrollView = React.forwardRef(({
+const ScrollView = React.forwardRef(
-  horizontal, vertical, autoHide, invisible, onScroll, children,
+  ({ horizontal, vertical, autoHide, invisible, onScroll, children }, ref) => {
-}, ref) => {
+    let scrollbarClasses = "";
-  let scrollbarClasses = '';
+    if (horizontal) scrollbarClasses += " scrollbar__h";
-  if (horizontal) scrollbarClasses += ' scrollbar__h';
+    if (vertical) scrollbarClasses += " scrollbar__v";
-  if (vertical) scrollbarClasses += ' scrollbar__v';
+    if (autoHide) scrollbarClasses += " scrollbar--auto-hide";
-  if (autoHide) scrollbarClasses += ' scrollbar--auto-hide';
+    if (invisible) scrollbarClasses += " scrollbar--invisible";
-  if (invisible) scrollbarClasses += ' scrollbar--invisible';
+    return (
-  return (
+      <div
-    <div onScroll={onScroll} ref={ref} className={`scrollbar${scrollbarClasses}`}>
+        onScroll={onScroll}
-      {children}
+        ref={ref}
-    </div>
+        className={`scrollbar${scrollbarClasses}`}
-  );
+      >
-});
+        {children}
+      </div>
+    );
+  }
+);
 
 ScrollView.defaultProps = {
   horizontal: false,

src/app/atoms/scroll/ScrollView.scss

@@ -1,8 +1,8 @@
-@use '../../partials/dir';
+@use "../../partials/dir";
-@use '_scrollbar';
+@use "_scrollbar";
 
 @mixin paddingForSafari($padding) {
-	@media not all and (min-resolution:.001dpcm) {
+  @media not all and (min-resolution: 0.001dpcm) {
     @include dir.side(padding, 0, $padding);
   }
 }

src/app/atoms/segmented-controls/SegmentedControls.jsx

@@ -1,15 +1,13 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './SegmentedControls.scss';
+import "./SegmentedControls.scss";
 
-import { blurOnBubbling } from '../button/script';
+import { blurOnBubbling } from "../button/script";
 
-import Text from '../text/Text';
+import Text from "../text/Text";
-import RawIcon from '../system-icons/RawIcon';
+import RawIcon from "../system-icons/RawIcon";
 
-function SegmentedControls({
+function SegmentedControls({ selected, segments, onSelect }) {
-  selected, segments, onSelect,
-}) {
   const [select, setSelect] = useState(selected);
 
   function selectSegment(segmentIndex) {
@@ -23,32 +21,34 @@ function SegmentedControls({
 
   return (
     <div className="segmented-controls">
-      {
+      {segments.map((segment, index) => (
-        segments.map((segment, index) => (
+        <button
-          <button
+          key={Math.random().toString(20).substr(2, 6)}
-            key={Math.random().toString(20).substr(2, 6)}
+          className={`segment-btn${
-            className={`segment-btn${select === index ? ' segment-btn--active' : ''}`}
+            select === index ? " segment-btn--active" : ""
-            type="button"
+          }`}
-            onClick={() => selectSegment(index)}
+          type="button"
-            onMouseUp={(e) => blurOnBubbling(e, '.segment-btn')}
+          onClick={() => selectSegment(index)}
-          >
+          onMouseUp={(e) => blurOnBubbling(e, ".segment-btn")}
-            <div className="segment-btn__base">
+        >
-              {segment.iconSrc && <RawIcon size="small" src={segment.iconSrc} />}
+          <div className="segment-btn__base">
-              {segment.text && <Text variant="b2">{segment.text}</Text>}
+            {segment.iconSrc && <RawIcon size="small" src={segment.iconSrc} />}
-            </div>
+            {segment.text && <Text variant="b2">{segment.text}</Text>}
-          </button>
+          </div>
-        ))
+        </button>
-      }
+      ))}
     </div>
   );
 }
 
 SegmentedControls.propTypes = {
   selected: PropTypes.number.isRequired,
-  segments: PropTypes.arrayOf(PropTypes.shape({
+  segments: PropTypes.arrayOf(
-    iconSrc: PropTypes.string,
+    PropTypes.shape({
-    text: PropTypes.string,
+      iconSrc: PropTypes.string,
-  })).isRequired,
+      text: PropTypes.string,
+    })
+  ).isRequired,
   onSelect: PropTypes.func.isRequired,
 };
 

src/app/atoms/segmented-controls/SegmentedControls.scss

@@ -1,5 +1,5 @@
-@use '../button/state';
+@use "../button/state";
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .segmented-controls {
   background-color: var(--bg-surface-low);
@@ -40,18 +40,22 @@
     & + .segment-btn .segment-btn__base {
       border: none;
     }
-    &:first-child{
+    &:first-child {
       border-left: none;
     }
     &:last-child {
       border-right: none;
     }
-    [dir=rtl] & {
+    [dir="rtl"] & {
       border-left: 1px solid var(--bg-surface-border);
       border-right: 1px solid var(--bg-surface-border);
 
-      &:first-child { border-right: none;}
+      &:first-child {
-      &:last-child { border-left: none;}
+        border-right: none;
+      }
+      &:last-child {
+        border-left: none;
+      }
     }
   }
 }

src/app/atoms/spinner/Spinner.jsx

@@ -1,19 +1,17 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './Spinner.scss';
+import "./Spinner.scss";
 
 function Spinner({ size }) {
-  return (
+  return <div className={`donut-spinner donut-spinner--${size}`}> </div>;
-    <div className={`donut-spinner donut-spinner--${size}`}> </div>
-  );
 }
 
 Spinner.defaultProps = {
-  size: 'normal',
+  size: "normal",
 };
 
 Spinner.propTypes = {
-  size: PropTypes.oneOf(['normal', 'small']),
+  size: PropTypes.oneOf(["normal", "small"]),
 };
 
 export default Spinner;

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

@@ -1,12 +1,12 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './RawIcon.scss';
+import "./RawIcon.scss";
 
 function RawIcon({ color, size, src, isImage }) {
   const style = {};
   if (color !== null) style.backgroundColor = color;
   if (isImage) {
-    style.backgroundColor = 'transparent';
+    style.backgroundColor = "transparent";
     style.backgroundImage = `url("${src}")`;
   } else {
     style.WebkitMaskImage = `url("${src}")`;
@@ -18,13 +18,13 @@ function RawIcon({ color, size, src, isImage }) {
 
 RawIcon.defaultProps = {
   color: null,
-  size: 'normal',
+  size: "normal",
   isImage: false,
 };
 
 RawIcon.propTypes = {
   color: PropTypes.string,
-  size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']),
+  size: PropTypes.oneOf(["large", "normal", "small", "extra-small"]),
   src: PropTypes.string.isRequired,
   isImage: PropTypes.bool,
 };

src/app/atoms/tabs/Tabs.jsx

@@ -1,15 +1,12 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './Tabs.scss';
+import "./Tabs.scss";
 
-import Button from '../button/Button';
+import Button from "../button/Button";
-import ScrollView from '../scroll/ScrollView';
+import ScrollView from "../scroll/ScrollView";
 
-function TabItem({
+function TabItem({ selected, iconSrc, onClick, children, disabled }) {
-  selected, iconSrc,
+  const isSelected = selected ? "tab-item--selected" : "";
-  onClick, children, disabled,
-}) {
-  const isSelected = selected ? 'tab-item--selected' : '';
 
   return (
     <Button
@@ -78,7 +75,7 @@ Tabs.propTypes = {
       iconSrc: PropTypes.string,
       text: PropTypes.string,
       disabled: PropTypes.bool,
-    }),
+    })
   ).isRequired,
   defaultSelected: PropTypes.number,
   onSelect: PropTypes.func.isRequired,

src/app/atoms/tabs/Tabs.scss

@@ -1,4 +1,4 @@
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .tabs {
   height: var(--header-height);
@@ -18,7 +18,7 @@
   border-radius: 0;
   height: 100%;
   box-shadow: none;
-  border-radius: var(--bo-radius) var(--bo-radius)   0 0;
+  border-radius: var(--bo-radius) var(--bo-radius) 0 0;
 
   &:focus,
   &:active {

src/app/atoms/text/Text.jsx

@@ -1,30 +1,51 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './Text.scss';
+import "./Text.scss";
 
-function Text({
+function Text({ className, style, variant, weight, primary, span, children }) {
-  className, style, variant, weight,
-  primary, span, children,
-}) {
   const classes = [];
   if (className) classes.push(className);
 
   classes.push(`text text-${variant} text-${weight}`);
-  if (primary) classes.push('font-primary');
+  if (primary) classes.push("font-primary");
 
-  const textClass = classes.join(' ');
+  const textClass = classes.join(" ");
-  if (span) return <span className={textClass} style={style}>{ children }</span>;
+  if (span)
-  if (variant === 'h1') return <h1 className={textClass} style={style}>{ children }</h1>;
+    return (
-  if (variant === 'h2') return <h2 className={textClass} style={style}>{ children }</h2>;
+      <span className={textClass} style={style}>
-  if (variant === 's1') return <h4 className={textClass} style={style}>{ children }</h4>;
+        {children}
-  return <p className={textClass} style={style}>{ children }</p>;
+      </span>
+    );
+  if (variant === "h1")
+    return (
+      <h1 className={textClass} style={style}>
+        {children}
+      </h1>
+    );
+  if (variant === "h2")
+    return (
+      <h2 className={textClass} style={style}>
+        {children}
+      </h2>
+    );
+  if (variant === "s1")
+    return (
+      <h4 className={textClass} style={style}>
+        {children}
+      </h4>
+    );
+  return (
+    <p className={textClass} style={style}>
+      {children}
+    </p>
+  );
 }
 
 Text.defaultProps = {
   className: null,
   style: null,
-  variant: 'b1',
+  variant: "b1",
-  weight: 'normal',
+  weight: "normal",
   primary: false,
   span: false,
 };
@@ -32,8 +53,8 @@ Text.defaultProps = {
 Text.propTypes = {
   className: PropTypes.string,
   style: PropTypes.shape({}),
-  variant: PropTypes.oneOf(['h1', 'h2', 's1', 'b1', 'b2', 'b3']),
+  variant: PropTypes.oneOf(["h1", "h2", "s1", "b1", "b2", "b3"]),
-  weight: PropTypes.oneOf(['light', 'normal', 'medium', 'bold']),
+  weight: PropTypes.oneOf(["light", "normal", "medium", "bold"]),
   primary: PropTypes.bool,
   span: PropTypes.bool,
   children: PropTypes.node.isRequired,

src/app/atoms/text/Text.scss

@@ -5,7 +5,7 @@
 
   & img.emoji,
   & img[data-mx-emoticon] {
-    height: calc(var(--lh-#{$type}) - .25rem);
+    height: calc(var(--lh-#{$type}) - 0.25rem);
   }
 }
 
@@ -20,7 +20,7 @@
     margin-right: 2px !important;
     padding: 0 !important;
     position: relative;
-    top: -.1rem;
+    top: -0.1rem;
     vertical-align: middle;
   }
 }

src/app/atoms/time/Time.jsx

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

src/app/atoms/time/Time.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+
+import dateFormat from "dateformat";
+import { isInSameDay } from "../../../util/common";
+
+export interface TimeProps {
+  timestamp: number;
+  fullTime?: boolean;
+}
+
+function Time({ timestamp, fullTime }: TimeProps) {
+  const date = new Date(timestamp);
+
+  const formattedFullTime = dateFormat(date, "dd mmmm yyyy, hh:MM TT");
+  let formattedDateTime = formattedFullTime;
+
+  if (!fullTime) {
+    const compareDate = new Date();
+    const isToday = isInSameDay(date, compareDate);
+    compareDate.setDate(compareDate.getDate() - 1);
+    const isYesterday = isInSameDay(date, compareDate);
+
+    const dtf = new Intl.DateTimeFormat();
+    const formattedDate = dtf.format(date);
+
+    formattedDateTime = dateFormat(
+      date,
+      isToday || isYesterday ? "hh:MM TT" : formattedDate
+    );
+    if (isYesterday) {
+      formattedDateTime = `Yesterday, ${formattedDateTime}`;
+    }
+  }
+
+  return (
+    <time dateTime={date.toISOString()} title={formattedFullTime}>
+      {formattedDateTime}
+    </time>
+  );
+}
+
+Time.defaultProps = {
+  fullTime: false,
+};
+
+export default Time;

src/app/atoms/tooltip/Tooltip.jsx

@@ -1,11 +1,9 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './Tooltip.scss';
+import "./Tooltip.scss";
-import Tippy from '@tippyjs/react';
+import Tippy from "@tippyjs/react";
 
-function Tooltip({
+function Tooltip({ className, placement, content, delay, children }) {
-  className, placement, content, delay, children,
-}) {
   return (
     <Tippy
       content={content}
@@ -23,8 +21,8 @@ function Tooltip({
 }
 
 Tooltip.defaultProps = {
-  placement: 'top',
+  placement: "top",
-  className: '',
+  className: "",
   delay: [200, 0],
 };
 

src/app/hooks/useAccountData.js

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

src/app/hooks/useCategorizedSpaces.js

@@ -1,22 +1,27 @@
 /* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 
-import initMatrix from '../../client/initMatrix';
+import initMatrix from "../../client/initMatrix";
-import cons from '../../client/state/cons';
+import cons from "../../client/state/cons";
 
 export function useCategorizedSpaces() {
   const { accountData } = initMatrix;
-  const [categorizedSpaces, setCategorizedSpaces] = useState([...accountData.categorizedSpaces]);
+  const [categorizedSpaces, setCategorizedSpaces] = useState([
+    ...accountData.categorizedSpaces,
+  ]);
 
   useEffect(() => {
     const handleCategorizedSpaces = () => {
       setCategorizedSpaces([...accountData.categorizedSpaces]);
     };
-    accountData.on(cons.events.accountData.CATEGORIZE_SPACE_UPDATED, handleCategorizedSpaces);
+    accountData.on(
+      cons.events.accountData.CATEGORIZE_SPACE_UPDATED,
+      handleCategorizedSpaces
+    );
     return () => {
       accountData.removeListener(
         cons.events.accountData.CATEGORIZE_SPACE_UPDATED,
-        handleCategorizedSpaces,
+        handleCategorizedSpaces
       );
     };
   }, []);

src/app/hooks/useCrossSigningStatus.js

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

src/app/hooks/useDeviceList.js

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

src/app/hooks/useForceUpdate.js

@@ -1,10 +1,13 @@
 /* eslint-disable import/prefer-default-export */
-import { useState } from 'react';
+import { useState } from "react";
 
 export function useForceUpdate() {
   const [data, setData] = useState(null);
 
-  return [data, function forceUpdateHook() {
+  return [
-    setData({});
+    data,
-  }];
+    function forceUpdateHook() {
+      setData({});
+    },
+  ];
 }

src/app/hooks/usePermission.js

@@ -1,6 +1,6 @@
 /* eslint-disable import/prefer-default-export */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 
 export function usePermission(name, initial) {
   const [state, setState] = useState(initial);
@@ -15,12 +15,12 @@ export function usePermission(name, initial) {
         descriptor = _descriptor;
 
         update();
-        descriptor.addEventListener('change', update);
+        descriptor.addEventListener("change", update);
       });
     }
 
     return () => {
-      if (descriptor) descriptor.removeEventListener('change', update);
+      if (descriptor) descriptor.removeEventListener("change", update);
     };
   }, []);
 

src/app/hooks/useSelectedSpace.js

@@ -1,8 +1,8 @@
 /* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 
-import cons from '../../client/state/cons';
+import cons from "../../client/state/cons";
-import navigation from '../../client/state/navigation';
+import navigation from "../../client/state/navigation";
 
 export function useSelectedSpace() {
   const [spaceId, setSpaceId] = useState(navigation.selectedSpaceId);
@@ -13,7 +13,10 @@ export function useSelectedSpace() {
     };
     navigation.on(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
     return () => {
-      navigation.removeListener(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
+      navigation.removeListener(
+        cons.events.navigation.SPACE_SELECTED,
+        onSpaceSelected
+      );
     };
   }, []);
 

src/app/hooks/useSelectedTab.js

@@ -1,8 +1,8 @@
 /* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 
-import cons from '../../client/state/cons';
+import cons from "../../client/state/cons";
-import navigation from '../../client/state/navigation';
+import navigation from "../../client/state/navigation";
 
 export function useSelectedTab() {
   const [selectedTab, setSelectedTab] = useState(navigation.selectedTab);
@@ -13,7 +13,10 @@ export function useSelectedTab() {
     };
     navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
     return () => {
-      navigation.removeListener(cons.events.navigation.TAB_SELECTED, onTabSelected);
+      navigation.removeListener(
+        cons.events.navigation.TAB_SELECTED,
+        onTabSelected
+      );
     };
   }, []);
 

src/app/hooks/useSpaceShortcut.js

@@ -1,22 +1,27 @@
 /* eslint-disable import/prefer-default-export */
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 
-import initMatrix from '../../client/initMatrix';
+import initMatrix from "../../client/initMatrix";
-import cons from '../../client/state/cons';
+import cons from "../../client/state/cons";
 
 export function useSpaceShortcut() {
   const { accountData } = initMatrix;
-  const [spaceShortcut, setSpaceShortcut] = useState([...accountData.spaceShortcut]);
+  const [spaceShortcut, setSpaceShortcut] = useState([
+    ...accountData.spaceShortcut,
+  ]);
 
   useEffect(() => {
     const onSpaceShortcutUpdated = () => {
       setSpaceShortcut([...accountData.spaceShortcut]);
     };
-    accountData.on(cons.events.accountData.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
+    accountData.on(
+      cons.events.accountData.SPACE_SHORTCUT_UPDATED,
+      onSpaceShortcutUpdated
+    );
     return () => {
       accountData.removeListener(
         cons.events.accountData.SPACE_SHORTCUT_UPDATED,
-        onSpaceShortcutUpdated,
+        onSpaceShortcutUpdated
       );
     };
   }, []);

src/app/hooks/useStore.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/prefer-default-export */
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef } from "react";
 
 export function useStore(...args) {
   const itemRef = useRef(null);

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

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

src/app/molecules/dialog/Dialog.jsx

@@ -1,22 +1,29 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './Dialog.scss';
+import "./Dialog.scss";
 
-import { twemojify } from '../../../util/twemojify';
+import { twemojify } from "../../../util/twemojify";
 
-import Text from '../../atoms/text/Text';
+import Text from "../../atoms/text/Text";
-import Header, { TitleWrapper } from '../../atoms/header/Header';
+import Header, { TitleWrapper } from "../../atoms/header/Header";
-import ScrollView from '../../atoms/scroll/ScrollView';
+import ScrollView from "../../atoms/scroll/ScrollView";
-import RawModal from '../../atoms/modal/RawModal';
+import RawModal from "../../atoms/modal/RawModal";
 
 function Dialog({
-  className, isOpen, title, onAfterOpen, onAfterClose,
+  className,
-  contentOptions, onRequestClose, closeFromOutside, children,
+  isOpen,
+  title,
+  onAfterOpen,
+  onAfterClose,
+  contentOptions,
+  onRequestClose,
+  closeFromOutside,
+  children,
   invisibleScroll,
 }) {
   return (
     <RawModal
-      className={`${className === null ? '' : `${className} `}dialog-modal`}
+      className={`${className === null ? "" : `${className} `}dialog-modal`}
       isOpen={isOpen}
       onAfterOpen={onAfterOpen}
       onAfterClose={onAfterClose}
@@ -28,19 +35,19 @@ function Dialog({
         <div className="dialog__content">
           <Header>
             <TitleWrapper>
-              {
+              {typeof title === "string" ? (
-                typeof title === 'string'
+                <Text variant="h2" weight="medium" primary>
-                  ? <Text variant="h2" weight="medium" primary>{twemojify(title)}</Text>
+                  {twemojify(title)}
-                  : title
+                </Text>
-              }
+              ) : (
+                title
+              )}
             </TitleWrapper>
             {contentOptions}
           </Header>
           <div className="dialog__content__wrapper">
             <ScrollView autoHide={!invisibleScroll} invisible={invisibleScroll}>
-              <div className="dialog__content-container">
+              <div className="dialog__content-container">{children}</div>
-                {children}
-              </div>
             </ScrollView>
           </div>
         </div>

src/app/molecules/dialog/ReusableDialog.jsx

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

src/app/molecules/following-members/FollowingMembers.jsx

@@ -1,17 +1,17 @@
 /* eslint-disable react/prop-types */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './FollowingMembers.scss';
+import "./FollowingMembers.scss";
 
-import initMatrix from '../../../client/initMatrix';
+import initMatrix from "../../../client/initMatrix";
-import cons from '../../../client/state/cons';
+import cons from "../../../client/state/cons";
-import { openReadReceipts } from '../../../client/action/navigation';
+import { openReadReceipts } from "../../../client/action/navigation";
 
-import Text from '../../atoms/text/Text';
+import Text from "../../atoms/text/Text";
-import RawIcon from '../../atoms/system-icons/RawIcon';
+import RawIcon from "../../atoms/system-icons/RawIcon";
-import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
+import TickMarkIC from "../../../../public/res/ic/outlined/tick-mark.svg";
 
-import { getUsersActionJsx } from '../../organisms/room/common';
+import { getUsersActionJsx } from "../../organisms/room/common";
 
 function FollowingMembers({ roomTimeline }) {
   const [followingMembers, setFollowingMembers] = useState([]);
@@ -27,28 +27,38 @@ function FollowingMembers({ roomTimeline }) {
       setFollowingMembers(roomTimeline.getLiveReaders());
     };
     updateFollowingMembers();
-    roomTimeline.on(cons.events.roomTimeline.LIVE_RECEIPT, updateFollowingMembers);
+    roomTimeline.on(
+      cons.events.roomTimeline.LIVE_RECEIPT,
+      updateFollowingMembers
+    );
     roomsInput.on(cons.events.roomsInput.MESSAGE_SENT, handleOnMessageSent);
     return () => {
-      roomTimeline.removeListener(cons.events.roomTimeline.LIVE_RECEIPT, updateFollowingMembers);
+      roomTimeline.removeListener(
-      roomsInput.removeListener(cons.events.roomsInput.MESSAGE_SENT, handleOnMessageSent);
+        cons.events.roomTimeline.LIVE_RECEIPT,
+        updateFollowingMembers
+      );
+      roomsInput.removeListener(
+        cons.events.roomsInput.MESSAGE_SENT,
+        handleOnMessageSent
+      );
     };
   }, [roomTimeline]);
 
   const filteredM = followingMembers.filter((userId) => userId !== myUserId);
 
-  return filteredM.length !== 0 && (
+  return (
-    <button
+    filteredM.length !== 0 && (
-      className="following-members"
+      <button
-      onClick={() => openReadReceipts(roomId, followingMembers)}
+        className="following-members"
-      type="button"
+        onClick={() => openReadReceipts(roomId, followingMembers)}
-    >
+        type="button"
-      <RawIcon
+      >
-        size="extra-small"
+        <RawIcon size="extra-small" src={TickMarkIC} />
-        src={TickMarkIC}
+        <Text variant="b2">
-      />
+          {getUsersActionJsx(roomId, filteredM, "following the conversation.")}
-      <Text variant="b2">{getUsersActionJsx(roomId, filteredM, 'following the conversation.')}</Text>
+        </Text>
-    </button>
+      </button>
+    )
   );
 }
 

src/app/molecules/following-members/FollowingMembers.scss

@@ -1,4 +1,4 @@
-@use '../../partials/text';
+@use "../../partials/text";
 
 .following-members {
   width: 100%;

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

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

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

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

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

@@ -1,35 +1,38 @@
-import React from 'react';
+import React from "react";
-import './KeywordNotification.scss';
+import "./KeywordNotification.scss";
 
-import initMatrix from '../../../client/initMatrix';
+import initMatrix from "../../../client/initMatrix";
-import { openReusableContextMenu } from '../../../client/action/navigation';
+import { openReusableContextMenu } from "../../../client/action/navigation";
-import { getEventCords } from '../../../util/common';
+import { getEventCords } from "../../../util/common";
 
-import Text from '../../atoms/text/Text';
+import Text from "../../atoms/text/Text";
-import Chip from '../../atoms/chip/Chip';
+import Chip from "../../atoms/chip/Chip";
-import Input from '../../atoms/input/Input';
+import Input from "../../atoms/input/Input";
-import Button from '../../atoms/button/Button';
+import Button from "../../atoms/button/Button";
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
+import { MenuHeader } from "../../atoms/context-menu/ContextMenu";
-import SettingTile from '../setting-tile/SettingTile';
+import SettingTile from "../setting-tile/SettingTile";
 
-import NotificationSelector from './NotificationSelector';
+import NotificationSelector from "./NotificationSelector";
 
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+import ChevronBottomIC from "../../../../public/res/ic/outlined/chevron-bottom.svg";
-import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
+import CrossIC from "../../../../public/res/ic/outlined/cross.svg";
 
-import { useAccountData } from '../../hooks/useAccountData';
+import { useAccountData } from "../../hooks/useAccountData";
 import {
-  notifType, typeToLabel, getActionType, getTypeActions,
+  notifType,
-} from './GlobalNotification';
+  typeToLabel,
+  getActionType,
+  getTypeActions,
+} from "./GlobalNotification";
 
-const DISPLAY_NAME = '.m.rule.contains_display_name';
+const DISPLAY_NAME = ".m.rule.contains_display_name";
-const ROOM_PING = '.m.rule.roomnotif';
+const ROOM_PING = ".m.rule.roomnotif";
-const USERNAME = '.m.rule.contains_user_name';
+const USERNAME = ".m.rule.contains_user_name";
-const KEYWORD = 'keyword';
+const KEYWORD = "keyword";
 
 function useKeywordNotif() {
   const mx = initMatrix.matrixClient;
-  const pushRules = useAccountData('m.push_rules')?.getContent();
+  const pushRules = useAccountData("m.push_rules")?.getContent();
   const override = pushRules?.global?.override ?? [];
   const content = pushRules?.global?.content ?? [];
 
@@ -60,12 +63,12 @@ function useKeywordNotif() {
         or.push(orRule);
       }
       if (rule === DISPLAY_NAME) {
-        orRule.conditions = [{ kind: 'contains_display_name' }];
+        orRule.conditions = [{ kind: "contains_display_name" }];
         orRule.actions = getTypeActions(type, true);
       } else {
         orRule.conditions = [
-          { kind: 'event_match', key: 'content.body', pattern: '@room' },
+          { kind: "event_match", key: "content.body", pattern: "@room" },
-          { kind: 'sender_notification_permission', key: 'room' },
+          { kind: "sender_notification_permission", key: "room" },
         ];
         orRule.actions = getTypeActions(type, true);
       }
@@ -92,7 +95,7 @@ function useKeywordNotif() {
       });
     }
 
-    mx.setAccountData('m.push_rules', evtContent);
+    mx.setAccountData("m.push_rules", evtContent);
   };
 
   const addKeyword = (keyword) => {
@@ -104,11 +107,13 @@ function useKeywordNotif() {
       default: false,
       actions: getTypeActions(rulesToType[KEYWORD] ?? notifType.NOISY, true),
     });
-    mx.setAccountData('m.push_rules', pushRules);
+    mx.setAccountData("m.push_rules", pushRules);
   };
   const removeKeyword = (rule) => {
-    pushRules.global.content = content.filter((r) => r.rule_id !== rule.rule_id);
+    pushRules.global.content = content.filter(
-    mx.setAccountData('m.push_rules', pushRules);
+      (r) => r.rule_id !== rule.rule_id
+    );
+    mx.setAccountData("m.push_rules", pushRules);
   };
 
   const dsRule = override.find((rule) => rule.rule_id === DISPLAY_NAME);
@@ -131,20 +136,16 @@ function useKeywordNotif() {
 }
 
 function GlobalNotification() {
-  const {
+  const { rulesToType, pushRules, setRule, addKeyword, removeKeyword } =
-    rulesToType,
+    useKeywordNotif();
-    pushRules,
-    setRule,
-    addKeyword,
-    removeKeyword,
-  } = useKeywordNotif();
 
-  const keywordRules = pushRules?.global?.content.filter((r) => r.rule_id !== USERNAME) ?? [];
+  const keywordRules =
+    pushRules?.global?.content.filter((r) => r.rule_id !== USERNAME) ?? [];
 
   const onSelect = (evt, rule) => {
     openReusableContextMenu(
-      'bottom',
+      "bottom",
-      getEventCords(evt, '.btn-surface'),
+      getEventCords(evt, ".btn-surface"),
       (requestClose) => (
         <NotificationSelector
           value={rulesToType[rule]}
@@ -153,7 +154,7 @@ function GlobalNotification() {
             requestClose();
           }}
         />
-      ),
+      )
     );
   };
 
@@ -161,9 +162,9 @@ function GlobalNotification() {
     evt.preventDefault();
     const { keywordInput } = evt.target.elements;
     const value = keywordInput.value.trim();
-    if (value === '') return;
+    if (value === "") return;
     addKeyword(value);
-    keywordInput.value = '';
+    keywordInput.value = "";
   };
 
   return (
@@ -171,50 +172,84 @@ function GlobalNotification() {
       <MenuHeader>Mentions & keywords</MenuHeader>
       <SettingTile
         title="Message containing my display name"
-        options={(
+        options={
-          <Button onClick={(evt) => onSelect(evt, DISPLAY_NAME)} iconSrc={ChevronBottomIC}>
+          <Button
-            { typeToLabel[rulesToType[DISPLAY_NAME]] }
+            onClick={(evt) => onSelect(evt, DISPLAY_NAME)}
+            iconSrc={ChevronBottomIC}
+          >
+            {typeToLabel[rulesToType[DISPLAY_NAME]]}
           </Button>
-        )}
+        }
-        content={<Text variant="b3">Default notification settings for all message containing your display name.</Text>}
+        content={
+          <Text variant="b3">
+            Default notification settings for all message containing your
+            display name.
+          </Text>
+        }
       />
       <SettingTile
         title="Message containing my username"
-        options={(
+        options={
-          <Button onClick={(evt) => onSelect(evt, USERNAME)} iconSrc={ChevronBottomIC}>
+          <Button
-            { typeToLabel[rulesToType[USERNAME]] }
+            onClick={(evt) => onSelect(evt, USERNAME)}
+            iconSrc={ChevronBottomIC}
+          >
+            {typeToLabel[rulesToType[USERNAME]]}
           </Button>
-        )}
+        }
-        content={<Text variant="b3">Default notification settings for all message containing your username.</Text>}
+        content={
+          <Text variant="b3">
+            Default notification settings for all message containing your
+            username.
+          </Text>
+        }
       />
       <SettingTile
         title="Message containing @room"
-        options={(
+        options={
-          <Button onClick={(evt) => onSelect(evt, ROOM_PING)} iconSrc={ChevronBottomIC}>
+          <Button
+            onClick={(evt) => onSelect(evt, ROOM_PING)}
+            iconSrc={ChevronBottomIC}
+          >
             {typeToLabel[rulesToType[ROOM_PING]]}
           </Button>
-        )}
+        }
-        content={<Text variant="b3">Default notification settings for all messages containing @room.</Text>}
+        content={
+          <Text variant="b3">
+            Default notification settings for all messages containing @room.
+          </Text>
+        }
       />
-      { rulesToType[KEYWORD] && (
+      {rulesToType[KEYWORD] && (
         <SettingTile
           title="Message containing keywords"
-          options={(
+          options={
-            <Button onClick={(evt) => onSelect(evt, KEYWORD)} iconSrc={ChevronBottomIC}>
+            <Button
+              onClick={(evt) => onSelect(evt, KEYWORD)}
+              iconSrc={ChevronBottomIC}
+            >
               {typeToLabel[rulesToType[KEYWORD]]}
             </Button>
-          )}
+          }
-          content={<Text variant="b3">Default notification settings for all message containing keywords.</Text>}
+          content={
+            <Text variant="b3">
+              Default notification settings for all message containing keywords.
+            </Text>
+          }
         />
       )}
       <SettingTile
         title="Keywords"
-        content={(
+        content={
           <div className="keyword-notification__keyword">
-            <Text variant="b3">Get notification when a message contains keyword.</Text>
+            <Text variant="b3">
+              Get notification when a message contains keyword.
+            </Text>
             <form onSubmit={handleSubmit}>
               <Input name="keywordInput" required />
-              <Button variant="primary" type="submit">Add</Button>
+              <Button variant="primary" type="submit">
+                Add
+              </Button>
             </form>
             {keywordRules.length > 0 && (
               <div>
@@ -230,7 +265,7 @@ function GlobalNotification() {
               </div>
             )}
           </div>
-        )}
+        }
       />
     </div>
   );

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

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

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

@@ -1,18 +1,16 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './ImageLightbox.scss';
+import "./ImageLightbox.scss";
-import FileSaver from 'file-saver';
+import FileSaver from "file-saver";
 
-import Text from '../../atoms/text/Text';
+import Text from "../../atoms/text/Text";
-import RawModal from '../../atoms/modal/RawModal';
+import RawModal from "../../atoms/modal/RawModal";
-import IconButton from '../../atoms/button/IconButton';
+import IconButton from "../../atoms/button/IconButton";
 
-import DownloadSVG from '../../../../public/res/ic/outlined/download.svg';
+import DownloadSVG from "../../../../public/res/ic/outlined/download.svg";
-import ExternalSVG from '../../../../public/res/ic/outlined/external.svg';
+import ExternalSVG from "../../../../public/res/ic/outlined/external.svg";
 
-function ImageLightbox({
+function ImageLightbox({ url, alt, isOpen, onRequestClose }) {
-  url, alt, isOpen, onRequestClose,
-}) {
   const handleDownload = () => {
     FileSaver.saveAs(url, alt);
   };
@@ -26,8 +24,14 @@ function ImageLightbox({
       size="large"
     >
       <div className="image-lightbox__header">
-        <Text variant="b2" weight="medium">{alt}</Text>
+        <Text variant="b2" weight="medium">
-        <IconButton onClick={() => window.open(url)} size="small" src={ExternalSVG} />
+          {alt}
+        </Text>
+        <IconButton
+          onClick={() => window.open(url)}
+          size="small"
+          src={ExternalSVG}
+        />
         <IconButton onClick={handleDownload} size="small" src={DownloadSVG} />
       </div>
       <div className="image-lightbox__content">

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

@@ -1,5 +1,5 @@
-@use '../../partials/flex';
+@use "../../partials/flex";
-@use '../../partials/text';
+@use "../../partials/text";
 
 .image-lightbox__modal {
   box-shadow: none;
@@ -21,7 +21,6 @@
   background-color: var(--bg-overlay-low);
 }
 
-
 .image-lightbox__header > *,
 .image-lightbox__content > * {
   pointer-events: all;

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

@@ -1,75 +1,80 @@
-import React, {
+import React, { useState, useMemo, useReducer, useEffect } from "react";
-  useState, useMemo, useReducer, useEffect,
+import PropTypes from "prop-types";
-} from 'react';
+import "./ImagePack.scss";
-import PropTypes from 'prop-types';
-import './ImagePack.scss';
 
-import initMatrix from '../../../client/initMatrix';
+import initMatrix from "../../../client/initMatrix";
-import { openReusableDialog } from '../../../client/action/navigation';
+import { openReusableDialog } from "../../../client/action/navigation";
-import { suffixRename } from '../../../util/common';
+import { suffixRename } from "../../../util/common";
 
-import Button from '../../atoms/button/Button';
+import Button from "../../atoms/button/Button";
-import Text from '../../atoms/text/Text';
+import Text from "../../atoms/text/Text";
-import Input from '../../atoms/input/Input';
+import Input from "../../atoms/input/Input";
-import Checkbox from '../../atoms/button/Checkbox';
+import Checkbox from "../../atoms/button/Checkbox";
-import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
+import { MenuHeader } from "../../atoms/context-menu/ContextMenu";
 
-import { ImagePack as ImagePackBuilder } from '../../organisms/emoji-board/custom-emoji';
+import { ImagePack as ImagePackBuilder } from "../../organisms/emoji-board/custom-emoji";
-import { confirmDialog } from '../confirm-dialog/ConfirmDialog';
+import { confirmDialog } from "../confirm-dialog/ConfirmDialog";
-import ImagePackProfile from './ImagePackProfile';
+import ImagePackProfile from "./ImagePackProfile";
-import ImagePackItem from './ImagePackItem';
+import ImagePackItem from "./ImagePackItem";
-import ImagePackUpload from './ImagePackUpload';
+import ImagePackUpload from "./ImagePackUpload";
 
-const renameImagePackItem = (shortcode) => new Promise((resolve) => {
+const renameImagePackItem = (shortcode) =>
-  let isCompleted = false;
+  new Promise((resolve) => {
+    let isCompleted = false;
 
-  openReusableDialog(
+    openReusableDialog(
-    <Text variant="s1" weight="medium">Rename</Text>,
+      <Text variant="s1" weight="medium">
-    (requestClose) => (
+        Rename
-      <div style={{ padding: 'var(--sp-normal)' }}>
+      </Text>,
-        <form
+      (requestClose) => (
-          onSubmit={(e) => {
+        <div style={{ padding: "var(--sp-normal)" }}>
-            e.preventDefault();
+          <form
-            const sc = e.target.shortcode.value;
+            onSubmit={(e) => {
-            if (sc.trim() === '') return;
+              e.preventDefault();
-            isCompleted = true;
+              const sc = e.target.shortcode.value;
-            resolve(sc.trim());
+              if (sc.trim() === "") return;
-            requestClose();
+              isCompleted = true;
-          }}
+              resolve(sc.trim());
-        >
+              requestClose();
-          <Input
+            }}
-            value={shortcode}
+          >
-            name="shortcode"
+            <Input
-            label="Shortcode"
+              value={shortcode}
-            autoFocus
+              name="shortcode"
-            required
+              label="Shortcode"
-          />
+              autoFocus
-          <div style={{ height: 'var(--sp-normal)' }} />
+              required
-          <Button variant="primary" type="submit">Rename</Button>
+            />
-        </form>
+            <div style={{ height: "var(--sp-normal)" }} />
-      </div>
+            <Button variant="primary" type="submit">
-    ),
+              Rename
-    () => {
+            </Button>
-      if (!isCompleted) resolve(null);
+          </form>
-    },
+        </div>
-  );
+      ),
-});
+      () => {
+        if (!isCompleted) resolve(null);
+      }
+    );
+  });
 
 function getUsage(usage) {
-  if (usage.includes('emoticon') && usage.includes('sticker')) return 'both';
+  if (usage.includes("emoticon") && usage.includes("sticker")) return "both";
-  if (usage.includes('emoticon')) return 'emoticon';
+  if (usage.includes("emoticon")) return "emoticon";
-  if (usage.includes('sticker')) return 'sticker';
+  if (usage.includes("sticker")) return "sticker";
 
-  return 'both';
+  return "both";
 }
 
 function isGlobalPack(roomId, stateKey) {
   const mx = initMatrix.matrixClient;
-  const globalContent = mx.getAccountData('im.ponies.emote_rooms')?.getContent();
+  const globalContent = mx
-  if (typeof globalContent !== 'object') return false;
+    .getAccountData("im.ponies.emote_rooms")
+    ?.getContent();
+  if (typeof globalContent !== "object") return false;
 
   const { rooms } = globalContent;
-  if (typeof rooms !== 'object') return false;
+  if (typeof rooms !== "object") return false;
 
   return rooms[roomId]?.[stateKey] !== undefined;
 }
@@ -78,13 +83,17 @@ function useRoomImagePack(roomId, stateKey) {
   const mx = initMatrix.matrixClient;
   const room = mx.getRoom(roomId);
 
-  const packEvent = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
+  const packEvent = room.currentState.getStateEvents(
-  const pack = useMemo(() => (
+    "im.ponies.room_emotes",
-    ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent())
+    stateKey
-  ), [room, stateKey]);
+  );
+  const pack = useMemo(
+    () => ImagePackBuilder.parsePack(packEvent.getId(), packEvent.getContent()),
+    [room, stateKey]
+  );
 
   const sendPackContent = (content) => {
-    mx.sendStateEvent(roomId, 'im.ponies.room_emotes', content, stateKey);
+    mx.sendStateEvent(roomId, "im.ponies.room_emotes", content, stateKey);
   };
 
   return {
@@ -95,16 +104,21 @@ function useRoomImagePack(roomId, stateKey) {
 
 function useUserImagePack() {
   const mx = initMatrix.matrixClient;
-  const packEvent = mx.getAccountData('im.ponies.user_emotes');
+  const packEvent = mx.getAccountData("im.ponies.user_emotes");
-  const pack = useMemo(() => (
+  const pack = useMemo(
-    ImagePackBuilder.parsePack(mx.getUserId(), packEvent?.getContent() ?? {
+    () =>
-      pack: { display_name: 'Personal' },
+      ImagePackBuilder.parsePack(
-      images: {},
+        mx.getUserId(),
-    })
+        packEvent?.getContent() ?? {
-  ), []);
+          pack: { display_name: "Personal" },
+          images: {},
+        }
+      ),
+    []
+  );
 
   const sendPackContent = (content) => {
-    mx.setAccountData('im.ponies.user_emotes', content);
+    mx.setAccountData("im.ponies.user_emotes", content);
   };
 
   return {
@@ -117,12 +131,11 @@ function useImagePackHandles(pack, sendPackContent) {
   const [, forceUpdate] = useReducer((count) => count + 1, 0);
 
   const getNewKey = (key) => {
-    if (typeof key !== 'string') return undefined;
+    if (typeof key !== "string") return undefined;
-    let newKey = key?.replace(/\s/g, '_');
+    let newKey = key?.replace(/\s/g, "_");
     if (pack.getImages().get(newKey)) {
-      newKey = suffixRename(
+      newKey = suffixRename(newKey, (suffixedKey) =>
-        newKey,
+        pack.getImages().get(suffixedKey)
-        (suffixedKey) => pack.getImages().get(suffixedKey),
       );
     }
     return newKey;
@@ -141,10 +154,12 @@ function useImagePackHandles(pack, sendPackContent) {
   };
   const handleUsageChange = (newUsage) => {
     const usage = [];
-    if (newUsage === 'emoticon' || newUsage === 'both') usage.push('emoticon');
+    if (newUsage === "emoticon" || newUsage === "both") usage.push("emoticon");
-    if (newUsage === 'sticker' || newUsage === 'both') usage.push('sticker');
+    if (newUsage === "sticker" || newUsage === "both") usage.push("sticker");
     pack.setUsage(usage);
-    pack.getImages().forEach((img) => pack.setImageUsage(img.shortcode, undefined));
+    pack
+      .getImages()
+      .forEach((img) => pack.setImageUsage(img.shortcode, undefined));
 
     sendPackContent(pack.getContent());
     forceUpdate();
@@ -161,10 +176,10 @@ function useImagePackHandles(pack, sendPackContent) {
   };
   const handleDeleteItem = async (key) => {
     const isConfirmed = await confirmDialog(
-      'Delete',
+      "Delete",
       `Are you sure that you want to delete "${key}"?`,
-      'Delete',
+      "Delete",
-      'danger',
+      "danger"
     );
     if (!isConfirmed) return;
     pack.removeImage(key);
@@ -174,8 +189,8 @@ function useImagePackHandles(pack, sendPackContent) {
   };
   const handleUsageItem = (key, newUsage) => {
     const usage = [];
-    if (newUsage === 'emoticon' || newUsage === 'both') usage.push('emoticon');
+    if (newUsage === "emoticon" || newUsage === "both") usage.push("emoticon");
-    if (newUsage === 'sticker' || newUsage === 'both') usage.push('sticker');
+    if (newUsage === "sticker" || newUsage === "both") usage.push("sticker");
     pack.setImageUsage(key, usage);
 
     sendPackContent(pack.getContent());
@@ -205,21 +220,23 @@ function useImagePackHandles(pack, sendPackContent) {
 }
 
 function addGlobalImagePack(mx, roomId, stateKey) {
-  const content = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? {};
+  const content =
+    mx.getAccountData("im.ponies.emote_rooms")?.getContent() ?? {};
   if (!content.rooms) content.rooms = {};
   if (!content.rooms[roomId]) content.rooms[roomId] = {};
   content.rooms[roomId][stateKey] = {};
-  return mx.setAccountData('im.ponies.emote_rooms', content);
+  return mx.setAccountData("im.ponies.emote_rooms", content);
 }
 function removeGlobalImagePack(mx, roomId, stateKey) {
-  const content = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? {};
+  const content =
+    mx.getAccountData("im.ponies.emote_rooms")?.getContent() ?? {};
   if (!content.rooms) return Promise.resolve();
   if (!content.rooms[roomId]) return Promise.resolve();
   delete content.rooms[roomId][stateKey];
   if (Object.keys(content.rooms[roomId]).length === 0) {
     delete content.rooms[roomId];
   }
-  return mx.setAccountData('im.ponies.emote_rooms', content);
+  return mx.setAccountData("im.ponies.emote_rooms", content);
 }
 
 function ImagePack({ roomId, stateKey, handlePackDelete }) {
@@ -247,14 +264,17 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
   };
 
   const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
-  const canChange = room.currentState.hasSufficientPowerLevelFor('state_default', myPowerlevel);
+  const canChange = room.currentState.hasSufficientPowerLevelFor(
+    "state_default",
+    myPowerlevel
+  );
 
   const handleDeletePack = async () => {
     const isConfirmed = await confirmDialog(
-      'Delete Pack',
+      "Delete Pack",
       `Are you sure that you want to delete "${pack.displayName}"?`,
-      'Delete',
+      "Delete",
-      'danger',
+      "danger"
     );
     if (!isConfirmed) return;
     handlePackDelete(stateKey);
@@ -265,18 +285,20 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
   return (
     <div className="image-pack">
       <ImagePackProfile
-        avatarUrl={pack.avatarUrl ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, 'crop') : null}
+        avatarUrl={
-        displayName={pack.displayName ?? 'Unknown'}
+          pack.avatarUrl
+            ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, "crop")
+            : null
+        }
+        displayName={pack.displayName ?? "Unknown"}
         attribution={pack.attribution}
         usage={getUsage(pack.usage)}
         onUsageChange={canChange ? handleUsageChange : null}
         onAvatarChange={canChange ? handleAvatarChange : null}
         onEditProfile={canChange ? handleEditProfile : null}
       />
-      { canChange && (
+      {canChange && <ImagePackUpload onUpload={handleAddItem} />}
-        <ImagePackUpload onUpload={handleAddItem} />
+      {images.length === 0 ? null : (
-      )}
-      { images.length === 0 ? null : (
         <div>
           <div className="image-pack__header">
             <Text variant="b3">Image</Text>
@@ -300,21 +322,27 @@ function ImagePack({ roomId, stateKey, handlePackDelete }) {
         <div className="image-pack__footer">
           {pack.images.size > 2 && (
             <Button onClick={() => setViewMore(!viewMore)}>
-              {
+              {viewMore ? "View less" : `View ${pack.images.size - 2} more`}
-                viewMore
+            </Button>
-                  ? 'View less'
+          )}
-                  : `View ${pack.images.size - 2} more`
+          {handlePackDelete && (
-              }
+            <Button variant="danger" onClick={handleDeletePack}>
+              Delete Pack
             </Button>
           )}
-          { handlePackDelete && <Button variant="danger" onClick={handleDeletePack}>Delete Pack</Button>}
         </div>
       )}
       <div className="image-pack__global">
-        <Checkbox variant="positive" onToggle={handleGlobalChange} isActive={isGlobal} />
+        <Checkbox
+          variant="positive"
+          onToggle={handleGlobalChange}
+          isActive={isGlobal}
+        />
         <div>
           <Text variant="b2">Use globally</Text>
-          <Text variant="b3">Add this pack to your account to use in all rooms.</Text>
+          <Text variant="b3">
+            Add this pack to your account to use in all rooms.
+          </Text>
         </div>
       </div>
     </div>
@@ -351,8 +379,12 @@ function ImagePackUser() {
   return (
     <div className="image-pack">
       <ImagePackProfile
-        avatarUrl={pack.avatarUrl ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, 'crop') : null}
+        avatarUrl={
-        displayName={pack.displayName ?? 'Personal'}
+          pack.avatarUrl
+            ? mx.mxcUrlToHttp(pack.avatarUrl, 42, 42, "crop")
+            : null
+        }
+        displayName={pack.displayName ?? "Personal"}
         attribution={pack.attribution}
         usage={getUsage(pack.usage)}
         onUsageChange={handleUsageChange}
@@ -360,7 +392,7 @@ function ImagePackUser() {
         onEditProfile={handleEditProfile}
       />
       <ImagePackUpload onUpload={handleAddItem} />
-      { images.length === 0 ? null : (
+      {images.length === 0 ? null : (
         <div>
           <div className="image-pack__header">
             <Text variant="b3">Image</Text>
@@ -380,14 +412,10 @@ function ImagePackUser() {
           ))}
         </div>
       )}
-      {(pack.images.size > 2) && (
+      {pack.images.size > 2 && (
         <div className="image-pack__footer">
           <Button onClick={() => setViewMore(!viewMore)}>
-            {
+            {viewMore ? "View less" : `View ${pack.images.size - 2} more`}
-              viewMore
-                ? 'View less'
-                : `View ${pack.images.size - 2} more`
-            }
           </Button>
         </div>
       )}
@@ -400,11 +428,13 @@ function useGlobalImagePack() {
   const mx = initMatrix.matrixClient;
 
   const roomIdToStateKeys = new Map();
-  const globalContent = mx.getAccountData('im.ponies.emote_rooms')?.getContent() ?? { rooms: {} };
+  const globalContent = mx
+    .getAccountData("im.ponies.emote_rooms")
+    ?.getContent() ?? { rooms: {} };
   const { rooms } = globalContent;
 
   Object.keys(rooms).forEach((roomId) => {
-    if (typeof rooms[roomId] !== 'object') return;
+    if (typeof rooms[roomId] !== "object") return;
     const room = mx.getRoom(roomId);
     const stateKeys = Object.keys(rooms[roomId]);
     if (!room || stateKeys.length === 0) return;
@@ -413,11 +443,11 @@ function useGlobalImagePack() {
 
   useEffect(() => {
     const handleEvent = (event) => {
-      if (event.getType() === 'im.ponies.emote_rooms') forceUpdate();
+      if (event.getType() === "im.ponies.emote_rooms") forceUpdate();
     };
-    mx.addListener('accountData', handleEvent);
+    mx.addListener("accountData", handleEvent);
     return () => {
-      mx.removeListener('accountData', handleEvent);
+      mx.removeListener("accountData", handleEvent);
     };
   }, []);
 
@@ -436,29 +466,39 @@ function ImagePackGlobal() {
     <div className="image-pack-global">
       <MenuHeader>Global packs</MenuHeader>
       <div>
-        {
+        {roomIdToStateKeys.size > 0 ? (
-          roomIdToStateKeys.size > 0
+          [...roomIdToStateKeys].map(([roomId, stateKeys]) => {
-            ? [...roomIdToStateKeys].map(([roomId, stateKeys]) => {
+            const room = mx.getRoom(roomId);
-              const room = mx.getRoom(roomId);
+            return stateKeys.map((stateKey) => {
-              return (
+              const data = room.currentState.getStateEvents(
-                stateKeys.map((stateKey) => {
+                "im.ponies.room_emotes",
-                  const data = room.currentState.getStateEvents('im.ponies.room_emotes', stateKey);
+                stateKey
-                  const pack = ImagePackBuilder.parsePack(data?.getId(), data?.getContent());
-                  if (!pack) return null;
-                  return (
-                    <div className="image-pack__global" key={pack.id}>
-                      <Checkbox variant="positive" onToggle={() => handleChange(roomId, stateKey)} isActive />
-                      <div>
-                        <Text variant="b2">{pack.displayName ?? 'Unknown'}</Text>
-                        <Text variant="b3">{room.name}</Text>
-                      </div>
-                    </div>
-                  );
-                })
               );
-            })
+              const pack = ImagePackBuilder.parsePack(
-            : <div className="image-pack-global__empty"><Text>No global packs</Text></div>
+                data?.getId(),
-        }
+                data?.getContent()
+              );
+              if (!pack) return null;
+              return (
+                <div className="image-pack__global" key={pack.id}>
+                  <Checkbox
+                    variant="positive"
+                    onToggle={() => handleChange(roomId, stateKey)}
+                    isActive
+                  />
+                  <div>
+                    <Text variant="b2">{pack.displayName ?? "Unknown"}</Text>
+                    <Text variant="b3">{room.name}</Text>
+                  </div>
+                </div>
+              );
+            });
+          })
+        ) : (
+          <div className="image-pack-global__empty">
+            <Text>No global packs</Text>
+          </div>
+        )}
       </div>
     </div>
   );

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

@@ -1,4 +1,4 @@
-@use '../../partials/flex';
+@use "../../partials/flex";
 
 .image-pack {
   &-item {

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

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

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

@@ -1,5 +1,5 @@
-@use '../../partials/flex';
+@use "../../partials/flex";
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .image-pack-item {
   margin: 0 var(--sp-normal);

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

@@ -1,24 +1,29 @@
-import React, { useState } from 'react';
+import React, { useState } from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './ImagePackProfile.scss';
+import "./ImagePackProfile.scss";
 
-import { openReusableContextMenu } from '../../../client/action/navigation';
+import { openReusableContextMenu } from "../../../client/action/navigation";
-import { getEventCords } from '../../../util/common';
+import { getEventCords } from "../../../util/common";
 
-import Text from '../../atoms/text/Text';
+import Text from "../../atoms/text/Text";
-import Avatar from '../../atoms/avatar/Avatar';
+import Avatar from "../../atoms/avatar/Avatar";
-import Button from '../../atoms/button/Button';
+import Button from "../../atoms/button/Button";
-import IconButton from '../../atoms/button/IconButton';
+import IconButton from "../../atoms/button/IconButton";
-import Input from '../../atoms/input/Input';
+import Input from "../../atoms/input/Input";
-import ImageUpload from '../image-upload/ImageUpload';
+import ImageUpload from "../image-upload/ImageUpload";
-import ImagePackUsageSelector from './ImagePackUsageSelector';
+import ImagePackUsageSelector from "./ImagePackUsageSelector";
 
-import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+import ChevronBottomIC from "../../../../public/res/ic/outlined/chevron-bottom.svg";
-import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
+import PencilIC from "../../../../public/res/ic/outlined/pencil.svg";
 
 function ImagePackProfile({
-  avatarUrl, displayName, attribution, usage,
+  avatarUrl,
-  onUsageChange, onAvatarChange, onEditProfile,
+  displayName,
+  attribution,
+  usage,
+  onUsageChange,
+  onAvatarChange,
+  onEditProfile,
 }) {
   const [isEdit, setIsEdit] = useState(false);
 
@@ -35,8 +40,8 @@ function ImagePackProfile({
 
   const handleUsageSelect = (event) => {
     openReusableContextMenu(
-      'bottom',
+      "bottom",
-      getEventCords(event, '.btn-surface'),
+      getEventCords(event, ".btn-surface"),
       (closeMenu) => (
         <ImagePackUsageSelector
           usage={usage}
@@ -45,48 +50,62 @@ function ImagePackProfile({
             closeMenu();
           }}
         />
-      ),
+      )
     );
   };
 
   return (
     <div className="image-pack-profile">
-      {
+      {onAvatarChange ? (
-        onAvatarChange
+        <ImageUpload
-          ? (
+          bgColor="#555"
-            <ImageUpload
+          text={displayName}
-              bgColor="#555"
+          imageSrc={avatarUrl}
-              text={displayName}
+          size="normal"
-              imageSrc={avatarUrl}
+          onUpload={onAvatarChange}
-              size="normal"
+          onRequestRemove={() => onAvatarChange(undefined)}
-              onUpload={onAvatarChange}
+        />
-              onRequestRemove={() => onAvatarChange(undefined)}
+      ) : (
-            />
+        <Avatar
-          )
+          bgColor="#555"
-          : <Avatar bgColor="#555" text={displayName} imageSrc={avatarUrl} size="normal" />
+          text={displayName}
-      }
+          imageSrc={avatarUrl}
+          size="normal"
+        />
+      )}
       <div className="image-pack-profile__content">
-        {
+        {isEdit ? (
-          isEdit
+          <form onSubmit={handleSubmit}>
-            ? (
+            <Input name="nameInput" label="Name" value={displayName} required />
-              <form onSubmit={handleSubmit}>
+            <Input
-                <Input name="nameInput" label="Name" value={displayName} required />
+              name="attributionInput"
-                <Input name="attributionInput" label="Attribution" value={attribution} resizable />
+              label="Attribution"
-                <div>
+              value={attribution}
-                  <Button variant="primary" type="submit">Save</Button>
+              resizable
-                  <Button onClick={() => setIsEdit(false)}>Cancel</Button>
+            />
-                </div>
+            <div>
-              </form>
+              <Button variant="primary" type="submit">
-            ) : (
+                Save
-              <>
+              </Button>
-                <div>
+              <Button onClick={() => setIsEdit(false)}>Cancel</Button>
-                  <Text>{displayName}</Text>
+            </div>
-                  {onEditProfile && <IconButton size="extra-small" onClick={() => setIsEdit(true)} src={PencilIC} tooltip="Edit" />}
+          </form>
-                </div>
+        ) : (
-                {attribution && <Text variant="b3">{attribution}</Text>}
+          <>
-              </>
+            <div>
-            )
+              <Text>{displayName}</Text>
-        }
+              {onEditProfile && (
+                <IconButton
+                  size="extra-small"
+                  onClick={() => setIsEdit(true)}
+                  src={PencilIC}
+                  tooltip="Edit"
+                />
+              )}
+            </div>
+            {attribution && <Text variant="b3">{attribution}</Text>}
+          </>
+        )}
       </div>
       <div className="image-pack-profile__usage">
         <Text variant="b3">Pack usage</Text>
@@ -95,9 +114,9 @@ function ImagePackProfile({
           iconSrc={onUsageChange ? ChevronBottomIC : null}
         >
           <Text>
-            {usage === 'emoticon' && 'Emoji'}
+            {usage === "emoticon" && "Emoji"}
-            {usage === 'sticker' && 'Sticker'}
+            {usage === "sticker" && "Sticker"}
-            {usage === 'both' && 'Both'}
+            {usage === "both" && "Both"}
           </Text>
         </Button>
       </div>
@@ -116,7 +135,7 @@ ImagePackProfile.propTypes = {
   avatarUrl: PropTypes.string,
   displayName: PropTypes.string.isRequired,
   attribution: PropTypes.string,
-  usage: PropTypes.oneOf(['emoticon', 'sticker', 'both']).isRequired,
+  usage: PropTypes.oneOf(["emoticon", "sticker", "both"]).isRequired,
   onUsageChange: PropTypes.func,
   onAvatarChange: PropTypes.func,
   onEditProfile: PropTypes.func,

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

@@ -1,4 +1,4 @@
-@use '../../partials/flex';
+@use "../../partials/flex";
 
 .image-pack-profile {
   padding: var(--sp-normal);

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

@@ -1,15 +1,15 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef } from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './ImagePackUpload.scss';
+import "./ImagePackUpload.scss";
 
-import initMatrix from '../../../client/initMatrix';
+import initMatrix from "../../../client/initMatrix";
-import { scaleDownImage } from '../../../util/common';
+import { scaleDownImage } from "../../../util/common";
 
-import Text from '../../atoms/text/Text';
+import Text from "../../atoms/text/Text";
-import Button from '../../atoms/button/Button';
+import Button from "../../atoms/button/Button";
-import Input from '../../atoms/input/Input';
+import Input from "../../atoms/input/Input";
-import IconButton from '../../atoms/button/IconButton';
+import IconButton from "../../atoms/button/IconButton";
-import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
+import CirclePlusIC from "../../../../public/res/ic/outlined/circle-plus.svg";
 
 function ImagePackUpload({ onUpload }) {
   const mx = initMatrix.matrixClient;
@@ -23,7 +23,7 @@ function ImagePackUpload({ onUpload }) {
     if (!imgFile) return;
     const { shortcodeInput } = evt.target;
     const shortcode = shortcodeInput.value.trim();
-    if (shortcode === '') return;
+    if (shortcode === "") return;
 
     setProgress(true);
     const image = await scaleDownImage(imgFile, 512, 512);
@@ -32,37 +32,53 @@ function ImagePackUpload({ onUpload }) {
     onUpload(shortcode, url);
     setProgress(false);
     setImgFile(null);
-    shortcodeRef.current.value = '';
+    shortcodeRef.current.value = "";
   };
 
   const handleFileChange = (evt) => {
     const img = evt.target.files[0];
     if (!img) return;
     setImgFile(img);
-    shortcodeRef.current.value = img.name.slice(0, img.name.indexOf('.'));
+    shortcodeRef.current.value = img.name.slice(0, img.name.indexOf("."));
     shortcodeRef.current.focus();
   };
   const handleRemove = () => {
     setImgFile(null);
     inputRef.current.value = null;
-    shortcodeRef.current.value = '';
+    shortcodeRef.current.value = "";
   };
 
   return (
     <form onSubmit={handleSubmit} className="image-pack-upload">
-      <input ref={inputRef} onChange={handleFileChange} style={{ display: 'none' }} type="file" accept=".png, .gif, .webp" required />
+      <input
-      {
+        ref={inputRef}
-        imgFile
+        onChange={handleFileChange}
-          ? (
+        style={{ display: "none" }}
-            <div className="image-pack-upload__file">
+        type="file"
-              <IconButton onClick={handleRemove} src={CirclePlusIC} tooltip="Remove file" />
+        accept=".png, .gif, .webp"
-              <Text>{imgFile.name}</Text>
+        required
-            </div>
+      />
-          )
+      {imgFile ? (
-          : <Button onClick={() => inputRef.current.click()}>Import image</Button>
+        <div className="image-pack-upload__file">
-      }
+          <IconButton
-      <Input forwardRef={shortcodeRef} name="shortcodeInput" placeholder="shortcode" required />
+            onClick={handleRemove}
-      <Button disabled={progress} variant="primary" type="submit">{progress ? 'Uploading...' : 'Upload'}</Button>
+            src={CirclePlusIC}
+            tooltip="Remove file"
+          />
+          <Text>{imgFile.name}</Text>
+        </div>
+      ) : (
+        <Button onClick={() => inputRef.current.click()}>Import image</Button>
+      )}
+      <Input
+        forwardRef={shortcodeRef}
+        name="shortcodeInput"
+        placeholder="shortcode"
+        required
+      />
+      <Button disabled={progress} variant="primary" type="submit">
+        {progress ? "Uploading..." : "Upload"}
+      </Button>
     </form>
   );
 }

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

@@ -1,5 +1,5 @@
-@use '../../partials/dir';
+@use "../../partials/dir";
-@use '../../partials/text';
+@use "../../partials/text";
 
 .image-pack-upload {
   padding: var(--sp-normal);

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

@@ -1,31 +1,31 @@
-import React from 'react';
+import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 
-import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
+import { MenuHeader, MenuItem } from "../../atoms/context-menu/ContextMenu";
-import CheckIC from '../../../../public/res/ic/outlined/check.svg';
+import CheckIC from "../../../../public/res/ic/outlined/check.svg";
 
 function ImagePackUsageSelector({ usage, onSelect }) {
   return (
     <div>
       <MenuHeader>Usage</MenuHeader>
       <MenuItem
-        iconSrc={usage === 'emoticon' ? CheckIC : undefined}
+        iconSrc={usage === "emoticon" ? CheckIC : undefined}
-        variant={usage === 'emoticon' ? 'positive' : 'surface'}
+        variant={usage === "emoticon" ? "positive" : "surface"}
-        onClick={() => onSelect('emoticon')}
+        onClick={() => onSelect("emoticon")}
       >
         Emoji
       </MenuItem>
       <MenuItem
-        iconSrc={usage === 'sticker' ? CheckIC : undefined}
+        iconSrc={usage === "sticker" ? CheckIC : undefined}
-        variant={usage === 'sticker' ? 'positive' : 'surface'}
+        variant={usage === "sticker" ? "positive" : "surface"}
-        onClick={() => onSelect('sticker')}
+        onClick={() => onSelect("sticker")}
       >
         Sticker
       </MenuItem>
       <MenuItem
-        iconSrc={usage === 'both' ? CheckIC : undefined}
+        iconSrc={usage === "both" ? CheckIC : undefined}
-        variant={usage === 'both' ? 'positive' : 'surface'}
+        variant={usage === "both" ? "positive" : "surface"}
-        onClick={() => onSelect('both')}
+        onClick={() => onSelect("both")}
       >
         Both
       </MenuItem>
@@ -34,7 +34,7 @@ function ImagePackUsageSelector({ usage, onSelect }) {
 }
 
 ImagePackUsageSelector.propTypes = {
-  usage: PropTypes.oneOf(['emoticon', 'sticker', 'both']).isRequired,
+  usage: PropTypes.oneOf(["emoticon", "sticker", "both"]).isRequired,
   onSelect: PropTypes.func.isRequired,
 };
 

src/app/molecules/image-upload/ImageUpload.jsx

@@ -1,18 +1,22 @@
-import React, { useState, useRef } from 'react';
+import React, { useState, useRef } from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './ImageUpload.scss';
+import "./ImageUpload.scss";
 
-import initMatrix from '../../../client/initMatrix';
+import initMatrix from "../../../client/initMatrix";
 
-import Text from '../../atoms/text/Text';
+import Text from "../../atoms/text/Text";
-import Avatar from '../../atoms/avatar/Avatar';
+import Avatar from "../../atoms/avatar/Avatar";
-import Spinner from '../../atoms/spinner/Spinner';
+import Spinner from "../../atoms/spinner/Spinner";
-import RawIcon from '../../atoms/system-icons/RawIcon';
+import RawIcon from "../../atoms/system-icons/RawIcon";
 
-import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
+import PlusIC from "../../../../public/res/ic/outlined/plus.svg";
 
 function ImageUpload({
-  text, bgColor, imageSrc, onUpload, onRequestRemove,
+  text,
+  bgColor,
+  imageSrc,
+  onUpload,
+  onRequestRemove,
   size,
 }) {
   const [uploadPromise, setUploadPromise] = useState(null);
@@ -26,7 +30,7 @@ function ImageUpload({
       setUploadPromise(uPromise);
 
       const res = await uPromise;
-      if (typeof res?.content_uri === 'string') onUpload(res.content_uri);
+      if (typeof res?.content_uri === "string") onUpload(res.content_uri);
       setUploadPromise(null);
     } catch {
       setUploadPromise(null);
@@ -50,40 +54,48 @@ function ImageUpload({
           uploadImageRef.current.click();
         }}
       >
-        <Avatar
+        <Avatar imageSrc={imageSrc} text={text} bgColor={bgColor} size={size} />
-          imageSrc={imageSrc}
+        <div
-          text={text}
+          className={`img-upload__process ${
-          bgColor={bgColor}
+            uploadPromise === null ? " img-upload__process--stopped" : ""
-          size={size}
+          }`}
-        />
+        >
-        <div className={`img-upload__process ${uploadPromise === null ? ' img-upload__process--stopped' : ''}`}>
+          {uploadPromise === null &&
-          {uploadPromise === null && (
+            (size === "large" ? (
-            size === 'large'
+              <Text variant="b3" weight="bold">
-              ? <Text variant="b3" weight="bold">Upload</Text>
+                Upload
-              : <RawIcon src={PlusIC} color="white" />
+              </Text>
-          )}
+            ) : (
+              <RawIcon src={PlusIC} color="white" />
+            ))}
           {uploadPromise !== null && <Spinner size="small" />}
         </div>
       </button>
-      { (typeof imageSrc === 'string' || uploadPromise !== null) && (
+      {(typeof imageSrc === "string" || uploadPromise !== null) && (
         <button
           className="img-upload__btn-cancel"
           type="button"
           onClick={uploadPromise === null ? onRequestRemove : cancelUpload}
         >
-          <Text variant="b3">{uploadPromise ? 'Cancel' : 'Remove'}</Text>
+          <Text variant="b3">{uploadPromise ? "Cancel" : "Remove"}</Text>
         </button>
       )}
-      <input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" accept="image/*" />
+      <input
+        onChange={uploadImage}
+        style={{ display: "none" }}
+        ref={uploadImageRef}
+        type="file"
+        accept="image/*"
+      />
     </div>
   );
 }
 
 ImageUpload.defaultProps = {
   text: null,
-  bgColor: 'transparent',
+  bgColor: "transparent",
   imageSrc: null,
-  size: 'large',
+  size: "large",
 };
 
 ImageUpload.propTypes = {
@@ -92,7 +104,7 @@ ImageUpload.propTypes = {
   imageSrc: PropTypes.string,
   onUpload: PropTypes.func.isRequired,
   onRequestRemove: PropTypes.func.isRequired,
-  size: PropTypes.oneOf(['large', 'normal']),
+  size: PropTypes.oneOf(["large", "normal"]),
 };
 
 export default ImageUpload;

src/app/molecules/image-upload/ImageUpload.scss

@@ -1,49 +1,48 @@
 .img-upload__wrapper {
-	display: flex;
+  display: flex;
-	flex-direction: column;
+  flex-direction: column;
-	align-items: center;
+  align-items: center;
 }
 
 .img-upload {
-	display: flex;
+  display: flex;
-	cursor: pointer;
+  cursor: pointer;
-	position: relative;
+  position: relative;
 
-	&__process {
+  &__process {
-		width: 100%;
+    width: 100%;
-		height: 100%;
+    height: 100%;
-		border-radius: var(--bo-radius);
+    border-radius: var(--bo-radius);
-		display: flex;
+    display: flex;
-		justify-content: center;
+    justify-content: center;
-		align-items: center;
+    align-items: center;
-		background-color: rgba(0, 0, 0, .6);
+    background-color: rgba(0, 0, 0, 0.6);
 
-		position: absolute;
+    position: absolute;
-		left: 0;
+    left: 0;
-		right: 0;
+    right: 0;
-		z-index: 1;
+    z-index: 1;
-		& .text {
+    & .text {
-			text-transform: uppercase;
+      text-transform: uppercase;
-			color: white;
+      color: white;
-		}
+    }
-		&--stopped {
+    &--stopped {
-			display: none;
+      display: none;
-		}
+    }
-		& .donut-spinner {
+    & .donut-spinner {
-			border-color: rgb(255, 255, 255, .3);
+      border-color: rgb(255, 255, 255, 0.3);
-    	border-left-color: white;
+      border-left-color: white;
-		}
+    }
-	}
+  }
-	&:hover .img-upload__process--stopped {
+  &:hover .img-upload__process--stopped {
-		display: flex;
+    display: flex;
-	}
+  }
 
-
+  &__btn-cancel {
-	&__btn-cancel {
+    margin-top: var(--sp-extra-tight);
-		margin-top: var(--sp-extra-tight);
+    cursor: pointer;
-		cursor: pointer;
+    & .text {
-		& .text {
+      color: var(--tc-danger-normal);
-			color: var(--tc-danger-normal)
+    }
-		}
+  }
-	}
 }

src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.jsx

@@ -1,18 +1,18 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from "react";
-import './ExportE2ERoomKeys.scss';
+import "./ExportE2ERoomKeys.scss";
 
-import FileSaver from 'file-saver';
+import FileSaver from "file-saver";
 
-import initMatrix from '../../../client/initMatrix';
+import initMatrix from "../../../client/initMatrix";
-import cons from '../../../client/state/cons';
+import cons from "../../../client/state/cons";
-import { encryptMegolmKeyFile } from '../../../util/cryptE2ERoomKeys';
+import { encryptMegolmKeyFile } from "../../../util/cryptE2ERoomKeys";
 
-import Text from '../../atoms/text/Text';
+import Text from "../../atoms/text/Text";
-import Button from '../../atoms/button/Button';
+import Button from "../../atoms/button/Button";
-import Input from '../../atoms/input/Input';
+import Input from "../../atoms/input/Input";
-import Spinner from '../../atoms/spinner/Spinner';
+import Spinner from "../../atoms/spinner/Spinner";
 
-import { useStore } from '../../hooks/useStore';
+import { useStore } from "../../hooks/useStore";
 
 function ExportE2ERoomKeys() {
   const isMountStore = useStore();
@@ -29,14 +29,14 @@ function ExportE2ERoomKeys() {
     if (password !== confirmPasswordRef.current.value) {
       setStatus({
         isOngoing: false,
-        msg: 'Password does not match.',
+        msg: "Password does not match.",
         type: cons.status.ERROR,
       });
       return;
     }
     setStatus({
       isOngoing: true,
-      msg: 'Getting keys...',
+      msg: "Getting keys...",
       type: cons.status.IN_FLIGHT,
     });
     try {
@@ -44,19 +44,22 @@ function ExportE2ERoomKeys() {
       if (isMountStore.getItem()) {
         setStatus({
           isOngoing: true,
-          msg: 'Encrypting keys...',
+          msg: "Encrypting keys...",
           type: cons.status.IN_FLIGHT,
         });
       }
-      const encKeys = await encryptMegolmKeyFile(JSON.stringify(keys), password);
+      const encKeys = await encryptMegolmKeyFile(
+        JSON.stringify(keys),
+        password
+      );
       const blob = new Blob([encKeys], {
-        type: 'text/plain;charset=us-ascii',
+        type: "text/plain;charset=us-ascii",
       });
-      FileSaver.saveAs(blob, 'cinny-keys.txt');
+      FileSaver.saveAs(blob, "cinny-keys.txt");
       if (isMountStore.getItem()) {
         setStatus({
           isOngoing: false,
-          msg: 'Successfully exported all keys.',
+          msg: "Successfully exported all keys.",
           type: cons.status.SUCCESS,
         });
       }
@@ -64,7 +67,7 @@ function ExportE2ERoomKeys() {
       if (isMountStore.getItem()) {
         setStatus({
           isOngoing: false,
-          msg: e.friendlyText || 'Failed to export keys. Please try again.',
+          msg: e.friendlyText || "Failed to export keys. Please try again.",
           type: cons.status.ERROR,
         });
       }
@@ -80,19 +83,45 @@ function ExportE2ERoomKeys() {
 
   return (
     <div className="export-e2e-room-keys">
-      <form className="export-e2e-room-keys__form" onSubmit={(e) => { e.preventDefault(); exportE2ERoomKeys(); }}>
+      <form
-        <Input forwardRef={passwordRef} type="password" placeholder="Password" required />
+        className="export-e2e-room-keys__form"
-        <Input forwardRef={confirmPasswordRef} type="password" placeholder="Confirm password" required />
+        onSubmit={(e) => {
-        <Button disabled={status.isOngoing} variant="primary" type="submit">Export</Button>
+          e.preventDefault();
+          exportE2ERoomKeys();
+        }}
+      >
+        <Input
+          forwardRef={passwordRef}
+          type="password"
+          placeholder="Password"
+          required
+        />
+        <Input
+          forwardRef={confirmPasswordRef}
+          type="password"
+          placeholder="Confirm password"
+          required
+        />
+        <Button disabled={status.isOngoing} variant="primary" type="submit">
+          Export
+        </Button>
       </form>
-      { status.type === cons.status.IN_FLIGHT && (
+      {status.type === cons.status.IN_FLIGHT && (
         <div className="import-e2e-room-keys__process">
           <Spinner size="small" />
           <Text variant="b2">{status.msg}</Text>
         </div>
       )}
-      {status.type === cons.status.SUCCESS && <Text className="import-e2e-room-keys__success" variant="b2">{status.msg}</Text>}
+      {status.type === cons.status.SUCCESS && (
-      {status.type === cons.status.ERROR && <Text className="import-e2e-room-keys__error" variant="b2">{status.msg}</Text>}
+        <Text className="import-e2e-room-keys__success" variant="b2">
+          {status.msg}
+        </Text>
+      )}
+      {status.type === cons.status.ERROR && (
+        <Text className="import-e2e-room-keys__error" variant="b2">
+          {status.msg}
+        </Text>
+      )}
     </div>
   );
 }

src/app/molecules/import-export-e2e-room-keys/ExportE2ERoomKeys.scss

@@ -24,5 +24,4 @@
     margin-top: var(--sp-tight);
     color: var(--tc-danger-high);
   }
-
 }

src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.jsx

@@ -1,19 +1,19 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from "react";
-import './ImportE2ERoomKeys.scss';
+import "./ImportE2ERoomKeys.scss";
 
-import initMatrix from '../../../client/initMatrix';
+import initMatrix from "../../../client/initMatrix";
-import cons from '../../../client/state/cons';
+import cons from "../../../client/state/cons";
-import { decryptMegolmKeyFile } from '../../../util/cryptE2ERoomKeys';
+import { decryptMegolmKeyFile } from "../../../util/cryptE2ERoomKeys";
 
-import Text from '../../atoms/text/Text';
+import Text from "../../atoms/text/Text";
-import IconButton from '../../atoms/button/IconButton';
+import IconButton from "../../atoms/button/IconButton";
-import Button from '../../atoms/button/Button';
+import Button from "../../atoms/button/Button";
-import Input from '../../atoms/input/Input';
+import Input from "../../atoms/input/Input";
-import Spinner from '../../atoms/spinner/Spinner';
+import Spinner from "../../atoms/spinner/Spinner";
 
-import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
+import CirclePlusIC from "../../../../public/res/ic/outlined/circle-plus.svg";
 
-import { useStore } from '../../hooks/useStore';
+import { useStore } from "../../hooks/useStore";
 
 function ImportE2ERoomKeys() {
   const isMountStore = useStore();
@@ -32,7 +32,7 @@ function ImportE2ERoomKeys() {
       if (isMountStore.getItem()) {
         setStatus({
           isOngoing: true,
-          msg: 'Decrypting file...',
+          msg: "Decrypting file...",
           type: cons.status.IN_FLIGHT,
         });
       }
@@ -41,7 +41,7 @@ function ImportE2ERoomKeys() {
       if (isMountStore.getItem()) {
         setStatus({
           isOngoing: true,
-          msg: 'Decrypting messages...',
+          msg: "Decrypting messages...",
           type: cons.status.IN_FLIGHT,
         });
       }
@@ -49,7 +49,7 @@ function ImportE2ERoomKeys() {
       if (isMountStore.getItem()) {
         setStatus({
           isOngoing: false,
-          msg: 'Successfully imported all keys.',
+          msg: "Successfully imported all keys.",
           type: cons.status.SUCCESS,
         });
         inputRef.current.value = null;
@@ -59,7 +59,7 @@ function ImportE2ERoomKeys() {
       if (isMountStore.getItem()) {
         setStatus({
           isOngoing: false,
-          msg: e.friendlyText || 'Failed to decrypt keys. Please try again.',
+          msg: e.friendlyText || "Failed to decrypt keys. Please try again.",
           type: cons.status.ERROR,
         });
       }
@@ -68,7 +68,7 @@ function ImportE2ERoomKeys() {
 
   const importE2ERoomKeys = () => {
     const password = passwordRef.current.value;
-    if (password === '' || keyFile === null) return;
+    if (password === "" || keyFile === null) return;
     if (status.isOngoing) return;
 
     tryDecrypt(keyFile, password);
@@ -76,7 +76,7 @@ function ImportE2ERoomKeys() {
 
   const handleFileChange = (e) => {
     const file = e.target.files.item(0);
-    passwordRef.current.value = '';
+    passwordRef.current.value = "";
     setKeyFile(file);
     setStatus({
       isOngoing: false,
@@ -105,27 +105,59 @@ function ImportE2ERoomKeys() {
 
   return (
     <div className="import-e2e-room-keys">
-      <input ref={inputRef} onChange={handleFileChange} style={{ display: 'none' }} type="file" />
+      <input
+        ref={inputRef}
+        onChange={handleFileChange}
+        style={{ display: "none" }}
+        type="file"
+      />
 
-      <form className="import-e2e-room-keys__form" onSubmit={(e) => { e.preventDefault(); importE2ERoomKeys(); }}>
+      <form
-        { keyFile !== null && (
+        className="import-e2e-room-keys__form"
+        onSubmit={(e) => {
+          e.preventDefault();
+          importE2ERoomKeys();
+        }}
+      >
+        {keyFile !== null && (
           <div className="import-e2e-room-keys__file">
-            <IconButton onClick={removeImportKeysFile} src={CirclePlusIC} tooltip="Remove file" />
+            <IconButton
+              onClick={removeImportKeysFile}
+              src={CirclePlusIC}
+              tooltip="Remove file"
+            />
             <Text>{keyFile.name}</Text>
           </div>
         )}
-        {keyFile === null && <Button onClick={() => inputRef.current.click()}>Import keys</Button>}
+        {keyFile === null && (
-        <Input forwardRef={passwordRef} type="password" placeholder="Password" required />
+          <Button onClick={() => inputRef.current.click()}>Import keys</Button>
-        <Button disabled={status.isOngoing} variant="primary" type="submit">Decrypt</Button>
+        )}
+        <Input
+          forwardRef={passwordRef}
+          type="password"
+          placeholder="Password"
+          required
+        />
+        <Button disabled={status.isOngoing} variant="primary" type="submit">
+          Decrypt
+        </Button>
       </form>
-      { status.type === cons.status.IN_FLIGHT && (
+      {status.type === cons.status.IN_FLIGHT && (
         <div className="import-e2e-room-keys__process">
           <Spinner size="small" />
           <Text variant="b2">{status.msg}</Text>
         </div>
       )}
-      {status.type === cons.status.SUCCESS && <Text className="import-e2e-room-keys__success" variant="b2">{status.msg}</Text>}
+      {status.type === cons.status.SUCCESS && (
-      {status.type === cons.status.ERROR && <Text className="import-e2e-room-keys__error" variant="b2">{status.msg}</Text>}
+        <Text className="import-e2e-room-keys__success" variant="b2">
+          {status.msg}
+        </Text>
+      )}
+      {status.type === cons.status.ERROR && (
+        <Text className="import-e2e-room-keys__error" variant="b2">
+          {status.msg}
+        </Text>
+      )}
     </div>
   );
 }

src/app/molecules/import-export-e2e-room-keys/ImportE2ERoomKeys.scss

@@ -1,5 +1,5 @@
-@use '../../partials/text';
+@use "../../partials/text";
-@use '../../partials/dir';
+@use "../../partials/dir";
 
 .import-e2e-room-keys {
   &__file {
@@ -34,7 +34,6 @@
     display: flex;
     margin-top: var(--sp-extra-tight);
 
-    
     & .input-container {
       flex: 1;
       margin: 0 var(--sp-tight);

src/app/molecules/media/Media.jsx

@@ -1,20 +1,20 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
-import './Media.scss';
+import "./Media.scss";
 
-import encrypt from 'browser-encrypt-attachment';
+import encrypt from "browser-encrypt-attachment";
 
-import { BlurhashCanvas } from 'react-blurhash';
+import { BlurhashCanvas } from "react-blurhash";
-import Text from '../../atoms/text/Text';
+import Text from "../../atoms/text/Text";
-import IconButton from '../../atoms/button/IconButton';
+import IconButton from "../../atoms/button/IconButton";
-import Spinner from '../../atoms/spinner/Spinner';
+import Spinner from "../../atoms/spinner/Spinner";
-import ImageLightbox from '../image-lightbox/ImageLightbox';
+import ImageLightbox from "../image-lightbox/ImageLightbox";
 
-import DownloadSVG from '../../../../public/res/ic/outlined/download.svg';
+import DownloadSVG from "../../../../public/res/ic/outlined/download.svg";
-import ExternalSVG from '../../../../public/res/ic/outlined/external.svg';
+import ExternalSVG from "../../../../public/res/ic/outlined/external.svg";
-import PlaySVG from '../../../../public/res/ic/outlined/play.svg';
+import PlaySVG from "../../../../public/res/ic/outlined/play.svg";
 
-import { getBlobSafeMimeType } from '../../../util/mimetypes';
+import { getBlobSafeMimeType } from "../../../util/mimetypes";
 
 async function getDecryptedBlob(response, type, decryptData) {
   const arrayBuffer = await response.arrayBuffer();
@@ -25,9 +25,11 @@ async function getDecryptedBlob(response, type, decryptData) {
 
 async function getUrl(link, type, decryptData) {
   try {
-    const response = await fetch(link, { method: 'GET' });
+    const response = await fetch(link, { method: "GET" });
     if (decryptData !== null) {
-      return URL.createObjectURL(await getDecryptedBlob(response, type, decryptData));
+      return URL.createObjectURL(
+        await getDecryptedBlob(response, type, decryptData)
+      );
     }
     const blob = await response.blob();
     return URL.createObjectURL(blob);
@@ -41,10 +43,7 @@ function getNativeHeight(width, height, maxWidth = 296) {
   return scale * height;
 }
 
-function FileHeader({
+function FileHeader({ name, link, external, file, type }) {
-  name, link, external,
-  file, type,
-}) {
   const [url, setUrl] = useState(null);
 
   async function getFile() {
@@ -61,20 +60,25 @@ function FileHeader({
   }
   return (
     <div className="file-header">
-      <Text className="file-name" variant="b3">{name}</Text>
+      <Text className="file-name" variant="b3">
-      { link !== null && (
+        {name}
+      </Text>
+      {link !== null && (
         <>
-          {
+          {external && (
-            external && (
+            <IconButton
-              <IconButton
+              size="extra-small"
-                size="extra-small"
+              tooltip="Open in new tab"
-                tooltip="Open in new tab"
+              src={ExternalSVG}
-                src={ExternalSVG}
+              onClick={() => window.open(url || link)}
-                onClick={() => window.open(url || link)}
+            />
-              />
+          )}
-            )
+          <a
-          }
+            href={url || link}
-          <a href={url || link} download={name} target="_blank" rel="noreferrer">
+            download={name}
+            target="_blank"
+            rel="noreferrer"
+          >
             <IconButton
               size="extra-small"
               tooltip="Download"
@@ -100,9 +104,7 @@ FileHeader.propTypes = {
   type: PropTypes.string.isRequired,
 };
 
-function File({
+function File({ name, link, file, type }) {
-  name, link, file, type,
-}) {
   return (
     <div className="file-container">
       <FileHeader name={name} link={link} file={file} type={type} />
@@ -111,7 +113,7 @@ function File({
 }
 File.defaultProps = {
   file: null,
-  type: '',
+  type: "",
 };
 File.propTypes = {
   name: PropTypes.string.isRequired,
@@ -120,9 +122,7 @@ File.propTypes = {
   file: PropTypes.shape({}),
 };
 
-function Image({
+function Image({ name, width, height, link, file, type, blurhash }) {
-  name, width, height, link, file, type, blurhash,
-}) {
   const [url, setUrl] = useState(null);
   const [blur, setBlur] = useState(true);
   const [lightbox, setLightbox] = useState(false);
@@ -149,17 +149,19 @@ function Image({
     <>
       <div className="file-container">
         <div
-          style={{ height: width !== null ? getNativeHeight(width, height) : 'unset' }}
+          style={{
+            height: width !== null ? getNativeHeight(width, height) : "unset",
+          }}
           className="image-container"
           role="button"
           tabIndex="0"
           onClick={toggleLightbox}
           onKeyDown={toggleLightbox}
         >
-          { blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
+          {blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
-          { url !== null && (
+          {url !== null && (
             <img
-              style={{ display: blur ? 'none' : 'unset' }}
+              style={{ display: blur ? "none" : "unset" }}
               onLoad={() => setBlur(false)}
               src={url || link}
               alt={name}
@@ -182,8 +184,8 @@ Image.defaultProps = {
   file: null,
   width: null,
   height: null,
-  type: '',
+  type: "",
-  blurhash: '',
+  blurhash: "",
 };
 Image.propTypes = {
   name: PropTypes.string.isRequired,
@@ -195,9 +197,7 @@ Image.propTypes = {
   blurhash: PropTypes.string,
 };
 
-function Sticker({
+function Sticker({ name, height, width, link, file, type }) {
-  name, height, width, link, file, type,
-}) {
   const [url, setUrl] = useState(null);
 
   useEffect(() => {
@@ -214,14 +214,19 @@ function Sticker({
   }, []);
 
   return (
-    <div className="sticker-container" style={{ height: width !== null ? getNativeHeight(width, height, 128) : 'unset' }}>
+    <div
-      { url !== null && <img src={url || link} title={name} alt={name} />}
+      className="sticker-container"
+      style={{
+        height: width !== null ? getNativeHeight(width, height, 128) : "unset",
+      }}
+    >
+      {url !== null && <img src={url || link} title={name} alt={name} />}
     </div>
   );
 }
 Sticker.defaultProps = {
   file: null,
-  type: '',
+  type: "",
   width: null,
   height: null,
 };
@@ -234,9 +239,7 @@ Sticker.propTypes = {
   type: PropTypes.string,
 };
 
-function Audio({
+function Audio({ name, link, type, file }) {
-  name, link, type, file,
-}) {
   const [isLoading, setIsLoading] = useState(false);
   const [url, setUrl] = useState(null);
 
@@ -252,11 +255,22 @@ function Audio({
 
   return (
     <div className="file-container">
-      <FileHeader name={name} link={file !== null ? url : url || link} type={type} external />
+      <FileHeader
+        name={name}
+        link={file !== null ? url : url || link}
+        type={type}
+        external
+      />
       <div className="audio-container">
-        { url === null && isLoading && <Spinner size="small" /> }
+        {url === null && isLoading && <Spinner size="small" />}
-        { url === null && !isLoading && <IconButton onClick={handlePlayAudio} tooltip="Play audio" src={PlaySVG} />}
+        {url === null && !isLoading && (
-        { url !== null && (
+          <IconButton
+            onClick={handlePlayAudio}
+            tooltip="Play audio"
+            src={PlaySVG}
+          />
+        )}
+        {url !== null && (
           /* eslint-disable-next-line jsx-a11y/media-has-caption */
           <audio autoPlay controls>
             <source src={url} type={getBlobSafeMimeType(type)} />
@@ -268,7 +282,7 @@ function Audio({
 }
 Audio.defaultProps = {
   file: null,
-  type: '',
+  type: "",
 };
 Audio.propTypes = {
   name: PropTypes.string.isRequired,
@@ -278,8 +292,16 @@ Audio.propTypes = {
 };
 
 function Video({
-  name, link, thumbnail, thumbnailFile, thumbnailType,
+  name,
-  width, height, file, type, blurhash,
+  link,
+  thumbnail,
+  thumbnailFile,
+  thumbnailType,
+  width,
+  height,
+  file,
+  type,
+  blurhash,
 }) {
   const [isLoading, setIsLoading] = useState(false);
   const [url, setUrl] = useState(null);
@@ -312,21 +334,37 @@ function Video({
 
   return (
     <div className="file-container">
-      <FileHeader name={name} link={file !== null ? url : url || link} type={type} external />
+      <FileHeader
+        name={name}
+        link={file !== null ? url : url || link}
+        type={type}
+        external
+      />
       <div
         style={{
-          height: width !== null ? getNativeHeight(width, height) : 'unset',
+          height: width !== null ? getNativeHeight(width, height) : "unset",
         }}
         className="video-container"
       >
-        { url === null ? (
+        {url === null ? (
           <>
-            { blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
+            {blurhash && blur && <BlurhashCanvas hash={blurhash} punch={1} />}
-            { thumbUrl !== null && (
+            {thumbUrl !== null && (
-              <img style={{ display: blur ? 'none' : 'unset' }} src={thumbUrl} onLoad={() => setBlur(false)} alt={name} />
+              <img
+                style={{ display: blur ? "none" : "unset" }}
+                src={thumbUrl}
+                onLoad={() => setBlur(false)}
+                alt={name}
+              />
             )}
             {isLoading && <Spinner size="small" />}
-            {!isLoading && <IconButton onClick={handlePlayVideo} tooltip="Play video" src={PlaySVG} />}
+            {!isLoading && (
+              <IconButton
+                onClick={handlePlayVideo}
+                tooltip="Play video"
+                src={PlaySVG}
+              />
+            )}
           </>
         ) : (
           /* eslint-disable-next-line jsx-a11y/media-has-caption */
@@ -345,7 +383,7 @@ Video.defaultProps = {
   thumbnail: null,
   thumbnailType: null,
   thumbnailFile: null,
-  type: '',
+  type: "",
   blurhash: null,
 };
 Video.propTypes = {
@@ -361,6 +399,4 @@ Video.propTypes = {
   blurhash: PropTypes.string,
 };
 
-export {
+export { File, Image, Sticker, Audio, Video };
-  File, Image, Sticker, Audio, Video,
-};

src/app/molecules/media/Media.scss

@@ -1,4 +1,4 @@
-@use '../../partials/text';
+@use "../../partials/text";
 
 .file-header {
   display: flex;