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.1",
+  "version": "1.7.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "cinny",
-      "version": "1.6.1",
+      "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.1",
+  "version": "1.7.0",
   "description": "Yet another matrix client",
   "main": "index.js",
   "engines": {

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,22 +7,21 @@ 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, 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 draggable="false" 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' }}

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,4 +1,5 @@
 @use '../../partials/dir';
+@use './state';
 
 .toggle {
   width: 44px;
@@ -10,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;
 

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,4 @@
+@use '../../partials/flex';
 @use '../../partials/text';
 @use '../../partials/dir';
 
@@ -25,7 +26,7 @@
 
 .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;
@@ -37,30 +38,40 @@
   }
 
   &: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 {
       @include dir.side(
         margin,
-        calc(var(--ic-small) + var(--sp-ultra-tight)),
-        var(--sp-extra-tight)
+        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/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/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.scss

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

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/message/Message.jsx

@@ -3,6 +3,7 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './Message.scss';
 
+import { getShortcodeToCustomEmoji } from '../../organisms/emoji-board/custom-emoji';
 import { twemojify } from '../../../util/twemojify';
 
 import initMatrix from '../../../client/initMatrix';
@@ -52,17 +53,14 @@ 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,
@@ -172,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' && (
           <>
             {'* '}
@@ -272,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"
@@ -303,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,
@@ -318,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) => {
@@ -368,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}
@@ -378,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>
   );
 }
@@ -414,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}
@@ -568,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');
@@ -577,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);
@@ -590,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;
 
@@ -611,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}
@@ -647,7 +702,7 @@ function Message({
         {haveReactions && (
           <MessageReactionGroup roomTimeline={roomTimeline} mEvent={mEvent} />
         )}
-        {!isEditing && (
+        {roomTimeline && !isEditing && (
           <MessageOptions
             roomTimeline={roomTimeline}
             mEvent={mEvent}
@@ -662,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

@@ -95,6 +95,9 @@
 .message__reactions {
   max-width: calc(100% - 88px);
   min-width: 0;
+  @media (max-width: 1124px) {
+    max-width: 100%;
+  }
 }
 
 
@@ -161,6 +164,10 @@
   & 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;
@@ -195,6 +202,7 @@
       opacity: 0;
     }
   }
+
   .data-mx-spoiler--visible {
     background-color: var(--bg-surface-active) !important;
     color: inherit !important;
@@ -241,8 +249,8 @@
   cursor: pointer;
 
   & .react-emoji {
-    width: 14px;
-    height: 14px;
+    width: 16px;
+    height: 16px;
     margin: 2px;
   }
   &-count {
@@ -250,8 +258,8 @@
     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;
   }
@@ -295,23 +303,40 @@
 
 // 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);
@@ -357,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;
@@ -368,9 +393,8 @@
     }
   }
   & blockquote {
-    display: inline-block;
+    width: fit-content;
     max-width: 100%;
-    @include dir.side(padding, var(--sp-extra-tight), 0);
     @include dir.side(border, 4px solid var(--bg-surface-active), 0);
     white-space: initial !important;
 
@@ -383,10 +407,6 @@
     margin: var(--sp-ultra-tight) 0;
     @include dir.side(padding, 24px, 0);
     white-space: initial !important;
-    
-    & > * {
-      white-space: pre-wrap;
-    }
   }
   & ul.contains-task-list {
     padding: 0;

src/app/molecules/message/TimelineChange.scss

@@ -32,5 +32,6 @@
     min-width: 0;
 
     margin: 0 var(--sp-tight);
+    word-break: break-word;
   }
 }

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

@@ -7,8 +7,6 @@
 }
 
 .pw {
-  --popup-window-drawer-width: 280px;
-
   width: 100%;
   height: 100%;
   background-color: var(--bg-surface);

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-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
@@ -78,6 +82,7 @@ function RoomSelector({
       )}
       options={options}
       onClick={onClick}
+      onContextMenu={onContextMenu}
     />
   );
 }
@@ -87,6 +92,7 @@ RoomSelector.defaultProps = {
   imageSrc: null,
   iconSrc: null,
   options: null,
+  onContextMenu: null,
 };
 RoomSelector.propTypes = {
   name: PropTypes.string.isRequired,
@@ -103,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-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,13 +1,15 @@
 @use '../../partials/dir';
 
 .setting-tile {
-  &__title__wrapper {
-    display: flex;
-    align-items: center;
-  }
-  &__title {
+  display: flex;
+  &__content {
     flex: 1;
     min-width: 0;
-    @include dir.side(margin, 0, var(--sp-normal));
+  }
+  &__title {
+    margin-bottom: var(--sp-ultra-tight);
+  }
+  &__options {
+    @include dir.side(margin, var(--sp-tight), 0);
   }
 }

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>,
         );
@@ -65,13 +85,16 @@ function EmojiGroup({ name, groupEmojis }) {
       {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

@@ -3,26 +3,45 @@
 @use '../../partials/dir';
 
 .emoji-board {
+  --emoji-board-height: 390px;
+  --emoji-board-width: 286px;
   display: flex;
+  
   &__content {
     @extend .cp-fx__item-one;
     @extend .cp-fx__column;
-    height: 400px;
-    width: 286px;
+    height: var(--emoji-board-height);
+    width: var(--emoji-board-width);
+  }
+  & > .scrollbar {
+    width: initial;
+    height: var(--emoji-board-height);
   }
   &__nav {
     @extend .cp-fx__column;
     justify-content: center;
 
+    min-height: 100%;
     padding: 4px 6px;
     background-color: var(--bg-surface-low);
     @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 {

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/navigation/Drawer.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import './Drawer.scss';
 
 import initMatrix from '../../../client/initMatrix';
@@ -14,55 +14,47 @@ import DrawerBreadcrumb from './DrawerBreadcrumb';
 import Home from './Home';
 import Directs from './Directs';
 
-function Drawer() {
+import { useSelectedTab } from '../../hooks/useSelectedTab';
+import { useSelectedSpace } from '../../hooks/useSelectedSpace';
+
+function useSystemState() {
   const [systemState, setSystemState] = useState(null);
-  const [selectedTab, setSelectedTab] = useState(navigation.selectedTab);
-  const [spaceId, setSpaceId] = useState(navigation.selectedSpaceId);
-
-  function onTabSelected(tabId) {
-    setSelectedTab(tabId);
-  }
-  function onSpaceSelected(roomId) {
-    setSpaceId(roomId);
-  }
-  function onRoomLeaved(roomId) {
-    const lRoomIndex = navigation.selectedSpacePath.indexOf(roomId);
-    if (lRoomIndex === -1) return;
-    if (lRoomIndex === 0) selectTab(cons.tabs.HOME);
-    else selectSpace(navigation.selectedSpacePath[lRoomIndex - 1]);
-  }
-
-  function handleSystemState(state) {
-    if (state === 'ERROR' || state === 'RECONNECTING' || state === 'STOPPED') {
-      setSystemState({ status: 'Connection lost!' });
-    }
-    if (systemState !== null) setSystemState(null);
-  }
 
   useEffect(() => {
-    navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
-    navigation.on(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
-    initMatrix.roomList.on(cons.events.roomList.ROOM_LEAVED, onRoomLeaved);
-    return () => {
-      navigation.removeListener(cons.events.navigation.TAB_SELECTED, onTabSelected);
-      navigation.removeListener(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
-      initMatrix.roomList.removeListener(cons.events.roomList.ROOM_LEAVED, onRoomLeaved);
+    const handleSystemState = (state) => {
+      if (state === 'ERROR' || state === 'RECONNECTING' || state === 'STOPPED') {
+        setSystemState({ status: 'Connection lost!' });
+      }
+      if (systemState !== null) setSystemState(null);
     };
-  }, []);
-  useEffect(() => {
     initMatrix.matrixClient.on('sync', handleSystemState);
     return () => {
       initMatrix.matrixClient.removeListener('sync', handleSystemState);
     };
   }, [systemState]);
 
+  return [systemState];
+}
+
+function Drawer() {
+  const [systemState] = useSystemState();
+  const [selectedTab] = useSelectedTab();
+  const [spaceId] = useSelectedSpace();
+  const scrollRef = useRef(null);
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      scrollRef.current.scrollTop = 0;
+    });
+  }, [selectedTab]);
+
   return (
     <div className="drawer">
       <DrawerHeader selectedTab={selectedTab} spaceId={spaceId} />
       <div className="drawer__content-wrapper">
         {selectedTab !== cons.tabs.DIRECTS && <DrawerBreadcrumb spaceId={spaceId} />}
         <div className="rooms__wrapper">
-          <ScrollView autoHide>
+          <ScrollView ref={scrollRef} autoHide>
             <div className="rooms-container">
               {
                 selectedTab !== cons.tabs.DIRECTS

src/app/organisms/navigation/Selector.jsx

@@ -4,16 +4,19 @@ import PropTypes from 'prop-types';
 
 import initMatrix from '../../../client/initMatrix';
 import navigation from '../../../client/state/navigation';
-import { openRoomOptions } from '../../../client/action/navigation';
+import { openReusableContextMenu } from '../../../client/action/navigation';
 import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room';
 import { getEventCords, abbreviateNumber } from '../../../util/common';
 
 import IconButton from '../../atoms/button/IconButton';
 import RoomSelector from '../../molecules/room-selector/RoomSelector';
+import RoomOptions from '../../molecules/room-options/RoomOptions';
 
 import HashIC from '../../../../public/res/ic/outlined/hash.svg';
+import HashGlobeIC from '../../../../public/res/ic/outlined/hash-globe.svg';
 import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
 import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
+import SpaceGlobeIC from '../../../../public/res/ic/outlined/space-globe.svg';
 import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
 import PinIC from '../../../../public/res/ic/outlined/pin.svg';
 import PinFilledIC from '../../../../public/res/ic/filled/pin.svg';
@@ -47,13 +50,28 @@ function Selector({
     };
   }, []);
 
+  const openRoomOptions = (e) => {
+    e.preventDefault();
+    openReusableContextMenu(
+      'right',
+      getEventCords(e, '.room-selector'),
+      (closeMenu) => <RoomOptions roomId={roomId} afterOptionSelect={closeMenu} />,
+    );
+  };
+
+  const joinRuleToIconSrc = (joinRule) => ({
+    restricted: () => (room.isSpaceRoom() ? SpaceIC : HashIC),
+    invite: () => (room.isSpaceRoom() ? SpaceLockIC : HashLockIC),
+    public: () => (room.isSpaceRoom() ? SpaceGlobeIC : HashGlobeIC),
+  }[joinRule]?.() || null);
+
   if (room.isSpaceRoom()) {
     return (
       <RoomSelector
         key={roomId}
         name={room.name}
         roomId={roomId}
-        iconSrc={room.getJoinRule() === 'invite' ? SpaceLockIC : SpaceIC}
+        iconSrc={joinRuleToIconSrc(room.getJoinRule())}
         isUnread={noti.hasNoti(roomId)}
         notificationCount={abbreviateNumber(noti.getTotalNoti(roomId))}
         isAlert={noti.getHighlightNoti(roomId) !== 0}
@@ -82,20 +100,20 @@ function Selector({
       name={room.name}
       roomId={roomId}
       imageSrc={isDM ? imageSrc : null}
-      // eslint-disable-next-line no-nested-ternary
-      iconSrc={isDM ? null : room.getJoinRule() === 'invite' ? HashLockIC : HashIC}
+      iconSrc={isDM ? null : joinRuleToIconSrc(room.getJoinRule())}
       isSelected={isSelected}
       isUnread={noti.hasNoti(roomId)}
       notificationCount={abbreviateNumber(noti.getTotalNoti(roomId))}
       isAlert={noti.getHighlightNoti(roomId) !== 0}
       onClick={onClick}
+      onContextMenu={openRoomOptions}
       options={(
         <IconButton
           size="extra-small"
           tooltip="Options"
           tooltipPlacement="right"
           src={VerticalMenuIC}
-          onClick={(e) => openRoomOptions(getEventCords(e), roomId)}
+          onClick={openRoomOptions}
         />
       )}
     />

src/app/organisms/navigation/SideBar.jsx

@@ -7,7 +7,6 @@ import colorMXID from '../../../util/colorMXID';
 import {
   selectTab, openInviteList, openSearch, openSettings,
 } from '../../../client/action/navigation';
-import navigation from '../../../client/state/navigation';
 import { abbreviateNumber } from '../../../util/common';
 
 import ScrollView from '../../atoms/scroll/ScrollView';
@@ -18,6 +17,9 @@ import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import SearchIC from '../../../../public/res/ic/outlined/search.svg';
 import InviteIC from '../../../../public/res/ic/outlined/invite.svg';
 
+import { useSelectedTab } from '../../hooks/useSelectedTab';
+import { useSpaceShortcut } from '../../hooks/useSpaceShortcut';
+
 function ProfileAvatarMenu() {
   const mx = initMatrix.matrixClient;
   const [profile, setProfile] = useState({
@@ -54,41 +56,42 @@ function ProfileAvatarMenu() {
   );
 }
 
-function SideBar() {
-  const { roomList, notifications } = initMatrix;
-  const mx = initMatrix.matrixClient;
+function useTotalInvites() {
+  const { roomList } = initMatrix;
   const totalInviteCount = () => roomList.inviteRooms.size
     + roomList.inviteSpaces.size
     + roomList.inviteDirects.size;
-
   const [totalInvites, updateTotalInvites] = useState(totalInviteCount());
-  const [selectedTab, setSelectedTab] = useState(navigation.selectedTab);
-  const [, forceUpdate] = useState({});
-
-  function onTabSelected(tabId) {
-    setSelectedTab(tabId);
-  }
-  function onInviteListChange() {
-    updateTotalInvites(totalInviteCount());
-  }
-  function onSpaceShortcutUpdated() {
-    forceUpdate({});
-  }
-  function onNotificationChanged(roomId, total, prevTotal) {
-    if (total === prevTotal) return;
-    forceUpdate({});
-  }
 
   useEffect(() => {
-    navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
-    roomList.on(cons.events.roomList.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
+    const onInviteListChange = () => {
+      updateTotalInvites(totalInviteCount());
+    };
     roomList.on(cons.events.roomList.INVITELIST_UPDATED, onInviteListChange);
-    notifications.on(cons.events.notifications.NOTI_CHANGED, onNotificationChanged);
-
     return () => {
-      navigation.removeListener(cons.events.navigation.TAB_SELECTED, onTabSelected);
-      roomList.removeListener(cons.events.roomList.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
       roomList.removeListener(cons.events.roomList.INVITELIST_UPDATED, onInviteListChange);
+    };
+  }, []);
+
+  return [totalInvites];
+}
+
+function SideBar() {
+  const { roomList, notifications } = initMatrix;
+  const mx = initMatrix.matrixClient;
+
+  const [selectedTab] = useSelectedTab();
+  const [spaceShortcut] = useSpaceShortcut();
+  const [totalInvites] = useTotalInvites();
+  const [, forceUpdate] = useState({});
+
+  useEffect(() => {
+    function onNotificationChanged(roomId, total, prevTotal) {
+      if (total === prevTotal) return;
+      forceUpdate({});
+    }
+    notifications.on(cons.events.notifications.NOTI_CHANGED, onNotificationChanged);
+    return () => {
       notifications.removeListener(cons.events.notifications.NOTI_CHANGED, onNotificationChanged);
     };
   }, []);
@@ -156,7 +159,7 @@ function SideBar() {
             <div className="sidebar-divider" />
             <div className="space-container">
               {
-                [...roomList.spaceShortcut].map((shortcut) => {
+                spaceShortcut.map((shortcut) => {
                   const sRoomId = shortcut;
                   const room = mx.getRoom(sRoomId);
                   return (

src/app/organisms/profile-viewer/ProfileViewer.jsx

@@ -7,26 +7,87 @@ import { twemojify } from '../../../util/twemojify';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
-import { selectRoom } from '../../../client/action/navigation';
+import { selectRoom, openReusableContextMenu } from '../../../client/action/navigation';
 import * as roomActions from '../../../client/action/room';
 
 import { getUsername, getUsernameOfRoomMember, getPowerLabel } from '../../../util/matrixUtil';
+import { getEventCords } from '../../../util/common';
 import colorMXID from '../../../util/colorMXID';
 
 import Text from '../../atoms/text/Text';
 import Chip from '../../atoms/chip/Chip';
 import IconButton from '../../atoms/button/IconButton';
+import Input from '../../atoms/input/Input';
 import Avatar from '../../atoms/avatar/Avatar';
 import Button from '../../atoms/button/Button';
+import { MenuItem } from '../../atoms/context-menu/ContextMenu';
+import PowerLevelSelector from '../../molecules/power-level-selector/PowerLevelSelector';
 import Dialog from '../../molecules/dialog/Dialog';
-import SettingTile from '../../molecules/setting-tile/SettingTile';
 
 import ShieldEmptyIC from '../../../../public/res/ic/outlined/shield-empty.svg';
+import ChevronRightIC from '../../../../public/res/ic/outlined/chevron-right.svg';
 import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
+import { useForceUpdate } from '../../hooks/useForceUpdate';
+
+function ModerationTools({
+  roomId, userId,
+}) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  const roomMember = room.getMember(userId);
+
+  const myPowerLevel = room.getMember(mx.getUserId())?.powerLevel || 0;
+  const powerLevel = roomMember?.powerLevel || 0;
+  const canIKick = (
+    roomMember?.membership === 'join'
+    && room.currentState.hasSufficientPowerLevelFor('kick', myPowerLevel)
+    && powerLevel < myPowerLevel
+  );
+  const canIBan = (
+    ['join', 'leave'].includes(roomMember?.membership)
+    && room.currentState.hasSufficientPowerLevelFor('ban', myPowerLevel)
+    && powerLevel < myPowerLevel
+  );
+
+  const handleKick = (e) => {
+    e.preventDefault();
+    const kickReason = e.target.elements['kick-reason']?.value.trim();
+    roomActions.kick(roomId, userId, kickReason !== '' ? kickReason : undefined);
+  };
+
+  const handleBan = (e) => {
+    e.preventDefault();
+    const banReason = e.target.elements['ban-reason']?.value.trim();
+    roomActions.ban(roomId, userId, banReason !== '' ? banReason : undefined);
+  };
+
+  return (
+    <div className="moderation-tools">
+      {canIKick && (
+        <form onSubmit={handleKick}>
+          <Input label="Kick reason" name="kick-reason" />
+          <Button type="submit">Kick</Button>
+        </form>
+      )}
+      {canIBan && (
+        <form onSubmit={handleBan}>
+          <Input label="Ban reason" name="ban-reason" />
+          <Button type="submit">Ban</Button>
+        </form>
+      )}
+    </div>
+  );
+}
+ModerationTools.propTypes = {
+  roomId: PropTypes.string.isRequired,
+  userId: PropTypes.string.isRequired,
+};
+
 function SessionInfo({ userId }) {
   const [devices, setDevices] = useState(null);
+  const [isVisible, setIsVisible] = useState(false);
   const mx = initMatrix.matrixClient;
 
   useEffect(() => {
@@ -51,10 +112,11 @@ function SessionInfo({ userId }) {
   }, [userId]);
 
   function renderSessionChips() {
+    if (!isVisible) return null;
     return (
       <div className="session-info__chips">
-        {devices === null && <Text variant="b3">Loading sessions...</Text>}
-        {devices?.length === 0 && <Text variant="b3">No session found.</Text>}
+        {devices === null && <Text variant="b2">Loading sessions...</Text>}
+        {devices?.length === 0 && <Text variant="b2">No session found.</Text>}
         {devices !== null && (devices.map((device) => (
           <Chip
             key={device.deviceId}
@@ -68,10 +130,13 @@ function SessionInfo({ userId }) {
 
   return (
     <div className="session-info">
-      <SettingTile
-        title="Sessions"
-        content={renderSessionChips()}
-      />
+      <MenuItem
+        onClick={() => setIsVisible(!isVisible)}
+        iconSrc={isVisible ? ChevronBottomIC : ChevronRightIC}
+      >
+        <Text variant="b2">{`View ${devices?.length > 0 ? `${devices.length} ` : ''}sessions`}</Text>
+      </MenuItem>
+      {renderSessionChips()}
     </div>
   );
 }
@@ -94,10 +159,12 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
   const [isInviting, setIsInviting] = useState(false);
   const [isInvited, setIsInvited] = useState(member?.membership === 'invite');
 
-  const myPowerlevel = room.getMember(mx.getUserId()).powerLevel;
+  const myPowerlevel = room.getMember(mx.getUserId())?.powerLevel || 0;
   const userPL = room.getMember(userId)?.powerLevel || 0;
   const canIKick = room.currentState.hasSufficientPowerLevelFor('kick', myPowerlevel) && userPL < myPowerlevel;
 
+  const isBanned = member?.membership === 'ban';
+
   const onCreated = (dmRoomId) => {
     if (isMountedRef.current === false) return;
     setIsCreatingDM(false);
@@ -119,7 +186,7 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
     setIsInviting(false);
   }, [userId]);
 
-  async function openDM() {
+  const openDM = async () => {
     const directIds = [...initMatrix.roomList.directs];
 
     // Check and open if user already have a DM with userId.
@@ -145,9 +212,9 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
       if (isMountedRef.current === false) return;
       setIsCreatingDM(false);
     }
-  }
+  };
 
-  async function toggleIgnore() {
+  const toggleIgnore = async () => {
     const ignoredUsers = mx.getIgnoredUsers();
     const uIndex = ignoredUsers.indexOf(userId);
     if (uIndex >= 0) {
@@ -165,9 +232,9 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
     } catch {
       setIsIgnoring(false);
     }
-  }
+  };
 
-  async function toggleInvite() {
+  const toggleInvite = async () => {
     try {
       setIsInviting(true);
       let isInviteSent = false;
@@ -182,7 +249,7 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
     } catch {
       setIsInviting(false);
     }
-  }
+  };
 
   return (
     <div className="profile-viewer__buttons">
@@ -193,7 +260,14 @@ function ProfileFooter({ roomId, userId, onRequestClose }) {
       >
         {isCreatingDM ? 'Creating room...' : 'Message'}
       </Button>
-      { member?.membership === 'join' && <Button>Mention</Button>}
+      { isBanned && canIKick && (
+        <Button
+          variant="positive"
+          onClick={() => roomActions.unban(roomId, userId)}
+        >
+          Unban
+        </Button>
+      )}
       { (isInvited ? canIKick : room.canInvite(mx.getUserId())) && isInvitable && (
         <Button
           onClick={toggleInvite}
@@ -226,80 +300,137 @@ ProfileFooter.propTypes = {
   onRequestClose: PropTypes.func.isRequired,
 };
 
-function ProfileViewer() {
+function useToggleDialog() {
   const [isOpen, setIsOpen] = useState(false);
   const [roomId, setRoomId] = useState(null);
   const [userId, setUserId] = useState(null);
 
-  const mx = initMatrix.matrixClient;
-  const room = roomId ? mx.getRoom(roomId) : null;
-  let username = '';
-  if (room !== null) {
-    const roomMember = room.getMember(userId);
-    if (roomMember) username = getUsernameOfRoomMember(roomMember);
-    else username = getUsername(userId);
-  }
-
-  function loadProfile(uId, rId) {
-    setIsOpen(true);
-    setUserId(uId);
-    setRoomId(rId);
-  }
-
   useEffect(() => {
+    const loadProfile = (uId, rId) => {
+      setIsOpen(true);
+      setUserId(uId);
+      setRoomId(rId);
+    };
     navigation.on(cons.events.navigation.PROFILE_VIEWER_OPENED, loadProfile);
     return () => {
       navigation.removeListener(cons.events.navigation.PROFILE_VIEWER_OPENED, loadProfile);
     };
   }, []);
 
-  const handleAfterClose = () => {
+  const closeDialog = () => setIsOpen(false);
+
+  const afterClose = () => {
     setUserId(null);
     setRoomId(null);
   };
 
-  function renderProfile() {
-    const member = room.getMember(userId) || mx.getUser(userId) || {};
-    const avatarMxc = member.getMxcAvatarUrl?.() || member.avatarUrl;
+  return [isOpen, roomId, userId, closeDialog, afterClose];
+}
+
+function useRerenderOnProfileChange(roomId, userId) {
+  const mx = initMatrix.matrixClient;
+  const [, forceUpdate] = useForceUpdate();
+  useEffect(() => {
+    const handleProfileChange = (mEvent, member) => {
+      if (
+        mEvent.getRoomId() === roomId
+        && (member.userId === userId || member.userId === mx.getUserId())
+      ) {
+        forceUpdate();
+      }
+    };
+    mx.on('RoomMember.powerLevel', handleProfileChange);
+    mx.on('RoomMember.membership', handleProfileChange);
+    return () => {
+      mx.removeListener('RoomMember.powerLevel', handleProfileChange);
+      mx.removeListener('RoomMember.membership', handleProfileChange);
+    };
+  }, [roomId, userId]);
+}
+
+function ProfileViewer() {
+  const [isOpen, roomId, userId, closeDialog, handleAfterClose] = useToggleDialog();
+  useRerenderOnProfileChange(roomId, userId);
+
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+
+  const renderProfile = () => {
+    const roomMember = room.getMember(userId);
+    const username = roomMember ? getUsernameOfRoomMember(roomMember) : getUsername(userId);
+    const avatarMxc = roomMember?.getMxcAvatarUrl?.() || mx.getUser(userId)?.avatarUrl;
+    const avatarUrl = (avatarMxc && avatarMxc !== 'null') ? mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop') : null;
+
+    const powerLevel = roomMember?.powerLevel || 0;
+    const myPowerLevel = room.getMember(mx.getUserId())?.powerLevel || 0;
+
+    const canChangeRole = (
+      room.currentState.maySendEvent('m.room.power_levels', mx.getUserId())
+      && (powerLevel < myPowerLevel || userId === mx.getUserId())
+    );
+
+    const handleChangePowerLevel = (newPowerLevel) => {
+      if (newPowerLevel === powerLevel) return;
+      if (newPowerLevel === myPowerLevel
+        ? confirm('You will not be able to undo this change as you are promoting the user to have the same power level as yourself. Are you sure?')
+        : true
+      ) {
+        roomActions.setPowerLevel(roomId, userId, newPowerLevel);
+      }
+    };
+
+    const handlePowerSelector = (e) => {
+      openReusableContextMenu(
+        'bottom',
+        getEventCords(e, '.btn-surface'),
+        (closeMenu) => (
+          <PowerLevelSelector
+            value={powerLevel}
+            max={myPowerLevel}
+            onSelect={(pl) => {
+              closeMenu();
+              handleChangePowerLevel(pl);
+            }}
+          />
+        ),
+      );
+    };
 
     return (
       <div className="profile-viewer">
         <div className="profile-viewer__user">
-          <Avatar
-            imageSrc={!avatarMxc ? null : mx.mxcUrlToHttp(avatarMxc, 80, 80, 'crop')}
-            text={username}
-            bgColor={colorMXID(userId)}
-            size="large"
-          />
+          <Avatar imageSrc={avatarUrl} text={username} bgColor={colorMXID(userId)} size="large" />
           <div className="profile-viewer__user__info">
             <Text variant="s1" weight="medium">{twemojify(username)}</Text>
             <Text variant="b2">{twemojify(userId)}</Text>
           </div>
           <div className="profile-viewer__user__role">
             <Text variant="b3">Role</Text>
-            <Button iconSrc={ChevronBottomIC}>{getPowerLabel(member.powerLevel) || 'Member'}</Button>
+            <Button
+              onClick={canChangeRole ? handlePowerSelector : null}
+              iconSrc={canChangeRole ? ChevronBottomIC : null}
+            >
+              {`${getPowerLabel(powerLevel) || 'Member'} - ${powerLevel}`}
+            </Button>
           </div>
         </div>
+        <ModerationTools roomId={roomId} userId={userId} />
         <SessionInfo userId={userId} />
         { userId !== mx.getUserId() && (
-          <ProfileFooter
-            roomId={roomId}
-            userId={userId}
-            onRequestClose={() => setIsOpen(false)}
-          />
+          <ProfileFooter roomId={roomId} userId={userId} onRequestClose={closeDialog} />
         )}
       </div>
     );
-  }
+  };
 
   return (
     <Dialog
       className="profile-viewer__dialog"
       isOpen={isOpen}
-      title={`${username} in ${room?.name ?? ''}`}
+      title={room?.name ?? ''}
       onAfterClose={handleAfterClose}
-      onRequestClose={() => setIsOpen(false)}
-      contentOptions={<IconButton src={CrossIC} onClick={() => setIsOpen(false)} tooltip="Close" />}
+      onRequestClose={closeDialog}
+      contentOptions={<IconButton src={CrossIC} onClick={closeDialog} tooltip="Close" />}
     >
       {roomId ? renderProfile() : <div />}
     </Dialog>

src/app/organisms/profile-viewer/ProfileViewer.scss

@@ -1,3 +1,4 @@
+@use '../../partials/flex';
 @use '../../partials/dir';
 
 .profile-viewer__dialog {
@@ -15,7 +16,6 @@
   &__user {
     display: flex;
     padding-bottom: var(--sp-normal);
-    border-bottom: 1px solid var(--bg-surface-border);
 
     &__info {
       align-self: flex-end;
@@ -61,12 +61,47 @@
   }
 }
 
-.session-info {
-  & .setting-tile__title .text {
-    color: var(--tc-surface-high);
+.profile-viewer__admin-tool {
+  .setting-tile {
+    margin-top: var(--sp-loose);
   }
+}
+
+.moderation-tools {
+  & > form {
+    margin: var(--sp-normal) 0;
+    display: flex;
+    align-items: flex-end;
+    & .input-container {
+      @extend .cp-fx__item-one;
+      @include dir.side(margin, 0, var(--sp-tight));
+    }
+    & button {
+      height: 46px;
+    }
+  }
+}
+
+.session-info {
+  box-shadow: var(--bs-surface-border);
+  border-radius: var(--bo-radius);
+  overflow: hidden;
+
+  & .context-menu__item button {
+    padding: var(--sp-extra-tight);
+    & .ic-raw {
+      @include dir.side(margin, 0, var(--sp-extra-tight));
+    }
+  }
+  
   &__chips {
+    border-top: 1px solid var(--bg-surface-border);
+    padding: var(--sp-tight);
     padding-top: var(--sp-ultra-tight);
+
+    & > .text {
+      margin-top: var(--sp-extra-tight);
+    }
     & .chip {
       margin-top: var(--sp-extra-tight);
       @include dir.side(margin, 0, var(--sp-extra-tight));

src/app/organisms/room-optons/RoomOptions.jsx

@@ -1,251 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import './RoomOptions.scss';
-
-import { twemojify } from '../../../util/twemojify';
-
-import initMatrix from '../../../client/initMatrix';
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import { openInviteUser } from '../../../client/action/navigation';
-import * as roomActions from '../../../client/action/room';
-
-import ContextMenu, { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
-
-import TickMarkIC from '../../../../public/res/ic/outlined/tick-mark.svg';
-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';
-import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
-import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
-
-function getNotifState(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 setRoomNotifMute(roomId) {
-  const mx = initMatrix.matrixClient;
-  const roomPushRule = mx.getRoomPushRule('global', roomId);
-
-  const promises = [];
-  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 Promise.all(promises);
-}
-
-function setRoomNotifsState(newState, roomId) {
-  const mx = initMatrix.matrixClient;
-  const promises = [];
-
-  const oldState = getNotifState(roomId);
-  if (oldState === cons.notifs.MUTE) {
-    promises.push(mx.deletePushRule('global', 'override', roomId));
-  }
-
-  if (newState === cons.notifs.DEFAULT) {
-    const roomPushRule = mx.getRoomPushRule('global', roomId);
-    if (roomPushRule) {
-      promises.push(mx.deletePushRule('global', 'room', roomPushRule.rule_id));
-    }
-    return Promise.all(promises);
-  }
-
-  if (newState === 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 setRoomNotifPushRule(notifState, roomId) {
-  if (notifState === cons.notifs.MUTE) {
-    setRoomNotifMute(roomId);
-    return;
-  }
-  setRoomNotifsState(notifState, roomId);
-}
-
-let isRoomOptionVisible = false;
-let roomId = null;
-function RoomOptions() {
-  const openerRef = useRef(null);
-  const [notifState, setNotifState] = useState(cons.notifs.DEFAULT);
-
-  function openRoomOptions(cords, rId) {
-    if (roomId !== null || isRoomOptionVisible) {
-      roomId = null;
-      if (cords.detail === 0) openerRef.current.click();
-      return;
-    }
-    openerRef.current.style.transform = `translate(${cords.x}px, ${cords.y}px)`;
-    roomId = rId;
-    setNotifState(getNotifState(roomId));
-    openerRef.current.click();
-  }
-
-  function afterRoomOptionsToggle(isVisible) {
-    isRoomOptionVisible = isVisible;
-    if (!isVisible) {
-      setTimeout(() => {
-        if (!isRoomOptionVisible) roomId = null;
-      }, 500);
-    }
-  }
-
-  useEffect(() => {
-    navigation.on(cons.events.navigation.ROOMOPTIONS_OPENED, openRoomOptions);
-    return () => {
-      navigation.on(cons.events.navigation.ROOMOPTIONS_OPENED, openRoomOptions);
-    };
-  }, []);
-
-  const handleMarkAsRead = () => {
-    const mx = initMatrix.matrixClient;
-    const room = mx.getRoom(roomId);
-    if (!room) return;
-    const events = room.getLiveTimeline().getEvents();
-    mx.sendReadReceipt(events[events.length - 1]);
-  };
-
-  const handleInviteClick = () => openInviteUser(roomId);
-  const handleLeaveClick = (toggleMenu) => {
-    if (confirm('Are you really want to leave this room?')) {
-      roomActions.leave(roomId);
-      toggleMenu();
-    }
-  };
-
-  function setNotif(nState, currentNState) {
-    if (nState === currentNState) return;
-    setRoomNotifPushRule(nState, roomId);
-    setNotifState(nState);
-  }
-
-  return (
-    <ContextMenu
-      afterToggle={afterRoomOptionsToggle}
-      maxWidth={298}
-      content={(toggleMenu) => (
-        <>
-          <MenuHeader>{twemojify(`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`)}</MenuHeader>
-          <MenuItem
-            iconSrc={TickMarkIC}
-            onClick={() => {
-              handleMarkAsRead(); toggleMenu();
-            }}
-          >
-            Mark as read
-          </MenuItem>
-          <MenuItem
-            iconSrc={AddUserIC}
-            onClick={() => {
-              handleInviteClick(); toggleMenu();
-            }}
-          >
-            Invite
-          </MenuItem>
-          <MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={() => handleLeaveClick(toggleMenu)}>Leave</MenuItem>
-          <MenuHeader>Notification</MenuHeader>
-          <MenuItem
-            variant={notifState === cons.notifs.DEFAULT ? 'positive' : 'surface'}
-            iconSrc={BellIC}
-            onClick={() => setNotif(cons.notifs.DEFAULT, notifState)}
-          >
-            Default
-          </MenuItem>
-          <MenuItem
-            variant={notifState === cons.notifs.ALL_MESSAGES ? 'positive' : 'surface'}
-            iconSrc={BellRingIC}
-            onClick={() => setNotif(cons.notifs.ALL_MESSAGES, notifState)}
-          >
-            All messages
-          </MenuItem>
-          <MenuItem
-            variant={notifState === cons.notifs.MENTIONS_AND_KEYWORDS ? 'positive' : 'surface'}
-            iconSrc={BellPingIC}
-            onClick={() => setNotif(cons.notifs.MENTIONS_AND_KEYWORDS, notifState)}
-          >
-            Mentions & Keywords
-          </MenuItem>
-          <MenuItem
-            variant={notifState === cons.notifs.MUTE ? 'positive' : 'surface'}
-            iconSrc={BellOffIC}
-            onClick={() => setNotif(cons.notifs.MUTE, notifState)}
-          >
-            Mute
-          </MenuItem>
-        </>
-      )}
-      render={(toggleMenu) => (
-        <input
-          ref={openerRef}
-          onClick={toggleMenu}
-          type="button"
-          style={{
-            width: '32px',
-            height: '32px',
-            backgroundColor: 'transparent',
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            padding: 0,
-            border: 'none',
-            visibility: 'hidden',
-          }}
-        />
-      )}
-    />
-  );
-}
-
-export default RoomOptions;

src/app/organisms/room-optons/RoomOptions.scss

@@ -1,21 +0,0 @@
-@use '../../partials/dir';
-
-.context-menu__item {
-  position: relative;
-}
-
-.context-menu__item .btn-positive::before {
-  content: '';
-  display: inline-block;
-  width: 3px;
-  height: 12px;
-  background: var(--bg-positive);
-  @include dir.prop(
-    border-radius,
-    0 4px 4px 0,
-    4px 0 0 4px,
-  );
-  position: absolute;
-  @include dir.prop(left, 0, unset);
-  @include dir.prop(right, unset, 0);
-}

src/app/organisms/room/PeopleDrawer.jsx

@@ -61,6 +61,7 @@ function PeopleDrawer({ roomId }) {
   const PER_PAGE_MEMBER = 50;
   const mx = initMatrix.matrixClient;
   const room = mx.getRoom(roomId);
+  const canInvite = room?.canInvite(mx.getUserId());
 
   const [itemCount, setItemCount] = useState(PER_PAGE_MEMBER);
   const [membership, setMembership] = useState('join');
@@ -106,7 +107,7 @@ function PeopleDrawer({ roomId }) {
     let isRoomChanged = false;
     const updateMemberList = (event) => {
       if (isGettingMembers) return;
-      if (event && event?.event?.room_id !== roomId) return;
+      if (event && event?.getRoomId() !== roomId) return;
       setMemberList(
         simplyfiMembers(
           getMembersWithMembership(membership)
@@ -124,6 +125,7 @@ function PeopleDrawer({ roomId }) {
 
     asyncSearch.on(asyncSearch.RESULT_SENT, handleSearchData);
     mx.on('RoomMember.membership', updateMemberList);
+    mx.on('RoomMember.powerLevel', updateMemberList);
     return () => {
       isRoomChanged = true;
       setMemberList([]);
@@ -131,6 +133,7 @@ function PeopleDrawer({ roomId }) {
       setItemCount(PER_PAGE_MEMBER);
       asyncSearch.removeListener(asyncSearch.RESULT_SENT, handleSearchData);
       mx.removeListener('RoomMember.membership', updateMemberList);
+      mx.removeListener('RoomMember.powerLevel', updateMemberList);
     };
   }, [roomId, membership]);
 
@@ -148,7 +151,7 @@ function PeopleDrawer({ roomId }) {
             <Text className="people-drawer__member-count" variant="b3">{`${room.getJoinedMemberCount()} members`}</Text>
           </Text>
         </TitleWrapper>
-        <IconButton onClick={() => openInviteUser(roomId)} tooltip="Invite" src={AddUserIC} />
+        <IconButton onClick={() => openInviteUser(roomId)} tooltip="Invite" src={AddUserIC} disabled={!canInvite} />
       </Header>
       <div className="people-drawer__content-wrapper">
         <div className="people-drawer__scrollable">

src/app/organisms/room/Room.jsx

@@ -9,6 +9,7 @@ import RoomTimeline from '../../../client/state/RoomTimeline';
 
 import Welcome from '../welcome/Welcome';
 import RoomView from './RoomView';
+import RoomSettings from './RoomSettings';
 import PeopleDrawer from './PeopleDrawer';
 
 function Room() {
@@ -42,8 +43,11 @@ function Room() {
   if (roomTimeline === null) return <Welcome />;
 
   return (
-    <div className="room-container">
-      <RoomView roomTimeline={roomTimeline} eventId={eventId} />
+    <div className="room">
+      <div className="room__content">
+        <RoomSettings roomId={roomTimeline.roomId} />
+        <RoomView roomTimeline={roomTimeline} eventId={eventId} />
+      </div>
       { isDrawer && <PeopleDrawer roomId={roomTimeline.roomId} />}
     </div>
   );

src/app/organisms/room/Room.scss

@@ -1,4 +1,12 @@
-.room-container {
-  display: flex;
+@use '../../partials/flex';
+
+.room {
+  @extend .cp-fx__row;
   height: 100%;
+
+  &__content {
+    @extend .cp-fx__item-one;
+    position: relative;
+    overflow: hidden;
+  }
 }

src/app/organisms/room/RoomSettings.jsx

@@ -0,0 +1,185 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import './RoomSettings.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { openInviteUser } from '../../../client/action/navigation';
+import * as roomActions from '../../../client/action/room';
+
+import Text from '../../atoms/text/Text';
+import Header, { TitleWrapper } from '../../atoms/header/Header';
+import ScrollView from '../../atoms/scroll/ScrollView';
+import Tabs from '../../atoms/tabs/Tabs';
+import { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
+import RoomProfile from '../../molecules/room-profile/RoomProfile';
+import RoomSearch from '../../molecules/room-search/RoomSearch';
+import RoomNotification from '../../molecules/room-notification/RoomNotification';
+import RoomVisibility from '../../molecules/room-visibility/RoomVisibility';
+import RoomAliases from '../../molecules/room-aliases/RoomAliases';
+import RoomHistoryVisibility from '../../molecules/room-history-visibility/RoomHistoryVisibility';
+import RoomEncryption from '../../molecules/room-encryption/RoomEncryption';
+import RoomPermissions from '../../molecules/room-permissions/RoomPermissions';
+
+import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
+import SearchIC from '../../../../public/res/ic/outlined/search.svg';
+import ShieldUserIC from '../../../../public/res/ic/outlined/shield-user.svg';
+import LockIC from '../../../../public/res/ic/outlined/lock.svg';
+import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
+import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
+
+import { useForceUpdate } from '../../hooks/useForceUpdate';
+
+const tabText = {
+  GENERAL: 'General',
+  SEARCH: 'Search',
+  PERMISSIONS: 'Permissions',
+  SECURITY: 'Security',
+};
+
+const tabItems = [{
+  iconSrc: SettingsIC,
+  text: tabText.GENERAL,
+  disabled: false,
+}, {
+  iconSrc: SearchIC,
+  text: tabText.SEARCH,
+  disabled: false,
+}, {
+  iconSrc: ShieldUserIC,
+  text: tabText.PERMISSIONS,
+  disabled: false,
+}, {
+  iconSrc: LockIC,
+  text: tabText.SECURITY,
+  disabled: false,
+}];
+
+function GeneralSettings({ roomId }) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+  const canInvite = room.canInvite(mx.getUserId());
+
+  return (
+    <>
+      <div className="room-settings__card">
+        <MenuItem
+          disabled={!canInvite}
+          onClick={() => openInviteUser(roomId)}
+          iconSrc={AddUserIC}
+        >
+          Invite
+        </MenuItem>
+        <MenuItem
+          variant="danger"
+          onClick={() => {
+            if (confirm('Are you really want to leave this room?')) {
+              roomActions.leave(roomId);
+            }
+          }}
+          iconSrc={LeaveArrowIC}
+        >
+          Leave
+        </MenuItem>
+      </div>
+      <div className="room-settings__card">
+        <MenuHeader>Notification (Changing this will only affect you)</MenuHeader>
+        <RoomNotification roomId={roomId} />
+      </div>
+      <div className="room-settings__card">
+        <MenuHeader>Room visibility (who can join)</MenuHeader>
+        <RoomVisibility roomId={roomId} />
+      </div>
+      <div className="room-settings__card">
+        <MenuHeader>Room addresses</MenuHeader>
+        <RoomAliases roomId={roomId} />
+      </div>
+    </>
+  );
+}
+
+GeneralSettings.propTypes = {
+  roomId: PropTypes.string.isRequired,
+};
+
+function SecuritySettings({ roomId }) {
+  return (
+    <>
+      <div className="room-settings__card">
+        <MenuHeader>Encryption</MenuHeader>
+        <RoomEncryption roomId={roomId} />
+      </div>
+      <div className="room-settings__card">
+        <MenuHeader>Message history visibility (Who can read history)</MenuHeader>
+        <RoomHistoryVisibility roomId={roomId} />
+      </div>
+    </>
+  );
+}
+SecuritySettings.propTypes = {
+  roomId: PropTypes.string.isRequired,
+};
+
+function RoomSettings({ roomId }) {
+  const [, forceUpdate] = useForceUpdate();
+  const [selectedTab, setSelectedTab] = useState(tabItems[0]);
+
+  const handleTabChange = (tabItem) => {
+    setSelectedTab(tabItem);
+  };
+
+  useEffect(() => {
+    let mounted = true;
+    const settingsToggle = (isVisible, tab) => {
+      if (!mounted) return;
+      if (isVisible) {
+        const tabItem = tabItems.find((item) => item.text === tab);
+        if (tabItem) setSelectedTab(tabItem);
+        forceUpdate();
+      } else setTimeout(() => forceUpdate(), 200);
+    };
+    navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
+    return () => {
+      mounted = false;
+      navigation.removeListener(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
+    };
+  }, []);
+
+  if (!navigation.isRoomSettings) return null;
+
+  return (
+    <div className="room-settings">
+      <ScrollView autoHide>
+        <div className="room-settings__content">
+          <Header>
+            <TitleWrapper>
+              <Text variant="s1" weight="medium" primary>Room settings</Text>
+            </TitleWrapper>
+          </Header>
+          <RoomProfile roomId={roomId} />
+          <Tabs
+            items={tabItems}
+            defaultSelected={tabItems.findIndex((tab) => tab.text === selectedTab.text)}
+            onSelect={handleTabChange}
+          />
+          <div className="room-settings__cards-wrapper">
+            {selectedTab.text === tabText.GENERAL && <GeneralSettings roomId={roomId} />}
+            {selectedTab.text === tabText.SEARCH && <RoomSearch roomId={roomId} />}
+            {selectedTab.text === tabText.PERMISSIONS && <RoomPermissions roomId={roomId} />}
+            {selectedTab.text === tabText.SECURITY && <SecuritySettings roomId={roomId} />}
+          </div>
+        </div>
+      </ScrollView>
+    </div>
+  );
+}
+
+RoomSettings.propTypes = {
+  roomId: PropTypes.string.isRequired,
+};
+
+export {
+  RoomSettings as default,
+  tabText,
+};

src/app/organisms/room/RoomSettings.scss

@@ -0,0 +1,53 @@
+@use '../../partials/dir';
+
+.room-settings {
+  height: 100%;
+  & .scrollbar {
+    position: relative;
+  }
+
+  &__content {
+    padding-bottom: calc(2 * var(--sp-extra-loose));
+
+    & .room-profile {
+      margin: var(--sp-extra-loose);
+    }
+  }
+  
+  & .tabs {
+    position: sticky;
+    top: 0;
+    z-index: 999;
+    width: 100%;
+    background-color: var(--bg-surface-low);
+    box-shadow: 0 -4px 0 var(--bg-surface-low),
+      inset 0 -1px 0 var(--bg-surface-border);
+
+    &__content {
+      padding: 0 var(--sp-normal);
+    }
+  }
+  
+  &__cards-wrapper {
+    padding: 0 var(--sp-normal);
+    @include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
+  }
+}
+
+.room-settings__card {
+  margin: var(--sp-normal) 0;
+  background-color: var(--bg-surface);
+  border-radius: var(--bo-radius);
+  box-shadow: var(--bs-surface-border);
+  overflow: hidden;
+
+  & > .context-menu__header:first-child {
+    margin-top: 2px;
+  }
+}
+
+.room-settings .room-permissions__card,
+.room-settings .room-search__form,
+.room-settings .room-search__result-item {
+  @extend .room-settings__card;
+}

src/app/organisms/room/RoomView.jsx

@@ -1,9 +1,12 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './RoomView.scss';
 
 import EventEmitter from 'events';
 
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+
 import RoomViewHeader from './RoomViewHeader';
 import RoomViewContent from './RoomViewContent';
 import RoomViewFloating from './RoomViewFloating';
@@ -13,11 +16,31 @@ import RoomViewCmdBar from './RoomViewCmdBar';
 const viewEvent = new EventEmitter();
 
 function RoomView({ roomTimeline, eventId }) {
+  const roomViewRef = useRef(null);
   // eslint-disable-next-line react/prop-types
   const { roomId } = roomTimeline;
 
+  useEffect(() => {
+    const settingsToggle = (isVisible) => {
+      const roomView = roomViewRef.current;
+      roomView.classList.toggle('room-view--dropped');
+
+      const roomViewContent = roomView.children[1];
+      if (isVisible) {
+        setTimeout(() => {
+          if (!navigation.isRoomSettings) return;
+          roomViewContent.style.visibility = 'hidden';
+        }, 200);
+      } else roomViewContent.style.visibility = 'visible';
+    };
+    navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
+    return () => {
+      navigation.removeListener(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
+    };
+  }, []);
+
   return (
-    <div className="room-view">
+    <div className="room-view" ref={roomViewRef}>
       <RoomViewHeader roomId={roomId} />
       <div className="room-view__content-wrapper">
         <div className="room-view__scrollable">

src/app/organisms/room/RoomView.scss

@@ -1,8 +1,22 @@
 @use '../../partials/flex';
 
 .room-view {
-  @extend .cp-fx__item-one;
   @extend .cp-fx__column;
+  background-color: var(--bg-surface);
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  z-index: 999;
+  box-shadow: none;
+
+  transition: transform 200ms var(--fluid-slide-down);
+
+  &--dropped {
+    transform: translateY(calc(100% - var(--header-height)));
+    border-radius: var(--bo-radius) var(--bo-radius) 0 0;
+    box-shadow: var(--bs-popup);
+  }
 
   &__content-wrapper {
     @extend .cp-fx__item-one;

src/app/organisms/room/RoomViewCmdBar.jsx

@@ -13,7 +13,7 @@ import {
   openPublicRooms,
   openInviteUser,
 } from '../../../client/action/navigation';
-import { emojis } from '../emoji-board/emoji';
+import { getEmojiForCompletion } from '../emoji-board/custom-emoji';
 import AsyncSearch from '../../../util/AsyncSearch';
 
 import Text from '../../atoms/text/Text';
@@ -81,24 +81,51 @@ function renderSuggestions({ prefix, option, suggestions }, fireCmd) {
   }
 
   function renderEmojiSuggestion(emPrefix, emos) {
+    const mx = initMatrix.matrixClient;
+
+    // Renders a small Twemoji
+    function renderTwemoji(emoji) {
+      return parse(twemoji.parse(
+        emoji.unicode,
+        {
+          attributes: () => ({
+            unicode: emoji.unicode,
+            shortcodes: emoji.shortcodes?.toString(),
+          }),
+        },
+      ));
+    }
+
+    // Render a custom emoji
+    function renderCustomEmoji(emoji) {
+      return (
+        <img
+          className="emoji"
+          src={mx.mxcUrlToHttp(emoji.mxc)}
+          data-mx-emoticon=""
+          alt={`:${emoji.shortcode}:`}
+        />
+      );
+    }
+
+    // Dynamically render either a custom emoji or twemoji based on what the input is
+    function renderEmoji(emoji) {
+      if (emoji.mxc) {
+        return renderCustomEmoji(emoji);
+      }
+      return renderTwemoji(emoji);
+    }
+
     return emos.map((emoji) => (
       <CmdItem
-        key={emoji.hexcode}
+        key={emoji.shortcode}
         onClick={() => fireCmd({
           prefix: emPrefix,
           result: emoji,
         })}
       >
         {
-          parse(twemoji.parse(
-            emoji.unicode,
-            {
-              attributes: () => ({
-                unicode: emoji.unicode,
-                shortcodes: emoji.shortcodes?.toString(),
-              }),
-            },
-          ))
+          renderEmoji(emoji)
         }
         <Text variant="b2">{`:${emoji.shortcode}:`}</Text>
       </CmdItem>
@@ -183,6 +210,7 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
         setCmd({ prefix, suggestions: commands });
       },
       ':': () => {
+        const emojis = getEmojiForCompletion(mx.getRoom(roomId));
         asyncSearch.setup(emojis, { keys: ['shortcode'], isContain: true, limit: 20 });
         setCmd({ prefix, suggestions: emojis.slice(26, 46) });
       },
@@ -210,7 +238,7 @@ function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
     }
     if (myCmd.prefix === ':') {
       viewEvent.emit('cmd_fired', {
-        replace: myCmd.result.unicode,
+        replace: myCmd.result.mxc ? `:${myCmd.result.shortcode}: ` : myCmd.result.unicode,
       });
     }
     if (myCmd.prefix === '@') {

src/app/organisms/room/RoomViewContent.jsx

@@ -82,7 +82,7 @@ function handleOnClickCapture(e) {
     openProfileViewer(userId, roomId);
   }
 
-  const spoiler = nativeEvent.path.find((el) => el?.hasAttribute?.('data-mx-spoiler'));
+  const spoiler = nativeEvent.composedPath().find((el) => el?.hasAttribute?.('data-mx-spoiler'));
   if (spoiler) {
     spoiler.classList.toggle('data-mx-spoiler--visible');
   }

src/app/organisms/room/RoomViewFloating.scss

@@ -22,6 +22,7 @@
 
     &--open {
       transform: translateY(-99%);
+      box-shadow: 0 4px 0 0 var(--bg-surface);
       & .bouncing-loader {
         & > *,
         &::after,

src/app/organisms/room/RoomViewHeader.jsx

@@ -1,40 +1,95 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
+import './RoomViewHeader.scss';
 
 import { twemojify } from '../../../util/twemojify';
+import { blurOnBubbling } from '../../atoms/button/script';
 
 import initMatrix from '../../../client/initMatrix';
-import { openRoomOptions } from '../../../client/action/navigation';
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { toggleRoomSettings, openReusableContextMenu } from '../../../client/action/navigation';
 import { togglePeopleDrawer } from '../../../client/action/settings';
 import colorMXID from '../../../util/colorMXID';
 import { getEventCords } from '../../../util/common';
 
+import { tabText } from './RoomSettings';
 import Text from '../../atoms/text/Text';
+import RawIcon from '../../atoms/system-icons/RawIcon';
 import IconButton from '../../atoms/button/IconButton';
 import Header, { TitleWrapper } from '../../atoms/header/Header';
 import Avatar from '../../atoms/avatar/Avatar';
+import RoomOptions from '../../molecules/room-options/RoomOptions';
 
+import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.svg';
+import SearchIC from '../../../../public/res/ic/outlined/search.svg';
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
 
+import { useForceUpdate } from '../../hooks/useForceUpdate';
+
 function RoomViewHeader({ roomId }) {
+  const [, forceUpdate] = useForceUpdate();
   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 roomName = mx.getRoom(roomId).name;
-  const roomTopic = mx.getRoom(roomId).currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;
+
+  const roomHeaderBtnRef = useRef(null);
+  useEffect(() => {
+    const settingsToggle = (isVisibile) => {
+      const rawIcon = roomHeaderBtnRef.current.lastElementChild;
+      rawIcon.style.transform = isVisibile
+        ? 'rotateX(180deg)'
+        : 'rotateX(0deg)';
+    };
+    navigation.on(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
+    return () => {
+      navigation.removeListener(cons.events.navigation.ROOM_SETTINGS_TOGGLED, settingsToggle);
+    };
+  }, []);
+
+  useEffect(() => {
+    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);
+    };
+  }, [roomId]);
+
+  const openRoomOptions = (e) => {
+    openReusableContextMenu(
+      'bottom',
+      getEventCords(e, '.ic-btn'),
+      (closeMenu) => <RoomOptions roomId={roomId} afterOptionSelect={closeMenu} />,
+    );
+  };
 
   return (
     <Header>
-      <Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="small" />
-      <TitleWrapper>
-        <Text variant="h2" weight="medium" primary>{twemojify(roomName)}</Text>
-        { typeof roomTopic !== 'undefined' && <p title={roomTopic} className="text text-b3">{twemojify(roomTopic)}</p>}
-      </TitleWrapper>
+      <button
+        ref={roomHeaderBtnRef}
+        className="room-header__btn"
+        onClick={() => toggleRoomSettings()}
+        type="button"
+        onMouseUp={(e) => blurOnBubbling(e, '.room-header__btn')}
+      >
+        <Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="small" />
+        <TitleWrapper>
+          <Text variant="h2" weight="medium" primary>{twemojify(roomName)}</Text>
+        </TitleWrapper>
+        <RawIcon src={ChevronBottomIC} />
+      </button>
+      <IconButton onClick={() => toggleRoomSettings(tabText.SEARCH)} tooltip="Search" src={SearchIC} />
       <IconButton onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
       <IconButton
-        onClick={(e) => openRoomOptions(getEventCords(e), roomId)}
+        onClick={openRoomOptions}
         tooltip="Options"
         src={VerticalMenuIC}
       />

src/app/organisms/room/RoomViewHeader.scss

@@ -0,0 +1,27 @@
+@use '../../partials/flex';
+@use '../../partials/dir';
+
+.room-header__btn {
+  min-width: 0;
+  @extend .cp-fx__row--s-c;
+  @include dir.side(margin, 0, auto);
+  border-radius: var(--bo-radius);
+  cursor: pointer;
+  
+  & .ic-raw {
+    @include dir.side(margin, 0, var(--sp-extra-tight));
+    transition: transform 200ms ease-in-out;
+  }
+  @media (hover:hover) {
+    &:hover {
+      background-color: var(--bg-surface-hover);
+      box-shadow: var(--bs-surface-outline);
+    }
+  }
+  &:focus,
+  &:active {
+    background-color: var(--bg-surface-active);
+    box-shadow: var(--bs-surface-outline);
+    outline: none;
+  }
+}

src/app/organisms/room/RoomViewInput.jsx

@@ -151,7 +151,6 @@ function RoomViewInput({
     navigation.on(cons.events.navigation.REPLY_TO_CLICKED, setUpReply);
     if (textAreaRef?.current !== null) {
       isTyping = false;
-      focusInput();
       textAreaRef.current.value = roomsInput.getMessage(roomId);
       setAttachment(roomsInput.getAttachment(roomId));
       setReplyTo(roomsInput.getReplyTo(roomId));

src/app/organisms/search/Search.jsx

@@ -17,8 +17,10 @@ import RoomSelector from '../../molecules/room-selector/RoomSelector';
 
 import SearchIC from '../../../../public/res/ic/outlined/search.svg';
 import HashIC from '../../../../public/res/ic/outlined/hash.svg';
+import HashGlobeIC from '../../../../public/res/ic/outlined/hash-globe.svg';
 import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
 import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
+import SpaceGlobeIC from '../../../../public/res/ic/outlined/space-globe.svg';
 import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
@@ -176,12 +178,18 @@ function Search() {
 
   const notifs = initMatrix.notifications;
   const renderRoomSelector = (item) => {
-    const isPrivate = item.room.getJoinRule() === 'invite';
     let imageSrc = null;
     let iconSrc = null;
-    if (item.type === 'room') iconSrc = isPrivate ? HashLockIC : HashIC;
-    if (item.type === 'space') iconSrc = isPrivate ? SpaceLockIC : SpaceIC;
-    if (item.type === 'direct') imageSrc = item.room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
+    if (item.type === 'direct') {
+      imageSrc = item.room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
+    } else {
+      const joinRuleToIconSrc = (joinRule) => ({
+        restricted: () => (item.type === 'space' ? SpaceIC : HashIC),
+        invite: () => (item.type === 'space' ? SpaceLockIC : HashLockIC),
+        public: () => (item.type === 'space' ? SpaceGlobeIC : HashGlobeIC),
+      }[joinRule]?.() || null);
+      iconSrc = joinRuleToIconSrc(item.room.getJoinRule());
+    }
 
     const isUnread = notifs.hasNoti(item.roomId);
     const noti = notifs.getNoti(item.roomId);

src/app/organisms/settings/Settings.jsx

@@ -5,7 +5,7 @@ import './Settings.scss';
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import settings from '../../../client/state/settings';
-import { toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents } from '../../../client/action/settings';
+import { toggleSystemTheme, toggleMarkdown, toggleMembershipEvents, toggleNickAvatarEvents } from '../../../client/action/settings';
 import logout from '../../../client/action/logout';
 
 import Text from '../../atoms/text/Text';
@@ -49,20 +49,34 @@ function AppearanceSection() {
   return (
     <div className="settings-content">
       <SettingTile
-        title="Theme"
-        content={(
-          <SegmentedControls
-            selected={settings.getThemeIndex()}
-            segments={[
-              { text: 'Light' },
-              { text: 'Silver' },
-              { text: 'Dark' },
-              { text: 'Butter' },
-            ]}
-            onSelect={(index) => settings.setTheme(index)}
+        title="Follow system theme"
+        options={(
+          <Toggle
+            isActive={settings.useSystemTheme}
+            onToggle={() => { toggleSystemTheme(); updateState({}); }}
           />
         )}
+        content={<Text variant="b3">Use light or dark mode based on the system's settings.</Text>}
       />
+      {(() => {
+        if (!settings.useSystemTheme) {
+          return <SettingTile
+            title="Theme"
+            content={(
+              <SegmentedControls
+                selected={settings.getThemeIndex()}
+                segments={[
+                  { text: 'Light' },
+                  { text: 'Silver' },
+                  { text: 'Dark' },
+                  { text: 'Butter' },
+                ]}
+                onSelect={(index) => settings.setTheme(index)}
+              />
+            )}
+          />
+        }
+      })()}
       <SettingTile
         title="Markdown formatting"
         options={(

src/app/organisms/settings/Settings.scss

@@ -23,9 +23,6 @@
     margin-top: var(--sp-normal);
     border-bottom: 1px solid var(--bg-surface-border);
     padding-bottom: 16px;
-    &__title__wrapper {
-      margin-bottom: var(--sp-ultra-tight);
-    }
   }
 }
 

src/app/organisms/welcome/Welcome.scss

@@ -3,6 +3,7 @@
 .app-welcome {
   width: 100%;
   height: 100%;
+  background-color: var(--bg-surface);
 
   & > div {
     @extend .cp-fx__column--c-c;

src/app/templates/auth/Auth.scss

@@ -51,8 +51,8 @@
 
 .homeserver-form,
 .auth-form__heading {
-  & .context-menu .btn-surface .ic-raw {
-    width: 0;
+  & .context-menu__item .text {
+    margin: 0 !important;
   }
 }
 

src/app/templates/client/Client.jsx

@@ -4,11 +4,11 @@ import './Client.scss';
 import Text from '../../atoms/text/Text';
 import Spinner from '../../atoms/spinner/Spinner';
 import Navigation from '../../organisms/navigation/Navigation';
+import ReusableContextMenu from '../../atoms/context-menu/ReusableContextMenu';
 import Room from '../../organisms/room/Room';
 import Windows from '../../organisms/pw/Windows';
 import Dialogs from '../../organisms/pw/Dialogs';
 import EmojiBoardOpener from '../../organisms/emoji-board/EmojiBoardOpener';
-import RoomOptions from '../../organisms/room-optons/RoomOptions';
 import logout from '../../../client/action/logout';
 
 import initMatrix from '../../../client/initMatrix';
@@ -65,7 +65,7 @@ function Client() {
       <Windows />
       <Dialogs />
       <EmojiBoardOpener />
-      <RoomOptions />
+      <ReusableContextMenu />
     </div>
   );
 }

src/app/templates/client/Client.scss

@@ -9,7 +9,6 @@
 .room__wrapper {
   flex: 1;
   min-width: 0;
-  background-color: var(--bg-surface);
 }
 
 

src/client/action/navigation.js

@@ -23,6 +23,13 @@ export function selectRoom(roomId, eventId) {
   });
 }
 
+export function toggleRoomSettings(tabText) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.TOGGLE_ROOM_SETTINGS,
+    tabText,
+  });
+}
+
 export function openInviteList() {
   appDispatcher.dispatch({
     type: cons.actions.navigation.OPEN_INVITE_LIST,
@@ -80,14 +87,6 @@ export function openReadReceipts(roomId, userIds) {
   });
 }
 
-export function openRoomOptions(cords, roomId) {
-  appDispatcher.dispatch({
-    type: cons.actions.navigation.OPEN_ROOMOPTIONS,
-    cords,
-    roomId,
-  });
-}
-
 export function replyTo(userId, eventId, body) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.CLICK_REPLY_TO,
@@ -103,3 +102,13 @@ export function openSearch(term) {
     term,
   });
 }
+
+export function openReusableContextMenu(placement, cords, render, afterClose) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_REUSABLE_CONTEXT_MENU,
+    placement,
+    cords,
+    render,
+    afterClose,
+  });
+}

src/client/action/room.js

@@ -192,10 +192,34 @@ async function invite(roomId, userId) {
   return result;
 }
 
-async function kick(roomId, userId) {
+async function kick(roomId, userId, reason) {
   const mx = initMatrix.matrixClient;
 
-  const result = await mx.kick(roomId, userId);
+  const result = await mx.kick(roomId, userId, reason);
+  return result;
+}
+
+async function ban(roomId, userId, reason) {
+  const mx = initMatrix.matrixClient;
+
+  const result = await mx.ban(roomId, userId, reason);
+  return result;
+}
+
+async function unban(roomId, userId) {
+  const mx = initMatrix.matrixClient;
+
+  const result = await mx.unban(roomId, userId);
+  return result;
+}
+
+async function setPowerLevel(roomId, userId, powerLevel) {
+  const mx = initMatrix.matrixClient;
+  const room = mx.getRoom(roomId);
+
+  const powerlevelEvent = room.currentState.getStateEvents('m.room.power_levels')[0];
+
+  const result = await mx.setPowerLevel(roomId, userId, powerLevel, powerlevelEvent);
   return result;
 }
 
@@ -215,6 +239,7 @@ function deleteSpaceShortcut(roomId) {
 
 export {
   join, leave,
-  create, invite, kick,
+  create, invite, kick, ban, unban,
+  setPowerLevel,
   createSpaceShortcut, deleteSpaceShortcut,
 };

src/client/action/settings.js

@@ -1,6 +1,12 @@
 import appDispatcher from '../dispatcher';
 import cons from '../state/cons';
 
+export function toggleSystemTheme() {
+  appDispatcher.dispatch({
+    type: cons.actions.settings.TOGGLE_SYSTEM_THEME,
+  });
+}
+
 export function toggleMarkdown() {
   appDispatcher.dispatch({
     type: cons.actions.settings.TOGGLE_MARKDOWN,

src/client/event/hotkeys.js

@@ -11,12 +11,13 @@ function listenKeyboard(event) {
       openSearch();
     }
   }
+
   if (!event.ctrlKey && !event.altKey) {
     if (navigation.isRawModalVisible) return;
     if (['text', 'textarea'].includes(document.activeElement.type)) {
       return;
     }
-    if (event.keyCode < 48
+    if ((event.keyCode !== 8 && event.keyCode < 48)
       || (event.keyCode >= 91 && event.keyCode <= 93)
       || (event.keyCode >= 112 && event.keyCode <= 183)) {
       return;

src/client/event/roomList.js

@@ -0,0 +1,19 @@
+import cons from '../state/cons';
+import navigation from '../state/navigation';
+import { selectTab, selectSpace } from '../action/navigation';
+
+const listenRoomLeave = (roomId) => {
+  const lRoomIndex = navigation.selectedSpacePath.indexOf(roomId);
+  if (lRoomIndex === -1) return;
+  if (lRoomIndex === 0) selectTab(cons.tabs.HOME);
+  else selectSpace(navigation.selectedSpacePath[lRoomIndex - 1]);
+};
+
+function initRoomListListener(roomList) {
+  roomList.on(cons.events.roomList.ROOM_LEAVED, listenRoomLeave);
+}
+function removeRoomListListener(roomList) {
+  roomList.removeListener(cons.events.roomList.ROOM_LEAVED, listenRoomLeave);
+}
+
+export { initRoomListListener, removeRoomListListener };

src/client/initMatrix.js

@@ -7,6 +7,7 @@ import RoomList from './state/RoomList';
 import RoomsInput from './state/RoomsInput';
 import Notifications from './state/Notifications';
 import { initHotkeys } from './event/hotkeys';
+import { initRoomListListener } from './event/roomList';
 
 global.Olm = require('@matrix-org/olm');
 
@@ -64,6 +65,7 @@ class InitMatrix extends EventEmitter {
           this.roomsInput = new RoomsInput(this.matrixClient);
           this.notifications = new Notifications(this.roomList);
           initHotkeys();
+          initRoomListListener(this.roomList);
           this.emit('init_loading_finished');
         }
       },

src/client/state/RoomList.js

@@ -273,11 +273,12 @@ class RoomList extends EventEmitter {
       });
     });
 
-    this.matrixClient.on('Room.name', () => {
+    this.matrixClient.on('Room.name', (room) => {
       this.emit(cons.events.roomList.ROOMLIST_UPDATED);
+      this.emit(cons.events.roomList.ROOM_PROFILE_UPDATED, room.roomId);
     });
 
-    this.matrixClient.on('RoomState.events', (mEvent) => {
+    this.matrixClient.on('RoomState.events', (mEvent, state) => {
       if (mEvent.getType() === 'm.space.child') {
         const { event } = mEvent;
         if (isMEventSpaceChild(mEvent)) {
@@ -288,9 +289,16 @@ class RoomList extends EventEmitter {
         this.emit(cons.events.roomList.ROOMLIST_UPDATED);
         return;
       }
-      if (mEvent.getType() !== 'm.room.join_rules') return;
-
-      this.emit(cons.events.roomList.ROOMLIST_UPDATED);
+      if (mEvent.getType() === 'm.room.join_rules') {
+        this.emit(cons.events.roomList.ROOMLIST_UPDATED);
+        return;
+      }
+      if (['m.room.avatar', 'm.room.topic'].includes(mEvent.getType())) {
+        if (mEvent.getType() === 'm.room.avatar') {
+          this.emit(cons.events.roomList.ROOMLIST_UPDATED);
+        }
+        this.emit(cons.events.roomList.ROOM_PROFILE_UPDATED, state.roomId);
+      }
     });
 
     this.matrixClient.on('Room.myMembership', (room, membership, prevMembership) => {

src/client/state/RoomTimeline.js

@@ -12,6 +12,20 @@ function isReaction(mEvent) {
   return mEvent.getType() === 'm.reaction';
 }
 
+function hideMemberEvents(mEvent) {
+  const content = mEvent.getContent();
+  const prevContent = mEvent.getPrevContent();
+  const { membership } = content;
+  if (settings.hideMembershipEvents) {
+    if (membership === 'invite' || membership === 'ban' || membership === 'leave') return true;
+    if (prevContent.membership !== 'join') return true;
+  }
+  if (settings.hideNickAvatarEvents) {
+    if (membership === 'join' && prevContent.membership === 'join') return true;
+  }
+  return false;
+}
+
 function getRelateToId(mEvent) {
   const relation = mEvent.getRelation();
   return relation && relation.event_id;
@@ -112,18 +126,8 @@ class RoomTimeline extends EventEmitter {
   }
 
   addToTimeline(mEvent) {
-    if (mEvent.getType() === 'm.room.member' && (settings.hideMembershipEvents || settings.hideNickAvatarEvents)) {
-      const content = mEvent.getContent();
-      const prevContent = mEvent.getPrevContent();
-      const { membership } = content;
-
-      if (settings.hideMembershipEvents) {
-        if (membership === 'invite' || membership === 'ban' || membership === 'leave') return;
-        if (prevContent.membership !== 'join') return;
-      }
-      if (settings.hideNickAvatarEvents) {
-        if (membership === 'join' && prevContent.membership === 'join') return;
-      }
+    if (mEvent.getType() === 'm.room.member' && hideMemberEvents(mEvent)) {
+      return;
     }
     if (mEvent.isRedacted()) return;
     if (isReaction(mEvent)) {
@@ -244,23 +248,10 @@ class RoomTimeline extends EventEmitter {
     return this.room.getUnfilteredTimelineSet();
   }
 
-  getLiveReaders() {
-    const lastEvent = this.timeline[this.timeline.length - 1];
-    const liveEvents = this.liveTimeline.getEvents();
-
-    const readers = [];
-
-    for (let i = liveEvents.length - 1; i >= 0; i -= 1) {
-      readers.splice(readers.length, 0, ...this.room.getUsersReadUpTo(liveEvents[i]));
-      if (lastEvent === liveEvents[i]) break;
-    }
-
-    return [...new Set(readers)];
-  }
-
   getEventReaders(mEvent) {
     const liveEvents = this.liveTimeline.getEvents();
     const readers = [];
+    if (!mEvent) return [];
 
     for (let i = liveEvents.length - 1; i >= 0; i -= 1) {
       readers.splice(readers.length, 0, ...this.room.getUsersReadUpTo(liveEvents[i]));
@@ -270,6 +261,27 @@ class RoomTimeline extends EventEmitter {
     return [...new Set(readers)];
   }
 
+  getLiveReaders() {
+    const liveEvents = this.liveTimeline.getEvents();
+    const getLatestVisibleEvent = () => {
+      for (let i = liveEvents.length - 1; i >= 0; i -= 1) {
+        const mEvent = liveEvents[i];
+        if (mEvent.getType() === 'm.room.member' && hideMemberEvents(mEvent)) {
+          // eslint-disable-next-line no-continue
+          continue;
+        }
+        if (!mEvent.isRedacted()
+          && !isReaction(mEvent)
+          && !isEdited(mEvent)
+          && cons.supportEventTypes.includes(mEvent.getType())
+        ) return mEvent;
+      }
+      return liveEvents[liveEvents.length - 1];
+    };
+
+    return this.getEventReaders(getLatestVisibleEvent());
+  }
+
   getUnreadEventIndex(readUpToEventId) {
     if (!this.hasEventInTimeline(readUpToEventId)) return -1;
 

src/client/state/RoomsInput.js

@@ -2,6 +2,7 @@ import EventEmitter from 'events';
 import { micromark } from 'micromark';
 import { gfm, gfmHtml } from 'micromark-extension-gfm';
 import encrypt from 'browser-encrypt-attachment';
+import { getShortcodeToEmoji } from '../../app/organisms/emoji-board/custom-emoji';
 import cons from './cons';
 import settings from './settings';
 
@@ -112,6 +113,54 @@ function bindReplyToContent(roomId, reply, content) {
   return newContent;
 }
 
+// Apply formatting to a plain text message
+//
+// This includes inserting any custom emoji that might be relevant, and (only if the
+// user has enabled it in their settings) formatting the message using markdown.
+function formatAndEmojifyText(room, text) {
+  const allEmoji = getShortcodeToEmoji(room);
+
+  // Start by applying markdown formatting (if relevant)
+  let formattedText;
+  if (settings.isMarkdown) {
+    formattedText = getFormattedBody(text);
+  } else {
+    formattedText = text;
+  }
+
+  // Check to see if there are any :shortcode-style-tags: in the message
+  Array.from(formattedText.matchAll(/\B:([\w-]+):\B/g))
+    // Then filter to only the ones corresponding to a valid emoji
+    .filter((match) => allEmoji.has(match[1]))
+    // Reversing the array ensures that indices are preserved as we start replacing
+    .reverse()
+    // Replace each :shortcode: with an <img/> tag
+    .forEach((shortcodeMatch) => {
+      const emoji = allEmoji.get(shortcodeMatch[1]);
+
+      // Render the tag that will replace the shortcode
+      let tag;
+      if (emoji.mxc) {
+        tag = `<img data-mx-emoticon="" src="${
+          emoji.mxc
+        }" alt=":${
+          emoji.shortcode
+        }:" title=":${
+          emoji.shortcode
+        }:" height="32" />`;
+      } else {
+        tag = emoji.unicode;
+      }
+
+      // Splice the tag into the text
+      formattedText = formattedText.substr(0, shortcodeMatch.index)
+        + tag
+        + formattedText.substr(shortcodeMatch.index + shortcodeMatch[0].length);
+    });
+
+  return formattedText;
+}
+
 class RoomsInput extends EventEmitter {
   constructor(mx) {
     super();
@@ -214,13 +263,18 @@ class RoomsInput extends EventEmitter {
         body: input.message,
         msgtype: 'm.text',
       };
-      if (settings.isMarkdown) {
-        const formattedBody = getFormattedBody(input.message);
-        if (formattedBody !== input.message) {
-          content.format = 'org.matrix.custom.html';
-          content.formatted_body = formattedBody;
-        }
+
+      // Apply formatting if relevant
+      const formattedBody = formatAndEmojifyText(
+        this.matrixClient.getRoom(roomId),
+        input.message,
+      );
+      if (formattedBody !== input.message) {
+        // Formatting was applied, and we need to switch to custom HTML
+        content.format = 'org.matrix.custom.html';
+        content.formatted_body = formattedBody;
       }
+
       if (typeof input.replyTo !== 'undefined') {
         content = bindReplyToContent(roomId, input.replyTo, content);
       }
@@ -348,14 +402,17 @@ class RoomsInput extends EventEmitter {
         rel_type: 'm.replace',
       },
     };
-    if (settings.isMarkdown) {
-      const formattedBody = getFormattedBody(editedBody);
-      if (formattedBody !== editedBody) {
-        content.formatted_body = ` * ${formattedBody}`;
-        content.format = 'org.matrix.custom.html';
-        content['m.new_content'].formatted_body = formattedBody;
-        content['m.new_content'].format = 'org.matrix.custom.html';
-      }
+
+    // Apply formatting if relevant
+    const formattedBody = formatAndEmojifyText(
+      this.matrixClient.getRoom(roomId),
+      editedBody
+    );
+    if (formattedBody !== editedBody) {
+      content.formatted_body = ` * ${formattedBody}`;
+      content.format = 'org.matrix.custom.html';
+      content['m.new_content'].formatted_body = formattedBody;
+      content['m.new_content'].format = 'org.matrix.custom.html';
     }
     if (isReply) {
       const evBody = mEvent.getContent().body;

src/client/state/cons.js

@@ -1,5 +1,5 @@
 const cons = {
-  version: '1.6.1',
+  version: '1.7.0',
   secretKey: {
     ACCESS_TOKEN: 'cinny_access_token',
     DEVICE_ID: 'cinny_device_id',
@@ -30,7 +30,7 @@ const cons = {
       SELECT_TAB: 'SELECT_TAB',
       SELECT_SPACE: 'SELECT_SPACE',
       SELECT_ROOM: 'SELECT_ROOM',
-      TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
+      TOGGLE_ROOM_SETTINGS: 'TOGGLE_ROOM_SETTINGS',
       OPEN_INVITE_LIST: 'OPEN_INVITE_LIST',
       OPEN_PUBLIC_ROOMS: 'OPEN_PUBLIC_ROOMS',
       OPEN_CREATE_ROOM: 'OPEN_CREATE_ROOM',
@@ -39,9 +39,9 @@ const cons = {
       OPEN_SETTINGS: 'OPEN_SETTINGS',
       OPEN_EMOJIBOARD: 'OPEN_EMOJIBOARD',
       OPEN_READRECEIPTS: 'OPEN_READRECEIPTS',
-      OPEN_ROOMOPTIONS: 'OPEN_ROOMOPTIONS',
       CLICK_REPLY_TO: 'CLICK_REPLY_TO',
       OPEN_SEARCH: 'OPEN_SEARCH',
+      OPEN_REUSABLE_CONTEXT_MENU: 'OPEN_REUSABLE_CONTEXT_MENU',
     },
     room: {
       JOIN: 'JOIN',
@@ -54,6 +54,7 @@ const cons = {
       },
     },
     settings: {
+      TOGGLE_SYSTEM_THEME: 'TOGGLE_SYSTEM_THEME',
       TOGGLE_MARKDOWN: 'TOGGLE_MARKDOWN',
       TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
       TOGGLE_MEMBERSHIP_EVENT: 'TOGGLE_MEMBERSHIP_EVENT',
@@ -65,7 +66,7 @@ const cons = {
       TAB_SELECTED: 'TAB_SELECTED',
       SPACE_SELECTED: 'SPACE_SELECTED',
       ROOM_SELECTED: 'ROOM_SELECTED',
-      PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED',
+      ROOM_SETTINGS_TOGGLED: 'ROOM_SETTINGS_TOGGLED',
       INVITE_LIST_OPENED: 'INVITE_LIST_OPENED',
       PUBLIC_ROOMS_OPENED: 'PUBLIC_ROOMS_OPENED',
       CREATE_ROOM_OPENED: 'CREATE_ROOM_OPENED',
@@ -74,9 +75,9 @@ const cons = {
       PROFILE_VIEWER_OPENED: 'PROFILE_VIEWER_OPENED',
       EMOJIBOARD_OPENED: 'EMOJIBOARD_OPENED',
       READRECEIPTS_OPENED: 'READRECEIPTS_OPENED',
-      ROOMOPTIONS_OPENED: 'ROOMOPTIONS_OPENED',
       REPLY_TO_CLICKED: 'REPLY_TO_CLICKED',
       SEARCH_OPENED: 'SEARCH_OPENED',
+      REUSABLE_CONTEXT_MENU_OPENED: 'REUSABLE_CONTEXT_MENU_OPENED',
     },
     roomList: {
       ROOMLIST_UPDATED: 'ROOMLIST_UPDATED',
@@ -85,6 +86,7 @@ const cons = {
       ROOM_LEAVED: 'ROOM_LEAVED',
       ROOM_CREATED: 'ROOM_CREATED',
       SPACE_SHORTCUT_UPDATED: 'SPACE_SHORTCUT_UPDATED',
+      ROOM_PROFILE_UPDATED: 'ROOM_PROFILE_UPDATED',
     },
     notifications: {
       NOTI_CHANGED: 'NOTI_CHANGED',
@@ -109,6 +111,7 @@ const cons = {
       ATTACHMENT_CANCELED: 'ATTACHMENT_CANCELED',
     },
     settings: {
+      SYSTEM_THEME_TOGGLED: 'SYSTEM_THEME_TOGGLED',
       MARKDOWN_TOGGLED: 'MARKDOWN_TOGGLED',
       PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED',
       MEMBERSHIP_EVENTS_TOGGLED: 'MEMBERSHIP_EVENTS_TOGGLED',