v1.7.0

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

.github/ISSUE_TEMPLATE/bug_report.md

@@ -27,6 +27,7 @@ If applicable, add screenshots to help explain your problem.
  - OS: [e.g. Windows, MacOS]
  - Browser: [e.g. chrome, firefox]
  - Version: [e.g. 3.22]
+ - Matrix homeserver: [e.g. matrix.org]
 
 #### Additional context
 Add any other context about the problem here.

CONTRIBUTING.md

@@ -1,9 +1,8 @@
-<!-- omit in toc -->
 # Contributing to Cinny
 
 First off, thanks for taking the time to contribute! ❤️
 
-All types of contributions are encouraged and valued. See the [Table of Contents](#table-of-contents) for different ways to help and details about how this project handles them. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉
+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
@@ -12,128 +11,29 @@ All types of contributions are encouraged and valued. See the [Table of Contents
 > - Mention the project at local meetups and tell your friends/colleagues
 > - [Donate to us](https://cinny.in/#sponsor)
 
-<!-- omit in toc -->
-## Table of Contents
+## Bug reports
 
-- [I Have a Question](#i-have-a-question)
-- [I Want To Contribute](#i-want-to-contribute)
-  - [Reporting Bugs](#reporting-bugs)
-  - [Suggesting Enhancements](#suggesting-enhancements)
-  - [Your First Code Contribution](#your-first-code-contribution)
-- [Styleguides](#styleguides)
-  - [Commit Messages](#commit-messages)
-  - [Coding conventions](#coding-conventions)
+Bug reports and feature suggestions must use descriptive and concise titles and be submitted to [GitHub Issues](https://github.com/ajbura/cinny/issues). Please use the search function to make sure that you are not submitting duplicates, and that a similar report or request has not already been resolved or rejected.
 
-## I Have a Question
+## Pull requests
 
-Before you ask a question, it is best to search for existing [Issues](https://github.com/ajbura/cinny/issues) that might help you. In case you have found a suitable issue and still need clarification, you can write your question in this issue.
-
-If you then still feel the need to ask a question and need clarification, we recommend the following:
-
-- Ask in our [Matrix room](https://matrix.to/#/#cinny:matrix.org) or [IRC channel](https://web.libera.chat/?channel=#cinny).
-- If no one respond in our channel, please open an [Issue](https://github.com/ajbura/cinny/issues/new).
-- Provide as much context as you can about what you're running into.
-- Provide project and platform versions (nodejs, npm, etc), depending on what seems relevant.
-
-We will then take care of the issue as soon as possible.
-
-
-## I Want To Contribute
-
-> ### Legal Notice <!-- omit in toc -->
+> ### 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.
 
-### Reporting Bugs
+**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.
 
-<!-- omit in toc -->
-#### Before Submitting a Bug Report
+**Please use clean, concise titles for your pull requests.** We use commit squashing, so the final commit in the dev branch will carry the title of the pull request. For easier sorting in changelog, start your pull request titles using one of the verbs "Add", "Change", "Remove", or "Fix" (present tense).
 
-A good bug report shouldn't leave others needing to chase you up for more information. Therefore, we ask you to investigate carefully, collect information and describe the issue in detail in your report. Please complete the following steps in advance to help us fix any potential bug as fast as possible.
+Example:
 
-- Make sure that you are using the latest version.
-- Determine if your bug is really a bug and not an error on your side. If you are looking for support, you might want to check [this section](#i-have-a-question)).
-- To see if other users have experienced (and potentially already solved) the same issue you are having, check if there is not already a bug report existing for your bug or error in the [bug tracker](https://github.com/ajbura/cinny/issues?q=label%3Abug).
-- Collect information about the bug:
-  - OS, Platform and Version (Windows, Linux, macOS, x86, ARM)
-  - Possibly your input and the output
-  - Can you reliably reproduce the issue?
+|Not ideal|Better|
+|---|----|
+|Fixed markAllAsRead in RoomTimeline|Fix read marker when paginating room timeline|
 
-<!-- omit in toc -->
-#### How Do I Submit a Good Bug Report?
+It is not always possible to phrase every change in such a manner, but it is desired.
 
-> You must never report security related issues, vulnerabilities or bugs to the issue tracker, or elsewhere in public. Instead sensitive bugs must be sent by email to <cinnyapp@gmail.com>.
+**The smaller the set of changes in the pull request is, the quicker it can be reviewed and merged.** Splitting tasks into multiple smaller pull requests is often preferable.
 
-We use GitHub issues to track bugs and errors. If you run into an issue with the project:
+Also, we use [ESLint](https://eslint.org/) for clean and stylistically consistent code syntax, so make sure your pull request follow it.
 
-- Open an [Issue](https://github.com/ajbura/cinny/issues/new). (Since we can't be sure at this point whether it is a bug or not, we ask you not to talk about a bug yet and not to label the issue.)
-- Explain the behavior you would expect and the actual behavior.
-- Please provide as much context as possible and describe the *reproduction steps* that someone else can follow to recreate the issue on their own. For good bug reports you should isolate the problem and create a reduced test case.
-- Provide the information you collected in the previous section.
-
-Once it's filed:
-
-- The project team will label the issue accordingly.
-- A team member will try to reproduce the issue with your provided steps. If there are no reproduction steps or no obvious way to reproduce the issue, the team will ask you for those steps and mark the issue as `needs-repro`. Bugs with the `needs-repro` tag will not be addressed until they are reproduced.
-- If the team is able to reproduce the issue, it will be marked `needs-fix`, as well as possibly other tags (such as `critical`), and the issue will be left to be [implemented by someone](#your-first-code-contribution).
-
-
-### Suggesting Enhancements
-
-This section guides you through submitting an enhancement suggestion for Cinny, **including completely new features and minor improvements to existing functionality**. Following these guidelines will help maintainers and the community to understand your suggestion and find related suggestions.
-
-<!-- omit in toc -->
-#### Before Submitting an Enhancement
-
-- Make sure that you are using the latest version.
-- Perform a [search](https://github.com/ajbura/cinny/issues) to see if the enhancement has already been suggested. If it has, add a comment to the existing issue instead of opening a new one.
-- Find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the project's developers of the merits of this feature. Keep in mind that we want features that will be useful to the majority of our users and not just a small subset.
-
-<!-- omit in toc -->
-#### How Do I Submit a Good Enhancement Suggestion?
-
-Enhancement suggestions are tracked as [GitHub issues](https://github.com/ajbura/cinny/issues).
-
-- Use a **clear and descriptive title** for the issue to identify the suggestion.
-- Provide a **step-by-step description of the suggested enhancement** in as many details as possible.
-- **Describe the current behavior** and **explain which behavior you expected to see instead** and why. At this point you can also tell which alternatives do not work for you.
-- You may want to **include screenshots and animated GIFs** which help you demonstrate the steps or point out the part which the suggestion is related to. You can use [this tool](https://www.cockos.com/licecap/) to record GIFs on macOS and Windows, and [this tool](https://github.com/colinkeenan/silentcast) on Linux.
-- **Explain why this enhancement would be useful** to most Cinny users. You may also want to point out the other projects that solved it better and which could serve as inspiration.
-
-### Your First Code Contribution
-Please send a [GitHub Pull Request to cinny](https://github.com/ajbura/cinny/pull/new/master) with a clear list of what you've done (read more about [pull requests](http://help.github.com/pull-requests/)).
-
-When proposing a PR:
-
-- Describe what problem it solves, what side effects come with it.
-- Adding some screenshots will help.
-- Add some documentation if relevant.
-- Add some comments around blocks/functions if relevant.
-
-Some reasons why a PR could be refused:
-
-- PR is not meeting one of the previous points.
-- PR is not meeting project goals.
-- PR is conflicting with another PR, and the latter is being preferred.
-- PR slows down Cinny, or it obviously does too many
-  computations for the task being accomplished. It needs to be optimized.
-- PR is using copy-n-paste-programming. It needs to be factorized.
-- PR contains commented code: remove it.
-- PR adds new features or changes the behavior of Cinny without
-  having be approved by the current project owners first.
-- PR is too big and needs to be splitted in many smaller ones.
-- PR contains unnecessary "space/indentations fixes".
-
-If a PR stays in a stale/WIP/POC state for too long, it may be closed
-at any time.
-
-
-## Styleguides
-### Commit Messages
-Always write a clear log message for your commits. One-line messages are fine for small changes, but bigger changes should look like this:
-
-    $ git commit -m "A brief summary of the commit
-    > 
-    > A paragraph describing what changed and its impact."
-
-### Coding conventions
-We use [ESLint](https://eslint.org/) for clean and stylistically consistent code syntax.
+**For any query or design discussion, join our [Matrix room](https://matrix.to/#/#cinny:matrix.org).**

README.md

@@ -24,11 +24,12 @@ You can serve the application with a webserver of your choosing by simply copyin
 Execute the following commands to compile the app from its source code:
 
 ```sh
-npm install # Installs all dependencies
+npm ci # Installs all dependencies
 npm run build # Compiles the app into the dist/ directory
 ```
 
-You can then copy the files to a webserver's webroot of your choice. 
+You can then copy the files to a webserver's webroot of your choice.
+
 To serve a development version of the app locally for testing, you may also use the command `npm start`.
 
 ### Running with Docker

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "cinny",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "cinny",
-      "version": "1.6.0",
+      "version": "1.7.0",
       "license": "MIT",
       "dependencies": {
         "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Yet another matrix client",
   "main": "index.js",
   "engines": {

public/index.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 user-scalable=no">
-    <link href="https://api.fontshare.com/css?f[]=supreme@300,301,400,401,500,501,700,701&display=swap" rel="stylesheet">
     <title>Cinny</title>
     <meta name="name"        content="Cinny">
     <meta name="author"      content="Ajay Bura">

public/res/fonts/roboto/LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

public/res/ic/outlined/check.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<polygon points="9.5,14.1 6,10.6 4.6,12 8.1,15.5 9.5,16.9 19.4,7 18,5.6 "/>
+</svg>

public/res/ic/outlined/hash-globe.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<polygon points="16,12 14,12 14,14 10,14 10,10 12,10 12,8 10,8 10,3 8,3 8,8 3,8 3,10 8,10 8,14 3,14 3,16 8,16 8,21 10,21 10,16 
+		14,16 14,21 16,21 16,16 21,16 21,14 16,14 	"/>
+	<path d="M18.5,1C16,1,14,3,14,5.5s2,4.5,4.5,4.5S23,8,23,5.5S21,1,18.5,1z M17.5,7C17.5,7,17.5,7,17.5,7c-0.2-0.1-0.3-0.1-0.3-0.2
+		c-0.6-0.5-1.7-1.1-1.8-2c-0.1-0.7,0.8-1.6,1.3-2c0.8-0.6,2.3-1.1,3.2-0.5c0.6,0.4-1.2,1-1.4,1.3c-0.3,0.4-0.3,0.9-0.3,1.4
+		c0,0.5,0.1,1.2-0.2,1.6C17.9,6.9,17.7,7,17.5,7z M20.8,7.9c-0.4,0.3-0.9,0.2-1.3,0.5c-0.1,0.1-0.2,0.2-0.3,0.2
+		c-0.2,0.1-0.5-0.1-0.5-0.3c-0.3-0.8,0.3-1.2,0.9-1.3c0.3,0,0.7,0,1,0c0.2,0,0.4,0.1,0.4,0.3C21.1,7.5,20.9,7.7,20.8,7.9z"/>
+</g>
+</svg>

public/res/ic/outlined/shield-user.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M12,2L3,6v7c0,5,4,9,9,9c5,0,9-4,9-9V6L12,2z M19,13c0,3.9-3.1,7-7,7s-7-3.1-7-7V7.3l7-3.1l7,3.1V13z"/>
+	<circle cx="12" cy="9" r="2"/>
+	<path d="M15,16H9v-1c0-1.7,1.3-3,3-3h0c1.7,0,3,1.3,3,3V16z"/>
+</g>
+</svg>

public/res/ic/outlined/space-globe.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<path d="M15.4,13.7L14,14l-0.2,1.4c-0.4,2.8-1.3,4.2-1.7,4.6c-0.4-0.3-1.3-1.8-1.7-4.6L10,14l-1.4-0.2c-2.8-0.4-4.2-1.3-4.6-1.7
+		c0.3-0.4,1.8-1.3,4.6-1.7L10,10l0.2-1.4c0.4-2.8,1.3-4.2,1.7-4.6V2c-1.7,0-3.1,2.6-3.7,6.3C4.6,8.9,2,10.3,2,12s2.6,3.1,6.3,3.7
+		c0.6,3.7,2,6.3,3.7,6.3s3.1-2.6,3.7-6.3c3.7-0.6,6.3-2,6.3-3.7h-2.1C19.6,12.4,18.2,13.3,15.4,13.7z"/>
+	<path d="M18.5,1C16,1,14,3,14,5.5s2,4.5,4.5,4.5S23,8,23,5.5S21,1,18.5,1z M17.5,7C17.5,7,17.5,7,17.5,7c-0.2-0.1-0.3-0.1-0.3-0.2
+		c-0.6-0.5-1.7-1.1-1.8-2c-0.1-0.7,0.8-1.6,1.3-2c0.8-0.6,2.3-1.1,3.2-0.5c0.6,0.4-1.2,1-1.4,1.3c-0.3,0.4-0.3,0.9-0.3,1.4
+		c0,0.5,0.1,1.2-0.2,1.6C17.9,6.9,17.7,7,17.5,7z M20.8,7.9c-0.4,0.3-0.9,0.2-1.3,0.5c-0.1,0.1-0.2,0.2-0.3,0.2
+		c-0.2,0.1-0.5-0.1-0.5-0.3c-0.3-0.8,0.3-1.2,0.9-1.3c0.3,0,0.7,0,1,0c0.2,0,0.4,0.1,0.4,0.3C21.1,7.5,20.9,7.7,20.8,7.9z"/>
+</g>
+</svg>

public/res/svg/image-broken.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<g>
+		<polygon fill="#7F7F7F" points="20,7 20,5 18,5 18,7 16,7 16,5 18,5 18,3 16,3 16,2 3,2 3,22 11,22 11,20 19,12 21,12 21,7 		"/>
+		<polygon fill="#7F7F7F" points="19,16 21,16 21,22 15,22 15,20 19,20 		"/>
+	</g>
+	<polygon fill="#6FBEFF" points="19,9 14,9 14,4 5,4 5,20 11,20 13,20 13,18 15,18 15,16 17,16 17,14 19,14 	"/>
+	<polygon fill="#FFFFFF" points="7,10 12,10 12,8 10,8 10,7 8,7 8,8 7,8 	"/>
+	<g>
+		<rect x="17" y="18" fill="#00C72C" width="2" height="2"/>
+		<polygon fill="#00C72C" points="5,20 5,18 7,18 7,16 9,16 9,14 11,14 11,12 13,12 13,14 15,14 15,18 13,18 13,20 		"/>
+	</g>
+</g>
+</svg>

src/app/atoms/avatar/Avatar.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import './Avatar.scss';
 
@@ -7,32 +7,31 @@ import { twemojify } from '../../../util/twemojify';
 import Text from '../text/Text';
 import RawIcon from '../system-icons/RawIcon';
 
+import ImageBrokenSVG from '../../../../public/res/svg/image-broken.svg';
+
 function Avatar({
-  text, bgColor, iconSrc, imageSrc, size,
+  text, bgColor, iconSrc, iconColor, imageSrc, size,
 }) {
-  const [image, updateImage] = useState(imageSrc);
   let textSize = 's1';
   if (size === 'large') textSize = 'h1';
   if (size === 'small') textSize = 'b1';
   if (size === 'extra-small') textSize = 'b3';
 
-  useEffect(() => updateImage(imageSrc), [imageSrc]);
-
   return (
     <div className={`avatar-container avatar-container__${size} noselect`}>
       {
-        image !== null
-          ? <img src={image} onError={() => updateImage(null)} alt="avatar" />
+        imageSrc !== null
+          ? <img draggable="false" src={imageSrc} onError={(e) => { e.target.src = ImageBrokenSVG; }} alt="avatar" />
           : (
             <span
               style={{ backgroundColor: iconSrc === null ? bgColor : 'transparent' }}
-              className={`avatar__border${iconSrc !== null ? ' avatar__bordered' : ''} inline-flex--center`}
+              className={`avatar__border${iconSrc !== null ? '--active' : ''}`}
             >
               {
                 iconSrc !== null
-                  ? <RawIcon size={size} src={iconSrc} />
+                  ? <RawIcon size={size} src={iconSrc} color={iconColor} />
                   : text !== null && (
-                    <Text variant={textSize}>
+                    <Text variant={textSize} primary>
                       {twemojify([...text][0])}
                     </Text>
                   )
@@ -48,6 +47,7 @@ Avatar.defaultProps = {
   text: null,
   bgColor: 'transparent',
   iconSrc: null,
+  iconColor: null,
   imageSrc: null,
   size: 'normal',
 };
@@ -56,6 +56,7 @@ Avatar.propTypes = {
   text: PropTypes.string,
   bgColor: PropTypes.string,
   iconSrc: PropTypes.string,
+  iconColor: PropTypes.string,
   imageSrc: PropTypes.string,
   size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']),
 };

src/app/atoms/avatar/Avatar.scss

@@ -1,3 +1,5 @@
+@use '../../partials/flex';
+
 .avatar-container {
   display: inline-flex;
   width: 42px;
@@ -31,11 +33,9 @@
     border-radius: inherit;
   }
 
-  .avatar__bordered {
-    box-shadow: var(--bs-surface-border);
-  }
-
   .avatar__border {
+    @extend .cp-fx__row--c-c;
+    
     position: absolute;
     top: 0;
     left: 0;
@@ -45,7 +45,11 @@
     border-radius: inherit;
 
     .text {
-      color: var(--tc-primary-high);
+      color: white;
+    }
+    &--active {
+      @extend .avatar__border;
+      box-shadow: var(--bs-surface-border);
     }
   }
 }

src/app/atoms/badge/NotificationBadge.jsx

@@ -8,7 +8,7 @@ function NotificationBadge({ alert, content }) {
   const notificationClass = alert ? ' notification-badge--alert' : '';
   return (
     <div className={`notification-badge${notificationClass}`}>
-      {content !== null && <Text variant="b3">{content}</Text>}
+      {content !== null && <Text variant="b3" weight="bold">{content}</Text>}
     </div>
   );
 }

src/app/atoms/badge/NotificationBadge.scss

@@ -8,7 +8,6 @@
   .text {
     color: var(--tc-badge);
     text-align: center;
-    font-weight: 700;
   }
 
   &--alert {

src/app/atoms/button/Button.scss

@@ -1,4 +1,5 @@
 @use 'state';
+@use '../../partials/dir';
 
 .btn-surface,
 .btn-primary,
@@ -18,27 +19,10 @@
   @include state.disabled;
 
   &--icon {
-    padding: {
-      left: var(--sp-tight);
-      right: var(--sp-loose);
-    }
-
-    [dir=rtl] & {
-      padding: {
-        left: var(--sp-loose);
-        right: var(--sp-tight);
-      }
-    }
+    @include dir.side(padding, var(--sp-tight), var(--sp-loose));
 
     .ic-raw {
-      margin-right: var(--sp-extra-tight);
-
-      [dir=rtl] & {
-        margin: {
-          right: 0;
-          left: var(--sp-extra-tight);
-        }
-      }
+      @include dir.side(margin, 0, var(--sp-extra-tight));
     }
   }
 }

src/app/atoms/button/Checkbox.jsx

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

src/app/atoms/button/Checkbox.scss

@@ -0,0 +1,39 @@
+@use '../../partials/flex';
+@use './state';
+
+.checkbox {
+  width: 20px;
+  height: 20px;
+
+  border-radius: calc(var(--bo-radius) / 2);
+  background-color: var(--bg-surface-border);
+  box-shadow: var(--bs-surface-border);
+  cursor: pointer;
+  @include state.disabled;
+  @extend .cp-fx__row--c-c;
+
+  &--active {
+    background-color: black;
+    &::before {
+      content: "";
+      display: inline-block;
+      width: 12px;
+      height: 6px;
+      border: 6px solid white;
+      border-width: 0 0 3px 3px;
+      transform: rotateZ(-45deg) translate(1px, -1px);
+    }
+  }
+}
+.checkbox-primary.checkbox--active {
+  background-color: var(--bg-primary);
+}
+.checkbox-positive.checkbox--active {
+  background-color: var(--bg-positive);
+}
+.checkbox-caution.checkbox--active {
+  background-color: var(--bg-caution);
+}
+.checkbox-danger.checkbox--active {
+  background-color: var(--bg-danger);
+}

src/app/atoms/button/IconButton.jsx

@@ -9,7 +9,8 @@ import Text from '../text/Text';
 
 const IconButton = React.forwardRef(({
   variant, size, type,
-  tooltip, tooltipPlacement, src, onClick, tabIndex,
+  tooltip, tooltipPlacement, src,
+  onClick, tabIndex, disabled, isImage,
 }, ref) => {
   const btn = (
     <button
@@ -20,8 +21,9 @@ const IconButton = React.forwardRef(({
       // eslint-disable-next-line react/button-has-type
       type={type}
       tabIndex={tabIndex}
+      disabled={disabled}
     >
-      <RawIcon size={size} src={src} />
+      <RawIcon size={size} src={src} isImage={isImage} />
     </button>
   );
   if (tooltip === null) return btn;
@@ -43,6 +45,8 @@ IconButton.defaultProps = {
   tooltipPlacement: 'top',
   onClick: null,
   tabIndex: 0,
+  disabled: false,
+  isImage: false,
 };
 
 IconButton.propTypes = {
@@ -54,6 +58,8 @@ IconButton.propTypes = {
   src: PropTypes.string.isRequired,
   onClick: PropTypes.func,
   tabIndex: PropTypes.number,
+  disabled: PropTypes.bool,
+  isImage: PropTypes.bool,
 };
 
 export default IconButton;

src/app/atoms/button/RadioButton.jsx

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

src/app/atoms/button/RadioButton.scss

@@ -0,0 +1,28 @@
+@use '../../partials/flex';
+@use './state';
+
+.radio-btn {
+  @extend .cp-fx__row--c-c;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: var(--bg-surface-border);
+  border: 2px solid var(--bg-surface-border);
+  cursor: pointer;
+  @include state.disabled;
+
+  &::before {
+    content: '';
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    background-color: var(--bg-surface-border);
+    border-radius: 50%;
+  }
+  &--active {
+    border: 2px solid var(--bg-positive);
+    &::before {
+      background-color: var(--bg-positive);
+    }
+  }
+}

src/app/atoms/button/Toggle.jsx

@@ -2,24 +2,30 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './Toggle.scss';
 
-function Toggle({ isActive, onToggle }) {
+function Toggle({ isActive, onToggle, disabled }) {
+  const className = `toggle${isActive ? ' toggle--active' : ''}`;
+  if (onToggle === null) return <span className={className} />;
   return (
     // eslint-disable-next-line jsx-a11y/control-has-associated-label
     <button
       onClick={() => onToggle(!isActive)}
-      className={`toggle${isActive ? ' toggle--active' : ''}`}
+      className={className}
       type="button"
+      disabled={disabled}
     />
   );
 }
 
 Toggle.defaultProps = {
   isActive: false,
+  disabled: false,
+  onToggle: null,
 };
 
 Toggle.propTypes = {
   isActive: PropTypes.bool,
-  onToggle: PropTypes.func.isRequired,
+  onToggle: PropTypes.func,
+  disabled: PropTypes.bool,
 };
 
 export default Toggle;

src/app/atoms/button/Toggle.scss

@@ -1,3 +1,6 @@
+@use '../../partials/dir';
+@use './state';
+
 .toggle {
   width: 44px;
   height: 24px;
@@ -8,6 +11,7 @@
   box-shadow: var(--bs-surface-border);
   cursor: pointer;
   background-color: var(--bg-surface-low);
+  @include state.disabled;
 
   transition: background 200ms ease-in-out;
 
@@ -27,13 +31,13 @@
     background-color: var(--bg-positive);
 
     &::before {
-      background-color: white;
-      transform: translateX(calc(125%));
-      opacity: 1;
+      --ltr: translateX(calc(125%));
+      --rtl: translateX(calc(-125%));
+      @include dir.prop(transform, var(--ltr), var(--rtl));
 
-      [dir=rtl] & {
-        transform: translateX(calc(-125%));
-      }
+      transform: translateX(calc(125%));
+      background-color: white;
+      opacity: 1;
     }
   }
 }

src/app/atoms/chip/Chip.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .chip {
   padding: var(--sp-ultra-tight) var(--sp-extra-tight);
   
@@ -24,10 +26,6 @@
   & > .ic-raw {
     width: 16px;
     height: 16px;
-    margin-right: var(--sp-ultra-tight);
-    [dir=rtl] & {
-      margin-right: 0;
-      margin-left: var(--sp-ultra-tight);
-    }
+    @include dir.side(margin, 0, var(--sp-ultra-tight));
   }
 }

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

@@ -71,7 +71,8 @@ MenuHeader.propTypes = {
 };
 
 function MenuItem({
-  variant, iconSrc, type, onClick, children,
+  variant, iconSrc, type,
+  onClick, children, disabled,
 }) {
   return (
     <div className="context-menu__item">
@@ -80,6 +81,7 @@ function MenuItem({
         iconSrc={iconSrc}
         type={type}
         onClick={onClick}
+        disabled={disabled}
       >
         { children }
       </Button>
@@ -89,16 +91,19 @@ function MenuItem({
 
 MenuItem.defaultProps = {
   variant: 'surface',
-  iconSrc: 'none',
+  iconSrc: null,
   type: 'button',
+  disabled: false,
+  onClick: null,
 };
 
 MenuItem.propTypes = {
   variant: PropTypes.oneOf(['surface', 'positive', 'caution', 'danger']),
   iconSrc: PropTypes.string,
   type: PropTypes.oneOf(['button', 'submit']),
-  onClick: PropTypes.func.isRequired,
-  children: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+  children: PropTypes.node.isRequired,
+  disabled: PropTypes.bool,
 };
 
 function MenuBorder() {

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

@@ -1,3 +1,7 @@
+@use '../../partials/flex';
+@use '../../partials/text';
+@use '../../partials/dir';
+
 .context-menu {
   background-color: var(--bg-surface);
   box-shadow: var(--bs-popup);
@@ -22,50 +26,52 @@
 
 .context-menu__header {
   height: 34px;
-  padding: 0 var(--sp-tight);
+  padding: 0 var(--sp-normal);
   margin-bottom: var(--sp-ultra-tight);
   display: flex;
   align-items: center;
   border-bottom: 1px solid var(--bg-surface-border);
 
   .text {
+    @extend .cp-txt__ellipsis;
     color: var(--tc-surface-low);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   &:not(:first-child) {
-    margin-top: var(--sp-normal);
+    margin-top: var(--sp-extra-tight);
     border-top: 1px solid var(--bg-surface-border);
   }
 }
 
 .context-menu__item {
+  display: flex;
   button[class^="btn"] {
-    width: 100%;
+    @extend .cp-fx__item-one;
     justify-content: flex-start;
     border-radius: 0;
     box-shadow: none;
     white-space: nowrap;
+    padding: var(--sp-extra-tight) var(--sp-normal);
 
+    & > .ic-raw {
+      @include dir.side(margin, 0, var(--sp-tight));
+    }
+
+    // if item doesn't have icon
     .text:first-child {
-      margin: {
-        left: calc(var(--ic-small) + var(--sp-ultra-tight));
-        right: var(--sp-extra-tight);
-      }
-
-      [dir=rtl] & {
-        margin: {
-          left: var(--sp-extra-tight);
-          right: calc(var(--ic-small) + var(--sp-ultra-tight));
-        }
-      }
+      @include dir.side(
+        margin,
+        calc(var(--ic-small) + var(--sp-tight)),
+        0
+      );
     }
   }
   .btn-surface:focus {
     background-color: var(--bg-surface-hover);
   }
+  .btn-positive:focus {
+    background-color: var(--bg-positive-hover);
+  }
   .btn-caution:focus {
     background-color: var(--bg-caution-hover);
   }

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

@@ -0,0 +1,87 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+
+import ContextMenu from './ContextMenu';
+
+let key = null;
+function ReusableContextMenu() {
+  const [data, setData] = useState(null);
+  const openerRef = useRef(null);
+
+  const closeMenu = () => {
+    key = null;
+    if (data) openerRef.current.click();
+  };
+
+  useEffect(() => {
+    if (data) {
+      const { cords } = data;
+      openerRef.current.style.transform = `translate(${cords.x}px, ${cords.y}px)`;
+      openerRef.current.style.width = `${cords.width}px`;
+      openerRef.current.style.height = `${cords.height}px`;
+      openerRef.current.click();
+    }
+    const handleContextMenuOpen = (placement, cords, render, afterClose) => {
+      if (key) {
+        closeMenu();
+        return;
+      }
+      setData({
+        placement, cords, render, afterClose,
+      });
+    };
+    navigation.on(cons.events.navigation.REUSABLE_CONTEXT_MENU_OPENED, handleContextMenuOpen);
+    return () => {
+      navigation.removeListener(
+        cons.events.navigation.REUSABLE_CONTEXT_MENU_OPENED,
+        handleContextMenuOpen,
+      );
+    };
+  }, [data]);
+
+  const handleAfterToggle = (isVisible) => {
+    if (isVisible) {
+      key = Math.random();
+      return;
+    }
+    data?.afterClose?.();
+    if (setData) setData(null);
+
+    if (key === null) return;
+    const copyKey = key;
+    setTimeout(() => {
+      if (key === copyKey) key = null;
+    }, 200);
+  };
+
+  return (
+    <ContextMenu
+      afterToggle={handleAfterToggle}
+      placement={data?.placement || 'right'}
+      content={data?.render(closeMenu) ?? ''}
+      render={(toggleMenu) => (
+        <input
+          ref={openerRef}
+          onClick={toggleMenu}
+          type="button"
+          style={{
+            width: '32px',
+            height: '32px',
+            backgroundColor: 'transparent',
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            padding: 0,
+            border: 'none',
+            visibility: 'hidden',
+            appearance: 'none',
+          }}
+        />
+      )}
+    />
+  );
+}
+
+export default ReusableContextMenu;

src/app/atoms/divider/Divider.jsx

@@ -8,7 +8,7 @@ function Divider({ text, variant, align }) {
   const dividerClass = ` divider--${variant} divider--${align}`;
   return (
     <div className={`divider${dividerClass}`}>
-      {text !== null && <Text className="divider__text" variant="b3">{text}</Text>}
+      {text !== null && <Text className="divider__text" variant="b3" weight="bold">{text}</Text>}
     </div>
   );
 }

src/app/atoms/divider/Divider.scss

@@ -22,7 +22,6 @@
   &__text {
     padding: 2px var(--sp-extra-tight);
     border-radius: calc(var(--bo-radius) / 2);
-    font-weight: 500;
   }
 }
 

src/app/atoms/header/Header.scss

@@ -1,63 +1,43 @@
+@use '../../partials/text';
+@use '../../partials/dir';
+
 .header {
-  padding: {
-    left: var(--sp-normal);
-    right: var(--sp-extra-tight);
-  }
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
   width: 100%;
   height: var(--header-height);
   border-bottom: 1px solid var(--bg-surface-border);
   display: flex;
   align-items: center;
 
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
-
   &__title-wrapper {
     flex: 1;
     min-width: 0;
     display: flex;
     align-items: center;
     margin: 0 var(--sp-tight);
-
+    
     &:first-child {
-      margin-left: 0;
-      [dir=rtl] & {
-        margin-right: 0;
-      }
+      @include dir.side(margin, 0, var(--sp-tight));
     }
 
     & > .text:first-child {
+      @extend .cp-txt__ellipsis;
       min-width: 0;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
     }
     & > .text-b3{
       flex: 1;
       min-width: 0;
 
       margin-top: var(--sp-ultra-tight);
-      margin-left: var(--sp-tight);
-      padding-left: var(--sp-tight);
-      border-left: 1px solid var(--bg-surface-border);
+      @include dir.side(margin, var(--sp-tight), 0);
+      @include dir.side(padding, var(--sp-tight), 0);
+      @include dir.side(border, 1px solid var(--bg-surface-border), none);
+
       max-height: calc(2 * var(--lh-b3));
       overflow: hidden;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
       display: -webkit-box;
-
-      [dir=rtl] & {
-        margin-left: 0;
-        padding-left: 0;
-        border-left: none;
-        margin-right: var(--sp-tight);
-        padding-right: var(--sp-tight);
-        border-right: 1px solid var(--bg-surface-border);
-      }
     }
   }
 }

src/app/atoms/input/Input.jsx

@@ -8,7 +8,7 @@ function Input({
   id, label, name, value, placeholder,
   required, type, onChange, forwardRef,
   resizable, minHeight, onResize, state,
-  onKeyDown,
+  onKeyDown, disabled,
 }) {
   return (
     <div className="input-container">
@@ -29,6 +29,7 @@ function Input({
             onChange={onChange}
             onResize={onResize}
             onKeyDown={onKeyDown}
+            disabled={disabled}
           />
         ) : (
           <input
@@ -43,6 +44,7 @@ function Input({
             autoComplete="off"
             onChange={onChange}
             onKeyDown={onKeyDown}
+            disabled={disabled}
           />
         )}
     </div>
@@ -64,6 +66,7 @@ Input.defaultProps = {
   onResize: null,
   state: 'normal',
   onKeyDown: null,
+  disabled: false,
 };
 
 Input.propTypes = {
@@ -81,6 +84,7 @@ Input.propTypes = {
   onResize: PropTypes.func,
   state: PropTypes.oneOf(['normal', 'success', 'error']),
   onKeyDown: PropTypes.func,
+  disabled: PropTypes.bool,
 };
 
 export default Input;

src/app/atoms/input/Input.scss

@@ -1,3 +1,5 @@
+@use '../../atoms/scroll/scrollbar';
+
 .input {
   display: block;
   width: 100%;
@@ -13,6 +15,11 @@
   letter-spacing: var(--ls-b2);
   line-height: var(--lh-b2);
 
+  :disabled {
+    opacity: 0.4;
+    cursor: no-drop;
+  }
+
   &__label {
     display: inline-block;
     margin-bottom: var(--sp-ultra-tight);
@@ -21,6 +28,10 @@
 
   &--resizable {
     resize: vertical !important;
+    overflow-y: auto !important;
+    @include scrollbar.scroll;
+    @include scrollbar.scroll__v;
+    @include scrollbar.scroll--auto-hide;
   }
   &--success {
     border: 1px solid var(--bg-positive);

src/app/atoms/modal/RawModal.scss

@@ -1,6 +1,6 @@
 .ReactModal__Overlay {
   opacity: 0;
-  transition: opacity 200ms cubic-bezier(0.13, 0.56, 0.25, 0.99);
+  transition: opacity 200ms var(--fluid-slide-up);
 }
 .ReactModal__Overlay--after-open{
   opacity: 1;
@@ -11,7 +11,7 @@
 
 .ReactModal__Content {
   transform: translateY(100%);
-  transition: transform 200ms cubic-bezier(0.13, 0.56, 0.25, 0.99);
+  transition: transform 200ms var(--fluid-slide-up);
 }
 
 .ReactModal__Content--after-open{

src/app/atoms/scroll/ScrollView.scss

@@ -1,9 +1,17 @@
+@use '../../partials/dir';
 @use '_scrollbar';
 
+@mixin paddingForSafari($padding) {
+	@media not all and (min-resolution:.001dpcm) {
+    @include dir.side(padding, 0, $padding);
+  }
+}
+
 .scrollbar {
   width: 100%;
   height: 100%;
   @include scrollbar.scroll;
+  @include paddingForSafari(var(--sp-extra-tight));
 
   &__h {
     @include scrollbar.scroll__h;
@@ -18,5 +26,6 @@
   }
   &--invisible {
     @include scrollbar.scroll--invisible;
+    @include paddingForSafari(0);
   }
 }

src/app/atoms/scroll/_scrollbar.scss

@@ -58,6 +58,7 @@
 @mixin scroll--invisible {
   -ms-overflow-style: none;
   scrollbar-width: none;
+
   &::-webkit-scrollbar {
     display: none;
   }

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

@@ -1,4 +1,5 @@
 @use '../button/state';
+@use '../../partials/dir';
 
 .segmented-controls {
   background-color: var(--bg-surface-low);
@@ -20,12 +21,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    border-left: 1px solid var(--bg-surface-border);
-    
-    [dir=rtl] & {
-      border-left: none;
-      border-right: 1px solid var(--bg-surface-border);
-    }
+    @include dir.side(border, 1px solid var(--bg-surface-border), none);
 
     & .text:nth-child(2) {
       margin: 0 var(--sp-extra-tight);

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

@@ -2,24 +2,33 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './RawIcon.scss';
 
-function RawIcon({ color, size, src }) {
-  const style = {
-    WebkitMaskImage: `url(${src})`,
-    maskImage: `url(${src})`,
-  };
+function RawIcon({
+  color, size, src, isImage,
+}) {
+  const style = {};
   if (color !== null) style.backgroundColor = color;
+  if (isImage) {
+    style.backgroundColor = 'transparent';
+    style.backgroundImage = `url(${src})`;
+  } else {
+    style.WebkitMaskImage = `url(${src})`;
+    style.maskImage = `url(${src})`;
+  }
+
   return <span className={`ic-raw ic-raw-${size}`} style={style}> </span>;
 }
 
 RawIcon.defaultProps = {
   color: null,
   size: 'normal',
+  isImage: false,
 };
 
 RawIcon.propTypes = {
   color: PropTypes.string,
   size: PropTypes.oneOf(['large', 'normal', 'small', 'extra-small']),
   src: PropTypes.string.isRequired,
+  isImage: PropTypes.bool,
 };
 
 export default RawIcon;

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

@@ -10,6 +10,9 @@
   -webkit-mask-size: cover;
   mask-size: cover;
   background-color: var(--ic-surface-normal);
+
+  background-size: cover;
+  background-repeat: no-repeat;
 }
 .ic-raw-large {
   @include icSize(var(--ic-large));

src/app/atoms/tabs/Tabs.jsx

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import './Tabs.scss';
+
+import Button from '../button/Button';
+import ScrollView from '../scroll/ScrollView';
+
+function TabItem({
+  selected, iconSrc,
+  onClick, children, disabled,
+}) {
+  const isSelected = selected ? 'tab-item--selected' : '';
+
+  return (
+    <Button
+      className={`tab-item ${isSelected}`}
+      iconSrc={iconSrc}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </Button>
+  );
+}
+
+TabItem.defaultProps = {
+  selected: false,
+  iconSrc: null,
+  onClick: null,
+  disabled: false,
+};
+
+TabItem.propTypes = {
+  selected: PropTypes.bool,
+  iconSrc: PropTypes.string,
+  onClick: PropTypes.func,
+  children: PropTypes.node.isRequired,
+  disabled: PropTypes.bool,
+};
+
+function Tabs({ items, defaultSelected, onSelect }) {
+  const [selectedItem, setSelectedItem] = useState(items[defaultSelected]);
+
+  const handleTabSelection = (item, index) => {
+    if (selectedItem === item) return;
+    setSelectedItem(item);
+    onSelect(item, index);
+  };
+
+  return (
+    <div className="tabs">
+      <ScrollView horizontal vertical={false} invisible>
+        <div className="tabs__content">
+          {items.map((item, index) => (
+            <TabItem
+              key={item.text}
+              selected={selectedItem.text === item.text}
+              iconSrc={item.iconSrc}
+              disabled={item.disabled}
+              onClick={() => handleTabSelection(item, index)}
+            >
+              {item.text}
+            </TabItem>
+          ))}
+        </div>
+      </ScrollView>
+    </div>
+  );
+}
+
+Tabs.defaultProps = {
+  defaultSelected: 0,
+};
+
+Tabs.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.exact({
+      iconSrc: PropTypes.string,
+      text: PropTypes.string,
+      disabled: PropTypes.bool,
+    }),
+  ).isRequired,
+  defaultSelected: PropTypes.number,
+  onSelect: PropTypes.func.isRequired,
+};
+
+export { Tabs as default };

src/app/atoms/tabs/Tabs.scss

@@ -0,0 +1,45 @@
+@use '../../partials/dir';
+
+.tabs {
+  height: var(--header-height);
+  box-shadow: inset 0 -1px 0 var(--bg-surface-border);
+
+  &__content {
+    min-width: 100%;
+    height: 100%;
+    display: flex;
+  }
+}
+
+.tab-item {
+  flex-shrink: 0;
+  
+  @include dir.side(padding, var(--sp-normal), 24px);
+  border-radius: 0;
+  height: 100%;
+  box-shadow: none;
+  border-radius: var(--bo-radius) var(--bo-radius)   0 0;
+
+  &:focus,
+  &:active {
+    background-color: var(--bg-surface-active);
+    box-shadow: none;
+  }
+
+  &--selected {
+    --bs-tab-selected: inset 0 -2px 0 var(--tc-surface-high);
+    box-shadow: var(--bs-tab-selected);
+
+    & .ic-raw {
+      background-color: var(--ic-surface-high);
+    }
+    & .text {
+      font-weight: var(--fw-medium);
+    }
+    &:focus,
+    &:active {
+      background-color: var(--bg-surface-active);
+      box-shadow: var(--bs-tab-selected);
+    }
+  }
+}

src/app/atoms/text/Text.jsx

@@ -3,25 +3,39 @@ import PropTypes from 'prop-types';
 import './Text.scss';
 
 function Text({
-  id, className, variant, children,
+  className, style, variant, weight,
+  primary, span, children,
 }) {
-  const cName = className !== '' ? `${className} ` : '';
-  if (variant === 'h1') return <h1 id={id === '' ? undefined : id} className={`${cName}text text-h1`}>{ children }</h1>;
-  if (variant === 'h2') return <h2 id={id === '' ? undefined : id} className={`${cName}text text-h2`}>{ children }</h2>;
-  if (variant === 's1') return <h4 id={id === '' ? undefined : id} className={`${cName}text text-s1`}>{ children }</h4>;
-  return <p id={id === '' ? undefined : id} className={`${cName}text text-${variant}`}>{ children }</p>;
+  const classes = [];
+  if (className) classes.push(className);
+
+  classes.push(`text text-${variant} text-${weight}`);
+  if (primary) classes.push('font-primary');
+
+  const textClass = classes.join(' ');
+  if (span) return <span className={textClass} style={style}>{ children }</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 = {
-  id: '',
-  className: '',
+  className: null,
+  style: null,
   variant: 'b1',
+  weight: 'normal',
+  primary: false,
+  span: false,
 };
 
 Text.propTypes = {
-  id: PropTypes.string,
   className: PropTypes.string,
+  style: PropTypes.shape({}),
   variant: PropTypes.oneOf(['h1', 'h2', 's1', 'b1', 'b2', 'b3']),
+  weight: PropTypes.oneOf(['light', 'normal', 'medium', 'bold']),
+  primary: PropTypes.bool,
+  span: PropTypes.bool,
   children: PropTypes.node.isRequired,
 };
 

src/app/atoms/text/Text.scss

@@ -1,17 +1,15 @@
-@mixin font($type, $weight) {
-  
+@mixin font($type) {
   font-size: var(--fs-#{$type});
-  font-weight: $weight;
   letter-spacing: var(--ls-#{$type});
   line-height: var(--lh-#{$type});
 
   & img.emoji,
   & img[data-mx-emoticon] {
-    height: var(--fs-#{$type});
+    height: calc(var(--lh-#{$type}) - .25rem);
   }
 }
 
-%text {
+.text {
   margin: 0;
   padding: 0;
   color: var(--tc-surface-high);
@@ -22,34 +20,42 @@
     margin-right: 2px !important;
     padding: 0 !important;
     position: relative;
-    top: 2px;
+    top: -.1rem;
+    vertical-align: middle;
   }
 }
 
+.text-light {
+  font-weight: var(--fw-light);
+}
+.text-normal {
+  font-weight: var(--fw-normal);
+}
+.text-medium {
+  font-weight: var(--fw-medium);
+}
+.text-bold {
+  font-weight: var(--fw-bold);
+}
+
 .text-h1 {
-  @extend %text;
-  @include font(h1, 500);
+  @include font(h1);
 }
 .text-h2 {
-  @extend %text;
-  @include font(h2, 500);
+  @include font(h2);
 }
 .text-s1 {
-  @extend %text;
-  @include font(s1, 400);
+  @include font(s1);
 }
 .text-b1 {
-  @extend %text;
-  @include font(b1, 400);
+  @include font(b1);
   color: var(--tc-surface-normal);
 }
 .text-b2 {
-  @extend %text;
-  @include font(b2, 400);
+  @include font(b2);
   color: var(--tc-surface-normal);
 }
 .text-b3 {
-  @extend %text;
-  @include font(b3, 400);
+  @include font(b3);
   color: var(--tc-surface-low);
 }

src/app/hooks/useSelectedSpace.js

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

src/app/hooks/useSelectedTab.js

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

src/app/hooks/useSpaceShortcut.js

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

src/app/molecules/dialog/Dialog.jsx

@@ -10,21 +10,24 @@ import ScrollView from '../../atoms/scroll/ScrollView';
 import RawModal from '../../atoms/modal/RawModal';
 
 function Dialog({
-  className, isOpen, title,
-  contentOptions, onRequestClose, children,
+  className, isOpen, title, onAfterOpen, onAfterClose,
+  contentOptions, onRequestClose, closeFromOutside, children,
 }) {
   return (
     <RawModal
       className={`${className === null ? '' : `${className} `}dialog-model`}
       isOpen={isOpen}
+      onAfterOpen={onAfterOpen}
+      onAfterClose={onAfterClose}
       onRequestClose={onRequestClose}
+      closeFromOutside={closeFromOutside}
       size="small"
     >
       <div className="dialog">
         <div className="dialog__content">
           <Header>
             <TitleWrapper>
-              <Text variant="h2">{twemojify(title)}</Text>
+              <Text variant="h2" weight="medium" primary>{twemojify(title)}</Text>
             </TitleWrapper>
             {contentOptions}
           </Header>
@@ -44,7 +47,10 @@ function Dialog({
 Dialog.defaultProps = {
   className: null,
   contentOptions: null,
+  onAfterOpen: null,
+  onAfterClose: null,
   onRequestClose: null,
+  closeFromOutside: true,
 };
 
 Dialog.propTypes = {
@@ -52,7 +58,10 @@ Dialog.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   title: PropTypes.string.isRequired,
   contentOptions: PropTypes.node,
+  onAfterOpen: PropTypes.func,
+  onAfterClose: PropTypes.func,
   onRequestClose: PropTypes.func,
+  closeFromOutside: PropTypes.bool,
   children: PropTypes.node.isRequired,
 };
 

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

@@ -1,3 +1,4 @@
+@use '../../partials/text';
 
 .following-members {
   width: 100%;
@@ -13,9 +14,7 @@
     margin: 0 var(--sp-extra-tight);
   }
   & .text {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    @extend .cp-txt__ellipsis;
     color: var(--tc-surface-low);
     b {
       color: var(--tc-surface-normal);

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

@@ -53,7 +53,7 @@ function ImageUpload({
           size="large"
         />
         <div className={`img-upload__process ${uploadPromise === null ? ' img-upload__process--stopped' : ''}`}>
-          {uploadPromise === null && <Text variant="b3">Upload</Text>}
+          {uploadPromise === null && <Text variant="b3" weight="bold">Upload</Text>}
           {uploadPromise !== null && <Spinner size="small" />}
         </div>
       </button>

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

@@ -24,7 +24,6 @@
 		z-index: 1;
 		& .text {
 			text-transform: uppercase;
-			font-weight: 600;
 			color: white;
 		}
 		&--stopped {

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

@@ -1,3 +1,5 @@
+@use '../../partials/text';
+@use '../../partials/dir';
 
 .import-e2e-room-keys {
   &__file {
@@ -22,17 +24,9 @@
     }
     
     & .text {
-      margin-left: var(--sp-tight);
-      margin-right: var(--sp-loose);
+      @extend .cp-txt__ellipsis;
+      @include dir.side(margin, var(--sp-tight), var(--sp-loose));
       max-width: 86px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-
-      [dir=rtl] {
-        margin-right: var(--sp-tight);
-        margin-left: var(--sp-loose);
-      }
     }
   }
 

src/app/molecules/media/Media.scss

@@ -1,3 +1,5 @@
+@use '../../partials/text';
+
 .file-header {
   display: flex;
   align-items: center;
@@ -5,11 +7,9 @@
   min-height: 42px;
 
   & .file-name {
+    @extend .cp-txt__ellipsis;
     flex: 1;
     color: var(--tc-surface-low);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   & a {

src/app/molecules/message/Message.jsx

@@ -3,7 +3,7 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './Message.scss';
 
-import dateFormat from 'dateformat';
+import { getShortcodeToCustomEmoji } from '../../organisms/emoji-board/custom-emoji';
 import { twemojify } from '../../../util/twemojify';
 
 import initMatrix from '../../../client/initMatrix';
@@ -53,26 +53,29 @@ function PlaceholderMessage() {
 }
 
 const MessageAvatar = React.memo(({
-  roomId, mEvent, userId, username,
-}) => {
-  const avatarSrc = mEvent.sender.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop');
-  return (
-    <div className="message__avatar-container">
-      <button type="button" onClick={() => openProfileViewer(userId, roomId)}>
-        <Avatar imageSrc={avatarSrc} text={username} bgColor={colorMXID(userId)} size="small" />
-      </button>
-    </div>
-  );
-});
+  roomId, avatarSrc, userId, username,
+}) => (
+  <div className="message__avatar-container">
+    <button type="button" onClick={() => openProfileViewer(userId, roomId)}>
+      <Avatar imageSrc={avatarSrc} text={username} bgColor={colorMXID(userId)} size="small" />
+    </button>
+  </div>
+));
 
 const MessageHeader = React.memo(({
   userId, username, time,
 }) => (
   <div className="message__header">
-    <div style={{ color: colorMXID(userId) }} className="message__profile">
-      <Text variant="b1">{twemojify(username)}</Text>
-      <Text variant="b1">{twemojify(userId)}</Text>
-    </div>
+    <Text
+      style={{ color: colorMXID(userId) }}
+      className="message__profile"
+      variant="b1"
+      weight="medium"
+      span
+    >
+      <span>{twemojify(username)}</span>
+      <span>{twemojify(userId)}</span>
+    </Text>
     <div className="message__time">
       <Text variant="b3">{time}</Text>
     </div>
@@ -167,13 +170,42 @@ const MessageBody = React.memo(({
   // if body is not string it is a React element.
   if (typeof body !== 'string') return <div className="message__body">{body}</div>;
 
-  const content = isCustomHTML
+  let content = isCustomHTML
     ? twemojify(sanitizeCustomHtml(body), undefined, true, false)
-    : <p>{twemojify(body, undefined, true)}</p>;
+    : twemojify(body, undefined, true);
+
+  // Determine if this message should render with large emojis
+  // Criteria:
+  // - Contains only emoji
+  // - Contains no more than 10 emoji
+  let emojiOnly = false;
+  if (content.type === 'img') {
+    // If this messages contains only a single (inline) image
+    emojiOnly = true;
+  } else if (content.constructor.name === 'Array') {
+    // Otherwise, it might be an array of images / texb
+
+    // Count the number of emojis
+    const nEmojis = content.filter((e) => e.type === 'img').length;
+
+    // Make sure there's no text besides whitespace
+    if (nEmojis <= 10 && content.every((element) => (
+      (typeof element === 'object' && element.type === 'img')
+      || (typeof element === 'string' && /^\s*$/g.test(element))
+    ))) {
+      emojiOnly = true;
+    }
+  }
+
+  if (!isCustomHTML) {
+    // If this is a plaintext message, wrap it in a <p> element (automatically applying
+    // white-space: pre-wrap) in order to preserve newlines
+    content = (<p>{content}</p>);
+  }
 
   return (
     <div className="message__body">
-      <div className="text text-b1">
+      <div className={`text ${emojiOnly ? 'text-h1' : 'text-b1'}`}>
         { msgType === 'm.emote' && (
           <>
             {'* '}
@@ -267,27 +299,31 @@ function pickEmoji(e, roomId, eventId, roomTimeline) {
 }
 
 function genReactionMsg(userIds, reaction) {
-  const genLessContText = (text) => <span style={{ opacity: '.6' }}>{text}</span>;
-  let msg = <></>;
-  userIds.forEach((userId, index) => {
-    if (index === 0) msg = <>{getUsername(userId)}</>;
-    // eslint-disable-next-line react/jsx-one-expression-per-line
-    else if (index === userIds.length - 1) msg = <>{msg}{genLessContText(' and ')}{getUsername(userId)}</>;
-    // eslint-disable-next-line react/jsx-one-expression-per-line
-    else msg = <>{msg}{genLessContText(', ')}{getUsername(userId)}</>;
-  });
   return (
     <>
-      {msg}
-      {genLessContText(' reacted with')}
+      {userIds.map((userId, index) => (
+        <React.Fragment key={userId}>
+          {twemojify(getUsername(userId))}
+          <span style={{ opacity: '.6' }}>
+            {index === userIds.length - 1 ? ' and ' : ', '}
+          </span>
+        </React.Fragment>
+      ))}
+      <span style={{ opacity: '.6' }}>{' reacted with '}</span>
       {twemojify(reaction, { className: 'react-emoji' })}
     </>
   );
 }
 
 function MessageReaction({
-  reaction, count, users, isActive, onClick,
+  shortcodeToEmoji, reaction, count, users, isActive, onClick,
 }) {
+  const customEmojiMatch = reaction.match(/^:(\S+):$/);
+  let customEmojiUrl = null;
+  if (customEmojiMatch) {
+    const customEmoji = shortcodeToEmoji.get(customEmojiMatch[1]);
+    customEmojiUrl = initMatrix.matrixClient.mxcUrlToHttp(customEmoji?.mxc);
+  }
   return (
     <Tooltip
       className="msg__reaction-tooltip"
@@ -298,13 +334,18 @@ function MessageReaction({
         type="button"
         className={`msg__reaction${isActive ? ' msg__reaction--active' : ''}`}
       >
-        { twemojify(reaction, { className: 'react-emoji' }) }
+        {
+          customEmojiUrl
+            ? <img className="react-emoji" draggable="false" alt={reaction} src={customEmojiUrl} />
+            : twemojify(reaction, { className: 'react-emoji' })
+        }
         <Text variant="b3" className="msg__reaction-count">{count}</Text>
       </button>
     </Tooltip>
   );
 }
 MessageReaction.propTypes = {
+  shortcodeToEmoji: PropTypes.shape({}).isRequired,
   reaction: PropTypes.node.isRequired,
   count: PropTypes.number.isRequired,
   users: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -313,10 +354,12 @@ MessageReaction.propTypes = {
 };
 
 function MessageReactionGroup({ roomTimeline, mEvent }) {
-  const { roomId, reactionTimeline } = roomTimeline;
+  const { roomId, room, reactionTimeline } = roomTimeline;
   const eventId = mEvent.getId();
   const mx = initMatrix.matrixClient;
   const reactions = {};
+  const shortcodeToEmoji = getShortcodeToCustomEmoji(room);
+  const canSendReaction = room.currentState.maySendEvent('m.reaction', mx.getUserId());
 
   const eventReactions = reactionTimeline.get(eventId);
   const addReaction = (key, count, senderId, isActive) => {
@@ -333,7 +376,7 @@ function MessageReactionGroup({ roomTimeline, mEvent }) {
     } else {
       reaction.users.push(senderId);
       reaction.count = reaction.users.length;
-      reaction.isActive = isActive;
+      if (isActive) reaction.isActive = isActive;
     }
 
     reactions[key] = reaction;
@@ -363,6 +406,7 @@ function MessageReactionGroup({ roomTimeline, mEvent }) {
         Object.keys(reactions).map((key) => (
           <MessageReaction
             key={key}
+            shortcodeToEmoji={shortcodeToEmoji}
             reaction={key}
             count={reactions[key].count}
             users={reactions[key].users}
@@ -373,14 +417,16 @@ function MessageReactionGroup({ roomTimeline, mEvent }) {
           />
         ))
       }
-      <IconButton
-        onClick={(e) => {
-          pickEmoji(e, roomId, eventId, roomTimeline);
-        }}
-        src={EmojiAddIC}
-        size="extra-small"
-        tooltip="Add reaction"
-      />
+      {canSendReaction && (
+        <IconButton
+          onClick={(e) => {
+            pickEmoji(e, roomId, eventId, roomTimeline);
+          }}
+          src={EmojiAddIC}
+          size="extra-small"
+          tooltip="Add reaction"
+        />
+      )}
     </div>
   );
 }
@@ -409,15 +455,18 @@ const MessageOptions = React.memo(({
 
   const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel;
   const canIRedact = room.currentState.hasSufficientPowerLevelFor('redact', myPowerlevel);
+  const canSendReaction = room.currentState.maySendEvent('m.reaction', mx.getUserId());
 
   return (
     <div className="message__options">
-      <IconButton
-        onClick={(e) => pickEmoji(e, roomId, eventId, roomTimeline)}
-        src={EmojiAddIC}
-        size="extra-small"
-        tooltip="Add reaction"
-      />
+      {canSendReaction && (
+        <IconButton
+          onClick={(e) => pickEmoji(e, roomId, eventId, roomTimeline)}
+          src={EmojiAddIC}
+          size="extra-small"
+          tooltip="Add reaction"
+        />
+      )}
       <IconButton
         onClick={() => reply()}
         src={ReplyArrowIC}
@@ -438,7 +487,7 @@ const MessageOptions = React.memo(({
             <MenuHeader>Options</MenuHeader>
             <MenuItem
               iconSrc={TickMarkIC}
-              onClick={() => openReadReceipts(roomId, roomTimeline.getEventReaders(eventId))}
+              onClick={() => openReadReceipts(roomId, roomTimeline.getEventReaders(mEvent))}
             >
               Read receipts
             </MenuItem>
@@ -563,7 +612,8 @@ function Message({
   mEvent, isBodyOnly, roomTimeline, focus, time,
 }) {
   const [isEditing, setIsEditing] = useState(false);
-  const { roomId, editedTimeline, reactionTimeline } = roomTimeline;
+  const roomId = mEvent.getRoomId();
+  const { editedTimeline, reactionTimeline } = roomTimeline ?? {};
 
   const className = ['message', (isBodyOnly ? 'message--body-only' : 'message--full')];
   if (focus) className.push('message--focus');
@@ -572,7 +622,8 @@ function Message({
   const msgType = content?.msgtype;
   const senderId = mEvent.getSender();
   let { body } = content;
-  const username = getUsernameOfRoomMember(mEvent.sender);
+  const username = mEvent.sender ? getUsernameOfRoomMember(mEvent.sender) : getUsername(senderId);
+  const avatarSrc = mEvent.sender?.getAvatarUrl(initMatrix.matrixClient.baseUrl, 36, 36, 'crop') ?? null;
 
   const edit = useCallback(() => {
     setIsEditing(true);
@@ -585,8 +636,10 @@ function Message({
   if (msgType === 'm.emote') className.push('message--type-emote');
 
   let isCustomHTML = content.format === 'org.matrix.custom.html';
-  const isEdited = editedTimeline.has(eventId);
-  const haveReactions = reactionTimeline.has(eventId) || !!mEvent.getServerAggregatedRelation('m.annotation');
+  const isEdited = roomTimeline ? editedTimeline.has(eventId) : false;
+  const haveReactions = roomTimeline
+    ? reactionTimeline.has(eventId) || !!mEvent.getServerAggregatedRelation('m.annotation')
+    : false;
   const isReply = !!mEvent.replyEventId;
   let customHTML = isCustomHTML ? content.formatted_body : null;
 
@@ -606,13 +659,20 @@ function Message({
       {
         isBodyOnly
           ? <div className="message__avatar-container" />
-          : <MessageAvatar roomId={roomId} mEvent={mEvent} userId={senderId} username={username} />
+          : (
+            <MessageAvatar
+              roomId={roomId}
+              avatarSrc={avatarSrc}
+              userId={senderId}
+              username={username}
+            />
+          )
       }
       <div className="message__main-container">
         {!isBodyOnly && (
           <MessageHeader userId={senderId} username={username} time={time} />
         )}
-        {isReply && (
+        {roomTimeline && isReply && (
           <MessageReplyWrapper
             roomTimeline={roomTimeline}
             eventId={mEvent.replyEventId}
@@ -642,7 +702,7 @@ function Message({
         {haveReactions && (
           <MessageReactionGroup roomTimeline={roomTimeline} mEvent={mEvent} />
         )}
-        {!isEditing && (
+        {roomTimeline && !isEditing && (
           <MessageOptions
             roomTimeline={roomTimeline}
             mEvent={mEvent}
@@ -657,11 +717,12 @@ function Message({
 Message.defaultProps = {
   isBodyOnly: false,
   focus: false,
+  roomTimeline: null,
 };
 Message.propTypes = {
   mEvent: PropTypes.shape({}).isRequired,
   isBodyOnly: PropTypes.bool,
-  roomTimeline: PropTypes.shape({}).isRequired,
+  roomTimeline: PropTypes.shape({}),
   focus: PropTypes.bool,
   time: PropTypes.string.isRequired,
 };

src/app/molecules/message/Message.scss

@@ -1,9 +1,11 @@
 @use '../../atoms/scroll/scrollbar';
+@use '../../partials/text';
+@use '../../partials/dir';
 
 .message,
 .ph-msg {
-  padding: var(--sp-ultra-tight) var(--sp-normal);
-  padding-right: var(--sp-extra-tight);
+  padding: var(--sp-ultra-tight);
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
   display: flex;
 
   &:hover {
@@ -12,17 +14,11 @@
       display: flex;
     }
   }
-
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
   
   &__avatar-container {
     padding-top: 6px;
-    margin-right: var(--sp-tight);
+    @include dir.side(margin, 0, var(--sp-tight));
+
     & .avatar-container {
       transition: transform 200ms var(--fluid-push);
       &:hover {
@@ -34,13 +30,6 @@
       cursor: pointer;
       display: flex;
     }
-
-    [dir=rtl] & {
-      margin: {
-        left: var(--sp-tight);
-        right: 0;
-      }
-    }
   }
 
   &__main-container {
@@ -62,7 +51,9 @@
     width: var(--av-small);
   }
   &--focus {
-    box-shadow: inset 2px 0 0 var(--bg-caution);
+    --ltr: inset 2px 0 0 var(--bg-caution);
+    --rtl: inset -2px 0 0 var(--bg-caution);
+    @include dir.prop(box-shadow, var(--ltr), var(--rtl));
     background-color: var(--bg-caution-hover);
   }
 }
@@ -77,20 +68,13 @@
 
   &__header,
   &__body > div {
-    margin: var(--sp-ultra-tight) 0;
-    margin-right: var(--sp-extra-tight);
+    margin: var(--sp-ultra-tight);
+    @include dir.side(margin, 0, var(--sp-extra-tight));
     height: var(--fs-b1);
     width: 100%;
     max-width: 100px;
     background-color: var(--bg-surface-hover);
     border-radius: calc(var(--bo-radius) / 2);
-
-    [dir=rtl] & {
-      margin: {
-        right: 0;
-        left: var(--sp-extra-tight);
-      }
-    }
   }
   &__body {
     display: flex;
@@ -111,6 +95,9 @@
 .message__reactions {
   max-width: calc(100% - 88px);
   min-width: 0;
+  @media (max-width: 1124px) {
+    max-width: 100%;
+  }
 }
 
 
@@ -121,24 +108,16 @@
   & .message__profile {
     min-width: 0;
     color: var(--tc-surface-high);
-    margin-right: var(--sp-tight);
+    @include dir.side(margin, 0, var(--sp-tight));
 
-    [dir=rtl] & {
-      margin-left: var(--sp-tight);
-      margin-right: 0;
-    }
-
-    & > .text {
+    & > span {
+      @extend .cp-txt__ellipsis;
       color: inherit;
-      font-weight: 500;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
     }
-    & > .text:last-child { display: none; }
+    & > span:last-child { display: none; }
     &:hover {
-      & > .text:first-child { display: none; }
-      & > .text:last-child { display: block; }
+      & > span:first-child { display: none; }
+      & > span:last-child { display: block; }
     }
   }
 
@@ -167,10 +146,8 @@
     }
   }
   .text {
+    @extend .cp-txt__ellipsis;
     color: var(--tc-surface-low);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
   .ic-raw {
     width: 16px;
@@ -187,12 +164,16 @@
   & a {
     word-break: break-word;
   }
+  & > .text > a {
+    white-space: initial !important;
+  }
+  
   & span[data-mx-pill] {
     background-color: hsla(0, 0%, 64%, 0.15);
     padding: 0 2px;
     border-radius: 4px;
     cursor: pointer;
-    font-weight: 500;
+    font-weight: var(--fw-medium);
     &:hover {
       background-color: hsla(0, 0%, 64%, 0.3);
       color: var(--tc-surface-high);
@@ -221,6 +202,7 @@
       opacity: 0;
     }
   }
+
   .data-mx-spoiler--visible {
     background-color: var(--bg-surface-active) !important;
     color: inherit !important;
@@ -236,10 +218,8 @@
 .message__edit {
   padding: var(--sp-extra-tight) 0;
   &-btns button {
-    margin: var(--sp-tight) var(--sp-tight) 0 0;
-    [dir=rtl] & {
-      margin: var(--sp-tight) 0 0 var(--sp-tight);
-    }
+    margin: var(--sp-tight) 0 0 0;
+    @include dir.side(margin, 0, var(--sp-tight));
   }
 }
 .message__reactions {
@@ -256,7 +236,8 @@
   }
 }
 .msg__reaction {
-  margin: var(--sp-extra-tight) var(--sp-extra-tight) 0 0;
+  margin: var(--sp-extra-tight) 0 0 0;
+  @include dir.side(margin, 0, var(--sp-extra-tight));
   padding: 0 var(--sp-ultra-tight);
   min-height: 26px;
   display: inline-flex;
@@ -268,8 +249,8 @@
   cursor: pointer;
 
   & .react-emoji {
-    width: 14px;
-    height: 14px;
+    width: 16px;
+    height: 16px;
     margin: 2px;
   }
   &-count {
@@ -277,19 +258,12 @@
     color: var(--tc-surface-normal)
   }
   &-tooltip .react-emoji  {
-    width: 14px;
-    height: 14px;
+    width: 16px;
+    height: 16px;
     margin: 0 var(--sp-ultra-tight);
     margin-bottom: -2px;
   }
 
-  [dir=rtl] & {
-    margin: {
-      right: 0;
-      left: var(--sp-extra-tight);
-    }
-  }
-
   @media (hover: hover) {
     &:hover {
       background-color: var(--bg-surface-hover);
@@ -315,7 +289,9 @@
 .message__options {
   position: absolute;
   top: 0;
-  right: 60px;
+  @include dir.prop(right, 60px, unset);
+  @include dir.prop(left, unset, 60px);
+
   z-index: 99;
   transform: translateY(-50%);
 
@@ -323,32 +299,44 @@
   box-shadow: var(--bs-surface-border);
   background-color: var(--bg-surface-low);
   display: none;
-
-  [dir=rtl] & {
-    left: 60px;
-    right: unset;
-  }
 }
 
 // markdown formating
 .message__body {
+  & h1, h2, h3, h4, h5, h6 {
+    margin: 0;
+    margin-bottom: var(--sp-ultra-tight);
+    font-weight: var(--fw-medium);
+    &:first-child {
+      margin-top: 0;
+    }
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
   & h1,
   & h2 {
     color: var(--tc-surface-high);
-    margin: var(--sp-loose) 0 var(--sp-normal);
-    line-height: var(--lh-h1);
+    margin-top: var(--sp-normal);
+    font-size: var(--fs-h2);
+    line-height: var(--lh-h2);
+    letter-spacing: var(--ls-h2);
   }
   & h3,
   & h4 {
     color: var(--tc-surface-high);
-    margin: var(--sp-normal) 0 var(--sp-tight);
-    line-height: var(--lh-h2);
+    margin-top: var(--sp-tight);
+    font-size: var(--fs-s1);
+    line-height: var(--lh-s1);
+    letter-spacing: var(--ls-s1);
   }
   & h5,
   & h6 {
     color: var(--tc-surface-high);
-    margin: var(--sp-tight) 0 var(--sp-extra-tight);
-    line-height: var(--lh-s1);
+    margin-top: var(--sp-extra-tight);
+    font-size: var(--fs-b1);
+    line-height: var(--lh-b1);
+    letter-spacing: var(--ls-b1);
   }
   & hr {
     border-color: var(--bg-divider);
@@ -394,7 +382,7 @@
     @include scrollbar.scroll--auto-hide;
   }
   & pre {
-    display: inline-block;
+    width: fit-content;
     max-width: 100%;
     @include scrollbar.scroll;
     @include scrollbar.scroll__h;
@@ -405,43 +393,20 @@
     }
   }
   & blockquote {
-    display: inline-block;
+    width: fit-content;
     max-width: 100%;
-    padding-left: var(--sp-extra-tight);
-    border-left: 4px solid var(--bg-surface-active);
+    @include dir.side(border, 4px solid var(--bg-surface-active), 0);
     white-space: initial !important;
 
     & > * {
       white-space: pre-wrap;
     }
-
-    [dir=rtl] & {
-      padding: {
-        left: 0;
-        right: var(--sp-extra-tight);
-      }
-      border: {
-        left: none;
-        right: 4px solid var(--bg-surface-active);
-      }
-    }
   }
   & ul,
   & ol {
     margin: var(--sp-ultra-tight) 0;
-    padding-left: 24px;
+    @include dir.side(padding, 24px, 0);
     white-space: initial !important;
-    
-    & > * {
-      white-space: pre-wrap;
-    }
-
-    [dir=rtl] & {
-      padding: {
-        left: 0;
-        right: 24px;
-      }
-    }
   }
   & ul.contains-task-list {
     padding: 0;

src/app/molecules/message/TimelineChange.scss

@@ -1,6 +1,9 @@
+@use '../../partials/dir';
+
 .timeline-change {
-  padding: var(--sp-ultra-tight) var(--sp-normal);
-  padding-right: var(--sp-extra-tight);
+  padding: var(--sp-ultra-tight);
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
+
   display: flex;
   align-items: center;
   width: 100%;
@@ -9,13 +12,6 @@
     background-color: var(--bg-surface-hover);
   }
 
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
-
   &__avatar-container {
     width: var(--av-small);
     display: inline-flex;
@@ -36,5 +32,6 @@
     min-width: 0;
 
     margin: 0 var(--sp-tight);
+    word-break: break-word;
   }
 }

src/app/molecules/people-selector/PeopleSelector.scss

@@ -1,17 +1,14 @@
+@use '../../partials/text';
+@use '../../partials/dir';
+
 .people-selector {
   width: 100%;
   padding: var(--sp-extra-tight);
-  padding-left: var(--sp-normal);
+  @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
   display: flex;
   align-items: center;
   cursor: pointer;
-  
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
+
   @media (hover: hover) {
     &:hover {
       background-color: var(--bg-surface-hover);
@@ -26,13 +23,11 @@
   }
 
   &__name {
+    @extend .cp-txt__ellipsis;
     flex: 1;
     min-width: 0;
     margin: 0 var(--sp-tight);
     color: var(--tc-surface-normal);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
   }
   &__role {
     color: var(--tc-surface-low);

src/app/molecules/popup-window/PopupWindow.jsx

@@ -68,7 +68,7 @@ function PopupWindow({
             <Header>
               <IconButton size="small" src={ChevronLeftIC} onClick={onRequestClose} tooltip="Back" />
               <TitleWrapper>
-                <Text variant="s1">{twemojify(title)}</Text>
+                <Text variant="s1" weight="medium" primary>{twemojify(title)}</Text>
               </TitleWrapper>
               {drawerOptions}
             </Header>
@@ -84,7 +84,7 @@ function PopupWindow({
         <div className="pw__content">
           <Header>
             <TitleWrapper>
-              <Text variant="h2">{twemojify(contentTitle !== null ? contentTitle : title)}</Text>
+              <Text variant="h2" weight="medium" primary>{twemojify(contentTitle !== null ? contentTitle : title)}</Text>
             </TitleWrapper>
             {contentOptions}
           </Header>

src/app/molecules/popup-window/PopupWindow.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .pw-model {
   --modal-height: 656px;
   max-height: var(--modal-height) !important;
@@ -5,8 +7,6 @@
 }
 
 .pw {
-  --popup-window-drawer-width: 280px;
-
   width: 100%;
   height: 100%;
   background-color: var(--bg-surface);
@@ -16,14 +16,7 @@
   &__drawer {
     width: var(--popup-window-drawer-width);
     background-color: var(--bg-surface-low);
-    border-right: 1px solid var(--bg-surface-border);
-
-    [dir=rtl] & {
-      border: {
-        right: none;
-        left: 1px solid var(--bg-surface-border);
-      }
-    }
+    @include dir.side(border, none, 1px solid var(--bg-surface-border));
   }
   &__content {
     flex: 1;
@@ -52,11 +45,9 @@
 .pw__drawer {
   & .header {
     padding-left: var(--sp-tight);
+    @include dir.side(padding, var(--sp-tight), var(--sp-tight));
     & .header__title-wrapper {
-      margin: 0 var(--sp-extra-tight);
-    }
-    [dir=rtl] & {
-        padding-right: var(--sp-tight);
+      @include dir.side(margin, var(--sp-ultra-tight), var(--sp-extra-tight));
     }
   }
 }
@@ -77,15 +68,8 @@
 
   & .context-menu__item > button {
     border-radius: var(--bo-radius);
-    & .text {
-      color: var(--tc-surface-normal);
-    }
     & .ic-raw {
-      margin-right: var(--sp-tight);
-      [dir=rtl] & {
-        margin-right: 0;
-        margin-left: var(--sp-tight);
-      }
+      @include dir.side(margin, 0, var(--sp-tight));
     }
   }
 }

src/app/molecules/power-level-selector/PowerLevelSelector.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './PowerLevelSelector.scss';
+
+import IconButton from '../../atoms/button/IconButton';
+import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
+
+import CheckIC from '../../../../public/res/ic/outlined/check.svg';
+
+function PowerLevelSelector({
+  value, max, onSelect,
+}) {
+  const handleSubmit = (e) => {
+    const powerLevel = e.target.elements['power-level']?.value;
+    if (!powerLevel) return;
+    onSelect(Number(powerLevel));
+  };
+
+  return (
+    <div className="power-level-selector">
+      <MenuHeader>Power level selector</MenuHeader>
+      <form onSubmit={(e) => { e.preventDefault(); handleSubmit(e); }}>
+        <input
+          className="input"
+          defaultValue={value}
+          type="number"
+          name="power-level"
+          placeholder="Power level"
+          max={max}
+          autoComplete="off"
+          required
+        />
+        <IconButton variant="primary" src={CheckIC} type="submit" />
+      </form>
+      {max >= 0 && <MenuHeader>Presets</MenuHeader>}
+      {max >= 100 && <MenuItem variant={value === 100 ? 'positive' : 'surface'} onClick={() => onSelect(100)}>Admin - 100</MenuItem>}
+      {max >= 50 && <MenuItem variant={value === 50 ? 'positive' : 'surface'} onClick={() => onSelect(50)}>Mod - 50</MenuItem>}
+      {max >= 0 && <MenuItem variant={value === 0 ? 'positive' : 'surface'} onClick={() => onSelect(0)}>Member - 0</MenuItem>}
+    </div>
+  );
+}
+
+PowerLevelSelector.propTypes = {
+  value: PropTypes.number.isRequired,
+  max: PropTypes.number.isRequired,
+  onSelect: PropTypes.func.isRequired,
+};
+
+export default PowerLevelSelector;

src/app/molecules/power-level-selector/PowerLevelSelector.scss

@@ -0,0 +1,20 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
+.power-level-selector {
+  & .context-menu__item .text {
+    margin: 0 !important;
+  }
+
+  & form {
+    margin: var(--sp-normal);
+    display: flex;
+      
+    & input {
+      @extend .cp-fx__item-one;
+      @include dir.side(margin, 0, var(--sp-tight));
+      width: 148px;
+      padding: 9px var(--sp-tight);
+    }
+  }
+}

src/app/molecules/room-aliases/RoomAliases.jsx

@@ -0,0 +1,352 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import './RoomAliases.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import { Debounce } from '../../../util/common';
+import { isRoomAliasAvailable } from '../../../util/matrixUtil';
+
+import Text from '../../atoms/text/Text';
+import Button from '../../atoms/button/Button';
+import Input from '../../atoms/input/Input';
+import Checkbox from '../../atoms/button/Checkbox';
+import Toggle from '../../atoms/button/Toggle';
+import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
+import SettingTile from '../setting-tile/SettingTile';
+
+import { useStore } from '../../hooks/useStore';
+
+function useValidate(hsString) {
+  const [debounce] = useState(new Debounce());
+  const [validate, setValidate] = useState({ alias: null, status: cons.status.PRE_FLIGHT });
+
+  const setValidateToDefault = () => {
+    setValidate({
+      alias: null,
+      status: cons.status.PRE_FLIGHT,
+    });
+  };
+
+  const checkValueOK = (value) => {
+    if (value.trim() === '') {
+      setValidateToDefault();
+      return false;
+    }
+    if (!value.match(/^[a-zA-Z0-9_-]+$/)) {
+      setValidate({
+        alias: null,
+        status: cons.status.ERROR,
+        msg: 'Invalid character: only letter, numbers and _- are allowed.',
+      });
+      return false;
+    }
+    return true;
+  };
+
+  const handleAliasChange = (e) => {
+    const input = e.target;
+    if (validate.status !== cons.status.PRE_FLIGHT) {
+      setValidateToDefault();
+    }
+    if (checkValueOK(input.value) === false) return;
+
+    debounce._(async () => {
+      const { value } = input;
+      const alias = `#${value}:${hsString}`;
+      if (checkValueOK(value) === false) return;
+
+      setValidate({
+        alias,
+        status: cons.status.IN_FLIGHT,
+        msg: `validating ${alias}...`,
+      });
+
+      const isValid = await isRoomAliasAvailable(alias);
+      setValidate(() => {
+        if (e.target.value !== value) {
+          return { alias: null, status: cons.status.PRE_FLIGHT };
+        }
+        return {
+          alias,
+          status: isValid ? cons.status.SUCCESS : cons.status.ERROR,
+          msg: isValid ? `${alias} is available.` : `${alias} is already in use.`,
+        };
+      });
+    }, 600)();
+  };
+
+  return [validate, setValidateToDefault, handleAliasChange];
+}
+
+function getAliases(roomId) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+
+  const main = room.getCanonicalAlias();
+  const published = room.getAltAliases();
+  if (main && !published.includes(main)) published.splice(0, 0, main);
+
+  return {
+    main,
+    published: [...new Set(published)],
+    local: [],
+  };
+}
+
+function RoomAliases({ roomId }) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  const userId = mx.getUserId();
+  const hsString = userId.slice(userId.indexOf(':') + 1);
+
+  const isMountedStore = useStore();
+  const [isPublic, setIsPublic] = useState(false);
+  const [isLocalVisible, setIsLocalVisible] = useState(false);
+  const [aliases, setAliases] = useState(getAliases(roomId));
+  const [selectedAlias, setSelectedAlias] = useState(null);
+  const [deleteAlias, setDeleteAlias] = useState(null);
+  const [validate, setValidateToDefault, handleAliasChange] = useValidate(hsString);
+
+  const canPublishAlias = room.currentState.maySendStateEvent('m.room.canonical_alias', userId);
+
+  useEffect(() => isMountedStore.setItem(true), []);
+
+  useEffect(() => {
+    let isUnmounted = false;
+
+    const loadLocalAliases = async () => {
+      let local = [];
+      try {
+        const result = await mx.unstableGetLocalAliases(roomId);
+        local = result.aliases.filter((alias) => !aliases.published.includes(alias));
+      } catch {
+        local = [];
+      }
+      aliases.local = [...new Set(local.reverse())];
+
+      if (isUnmounted) return;
+      setAliases({ ...aliases });
+    };
+    const loadVisibility = async () => {
+      const result = await mx.getRoomDirectoryVisibility(roomId);
+      if (isUnmounted) return;
+      setIsPublic(result.visibility === 'public');
+    };
+    loadLocalAliases();
+    loadVisibility();
+    return () => {
+      isUnmounted = true;
+    };
+  }, [roomId]);
+
+  const toggleDirectoryVisibility = () => {
+    mx.setRoomDirectoryVisibility(roomId, isPublic ? 'private' : 'public');
+    setIsPublic(!isPublic);
+  };
+
+  const handleAliasSubmit = async (e) => {
+    e.preventDefault();
+    if (validate.status === cons.status.ERROR) return;
+    if (!validate.alias) return;
+
+    const { alias } = validate;
+    const aliasInput = e.target.elements['alias-input'];
+    aliasInput.value = '';
+    setValidateToDefault();
+
+    try {
+      aliases.local.push(alias);
+      setAliases({ ...aliases });
+      await mx.createAlias(alias, roomId);
+    } catch {
+      if (isMountedStore.getItem()) {
+        const lIndex = alias.local.indexOf(alias);
+        if (lIndex === -1) return;
+        aliases.local.splice(lIndex, 1);
+        setAliases({ ...aliases });
+      }
+    }
+  };
+
+  const handleAliasSelect = (alias) => {
+    setSelectedAlias(alias === selectedAlias ? null : alias);
+  };
+
+  const handlePublishAlias = (alias) => {
+    const { main, published } = aliases;
+    let { local } = aliases;
+
+    if (!published.includes(aliases)) {
+      published.push(alias);
+      local = local.filter((al) => al !== alias);
+      mx.sendStateEvent(roomId, 'm.room.canonical_alias', {
+        alias: main,
+        alt_aliases: published.filter((al) => al !== main),
+      });
+      setAliases({ main, published, local });
+      setSelectedAlias(null);
+    }
+  };
+
+  const handleUnPublishAlias = (alias) => {
+    let { main, published } = aliases;
+    const { local } = aliases;
+
+    if (published.includes(alias) || main === alias) {
+      if (main === alias) main = null;
+      published = published.filter((al) => al !== alias);
+      local.push(alias);
+      mx.sendStateEvent(roomId, 'm.room.canonical_alias', {
+        alias: main,
+        alt_aliases: published.filter((al) => al !== main),
+      });
+      setAliases({ main, published, local });
+      setSelectedAlias(null);
+    }
+  };
+
+  const handleSetMainAlias = (alias) => {
+    let { main, local } = aliases;
+    const { published } = aliases;
+
+    if (main !== alias) {
+      main = alias;
+      if (!published.includes(alias)) published.splice(0, 0, alias);
+      local = local.filter((al) => al !== alias);
+      mx.sendStateEvent(roomId, 'm.room.canonical_alias', {
+        alias: main,
+        alt_aliases: published.filter((al) => al !== main),
+      });
+      setAliases({ main, published, local });
+      setSelectedAlias(null);
+    }
+  };
+
+  const handleDeleteAlias = async (alias) => {
+    try {
+      setDeleteAlias({ alias, status: cons.status.IN_FLIGHT, msg: 'deleting...' });
+      await mx.deleteAlias(alias);
+      let { main, published, local } = aliases;
+      if (published.includes(alias)) {
+        handleUnPublishAlias(alias);
+        if (main === alias) main = null;
+        published = published.filter((al) => al !== alias);
+      }
+
+      local = local.filter((al) => al !== alias);
+      setAliases({ main, published, local });
+      setDeleteAlias(null);
+      setSelectedAlias(null);
+    } catch (err) {
+      setDeleteAlias({ alias, status: cons.status.ERROR, msg: err.message });
+    }
+  };
+
+  const renderAliasBtns = (alias) => {
+    const isPublished = aliases.published.includes(alias);
+    const isMain = aliases.main === alias;
+    if (deleteAlias?.alias === alias) {
+      const isError = deleteAlias.status === cons.status.ERROR;
+      return (
+        <div className="room-aliases__item-btns">
+          <Text variant="b2">
+            <span style={{ color: isError ? 'var(--tc-danger-high' : 'inherit' }}>{deleteAlias.msg}</span>
+          </Text>
+        </div>
+      );
+    }
+
+    return (
+      <div className="room-aliases__item-btns">
+        {canPublishAlias && !isMain && <Button onClick={() => handleSetMainAlias(alias)} variant="primary">Set as Main</Button>}
+        {!isPublished && canPublishAlias && <Button onClick={() => handlePublishAlias(alias)} variant="positive">Publish</Button>}
+        {isPublished && canPublishAlias && <Button onClick={() => handleUnPublishAlias(alias)} variant="caution">Un-Publish</Button>}
+        <Button onClick={() => handleDeleteAlias(alias)} variant="danger">Delete</Button>
+      </div>
+    );
+  };
+
+  const renderAlias = (alias) => {
+    const isActive = selectedAlias === alias;
+    const disabled = !canPublishAlias && aliases.published.includes(alias);
+    const isMain = aliases.main === alias;
+
+    return (
+      <React.Fragment key={`${alias}-wrapper`}>
+        <div className="room-aliases__alias-item" key={alias}>
+          <Checkbox variant="positive" disabled={disabled} isActive={isActive} onToggle={() => handleAliasSelect(alias)} />
+          <Text>
+            {alias}
+            {isMain && <span>Main</span>}
+          </Text>
+        </div>
+        {isActive && renderAliasBtns(alias)}
+      </React.Fragment>
+    );
+  };
+
+  let inputState = 'normal';
+  if (validate.status === cons.status.ERROR) inputState = 'error';
+  if (validate.status === cons.status.SUCCESS) inputState = 'success';
+  return (
+    <div className="room-aliases">
+      <SettingTile
+        title="Publish to room directory"
+        content={<Text variant="b3">{`Publish this room to the ${hsString}'s public room directory?`}</Text>}
+        options={(
+          <Toggle
+            isActive={isPublic}
+            onToggle={toggleDirectoryVisibility}
+            disabled={!canPublishAlias}
+          />
+        )}
+      />
+
+      <div className="room-aliases__content">
+        <MenuHeader>Published addresses</MenuHeader>
+        {(aliases.published.length === 0) && <Text className="room-aliases__message">No published addresses</Text>}
+        {(aliases.published.length > 0 && !aliases.main) && <Text className="room-aliases__message">No Main address (select one from below)</Text>}
+        {aliases.published.map(renderAlias)}
+        <Text className="room-aliases__message" variant="b3">Published addresses can be used by anyone on any server to join your room. To publish an address, it needs to be set as a local address first.</Text>
+      </div>
+      { isLocalVisible && (
+        <div className="room-aliases__content">
+          <MenuHeader>Local addresses</MenuHeader>
+          {(aliases.local.length === 0) && <Text className="room-aliases__message">No local addresses</Text>}
+          {aliases.local.map(renderAlias)}
+          <Text className="room-aliases__message" variant="b3">Set local addresses for this room so users can find this room through your homeserver.</Text>
+
+          <Text className="room-aliases__form-label" variant="b2">Add local address</Text>
+          <form className="room-aliases__form" onSubmit={handleAliasSubmit}>
+            <div className="room-aliases__input-wrapper">
+              <Input
+                name="alias-input"
+                state={inputState}
+                onChange={handleAliasChange}
+                placeholder="my_room_address"
+                required
+              />
+            </div>
+            <Button variant="primary" type="submit">Add</Button>
+          </form>
+          <div className="room-aliases__input-status">
+            {validate.status === cons.status.SUCCESS && <Text className="room-aliases__valid" variant="b2">{validate.msg}</Text>}
+            {validate.status === cons.status.ERROR && <Text className="room-aliases__invalid" variant="b2">{validate.msg}</Text>}
+          </div>
+        </div>
+      )}
+      <div className="room-aliases__content">
+        <Button onClick={() => setIsLocalVisible(!isLocalVisible)}>
+          {`${isLocalVisible ? 'Hide' : 'Add / View'} local address`}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+RoomAliases.propTypes = {
+  roomId: PropTypes.string.isRequired,
+};
+
+export default RoomAliases;

src/app/molecules/room-aliases/RoomAliases.scss

@@ -0,0 +1,84 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+@use '../../partials/text';
+
+.room-aliases {
+  &__message,
+  & .setting-tile {
+    margin: var(--sp-tight) var(--sp-normal);
+  }
+  & .setting-tile {
+    margin-bottom: var(--sp-loose);
+  }
+
+  &__alias-item {
+    padding: var(--sp-extra-tight) var(--sp-normal);
+    @extend .cp-fx__row--s-c;
+    &.checkbox {
+      @include dir.side(margin, 0 , var(--sp-tight));
+    }
+    & .text {
+      @extend .cp-fx__item-one;
+      @extend .cp-txt__ellipsis;
+      color: var(--tc-surface-high);
+      span {
+        margin: 0 var(--sp-extra-tight);
+        padding: 0 var(--sp-ultra-tight);
+        color: var(--bg-surface);
+        background-color: var(--tc-surface-low);
+        border-radius: 4px;
+      }
+    }
+  }
+  &__item-btns {
+    @include dir.side(margin, 48px, 0);
+    & button {
+      padding: var(--sp-ultra-tight) var(--sp-tight);
+      margin-bottom: var(--sp-tight);
+      @include dir.side(margin, 0, var(--sp-tight));
+    }
+  }
+
+  &__content {
+    margin-bottom: var(--sp-normal);
+
+    & .checkbox {
+      @include dir.side(margin, 0, var(--sp-tight));
+      min-width: 20px;
+    }
+    & > button {
+      margin: 0 var(--sp-normal);
+    }
+  }
+  
+  &__form {
+    padding: var(--sp-normal);
+    padding-top: 0;
+    display: flex;
+    &-label {
+      padding: var(--sp-normal) var(--sp-normal) var(--sp-ultra-tight);
+    }
+  }
+  
+  &__input-wrapper {
+    display: flex;
+    @extend .cp-fx__item-one;
+    @include dir.side(margin, 0, var(--sp-tight));
+    
+    & .input-container {
+      @extend .cp-fx__item-one;
+    }
+  }
+
+  &__input-status {
+    padding: 0 var(--sp-normal);
+  }
+  &__valid {
+    color: var(--tc-positive-high);
+    padding-bottom: var(--sp-normal);
+  }
+  &__invalid {
+    color: var(--tc-danger-high);
+    padding-bottom: var(--sp-normal);
+  }
+}

src/app/molecules/room-encryption/RoomEncryption.jsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import './RoomEncryption.scss';
+
+import initMatrix from '../../../client/initMatrix';
+
+import Text from '../../atoms/text/Text';
+import Toggle from '../../atoms/button/Toggle';
+import SettingTile from '../setting-tile/SettingTile';
+
+function RoomEncryption({ roomId }) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  const encryptionEvents = room.currentState.getStateEvents('m.room.encryption');
+  const [isEncrypted, setIsEncrypted] = useState(encryptionEvents.length > 0);
+  const canEnableEncryption = room.currentState.maySendStateEvent('m.room.encryption', mx.getUserId());
+
+  const handleEncryptionEnable = () => {
+    const joinRule = room.getJoinRule();
+    const confirmMsg1 = 'It is not recommended to add encryption in public room. Anyone can find and join public rooms, so anyone can read messages in them.';
+    const confirmMsg2 = 'Once enabled, encryption for a room cannot be disabled. Messages sent in an encrypted room cannot be seen by the server, only by the participants of the room. Enabling encryption may prevent many bots and bridges from working correctly';
+    if (joinRule === 'public' ? confirm(confirmMsg1) : true) {
+      if (confirm(confirmMsg2)) {
+        setIsEncrypted(true);
+        mx.sendStateEvent(roomId, 'm.room.encryption', {
+          algorithm: 'm.megolm.v1.aes-sha2',
+        });
+      }
+    }
+  };
+
+  return (
+    <div className="room-encryption">
+      <SettingTile
+        title="Enable room encryption"
+        content={(
+          <Text variant="b3">Once enabled, encryption cannot be disabled.</Text>
+        )}
+        options={(
+          <Toggle
+            isActive={isEncrypted}
+            onToggle={handleEncryptionEnable}
+            disabled={isEncrypted || !canEnableEncryption}
+          />
+        )}
+      />
+    </div>
+  );
+}
+
+RoomEncryption.propTypes = {
+  roomId: PropTypes.string.isRequired,
+};
+
+export default RoomEncryption;

src/app/molecules/room-encryption/RoomEncryption.scss

@@ -0,0 +1,5 @@
+.room-encryption {
+  & .setting-tile {
+    margin: var(--sp-normal);
+  }
+}

src/app/molecules/room-history-visibility/RoomHistoryVisibility.jsx

@@ -0,0 +1,99 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import './RoomHistoryVisibility.scss';
+
+import initMatrix from '../../../client/initMatrix';
+
+import Text from '../../atoms/text/Text';
+import RadioButton from '../../atoms/button/RadioButton';
+import { MenuItem } from '../../atoms/context-menu/ContextMenu';
+
+const visibility = {
+  WORLD_READABLE: 'world_readable',
+  SHARED: 'shared',
+  INVITED: 'invited',
+  JOINED: 'joined',
+};
+
+const items = [{
+  iconSrc: null,
+  text: 'World readable (anyone can read)',
+  type: visibility.WORLD_READABLE,
+}, {
+  iconSrc: null,
+  text: 'Member shared (since the point in time of selecting this option)',
+  type: visibility.SHARED,
+}, {
+  iconSrc: null,
+  text: 'Member invited (since they were invited)',
+  type: visibility.INVITED,
+}, {
+  iconSrc: null,
+  text: 'Member joined (since they joined)',
+  type: visibility.JOINED,
+}];
+
+function setHistoryVisibility(roomId, type) {
+  const mx = initMatrix.matrixClient;
+
+  return mx.sendStateEvent(
+    roomId, 'm.room.history_visibility',
+    {
+      history_visibility: type,
+    },
+  );
+}
+
+function useVisibility(roomId) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+
+  const [activeType, setActiveType] = useState(room.getHistoryVisibility());
+  useEffect(() => setActiveType(room.getHistoryVisibility()), [roomId]);
+
+  const setVisibility = useCallback((item) => {
+    if (item.type === activeType.type) return;
+    setActiveType(item.type);
+    setHistoryVisibility(roomId, item.type);
+  }, [activeType, roomId]);
+
+  return [activeType, setVisibility];
+}
+
+function RoomHistoryVisibility({ roomId }) {
+  const [activeType, setVisibility] = useVisibility(roomId);
+  const mx = initMatrix.matrixClient;
+  const userId = mx.getUserId();
+  const room = mx.getRoom(roomId);
+  const { currentState } = room;
+
+  const canChange = currentState.maySendStateEvent('m.room.history_visibility', userId);
+
+  return (
+    <div className="room-history-visibility">
+      {
+        items.map((item) => (
+          <MenuItem
+            variant={activeType === item.type ? 'positive' : 'surface'}
+            key={item.type}
+            iconSrc={item.iconSrc}
+            onClick={() => setVisibility(item)}
+            disabled={(!canChange)}
+          >
+            <Text varient="b1">
+              <span>{item.text}</span>
+              <RadioButton isActive={activeType === item.type} />
+            </Text>
+          </MenuItem>
+        ))
+      }
+      <Text variant="b3">Changes to who can read history will only apply to future messages in this room. The visibility of existing history will be unchanged.</Text>
+    </div>
+  );
+}
+
+RoomHistoryVisibility.propTypes = {
+  roomId: PropTypes.string.isRequired,
+};
+
+export default RoomHistoryVisibility;

src/app/molecules/room-history-visibility/RoomHistoryVisibility.scss

@@ -0,0 +1,25 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+@use '../../partials/text';
+
+.room-history-visibility {
+  & .context-menu__item .text {
+    margin: 0 !important;
+    @extend .cp-fx__item-one;
+    @extend .cp-fx__row--s-c;
+    
+    & span:first-child {
+      @extend .cp-fx__item-one;
+      @extend .cp-txt__ellipsis;
+    }
+    
+    & .radio-btn {
+      @include dir.side(margin, var(--sp-tight), 0);
+    }
+  }
+
+  & > .text {
+    margin: var(--sp-normal);
+    margin-top: var(--sp-ultra-tight);
+  }
+}

src/app/molecules/room-intro/RoomIntro.jsx

@@ -15,7 +15,7 @@ function RoomIntro({
     <div className="room-intro">
       <Avatar imageSrc={avatarSrc} text={name} bgColor={colorMXID(roomId)} size="large" />
       <div className="room-intro__content">
-        <Text className="room-intro__name" variant="h1">{twemojify(heading)}</Text>
+        <Text className="room-intro__name" variant="h1" weight="medium" primary>{twemojify(heading)}</Text>
         <Text className="room-intro__desc" variant="b1">{twemojify(desc, undefined, true)}</Text>
         { time !== null && <Text className="room-intro__time" variant="b3">{time}</Text>}
       </div>

src/app/molecules/room-intro/RoomIntro.scss

@@ -1,15 +1,10 @@
+@use '../../partials/dir';
+
 .room-intro {
   margin-top: calc(2 * var(--sp-extra-loose));
   margin-bottom: var(--sp-extra-loose);
-  padding-left: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
-  padding-right: var(--sp-extra-tight);
-
-  [dir=rtl] & {
-    padding: {
-      left: var(--sp-extra-tight);
-      right: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
-    }
-  }
+  --left-pad: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
+  @include dir.side(padding, var(--left-pad), var(--sp-extra-tight));
 
   .room-intro__content {
     margin-top: var(--sp-extra-loose);

src/app/molecules/room-notification/RoomNotification.jsx

@@ -0,0 +1,157 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import './RoomNotification.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+
+import Text from '../../atoms/text/Text';
+import RadioButton from '../../atoms/button/RadioButton';
+import { MenuItem } from '../../atoms/context-menu/ContextMenu';
+
+import BellIC from '../../../../public/res/ic/outlined/bell.svg';
+import BellRingIC from '../../../../public/res/ic/outlined/bell-ring.svg';
+import BellPingIC from '../../../../public/res/ic/outlined/bell-ping.svg';
+import BellOffIC from '../../../../public/res/ic/outlined/bell-off.svg';
+
+const items = [{
+  iconSrc: BellIC,
+  text: 'Global',
+  type: cons.notifs.DEFAULT,
+}, {
+  iconSrc: BellRingIC,
+  text: 'All message',
+  type: cons.notifs.ALL_MESSAGES,
+}, {
+  iconSrc: BellPingIC,
+  text: 'Mentions & Keywords',
+  type: cons.notifs.MENTIONS_AND_KEYWORDS,
+}, {
+  iconSrc: BellOffIC,
+  text: 'Mute',
+  type: cons.notifs.MUTE,
+}];
+
+function getNotifType(roomId) {
+  const mx = initMatrix.matrixClient;
+  const pushRule = mx.getRoomPushRule('global', roomId);
+
+  if (typeof pushRule === 'undefined') {
+    const overridePushRules = mx.getAccountData('m.push_rules')?.getContent()?.global?.override;
+    if (typeof overridePushRules === 'undefined') return 0;
+
+    const isMuteOverride = overridePushRules.find((rule) => (
+      rule.rule_id === roomId
+      && rule.actions[0] === 'dont_notify'
+      && rule.conditions[0].kind === 'event_match'
+    ));
+
+    return isMuteOverride ? cons.notifs.MUTE : cons.notifs.DEFAULT;
+  }
+  if (pushRule.actions[0] === 'notify') return cons.notifs.ALL_MESSAGES;
+  return cons.notifs.MENTIONS_AND_KEYWORDS;
+}
+
+function setRoomNotifType(roomId, newType) {
+  const mx = initMatrix.matrixClient;
+  const roomPushRule = mx.getRoomPushRule('global', roomId);
+  const promises = [];
+
+  if (newType === cons.notifs.MUTE) {
+    if (roomPushRule) {
+      promises.push(mx.deletePushRule('global', 'room', roomPushRule.rule_id));
+    }
+    promises.push(mx.addPushRule('global', 'override', roomId, {
+      conditions: [
+        {
+          kind: 'event_match',
+          key: 'room_id',
+          pattern: roomId,
+        },
+      ],
+      actions: [
+        'dont_notify',
+      ],
+    }));
+    return promises;
+  }
+
+  const oldState = getNotifType(roomId);
+  if (oldState === cons.notifs.MUTE) {
+    promises.push(mx.deletePushRule('global', 'override', roomId));
+  }
+
+  if (newType === cons.notifs.DEFAULT) {
+    if (roomPushRule) {
+      promises.push(mx.deletePushRule('global', 'room', roomPushRule.rule_id));
+    }
+    return Promise.all(promises);
+  }
+
+  if (newType === cons.notifs.MENTIONS_AND_KEYWORDS) {
+    promises.push(mx.addPushRule('global', 'room', roomId, {
+      actions: [
+        'dont_notify',
+      ],
+    }));
+    promises.push(mx.setPushRuleEnabled('global', 'room', roomId, true));
+    return Promise.all(promises);
+  }
+
+  // cons.notifs.ALL_MESSAGES
+  promises.push(mx.addPushRule('global', 'room', roomId, {
+    actions: [
+      'notify',
+      {
+        set_tweak: 'sound',
+        value: 'default',
+      },
+    ],
+  }));
+
+  promises.push(mx.setPushRuleEnabled('global', 'room', roomId, true));
+
+  return Promise.all(promises);
+}
+
+function useNotifications(roomId) {
+  const [activeType, setActiveType] = useState(getNotifType(roomId));
+  useEffect(() => setActiveType(getNotifType(roomId)), [roomId]);
+
+  const setNotification = useCallback((item) => {
+    if (item.type === activeType.type) return;
+    setActiveType(item.type);
+    setRoomNotifType(roomId, item.type);
+  }, [activeType, roomId]);
+  return [activeType, setNotification];
+}
+
+function RoomNotification({ roomId }) {
+  const [activeType, setNotification] = useNotifications(roomId);
+
+  return (
+    <div className="room-notification">
+      {
+        items.map((item) => (
+          <MenuItem
+            variant={activeType === item.type ? 'positive' : 'surface'}
+            key={item.type}
+            iconSrc={item.iconSrc}
+            onClick={() => setNotification(item)}
+          >
+            <Text varient="b1">
+              <span>{item.text}</span>
+              <RadioButton isActive={activeType === item.type} />
+            </Text>
+          </MenuItem>
+        ))
+      }
+    </div>
+  );
+}
+
+RoomNotification.propTypes = {
+  roomId: PropTypes.string.isRequired,
+};
+
+export default RoomNotification;

src/app/molecules/room-notification/RoomNotification.scss

@@ -0,0 +1,19 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+@use '../../partials/text';
+
+.room-notification {
+  & .context-menu__item .text {
+    @extend .cp-fx__item-one;
+    @extend .cp-fx__row--s-c;
+    
+    & span:first-child {
+      @extend .cp-fx__item-one;
+      @extend .cp-txt__ellipsis;
+    }
+    
+    & .radio-btn {
+      @include dir.side(margin, var(--sp-tight), 0);
+    }
+  }
+}

src/app/molecules/room-options/RoomOptions.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { twemojify } from '../../../util/twemojify';
+
+import initMatrix from '../../../client/initMatrix';
+import { openInviteUser } from '../../../client/action/navigation';
+import * as roomActions from '../../../client/action/room';
+
+import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
+import RoomNotification from '../room-notification/RoomNotification';
+
+import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
+import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
+import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
+
+function RoomOptions({ roomId, afterOptionSelect }) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  const canInvite = room?.canInvite(mx.getUserId());
+
+  const handleMarkAsRead = () => {
+    afterOptionSelect();
+    if (!room) return;
+    const events = room.getLiveTimeline().getEvents();
+    mx.sendReadReceipt(events[events.length - 1]);
+  };
+
+  const handleInviteClick = () => {
+    openInviteUser(roomId);
+    afterOptionSelect();
+  };
+  const handleLeaveClick = () => {
+    if (confirm('Are you really want to leave this room?')) {
+      roomActions.leave(roomId);
+      afterOptionSelect();
+    }
+  };
+
+  return (
+    <>
+      <MenuHeader>{twemojify(`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`)}</MenuHeader>
+      <MenuItem iconSrc={TickMarkIC} onClick={handleMarkAsRead}>Mark as read</MenuItem>
+      <MenuItem
+        iconSrc={AddUserIC}
+        onClick={handleInviteClick}
+        disabled={!canInvite}
+      >
+        Invite
+      </MenuItem>
+      <MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={handleLeaveClick}>Leave</MenuItem>
+      <MenuHeader>Notification</MenuHeader>
+      <RoomNotification roomId={roomId} />
+    </>
+  );
+}
+
+RoomOptions.defaultProps = {
+  afterOptionSelect: null,
+};
+
+RoomOptions.propTypes = {
+  roomId: PropTypes.string.isRequired,
+  afterOptionSelect: PropTypes.func,
+};
+
+export default RoomOptions;

src/app/molecules/room-permissions/RoomPermissions.jsx

@@ -0,0 +1,280 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import './RoomPermissions.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import { getPowerLabel } from '../../../util/matrixUtil';
+import { openReusableContextMenu } from '../../../client/action/navigation';
+import { getEventCords } from '../../../util/common';
+
+import Text from '../../atoms/text/Text';
+import Button from '../../atoms/button/Button';
+import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
+import PowerLevelSelector from '../power-level-selector/PowerLevelSelector';
+import SettingTile from '../setting-tile/SettingTile';
+
+import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+
+import { useForceUpdate } from '../../hooks/useForceUpdate';
+
+const permissionsInfo = {
+  users_default: {
+    name: 'Default role',
+    description: 'Set default role for all members.',
+    default: 0,
+  },
+  events_default: {
+    name: 'Send messages',
+    description: 'Set minimum power level to send messages in room.',
+    default: 0,
+  },
+  'm.reaction': {
+    parent: 'events',
+    name: 'Send reactions',
+    description: 'Set minimum power level to send reactions in room.',
+    default: 0,
+  },
+  redact: {
+    name: 'Delete messages sent by others',
+    description: 'Set minimum power level to delete messages in room.',
+    default: 50,
+  },
+  notifications: {
+    name: 'Ping room',
+    description: 'Set minimum power level to ping room.',
+    default: {
+      room: 50,
+    },
+  },
+  'm.space.child': {
+    parent: 'events',
+    name: 'Manage rooms in space',
+    description: 'Set minimum power level to manage rooms in space.',
+    default: 50,
+  },
+  invite: {
+    name: 'Invite',
+    description: 'Set minimum power level to invite members.',
+    default: 50,
+  },
+  kick: {
+    name: 'Kick',
+    description: 'Set minimum power level to kick members.',
+    default: 50,
+  },
+  ban: {
+    name: 'Ban',
+    description: 'Set minimum power level to ban members.',
+    default: 50,
+  },
+  'm.room.avatar': {
+    parent: 'events',
+    name: 'Change avatar',
+    description: 'Set minimum power level to change room/space avatar.',
+    default: 50,
+  },
+  'm.room.name': {
+    parent: 'events',
+    name: 'Change name',
+    description: 'Set minimum power level to change room/space name.',
+    default: 50,
+  },
+  'm.room.topic': {
+    parent: 'events',
+    name: 'Change topic',
+    description: 'Set minimum power level to change room/space topic.',
+    default: 50,
+  },
+  state_default: {
+    name: 'Change settings',
+    description: 'Set minimum power level to change settings.',
+    default: 50,
+  },
+  'm.room.canonical_alias': {
+    parent: 'events',
+    name: 'Change published address',
+    description: 'Set minimum power level to publish and set main address.',
+    default: 50,
+  },
+  'm.room.power_levels': {
+    parent: 'events',
+    name: 'Change permissions',
+    description: 'Set minimum power level to change permissions.',
+    default: 50,
+  },
+  'm.room.encryption': {
+    parent: 'events',
+    name: 'Enable room encryption',
+    description: 'Set minimum power level to enable room encryption.',
+    default: 50,
+  },
+  'm.room.history_visibility': {
+    parent: 'events',
+    name: 'Change history visibility',
+    description: 'Set minimum power level to change room messages history visibility.',
+    default: 50,
+  },
+  'm.room.tombstone': {
+    parent: 'events',
+    name: 'Upgrade room',
+    description: 'Set minimum power level to upgrade room.',
+    default: 50,
+  },
+  'm.room.pinned_events': {
+    parent: 'events',
+    name: 'Pin messages',
+    description: 'Set minimum power level to pin messages in room.',
+    default: 50,
+  },
+  'm.room.server_acl': {
+    parent: 'events',
+    name: 'Change server ACLs',
+    description: 'Set minimum power level to change server ACLs.',
+    default: 50,
+  },
+  'im.vector.modular.widgets': {
+    parent: 'events',
+    name: 'Modify widgets',
+    description: 'Set minimum power level to modify room widgets.',
+    default: 50,
+  },
+};
+
+const roomPermsGroups = {
+  'General Permissions': ['users_default', 'events_default', 'm.reaction', 'redact', 'notifications'],
+  'Manage members permissions': ['invite', 'kick', 'ban'],
+  'Room profile permissions': ['m.room.avatar', 'm.room.name', 'm.room.topic'],
+  'Settings permissions': ['state_default', 'm.room.canonical_alias', 'm.room.power_levels', 'm.room.encryption', 'm.room.history_visibility'],
+  'Other permissions': ['m.room.tombstone', 'm.room.pinned_events', 'm.room.server_acl', 'im.vector.modular.widgets'],
+};
+
+const spacePermsGroups = {
+  'General Permissions': ['users_default', 'm.space.child'],
+  'Manage members permissions': ['invite', 'kick', 'ban'],
+  'Space profile permissions': ['m.room.avatar', 'm.room.name', 'm.room.topic'],
+  'Settings permissions': ['state_default', 'm.room.canonical_alias', 'm.room.power_levels'],
+};
+
+function useRoomStateUpdate(roomId) {
+  const [, forceUpdate] = useForceUpdate();
+  const mx = initMatrix.matrixClient;
+
+  useEffect(() => {
+    const handleStateEvent = (event) => {
+      if (event.getRoomId() !== roomId) return;
+      forceUpdate();
+    };
+
+    mx.on('RoomState.events', handleStateEvent);
+    return () => {
+      mx.removeListener('RoomState.events', handleStateEvent);
+    };
+  }, [roomId]);
+}
+
+function RoomPermissions({ roomId }) {
+  useRoomStateUpdate(roomId);
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  const pLEvent = room.currentState.getStateEvents('m.room.power_levels')[0];
+  const permissions = pLEvent.getContent();
+  const canChangePermission = room.currentState.maySendStateEvent('m.room.power_levels', mx.getUserId());
+
+  const handlePowerSelector = (e, permKey, parentKey, powerLevel) => {
+    const handlePowerLevelChange = (newPowerLevel) => {
+      if (powerLevel === newPowerLevel) return;
+
+      const newPermissions = { ...permissions };
+      if (parentKey) {
+        newPermissions[parentKey] = {
+          ...permissions[parentKey],
+          [permKey]: newPowerLevel,
+        };
+      } else if (permKey === 'notifications') {
+        newPermissions[permKey] = {
+          ...permissions[permKey],
+          room: newPowerLevel,
+        };
+      } else {
+        newPermissions[permKey] = newPowerLevel;
+      }
+
+      mx.sendStateEvent(roomId, 'm.room.power_levels', newPermissions);
+    };
+
+    openReusableContextMenu(
+      'bottom',
+      getEventCords(e, '.btn-surface'),
+      (closeMenu) => (
+        <PowerLevelSelector
+          value={powerLevel}
+          max={100}
+          onSelect={(pl) => {
+            closeMenu();
+            handlePowerLevelChange(pl);
+          }}
+        />
+      ),
+    );
+  };
+
+  return (
+    <div className="room-permissions">
+      {
+        Object.keys(roomPermsGroups).map((groupKey) => {
+          const groupedPermKeys = roomPermsGroups[groupKey];
+          return (
+            <div className="room-permissions__card" key={groupKey}>
+              <MenuHeader>{groupKey}</MenuHeader>
+              {
+                groupedPermKeys.map((permKey) => {
+                  const permInfo = permissionsInfo[permKey];
+
+                  let powerLevel = 0;
+                  let permValue = permInfo.parent
+                    ? permissions[permInfo.parent][permKey]
+                    : permissions[permKey];
+
+                  if (!permValue) permValue = permInfo.default;
+
+                  if (typeof permValue === 'number') {
+                    powerLevel = permValue;
+                  } else if (permKey === 'notifications') {
+                    powerLevel = permValue.room || 50;
+                  }
+                  return (
+                    <SettingTile
+                      key={permKey}
+                      title={permInfo.name}
+                      content={<Text variant="b3">{permInfo.description}</Text>}
+                      options={(
+                        <Button
+                          onClick={
+                            canChangePermission
+                              ? (e) => handlePowerSelector(e, permKey, permInfo.parent, powerLevel)
+                              : null
+                          }
+                          iconSrc={canChangePermission ? ChevronBottomIC : null}
+                        >
+                          <Text variant="b2">
+                            {`${getPowerLabel(powerLevel) || 'Member'} - ${powerLevel}`}
+                          </Text>
+                        </Button>
+                      )}
+                    />
+                  );
+                })
+              }
+            </div>
+          );
+        })
+      }
+    </div>
+  );
+}
+
+RoomPermissions.propTypes = {
+  roomId: PropTypes.string.isRequired,
+};
+
+export default RoomPermissions;

src/app/molecules/room-permissions/RoomPermissions.scss

@@ -0,0 +1,11 @@
+.room-permissions {
+  & .setting-tile {
+    margin: 0 var(--sp-normal);
+    margin-top: var(--sp-tight);
+    padding-bottom: var(--sp-tight);
+    border-bottom: 1px solid var(--bg-surface-border);
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+}

src/app/molecules/room-profile/RoomProfile.jsx

@@ -0,0 +1,185 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import './RoomProfile.scss';
+
+import { twemojify } from '../../../util/twemojify';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import colorMXID from '../../../util/colorMXID';
+
+import Text from '../../atoms/text/Text';
+import Avatar from '../../atoms/avatar/Avatar';
+import Button from '../../atoms/button/Button';
+import Input from '../../atoms/input/Input';
+import IconButton from '../../atoms/button/IconButton';
+import ImageUpload from '../image-upload/ImageUpload';
+
+import PencilIC from '../../../../public/res/ic/outlined/pencil.svg';
+
+import { useStore } from '../../hooks/useStore';
+import { useForceUpdate } from '../../hooks/useForceUpdate';
+
+function RoomProfile({ roomId }) {
+  const isMountStore = useStore();
+  const [isEditing, setIsEditing] = useState(false);
+  const [, forceUpdate] = useForceUpdate();
+  const [status, setStatus] = useState({
+    msg: null,
+    type: cons.status.PRE_FLIGHT,
+  });
+
+  const mx = initMatrix.matrixClient;
+  const isDM = initMatrix.roomList.directs.has(roomId);
+  let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
+  avatarSrc = isDM ? mx.getRoom(roomId).getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 36, 36, 'crop') : avatarSrc;
+  const room = mx.getRoom(roomId);
+  const { currentState } = room;
+  const roomName = room.name;
+  const roomTopic = currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;
+
+  const userId = mx.getUserId();
+
+  const canChangeAvatar = currentState.maySendStateEvent('m.room.avatar', userId);
+  const canChangeName = currentState.maySendStateEvent('m.room.name', userId);
+  const canChangeTopic = currentState.maySendStateEvent('m.room.topic', userId);
+
+  useEffect(() => {
+    isMountStore.setItem(true);
+    const { roomList } = initMatrix;
+    const handleProfileUpdate = (rId) => {
+      if (roomId !== rId) return;
+      forceUpdate();
+    };
+
+    roomList.on(cons.events.roomList.ROOM_PROFILE_UPDATED, handleProfileUpdate);
+    return () => {
+      roomList.removeListener(cons.events.roomList.ROOM_PROFILE_UPDATED, handleProfileUpdate);
+      isMountStore.setItem(false);
+      setStatus({
+        msg: null,
+        type: cons.status.PRE_FLIGHT,
+      });
+      setIsEditing(false);
+    };
+  }, [roomId]);
+
+  const handleOnSubmit = async (e) => {
+    e.preventDefault();
+    const { target } = e;
+    const roomNameInput = target.elements['room-name'];
+    const roomTopicInput = target.elements['room-topic'];
+
+    try {
+      if (canChangeName) {
+        const newName = roomNameInput.value;
+        if (newName !== roomName && roomName.trim() !== '') {
+          setStatus({
+            msg: 'Saving room name...',
+            type: cons.status.IN_FLIGHT,
+          });
+          await mx.setRoomName(roomId, newName);
+        }
+      }
+      if (canChangeTopic) {
+        const newTopic = roomTopicInput.value;
+        if (newTopic !== roomTopic) {
+          if (isMountStore.getItem()) {
+            setStatus({
+              msg: 'Saving room topic...',
+              type: cons.status.IN_FLIGHT,
+            });
+          }
+          await mx.setRoomTopic(roomId, newTopic);
+        }
+      }
+      if (!isMountStore.getItem()) return;
+      setStatus({
+        msg: 'Saved successfully',
+        type: cons.status.SUCCESS,
+      });
+    } catch (err) {
+      if (!isMountStore.getItem()) return;
+      setStatus({
+        msg: err.message || 'Unable to save.',
+        type: cons.status.ERROR,
+      });
+    }
+  };
+
+  const handleCancelEditing = () => {
+    setStatus({
+      msg: null,
+      type: cons.status.PRE_FLIGHT,
+    });
+    setIsEditing(false);
+  };
+
+  const handleAvatarUpload = async (url) => {
+    if (url === null) {
+      if (confirm('Are you sure you want to remove avatar?')) {
+        await mx.sendStateEvent(roomId, 'm.room.avatar', { url }, '');
+      }
+    } else await mx.sendStateEvent(roomId, 'm.room.avatar', { url }, '');
+  };
+
+  const renderEditNameAndTopic = () => (
+    <form className="room-profile__edit-form" onSubmit={handleOnSubmit}>
+      {canChangeName && <Input value={roomName} name="room-name" disabled={status.type === cons.status.IN_FLIGHT} label="Room name" required />}
+      {canChangeTopic && <Input value={roomTopic} name="room-topic" disabled={status.type === cons.status.IN_FLIGHT} minHeight={100} resizable label="Topic" />}
+      {(!canChangeName || !canChangeTopic) && <Text variant="b3">{`You have permission to change room ${canChangeName ? 'name' : 'topic'} only.`}</Text>}
+      { status.type === cons.status.IN_FLIGHT && <Text variant="b2">{status.msg}</Text>}
+      { status.type === cons.status.SUCCESS && <Text style={{ color: 'var(--tc-positive-high)' }} variant="b2">{status.msg}</Text>}
+      { status.type === cons.status.ERROR && <Text style={{ color: 'var(--tc-danger-high)' }} variant="b2">{status.msg}</Text>}
+      { status.type !== cons.status.IN_FLIGHT && (
+        <div>
+          <Button type="submit" variant="primary">Save</Button>
+          <Button onClick={handleCancelEditing}>Cancel</Button>
+        </div>
+      )}
+    </form>
+  );
+
+  const renderNameAndTopic = () => (
+    <div className="room-profile__display" style={{ marginBottom: avatarSrc && canChangeAvatar ? '24px' : '0' }}>
+      <div>
+        <Text variant="h2" weight="medium" primary>{twemojify(roomName)}</Text>
+        { (canChangeName || canChangeTopic) && (
+          <IconButton
+            src={PencilIC}
+            size="extra-small"
+            tooltip="Edit room name and topic"
+            onClick={() => setIsEditing(true)}
+          />
+        )}
+      </div>
+      <Text variant="b3">{room.getCanonicalAlias() || room.roomId}</Text>
+      {roomTopic && <Text variant="b2">{twemojify(roomTopic, undefined, true)}</Text>}
+    </div>
+  );
+
+  return (
+    <div className="room-profile">
+      <div className="room-profile__content">
+        { !canChangeAvatar && <Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="large" />}
+        { canChangeAvatar && (
+          <ImageUpload
+            text={roomName}
+            bgColor={colorMXID(roomId)}
+            imageSrc={avatarSrc}
+            onUpload={handleAvatarUpload}
+            onRequestRemove={() => handleAvatarUpload(null)}
+          />
+        )}
+        {!isEditing && renderNameAndTopic()}
+        {isEditing && renderEditNameAndTopic()}
+      </div>
+    </div>
+  );
+}
+
+RoomProfile.propTypes = {
+  roomId: PropTypes.string.isRequired,
+};
+
+export default RoomProfile;

src/app/molecules/room-profile/RoomProfile.scss

@@ -0,0 +1,53 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
+.room-profile {
+  
+  &__content {
+    @extend .cp-fx__row;
+    & .avatar-container {
+      min-width: var(--av-large);
+    }
+  }
+
+  &__display {
+    align-self: flex-end;
+    @include dir.side(margin, var(--sp-loose), 0);
+
+    & > div:first-child {
+      @extend .cp-fx__row--s-c;
+      & > .text {
+        @include dir.side(margin, 0, var(--sp-extra-tight));
+      }
+    }
+
+    & > *:not(:first-child) {
+      margin-top: var(--sp-ultra-tight);
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+  }
+  
+  &__edit-form {
+    @extend .cp-fx__item-one;
+    @include dir.side(margin, var(--sp-loose), 0);
+
+    & .input-container {
+      margin-bottom: var(--sp-extra-tight);
+    }
+
+    & > .text {
+      margin-bottom: var(--sp-tight);
+    }
+    
+    & > *:last-child {
+      @extend .cp-fx__item-one;
+      @extend .cp-fx__row;
+      margin-top: var(--sp-tight);
+      
+      .btn-primary {
+        @include dir.side(margin, 0, var(--sp-tight));
+      }
+    }
+  }
+}

src/app/molecules/room-search/RoomSearch.jsx

@@ -0,0 +1,201 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import './RoomSearch.scss';
+
+import dateFormat from 'dateformat';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import { selectRoom } from '../../../client/action/navigation';
+
+import Text from '../../atoms/text/Text';
+import RawIcon from '../../atoms/system-icons/RawIcon';
+import Button from '../../atoms/button/Button';
+import Input from '../../atoms/input/Input';
+import Spinner from '../../atoms/spinner/Spinner';
+import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
+import { Message } from '../message/Message';
+
+import SearchIC from '../../../../public/res/ic/outlined/search.svg';
+
+import { useStore } from '../../hooks/useStore';
+
+const roomIdToBackup = new Map();
+
+function useRoomSearch(roomId) {
+  const [searchData, setSearchData] = useState(roomIdToBackup.get(roomId) ?? null);
+  const [status, setStatus] = useState({
+    type: cons.status.PRE_FLIGHT,
+    term: null,
+  });
+  const mountStore = useStore(roomId);
+  const mx = initMatrix.matrixClient;
+
+  useEffect(() => mountStore.setItem(true), [roomId]);
+
+  useEffect(() => {
+    if (searchData?.results?.length > 0) {
+      roomIdToBackup.set(roomId, searchData);
+    } else {
+      roomIdToBackup.delete(roomId);
+    }
+  }, [searchData]);
+
+  const search = async (term) => {
+    setSearchData(null);
+    if (term === '') {
+      setStatus({ type: cons.status.PRE_FLIGHT, term: null });
+      return;
+    }
+    setStatus({ type: cons.status.IN_FLIGHT, term });
+    const body = {
+      search_categories: {
+        room_events: {
+          search_term: term,
+          filter: {
+            limit: 10,
+            rooms: [roomId],
+          },
+          order_by: 'recent',
+          event_context: {
+            before_limit: 0,
+            after_limit: 0,
+            include_profile: true,
+          },
+        },
+      },
+    };
+    try {
+      const res = await mx.search({ body });
+      const data = mx.processRoomEventsSearch({
+        _query: body,
+        results: [],
+        highlights: [],
+      }, res);
+      if (!mountStore.getItem()) return;
+      setStatus({ type: cons.status.SUCCESS, term });
+      setSearchData(data);
+      if (!mountStore.getItem()) return;
+    } catch (error) {
+      setSearchData(null);
+      setStatus({ type: cons.status.ERROR, term });
+    }
+  };
+
+  const paginate = async () => {
+    if (searchData === null) return;
+    const term = searchData._query.search_categories.room_events.search_term;
+
+    setStatus({ type: cons.status.IN_FLIGHT, term });
+    try {
+      const data = await mx.backPaginateRoomEventsSearch(searchData);
+      if (!mountStore.getItem()) return;
+      setStatus({ type: cons.status.SUCCESS, term });
+      setSearchData(data);
+    } catch (error) {
+      if (!mountStore.getItem()) return;
+      setSearchData(null);
+      setStatus({ type: cons.status.ERROR, term });
+    }
+  };
+
+  return [searchData, search, paginate, status];
+}
+
+function RoomSearch({ roomId }) {
+  const [searchData, search, paginate, status] = useRoomSearch(roomId);
+  const mx = initMatrix.matrixClient;
+  const isRoomEncrypted = mx.isRoomEncrypted(roomId);
+  const searchTerm = searchData?._query.search_categories.room_events.search_term ?? '';
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    if (isRoomEncrypted) return;
+    const searchTermInput = e.target.elements['room-search-input'];
+    const term = searchTermInput.value.trim();
+
+    search(term);
+  };
+
+  const renderTimeline = (timeline) => (
+    <div className="room-search__result-item" key={timeline[0].getId()}>
+      { timeline.map((mEvent) => {
+        const time = dateFormat(mEvent.getDate(), 'dd/mm/yyyy - hh:MM TT');
+        const id = mEvent.getId();
+        return (
+          <React.Fragment key={id}>
+            <Message
+              mEvent={mEvent}
+              isBodyOnly={false}
+              time={time}
+            />
+            <Button onClick={() => selectRoom(roomId, id)}>View</Button>
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+
+  return (
+    <div className="room-search">
+      <form className="room-search__form" onSubmit={handleSearch}>
+        <MenuHeader>Room search</MenuHeader>
+        <div>
+          <Input
+            placeholder="Search for keywords"
+            name="room-search-input"
+            disabled={isRoomEncrypted}
+          />
+          <Button iconSrc={SearchIC} variant="primary" type="submit">Search</Button>
+        </div>
+        {searchData?.results.length > 0 && (
+          <Text>{`${searchData.count} results for "${searchTerm}"`}</Text>
+        )}
+        {!isRoomEncrypted && searchData === null && (
+          <div className="room-search__help">
+            {status.type === cons.status.IN_FLIGHT && <Spinner />}
+            {status.type === cons.status.IN_FLIGHT && <Text>Searching room messages...</Text>}
+            {status.type === cons.status.PRE_FLIGHT && <RawIcon src={SearchIC} size="large" />}
+            {status.type === cons.status.PRE_FLIGHT && <Text>Search room messages</Text>}
+            {status.type === cons.status.ERROR && <Text>Failed to search messages</Text>}
+          </div>
+        )}
+
+        {!isRoomEncrypted && searchData?.results.length === 0 && (
+          <div className="room-search__help">
+            <Text>No result found</Text>
+          </div>
+        )}
+        {isRoomEncrypted && (
+          <div className="room-search__help">
+            <Text>Search does not work in encrypted room</Text>
+          </div>
+        )}
+      </form>
+      {searchData?.results.length > 0 && (
+        <>
+          <div className="room-search__content">
+            {searchData.results.map((searchResult) => {
+              const { timeline } = searchResult.context;
+              return renderTimeline(timeline);
+            })}
+          </div>
+          {searchData?.next_batch && (
+            <div className="room-search__more">
+              {status.type !== cons.status.IN_FLIGHT && (
+                <Button onClick={paginate}>Load more</Button>
+              )}
+              {status.type === cons.status.IN_FLIGHT && <Spinner />}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+RoomSearch.propTypes = {
+  roomId: PropTypes.string.isRequired,
+};
+
+export default RoomSearch;

src/app/molecules/room-search/RoomSearch.scss

@@ -0,0 +1,62 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
+.room-search {
+  &__form {
+    & div:nth-child(2) {
+      display: flex;
+      align-items: flex-end;
+      padding: var(--sp-normal);;
+      
+      & .input-container {
+        @extend .cp-fx__item-one;
+        @include dir.side(margin, 0, var(--sp-normal));
+      }
+      & button {
+        height: 46px;
+      }
+    }
+    & .context-menu__header {
+      margin-bottom: 0;
+    }
+    & > .text {
+      padding: 0 var(--sp-normal) var(--sp-tight);
+    }
+  }
+
+  &__help {
+    height: 248px;
+    @extend .cp-fx__column--c-c;
+
+    & .ic-raw {
+      opacity: .5;
+    }
+    .text {
+      margin-top: var(--sp-normal);
+    }
+  }
+  &__more {
+    margin-bottom: var(--sp-normal);
+    @extend .cp-fx__row--c-c;
+    button {
+      width: 100%;
+    }
+  }
+  &__result-item {
+    padding: var(--sp-tight) var(--sp-normal);
+    display: flex;
+    align-items: flex-start;
+
+    .message {
+      @include dir.side(margin, 0, var(--sp-normal));
+      @extend .cp-fx__item-one;
+      padding: 0;
+      &:hover {
+        background-color: transparent;
+      }
+      & .message__time {
+        flex: 0;
+      }
+    }
+  }
+}

src/app/molecules/room-selector/RoomSelector.jsx

@@ -11,7 +11,8 @@ import NotificationBadge from '../../atoms/badge/NotificationBadge';
 import { blurOnBubbling } from '../../atoms/button/script';
 
 function RoomSelectorWrapper({
-  isSelected, isUnread, onClick, content, options,
+  isSelected, isUnread, onClick,
+  content, options, onContextMenu,
 }) {
   let myClass = isUnread ? ' room-selector--unread' : '';
   myClass += isSelected ? ' room-selector--selected' : '';
@@ -21,7 +22,8 @@ function RoomSelectorWrapper({
         className="room-selector__content"
         type="button"
         onClick={onClick}
-        onMouseUp={(e) => blurOnBubbling(e, '.room-selector')}
+        onMouseUp={(e) => blurOnBubbling(e, '.room-selector__content')}
+        onContextMenu={onContextMenu}
       >
         {content}
       </button>
@@ -31,6 +33,7 @@ function RoomSelectorWrapper({
 }
 RoomSelectorWrapper.defaultProps = {
   options: null,
+  onContextMenu: null,
 };
 RoomSelectorWrapper.propTypes = {
   isSelected: PropTypes.bool.isRequired,
@@ -38,12 +41,13 @@ RoomSelectorWrapper.propTypes = {
   onClick: PropTypes.func.isRequired,
   content: PropTypes.node.isRequired,
   options: PropTypes.node,
+  onContextMenu: PropTypes.func,
 };
 
 function RoomSelector({
   name, parentName, roomId, imageSrc, iconSrc,
   isSelected, isUnread, notificationCount, isAlert,
-  options, onClick,
+  options, onClick, onContextMenu,
 }) {
   return (
     <RoomSelectorWrapper
@@ -55,16 +59,17 @@ function RoomSelector({
             text={name}
             bgColor={colorMXID(roomId)}
             imageSrc={imageSrc}
+            iconColor="var(--ic-surface-low)"
             iconSrc={iconSrc}
             size="extra-small"
           />
-          <Text variant="b1">
+          <Text variant="b1" weight={isUnread ? 'medium' : 'normal'}>
             {twemojify(name)}
             {parentName && (
-              <span className="text text-b3">
+              <Text variant="b3" span>
                 {' — '}
                 {twemojify(parentName)}
-              </span>
+              </Text>
             )}
           </Text>
           { isUnread && (
@@ -77,6 +82,7 @@ function RoomSelector({
       )}
       options={options}
       onClick={onClick}
+      onContextMenu={onContextMenu}
     />
   );
 }
@@ -86,6 +92,7 @@ RoomSelector.defaultProps = {
   imageSrc: null,
   iconSrc: null,
   options: null,
+  onContextMenu: null,
 };
 RoomSelector.propTypes = {
   name: PropTypes.string.isRequired,
@@ -102,6 +109,7 @@ RoomSelector.propTypes = {
   isAlert: PropTypes.bool.isRequired,
   options: PropTypes.node,
   onClick: PropTypes.func.isRequired,
+  onContextMenu: PropTypes.func,
 };
 
 export default RoomSelector;

src/app/molecules/room-selector/RoomSelector.scss

@@ -1,15 +1,9 @@
-.room-selector-flex {
-  display: flex;
-  align-items: center;
-}
-.room-selector-flexItem {
-  flex: 1;
-  min-width: 0;
-  min-height: 0;
-}
+@use '../../partials/flex';
+@use '../../partials/text';
+@use '../../partials/dir';
 
 .room-selector {
-  @extend .room-selector-flex;
+  @extend .cp-fx__row--s-c;
 
   border: 1px solid transparent;
   border-radius: var(--bo-radius);
@@ -17,7 +11,6 @@
 
   &--unread {
     .room-selector__content > .text {
-      font-weight: 500;
       color: var(--tc-surface-high);
     }
   }
@@ -56,35 +49,28 @@
 }
 
 .room-selector__content {
-  @extend .room-selector-flexItem;
-  @extend .room-selector-flex;
+  @extend .cp-fx__item-one;
+  @extend .cp-fx__row--s-c;
   padding: 0 var(--sp-extra-tight);
   min-height: 40px;
   cursor: inherit;
 
-  & > .avatar-container .avatar__bordered {
+  & > .avatar-container .avatar__border--active {
     box-shadow: none;
   }
 
   & > .text {
-    @extend .room-selector-flexItem;
+    @extend .cp-fx__item-one;
+    @extend .cp-txt__ellipsis;
     margin: 0 var(--sp-extra-tight);
 
     color: var(--tc-surface-normal-low);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
   }
 }
 .room-selector__options {
-  @extend .room-selector-flex;
+  @extend .cp-fx__row--s-c;
+  @include dir.side(margin, 0, var(--sp-ultra-tight));
   display: none;
-  margin-right: var(--sp-ultra-tight);
-
-  [dir=rtl] & {
-    margin-right: 0;
-    margin-left: var(--sp-ultra-tight);
-  }
 
   &:empty {
     margin: 0 !important;

src/app/molecules/room-visibility/RoomVisibility.jsx

@@ -0,0 +1,121 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import './RoomVisibility.scss';
+
+import initMatrix from '../../../client/initMatrix';
+
+import Text from '../../atoms/text/Text';
+import RadioButton from '../../atoms/button/RadioButton';
+import { MenuItem } from '../../atoms/context-menu/ContextMenu';
+
+import HashIC from '../../../../public/res/ic/outlined/hash.svg';
+import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
+import HashGlobeIC from '../../../../public/res/ic/outlined/hash-globe.svg';
+import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
+import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
+import SpaceGlobeIC from '../../../../public/res/ic/outlined/space-globe.svg';
+
+const visibility = {
+  INVITE: 'invite',
+  RESTRICTED: 'restricted',
+  PUBLIC: 'public',
+};
+
+function setJoinRule(roomId, type) {
+  const mx = initMatrix.matrixClient;
+  let allow;
+  if (type === visibility.RESTRICTED) {
+    const { currentState } = mx.getRoom(roomId);
+    const mEvent = currentState.getStateEvents('m.space.parent')[0];
+    if (!mEvent) return Promise.resolve(undefined);
+
+    allow = [{
+      room_id: mEvent.getStateKey(),
+      type: 'm.room_membership',
+    }];
+  }
+
+  return mx.sendStateEvent(
+    roomId,
+    'm.room.join_rules',
+    {
+      join_rule: type,
+      allow,
+    },
+  );
+}
+
+function useVisibility(roomId) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+
+  const [activeType, setActiveType] = useState(room.getJoinRule());
+  useEffect(() => setActiveType(room.getJoinRule()), [roomId]);
+
+  const setNotification = useCallback((item) => {
+    if (item.type === activeType.type) return;
+    setActiveType(item.type);
+    setJoinRule(roomId, item.type);
+  }, [activeType, roomId]);
+
+  return [activeType, setNotification];
+}
+
+function RoomVisibility({ roomId }) {
+  const [activeType, setVisibility] = useVisibility(roomId);
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  const isSpace = room.isSpaceRoom();
+  const { currentState } = room;
+
+  const noSpaceParent = currentState.getStateEvents('m.space.parent').length === 0;
+  const mCreate = currentState.getStateEvents('m.room.create')[0]?.getContent();
+  const roomVersion = Number(mCreate.room_version);
+
+  const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
+  const canChange = room.currentState.hasSufficientPowerLevelFor('state_default', myPowerlevel);
+
+  const items = [{
+    iconSrc: isSpace ? SpaceLockIC : HashLockIC,
+    text: 'Private (invite only)',
+    type: visibility.INVITE,
+    unsupported: false,
+  }, {
+    iconSrc: isSpace ? SpaceIC : HashIC,
+    text: roomVersion < 8 ? 'Restricted (unsupported: required room upgrade)' : 'Restricted (space member can join)',
+    type: visibility.RESTRICTED,
+    unsupported: roomVersion < 8 || noSpaceParent,
+  }, {
+    iconSrc: isSpace ? SpaceGlobeIC : HashGlobeIC,
+    text: 'Public (anyone can join)',
+    type: visibility.PUBLIC,
+    unsupported: false,
+  }];
+
+  return (
+    <div className="room-visibility">
+      {
+        items.map((item) => (
+          <MenuItem
+            variant={activeType === item.type ? 'positive' : 'surface'}
+            key={item.type}
+            iconSrc={item.iconSrc}
+            onClick={() => setVisibility(item)}
+            disabled={(!canChange || item.unsupported)}
+          >
+            <Text varient="b1">
+              <span>{item.text}</span>
+              <RadioButton isActive={activeType === item.type} />
+            </Text>
+          </MenuItem>
+        ))
+      }
+    </div>
+  );
+}
+
+RoomVisibility.propTypes = {
+  roomId: PropTypes.string.isRequired,
+};
+
+export default RoomVisibility;

src/app/molecules/room-visibility/RoomVisibility.scss

@@ -0,0 +1,19 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+@use '../../partials/text';
+
+.room-visibility {
+  & .context-menu__item .text {
+    @extend .cp-fx__item-one;
+    @extend .cp-fx__row--s-c;
+    
+    & span:first-child {
+      @extend .cp-fx__item-one;
+      @extend .cp-txt__ellipsis;
+    }
+    
+    & .radio-btn {
+      @include dir.side(margin, var(--sp-tight), 0);
+    }
+  }
+}

src/app/molecules/setting-tile/SettingTile.jsx

@@ -7,13 +7,13 @@ import Text from '../../atoms/text/Text';
 function SettingTile({ title, options, content }) {
   return (
     <div className="setting-tile">
-      <div className="setting-tile__title__wrapper">
+      <div className="setting-tile__content">
         <div className="setting-tile__title">
           <Text variant="b1">{title}</Text>
         </div>
-        {options !== null && <div className="setting-tile__options">{options}</div>}
+        {content}
       </div>
-      {content !== null && <div className="setting-tile__content">{content}</div>}
+      {options !== null && <div className="setting-tile__options">{options}</div>}
     </div>
   );
 }

src/app/molecules/setting-tile/SettingTile.scss

@@ -1,16 +1,15 @@
+@use '../../partials/dir';
+
 .setting-tile {
-  &__title__wrapper {
-    display: flex;
-    align-items: center;
-  }
-  &__title {
+  display: flex;
+  &__content {
     flex: 1;
     min-width: 0;
-    margin-right: var(--sp-normal);
-    [dir=rtl] & {
-      margin-right: 0;
-      margin-left: var(--sp-normal);
-    }
   }
-
+  &__title {
+    margin-bottom: var(--sp-ultra-tight);
+  }
+  &__options {
+    @include dir.side(margin, var(--sp-tight), 0);
+  }
 }

src/app/molecules/sidebar-avatar/SidebarAvatar.scss

@@ -1,3 +1,5 @@
+@use '../../partials/dir';
+
 .sidebar-avatar {
   position: relative;
   display: flex;
@@ -7,10 +9,11 @@
   
   & .notification-badge {
     position: absolute;
-    right: 0;
+    @include dir.prop(left, unset, 0);
+    @include dir.prop(right, 0, unset);
     top: 0;
     box-shadow: 0 0 0 2px var(--bg-surface-low);
-    transform: translate(20%, -20%);
+    @include dir.prop(transform, translate(20%, -20%), translate(-20%, -20%));
 
     margin: 0 !important;
   }
@@ -19,10 +22,12 @@
     transition: transform 200ms var(--fluid-push);
   }
   &:hover .avatar-container {
-    transform: translateX(4px)
+    @include dir.prop(transform, translateX(4px), translateX(-4px));
   }
   &:hover .notification-badge {
-    transform: translate(calc(20% + 4px), -20%);
+    --ltr: translate(calc(20% + 4px), -20%);
+    --rtl: translate(calc(-20% - 4px), -20%);
+    @include dir.prop(transform, var(--ltr), var(--rtl));
   }
   &:focus {
     outline: none;
@@ -37,21 +42,16 @@
     content: "";
     display: block;
     position: absolute;
-    left: -11px;
+    @include dir.prop(left, -11px, unset);
+    @include dir.prop(right, unset, -11px);
     top: 50%;
     transform: translateY(-50%);
 
     width: 3px;
     height: 12px;
     background-color: var(--tc-surface-high);
-    border-radius: 0 4px 4px 0;
+    @include dir.prop(border-radius, 0 4px 4px 0, 4px 0 0 4px);
     transition: height 200ms linear;
-
-    [dir=rtl] & {
-      left: unset;
-      right: -11px;
-      border-radius: 4px 0 0 4px;
-    }
   }
   &--active:hover::before,
   &--active:focus::before,

src/app/organisms/create-room/CreateRoom.scss

@@ -1,6 +1,8 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
 .create-room {
-  margin: 0 var(--sp-normal);
-  margin-right: var(--sp-extra-tight);
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
 
   &__form > * {
     margin-top: var(--sp-normal);
@@ -23,12 +25,8 @@
       margin-bottom: var(--sp-ultra-tight);
     }
     &__tip {
-      margin-left: 46px;
       margin-top: var(--sp-ultra-tight);
-      [dir=rtl] & {
-        margin-left: 0;
-        margin-right: 46px;
-      }
+      @include dir.side(margin, 46px, 0);
     }
     & .text {
       display: flex;
@@ -46,24 +44,20 @@
       }
     }
     & .text:first-child {
-      border-right-width: 0;
-      border-radius: var(--bo-radius) 0 0 var(--bo-radius);
+      @include dir.prop(border-width, 1px 0 1px 1px, 1px 1px 1px 0);
+      @include dir.prop(
+        border-radius,
+        var(--bo-radius) 0 0 var(--bo-radius),
+        0 var(--bo-radius) var(--bo-radius) 0,
+      );
     }
     & .text:last-child {
-      border-left-width: 0;
-      border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
-    }
-    [dir=rtl] & {
-      & .text:first-child {
-        border-left-width: 0;
-        border-right-width: 1px;
-        border-radius: 0 var(--bo-radius) var(--bo-radius) 0;
-      }
-      & .text:last-child {
-        border-right-width: 0;
-        border-left-width: 1px;
-        border-radius: var(--bo-radius) 0 0 var(--bo-radius);
-      }
+      @include dir.prop(border-width, 1px 1px 1px 0, 1px 0 1px 1px);
+      @include dir.prop(
+        border-radius,
+        0 var(--bo-radius) var(--bo-radius) 0,
+        var(--bo-radius) 0 0 var(--bo-radius),
+      );
     }
   }
 
@@ -74,11 +68,7 @@
     & .input-container {
       flex: 1;
       min-width: 0;
-      margin-right: var(--sp-normal);
-      [dir=rtl] & {
-        margin-right: 0;
-        margin-left: var(--sp-normal);
-      }
+      @include dir.side(margin, 0, var(--sp-normal));
     }
     & .btn-primary {
       padding-top: 11px;
@@ -87,24 +77,13 @@
   }
 
   &__loading {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    @extend .cp-fx__row--c-c;
     & .text {
-      margin-left: var(--sp-normal);
-      [dir=rtl] & {
-        margin-left: 0;
-        margin-right: var(--sp-normal);
-      }
+      @include dir.side(margin, var(--sp-normal), 0);
     }
   }
   &__error {
     text-align: center;
     color: var(--bg-danger) !important;
   }
-
-  [dir=rtl] & {
-    margin-right: var(--sp-normal);
-    margin-left: var(--sp-extra-tight);
-  }
 }

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

@@ -7,6 +7,10 @@ import './EmojiBoard.scss';
 import parse from 'html-react-parser';
 import twemoji from 'twemoji';
 import { emojiGroups, emojis } from './emoji';
+import { getRelevantPacks } from './custom-emoji';
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
 import AsyncSearch from '../../../util/AsyncSearch';
 
 import Text from '../../atoms/text/Text';
@@ -25,7 +29,7 @@ import BulbIC from '../../../../public/res/ic/outlined/bulb.svg';
 import PeaceIC from '../../../../public/res/ic/outlined/peace.svg';
 import FlagIC from '../../../../public/res/ic/outlined/flag.svg';
 
-function EmojiGroup({ name, groupEmojis }) {
+const EmojiGroup = React.memo(({ name, groupEmojis }) => {
   function getEmojiBoard() {
     const emojiBoard = [];
     const ROW_EMOJIS_COUNT = 7;
@@ -40,16 +44,32 @@ function EmojiGroup({ name, groupEmojis }) {
         emojiRow.push(
           <span key={emojiIndex}>
             {
-              parse(twemoji.parse(
-                emoji.unicode,
-                {
-                  attributes: () => ({
-                    unicode: emoji.unicode,
-                    shortcodes: emoji.shortcodes?.toString(),
-                    hexcode: emoji.hexcode,
-                  }),
-                },
-              ))
+              emoji.hexcode
+                // This is a unicode emoji, and should be rendered with twemoji
+                ? parse(twemoji.parse(
+                  emoji.unicode,
+                  {
+                    attributes: () => ({
+                      unicode: emoji.unicode,
+                      shortcodes: emoji.shortcodes?.toString(),
+                      hexcode: emoji.hexcode,
+                      loading: 'lazy',
+                    }),
+                  },
+                ))
+                // This is a custom emoji, and should be render as an mxc
+                : (
+                  <img
+                    className="emoji"
+                    draggable="false"
+                    loading="lazy"
+                    alt={emoji.shortcode}
+                    unicode={`:${emoji.shortcode}:`}
+                    shortcodes={emoji.shortcode}
+                    src={initMatrix.matrixClient.mxcUrlToHttp(emoji.mxc)}
+                    data-mx-emoticon
+                  />
+                )
             }
           </span>,
         );
@@ -61,17 +81,20 @@ function EmojiGroup({ name, groupEmojis }) {
 
   return (
     <div className="emoji-group">
-      <Text className="emoji-group__header" variant="b2">{name}</Text>
+      <Text className="emoji-group__header" variant="b2" weight="bold">{name}</Text>
       {groupEmojis.length !== 0 && <div className="emoji-set">{getEmojiBoard()}</div>}
     </div>
   );
-}
+});
+
 EmojiGroup.propTypes = {
   name: PropTypes.string.isRequired,
   groupEmojis: PropTypes.arrayOf(PropTypes.shape({
     length: PropTypes.number,
     unicode: PropTypes.string,
     hexcode: PropTypes.string,
+    mxc: PropTypes.string,
+    shortcode: PropTypes.string,
     shortcodes: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.arrayOf(PropTypes.string),
@@ -133,8 +156,8 @@ function EmojiBoard({ onSelect }) {
     const infoEmoji = emojiInfo.current.firstElementChild.firstElementChild;
     const infoShortcode = emojiInfo.current.lastElementChild;
 
-    const emojiSrc = infoEmoji.src;
-    infoEmoji.src = `${emojiSrc.slice(0, emojiSrc.lastIndexOf('/') + 1)}${emoji.hexcode.toLowerCase()}.png`;
+    infoEmoji.src = emoji.src;
+    infoEmoji.alt = emoji.unicode;
     infoShortcode.textContent = `:${emoji.shortcode}:`;
   }
 
@@ -142,16 +165,21 @@ function EmojiBoard({ onSelect }) {
     if (isTargetNotEmoji(e.target)) return;
 
     const emoji = e.target;
-    const { shortcodes, hexcode } = getEmojiDataFromTarget(emoji);
+    const { shortcodes, unicode } = getEmojiDataFromTarget(emoji);
+    const { src } = e.target;
 
     if (typeof shortcodes === 'undefined') {
       searchRef.current.placeholder = 'Search';
-      setEmojiInfo({ hexcode: '1f643', shortcode: 'slight_smile' });
+      setEmojiInfo({
+        unicode: '🙂',
+        shortcode: 'slight_smile',
+        src: 'https://twemoji.maxcdn.com/v/13.1.0/72x72/1f642.png',
+      });
       return;
     }
     if (searchRef.current.placeholder === shortcodes[0]) return;
     searchRef.current.setAttribute('placeholder', shortcodes[0]);
-    setEmojiInfo({ hexcode, shortcode: shortcodes[0] });
+    setEmojiInfo({ shortcode: shortcodes[0], src, unicode });
   }
 
   function handleSearchChange(e) {
@@ -160,11 +188,44 @@ function EmojiBoard({ onSelect }) {
     scrollEmojisRef.current.scrollTop = 0;
   }
 
+  const [availableEmojis, setAvailableEmojis] = useState([]);
+
+  useEffect(() => {
+    const updateAvailableEmoji = (selectedRoomId) => {
+      if (!selectedRoomId) {
+        setAvailableEmojis([]);
+        return;
+      }
+      // Retrieve the packs for the new room
+      // Remove packs that aren't marked as emoji packs
+      // Remove packs without emojis
+      const packs = getRelevantPacks(
+        initMatrix.matrixClient.getRoom(selectedRoomId),
+      )
+        .filter((pack) => pack.usage.indexOf('emoticon') !== -1)
+        .filter((pack) => pack.getEmojis().length !== 0);
+
+      // Set an index for each pack so that we know where to jump when the user uses the nav
+      for (let i = 0; i < packs.length; i += 1) {
+        packs[i].packIndex = i;
+      }
+
+      setAvailableEmojis(packs);
+    };
+
+    navigation.on(cons.events.navigation.ROOM_SELECTED, updateAvailableEmoji);
+    return () => {
+      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, updateAvailableEmoji);
+    };
+  }, []);
+
   function openGroup(groupOrder) {
     let tabIndex = groupOrder;
     const $emojiContent = scrollEmojisRef.current.firstElementChild;
     const groupCount = $emojiContent.childElementCount;
-    if (groupCount > emojiGroups.length) tabIndex += groupCount - emojiGroups.length;
+    if (groupCount > emojiGroups.length) {
+      tabIndex += groupCount - emojiGroups.length - availableEmojis.length;
+    }
     $emojiContent.children[tabIndex].scrollIntoView();
   }
 
@@ -179,6 +240,16 @@ function EmojiBoard({ onSelect }) {
           <ScrollView ref={scrollEmojisRef} autoHide>
             <div onMouseMove={hoverEmoji} onClick={selectEmoji}>
               <SearchedEmoji />
+              {
+                availableEmojis.map((pack) => (
+                  <EmojiGroup
+                    name={pack.displayName}
+                    key={pack.packIndex}
+                    groupEmojis={pack.getEmojis()}
+                    className="custom-emoji-group"
+                  />
+                ))
+              }
               {
                 emojiGroups.map((group) => (
                   <EmojiGroup key={group.name} name={group.name} groupEmojis={group.emojis} />
@@ -192,16 +263,49 @@ function EmojiBoard({ onSelect }) {
           <Text>:slight_smile:</Text>
         </div>
       </div>
-      <div className="emoji-board__nav">
-        <IconButton onClick={() => openGroup(0)} src={EmojiIC} tooltip="Smileys" tooltipPlacement="right" />
-        <IconButton onClick={() => openGroup(1)} src={DogIC} tooltip="Animals" tooltipPlacement="right" />
-        <IconButton onClick={() => openGroup(2)} src={CupIC} tooltip="Food" tooltipPlacement="right" />
-        <IconButton onClick={() => openGroup(3)} src={BallIC} tooltip="Activity" tooltipPlacement="right" />
-        <IconButton onClick={() => openGroup(4)} src={PhotoIC} tooltip="Travel" tooltipPlacement="right" />
-        <IconButton onClick={() => openGroup(5)} src={BulbIC} tooltip="Objects" tooltipPlacement="right" />
-        <IconButton onClick={() => openGroup(6)} src={PeaceIC} tooltip="Symbols" tooltipPlacement="right" />
-        <IconButton onClick={() => openGroup(7)} src={FlagIC} tooltip="Flags" tooltipPlacement="right" />
-      </div>
+      <ScrollView invisible>
+        <div className="emoji-board__nav">
+          <div className="emoji-board__nav-custom">
+            {
+              availableEmojis.map((pack) => {
+                const src = initMatrix.matrixClient.mxcUrlToHttp(pack.avatar ?? pack.images[0].mxc);
+                return (
+                  <IconButton
+                    onClick={() => openGroup(pack.packIndex)}
+                    src={src}
+                    key={pack.packIndex}
+                    tooltip={pack.displayName}
+                    tooltipPlacement="right"
+                    isImage
+                  />
+                );
+              })
+            }
+          </div>
+          <div className="emoji-board__nav-twemoji">
+            {
+              [
+                [0, EmojiIC, 'Smilies'],
+                [1, DogIC, 'Animals'],
+                [2, CupIC, 'Food'],
+                [3, BallIC, 'Activities'],
+                [4, PhotoIC, 'Travel'],
+                [5, BulbIC, 'Objects'],
+                [6, PeaceIC, 'Symbols'],
+                [7, FlagIC, 'Flags'],
+              ].map(([indx, ico, name]) => (
+                <IconButton
+                  onClick={() => openGroup(availableEmojis.length + indx)}
+                  key={indx}
+                  src={ico}
+                  tooltip={name}
+                  tooltipPlacement="right"
+                />
+              ))
+            }
+          </div>
+        </div>
+      </ScrollView>
     </div>
   );
 }

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

@@ -1,38 +1,47 @@
-.emoji-board-flexBoxV {
-  display: flex;
-  flex-direction: column;
-}
-.emoji-board-flexItem {
-  flex: 1;
-  min-height: 0;
-  min-width: 0;
-}
+@use '../../partials/flex';
+@use '../../partials/text';
+@use '../../partials/dir';
 
 .emoji-board {
+  --emoji-board-height: 390px;
+  --emoji-board-width: 286px;
   display: flex;
+  
   &__content {
-    @extend .emoji-board-flexItem;
-    @extend .emoji-board-flexBoxV;
-    height: 400px;
-    width: 286px;
+    @extend .cp-fx__item-one;
+    @extend .cp-fx__column;
+    height: var(--emoji-board-height);
+    width: var(--emoji-board-width);
+  }
+  & > .scrollbar {
+    width: initial;
+    height: var(--emoji-board-height);
   }
   &__nav {
-    @extend .emoji-board-flexBoxV;
+    @extend .cp-fx__column;
     justify-content: center;
 
+    min-height: 100%;
     padding: 4px 6px;
     background-color: var(--bg-surface-low);
-    border-left: 1px solid var(--bg-surface-border);
-    [dir=rtl] & {
-      border-left: none;
-      border-right: 1px solid var(--bg-surface-border);
-    }
+    @include dir.side(border, 1px solid var(--bg-surface-border), none);
 
-    & > .ic-btn-surface {
-      margin: calc(var(--sp-ultra-tight) / 2) 0;
+    position: relative;
+    
+    & .ic-btn-surface {
       opacity: 0.8;
     }
   }
+  &__nav-custom,
+  &__nav-twemoji {
+    @extend .cp-fx__column;
+  }
+  &__nav-twemoji {
+    background: inherit;
+    position: sticky;
+    bottom: -70%;
+    z-index: 999;
+  }
 }
 
 .emoji-board__content__search {
@@ -41,13 +50,10 @@
   
   & .ic-raw {
     position: absolute;
-    left: var(--sp-normal);
+    @include dir.prop(left, var(--sp-normal), unset);
+    @include dir.prop(right, unset, var(--sp-normal));
     top: var(--sp-normal);
     transform: translateY(1px);
-    [dir=rtl] & {
-      left: unset;
-      right: var(--sp-normal);
-    }
   }
 
   & .input-container {
@@ -60,8 +66,8 @@
   }
 }
 .emoji-board__content__emojis {
-  @extend .emoji-board-flexItem;
-  @extend .emoji-board-flexBoxV;
+  @extend .cp-fx__item-one;
+  @extend .cp-fx__column;
 }
 .emoji-board__content__info {
   margin: 0 var(--sp-extra-tight);
@@ -79,11 +85,9 @@
     }
   }
   & > p:last-child {
-    @extend .emoji-board-flexItem;
+    @extend .cp-fx__item-one;
+    @extend .cp-txt__ellipsis;
     margin: 0 var(--sp-tight);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
   }
 }
 
@@ -98,24 +102,17 @@
     z-index: 99;
     background-color: var(--bg-surface);
 
-    margin-left: var(--sp-extra-tight);
+    @include dir.side(margin, var(--sp-extra-tight), 0);
     padding: var(--sp-extra-tight) var(--sp-ultra-tight);
     text-transform: uppercase;
-    font-weight: 600;
     box-shadow: 0 -4px 0 0 var(--bg-surface);
     border-bottom: 1px solid var(--bg-surface-border);
-    [dir=rtl] & {
-      margin-left: 0;
-      margin-right: var(--sp-extra-tight);
-    }
   }
   & .emoji-set {
-    margin: var(--sp-extra-tight) calc(var(--sp-normal) - var(--emoji-padding));
-    margin-right: calc(var(--sp-extra-tight) - var(--emoji-padding));
-    [dir=rtl] & {
-      margin-right: calc(var(--sp-normal) - var(--emoji-padding));
-      margin-left: calc(var(--sp-extra-tight) - var(--emoji-padding));
-    }
+    --left-margin: calc(var(--sp-normal) - var(--emoji-padding));
+    --right-margin: calc(var(--sp-extra-tight) - var(--emoji-padding));
+    margin: var(--sp-extra-tight);
+    @include dir.side(margin, var(--left-margin), var(--right-margin));
   }
   & .emoji {
     width: 38px;

src/app/organisms/emoji-board/custom-emoji.js

@@ -0,0 +1,185 @@
+import { emojis } from './emoji';
+
+// Custom emoji are stored in one of three places:
+// - User emojis, which are stored in account data
+// - Room emojis, which are stored in state events in a room
+// - Emoji packs, which are rooms of emojis referenced in the account data or in a room's
+//   cannonical space
+//
+// Emojis and packs referenced from within a user's account data should be available
+// globally, while emojis and packs in rooms and spaces should only be available within
+// those spaces and rooms
+
+class ImagePack {
+  // Convert a raw image pack into a more maliable format
+  //
+  // Takes an image pack as per MSC 2545 (e.g. as in the Matrix spec), and converts it to a
+  // format used here, while filling in defaults.
+  //
+  // The room argument is the room the pack exists in, which is used as a fallback for
+  // missing properties
+  //
+  // Returns `null` if the rawPack is not a properly formatted image pack, although there
+  // is still a fair amount of tolerance for malformed packs.
+  static parsePack(rawPack, room) {
+    if (typeof rawPack.images === 'undefined') {
+      return null;
+    }
+
+    const pack = rawPack.pack ?? {};
+
+    const displayName = pack.display_name ?? (room ? room.name : undefined);
+    const avatar = pack.avatar_url ?? (room ? room.getMxcAvatarUrl() : undefined);
+    const usage = pack.usage ?? ['emoticon', 'sticker'];
+    const { attribution } = pack;
+    const images = Object.entries(rawPack.images).flatMap((e) => {
+      const data = e[1];
+      const shortcode = e[0];
+      const mxc = data.url;
+      const body = data.body ?? shortcode;
+      const { info } = data;
+      const usage_ = data.usage ?? usage;
+
+      if (mxc) {
+        return [{
+          shortcode, mxc, body, info, usage: usage_,
+        }];
+      }
+      return [];
+    });
+
+    return new ImagePack(displayName, avatar, usage, attribution, images);
+  }
+
+  constructor(displayName, avatar, usage, attribution, images) {
+    this.displayName = displayName;
+    this.avatar = avatar;
+    this.usage = usage;
+    this.attribution = attribution;
+    this.images = images;
+  }
+
+  // Produce a list of emoji in this image pack
+  getEmojis() {
+    return this.images.filter((i) => i.usage.indexOf('emoticon') !== -1);
+  }
+
+  // Produce a list of stickers in this image pack
+  getStickers() {
+    return this.images.filter((i) => i.usage.indexOf('sticker') !== -1);
+  }
+}
+
+// Retrieve a list of user emojis
+//
+// Result is an ImagePack, or null if the user hasn't set up or has deleted their personal
+// image pack.
+//
+// Accepts a reference to a matrix client as the only argument
+function getUserImagePack(mx) {
+  const accountDataEmoji = mx.getAccountData('im.ponies.user_emotes');
+  if (!accountDataEmoji) {
+    return null;
+  }
+
+  const userImagePack = ImagePack.parsePack(accountDataEmoji.event.content);
+  if (userImagePack) userImagePack.displayName ??= 'Your Emoji';
+  return userImagePack;
+}
+
+// Produces a list of all of the emoji packs in a room
+//
+// Returns a list of `ImagePack`s.  This does not include packs in spaces that contain
+// this room.
+function getPacksInRoom(room) {
+  const packs = room.currentState.getStateEvents('im.ponies.room_emotes');
+
+  return packs
+    .map((p) => ImagePack.parsePack(p.event.content, room))
+    .filter((p) => p !== null);
+}
+
+// Produce a list of all image packs which should be shown for a given room
+//
+// This includes packs in that room, the user's personal images, and will eventually
+// include the user's enabled global image packs and space-level packs.
+//
+// This differs from getPacksInRoom, as the former only returns packs that are directly in
+// a room, whereas this function returns all packs which should be shown to the user while
+// they are in this room.
+//
+// Packs will be returned in the order that shortcode conflicts should be resolved, with
+// higher priority packs coming first.
+function getRelevantPacks(room) {
+  return [].concat(
+    getUserImagePack(room.client) ?? [],
+    getPacksInRoom(room),
+  );
+}
+
+// Returns all user+room emojis and all standard unicode emojis
+//
+// Accepts a reference to a matrix client as the only argument
+//
+// Result is a map from shortcode to the corresponding emoji.  If two emoji share a
+// shortcode, only one will be presented, with priority given to custom emoji.
+//
+// Will eventually be expanded to include all emojis revelant to a room and the user
+function getShortcodeToEmoji(room) {
+  const allEmoji = new Map();
+
+  emojis.forEach((emoji) => {
+    if (emoji.shortcodes.constructor.name === 'Array') {
+      emoji.shortcodes.forEach((shortcode) => {
+        allEmoji.set(shortcode, emoji);
+      });
+    } else {
+      allEmoji.set(emoji.shortcodes, emoji);
+    }
+  });
+
+  getRelevantPacks(room).reverse()
+    .flatMap((pack) => pack.getEmojis())
+    .forEach((emoji) => {
+      allEmoji.set(emoji.shortcode, emoji);
+    });
+
+  return allEmoji;
+}
+
+function getShortcodeToCustomEmoji(room) {
+  const allEmoji = new Map();
+
+  getRelevantPacks(room).reverse()
+    .flatMap((pack) => pack.getEmojis())
+    .forEach((emoji) => {
+      allEmoji.set(emoji.shortcode, emoji);
+    });
+
+  return allEmoji;
+}
+
+// Produces a special list of emoji specifically for auto-completion
+//
+// This list contains each emoji once, with all emoji being deduplicated by shortcode.
+// However, the order of the standard emoji will have been preserved, and alternate
+// shortcodes for the standard emoji will not be considered.
+//
+// Standard emoji are guaranteed to be earlier in the list than custom emoji
+function getEmojiForCompletion(room) {
+  const allEmoji = new Map();
+  getRelevantPacks(room).reverse()
+    .flatMap((pack) => pack.getEmojis())
+    .forEach((emoji) => {
+      allEmoji.set(emoji.shortcode, emoji);
+    });
+
+  return emojis.filter((e) => !allEmoji.has(e.shortcode))
+    .concat(Array.from(allEmoji.values()));
+}
+
+export {
+  getUserImagePack,
+  getShortcodeToEmoji, getShortcodeToCustomEmoji,
+  getRelevantPacks, getEmojiForCompletion,
+};

src/app/organisms/invite-list/InviteList.jsx

@@ -89,7 +89,7 @@ function InviteList({ isOpen, onRequestClose }) {
       <div className="invites-content">
         { initMatrix.roomList.inviteDirects.size !== 0 && (
           <div className="invites-content__subheading">
-            <Text variant="b3">Direct Messages</Text>
+            <Text variant="b3" weight="bold">Direct Messages</Text>
           </div>
         )}
         {
@@ -117,14 +117,14 @@ function InviteList({ isOpen, onRequestClose }) {
         }
         { initMatrix.roomList.inviteSpaces.size !== 0 && (
           <div className="invites-content__subheading">
-            <Text variant="b3">Spaces</Text>
+            <Text variant="b3" weight="bold">Spaces</Text>
           </div>
         )}
         { Array.from(initMatrix.roomList.inviteSpaces).map(renderRoomTile) }
 
         { initMatrix.roomList.inviteRooms.size !== 0 && (
           <div className="invites-content__subheading">
-            <Text variant="b3">Rooms</Text>
+            <Text variant="b3" weight="bold">Rooms</Text>
           </div>
         )}
         { Array.from(initMatrix.roomList.inviteRooms).map(renderRoomTile) }

src/app/organisms/invite-list/InviteList.scss

@@ -1,13 +1,13 @@
+@use '../../partials/dir';
+
 .invites-content {
-  margin: 0 var(--sp-normal);
-  margin-right: var(--sp-extra-tight);
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
 
   &__subheading {
     margin-top: var(--sp-extra-loose);
 
     & .text {
       text-transform: uppercase;
-      font-weight: 600;
     }
     &:first-child {
       margin-top: var(--sp-tight);
@@ -21,19 +21,6 @@
     }
   }
   & .invite-btn__container .btn-surface {
-    margin-right: var(--sp-normal);
-    [dir=rtl] & {
-      margin: {
-        right: 0;
-        left: var(--sp-normal);
-      }
-    }
-  }
-
-  [dir=rtl] & {
-    margin: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
+    @include dir.side(margin, 0, var(--sp-normal));
   }
 }

src/app/organisms/invite-user/InviteUser.scss

@@ -1,7 +1,8 @@
+@use '../../partials/dir';
+
 .invite-user {
-  margin: 0 var(--sp-normal);
-  margin-right: var(--sp-extra-tight);
   margin-top: var(--sp-extra-tight);
+  @include dir.side(margin, var(--sp-normal), var(--sp-extra-tight));
 
   &__form {
     display: flex;
@@ -10,11 +11,7 @@
     & .input-container {
       flex: 1;
       min-width: 0;
-      margin-right: var(--sp-normal);
-      [dir=rtl] & {
-        margin-right: 0;
-        margin-left: var(--sp-normal);
-      }
+      @include dir.side(margin, 0, var(--sp-normal));
     }
 
     & .btn-primary {
@@ -45,11 +42,4 @@
       align-self: flex-end;
     }
   }
-
-  [dir=rtl] & {
-    margin: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-  }
 }