v1.3.1

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

.github/FUNDING.yml

@@ -1,2 +1,2 @@
-patreon: ajbura
+open_collective: cinny
 liberapay: ajbura

.github/workflows/docker.yaml

@@ -0,0 +1,34 @@
+name: Publish Docker image
+
+on:
+  release:
+    types: [published]
+
+jobs:
+   push_to_registry:
+    name: Push Docker image to Docker Hub
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v2
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@v3
+        with:
+          images: ajbura/cinny
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}

.github/workflows/netlify-dev.yaml

@@ -0,0 +1,21 @@
+name: 'Deploy to Netlify (dev)'
+
+on:
+  push:
+    branches:
+       - dev
+
+jobs:
+  deploy:
+    name: 'Deploy'
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v1
+      - uses: jsmrcaga/action-netlify-deploy@master
+        with:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE2_ID }}
+          BUILD_DIRECTORY: "dist"
+          NETLIFY_DEPLOY_MESSAGE: "Dev deploy v${{ github.ref }}"
+          NETLIFY_DEPLOY_TO_PROD: true

.github/workflows/netlify-prod.yaml

@@ -0,0 +1,20 @@
+name: 'Deploy to Netlify (prod)'
+
+on:
+  release:
+    types: [published]
+
+jobs:
+  deploy:
+    name: 'Deploy'
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v1
+      - uses: jsmrcaga/action-netlify-deploy@master
+        with:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+          BUILD_DIRECTORY: "dist"
+          NETLIFY_DEPLOY_MESSAGE: "Prod deploy v${{ github.ref }}"
+          NETLIFY_DEPLOY_TO_PROD: true

CONTRIBUTING.md

@@ -10,7 +10,7 @@ All types of contributions are encouraged and valued. See the [Table of Contents
 > - Tweet about it (tag @cinnyapp)
 > - Refer this project in your project's readme
 > - Mention the project at local meetups and tell your friends/colleagues
-> - [Donate to us](https://liberapay.com/kfiven/donate)
+> - [Donate to us](https://liberapay.com/ajbura/donate)
 
 <!-- omit in toc -->
 ## Table of Contents

LICENSE

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

README.md

@@ -10,6 +10,8 @@
 
 Cinny is a [Matrix](https://matrix.org) client focusing primarily on simple, elegant and secure interface.
 
+![preview](https://github.com/ajbura/cinny-site/blob/master/assets/preview-light.png)
+
 ## Building and Running
 
 ### Building from source
@@ -42,4 +44,10 @@ docker run -p 8080:80 cinny:latest
 This will forward your `localhost` port 8080 to the container's port 80. You can visit the app in your browser by
 navigating to `http://localhost:8080`.
 
+## License
 
+Copyright (c) 2021 Ajay Bura (ajbura) and other contributors
+
+Code licensed under the MIT License: <http://opensource.org/licenses/MIT>
+
+Graphics licensed under CC-BY 4.0: <https://creativecommons.org/licenses/by/4.0/>

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "1.1.0",
+  "version": "1.3.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -20,29 +20,272 @@
       "dev": true
     },
     "@babel/core": {
-      "version": "7.13.13",
+      "version": "7.15.5",
-      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.13.13.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.15.5.tgz",
-      "integrity": "sha512-1xEs9jZAyKIouOoCmpsgk/I26PoKyvzQ2ixdRpRzfbcp1fL+ozw7TUgdDgwonbTovqRaTfRh50IXuw4QrWO0GA==",
+      "integrity": "sha512-pYgXxiwAgQpgM1bNkZsDEq85f0ggXMA5L7c+o3tskGMh2BunCI9QUwB9Z4jpvXUOuMdyGKiGKQiRe11VS6Jzvg==",
       "dev": true,
       "requires": {
-        "@babel/code-frame": "^7.12.13",
+        "@babel/code-frame": "^7.14.5",
-        "@babel/generator": "^7.13.9",
+        "@babel/generator": "^7.15.4",
-        "@babel/helper-compilation-targets": "^7.13.13",
+        "@babel/helper-compilation-targets": "^7.15.4",
-        "@babel/helper-module-transforms": "^7.13.12",
+        "@babel/helper-module-transforms": "^7.15.4",
-        "@babel/helpers": "^7.13.10",
+        "@babel/helpers": "^7.15.4",
-        "@babel/parser": "^7.13.13",
+        "@babel/parser": "^7.15.5",
-        "@babel/template": "^7.12.13",
+        "@babel/template": "^7.15.4",
-        "@babel/traverse": "^7.13.13",
+        "@babel/traverse": "^7.15.4",
-        "@babel/types": "^7.13.13",
+        "@babel/types": "^7.15.4",
         "convert-source-map": "^1.7.0",
         "debug": "^4.1.0",
         "gensync": "^1.0.0-beta.2",
         "json5": "^2.1.2",
-        "lodash": "^4.17.19",
         "semver": "^6.3.0",
         "source-map": "^0.5.0"
       },
       "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
+          "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.14.5"
+          }
+        },
+        "@babel/compat-data": {
+          "version": "7.15.0",
+          "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.15.0.tgz",
+          "integrity": "sha512-0NqAC1IJE0S0+lL1SWFMxMkz1pKCNCjI4tr2Zx4LJSXxCLAdr6KyArnY+sno5m3yH9g737ygOyPABDsnXkpxiA==",
+          "dev": true
+        },
+        "@babel/generator": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.15.4.tgz",
+          "integrity": "sha512-d3itta0tu+UayjEORPNz6e1T3FtvWlP5N4V5M+lhp/CxT4oAA7/NcScnpRyspUMLK6tu9MNHmQHxRykuN2R7hw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.15.4",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-compilation-targets": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.15.4.tgz",
+          "integrity": "sha512-rMWPCirulnPSe4d+gwdWXLfAXTTBj8M3guAf5xFQJ0nvFY7tfNAFnWdqaHegHlgDZOCT4qvhF3BYlSJag8yhqQ==",
+          "dev": true,
+          "requires": {
+            "@babel/compat-data": "^7.15.0",
+            "@babel/helper-validator-option": "^7.14.5",
+            "browserslist": "^4.16.6",
+            "semver": "^6.3.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.15.4.tgz",
+          "integrity": "sha512-Z91cOMM4DseLIGOnog+Z8OI6YseR9bua+HpvLAQ2XayUGU+neTtX+97caALaLdyu53I/fjhbeCnWnRH1O3jFOw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.15.4",
+            "@babel/template": "^7.15.4",
+            "@babel/types": "^7.15.4"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.15.4.tgz",
+          "integrity": "sha512-1/AlxSF92CmGZzHnC515hm4SirTxtpDnLEJ0UyEMgTMZN+6bxXKg04dKhiRx5Enel+SUA1G1t5Ed/yQia0efrA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.15.4"
+          }
+        },
+        "@babel/helper-hoist-variables": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.15.4.tgz",
+          "integrity": "sha512-VTy085egb3jUGVK9ycIxQiPbquesq0HUQ+tPO0uv5mPEBZipk+5FkRKiWq5apuyTE9FUrjENB0rCf8y+n+UuhA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.15.4"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.15.4.tgz",
+          "integrity": "sha512-cokOMkxC/BTyNP1AlY25HuBWM32iCEsLPI4BHDpJCHHm1FU2E7dKWWIXJgQgSFiu4lp8q3bL1BIKwqkSUviqtA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.15.4"
+          }
+        },
+        "@babel/helper-module-imports": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.15.4.tgz",
+          "integrity": "sha512-jeAHZbzUwdW/xHgHQ3QmWR4Jg6j15q4w/gCfwZvtqOxoo5DKtLHk8Bsf4c5RZRC7NmLEs+ohkdq8jFefuvIxAA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.15.4"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.4.tgz",
+          "integrity": "sha512-9fHHSGE9zTC++KuXLZcB5FKgvlV83Ox+NLUmQTawovwlJ85+QMhk1CnVk406CQVj97LaWod6KVjl2Sfgw9Aktw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-imports": "^7.15.4",
+            "@babel/helper-replace-supers": "^7.15.4",
+            "@babel/helper-simple-access": "^7.15.4",
+            "@babel/helper-split-export-declaration": "^7.15.4",
+            "@babel/helper-validator-identifier": "^7.14.9",
+            "@babel/template": "^7.15.4",
+            "@babel/traverse": "^7.15.4",
+            "@babel/types": "^7.15.4"
+          }
+        },
+        "@babel/helper-optimise-call-expression": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.15.4.tgz",
+          "integrity": "sha512-E/z9rfbAOt1vDW1DR7k4SzhzotVV5+qMciWV6LaG1g4jeFrkDlJedjtV4h0i4Q/ITnUu+Pk08M7fczsB9GXBDw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.15.4"
+          }
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.15.4.tgz",
+          "integrity": "sha512-/ztT6khaXF37MS47fufrKvIsiQkx1LBRvSJNzRqmbyeZnTwU9qBxXYLaaT/6KaxfKhjs2Wy8kG8ZdsFUuWBjzw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.15.4",
+            "@babel/helper-optimise-call-expression": "^7.15.4",
+            "@babel/traverse": "^7.15.4",
+            "@babel/types": "^7.15.4"
+          }
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.15.4.tgz",
+          "integrity": "sha512-UzazrDoIVOZZcTeHHEPYrr1MvTR/K+wgLg6MY6e1CJyaRhbibftF6fR2KU2sFRtI/nERUZR9fBd6aKgBlIBaPg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.15.4"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.15.4.tgz",
+          "integrity": "sha512-HsFqhLDZ08DxCpBdEVtKmywj6PQbwnF6HHybur0MAnkAKnlS6uHkwnmRIkElB2Owpfb4xL4NwDmDLFubueDXsw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.15.4"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.14.9",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz",
+          "integrity": "sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==",
+          "dev": true
+        },
+        "@babel/helper-validator-option": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz",
+          "integrity": "sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow==",
+          "dev": true
+        },
+        "@babel/highlight": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
+          "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.5",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.15.6",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.6.tgz",
+          "integrity": "sha512-S/TSCcsRuCkmpUuoWijua0Snt+f3ewU/8spLo+4AXJCZfT0bVCzLD5MuOKdrx0mlAptbKzn5AdgEIIKXxXkz9Q==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.15.4.tgz",
+          "integrity": "sha512-UgBAfEa1oGuYgDIPM2G+aHa4Nlo9Lh6mGD2bDBGMTbYnc38vulXPuC1MGjYILIEmlwl6Rd+BPR9ee3gm20CBtg==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.14.5",
+            "@babel/parser": "^7.15.4",
+            "@babel/types": "^7.15.4"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.15.4.tgz",
+          "integrity": "sha512-W6lQD8l4rUbQR/vYgSuCAE75ADyyQvOpFVsvPPdkhf6lATXAsQIG9YdtOcu8BB1dZ0LKu+Zo3c1wEcbKeuhdlA==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.14.5",
+            "@babel/generator": "^7.15.4",
+            "@babel/helper-function-name": "^7.15.4",
+            "@babel/helper-hoist-variables": "^7.15.4",
+            "@babel/helper-split-export-declaration": "^7.15.4",
+            "@babel/parser": "^7.15.4",
+            "@babel/types": "^7.15.4",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.15.6",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.6.tgz",
+          "integrity": "sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.9",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "browserslist": {
+          "version": "4.17.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.0.tgz",
+          "integrity": "sha512-g2BJ2a0nEYvEFQC208q8mVAhfNwpZ5Mu8BwgtCdZKO3qx98HChmeg448fPdUzld8aFmfLgVh7yymqV+q1lJZ5g==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001254",
+            "colorette": "^1.3.0",
+            "electron-to-chromium": "^1.3.830",
+            "escalade": "^3.1.1",
+            "node-releases": "^1.1.75"
+          }
+        },
+        "caniuse-lite": {
+          "version": "1.0.30001257",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001257.tgz",
+          "integrity": "sha512-JN49KplOgHSXpIsVSF+LUyhD8PUp6xPpAXeRrrcBh4KBeP7W864jHn6RvzJgDlrReyeVjMFJL3PLpPvKIxlIHA==",
+          "dev": true
+        },
+        "colorette": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz",
+          "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==",
+          "dev": true
+        },
+        "electron-to-chromium": {
+          "version": "1.3.836",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.836.tgz",
+          "integrity": "sha512-Ney3pHOJBWkG/AqYjrW0hr2AUCsao+2uvq9HUlRP8OlpSdk/zOHOUJP7eu0icDvePC9DlgffuelP4TnOJmMRUg==",
+          "dev": true
+        },
+        "node-releases": {
+          "version": "1.1.75",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.75.tgz",
+          "integrity": "sha512-Qe5OUajvqrqDSy6wrWFmMwfJ0jVgwiw4T3KqmbTcZ62qW0gQkheXYhcFM1+lOVcGUoRxcEcfyvFMAnDgaF1VWw==",
+          "dev": true
+        },
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -303,14 +546,141 @@
       }
     },
     "@babel/helpers": {
-      "version": "7.13.10",
+      "version": "7.15.4",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.13.10.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.15.4.tgz",
-      "integrity": "sha512-4VO883+MWPDUVRF3PhiLBUFHoX/bsLTGFpFK/HqvvfBZz2D57u9XzPVNFVBTc0PW/CWR9BXTOKt8NF4DInUHcQ==",
+      "integrity": "sha512-V45u6dqEJ3w2rlryYYXf6i9rQ5YMNu4FLS6ngs8ikblhu2VdR1AqAd6aJjBzmf2Qzh6KOLqKHxEN9+TFbAkAVQ==",
       "dev": true,
       "requires": {
-        "@babel/template": "^7.12.13",
+        "@babel/template": "^7.15.4",
-        "@babel/traverse": "^7.13.0",
+        "@babel/traverse": "^7.15.4",
-        "@babel/types": "^7.13.0"
+        "@babel/types": "^7.15.4"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.14.5.tgz",
+          "integrity": "sha512-9pzDqyc6OLDaqe+zbACgFkb6fKMNG6CObKpnYXChRsvYGyEdc7CA2BaqeOM+vOtCS5ndmJicPJhKAwYRI6UfFw==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.14.5"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.15.4.tgz",
+          "integrity": "sha512-d3itta0tu+UayjEORPNz6e1T3FtvWlP5N4V5M+lhp/CxT4oAA7/NcScnpRyspUMLK6tu9MNHmQHxRykuN2R7hw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.15.4",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.15.4.tgz",
+          "integrity": "sha512-Z91cOMM4DseLIGOnog+Z8OI6YseR9bua+HpvLAQ2XayUGU+neTtX+97caALaLdyu53I/fjhbeCnWnRH1O3jFOw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.15.4",
+            "@babel/template": "^7.15.4",
+            "@babel/types": "^7.15.4"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.15.4.tgz",
+          "integrity": "sha512-1/AlxSF92CmGZzHnC515hm4SirTxtpDnLEJ0UyEMgTMZN+6bxXKg04dKhiRx5Enel+SUA1G1t5Ed/yQia0efrA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.15.4"
+          }
+        },
+        "@babel/helper-hoist-variables": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.15.4.tgz",
+          "integrity": "sha512-VTy085egb3jUGVK9ycIxQiPbquesq0HUQ+tPO0uv5mPEBZipk+5FkRKiWq5apuyTE9FUrjENB0rCf8y+n+UuhA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.15.4"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.15.4.tgz",
+          "integrity": "sha512-HsFqhLDZ08DxCpBdEVtKmywj6PQbwnF6HHybur0MAnkAKnlS6uHkwnmRIkElB2Owpfb4xL4NwDmDLFubueDXsw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.15.4"
+          }
+        },
+        "@babel/helper-validator-identifier": {
+          "version": "7.14.9",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz",
+          "integrity": "sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==",
+          "dev": true
+        },
+        "@babel/highlight": {
+          "version": "7.14.5",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
+          "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.5",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.15.6",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.15.6.tgz",
+          "integrity": "sha512-S/TSCcsRuCkmpUuoWijua0Snt+f3ewU/8spLo+4AXJCZfT0bVCzLD5MuOKdrx0mlAptbKzn5AdgEIIKXxXkz9Q==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.15.4.tgz",
+          "integrity": "sha512-UgBAfEa1oGuYgDIPM2G+aHa4Nlo9Lh6mGD2bDBGMTbYnc38vulXPuC1MGjYILIEmlwl6Rd+BPR9ee3gm20CBtg==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.14.5",
+            "@babel/parser": "^7.15.4",
+            "@babel/types": "^7.15.4"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.15.4",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.15.4.tgz",
+          "integrity": "sha512-W6lQD8l4rUbQR/vYgSuCAE75ADyyQvOpFVsvPPdkhf6lATXAsQIG9YdtOcu8BB1dZ0LKu+Zo3c1wEcbKeuhdlA==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.14.5",
+            "@babel/generator": "^7.15.4",
+            "@babel/helper-function-name": "^7.15.4",
+            "@babel/helper-hoist-variables": "^7.15.4",
+            "@babel/helper-split-export-declaration": "^7.15.4",
+            "@babel/parser": "^7.15.4",
+            "@babel/types": "^7.15.4",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          }
+        },
+        "@babel/types": {
+          "version": "7.15.6",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.15.6.tgz",
+          "integrity": "sha512-BPU+7QhqNjmWyDO0/vitH/CuhpV8ZmK1wpKva8nuyNF5MJfuRNWMc+hc14+u9xT93kvykMdncrJT19h74uB1Ig==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.14.9",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
+        }
       }
     },
     "@babel/highlight": {
@@ -3492,9 +3862,9 @@
       "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
     },
     "convert-source-map": {
-      "version": "1.7.0",
+      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
-      "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
+      "integrity": "sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==",
       "dev": true,
       "requires": {
         "safe-buffer": "~5.1.1"
@@ -7951,9 +8321,9 @@
       }
     },
     "matrix-js-sdk": {
-      "version": "12.2.0",
+      "version": "12.4.1",
-      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-12.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-12.4.1.tgz",
-      "integrity": "sha512-foSs3uKRc6uvFNhgY35eErBvLWVDd5RNIxxsdFKlmU3B+70YUf3BP3petyBNW34ORyOqNdX36IiApfLo3npNEw==",
+      "integrity": "sha512-C9aSGX9e4GoCm0Rli+iGBXmcnRxnwETw7MvgNcSBfPaLHOMZi/wz4YOV7HEZK8R+OXuDrDYyglncWSJkkoDpAQ==",
       "requires": {
         "@babel/runtime": "^7.12.5",
         "another-json": "^0.2.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinny",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "description": "Yet another matrix client",
   "main": "index.js",
   "engines": {
@@ -24,7 +24,7 @@
     "flux": "^4.0.1",
     "html-react-parser": "^1.2.7",
     "linkifyjs": "^3.0.0-beta.3",
-    "matrix-js-sdk": "^12.2.0",
+    "matrix-js-sdk": "^12.4.1",
     "micromark": "^3.0.3",
     "micromark-extension-gfm": "^1.0.0",
     "prop-types": "^15.7.2",
@@ -41,7 +41,7 @@
     "twemoji": "^13.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.13",
+    "@babel/core": "^7.15.5",
     "@babel/preset-env": "^7.13.12",
     "@babel/preset-react": "^7.13.13",
     "assert": "^2.0.0",

public/res/ic/filled/pin.svg

@@ -0,0 +1,8 @@
+<?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">
+<path d="M13.8,4.5l0.7,0.7l-3.4,3.4L7.7,9.7l-1-1l-1.4,1.4l3.5,3.5l-5.7,5.7l1.4,1.4l5.7-5.7l3.5,3.5l1.4-1.4l-1-1l1.1-3.4l3.4-3.4
+	l0.7,0.7l1.4-1.4l-5.7-5.7L13.8,4.5z"/>
+</svg>

public/res/ic/filled/star.svg

@@ -0,0 +1,9 @@
+<?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="12,2 15.1,8.6 22,9.6 17,14.8 18.2,22 12,18.6 5.8,22 7,14.8 2,9.6 8.9,8.6 	"/>
+</g>
+</svg>

public/res/ic/outlined/bell-off.svg

@@ -0,0 +1,12 @@
+<?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,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
+	<path d="M20.1,18.1L20.1,18.1L16,14L9.2,7.2L7.8,5.8L5.9,3.9L4.5,5.3l2.1,2.1C6.2,8.2,6,9.1,6,10v6H4v2h13.2l1.5,1.5L20.1,18.1z
+		 M8,16v-6c0-0.4,0.1-0.7,0.1-1l7,7H8z"/>
+	<path d="M12,6c2.2,0,4,1.8,4,4v1.2l2,2V10c0-3-2.2-5.4-5-5.9V3h-2v1.1c-0.6,0.1-1.1,0.3-1.6,0.5L11,6.1C11.3,6.1,11.6,6,12,6z"/>
+</g>
+</svg>

public/res/ic/outlined/bell-ping.svg

@@ -0,0 +1,13 @@
+<?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>
+	<circle cx="17" cy="8" r="3"/>
+	<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
+	<path d="M18,12.9C17.7,13,17.3,13,17,13s-0.7,0-1-0.1V16H8v-6c0-2.2,1.8-4,4-4c0.1,0,0.3,0,0.4,0c0.3-0.7,0.7-1.3,1.3-1.8
+		c-0.2-0.1-0.5-0.1-0.7-0.2V3h-2v1.1C8.2,4.6,6,7,6,10v6H4v2h16v-2h-2V12.9z"/>
+	<path d="M6.3,4.3L4.9,2.9C3.1,4.7,2,7.2,2,10h2C4,7.8,4.9,5.8,6.3,4.3z"/>
+</g>
+</svg>

public/res/ic/outlined/bell-ring.svg

@@ -0,0 +1,12 @@
+<?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,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
+	<path d="M18,10c0-3-2.2-5.4-5-5.9V3h-2v1.1C8.2,4.6,6,7,6,10v6H4v2h16v-2h-2V10z M16,16H8v-6c0-2.2,1.8-4,4-4s4,1.8,4,4V16z"/>
+	<path d="M6.3,4.3L4.9,2.9C3.1,4.7,2,7.2,2,10h2C4,7.8,4.9,5.8,6.3,4.3z"/>
+	<path d="M19.1,2.9l-1.4,1.4C19.1,5.8,20,7.8,20,10h2C22,7.2,20.9,4.7,19.1,2.9z"/>
+</g>
+</svg>

public/res/ic/outlined/bell.svg

@@ -4,8 +4,7 @@
 <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,4c2.8,0,5,2.2,5,5v4v0.8l0.6,0.6l0.6,0.6H5.8l0.6-0.6L7,13.8V13V9C7,6.2,9.2,4,12,4 M12,2C8.1,2,5,5.1,5,9v4l-2,2v2h18
+	<path d="M12,22c1.1,0,2-0.9,2-2h-4C10,21.1,10.9,22,12,22z"/>
-		v-2l-2-2V9C19,5.1,15.9,2,12,2L12,2z"/>
+	<path d="M18,16v-6c0-3-2.2-5.4-5-5.9V3h-2v1.1C8.2,4.6,6,7,6,10v6H4v2h16v-2H18z M16,16H8v-6c0-2.2,1.8-4,4-4s4,1.8,4,4V16z"/>
-	<path d="M9,19c0,1.7,1.3,3,3,3s3-1.3,3-3H9z"/>
 </g>
 </svg>

public/res/ic/outlined/eye.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
+<g>
+	<g>
+		<path d="M12,19c-4.4,0-8-4-9.3-5.8c-0.6-0.7-0.6-1.7,0-2.4C4,9,7.6,5,12,5s8,4,9.3,5.8c0.6,0.7,0.6,1.7,0,2.4C20,15,16.4,19,12,19
+			z M12,7c-3.6,0-6.9,3.8-7.8,5c0.9,1.2,4.2,5,7.8,5s6.9-3.8,7.8-5C18.9,10.8,15.6,7,12,7z"/>
+	</g>
+	<circle cx="12" cy="12" r="3"/>
+</g>
+</svg>

public/res/ic/outlined/pin.svg

@@ -0,0 +1,8 @@
+<?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">
+<path d="M13.8,4.5l0.7,0.7l-3.4,3.4L7.7,9.7l-1-1l-1.4,1.4l3.5,3.5l-5.7,5.7l1.4,1.4l5.7-5.7l3.5,3.5l1.4-1.4l-1-1l1.1-3.4l3.4-3.4
+	l0.7,0.7l1.4-1.4l-5.7-5.7L13.8,4.5z M13.7,11.8l-1,2.9l-3.4-3.4l2.9-1l3.7-3.7l1.4,1.4L13.7,11.8z"/>
+</svg>

public/res/ic/outlined/star.svg

@@ -0,0 +1,8 @@
+<?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">
+<path d="M12,6.7l1.7,3.7l4.1,0.6l-3,3.1l0.7,4.2l-3.5-2l-3.5,2l0.7-4.2l-3-3.1l4.1-0.6L12,6.7 M12,2L8.9,8.6L2,9.6l5,5.1L5.8,22
+	l6.2-3.4l6.2,3.4L17,14.8l5-5.1l-6.9-1.1L12,2L12,2z"/>
+</svg>

src/app/atoms/badge/NotificationBadge.jsx

@@ -4,25 +4,26 @@ import './NotificationBadge.scss';
 
 import Text from '../text/Text';
 
-function NotificationBadge({ alert, children }) {
+function NotificationBadge({ alert, content }) {
   const notificationClass = alert ? ' notification-badge--alert' : '';
   return (
     <div className={`notification-badge${notificationClass}`}>
-      <Text variant="b3">{children}</Text>
+      {content !== null && <Text variant="b3">{content}</Text>}
     </div>
   );
 }
 
 NotificationBadge.defaultProps = {
   alert: false,
+  content: null,
 };
 
 NotificationBadge.propTypes = {
   alert: PropTypes.bool,
-  children: PropTypes.oneOfType([
+  content: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
-  ]).isRequired,
+  ]),
 };
 
 export default NotificationBadge;

src/app/atoms/badge/NotificationBadge.scss

@@ -1,19 +1,22 @@
 .notification-badge {
-  min-width: 18px;
+  min-width: 16px;
-  padding: 1px var(--sp-ultra-tight);
+  min-height: 8px;
-  background-color: var(--tc-surface-low);
+  padding: 0 var(--sp-ultra-tight);
-  border-radius: 9px;
+  background-color: var(--bg-badge);
+  border-radius: var(--bo-radius);
 
   .text {
-    color: var(--bg-surface-low);
+    color: var(--tc-badge);
     text-align: center;
     font-weight: 700;
   }
 
   &--alert {
     background-color: var(--bg-positive);
-    .text {
+  }
-      color: white;
+
-    }
+  &:empty {
+    min-width: 8px;
+    margin: 0 var(--sp-ultra-tight);
   }
 }

src/app/atoms/button/Button.jsx

@@ -7,26 +7,29 @@ import RawIcon from '../system-icons/RawIcon';
 import { blurOnBubbling } from './script';
 
 function Button({
-  id, variant, iconSrc, type, onClick, children, disabled,
+  id, className, variant, iconSrc,
+  type, onClick, children, disabled,
 }) {
   const iconClass = (iconSrc === null) ? '' : `btn-${variant}--icon`;
   return (
     <button
       id={id === '' ? undefined : id}
-      className={`btn-${variant} ${iconClass} noselect`}
+      className={`${className ? `${className} ` : ''}btn-${variant} ${iconClass} noselect`}
       onMouseUp={(e) => blurOnBubbling(e, `.btn-${variant}`)}
       onClick={onClick}
       type={type === 'button' ? 'button' : 'submit'}
       disabled={disabled}
     >
       {iconSrc !== null && <RawIcon size="small" src={iconSrc} />}
-      <Text variant="b1">{ children }</Text>
+      {typeof children === 'string' && <Text variant="b1">{ children }</Text>}
+      {typeof children !== 'string' && children }
     </button>
   );
 }
 
 Button.defaultProps = {
   id: '',
+  className: null,
   variant: 'surface',
   iconSrc: null,
   type: 'button',
@@ -36,7 +39,8 @@ Button.defaultProps = {
 
 Button.propTypes = {
   id: PropTypes.string,
-  variant: PropTypes.oneOf(['surface', 'primary', 'caution', 'danger']),
+  className: PropTypes.string,
+  variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
   iconSrc: PropTypes.string,
   type: PropTypes.oneOf(['button', 'submit']),
   onClick: PropTypes.func,

src/app/atoms/button/Button.scss

@@ -2,6 +2,7 @@
 
 .btn-surface,
 .btn-primary,
+.btn-positive,
 .btn-caution,
 .btn-danger {
   display: inline-flex;
@@ -67,6 +68,13 @@
   @include state.focus(var(--bs-primary-outline));
   @include state.active(var(--bg-primary-active));
 }
+.btn-positive {
+  box-shadow: var(--bs-positive-border);
+  @include color(var(--tc-positive-high), var(--ic-positive-normal));
+  @include state.hover(var(--bg-positive-hover));
+  @include state.focus(var(--bs-positive-outline));
+  @include state.active(var(--bg-positive-active));
+}
 .btn-caution {
   box-shadow: var(--bs-caution-border);
   @include color(var(--tc-caution-high), var(--ic-caution-normal));

src/app/atoms/button/IconButton.jsx

@@ -7,45 +7,46 @@ import Tooltip from '../tooltip/Tooltip';
 import { blurOnBubbling } from './script';
 import Text from '../text/Text';
 
-// TODO:
-// 1. [done] an icon only button have "src"
-// 2. have multiple variant
-// 3. [done] should have a smart accessibility "label" arial-label
-// 4. [done] have size as RawIcon
-
 const IconButton = React.forwardRef(({
   variant, size, type,
   tooltip, tooltipPlacement, src, onClick,
-}, ref) => (
+}, ref) => {
-  <Tooltip
+  const btn = (
-    placement={tooltipPlacement}
-    content={<Text variant="b2">{tooltip}</Text>}
-  >
     <button
       ref={ref}
-      className={`ic-btn-${variant}`}
+      className={`ic-btn ic-btn-${variant}`}
       onMouseUp={(e) => blurOnBubbling(e, `.ic-btn-${variant}`)}
       onClick={onClick}
       type={type === 'button' ? 'button' : 'submit'}
     >
       <RawIcon size={size} src={src} />
     </button>
-  </Tooltip>
+  );
-));
+  if (tooltip === null) return btn;
+  return (
+    <Tooltip
+      placement={tooltipPlacement}
+      content={<Text variant="b2">{tooltip}</Text>}
+    >
+      {btn}
+    </Tooltip>
+  );
+});
 
 IconButton.defaultProps = {
   variant: 'surface',
   size: 'normal',
   type: 'button',
+  tooltip: null,
   tooltipPlacement: 'top',
   onClick: null,
 };
 
 IconButton.propTypes = {
-  variant: PropTypes.oneOf(['surface']),
+  variant: PropTypes.oneOf(['surface', 'positive', 'caution', 'danger']),
   size: PropTypes.oneOf(['normal', 'small', 'extra-small']),
   type: PropTypes.oneOf(['button', 'submit']),
-  tooltip: PropTypes.string.isRequired,
+  tooltip: PropTypes.string,
   tooltipPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
   src: PropTypes.string.isRequired,
   onClick: PropTypes.func,

src/app/atoms/button/IconButton.scss

@@ -1,9 +1,6 @@
 @use 'state';
 
-.ic-btn-surface,
+.ic-btn {
-.ic-btn-primary,
-.ic-btn-caution,
-.ic-btn-danger {
   padding: var(--sp-extra-tight);
   border: none;
   border-radius: var(--bo-radius);
@@ -31,4 +28,22 @@
   @include state.hover(var(--bg-surface-hover));
   @include focus(var(--bg-surface-hover));
   @include state.active(var(--bg-surface-active));
+}
+.ic-btn-positive {
+  @include color(var(--ic-positive-normal));
+  @include state.hover(var(--bg-positive-hover));
+  @include focus(var(--bg-positive-hover));
+  @include state.active(var(--bg-positive-active));
+}
+.ic-btn-caution {
+  @include color(var(--ic-caution-normal));
+  @include state.hover(var(--bg-caution-hover));
+  @include focus(var(--bg-caution-hover));
+  @include state.active(var(--bg-caution-active));
+}
+.ic-btn-danger {
+  @include color(var(--ic-danger-normal));
+  @include state.hover(var(--bg-danger-hover));
+  @include focus(var(--bg-danger-hover));
+  @include state.active(var(--bg-danger-active));
 }

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

@@ -93,7 +93,7 @@ MenuItem.defaultProps = {
 };
 
 MenuItem.propTypes = {
-  variant: PropTypes.oneOf(['surface', 'caution', 'danger']),
+  variant: PropTypes.oneOf(['surface', 'positive', 'caution', 'danger']),
   iconSrc: PropTypes.string,
   type: PropTypes.oneOf(['button', 'submit']),
   onClick: PropTypes.func.isRequired,

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

@@ -30,6 +30,9 @@
 
   .text {
     color: var(--tc-surface-low);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &:not(:first-child) {

src/app/atoms/input/Input.jsx

@@ -8,6 +8,7 @@ function Input({
   id, label, value, placeholder,
   required, type, onChange, forwardRef,
   resizable, minHeight, onResize, state,
+  onKeyDown,
 }) {
   return (
     <div className="input-container">
@@ -26,6 +27,7 @@ function Input({
             autoComplete="off"
             onChange={onChange}
             onResize={onResize}
+            onKeyDown={onKeyDown}
           />
         ) : (
           <input
@@ -38,6 +40,7 @@ function Input({
             defaultValue={value}
             autoComplete="off"
             onChange={onChange}
+            onKeyDown={onKeyDown}
           />
         )}
     </div>
@@ -57,6 +60,7 @@ Input.defaultProps = {
   minHeight: 46,
   onResize: null,
   state: 'normal',
+  onKeyDown: null,
 };
 
 Input.propTypes = {
@@ -72,6 +76,7 @@ Input.propTypes = {
   minHeight: PropTypes.number,
   onResize: PropTypes.func,
   state: PropTypes.oneOf(['normal', 'success', 'error']),
+  onKeyDown: PropTypes.func,
 };
 
 export default Input;

src/app/molecules/channel-selector/ChannelSelector.jsx

@@ -1,73 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import './ChannelSelector.scss';
-
-import colorMXID from '../../../util/colorMXID';
-
-import Text from '../../atoms/text/Text';
-import Avatar from '../../atoms/avatar/Avatar';
-import NotificationBadge from '../../atoms/badge/NotificationBadge';
-import { blurOnBubbling } from '../../atoms/button/script';
-
-function ChannelSelector({
-  selected, unread, notificationCount, alert,
-  iconSrc, imageSrc, roomId, onClick, children,
-}) {
-  return (
-    <button
-      className={`channel-selector__button-wrapper${selected ? ' channel-selector--selected' : ''}`}
-      type="button"
-      onClick={onClick}
-      onMouseUp={(e) => blurOnBubbling(e, '.channel-selector__button-wrapper')}
-    >
-      <div className="channel-selector">
-        <div className="channel-selector__icon flex--center">
-          <Avatar
-            text={children.slice(0, 1)}
-            bgColor={colorMXID(roomId)}
-            imageSrc={imageSrc}
-            iconSrc={iconSrc}
-            size="extra-small"
-          />
-        </div>
-        <div className="channel-selector__text-container">
-          <Text variant="b1">{children}</Text>
-        </div>
-        <div className="channel-selector__badge-container">
-          {
-            notificationCount !== 0
-              ? unread && (
-                <NotificationBadge alert={alert}>
-                  {notificationCount}
-                </NotificationBadge>
-              )
-              : unread && <div className="channel-selector--unread" />
-          }
-        </div>
-      </div>
-    </button>
-  );
-}
-
-ChannelSelector.defaultProps = {
-  selected: false,
-  unread: false,
-  notificationCount: 0,
-  alert: false,
-  iconSrc: null,
-  imageSrc: null,
-};
-
-ChannelSelector.propTypes = {
-  selected: PropTypes.bool,
-  unread: PropTypes.bool,
-  notificationCount: PropTypes.number,
-  alert: PropTypes.bool,
-  iconSrc: PropTypes.string,
-  imageSrc: PropTypes.string,
-  roomId: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired,
-  children: PropTypes.string.isRequired,
-};
-
-export default ChannelSelector;

src/app/molecules/channel-selector/ChannelSelector.scss

@@ -1,68 +0,0 @@
-.channel-selector__button-wrapper {
-  display: block;
-  width: calc(100% - var(--sp-extra-tight));
-  margin-left: auto;
-  padding: var(--sp-extra-tight) var(--sp-extra-tight);
-  
-  border: 1px solid transparent;
-  border-radius:  var(--bo-radius);
-  cursor: pointer;
-
-  [dir=rtl] & {
-    
-    margin: {
-      left: 0;
-      right: auto;
-    }
-  }
-
-  @media (hover: hover) {
-    &:hover {
-      background-color: var(--bg-surface-hover);
-    }
-  }
-  &:focus {
-    outline: none;
-    background-color: var(--bg-surface-hover);
-  }
-  &:active {
-    background-color: var(--bg-surface-active);
-  }
-}
-.channel-selector {
-  display: flex;
-  align-items: center;
-
-  &__icon {
-    width: 24px;
-    height: 24px;
-    .avatar__border {
-      box-shadow: none;
-    }
-  }
-  &__text-container {
-    flex: 1;
-    min-width: 0;
-    margin: 0 var(--sp-extra-tight);
-
-    & .text {
-      color: var(--tc-surface-normal);
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-  }
-}
-
-.channel-selector--unread {
-  margin: 0 var(--sp-ultra-tight);
-  height: 8px;
-  width: 8px;
-  background-color: var(--tc-surface-normal);
-  border-radius: 50%;
-  opacity: .4;
-}
-.channel-selector--selected {
-  background-color: var(--bg-surface);
-  border-color: var(--bg-surface-border);
-}

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

@@ -0,0 +1,88 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import './ImageUpload.scss';
+
+import initMatrix from '../../../client/initMatrix';
+
+import Text from '../../atoms/text/Text';
+import Avatar from '../../atoms/avatar/Avatar';
+import Spinner from '../../atoms/spinner/Spinner';
+
+function ImageUpload({
+  text, bgColor, imageSrc, onUpload, onRequestRemove,
+}) {
+  const [uploadPromise, setUploadPromise] = useState(null);
+  const uploadImageRef = useRef(null);
+
+  async function uploadImage(e) {
+    const file = e.target.files.item(0);
+    if (file === null) return;
+    try {
+      const uPromise = initMatrix.matrixClient.uploadContent(file, { onlyContentUri: false });
+      setUploadPromise(uPromise);
+
+      const res = await uPromise;
+      if (typeof res?.content_uri === 'string') onUpload(res.content_uri);
+      setUploadPromise(null);
+    } catch {
+      setUploadPromise(null);
+    }
+    uploadImageRef.current.value = null;
+  }
+
+  function cancelUpload() {
+    initMatrix.matrixClient.cancelUpload(uploadPromise);
+    setUploadPromise(null);
+    uploadImageRef.current.value = null;
+  }
+
+  return (
+    <div className="img-upload__wrapper">
+      <button
+        type="button"
+        className="img-upload"
+        onClick={() => {
+          if (uploadPromise !== null) return;
+          uploadImageRef.current.click();
+        }}
+      >
+        <Avatar
+          imageSrc={imageSrc}
+          text={text.slice(0, 1)}
+          bgColor={bgColor}
+          size="large"
+        />
+        <div className={`img-upload__process ${uploadPromise === null ? ' img-upload__process--stopped' : ''}`}>
+          {uploadPromise === null && <Text variant="b3">Upload</Text>}
+          {uploadPromise !== null && <Spinner size="small" />}
+        </div>
+      </button>
+      { (typeof imageSrc === 'string' || uploadPromise !== null) && (
+        <button
+          className="img-upload__btn-cancel"
+          type="button"
+          onClick={uploadPromise === null ? onRequestRemove : cancelUpload}
+        >
+          <Text variant="b3">{uploadPromise ? 'Cancel' : 'Remove'}</Text>
+        </button>
+      )}
+      <input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" />
+    </div>
+  );
+}
+
+ImageUpload.defaultProps = {
+  text: null,
+  bgColor: 'transparent',
+  imageSrc: null,
+};
+
+ImageUpload.propTypes = {
+  text: PropTypes.string,
+  bgColor: PropTypes.string,
+  imageSrc: PropTypes.string,
+  onUpload: PropTypes.func.isRequired,
+  onRequestRemove: PropTypes.func.isRequired,
+};
+
+export default ImageUpload;

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

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

src/app/molecules/message/Message.jsx

@@ -128,10 +128,19 @@ MessageContent.propTypes = {
 
 function MessageEdit({ content, onSave, onCancel }) {
   const editInputRef = useRef(null);
+
+  function handleKeyDown(e) {
+    if (e.keyCode === 13 && e.shiftKey === false) {
+      e.preventDefault();
+      onSave(editInputRef.current.value);
+    }
+  }
+
   return (
     <form className="message__edit" onSubmit={(e) => { e.preventDefault(); onSave(editInputRef.current.value); }}>
       <Input
         forwardRef={editInputRef}
+        onKeyDown={handleKeyDown}
         value={content}
         placeholder="Edit message"
         required

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import './ChannelIntro.scss';
+import './RoomIntro.scss';
 
 import Linkify from 'linkifyjs/react';
 import colorMXID from '../../../util/colorMXID';
@@ -12,27 +12,27 @@ function linkifyContent(content) {
   return <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify>;
 }
 
-function ChannelIntro({
+function RoomIntro({
   roomId, avatarSrc, name, heading, desc, time,
 }) {
   return (
-    <div className="channel-intro">
+    <div className="room-intro">
       <Avatar imageSrc={avatarSrc} text={name.slice(0, 1)} bgColor={colorMXID(roomId)} size="large" />
-      <div className="channel-intro__content">
+      <div className="room-intro__content">
-        <Text className="channel-intro__name" variant="h1">{heading}</Text>
+        <Text className="room-intro__name" variant="h1">{heading}</Text>
-        <Text className="channel-intro__desc" variant="b1">{linkifyContent(desc)}</Text>
+        <Text className="room-intro__desc" variant="b1">{linkifyContent(desc)}</Text>
-        { time !== null && <Text className="channel-intro__time" variant="b3">{time}</Text>}
+        { time !== null && <Text className="room-intro__time" variant="b3">{time}</Text>}
       </div>
     </div>
   );
 }
 
-ChannelIntro.defaultProps = {
+RoomIntro.defaultProps = {
   avatarSrc: false,
   time: null,
 };
 
-ChannelIntro.propTypes = {
+RoomIntro.propTypes = {
   roomId: PropTypes.string.isRequired,
   avatarSrc: PropTypes.oneOfType([
     PropTypes.string,
@@ -44,4 +44,4 @@ ChannelIntro.propTypes = {
   time: PropTypes.string,
 };
 
-export default ChannelIntro;
+export default RoomIntro;

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

@@ -1,4 +1,4 @@
-.channel-intro {
+.room-intro {
   margin-top: calc(2 * var(--sp-extra-loose));
   margin-bottom: var(--sp-extra-loose);
   padding-left: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
@@ -11,7 +11,7 @@
     }
   }
 
-  .channel-intro__content {
+  .room-intro__content {
     margin-top: var(--sp-extra-loose);
     max-width: 640px;
   }

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './RoomSelector.scss';
+
+import colorMXID from '../../../util/colorMXID';
+
+import Text from '../../atoms/text/Text';
+import Avatar from '../../atoms/avatar/Avatar';
+import NotificationBadge from '../../atoms/badge/NotificationBadge';
+import { blurOnBubbling } from '../../atoms/button/script';
+
+function RoomSelectorWrapper({
+  isSelected, isUnread, onClick, content, options,
+}) {
+  let myClass = isUnread ? ' room-selector--unread' : '';
+  myClass += isSelected ? ' room-selector--selected' : '';
+  return (
+    <div className={`room-selector${myClass}`}>
+      <button
+        className="room-selector__content"
+        type="button"
+        onClick={onClick}
+        onMouseUp={(e) => blurOnBubbling(e, '.room-selector')}
+      >
+        {content}
+      </button>
+      <div className="room-selector__options">{options}</div>
+    </div>
+  );
+}
+RoomSelectorWrapper.defaultProps = {
+  options: null,
+};
+RoomSelectorWrapper.propTypes = {
+  isSelected: PropTypes.bool.isRequired,
+  isUnread: PropTypes.bool.isRequired,
+  onClick: PropTypes.func.isRequired,
+  content: PropTypes.node.isRequired,
+  options: PropTypes.node,
+};
+
+function RoomSelector({
+  name, roomId, imageSrc, iconSrc,
+  isSelected, isUnread, notificationCount, isAlert,
+  options, onClick,
+}) {
+  return (
+    <RoomSelectorWrapper
+      isSelected={isSelected}
+      isUnread={isUnread}
+      content={(
+        <>
+          <Avatar
+            text={name.slice(0, 1)}
+            bgColor={colorMXID(roomId)}
+            imageSrc={imageSrc}
+            iconSrc={iconSrc}
+            size="extra-small"
+          />
+          <Text variant="b1">{name}</Text>
+          { isUnread && (
+            <NotificationBadge
+              alert={isAlert}
+              content={notificationCount !== 0 ? notificationCount : null}
+            />
+          )}
+        </>
+      )}
+      options={options}
+      onClick={onClick}
+    />
+  );
+}
+RoomSelector.defaultProps = {
+  isSelected: false,
+  imageSrc: null,
+  iconSrc: null,
+  options: null,
+};
+RoomSelector.propTypes = {
+  name: PropTypes.string.isRequired,
+  roomId: PropTypes.string.isRequired,
+  imageSrc: PropTypes.string,
+  iconSrc: PropTypes.string,
+  isSelected: PropTypes.bool,
+  isUnread: PropTypes.bool.isRequired,
+  notificationCount: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]).isRequired,
+  isAlert: PropTypes.bool.isRequired,
+  options: PropTypes.node,
+  onClick: PropTypes.func.isRequired,
+};
+
+export default RoomSelector;

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

@@ -0,0 +1,97 @@
+.room-selector-flex {
+  display: flex;
+  align-items: center;
+}
+.room-selector-flexItem {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.room-selector {
+  @extend .room-selector-flex;
+
+  border: 1px solid transparent;
+  border-radius: var(--bo-radius);
+  cursor: pointer;
+
+  &--unread {
+    .room-selector__content > .text {
+      font-weight: 500;
+      color: var(--tc-surface-high);
+    }
+  }
+  
+  &--selected {
+    background-color: var(--bg-surface);
+    border-color: var(--bg-surface-border);
+
+    & .room-selector__options {
+      display: flex;
+    }
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--bg-surface-hover);
+      & .room-selector__options {
+        display: flex;
+      }
+    }
+  }
+  &:focus-within {
+    background-color: var(--bg-surface-hover);
+    & button {
+      outline: none;
+    }
+  }
+  &:active {
+    background-color: var(--bg-surface-active);
+  }
+  &--selected:hover,
+  &--selected:focus,
+  &--selected:active {
+    background-color: var(--bg-surface);
+  }
+}
+
+.room-selector__content {
+  @extend .room-selector-flexItem;
+  @extend .room-selector-flex;
+  padding: 0 var(--sp-extra-tight);
+  min-height: 40px;
+  cursor: inherit;
+
+  & > .avatar-container .avatar__bordered {
+    box-shadow: none;
+  }
+
+  & > .text {
+    @extend .room-selector-flexItem;
+    margin: 0 var(--sp-extra-tight);
+
+    color: var(--tc-surface-normal-low);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+.room-selector__options {
+  @extend .room-selector-flex;
+  display: none;
+  margin-right: var(--sp-ultra-tight);
+
+  [dir=rtl] & {
+    margin-right: 0;
+    margin-left: var(--sp-ultra-tight);
+  }
+
+  &:empty {
+    margin: 0 !important;
+  }
+
+  & .ic-btn {
+    padding: 6px;
+    border-radius: calc(var(--bo-radius) / 2);
+  }
+}

src/app/molecules/room-tile/RoomTile.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import './ChannelTile.scss';
+import './RoomTile.scss';
 
 import Linkify from 'linkifyjs/react';
 import colorMXID from '../../../util/colorMXID';
@@ -12,20 +12,20 @@ function linkifyContent(content) {
   return <Linkify options={{ target: { url: '_blank' } }}>{content}</Linkify>;
 }
 
-function ChannelTile({
+function RoomTile({
   avatarSrc, name, id,
   inviterName, memberCount, desc, options,
 }) {
   return (
-    <div className="channel-tile">
+    <div className="room-tile">
-      <div className="channel-tile__avatar">
+      <div className="room-tile__avatar">
         <Avatar
           imageSrc={avatarSrc}
           bgColor={colorMXID(id)}
           text={name.slice(0, 1)}
         />
       </div>
-      <div className="channel-tile__content">
+      <div className="room-tile__content">
         <Text variant="s1">{name}</Text>
         <Text variant="b3">
           {
@@ -36,12 +36,12 @@ function ChannelTile({
         </Text>
         {
           desc !== null && (typeof desc === 'string')
-            ? <Text className="channel-tile__content__desc" variant="b2">{linkifyContent(desc)}</Text>
+            ? <Text className="room-tile__content__desc" variant="b2">{linkifyContent(desc)}</Text>
             : desc
         }
       </div>
       { options !== null && (
-        <div className="channel-tile__options">
+        <div className="room-tile__options">
           {options}
         </div>
       )}
@@ -49,14 +49,14 @@ function ChannelTile({
   );
 }
 
-ChannelTile.defaultProps = {
+RoomTile.defaultProps = {
   avatarSrc: null,
   inviterName: null,
   options: null,
   desc: null,
   memberCount: null,
 };
-ChannelTile.propTypes = {
+RoomTile.propTypes = {
   avatarSrc: PropTypes.string,
   name: PropTypes.string.isRequired,
   id: PropTypes.string.isRequired,
@@ -69,4 +69,4 @@ ChannelTile.propTypes = {
   options: PropTypes.node,
 };
 
-export default ChannelTile;
+export default RoomTile;

src/app/molecules/room-tile/RoomTile.scss

@@ -1,4 +1,4 @@
-.channel-tile {
+.room-tile {
   display: flex;
 
   &__content {

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

@@ -2,29 +2,22 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './SidebarAvatar.scss';
 
-import Tippy from '@tippyjs/react';
 import Avatar from '../../atoms/avatar/Avatar';
 import Text from '../../atoms/text/Text';
+import Tooltip from '../../atoms/tooltip/Tooltip';
 import NotificationBadge from '../../atoms/badge/NotificationBadge';
 import { blurOnBubbling } from '../../atoms/button/script';
 
 const SidebarAvatar = React.forwardRef(({
   tooltip, text, bgColor, imageSrc,
-  iconSrc, active, onClick, notifyCount,
+  iconSrc, active, onClick, isUnread, notificationCount, isAlert,
 }, ref) => {
   let activeClass = '';
   if (active) activeClass = ' sidebar-avatar--active';
   return (
-    <Tippy
+    <Tooltip
       content={<Text variant="b1">{tooltip}</Text>}
-      className="sidebar-avatar-tippy"
-      touch="hold"
-      arrow={false}
       placement="right"
-      maxWidth={200}
-      delay={[0, 0]}
-      duration={[100, 0]}
-      offset={[0, 0]}
     >
       <button
         ref={ref}
@@ -40,9 +33,14 @@ const SidebarAvatar = React.forwardRef(({
           iconSrc={iconSrc}
           size="normal"
         />
-        { notifyCount !== null && <NotificationBadge alert>{notifyCount}</NotificationBadge> }
+        { isUnread && (
+          <NotificationBadge
+            alert={isAlert}
+            content={notificationCount !== 0 ? notificationCount : null}
+          />
+        )}
       </button>
-    </Tippy>
+    </Tooltip>
   );
 });
 SidebarAvatar.defaultProps = {
@@ -52,7 +50,9 @@ SidebarAvatar.defaultProps = {
   imageSrc: null,
   active: false,
   onClick: null,
-  notifyCount: null,
+  isUnread: false,
+  notificationCount: 0,
+  isAlert: false,
 };
 
 SidebarAvatar.propTypes = {
@@ -63,10 +63,12 @@ SidebarAvatar.propTypes = {
   iconSrc: PropTypes.string,
   active: PropTypes.bool,
   onClick: PropTypes.func,
-  notifyCount: PropTypes.oneOfType([
+  isUnread: PropTypes.bool,
+  notificationCount: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
   ]),
+  isAlert: PropTypes.bool,
 };
 
 export default SidebarAvatar;

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

@@ -1,28 +1,18 @@
-
-.sidebar-avatar-tippy {
-  padding: var(--sp-extra-tight) var(--sp-normal);
-  background-color: var(--bg-tooltip);
-  border-radius: var(--bo-radius);
-  box-shadow: var(--bs-popup);
-
-  .text {
-    color: var(--tc-tooltip);
-  }
-}
-
 .sidebar-avatar {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 100%;
   cursor: pointer;
   
   & .notification-badge {
     position: absolute;
-    right: var(--sp-extra-tight);
+    right: 0;
-    top: calc(-1 * var(--sp-ultra-tight));
+    top: 0;
     box-shadow: 0 0 0 2px var(--bg-surface-low);
+    transform: translate(20%, -20%);
+
+    margin: 0 !important;
   }
   &:focus {
     outline: none;
@@ -37,7 +27,7 @@
     content: "";
     display: block;
     position: absolute;
-    left: 0;
+    left: -11px;
     top: 50%;
     transform: translateY(-50%);
 
@@ -48,7 +38,8 @@
     transition: height 200ms linear;
 
     [dir=rtl] & {
-      right: 0;
+      left: unset;
+      right: -11px;
       border-radius: 4px 0 0 4px;
     }
   }

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

@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
-import './CreateChannel.scss';
+import './CreateRoom.scss';
 
 import initMatrix from '../../../client/initMatrix';
 import { isRoomAliasAvailable } from '../../../util/matrixUtil';
@@ -18,7 +18,7 @@ import SettingTile from '../../molecules/setting-tile/SettingTile';
 import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
-function CreateChannel({ isOpen, onRequestClose }) {
+function CreateRoom({ isOpen, onRequestClose }) {
   const [isPublic, togglePublic] = useState(false);
   const [isEncrypted, toggleEncrypted] = useState(true);
   const [isValidAddress, updateIsValidAddress] = useState(null);
@@ -69,10 +69,10 @@ function CreateChannel({ isOpen, onRequestClose }) {
       onRequestClose();
     } catch (e) {
       if (e.message === 'M_UNKNOWN: Invalid characters in room alias') {
-        updateCreatingError('ERROR: Invalid characters in channel address');
+        updateCreatingError('ERROR: Invalid characters in room address');
         updateIsValidAddress(false);
       } else if (e.message === 'M_ROOM_IN_USE: Room alias already taken') {
-        updateCreatingError('ERROR: Channel address is already in use');
+        updateCreatingError('ERROR: Room address is already in use');
         updateIsValidAddress(false);
       } else updateCreatingError(e.message);
     }
@@ -110,26 +110,26 @@ function CreateChannel({ isOpen, onRequestClose }) {
   return (
     <PopupWindow
       isOpen={isOpen}
-      title="Create channel"
+      title="Create room"
       contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
       onRequestClose={onRequestClose}
     >
-      <div className="create-channel">
+      <div className="create-room">
-        <form className="create-channel__form" onSubmit={(e) => { e.preventDefault(); createRoom(); }}>
+        <form className="create-room__form" onSubmit={(e) => { e.preventDefault(); createRoom(); }}>
           <SettingTile
-            title="Make channel public"
+            title="Make room public"
             options={<Toggle isActive={isPublic} onToggle={togglePublic} />}
-            content={<Text variant="b3">Public channel can be joined by anyone.</Text>}
+            content={<Text variant="b3">Public room can be joined by anyone.</Text>}
           />
           {isPublic && (
             <div>
-              <Text className="create-channel__address__label" variant="b2">Channel address</Text>
+              <Text className="create-room__address__label" variant="b2">Room address</Text>
-              <div className="create-channel__address">
+              <div className="create-room__address">
                 <Text variant="b1">#</Text>
                 <Input value={addressValue} onChange={validateAddress} state={(isValidAddress === false) ? 'error' : 'normal'} forwardRef={addressRef} placeholder="my_room" required />
                 <Text variant="b1">{hsString}</Text>
               </div>
-              {isValidAddress === false && <Text className="create-channel__address__tip" variant="b3"><span style={{ color: 'var(--bg-danger)' }}>{`#${addressValue}${hsString} is already in use`}</span></Text>}
+              {isValidAddress === false && <Text className="create-room__address__tip" variant="b3"><span style={{ color: 'var(--bg-danger)' }}>{`#${addressValue}${hsString} is already in use`}</span></Text>}
             </div>
           )}
           {!isPublic && (
@@ -140,26 +140,26 @@ function CreateChannel({ isOpen, onRequestClose }) {
             />
           )}
           <Input value={topicValue} onChange={handleTopicChange} forwardRef={topicRef} minHeight={174} resizable label="Topic (optional)" />
-          <div className="create-channel__name-wrapper">
+          <div className="create-room__name-wrapper">
-            <Input value={titleValue} onChange={handleTitleChange} forwardRef={nameRef} label="Channel name" required />
+            <Input value={titleValue} onChange={handleTitleChange} forwardRef={nameRef} label="Room name" required />
             <Button disabled={isValidAddress === false || isCreatingRoom} iconSrc={HashPlusIC} type="submit" variant="primary">Create</Button>
           </div>
           {isCreatingRoom && (
-            <div className="create-channel__loading">
+            <div className="create-room__loading">
               <Spinner size="small" />
-              <Text>Creating channel...</Text>
+              <Text>Creating room...</Text>
             </div>
           )}
-          {typeof creatingError === 'string' && <Text className="create-channel__error" variant="b3">{creatingError}</Text>}
+          {typeof creatingError === 'string' && <Text className="create-room__error" variant="b3">{creatingError}</Text>}
         </form>
       </div>
     </PopupWindow>
   );
 }
 
-CreateChannel.propTypes = {
+CreateRoom.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   onRequestClose: PropTypes.func.isRequired,
 };
 
-export default CreateChannel;
+export default CreateRoom;

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

@@ -1,4 +1,4 @@
-.create-channel {
+.create-room {
   margin: 0 var(--sp-normal);
   margin-right: var(--sp-extra-tight);
 

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

@@ -11,7 +11,7 @@ import Button from '../../atoms/button/Button';
 import IconButton from '../../atoms/button/IconButton';
 import Spinner from '../../atoms/spinner/Spinner';
 import PopupWindow from '../../molecules/popup-window/PopupWindow';
-import ChannelTile from '../../molecules/channel-tile/ChannelTile';
+import RoomTile from '../../molecules/room-tile/RoomTile';
 
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
@@ -47,13 +47,13 @@ function InviteList({ isOpen, onRequestClose }) {
     };
   }, [procInvite]);
 
-  function renderChannelTile(roomId) {
+  function renderRoomTile(roomId) {
     const myRoom = initMatrix.matrixClient.getRoom(roomId);
     const roomName = myRoom.name;
     let roomAlias = myRoom.getCanonicalAlias();
     if (roomAlias === null) roomAlias = myRoom.roomId;
     return (
-      <ChannelTile
+      <RoomTile
         key={myRoom.roomId}
         name={roomName}
         avatarSrc={initMatrix.matrixClient.getRoom(roomId).getAvatarUrl(initMatrix.matrixClient.baseUrl, 42, 42, 'crop')}
@@ -91,7 +91,7 @@ function InviteList({ isOpen, onRequestClose }) {
             const myRoom = initMatrix.matrixClient.getRoom(roomId);
             const roomName = myRoom.name;
             return (
-              <ChannelTile
+              <RoomTile
                 key={myRoom.roomId}
                 name={roomName}
                 id={myRoom.getDMInviter()}
@@ -114,14 +114,14 @@ function InviteList({ isOpen, onRequestClose }) {
             <Text variant="b3">Spaces</Text>
           </div>
         )}
-        { Array.from(initMatrix.roomList.inviteSpaces).map(renderChannelTile) }
+        { Array.from(initMatrix.roomList.inviteSpaces).map(renderRoomTile) }
 
         { initMatrix.roomList.inviteRooms.size !== 0 && (
           <div className="invites-content__subheading">
-            <Text variant="b3">Channels</Text>
+            <Text variant="b3">Rooms</Text>
           </div>
         )}
-        { Array.from(initMatrix.roomList.inviteRooms).map(renderChannelTile) }
+        { Array.from(initMatrix.roomList.inviteRooms).map(renderRoomTile) }
       </div>
     </PopupWindow>
   );

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

@@ -14,7 +14,7 @@
     }
   }
 
-  & .channel-tile {
+  & .room-tile {
     margin-top: var(--sp-normal);
     &__options {
       align-self: flex-end;

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

@@ -13,7 +13,7 @@ import IconButton from '../../atoms/button/IconButton';
 import Spinner from '../../atoms/spinner/Spinner';
 import Input from '../../atoms/input/Input';
 import PopupWindow from '../../molecules/popup-window/PopupWindow';
-import ChannelTile from '../../molecules/channel-tile/ChannelTile';
+import RoomTile from '../../molecules/room-tile/RoomTile';
 
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
@@ -188,7 +188,7 @@ function InviteUser({
       const userId = user.user_id;
       const name = typeof user.display_name === 'string' ? user.display_name : userId;
       return (
-        <ChannelTile
+        <RoomTile
           key={userId}
           avatarSrc={typeof user.avatar_url === 'string' ? mx.mxcUrlToHttp(user.avatar_url, 42, 42, 'crop') : null}
           name={name}

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

@@ -39,7 +39,7 @@
     border-top: 1px solid var(--bg-surface-border);
   }
 
-  & .channel-tile {
+  & .room-tile {
     margin-top: var(--sp-normal);
     &__options {
       align-self: flex-end;

src/app/organisms/navigation/Directs.jsx

@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { selectRoom } from '../../../client/action/navigation';
+import Postie from '../../../util/Postie';
+
+import Selector from './Selector';
+
+import { AtoZ } from './common';
+
+const drawerPostie = new Postie();
+function Directs() {
+  const { roomList, notifications } = initMatrix;
+  const directIds = [...roomList.directs].sort(AtoZ);
+
+  const [, forceUpdate] = useState({});
+
+  function selectorChanged(selectedRoomId, prevSelectedRoomId) {
+    if (!drawerPostie.hasTopic('selector-change')) return;
+    const addresses = [];
+    if (drawerPostie.hasSubscriber('selector-change', selectedRoomId)) addresses.push(selectedRoomId);
+    if (drawerPostie.hasSubscriber('selector-change', prevSelectedRoomId)) addresses.push(prevSelectedRoomId);
+    if (addresses.length === 0) return;
+    drawerPostie.post('selector-change', addresses, selectedRoomId);
+  }
+
+  function notiChanged(roomId, total, prevTotal) {
+    if (total === prevTotal) return;
+    if (drawerPostie.hasTopicAndSubscriber('unread-change', roomId)) {
+      drawerPostie.post('unread-change', roomId);
+    }
+  }
+
+  function roomListUpdated() {
+    const { spaces, rooms, directs } = initMatrix.roomList;
+    if (!(
+      spaces.has(navigation.selectedRoomId)
+      || rooms.has(navigation.selectedRoomId)
+      || directs.has(navigation.selectedRoomId))
+    ) {
+      selectRoom(null);
+    }
+    forceUpdate({});
+  }
+
+  useEffect(() => {
+    roomList.on(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
+    navigation.on(cons.events.navigation.ROOM_SELECTED, selectorChanged);
+    notifications.on(cons.events.notifications.NOTI_CHANGED, notiChanged);
+    return () => {
+      roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
+      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged);
+      notifications.removeListener(cons.events.notifications.NOTI_CHANGED, notiChanged);
+    };
+  }, []);
+
+  return directIds.map((id) => (
+    <Selector
+      key={id}
+      roomId={id}
+      drawerPostie={drawerPostie}
+      onClick={() => selectRoom(id)}
+    />
+  ));
+}
+
+export default Directs;

src/app/organisms/navigation/Drawer.jsx

@@ -1,223 +1,85 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import './Drawer.scss';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
-import { doesRoomHaveUnread } from '../../../util/matrixUtil';
-import {
-  selectRoom, openPublicChannels, openCreateChannel, openInviteUser,
-} from '../../../client/action/navigation';
 import navigation from '../../../client/state/navigation';
+import { selectTab, selectSpace } from '../../../client/action/navigation';
 
-import Header, { TitleWrapper } from '../../atoms/header/Header';
 import Text from '../../atoms/text/Text';
-import IconButton from '../../atoms/button/IconButton';
 import ScrollView from '../../atoms/scroll/ScrollView';
-import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
-import ChannelSelector from '../../molecules/channel-selector/ChannelSelector';
 
-import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
+import DrawerHeader from './DrawerHeader';
-// import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
+import DrawerBreadcrumb from './DrawerBreadcrumb';
-import HashIC from '../../../../public/res/ic/outlined/hash.svg';
+import Home from './Home';
-import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
+import Directs from './Directs';
-import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
-import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
-import SpaceIC from '../../../../public/res/ic/outlined/space.svg';
-import SpaceLockIC from '../../../../public/res/ic/outlined/space-lock.svg';
 
-function AtoZ(aId, bId) {
+function Drawer() {
-  let aName = initMatrix.matrixClient.getRoom(aId).name;
+  const [systemState, setSystemState] = useState(null);
-  let bName = initMatrix.matrixClient.getRoom(bId).name;
+  const [selectedTab, setSelectedTab] = useState(navigation.selectedTab);
+  const [spaceId, setSpaceId] = useState(navigation.selectedSpaceId);
 
-  // remove "#" from the room name
+  function onTabSelected(tabId) {
-  // To ignore it in sorting
+    setSelectedTab(tabId);
-  aName = aName.replaceAll('#', '');
-  bName = bName.replaceAll('#', '');
-
-  if (aName.toLowerCase() < bName.toLowerCase()) {
-    return -1;
   }
-  if (aName.toLowerCase() > bName.toLowerCase()) {
+  function onSpaceSelected(roomId) {
-    return 1;
+    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]);
   }
-  return 0;
-}
 
-function DrawerHeader({ tabId }) {
+  function handleSystemState(state) {
-  return (
+    if (state === 'ERROR' || state === 'RECONNECTING' || state === 'STOPPED') {
-    <Header>
+      setSystemState({ status: 'Connection lost!' });
-      <TitleWrapper>
-        <Text variant="s1">{(tabId === 'channels' ? 'Home' : 'Direct messages')}</Text>
-      </TitleWrapper>
-      {(tabId === 'dm')
-        ? <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="normal" />
-        : (
-          <ContextMenu
-            content={(hideMenu) => (
-              <>
-                <MenuHeader>Add channel</MenuHeader>
-                <MenuItem
-                  iconSrc={HashPlusIC}
-                  onClick={() => { hideMenu(); openCreateChannel(); }}
-                >
-                  Create new channel
-                </MenuItem>
-                <MenuItem
-                  iconSrc={HashSearchIC}
-                  onClick={() => { hideMenu(); openPublicChannels(); }}
-                >
-                  Add Public channel
-                </MenuItem>
-              </>
-            )}
-            render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add channel" src={PlusIC} size="normal" />)}
-          />
-        )}
-      {/* <IconButton onClick={() => ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */}
-    </Header>
-  );
-}
-DrawerHeader.propTypes = {
-  tabId: PropTypes.string.isRequired,
-};
-
-function DrawerBradcrumb() {
-  return (
-    <div className="breadcrumb__wrapper">
-      <ScrollView horizontal vertical={false}>
-        <div>
-          {/* TODO: bradcrumb space paths when spaces become a thing */}
-        </div>
-      </ScrollView>
-    </div>
-  );
-}
-
-function renderSelector(room, roomId, isSelected, isDM) {
-  const mx = initMatrix.matrixClient;
-  let imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop');
-  if (typeof imageSrc === 'undefined') imageSrc = null;
-
-  return (
-    <ChannelSelector
-      key={roomId}
-      iconSrc={
-        isDM
-          ? null
-          : (() => {
-            if (room.isSpaceRoom()) {
-              return (room.getJoinRule() === 'invite' ? SpaceLockIC : SpaceIC);
-            }
-            return (room.getJoinRule() === 'invite' ? HashLockIC : HashIC);
-          })()
-      }
-      imageSrc={isDM ? imageSrc : null}
-      roomId={roomId}
-      unread={doesRoomHaveUnread(room)}
-      onClick={() => selectRoom(roomId)}
-      notificationCount={room.getUnreadNotificationCount('total')}
-      alert={room.getUnreadNotificationCount('highlight') !== 0}
-      selected={isSelected}
-    >
-      {room.name}
-    </ChannelSelector>
-  );
-}
-
-function Directs({ selectedRoomId }) {
-  const mx = initMatrix.matrixClient;
-  const directIds = [...initMatrix.roomList.directs].sort(AtoZ);
-
-  return directIds.map((id) => renderSelector(mx.getRoom(id), id, selectedRoomId === id, true));
-}
-Directs.defaultProps = { selectedRoomId: null };
-Directs.propTypes = { selectedRoomId: PropTypes.string };
-
-function Home({ selectedRoomId }) {
-  const mx = initMatrix.matrixClient;
-  const spaceIds = [...initMatrix.roomList.spaces].sort(AtoZ);
-  const roomIds = [...initMatrix.roomList.rooms].sort(AtoZ);
-
-  return (
-    <>
-      { spaceIds.length !== 0 && <Text className="cat-header" variant="b3">Spaces</Text> }
-      { spaceIds.map((id) => renderSelector(mx.getRoom(id), id, selectedRoomId === id, false)) }
-      { roomIds.length !== 0 && <Text className="cat-header" variant="b3">Channels</Text> }
-      { roomIds.map((id) => renderSelector(mx.getRoom(id), id, selectedRoomId === id, false)) }
-    </>
-  );
-}
-Home.defaultProps = { selectedRoomId: null };
-Home.propTypes = { selectedRoomId: PropTypes.string };
-
-function Channels({ tabId }) {
-  const [selectedRoomId, changeSelectedRoomId] = useState(null);
-  const [, updateState] = useState();
-
-  const selectHandler = (roomId) => changeSelectedRoomId(roomId);
-  const handleDataChanges = () => updateState({});
-
-  const onRoomListChange = () => {
-    const { spaces, rooms, directs } = initMatrix.roomList;
-    if (!(
-      spaces.has(selectedRoomId)
-      || rooms.has(selectedRoomId)
-      || directs.has(selectedRoomId))
-    ) {
-      selectRoom(null);
     }
-  };
+    if (systemState !== null) setSystemState(null);
+  }
 
   useEffect(() => {
-    navigation.on(cons.events.navigation.ROOM_SELECTED, selectHandler);
+    navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
-    initMatrix.roomList.on(cons.events.roomList.ROOMLIST_UPDATED, handleDataChanges);
+    navigation.on(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
-
+    initMatrix.roomList.on(cons.events.roomList.ROOM_LEAVED, onRoomLeaved);
     return () => {
-      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectHandler);
+      navigation.removeListener(cons.events.navigation.TAB_SELECTED, onTabSelected);
-      initMatrix.roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, handleDataChanges);
+      navigation.removeListener(cons.events.navigation.SPACE_SELECTED, onSpaceSelected);
+      initMatrix.roomList.removeListener(cons.events.roomList.ROOM_LEAVED, onRoomLeaved);
     };
   }, []);
   useEffect(() => {
-    initMatrix.roomList.on(cons.events.roomList.ROOMLIST_UPDATED, onRoomListChange);
+    initMatrix.matrixClient.on('sync', handleSystemState);
-
     return () => {
-      initMatrix.roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, onRoomListChange);
+      initMatrix.matrixClient.removeListener('sync', handleSystemState);
     };
-  }, [selectedRoomId]);
+  }, [systemState]);
 
-  return (
-    <div className="channels-container">
-      {
-        tabId === 'channels'
-          ? <Home selectedRoomId={selectedRoomId} />
-          : <Directs selectedRoomId={selectedRoomId} />
-      }
-    </div>
-  );
-}
-Channels.propTypes = {
-  tabId: PropTypes.string.isRequired,
-};
-
-function Drawer({ tabId }) {
   return (
     <div className="drawer">
-      <DrawerHeader tabId={tabId} />
+      <DrawerHeader selectedTab={selectedTab} spaceId={spaceId} />
       <div className="drawer__content-wrapper">
-        <DrawerBradcrumb />
+        {selectedTab !== cons.tabs.DIRECTS && <DrawerBreadcrumb spaceId={spaceId} />}
-        <div className="channels__wrapper">
+        <div className="rooms__wrapper">
           <ScrollView autoHide>
-            <Channels tabId={tabId} />
+            <div className="rooms-container">
+              {
+                selectedTab !== cons.tabs.DIRECTS
+                  ? <Home spaceId={spaceId} />
+                  : <Directs />
+              }
+            </div>
           </ScrollView>
         </div>
       </div>
+      { systemState !== null && (
+        <div className="drawer__state">
+          <Text>{systemState.status}</Text>
+        </div>
+      )}
     </div>
   );
 }
 
-Drawer.propTypes = {
-  tabId: PropTypes.string.isRequired,
-};
-
 export default Drawer;

src/app/organisms/navigation/Drawer.scss

@@ -18,24 +18,60 @@
     border-left: 1px solid var(--bg-surface-border);
   }
 
+  & .header__title-wrapper .text {
+    font-weight: 500;
+  }
+
   &__content-wrapper {
     @extend .drawer-flexItem;
     @extend .drawer-flexBox;
   }
-}
 
-.breadcrumb__wrapper {
+  &__state {
-  display: none;
+    padding: var(--sp-extra-tight);
-  height: var(--header-height);
+    border-top: 1px solid var(--bg-surface-border);
+    display: flex;
+    justify-content: center;
+
+    & .text {
+      color: var(--tc-danger-high);
+    }
+  }
 }
-.channels__wrapper {
+.rooms__wrapper {
   @extend .drawer-flexItem;
+  position: relative;
 }
 
-.channels-container {
+.rooms-container {
   padding-bottom: var(--sp-extra-loose);
 
-  & > .channel-selector__button-wrapper:first-child {
+  &::before {
+    position: absolute;
+    top: 0;
+    
+    content: '';
+    display: inline-block;
+    width: 100%;
+    height: 8px;
+    background-image: linear-gradient(
+      to bottom,
+      var(--bg-surface-low),
+      var(--bg-surface-low-transparent));
+  }
+
+  & > .room-selector {
+    width: calc(100% - var(--sp-extra-tight));
+    margin-left: auto;
+
+    [dir=rtl] & {
+      margin-left: 0;
+      margin-right: auto;
+    }
+
+  }
+
+  & > .room-selector:first-child {
     margin-top: var(--sp-extra-tight);
   }
 

src/app/organisms/navigation/DrawerBreadcrumb.jsx

@@ -0,0 +1,131 @@
+import React, { useState, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import './DrawerBreadcrumb.scss';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import { selectSpace } from '../../../client/action/navigation';
+import navigation from '../../../client/state/navigation';
+import { abbreviateNumber } from '../../../util/common';
+
+import Text from '../../atoms/text/Text';
+import RawIcon from '../../atoms/system-icons/RawIcon';
+import Button from '../../atoms/button/Button';
+import ScrollView from '../../atoms/scroll/ScrollView';
+import NotificationBadge from '../../atoms/badge/NotificationBadge';
+
+import ChevronRightIC from '../../../../public/res/ic/outlined/chevron-right.svg';
+
+function DrawerBreadcrumb({ spaceId }) {
+  const [, forceUpdate] = useState({});
+  const scrollRef = useRef(null);
+  const { roomList, notifications } = initMatrix;
+  const mx = initMatrix.matrixClient;
+  const spacePath = navigation.selectedSpacePath;
+
+  function onNotiChanged(roomId, total, prevTotal) {
+    if (total === prevTotal) return;
+    if (navigation.selectedSpacePath.includes(roomId)) {
+      forceUpdate({});
+    }
+    if (navigation.selectedSpacePath[0] === cons.tabs.HOME) {
+      if (!roomList.isOrphan(roomId)) return;
+      if (roomList.directs.has(roomId)) return;
+      forceUpdate({});
+    }
+  }
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      if (scrollRef?.current === null) return;
+      scrollRef.current.scrollLeft = scrollRef.current.scrollWidth;
+    });
+    notifications.on(cons.events.notifications.NOTI_CHANGED, onNotiChanged);
+    return () => {
+      notifications.removeListener(cons.events.notifications.NOTI_CHANGED, onNotiChanged);
+    };
+  }, [spaceId]);
+
+  if (spacePath.length === 1) return null;
+
+  function getHomeNotiExcept(childId) {
+    const orphans = roomList.getOrphans();
+    const childIndex = orphans.indexOf(childId);
+    if (childId !== -1) orphans.splice(childIndex, 1);
+
+    let noti = null;
+
+    orphans.forEach((roomId) => {
+      if (!notifications.hasNoti(roomId)) return;
+      if (noti === null) noti = { total: 0, highlight: 0 };
+      const childNoti = notifications.getNoti(roomId);
+      noti.total += childNoti.total;
+      noti.highlight += childNoti.highlight;
+    });
+
+    return noti;
+  }
+
+  function getNotiExcept(roomId, childId) {
+    if (!notifications.hasNoti(roomId)) return null;
+
+    const noti = notifications.getNoti(roomId);
+    if (!notifications.hasNoti(childId)) return noti;
+    if (noti.from === null) return noti;
+    if (noti.from.has(childId) && noti.from.size === 1) return null;
+
+    const childNoti = notifications.getNoti(childId);
+
+    return {
+      total: noti.total - childNoti.total,
+      highlight: noti.highlight - childNoti.highlight,
+    };
+  }
+
+  return (
+    <div className="breadcrumb__wrapper">
+      <ScrollView ref={scrollRef} horizontal vertical={false} invisible>
+        <div className="breadcrumb">
+          {
+            spacePath.map((id, index) => {
+              const noti = (id !== cons.tabs.HOME && index < spacePath.length)
+                ? getNotiExcept(id, (index === spacePath.length - 1) ? null : spacePath[index + 1])
+                : getHomeNotiExcept((index === spacePath.length - 1) ? null : spacePath[index + 1]);
+
+              return (
+                <React.Fragment
+                  key={id}
+                >
+                  { index !== 0 && <RawIcon size="extra-small" src={ChevronRightIC} />}
+                  <Button
+                    className={index === spacePath.length - 1 ? 'breadcrumb__btn--selected' : ''}
+                    onClick={() => selectSpace(id)}
+                  >
+                    <Text variant="b2">{id === cons.tabs.HOME ? 'Home' : mx.getRoom(id).name}</Text>
+                    { noti !== null && (
+                      <NotificationBadge
+                        alert={noti.highlight !== 0}
+                        content={noti.total > 0 ? abbreviateNumber(noti.total) : null}
+                      />
+                    )}
+                  </Button>
+                </React.Fragment>
+              );
+            })
+          }
+          <div style={{ width: 'var(--sp-extra-tight)', height: '100%' }} />
+        </div>
+      </ScrollView>
+    </div>
+  );
+}
+
+DrawerBreadcrumb.defaultProps = {
+  spaceId: null,
+};
+
+DrawerBreadcrumb.propTypes = {
+  spaceId: PropTypes.string,
+};
+
+export default DrawerBreadcrumb;

src/app/organisms/navigation/DrawerBreadcrumb.scss

@@ -0,0 +1,68 @@
+.breadcrumb__wrapper {
+  height: var(--header-height);
+  position: relative;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  margin: 0 var(--sp-extra-tight);
+
+  &::before,
+  &::after {
+    flex-shrink: 0;
+    position: absolute;
+    right: 0;
+    z-index: 99;
+
+    content: '';
+    display: inline-block;
+    min-width: 8px;
+    width: 8px;
+    height: 100%;
+    background-image: linear-gradient(
+      to right,
+      var(--bg-surface-low-transparent),
+      var(--bg-surface-low)
+    );
+  }
+  &::before {
+    left: 0;
+    right: unset;
+    background-image: linear-gradient(
+      to left,
+      var(--bg-surface-low-transparent),
+      var(--bg-surface-low)
+    );
+  }
+
+  & > * {
+    flex-shrink: 0;
+  }
+
+  & > .btn-surface {
+    min-width: 0;
+    padding: var(--sp-extra-tight) 10px;
+    white-space: nowrap;
+    box-shadow: none;
+    & p {
+      max-width: 86px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    & .notification-badge {
+      margin-left: var(--sp-extra-tight);
+      [dir=rtl] & {
+        margin-left: 0;
+        margin-right: var(--sp-extra-tight);
+      }
+    }
+  }
+
+  &__btn--selected {
+    box-shadow: var(--bs-surface-border) !important;
+    background-color: var(--bg-surface);
+  }
+}

src/app/organisms/navigation/DrawerHeader.jsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import {
+  openPublicRooms, openCreateRoom, openInviteUser,
+} from '../../../client/action/navigation';
+import { createSpaceShortcut, deleteSpaceShortcut } from '../../../client/action/room';
+
+import Text from '../../atoms/text/Text';
+import Header, { TitleWrapper } from '../../atoms/header/Header';
+import IconButton from '../../atoms/button/IconButton';
+import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
+
+import PlusIC from '../../../../public/res/ic/outlined/plus.svg';
+import HashPlusIC from '../../../../public/res/ic/outlined/hash-plus.svg';
+import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
+import PinIC from '../../../../public/res/ic/outlined/pin.svg';
+import PinFilledIC from '../../../../public/res/ic/filled/pin.svg';
+
+function DrawerHeader({ selectedTab, spaceId }) {
+  const [, forceUpdate] = useState({});
+  const mx = initMatrix.matrixClient;
+  const tabName = selectedTab !== cons.tabs.DIRECTS ? 'Home' : 'Direct messages';
+
+  const room = mx.getRoom(spaceId);
+  const spaceName = selectedTab === cons.tabs.DIRECTS ? null : (room?.name || null);
+
+  return (
+    <Header>
+      <TitleWrapper>
+        <Text variant="s1">{spaceName || tabName}</Text>
+      </TitleWrapper>
+      {spaceName && (
+        <IconButton
+          size="extra-small"
+          variant="surface"
+          tooltip={initMatrix.roomList.spaceShortcut.has(spaceId) ? 'Unpin' : 'Pin to sidebar'}
+          src={initMatrix.roomList.spaceShortcut.has(spaceId) ? PinFilledIC : PinIC}
+          onClick={() => {
+            if (initMatrix.roomList.spaceShortcut.has(spaceId)) deleteSpaceShortcut(spaceId);
+            else createSpaceShortcut(spaceId);
+            forceUpdate({});
+          }}
+        />
+      )}
+      { selectedTab === cons.tabs.DIRECTS && <IconButton onClick={() => openInviteUser()} tooltip="Start DM" src={PlusIC} size="normal" /> }
+      { selectedTab !== cons.tabs.DIRECTS && !spaceName && (
+        <>
+          <ContextMenu
+            content={(hideMenu) => (
+              <>
+                <MenuHeader>Add room</MenuHeader>
+                <MenuItem
+                  iconSrc={HashPlusIC}
+                  onClick={() => { hideMenu(); openCreateRoom(); }}
+                >
+                  Create new room
+                </MenuItem>
+                <MenuItem
+                  iconSrc={HashSearchIC}
+                  onClick={() => { hideMenu(); openPublicRooms(); }}
+                >
+                  Add public room
+                </MenuItem>
+              </>
+            )}
+            render={(toggleMenu) => (<IconButton onClick={toggleMenu} tooltip="Add room" src={PlusIC} size="normal" />)}
+          />
+        </>
+      )}
+      {/* <IconButton onClick={() => ''} tooltip="Menu" src={VerticalMenuIC} size="normal" /> */}
+    </Header>
+  );
+}
+
+DrawerHeader.defaultProps = {
+  spaceId: null,
+};
+DrawerHeader.propTypes = {
+  selectedTab: PropTypes.string.isRequired,
+  spaceId: PropTypes.string,
+};
+
+export default DrawerHeader;

src/app/organisms/navigation/Home.jsx

@@ -0,0 +1,116 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import initMatrix from '../../../client/initMatrix';
+import cons from '../../../client/state/cons';
+import navigation from '../../../client/state/navigation';
+import { selectSpace, selectRoom } from '../../../client/action/navigation';
+import Postie from '../../../util/Postie';
+
+import Text from '../../atoms/text/Text';
+import Selector from './Selector';
+
+import { AtoZ } from './common';
+
+const drawerPostie = new Postie();
+function Home({ spaceId }) {
+  const [, forceUpdate] = useState({});
+  const { roomList, notifications } = initMatrix;
+  let spaceIds = [];
+  let roomIds = [];
+  let directIds = [];
+
+  const spaceChildIds = roomList.getSpaceChildren(spaceId);
+  if (spaceChildIds) {
+    spaceIds = spaceChildIds.filter((roomId) => roomList.spaces.has(roomId)).sort(AtoZ);
+    roomIds = spaceChildIds.filter((roomId) => roomList.rooms.has(roomId)).sort(AtoZ);
+    directIds = spaceChildIds.filter((roomId) => roomList.directs.has(roomId)).sort(AtoZ);
+  } else {
+    spaceIds = [...roomList.spaces]
+      .filter((roomId) => !roomList.roomIdToParents.has(roomId)).sort(AtoZ);
+    roomIds = [...roomList.rooms]
+      .filter((roomId) => !roomList.roomIdToParents.has(roomId)).sort(AtoZ);
+  }
+
+  function selectorChanged(selectedRoomId, prevSelectedRoomId) {
+    if (!drawerPostie.hasTopic('selector-change')) return;
+    const addresses = [];
+    if (drawerPostie.hasSubscriber('selector-change', selectedRoomId)) addresses.push(selectedRoomId);
+    if (drawerPostie.hasSubscriber('selector-change', prevSelectedRoomId)) addresses.push(prevSelectedRoomId);
+    if (addresses.length === 0) return;
+    drawerPostie.post('selector-change', addresses, selectedRoomId);
+  }
+  function notiChanged(roomId, total, prevTotal) {
+    if (total === prevTotal) return;
+    if (drawerPostie.hasTopicAndSubscriber('unread-change', roomId)) {
+      drawerPostie.post('unread-change', roomId);
+    }
+  }
+
+  function roomListUpdated() {
+    const { spaces, rooms, directs } = initMatrix.roomList;
+    if (!(
+      spaces.has(navigation.selectedRoomId)
+      || rooms.has(navigation.selectedRoomId)
+      || directs.has(navigation.selectedRoomId))
+    ) {
+      selectRoom(null);
+    }
+    forceUpdate({});
+  }
+
+  useEffect(() => {
+    roomList.on(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
+    navigation.on(cons.events.navigation.ROOM_SELECTED, selectorChanged);
+    notifications.on(cons.events.notifications.NOTI_CHANGED, notiChanged);
+    return () => {
+      roomList.removeListener(cons.events.roomList.ROOMLIST_UPDATED, roomListUpdated);
+      navigation.removeListener(cons.events.navigation.ROOM_SELECTED, selectorChanged);
+      notifications.removeListener(cons.events.notifications.NOTI_CHANGED, notiChanged);
+    };
+  }, []);
+
+  return (
+    <>
+      { spaceIds.length !== 0 && <Text className="cat-header" variant="b3">Spaces</Text> }
+      { spaceIds.map((id) => (
+        <Selector
+          key={id}
+          roomId={id}
+          isDM={false}
+          drawerPostie={drawerPostie}
+          onClick={() => selectSpace(id)}
+        />
+      ))}
+
+      { roomIds.length !== 0 && <Text className="cat-header" variant="b3">Rooms</Text> }
+      { roomIds.map((id) => (
+        <Selector
+          key={id}
+          roomId={id}
+          isDM={false}
+          drawerPostie={drawerPostie}
+          onClick={() => selectRoom(id)}
+        />
+      )) }
+
+      { directIds.length !== 0 && <Text className="cat-header" variant="b3">People</Text> }
+      { directIds.map((id) => (
+        <Selector
+          key={id}
+          roomId={id}
+          drawerPostie={drawerPostie}
+          onClick={() => selectRoom(id)}
+        />
+      ))}
+    </>
+  );
+}
+Home.defaultProps = {
+  spaceId: null,
+};
+Home.propTypes = {
+  spaceId: PropTypes.string,
+};
+
+export default Home;

src/app/organisms/navigation/Navigation.jsx

@@ -1,34 +1,14 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import './Navigation.scss';
 
-import cons from '../../../client/state/cons';
-import navigation from '../../../client/state/navigation';
-import { handleTabChange } from '../../../client/action/navigation';
-
 import SideBar from './SideBar';
 import Drawer from './Drawer';
 
 function Navigation() {
-  const [activeTab, changeActiveTab] = useState(navigation.getActiveTab());
-
-  function changeTab(tabId) {
-    handleTabChange(tabId);
-  }
-
-  useEffect(() => {
-    const handleTab = () => {
-      changeActiveTab(navigation.getActiveTab());
-    };
-    navigation.on(cons.events.navigation.TAB_CHANGED, handleTab);
-
-    return () => {
-      navigation.removeListener(cons.events.navigation.TAB_CHANGED, handleTab);
-    };
-  }, []);
   return (
     <div className="navigation">
-      <SideBar tabId={activeTab} changeTab={changeTab} />
+      <SideBar />
-      <Drawer tabId={activeTab} />
+      <Drawer />
     </div>
   );
 }

src/app/organisms/navigation/Selector.jsx

@@ -0,0 +1,116 @@
+/* eslint-disable react/prop-types */
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import initMatrix from '../../../client/initMatrix';
+import navigation from '../../../client/state/navigation';
+import { openRoomOptions } 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 HashIC from '../../../../public/res/ic/outlined/hash.svg';
+import HashLockIC from '../../../../public/res/ic/outlined/hash-lock.svg';
+import SpaceIC from '../../../../public/res/ic/outlined/space.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';
+import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
+
+function Selector({
+  roomId, isDM, drawerPostie, onClick,
+}) {
+  const mx = initMatrix.matrixClient;
+  const noti = initMatrix.notifications;
+  const room = mx.getRoom(roomId);
+  let imageSrc = room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
+  if (imageSrc === null) imageSrc = room.getAvatarUrl(mx.baseUrl, 24, 24, 'crop') || null;
+
+  const [isSelected, setIsSelected] = useState(navigation.selectedRoomId === roomId);
+  const [, forceUpdate] = useState({});
+
+  function selectorChanged(selectedRoomId) {
+    setIsSelected(selectedRoomId === roomId);
+  }
+  function changeNotificationBadge() {
+    forceUpdate({});
+  }
+
+  useEffect(() => {
+    drawerPostie.subscribe('selector-change', roomId, selectorChanged);
+    drawerPostie.subscribe('unread-change', roomId, changeNotificationBadge);
+    return () => {
+      drawerPostie.unsubscribe('selector-change', roomId);
+      drawerPostie.unsubscribe('unread-change', roomId);
+    };
+  }, []);
+
+  if (room.isSpaceRoom()) {
+    return (
+      <RoomSelector
+        key={roomId}
+        name={room.name}
+        roomId={roomId}
+        iconSrc={room.getJoinRule() === 'invite' ? SpaceLockIC : SpaceIC}
+        isUnread={noti.hasNoti(roomId)}
+        notificationCount={abbreviateNumber(noti.getTotalNoti(roomId))}
+        isAlert={noti.getHighlightNoti(roomId) !== 0}
+        onClick={onClick}
+        options={(
+          <IconButton
+            size="extra-small"
+            variant="surface"
+            tooltip={initMatrix.roomList.spaceShortcut.has(roomId) ? 'Unpin' : 'Pin to sidebar'}
+            tooltipPlacement="right"
+            src={initMatrix.roomList.spaceShortcut.has(roomId) ? PinFilledIC : PinIC}
+            onClick={() => {
+              if (initMatrix.roomList.spaceShortcut.has(roomId)) deleteSpaceShortcut(roomId);
+              else createSpaceShortcut(roomId);
+              forceUpdate({});
+            }}
+          />
+        )}
+      />
+    );
+  }
+
+  return (
+    <RoomSelector
+      key={roomId}
+      name={room.name}
+      roomId={roomId}
+      imageSrc={isDM ? imageSrc : null}
+      // eslint-disable-next-line no-nested-ternary
+      iconSrc={isDM ? null : room.getJoinRule() === 'invite' ? HashLockIC : HashIC}
+      isSelected={isSelected}
+      isUnread={noti.hasNoti(roomId)}
+      notificationCount={abbreviateNumber(noti.getTotalNoti(roomId))}
+      isAlert={noti.getHighlightNoti(roomId) !== 0}
+      onClick={onClick}
+      options={(
+        <IconButton
+          size="extra-small"
+          tooltip="Options"
+          tooltipPlacement="right"
+          src={VerticalMenuIC}
+          onClick={(e) => openRoomOptions(getEventCords(e), roomId)}
+        />
+      )}
+    />
+  );
+}
+
+Selector.defaultProps = {
+  isDM: true,
+};
+
+Selector.propTypes = {
+  roomId: PropTypes.string.isRequired,
+  isDM: PropTypes.bool,
+  drawerPostie: PropTypes.shape({}).isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+export default Selector;

src/app/organisms/navigation/SideBar.jsx

@@ -1,12 +1,15 @@
 import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import './SideBar.scss';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import colorMXID from '../../../util/colorMXID';
 import logout from '../../../client/action/logout';
-import { openInviteList, openPublicChannels, openSettings } from '../../../client/action/navigation';
+import {
+  selectTab, openInviteList, openPublicRooms, openSettings,
+} from '../../../client/action/navigation';
+import navigation from '../../../client/state/navigation';
+import { abbreviateNumber } from '../../../util/common';
 
 import ScrollView from '../../atoms/scroll/ScrollView';
 import SidebarAvatar from '../../molecules/sidebar-avatar/SidebarAvatar';
@@ -52,43 +55,128 @@ function ProfileAvatarMenu() {
   );
 }
 
-function SideBar({ tabId, changeTab }) {
+function SideBar() {
-  const totalInviteCount = () => initMatrix.roomList.inviteRooms.size
+  const { roomList, notifications } = initMatrix;
-    + initMatrix.roomList.inviteSpaces.size
+  const mx = initMatrix.matrixClient;
-    + initMatrix.roomList.inviteDirects.size;
+  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(() => {
-    initMatrix.roomList.on(
+    navigation.on(cons.events.navigation.TAB_SELECTED, onTabSelected);
-      cons.events.roomList.INVITELIST_UPDATED,
+    roomList.on(cons.events.roomList.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
-      onInviteListChange,
+    roomList.on(cons.events.roomList.INVITELIST_UPDATED, onInviteListChange);
-    );
+    notifications.on(cons.events.notifications.NOTI_CHANGED, onNotificationChanged);
 
     return () => {
-      initMatrix.roomList.removeListener(
+      navigation.removeListener(cons.events.navigation.TAB_SELECTED, onTabSelected);
-        cons.events.roomList.INVITELIST_UPDATED,
+      roomList.removeListener(cons.events.roomList.SPACE_SHORTCUT_UPDATED, onSpaceShortcutUpdated);
-        onInviteListChange,
+      roomList.removeListener(cons.events.roomList.INVITELIST_UPDATED, onInviteListChange);
-      );
+      notifications.removeListener(cons.events.notifications.NOTI_CHANGED, onNotificationChanged);
     };
   }, []);
 
+  function getHomeNoti() {
+    const orphans = roomList.getOrphans();
+    let noti = null;
+
+    orphans.forEach((roomId) => {
+      if (!notifications.hasNoti(roomId)) return;
+      if (noti === null) noti = { total: 0, highlight: 0 };
+      const childNoti = notifications.getNoti(roomId);
+      noti.total += childNoti.total;
+      noti.highlight += childNoti.highlight;
+    });
+
+    return noti;
+  }
+  function getDMsNoti() {
+    if (roomList.directs.size === 0) return null;
+    let noti = null;
+
+    [...roomList.directs].forEach((roomId) => {
+      if (!notifications.hasNoti(roomId)) return;
+      if (noti === null) noti = { total: 0, highlight: 0 };
+      const childNoti = notifications.getNoti(roomId);
+      noti.total += childNoti.total;
+      noti.highlight += childNoti.highlight;
+    });
+
+    return noti;
+  }
+
+  // TODO: bellow operations are heavy.
+  // refactor this component into more smaller components.
+  const dmsNoti = getDMsNoti();
+  const homeNoti = getHomeNoti();
+
   return (
     <div className="sidebar">
       <div className="sidebar__scrollable">
         <ScrollView invisible>
           <div className="scrollable-content">
             <div className="featured-container">
-              <SidebarAvatar active={tabId === 'channels'} onClick={() => changeTab('channels')} tooltip="Home" iconSrc={HomeIC} />
+              <SidebarAvatar
-              <SidebarAvatar active={tabId === 'dm'} onClick={() => changeTab('dm')} tooltip="People" iconSrc={UserIC} />
+                active={selectedTab === cons.tabs.HOME}
-              <SidebarAvatar onClick={() => openPublicChannels()} tooltip="Public channels" iconSrc={HashSearchIC} />
+                onClick={() => selectTab(cons.tabs.HOME)}
+                tooltip="Home"
+                iconSrc={HomeIC}
+                isUnread={homeNoti !== null}
+                notificationCount={homeNoti !== null ? abbreviateNumber(homeNoti.total) : 0}
+                isAlert={homeNoti?.highlight > 0}
+              />
+              <SidebarAvatar
+                active={selectedTab === cons.tabs.DIRECTS}
+                onClick={() => selectTab(cons.tabs.DIRECTS)}
+                tooltip="People"
+                iconSrc={UserIC}
+                isUnread={dmsNoti !== null}
+                notificationCount={dmsNoti !== null ? abbreviateNumber(dmsNoti.total) : 0}
+                isAlert={dmsNoti?.highlight > 0}
+              />
+              <SidebarAvatar onClick={() => openPublicRooms()} tooltip="Public rooms" iconSrc={HashSearchIC} />
             </div>
             <div className="sidebar-divider" />
-            <div className="space-container" />
+            <div className="space-container">
+              {
+                [...roomList.spaceShortcut].map((shortcut) => {
+                  const sRoomId = shortcut;
+                  const room = mx.getRoom(sRoomId);
+                  return (
+                    <SidebarAvatar
+                      active={selectedTab === sRoomId}
+                      key={sRoomId}
+                      tooltip={room.name}
+                      bgColor={colorMXID(room.roomId)}
+                      imageSrc={room.getAvatarUrl(initMatrix.matrixClient.baseUrl, 42, 42, 'crop') || null}
+                      text={room.name.slice(0, 1)}
+                      isUnread={notifications.hasNoti(sRoomId)}
+                      notificationCount={abbreviateNumber(notifications.getTotalNoti(sRoomId))}
+                      isAlert={notifications.getHighlightNoti(sRoomId) !== 0}
+                      onClick={() => selectTab(shortcut)}
+                    />
+                  );
+                })
+              }
+            </div>
           </div>
         </ScrollView>
       </div>
@@ -97,7 +185,9 @@ function SideBar({ tabId, changeTab }) {
         <div className="sticky-container">
           { totalInvites !== 0 && (
             <SidebarAvatar
-              notifyCount={totalInvites}
+              isUnread
+              notificationCount={totalInvites}
+              isAlert
               onClick={() => openInviteList()}
               tooltip="Invites"
               iconSrc={InviteIC}
@@ -110,9 +200,4 @@ function SideBar({ tabId, changeTab }) {
   );
 }
 
-SideBar.propTypes = {
-  tabId: PropTypes.string.isRequired,
-  changeTab: PropTypes.func.isRequired,
-};
-
 export default SideBar;

src/app/organisms/navigation/SideBar.scss

@@ -39,13 +39,12 @@
     height: 8px;
 
     background: transparent;
-    // background-image: linear-gradient(to top,  var(--bg-surface-low), transparent);
+    background-image: linear-gradient(
-    // It produce bug in safari
+      to top,
-    // To fix it, we have to set the color as a fully transparent version of that exact color. like:
+      var(--bg-surface-low),
-    // background-image: linear-gradient(to top,  rgb(255, 255, 255), rgba(255, 255, 255, 0));
+      var(--bg-surface-low-transparent));
-    // TODO: fix this bug while implementing spaces
     position: sticky;
-    bottom: 0;
+    bottom: -1px;
     left: 0;
   }
 }

src/app/organisms/navigation/common.js

@@ -0,0 +1,21 @@
+import initMatrix from '../../../client/initMatrix';
+
+function AtoZ(aId, bId) {
+  let aName = initMatrix.matrixClient.getRoom(aId).name;
+  let bName = initMatrix.matrixClient.getRoom(bId).name;
+
+  // remove "#" from the room name
+  // To ignore it in sorting
+  aName = aName.replaceAll('#', '');
+  bName = bName.replaceAll('#', '');
+
+  if (aName.toLowerCase() < bName.toLowerCase()) {
+    return -1;
+  }
+  if (aName.toLowerCase() > bName.toLowerCase()) {
+    return 1;
+  }
+  return 0;
+}
+
+export { AtoZ };

src/app/organisms/profile-editor/ProfileEditor.jsx

@@ -0,0 +1,89 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+
+import initMatrix from '../../../client/initMatrix';
+import colorMXID from '../../../util/colorMXID';
+
+import Button from '../../atoms/button/Button';
+import ImageUpload from '../../molecules/image-upload/ImageUpload';
+import Input from '../../atoms/input/Input';
+
+import './ProfileEditor.scss';
+
+// TODO Fix bug that prevents 'Save' button from enabling up until second changed.
+function ProfileEditor({
+  userId,
+}) {
+  const mx = initMatrix.matrixClient;
+  const displayNameRef = useRef(null);
+  const bgColor = colorMXID(userId);
+  const [avatarSrc, setAvatarSrc] = useState(mx.mxcUrlToHttp(mx.getUser(mx.getUserId()).avatarUrl, 80, 80, 'crop') || null);
+  const [disabled, setDisabled] = useState(true);
+
+  let username = mx.getUser(mx.getUserId()).displayName;
+
+  // Sets avatar URL and updates the avatar component in profile editor to reflect new upload
+  function handleAvatarUpload(url) {
+    if (url === null) {
+      if (confirm('Are you sure you want to remove avatar?')) {
+        mx.setAvatarUrl('');
+        setAvatarSrc(null);
+      }
+      return;
+    }
+    mx.setAvatarUrl(url);
+    setAvatarSrc(mx.mxcUrlToHttp(url, 80, 80, 'crop'));
+  }
+
+  function saveDisplayName() {
+    const newDisplayName = displayNameRef.current.value;
+    if (newDisplayName !== null && newDisplayName !== username) {
+      mx.setDisplayName(newDisplayName);
+      username = newDisplayName;
+      setDisabled(true);
+    }
+  }
+
+  function onDisplayNameInputChange() {
+    setDisabled(username === displayNameRef.current.value || displayNameRef.current.value == null);
+  }
+  function cancelDisplayNameChanges() {
+    displayNameRef.current.value = username;
+    onDisplayNameInputChange();
+  }
+
+  return (
+    <form
+      className="profile-editor"
+      onSubmit={(e) => { e.preventDefault(); saveDisplayName(); }}
+    >
+      <ImageUpload
+        text={username}
+        bgColor={bgColor}
+        imageSrc={avatarSrc}
+        onUpload={handleAvatarUpload}
+        onRequestRemove={() => handleAvatarUpload(null)}
+      />
+      <div className="profile-editor__input-wrapper">
+        <Input
+          label={`Display name of ${mx.getUserId()}`}
+          onChange={onDisplayNameInputChange}
+          value={mx.getUser(mx.getUserId()).displayName}
+          forwardRef={displayNameRef}
+        />
+        <Button variant="primary" type="submit" disabled={disabled}>Save</Button>
+        <Button onClick={cancelDisplayNameChanges}>Cancel</Button>
+      </div>
+    </form>
+  );
+}
+
+ProfileEditor.defaultProps = {
+  userId: null,
+};
+
+ProfileEditor.propTypes = {
+  userId: PropTypes.string,
+};
+
+export default ProfileEditor;

src/app/organisms/profile-editor/ProfileEditor.scss

@@ -0,0 +1,30 @@
+.profile-editor {
+  display: flex;
+  align-items: flex-start;
+}
+
+.profile-editor__input-wrapper {
+  flex: 1;
+  min-width: 0;
+  margin-top: 10px;
+  
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+
+  & > .input-container  {
+    flex: 1;
+  }
+  & > button {
+    height: 46px;
+    margin-top: var(--sp-normal);
+  }
+
+  & > * {
+    margin-left: var(--sp-normal);
+    [dir=rtl] & {
+      margin-left: 0;
+      margin-right: var(--sp-normal);
+    }
+  }
+}

src/app/organisms/public-rooms/PublicRooms.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import './PublicChannels.scss';
+import './PublicRooms.scss';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
@@ -13,7 +13,7 @@ import IconButton from '../../atoms/button/IconButton';
 import Spinner from '../../atoms/spinner/Spinner';
 import Input from '../../atoms/input/Input';
 import PopupWindow from '../../molecules/popup-window/PopupWindow';
-import ChannelTile from '../../molecules/channel-tile/ChannelTile';
+import RoomTile from '../../molecules/room-tile/RoomTile';
 
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 import HashSearchIC from '../../../../public/res/ic/outlined/hash-search.svg';
@@ -53,7 +53,7 @@ function TryJoinWithAlias({ alias, onRequestClose }) {
     } catch (e) {
       setStatus({
         isJoining: false,
-        error: `Unable to join ${alias}. Either channel is private or doesn't exist.`,
+        error: `Unable to join ${alias}. Either room is private or doesn't exist.`,
         roomId: null,
         tempRoomId: null,
       });
@@ -84,38 +84,38 @@ TryJoinWithAlias.propTypes = {
   onRequestClose: PropTypes.func.isRequired,
 };
 
-function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
+function PublicRooms({ isOpen, searchTerm, onRequestClose }) {
   const [isSearching, updateIsSearching] = useState(false);
   const [isViewMore, updateIsViewMore] = useState(false);
-  const [publicChannels, updatePublicChannels] = useState([]);
+  const [publicRooms, updatePublicRooms] = useState([]);
   const [nextBatch, updateNextBatch] = useState(undefined);
   const [searchQuery, updateSearchQuery] = useState({});
-  const [joiningChannels, updateJoiningChannels] = useState(new Set());
+  const [joiningRooms, updateJoiningRooms] = useState(new Set());
 
-  const channelNameRef = useRef(null);
+  const roomNameRef = useRef(null);
   const hsRef = useRef(null);
   const userId = initMatrix.matrixClient.getUserId();
 
-  async function searchChannels(viewMore) {
+  async function searchRooms(viewMore) {
-    let inputChannelName = channelNameRef?.current?.value || searchTerm;
+    let inputRoomName = roomNameRef?.current?.value || searchTerm;
     let isInputAlias = false;
-    if (typeof inputChannelName === 'string') {
+    if (typeof inputRoomName === 'string') {
-      isInputAlias = inputChannelName[0] === '#' && inputChannelName.indexOf(':') > 1;
+      isInputAlias = inputRoomName[0] === '#' && inputRoomName.indexOf(':') > 1;
     }
-    const hsFromAlias = (isInputAlias) ? inputChannelName.slice(inputChannelName.indexOf(':') + 1) : null;
+    const hsFromAlias = (isInputAlias) ? inputRoomName.slice(inputRoomName.indexOf(':') + 1) : null;
     let inputHs = hsFromAlias || hsRef?.current?.value;
 
     if (typeof inputHs !== 'string') inputHs = userId.slice(userId.indexOf(':') + 1);
-    if (typeof inputChannelName !== 'string') inputChannelName = '';
+    if (typeof inputRoomName !== 'string') inputRoomName = '';
 
     if (isSearching) return;
     if (viewMore !== true
-      && inputChannelName === searchQuery.name
+      && inputRoomName === searchQuery.name
       && inputHs === searchQuery.homeserver
     ) return;
 
     updateSearchQuery({
-      name: inputChannelName,
+      name: inputRoomName,
       homeserver: inputHs,
     });
     if (isViewMore !== viewMore) updateIsViewMore(viewMore);
@@ -128,26 +128,26 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
         since: viewMore ? nextBatch : undefined,
         include_all_networks: true,
         filter: {
-          generic_search_term: inputChannelName,
+          generic_search_term: inputRoomName,
         },
       });
 
-      const totalChannels = viewMore ? publicChannels.concat(result.chunk) : result.chunk;
+      const totalRooms = viewMore ? publicRooms.concat(result.chunk) : result.chunk;
-      updatePublicChannels(totalChannels);
+      updatePublicRooms(totalRooms);
       updateNextBatch(result.next_batch);
       updateIsSearching(false);
       updateIsViewMore(false);
-      if (totalChannels.length === 0) {
+      if (totalRooms.length === 0) {
         updateSearchQuery({
-          error: `No result found for "${inputChannelName}" on ${inputHs}`,
+          error: `No result found for "${inputRoomName}" on ${inputHs}`,
-          alias: isInputAlias ? inputChannelName : null,
+          alias: isInputAlias ? inputRoomName : null,
         });
       }
     } catch (e) {
-      updatePublicChannels([]);
+      updatePublicRooms([]);
       updateSearchQuery({
         error: 'Something went wrong!',
-        alias: isInputAlias ? inputChannelName : null,
+        alias: isInputAlias ? inputRoomName : null,
       });
       updateIsSearching(false);
       updateNextBatch(undefined);
@@ -156,13 +156,13 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
   }
 
   useEffect(() => {
-    if (isOpen) searchChannels();
+    if (isOpen) searchRooms();
   }, [isOpen]);
 
   function handleOnRoomAdded(roomId) {
-    if (joiningChannels.has(roomId)) {
+    if (joiningRooms.has(roomId)) {
-      joiningChannels.delete(roomId);
+      joiningRooms.delete(roomId);
-      updateJoiningChannels(new Set(Array.from(joiningChannels)));
+      updateJoiningRooms(new Set(Array.from(joiningRooms)));
     }
   }
   useEffect(() => {
@@ -170,36 +170,36 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
     return () => {
       initMatrix.roomList.removeListener(cons.events.roomList.ROOM_JOINED, handleOnRoomAdded);
     };
-  }, [joiningChannels]);
+  }, [joiningRooms]);
 
-  function handleViewChannel(roomId) {
+  function handleViewRoom(roomId) {
     selectRoom(roomId);
     onRequestClose();
   }
 
-  function joinChannel(roomIdOrAlias) {
+  function joinRoom(roomIdOrAlias) {
-    joiningChannels.add(roomIdOrAlias);
+    joiningRooms.add(roomIdOrAlias);
-    updateJoiningChannels(new Set(Array.from(joiningChannels)));
+    updateJoiningRooms(new Set(Array.from(joiningRooms)));
     roomActions.join(roomIdOrAlias, false);
   }
 
-  function renderChannelList(channels) {
+  function renderRoomList(rooms) {
-    return channels.map((channel) => {
+    return rooms.map((room) => {
-      const alias = typeof channel.canonical_alias === 'string' ? channel.canonical_alias : channel.room_id;
+      const alias = typeof room.canonical_alias === 'string' ? room.canonical_alias : room.room_id;
-      const name = typeof channel.name === 'string' ? channel.name : alias;
+      const name = typeof room.name === 'string' ? room.name : alias;
-      const isJoined = initMatrix.roomList.rooms.has(channel.room_id);
+      const isJoined = initMatrix.roomList.rooms.has(room.room_id);
       return (
-        <ChannelTile
+        <RoomTile
-          key={channel.room_id}
+          key={room.room_id}
-          avatarSrc={typeof channel.avatar_url === 'string' ? initMatrix.matrixClient.mxcUrlToHttp(channel.avatar_url, 42, 42, 'crop') : null}
+          avatarSrc={typeof room.avatar_url === 'string' ? initMatrix.matrixClient.mxcUrlToHttp(room.avatar_url, 42, 42, 'crop') : null}
           name={name}
           id={alias}
-          memberCount={channel.num_joined_members}
+          memberCount={room.num_joined_members}
-          desc={typeof channel.topic === 'string' ? channel.topic : null}
+          desc={typeof room.topic === 'string' ? room.topic : null}
           options={(
             <>
-              {isJoined && <Button onClick={() => handleViewChannel(channel.room_id)}>Open</Button>}
+              {isJoined && <Button onClick={() => handleViewRoom(room.room_id)}>Open</Button>}
-              {!isJoined && (joiningChannels.has(channel.room_id) ? <Spinner size="small" /> : <Button onClick={() => joinChannel(channel.aliases?.[0] || channel.room_id)} variant="primary">Join</Button>)}
+              {!isJoined && (joiningRooms.has(room.room_id) ? <Spinner size="small" /> : <Button onClick={() => joinRoom(room.aliases?.[0] || room.room_id)} variant="primary">Join</Button>)}
             </>
           )}
         />
@@ -210,26 +210,26 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
   return (
     <PopupWindow
       isOpen={isOpen}
-      title="Public channels"
+      title="Public rooms"
       contentOptions={<IconButton src={CrossIC} onClick={onRequestClose} tooltip="Close" />}
       onRequestClose={onRequestClose}
     >
-      <div className="public-channels">
+      <div className="public-rooms">
-        <form className="public-channels__form" onSubmit={(e) => { e.preventDefault(); searchChannels(); }}>
+        <form className="public-rooms__form" onSubmit={(e) => { e.preventDefault(); searchRooms(); }}>
-          <div className="public-channels__input-wrapper">
+          <div className="public-rooms__input-wrapper">
-            <Input value={searchTerm} forwardRef={channelNameRef} label="Channel name or alias" />
+            <Input value={searchTerm} forwardRef={roomNameRef} label="Room name or alias" />
             <Input forwardRef={hsRef} value={userId.slice(userId.indexOf(':') + 1)} label="Homeserver" required />
           </div>
           <Button disabled={isSearching} iconSrc={HashSearchIC} variant="primary" type="submit">Search</Button>
         </form>
-        <div className="public-channels__search-status">
+        <div className="public-rooms__search-status">
           {
             typeof searchQuery.name !== 'undefined' && isSearching && (
               searchQuery.name === ''
                 ? (
                   <div className="flex--center">
                     <Spinner size="small" />
-                    <Text variant="b2">{`Loading public channels from ${searchQuery.homeserver}...`}</Text>
+                    <Text variant="b2">{`Loading public rooms from ${searchQuery.homeserver}...`}</Text>
                   </div>
                 )
                 : (
@@ -243,28 +243,28 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
           {
             typeof searchQuery.name !== 'undefined' && !isSearching && (
               searchQuery.name === ''
-                ? <Text variant="b2">{`Public channels on ${searchQuery.homeserver}.`}</Text>
+                ? <Text variant="b2">{`Public rooms on ${searchQuery.homeserver}.`}</Text>
                 : <Text variant="b2">{`Search result for "${searchQuery.name}" on ${searchQuery.homeserver}.`}</Text>
             )
           }
           { searchQuery.error && (
             <>
-              <Text className="public-channels__search-error" variant="b2">{searchQuery.error}</Text>
+              <Text className="public-rooms__search-error" variant="b2">{searchQuery.error}</Text>
               {typeof searchQuery.alias === 'string' && (
                 <TryJoinWithAlias onRequestClose={onRequestClose} alias={searchQuery.alias} />
               )}
             </>
           )}
         </div>
-        { publicChannels.length !== 0 && (
+        { publicRooms.length !== 0 && (
-          <div className="public-channels__content">
+          <div className="public-rooms__content">
-            { renderChannelList(publicChannels) }
+            { renderRoomList(publicRooms) }
           </div>
         )}
-        { publicChannels.length !== 0 && publicChannels.length % SEARCH_LIMIT === 0 && (
+        { publicRooms.length !== 0 && publicRooms.length % SEARCH_LIMIT === 0 && (
-          <div className="public-channels__view-more">
+          <div className="public-rooms__view-more">
             { isViewMore !== true && (
-              <Button onClick={() => searchChannels(true)}>View more</Button>
+              <Button onClick={() => searchRooms(true)}>View more</Button>
             )}
             { isViewMore && <Spinner /> }
           </div>
@@ -274,14 +274,14 @@ function PublicChannels({ isOpen, searchTerm, onRequestClose }) {
   );
 }
 
-PublicChannels.defaultProps = {
+PublicRooms.defaultProps = {
   searchTerm: undefined,
 };
 
-PublicChannels.propTypes = {
+PublicRooms.propTypes = {
   isOpen: PropTypes.bool.isRequired,
   searchTerm: PropTypes.string,
   onRequestClose: PropTypes.func.isRequired,
 };
 
-export default PublicChannels;
+export default PublicRooms;

src/app/organisms/public-rooms/PublicRooms.scss

@@ -1,4 +1,4 @@
-.public-channels {
+.public-rooms {
   margin: 0 var(--sp-normal);
   margin-right: var(--sp-extra-tight);
   margin-top: var(--sp-extra-tight);
@@ -75,7 +75,7 @@
     }
   }
   
-  & .channel-tile {
+  & .room-tile {
     margin-top: var(--sp-normal);
     &__options {
       align-self: flex-end;

src/app/organisms/pw/Windows.jsx

@@ -4,17 +4,17 @@ import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
 
 import InviteList from '../invite-list/InviteList';
-import PublicChannels from '../public-channels/PublicChannels';
+import PublicRooms from '../public-rooms/PublicRooms';
-import CreateChannel from '../create-channel/CreateChannel';
+import CreateRoom from '../create-room/CreateRoom';
 import InviteUser from '../invite-user/InviteUser';
 import Settings from '../settings/Settings';
 
 function Windows() {
   const [isInviteList, changeInviteList] = useState(false);
-  const [publicChannels, changePublicChannels] = useState({
+  const [publicRooms, changePublicRooms] = useState({
     isOpen: false, searchTerm: undefined,
   });
-  const [isCreateChannel, changeCreateChannel] = useState(false);
+  const [isCreateRoom, changeCreateRoom] = useState(false);
   const [inviteUser, changeInviteUser] = useState({
     isOpen: false, roomId: undefined, term: undefined,
   });
@@ -23,14 +23,14 @@ function Windows() {
   function openInviteList() {
     changeInviteList(true);
   }
-  function openPublicChannels(searchTerm) {
+  function openPublicRooms(searchTerm) {
-    changePublicChannels({
+    changePublicRooms({
       isOpen: true,
       searchTerm,
     });
   }
-  function openCreateChannel() {
+  function openCreateRoom() {
-    changeCreateChannel(true);
+    changeCreateRoom(true);
   }
   function openInviteUser(roomId, searchTerm) {
     changeInviteUser({
@@ -45,14 +45,14 @@ function Windows() {
 
   useEffect(() => {
     navigation.on(cons.events.navigation.INVITE_LIST_OPENED, openInviteList);
-    navigation.on(cons.events.navigation.PUBLIC_CHANNELS_OPENED, openPublicChannels);
+    navigation.on(cons.events.navigation.PUBLIC_ROOMS_OPENED, openPublicRooms);
-    navigation.on(cons.events.navigation.CREATE_CHANNEL_OPENED, openCreateChannel);
+    navigation.on(cons.events.navigation.CREATE_ROOM_OPENED, openCreateRoom);
     navigation.on(cons.events.navigation.INVITE_USER_OPENED, openInviteUser);
     navigation.on(cons.events.navigation.SETTINGS_OPENED, openSettings);
     return () => {
       navigation.removeListener(cons.events.navigation.INVITE_LIST_OPENED, openInviteList);
-      navigation.removeListener(cons.events.navigation.PUBLIC_CHANNELS_OPENED, openPublicChannels);
+      navigation.removeListener(cons.events.navigation.PUBLIC_ROOMS_OPENED, openPublicRooms);
-      navigation.removeListener(cons.events.navigation.CREATE_CHANNEL_OPENED, openCreateChannel);
+      navigation.removeListener(cons.events.navigation.CREATE_ROOM_OPENED, openCreateRoom);
       navigation.removeListener(cons.events.navigation.INVITE_USER_OPENED, openInviteUser);
       navigation.removeListener(cons.events.navigation.SETTINGS_OPENED, openSettings);
     };
@@ -64,14 +64,14 @@ function Windows() {
         isOpen={isInviteList}
         onRequestClose={() => changeInviteList(false)}
       />
-      <PublicChannels
+      <PublicRooms
-        isOpen={publicChannels.isOpen}
+        isOpen={publicRooms.isOpen}
-        searchTerm={publicChannels.searchTerm}
+        searchTerm={publicRooms.searchTerm}
-        onRequestClose={() => changePublicChannels({ isOpen: false, searchTerm: undefined })}
+        onRequestClose={() => changePublicRooms({ isOpen: false, searchTerm: undefined })}
       />
-      <CreateChannel
+      <CreateRoom
-        isOpen={isCreateChannel}
+        isOpen={isCreateRoom}
-        onRequestClose={() => changeCreateChannel(false)}
+        onRequestClose={() => changeCreateRoom(false)}
       />
       <InviteUser
         isOpen={inviteUser.isOpen}

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

@@ -0,0 +1,229 @@
+import React, { useState, useEffect, useRef } from 'react';
+import './RoomOptions.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 ContextMenu, { MenuHeader, 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';
+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 handleInviteClick = () => openInviteUser(roomId);
+  const handleLeaveClick = () => {
+    if (confirm('Are you really want to leave this room?')) roomActions.leave(roomId);
+  };
+
+  function setNotif(nState, currentNState) {
+    if (nState === currentNState) return;
+    setRoomNotifPushRule(nState, roomId);
+    setNotifState(nState);
+  }
+
+  return (
+    <ContextMenu
+      afterToggle={afterRoomOptionsToggle}
+      maxWidth={298}
+      content={(toggleMenu) => (
+        <>
+          <MenuHeader>{`Options for ${initMatrix.matrixClient.getRoom(roomId)?.name}`}</MenuHeader>
+          <MenuItem
+            iconSrc={AddUserIC}
+            onClick={() => {
+              handleInviteClick(); toggleMenu();
+            }}
+          >
+            Invite
+          </MenuItem>
+          <MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={handleLeaveClick}>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

@@ -0,0 +1,20 @@
+.context-menu__item {
+  position: relative;
+}
+
+.context-menu__item .btn-positive::before {
+  content: '';
+  display: inline-block;
+  width: 3px;
+  height: 12px;
+  background: var(--bg-positive);
+  border-radius: 0 4px 4px 0;
+  position: absolute;
+  left: 0;
+
+  [dir=rtl] & {
+    left: unset;
+    right: 0;
+    border-radius: 4px 0 0 4px;
+  }
+}

src/app/organisms/room/PeopleDrawer.jsx

@@ -18,23 +18,15 @@ import PeopleSelector from '../../molecules/people-selector/PeopleSelector';
 import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
 
 function getPowerLabel(powerLevel) {
-  switch (powerLevel) {
+  if (powerLevel > 9000) return 'Goku';
-    case 100:
+  if (powerLevel > 100) return 'Founder';
-      return 'Admin';
+  if (powerLevel === 100) return 'Admin';
-    case 50:
+  if (powerLevel >= 50) return 'Mod';
-      return 'Mod';
+  return null;
-    default:
-      return null;
-  }
 }
-function compare(m1, m2) {
+function AtoZ(m1, m2) {
-  let aName = m1.name;
+  const aName = m1.name;
-  let bName = m2.name;
+  const bName = m2.name;
-
-  // remove "#" from the room name
-  // To ignore it in sorting
-  aName = aName.replaceAll('#', '');
-  bName = bName.replaceAll('#', '');
 
   if (aName.toLowerCase() < bName.toLowerCase()) {
     return -1;
@@ -45,25 +37,18 @@ function compare(m1, m2) {
   return 0;
 }
 function sortByPowerLevel(m1, m2) {
-  let pl1 = String(m1.powerLevel);
+  const pl1 = m1.powerLevel;
-  let pl2 = String(m2.powerLevel);
+  const pl2 = m2.powerLevel;
 
-  if (pl1 === '100') pl1 = '90.9';
+  if (pl1 > pl2) return -1;
-  if (pl2 === '100') pl2 = '90.9';
+  if (pl1 < pl2) return 1;
-
-  if (pl1.toLowerCase() > pl2.toLowerCase()) {
-    return -1;
-  }
-  if (pl1.toLowerCase() < pl2.toLowerCase()) {
-    return 1;
-  }
   return 0;
 }
 
 function PeopleDrawer({ roomId }) {
   const PER_PAGE_MEMBER = 50;
   const room = initMatrix.matrixClient.getRoom(roomId);
-  const totalMemberList = room.getJoinedMembers().sort(compare).sort(sortByPowerLevel);
+  const totalMemberList = room.getJoinedMembers().sort(AtoZ).sort(sortByPowerLevel);
   const [memberList, updateMemberList] = useState([]);
   let isRoomChanged = false;
 
@@ -75,7 +60,7 @@ function PeopleDrawer({ roomId }) {
     updateMemberList(totalMemberList.slice(0, PER_PAGE_MEMBER));
     room.loadMembersIfNeeded().then(() => {
       if (isRoomChanged) return;
-      const newTotalMemberList = room.getJoinedMembers().sort(compare).sort(sortByPowerLevel);
+      const newTotalMemberList = room.getJoinedMembers().sort(AtoZ).sort(sortByPowerLevel);
       updateMemberList(newTotalMemberList.slice(0, PER_PAGE_MEMBER));
     });
 

src/app/organisms/room/Room.jsx

@@ -1,14 +1,14 @@
 import React, { useState, useEffect } from 'react';
-import './Channel.scss';
+import './Room.scss';
 
 import cons from '../../../client/state/cons';
 import navigation from '../../../client/state/navigation';
 
 import Welcome from '../welcome/Welcome';
-import ChannelView from './ChannelView';
+import RoomView from './RoomView';
 import PeopleDrawer from './PeopleDrawer';
 
-function Channel() {
+function Room() {
   const [selectedRoomId, changeSelectedRoomId] = useState(null);
   const [isDrawerVisible, toggleDrawerVisiblity] = useState(navigation.isPeopleDrawerVisible);
   useEffect(() => {
@@ -30,11 +30,11 @@ function Channel() {
   if (selectedRoomId === null) return <Welcome />;
 
   return (
-    <div className="channel-container">
+    <div className="room-container">
-      <ChannelView roomId={selectedRoomId} />
+      <RoomView roomId={selectedRoomId} />
       { isDrawerVisible && <PeopleDrawer roomId={selectedRoomId} />}
     </div>
   );
 }
 
-export default Channel;
+export default Room;

src/app/organisms/room/Room.scss

@@ -1,4 +1,4 @@
-.channel-container {
+.room-container {
   display: flex;
   height: 100%;
 }

src/app/organisms/room/RoomView.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import './ChannelView.scss';
+import './RoomView.scss';
 
 import EventEmitter from 'events';
 
@@ -8,11 +8,11 @@ import RoomTimeline from '../../../client/state/RoomTimeline';
 
 import ScrollView from '../../atoms/scroll/ScrollView';
 
-import ChannelViewHeader from './ChannelViewHeader';
+import RoomViewHeader from './RoomViewHeader';
-import ChannelViewContent from './ChannelViewContent';
+import RoomViewContent from './RoomViewContent';
-import ChannelViewFloating from './ChannelViewFloating';
+import RoomViewFloating from './RoomViewFloating';
-import ChannelViewInput from './ChannelViewInput';
+import RoomViewInput from './RoomViewInput';
-import ChannelViewCmdBar from './ChannelViewCmdBar';
+import RoomViewCmdBar from './RoomViewCmdBar';
 
 import { scrollToBottom, isAtBottom, autoScrollToBottom } from './common';
 
@@ -22,7 +22,7 @@ let lastScrollTop = 0;
 let lastScrollHeight = 0;
 let isReachedBottom = true;
 let isReachedTop = false;
-function ChannelView({ roomId }) {
+function RoomView({ roomId }) {
   const [roomTimeline, updateRoomTimeline] = useState(null);
   const timelineSVRef = useRef(null);
 
@@ -101,13 +101,13 @@ function ChannelView({ roomId }) {
   }
 
   return (
-    <div className="channel-view">
+    <div className="room-view">
-      <ChannelViewHeader roomId={roomId} />
+      <RoomViewHeader roomId={roomId} />
-      <div className="channel-view__content-wrapper">
+      <div className="room-view__content-wrapper">
-        <div className="channel-view__scrollable">
+        <div className="room-view__scrollable">
           <ScrollView onScroll={onTimelineScroll} ref={timelineSVRef} autoHide>
             {roomTimeline !== null && (
-              <ChannelViewContent
+              <RoomViewContent
                 roomId={roomId}
                 roomTimeline={roomTimeline}
                 timelineScroll={timelineScroll}
@@ -116,7 +116,7 @@ function ChannelView({ roomId }) {
             )}
           </ScrollView>
           {roomTimeline !== null && (
-            <ChannelViewFloating
+            <RoomViewFloating
               roomId={roomId}
               roomTimeline={roomTimeline}
               timelineScroll={timelineScroll}
@@ -125,14 +125,14 @@ function ChannelView({ roomId }) {
           )}
         </div>
         {roomTimeline !== null && (
-          <div className="channel-view__sticky">
+          <div className="room-view__sticky">
-            <ChannelViewInput
+            <RoomViewInput
               roomId={roomId}
               roomTimeline={roomTimeline}
               timelineScroll={timelineScroll}
               viewEvent={viewEvent}
             />
-            <ChannelViewCmdBar
+            <RoomViewCmdBar
               roomId={roomId}
               roomTimeline={roomTimeline}
               viewEvent={viewEvent}
@@ -143,8 +143,8 @@ function ChannelView({ roomId }) {
     </div>
   );
 }
-ChannelView.propTypes = {
+RoomView.propTypes = {
   roomId: PropTypes.string.isRequired,
 };
 
-export default ChannelView;
+export default RoomView;

src/app/organisms/room/RoomView.scss

@@ -1,24 +1,24 @@
-.channel-view-flexBox {
+.room-view-flexBox {
   display: flex;
   flex-direction: column;
 }
-.channel-view-flexItem {
+.room-view-flexItem {
   flex: 1;
   min-height: 0;
   min-width: 0;
 }
 
-.channel-view {
+.room-view {
-  @extend .channel-view-flexItem;
+  @extend .room-view-flexItem;
-  @extend .channel-view-flexBox;
+  @extend .room-view-flexBox;
 
   &__content-wrapper {
-    @extend .channel-view-flexItem;
+    @extend .room-view-flexItem;
-    @extend .channel-view-flexBox;
+    @extend .room-view-flexBox;
   }
 
   &__scrollable {
-    @extend .channel-view-flexItem;
+    @extend .room-view-flexItem;
     position: relative;
   }
   

src/app/organisms/room/RoomViewCmdBar.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import './ChannelViewCmdBar.scss';
+import './RoomViewCmdBar.scss';
 import parse from 'html-react-parser';
 import twemoji from 'twemoji';
 
@@ -10,9 +10,10 @@ import cons from '../../../client/state/cons';
 import { toggleMarkdown } from '../../../client/action/settings';
 import * as roomActions from '../../../client/action/room';
 import {
+  selectTab,
   selectRoom,
-  openCreateChannel,
+  openCreateRoom,
-  openPublicChannels,
+  openPublicRooms,
   openInviteUser,
   openReadReceipts,
 } from '../../../client/action/navigation';
@@ -41,17 +42,17 @@ const commands = [{
   description: 'Start direct message with user. Example: /startDM/@johndoe.matrix.org',
   exe: (roomId, searchTerm) => openInviteUser(undefined, searchTerm),
 }, {
-  name: 'createChannel',
+  name: 'createRoom',
-  description: 'Create new channel',
+  description: 'Create new room',
-  exe: () => openCreateChannel(),
+  exe: () => openCreateRoom(),
 }, {
   name: 'join',
   isOptions: true,
-  description: 'Join channel with alias. Example: /join/#cinny:matrix.org',
+  description: 'Join room with alias. Example: /join/#cinny:matrix.org',
-  exe: (roomId, searchTerm) => openPublicChannels(searchTerm),
+  exe: (roomId, searchTerm) => openPublicRooms(searchTerm),
 }, {
   name: 'leave',
-  description: 'Leave current channel',
+  description: 'Leave current room',
   exe: (roomId) => roomActions.leave(roomId),
 }, {
   name: 'invite',
@@ -70,10 +71,10 @@ function CmdHelp() {
           <Text variant="b2">/command_name</Text>
           <MenuHeader>Go-to commands</MenuHeader>
           <Text variant="b2">{'>*space_name'}</Text>
-          <Text variant="b2">{'>#channel_name'}</Text>
+          <Text variant="b2">{'>#room_name'}</Text>
           <Text variant="b2">{'>@people_name'}</Text>
-          <MenuHeader>Autofill command</MenuHeader>
+          <MenuHeader>Autofill commands</MenuHeader>
-          <Text variant="b2">:emoji_name:</Text>
+          <Text variant="b2">:emoji_name</Text>
           <Text variant="b2">@name</Text>
         </>
       )}
@@ -174,7 +175,7 @@ function getCmdActivationMessage(prefix) {
   const cmd = {
     '/': () => genMessage('General command mode activated. ', 'Type command name for suggestions.'),
     '>*': () => genMessage('Go-to command mode activated. ', 'Type space name for suggestions.'),
-    '>#': () => genMessage('Go-to command mode activated. ', 'Type channel name for suggestions.'),
+    '>#': () => genMessage('Go-to command mode activated. ', 'Type room name for suggestions.'),
     '>@': () => genMessage('Go-to command mode activated. ', 'Type people name for suggestions.'),
     ':': () => genMessage('Emoji autofill command mode activated. ', 'Type emoji shortcut for suggestions.'),
     '@': () => genMessage('Name autofill command mode activated. ', 'Type name for suggestions.'),
@@ -273,7 +274,7 @@ function getCmdSuggestions({ prefix, option, suggestions }, fireCmd) {
   const cmd = {
     '/': (cmds) => getGenCmdSuggestions(prefix, cmds),
     '>*': (spaces) => getRoomsSuggestion(prefix, spaces),
-    '>#': (channels) => getRoomsSuggestion(prefix, channels),
+    '>#': (rooms) => getRoomsSuggestion(prefix, rooms),
     '>@': (peoples) => getRoomsSuggestion(prefix, peoples),
     ':': (emos) => getEmojiSuggestion(prefix, emos),
     '@': (members) => getNameSuggestion(prefix, members),
@@ -284,7 +285,7 @@ function getCmdSuggestions({ prefix, option, suggestions }, fireCmd) {
 const asyncSearch = new AsyncSearch();
 let cmdPrefix;
 let cmdOption;
-function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) {
+function RoomViewCmdBar({ roomId, roomTimeline, viewEvent }) {
   const [cmd, setCmd] = useState(null);
 
   function displaySuggestions(suggestions) {
@@ -357,7 +358,8 @@ function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) {
   }
   function fireCmd(myCmd) {
     if (myCmd.prefix.match(/^>[*#@]$/)) {
-      selectRoom(myCmd.result.roomId);
+      if (cmd.prefix === '>*') selectTab(myCmd.result.roomId);
+      else selectRoom(myCmd.result.roomId);
       viewEvent.emit('cmd_fired');
     }
     if (myCmd.prefix === '/') {
@@ -466,10 +468,10 @@ function ChannelViewCmdBar({ roomId, roomTimeline, viewEvent }) {
     </div>
   );
 }
-ChannelViewCmdBar.propTypes = {
+RoomViewCmdBar.propTypes = {
   roomId: PropTypes.string.isRequired,
   roomTimeline: PropTypes.shape({}).isRequired,
   viewEvent: PropTypes.shape({}).isRequired,
 };
 
-export default ChannelViewCmdBar;
+export default RoomViewCmdBar;

src/app/organisms/room/RoomViewContent.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React, { useState, useEffect, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
-import './ChannelViewContent.scss';
+import './RoomViewContent.scss';
 
 import dateFormat from 'dateformat';
 
@@ -10,7 +10,7 @@ import cons from '../../../client/state/cons';
 import { redactEvent, sendReaction } from '../../../client/action/roomTimeline';
 import { getUsername, getUsernameOfRoomMember, doesRoomHaveUnread } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
-import { diffMinutes, isNotInSameDay } from '../../../util/common';
+import { diffMinutes, isNotInSameDay, getEventCords } from '../../../util/common';
 import { openEmojiBoard, openReadReceipts } from '../../../client/action/navigation';
 
 import Divider from '../../atoms/divider/Divider';
@@ -29,7 +29,7 @@ import {
   PlaceholderMessage,
 } from '../../molecules/message/Message';
 import * as Media from '../../molecules/media/Media';
-import ChannelIntro from '../../molecules/channel-intro/ChannelIntro';
+import RoomIntro from '../../molecules/room-intro/RoomIntro';
 import TimelineChange from '../../molecules/message/TimelineChange';
 
 import ReplyArrowIC from '../../../../public/res/ic/outlined/reply-arrow.svg';
@@ -131,20 +131,20 @@ function genMediaContent(mE) {
   }
 }
 
-function genChannelIntro(mEvent, roomTimeline) {
+function genRoomIntro(mEvent, roomTimeline) {
   const mx = initMatrix.matrixClient;
   const roomTopic = roomTimeline.room.currentState.getStateEvents('m.room.topic')[0]?.getContent().topic;
   const isDM = initMatrix.roomList.directs.has(roomTimeline.roomId);
   let avatarSrc = roomTimeline.room.getAvatarUrl(mx.baseUrl, 80, 80, 'crop');
   avatarSrc = isDM ? roomTimeline.room.getAvatarFallbackMember()?.getAvatarUrl(mx.baseUrl, 80, 80, 'crop') : avatarSrc;
   return (
-    <ChannelIntro
+    <RoomIntro
-      key={mEvent ? mEvent.getId() : 'channel-intro'}
+      key={mEvent ? mEvent.getId() : 'room-intro'}
       roomId={roomTimeline.roomId}
       avatarSrc={avatarSrc}
       name={roomTimeline.room.name}
       heading={`Welcome to ${roomTimeline.room.name}`}
-      desc={`This is the beginning of ${roomTimeline.room.name} channel.${typeof roomTopic !== 'undefined' ? (` Topic: ${roomTopic}`) : ''}`}
+      desc={`This is the beginning of ${roomTimeline.room.name} room.${typeof roomTopic !== 'undefined' ? (` Topic: ${roomTopic}`) : ''}`}
       time={mEvent ? `Created at ${dateFormat(mEvent.getDate(), 'dd mmmm yyyy, hh:MM TT')}` : null}
     />
   );
@@ -176,19 +176,14 @@ function toggleEmoji(roomId, eventId, emojiKey, roomTimeline) {
 }
 
 function pickEmoji(e, roomId, eventId, roomTimeline) {
-  const boxInfo = e.target.getBoundingClientRect();
+  openEmojiBoard(getEventCords(e), (emoji) => {
-  openEmojiBoard({
-    x: boxInfo.x,
-    y: boxInfo.y,
-    detail: e.detail,
-  }, (emoji) => {
     toggleEmoji(roomId, eventId, emoji.unicode, roomTimeline);
     e.target.click();
   });
 }
 
 let wasAtBottom = true;
-function ChannelViewContent({
+function RoomViewContent({
   roomId, roomTimeline, timelineScroll, viewEvent,
 }) {
   const [isReachedTimelineEnd, setIsReachedTimelineEnd] = useState(false);
@@ -203,7 +198,9 @@ function ChannelViewContent({
   }
   function trySendingReadReceipt() {
     const { room, timeline } = roomTimeline;
-    if (doesRoomHaveUnread(room) && timeline.length !== 0) {
+    if (
+      (doesRoomHaveUnread(room) || initMatrix.notifications.hasNoti(roomId))
+      && timeline.length !== 0) {
       mx.sendReadReceipt(timeline[timeline.length - 1]);
     }
   }
@@ -517,7 +514,7 @@ function ChannelViewContent({
   }
 
   function renderMessage(mEvent) {
-    if (mEvent.getType() === 'm.room.create') return genChannelIntro(mEvent, roomTimeline);
+    if (mEvent.getType() === 'm.room.create') return genRoomIntro(mEvent, roomTimeline);
     if (
       mEvent.getType() !== 'm.room.message'
       && mEvent.getType() !== 'm.room.encrypted'
@@ -562,20 +559,20 @@ function ChannelViewContent({
   }
 
   return (
-    <div className="channel-view__content">
+    <div className="room-view__content">
       <div className="timeline__wrapper">
         { roomTimeline.timeline[0].getType() !== 'm.room.create' && !isReachedTimelineEnd && genPlaceholders() }
-        { roomTimeline.timeline[0].getType() !== 'm.room.create' && isReachedTimelineEnd && genChannelIntro(undefined, roomTimeline)}
+        { roomTimeline.timeline[0].getType() !== 'm.room.create' && isReachedTimelineEnd && genRoomIntro(undefined, roomTimeline)}
         { roomTimeline.timeline.map(renderMessage) }
       </div>
     </div>
   );
 }
-ChannelViewContent.propTypes = {
+RoomViewContent.propTypes = {
   roomId: PropTypes.string.isRequired,
   roomTimeline: PropTypes.shape({}).isRequired,
   timelineScroll: PropTypes.shape({}).isRequired,
   viewEvent: PropTypes.shape({}).isRequired,
 };
 
-export default ChannelViewContent;
+export default RoomViewContent;

src/app/organisms/room/RoomViewContent.scss

@@ -1,4 +1,4 @@
-.channel-view__content {
+.room-view__content {
   min-height: 100%;
   display: flex;
   flex-direction: column;

src/app/organisms/room/RoomViewFloating.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import './ChannelViewFloating.scss';
+import './RoomViewFloating.scss';
 
 import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
@@ -13,7 +13,7 @@ import ChevronBottomIC from '../../../../public/res/ic/outlined/chevron-bottom.s
 
 import { getUsersActionJsx } from './common';
 
-function ChannelViewFloating({
+function RoomViewFloating({
   roomId, roomTimeline, timelineScroll, viewEvent,
 }) {
   const [reachedBottom, setReachedBottom] = useState(true);
@@ -53,11 +53,11 @@ function ChannelViewFloating({
 
   return (
     <>
-      <div className={`channel-view__typing${isSomeoneTyping(typingMembers) ? ' channel-view__typing--open' : ''}`}>
+      <div className={`room-view__typing${isSomeoneTyping(typingMembers) ? ' room-view__typing--open' : ''}`}>
-        <div className="bouncingLoader"><div /></div>
+        <div className="bouncing-loader"><div /></div>
         <Text variant="b2">{getTypingMessage(typingMembers)}</Text>
       </div>
-      <div className={`channel-view__STB${reachedBottom ? '' : ' channel-view__STB--open'}`}>
+      <div className={`room-view__STB${reachedBottom ? '' : ' room-view__STB--open'}`}>
         <IconButton
           onClick={() => {
             timelineScroll.enableSmoothScroll();
@@ -71,7 +71,7 @@ function ChannelViewFloating({
     </>
   );
 }
-ChannelViewFloating.propTypes = {
+RoomViewFloating.propTypes = {
   roomId: PropTypes.string.isRequired,
   roomTimeline: PropTypes.shape({}).isRequired,
   timelineScroll: PropTypes.shape({
@@ -80,4 +80,4 @@ ChannelViewFloating.propTypes = {
   viewEvent: PropTypes.shape({}).isRequired,
 };
 
-export default ChannelViewFloating;
+export default RoomViewFloating;

src/app/organisms/room/RoomViewFloating.scss

@@ -1,4 +1,4 @@
-.channel-view {
+.room-view {
   &__typing {
     display: flex;
     padding: var(--sp-ultra-tight) var(--sp-normal);
@@ -9,10 +9,6 @@
       color: var(--tc-surface-high);
     }
 
-    &--open {
-      transform: translateY(-99%);
-    }
-
     & .text {
       flex: 1;
       min-width: 0;
@@ -22,37 +18,48 @@
       text-overflow: ellipsis;
       margin: 0 var(--sp-tight);
     }
+
+    &--open {
+      transform: translateY(-99%);
+      & .bouncing-loader {
+        & > *,
+        &::after,
+        &::before {
+          animation: bouncing-loader 0.6s infinite alternate;
+        }
+      }
+    }
   }
 
-  .bouncingLoader {
+  .bouncing-loader {
     transform: translateY(2px);
     margin: 0 calc(var(--sp-ultra-tight) / 2);
   }
-  .bouncingLoader > div,
+  .bouncing-loader > div,
-  .bouncingLoader:before,
+  .bouncing-loader::before,
-  .bouncingLoader:after {
+  .bouncing-loader::after {
     display: inline-block;
     width: 8px;
     height: 8px;
     background: var(--tc-surface-high);
     border-radius: 50%;
-    animation: bouncing-loader 0.6s infinite alternate;
   }
   
-  .bouncingLoader:before,
+  
-  .bouncingLoader:after {
+  .bouncing-loader::before,
+  .bouncing-loader::after {
     content: "";
   }
   
-  .bouncingLoader > div {
+  .bouncing-loader > div {
     margin: 0 4px;
   }
   
-  .bouncingLoader > div {
+  .bouncing-loader > div {
     animation-delay: 0.2s;
   }
   
-  .bouncingLoader:after {
+  .bouncing-loader::after {
     animation-delay: 0.4s;
   }
   

src/app/organisms/room/RoomViewHeader.jsx

@@ -2,22 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import initMatrix from '../../../client/initMatrix';
-import { togglePeopleDrawer, openInviteUser } from '../../../client/action/navigation';
+import { togglePeopleDrawer, openRoomOptions } from '../../../client/action/navigation';
-import * as roomActions from '../../../client/action/room';
 import colorMXID from '../../../util/colorMXID';
+import { getEventCords } from '../../../util/common';
 
 import Text from '../../atoms/text/Text';
 import IconButton from '../../atoms/button/IconButton';
 import Header, { TitleWrapper } from '../../atoms/header/Header';
 import Avatar from '../../atoms/avatar/Avatar';
-import ContextMenu, { MenuItem, MenuHeader } from '../../atoms/context-menu/ContextMenu';
 
 import UserIC from '../../../../public/res/ic/outlined/user.svg';
 import VerticalMenuIC from '../../../../public/res/ic/outlined/vertical-menu.svg';
-import LeaveArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
-import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
 
-function ChannelViewHeader({ roomId }) {
+function RoomViewHeader({ roomId }) {
   const mx = initMatrix.matrixClient;
   const isDM = initMatrix.roomList.directs.has(roomId);
   let avatarSrc = mx.getRoom(roomId).getAvatarUrl(mx.baseUrl, 36, 36, 'crop');
@@ -33,30 +30,16 @@ function ChannelViewHeader({ roomId }) {
         { typeof roomTopic !== 'undefined' && <p title={roomTopic} className="text text-b3">{roomTopic}</p>}
       </TitleWrapper>
       <IconButton onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />
-      <ContextMenu
+      <IconButton
-        placement="bottom"
+        onClick={(e) => openRoomOptions(getEventCords(e), roomId)}
-        content={(toogleMenu) => (
+        tooltip="Options"
-          <>
+        src={VerticalMenuIC}
-            <MenuHeader>Options</MenuHeader>
-            {/* <MenuBorder /> */}
-            <MenuItem
-              iconSrc={AddUserIC}
-              onClick={() => {
-                openInviteUser(roomId); toogleMenu();
-              }}
-            >
-              Invite
-            </MenuItem>
-            <MenuItem iconSrc={LeaveArrowIC} variant="danger" onClick={() => roomActions.leave(roomId)}>Leave</MenuItem>
-          </>
-        )}
-        render={(toggleMenu) => <IconButton onClick={toggleMenu} tooltip="Options" src={VerticalMenuIC} />}
       />
     </Header>
   );
 }
-ChannelViewHeader.propTypes = {
+RoomViewHeader.propTypes = {
   roomId: PropTypes.string.isRequired,
 };
 
-export default ChannelViewHeader;
+export default RoomViewHeader;

src/app/organisms/room/RoomViewInput.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import './ChannelViewInput.scss';
+import './RoomViewInput.scss';
 
 import TextareaAutosize from 'react-autosize-textarea';
 
@@ -9,7 +9,7 @@ import initMatrix from '../../../client/initMatrix';
 import cons from '../../../client/state/cons';
 import settings from '../../../client/state/settings';
 import { openEmojiBoard } from '../../../client/action/navigation';
-import { bytesToSize } from '../../../util/common';
+import { bytesToSize, getEventCords } from '../../../util/common';
 import { getUsername } from '../../../util/matrixUtil';
 import colorMXID from '../../../util/colorMXID';
 
@@ -33,7 +33,7 @@ const CMD_REGEX = /(\/|>[#*@]|:|@)(\S*)$/;
 let isTyping = false;
 let isCmdActivated = false;
 let cmdCursorPos = null;
-function ChannelViewInput({
+function RoomViewInput({
   roomId, roomTimeline, timelineScroll, viewEvent,
 }) {
   const [attachment, setAttachment] = useState(null);
@@ -285,6 +285,32 @@ function ChannelViewInput({
     }
   }
 
+  function handlePaste(e) {
+    if (e.clipboardData === false) {
+      return;
+    }
+
+    if (e.clipboardData.items === undefined) {
+      return;
+    }
+
+    for (let i = 0; i < e.clipboardData.items.length; i += 1) {
+      const item = e.clipboardData.items[i];
+      if (item.type.indexOf('image') !== -1) {
+        const image = item.getAsFile();
+        if (attachment === null) {
+          setAttachment(image);
+          if (image !== null) {
+            roomsInput.setAttachment(roomId, image);
+            return;
+          }
+        } else {
+          return;
+        }
+      }
+    }
+  }
+
   function addEmoji(emoji) {
     textAreaRef.current.value += emoji.unicode;
   }
@@ -304,17 +330,18 @@ function ChannelViewInput({
   function renderInputs() {
     return (
       <>
-        <div className={`channel-input__option-container${attachment === null ? '' : ' channel-attachment__option'}`}>
+        <div className={`room-input__option-container${attachment === null ? '' : ' room-attachment__option'}`}>
           <input onChange={uploadFileChange} style={{ display: 'none' }} ref={uploadInputRef} type="file" />
           <IconButton onClick={handleUploadClick} tooltip={attachment === null ? 'Upload' : 'Cancel'} src={CirclePlusIC} />
         </div>
-        <div ref={inputBaseRef} className="channel-input__input-container">
+        <div ref={inputBaseRef} className="room-input__input-container">
           {roomTimeline.isEncryptedRoom() && <RawIcon size="extra-small" src={ShieldIC} />}
           <ScrollView autoHide>
-            <Text className="channel-input__textarea-wrapper">
+            <Text className="room-input__textarea-wrapper">
               <TextareaAutosize
                 ref={textAreaRef}
                 onChange={handleMsgTyping}
+                onPaste={handlePaste}
                 onResize={() => timelineScroll.autoReachBottom()}
                 onKeyDown={handleKeyDown}
                 placeholder="Send a message..."
@@ -324,15 +351,13 @@ function ChannelViewInput({
           {isMarkdown && <RawIcon size="extra-small" src={MarkdownIC} />}
           <button ref={escBtnRef} tabIndex="-1" onClick={deactivateCmdAndEmit} className="btn-cmd-esc" type="button"><Text variant="b3">ESC</Text></button>
         </div>
-        <div ref={rightOptionsRef} className="channel-input__option-container">
+        <div ref={rightOptionsRef} className="room-input__option-container">
           <IconButton
             onClick={(e) => {
-              const boxInfo = e.target.getBoundingClientRect();
+              const cords = getEventCords(e);
-              openEmojiBoard({
+              cords.x += (document.dir === 'rtl' ? -80 : 80);
-                x: boxInfo.x + (document.dir === 'rtl' ? -80 : 80),
+              cords.y -= 250;
-                y: boxInfo.y - 250,
+              openEmojiBoard(cords, addEmoji);
-                detail: e.detail,
-              }, addEmoji);
             }}
             tooltip="Emoji"
             src={EmojiIC}
@@ -346,14 +371,14 @@ function ChannelViewInput({
   function attachFile() {
     const fileType = attachment.type.slice(0, attachment.type.indexOf('/'));
     return (
-      <div className="channel-attachment">
+      <div className="room-attachment">
-        <div className={`channel-attachment__preview${fileType !== 'image' ? ' channel-attachment__icon' : ''}`}>
+        <div className={`room-attachment__preview${fileType !== 'image' ? ' room-attachment__icon' : ''}`}>
           {fileType === 'image' && <img alt={attachment.name} src={URL.createObjectURL(attachment)} />}
           {fileType === 'video' && <RawIcon src={VLCIC} />}
           {fileType === 'audio' && <RawIcon src={VolumeFullIC} />}
           {fileType !== 'image' && fileType !== 'video' && fileType !== 'audio' && <RawIcon src={FileIC} />}
         </div>
-        <div className="channel-attachment__info">
+        <div className="room-attachment__info">
           <Text variant="b1">{attachment.name}</Text>
           <Text variant="b3"><span ref={uploadProgressRef}>{`size: ${bytesToSize(attachment.size)}`}</span></Text>
         </div>
@@ -363,7 +388,7 @@ function ChannelViewInput({
 
   function attachReply() {
     return (
-      <div className="channel-reply">
+      <div className="room-reply">
         <IconButton
           onClick={() => {
             roomsInput.cancelReplyTo(roomId);
@@ -387,17 +412,17 @@ function ChannelViewInput({
     <>
       { replyTo !== null && attachReply()}
       { attachment !== null && attachFile() }
-      <form className="channel-input" onSubmit={(e) => { e.preventDefault(); }}>
+      <form className="room-input" onSubmit={(e) => { e.preventDefault(); }}>
         {
           roomTimeline.room.isSpaceRoom()
-            ? <Text className="channel-input__space" variant="b1">Spaces are yet to be implemented</Text>
+            ? <Text className="room-input__space" variant="b1">Spaces are yet to be implemented</Text>
             : renderInputs()
         }
       </form>
     </>
   );
 }
-ChannelViewInput.propTypes = {
+RoomViewInput.propTypes = {
   roomId: PropTypes.string.isRequired,
   roomTimeline: PropTypes.shape({}).isRequired,
   timelineScroll: PropTypes.shape({
@@ -410,4 +435,4 @@ ChannelViewInput.propTypes = {
   viewEvent: PropTypes.shape({}).isRequired,
 };
 
-export default ChannelViewInput;
+export default RoomViewInput;

src/app/organisms/room/RoomViewInput.scss

@@ -1,4 +1,4 @@
-.channel-input {
+.room-input {
   padding: var(--sp-extra-tight) calc(var(--sp-normal) - 2px);
   display: flex;
   min-height: 48px;
@@ -30,6 +30,7 @@
       display: none;
       margin: 0 var(--sp-extra-tight);
       padding: var(--sp-ultra-tight) var(--sp-extra-tight);
+      background-color: var(--bg-surface);
       border-radius: calc(var(--bo-radius) / 2);
       box-shadow: var(--bs-surface-border);
       cursor: pointer;
@@ -72,7 +73,7 @@
   }
 }
 
-.channel-attachment {
+.room-attachment {
   --side-spacing: calc(var(--sp-normal) + var(--av-small) + var(--sp-tight));
   display: flex;
   align-items: center;
@@ -111,7 +112,7 @@
   }
 }
 
-.channel-reply {
+.room-reply {
   display: flex;
   align-items: center;
   background-color: var(--bg-surface-low);

src/app/organisms/room/common.jsx

@@ -9,7 +9,7 @@ function getTimelineJSXMessages() {
       return (
         <>
           <b>{user}</b>
-          {' joined the channel'}
+          {' joined the room'}
         </>
       );
     },
@@ -18,7 +18,7 @@ function getTimelineJSXMessages() {
       return (
         <>
           <b>{user}</b>
-          {' left the channel'}
+          {' left the room'}
           {reasonMsg}
         </>
       );

src/app/organisms/settings/Settings.jsx

@@ -16,6 +16,9 @@ import PopupWindow, { PWContentSelector } from '../../molecules/popup-window/Pop
 import SettingTile from '../../molecules/setting-tile/SettingTile';
 import ImportE2ERoomKeys from '../../molecules/import-e2e-room-keys/ImportE2ERoomKeys';
 
+import ProfileEditor from '../profile-editor/ProfileEditor';
+
+import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
 import SunIC from '../../../../public/res/ic/outlined/sun.svg';
 import LockIC from '../../../../public/res/ic/outlined/lock.svg';
 import InfoIC from '../../../../public/res/ic/outlined/info.svg';
@@ -23,6 +26,19 @@ import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 
 import CinnySVG from '../../../../public/res/svg/cinny.svg';
 
+function GeneralSection() {
+  return (
+    <div className="settings-content">
+      <SettingTile
+        title=""
+        content={(
+          <ProfileEditor userId={initMatrix.matrixClient.getUserId()} />
+        )}
+      />
+    </div>
+  );
+}
+
 function AppearanceSection() {
   const [, updateState] = useState({});
 
@@ -88,7 +104,7 @@ function AboutSection() {
         <div>
           <Text variant="h2">
             Cinny
-            <span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>v1.2.0</span>
+            <span className="text text-b3" style={{ margin: '0 var(--sp-extra-tight)' }}>v1.3.1</span>
           </Text>
           <Text>Yet another matrix client</Text>
 
@@ -104,6 +120,12 @@ function AboutSection() {
 
 function Settings({ isOpen, onRequestClose }) {
   const settingSections = [{
+    name: 'General',
+    iconSrc: SettingsIC,
+    render() {
+      return <GeneralSection />;
+    },
+  }, {
     name: 'Appearance',
     iconSrc: SunIC,
     render() {

src/app/templates/auth/Auth.jsx

@@ -8,12 +8,15 @@ import * as auth from '../../../client/action/auth';
 
 import Text from '../../atoms/text/Text';
 import Button from '../../atoms/button/Button';
+import IconButton from '../../atoms/button/IconButton';
 import Input from '../../atoms/input/Input';
 import Spinner from '../../atoms/spinner/Spinner';
+import ScrollView from '../../atoms/scroll/ScrollView';
 
+import EyeIC from '../../../../public/res/ic/outlined/eye.svg';
 import CinnySvg from '../../../../public/res/svg/cinny.svg';
 
-// This regex validates historical usernames, which don't satisy today's username requirements.
+// This regex validates historical usernames, which don't satisfy today's username requirements.
 // See https://matrix.org/docs/spec/appendices#id13 for more info.
 const LOCALPART_LOGIN_REGEX = /.*/;
 const LOCALPART_SIGNUP_REGEX = /^[a-z0-9_\-.=/]+$/;
@@ -206,24 +209,46 @@ function Auth({ type }) {
                 required
               />
             </div>
-            <Input
+            <div className="password__wrapper">
-              forwardRef={passwordRef}
+              <Input
-              onChange={(e) => validateOnChange(e, ((type === 'login') ? PASSWORD_REGEX : PASSWORD_STRENGHT_REGEX), BAD_PASSWORD_ERROR)}
+                forwardRef={passwordRef}
-              id="auth_password"
+                onChange={(e) => validateOnChange(e, ((type === 'login') ? PASSWORD_REGEX : PASSWORD_STRENGHT_REGEX), BAD_PASSWORD_ERROR)}
-              type="password"
+                id="auth_password"
-              label="Password"
+                type="password"
-              required
+                label="Password"
-            />
+                required
+              />
+              <IconButton
+                onClick={() => {
+                  if (passwordRef.current.type === 'password') {
+                    passwordRef.current.type = 'text';
+                  } else passwordRef.current.type = 'password';
+                }}
+                size="extra-small"
+                src={EyeIC}
+              />
+            </div>
             {type === 'register' && (
               <>
-                <Input
+                <div className="password__wrapper">
-                  forwardRef={confirmPasswordRef}
+                  <Input
-                  onChange={(e) => validateOnChange(e, new RegExp(`^(${passwordRef.current.value})$`), CONFIRM_PASSWORD_ERROR)}
+                    forwardRef={confirmPasswordRef}
-                  id="auth_confirmPassword"
+                    onChange={(e) => validateOnChange(e, new RegExp(`^(${passwordRef.current.value})$`), CONFIRM_PASSWORD_ERROR)}
-                  type="password"
+                    id="auth_confirmPassword"
-                  label="Confirm password"
+                    type="password"
-                  required
+                    label="Confirm password"
-                />
+                    required
+                  />
+                  <IconButton
+                    onClick={() => {
+                      if (confirmPasswordRef.current.type === 'password') {
+                        confirmPasswordRef.current.type = 'text';
+                      } else confirmPasswordRef.current.type = 'password';
+                    }}
+                    size="extra-small"
+                    src={EyeIC}
+                  />
+                </div>
                 <Input
                   forwardRef={emailRef}
                   onChange={(e) => validateOnChange(e, EMAIL_REGEX, BAD_EMAIL_ERROR)}
@@ -266,20 +291,22 @@ Auth.propTypes = {
 
 function StaticWrapper({ children }) {
   return (
-    <div className="auth__wrapper flex--center">
+    <ScrollView invisible>
-      <div className="auth-card">
+      <div className="auth__wrapper flex--center">
-        <div className="auth-card__interactive flex-v">
+        <div className="auth-card">
-          <div className="app-ident flex">
+          <div className="auth-card__interactive flex-v">
-            <img className="app-ident__logo noselect" src={CinnySvg} alt="Cinny logo" />
+            <div className="app-ident flex">
-            <div className="app-ident__text flex-v--center">
+              <img className="app-ident__logo noselect" src={CinnySvg} alt="Cinny logo" />
-              <Text variant="h2">Cinny</Text>
+              <div className="app-ident__text flex-v--center">
-              <Text variant="b2">Yet another matrix client</Text>
+                <Text variant="h2">Cinny</Text>
+                <Text variant="b2">Yet another matrix client</Text>
+              </div>
             </div>
+            { children }
           </div>
-          { children }
         </div>
       </div>
-    </div>
+    </ScrollView>
   );
 }
 

src/app/templates/auth/Auth.scss

@@ -122,6 +122,22 @@
   }
 }
 
+.password__wrapper {
+  margin-top: var(--sp-tight);
+  position: relative;
+
+  & .ic-btn {
+    position: absolute;
+    right: 6px;
+    bottom: 6px;
+    border-radius: calc(var(--bo-radius) / 2);
+    [dir=rtl] & {
+      left: 6px;
+      right: unset;
+    }
+  }
+}
+
 @media (max-width: 462px) {
   .auth__wrapper {
     padding: 0;

src/app/templates/client/Client.jsx

@@ -4,10 +4,11 @@ import './Client.scss';
 import Text from '../../atoms/text/Text';
 import Spinner from '../../atoms/spinner/Spinner';
 import Navigation from '../../organisms/navigation/Navigation';
-import Channel from '../../organisms/channel/Channel';
+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 initMatrix from '../../../client/initMatrix';
 
@@ -38,12 +39,13 @@ function Client() {
       <div className="navigation__wrapper">
         <Navigation />
       </div>
-      <div className="channel__wrapper">
+      <div className="room__wrapper">
-        <Channel />
+        <Room />
       </div>
       <Windows />
       <Dialogs />
       <EmojiBoardOpener />
+      <RoomOptions />
     </div>
   );
 }

src/app/templates/client/Client.scss

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

src/client/action/navigation.js

@@ -1,13 +1,20 @@
 import appDispatcher from '../dispatcher';
 import cons from '../state/cons';
 
-function handleTabChange(tabId) {
+function selectTab(tabId) {
   appDispatcher.dispatch({
-    type: cons.actions.navigation.CHANGE_TAB,
+    type: cons.actions.navigation.SELECT_TAB,
     tabId,
   });
 }
 
+function selectSpace(roomId) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.SELECT_SPACE,
+    roomId,
+  });
+}
+
 function selectRoom(roomId) {
   appDispatcher.dispatch({
     type: cons.actions.navigation.SELECT_ROOM,
@@ -27,16 +34,16 @@ function openInviteList() {
   });
 }
 
-function openPublicChannels(searchTerm) {
+function openPublicRooms(searchTerm) {
   appDispatcher.dispatch({
-    type: cons.actions.navigation.OPEN_PUBLIC_CHANNELS,
+    type: cons.actions.navigation.OPEN_PUBLIC_ROOMS,
     searchTerm,
   });
 }
 
-function openCreateChannel() {
+function openCreateRoom() {
   appDispatcher.dispatch({
-    type: cons.actions.navigation.OPEN_CREATE_CHANNEL,
+    type: cons.actions.navigation.OPEN_CREATE_ROOM,
   });
 }
 
@@ -70,15 +77,25 @@ function openReadReceipts(roomId, eventId) {
   });
 }
 
+function openRoomOptions(cords, roomId) {
+  appDispatcher.dispatch({
+    type: cons.actions.navigation.OPEN_ROOMOPTIONS,
+    cords,
+    roomId,
+  });
+}
+
 export {
-  handleTabChange,
+  selectTab,
+  selectSpace,
   selectRoom,
   togglePeopleDrawer,
   openInviteList,
-  openPublicChannels,
+  openPublicRooms,
-  openCreateChannel,
+  openCreateRoom,
   openInviteUser,
   openSettings,
   openEmojiBoard,
   openReadReceipts,
+  openRoomOptions,
 };

src/client/action/room.js

@@ -190,7 +190,22 @@ async function invite(roomId, userId) {
   }
 }
 
+function createSpaceShortcut(roomId) {
+  appDispatcher.dispatch({
+    type: cons.actions.room.CREATE_SPACE_SHORTCUT,
+    roomId,
+  });
+}
+
+function deleteSpaceShortcut(roomId) {
+  appDispatcher.dispatch({
+    type: cons.actions.room.DELETE_SPACE_SHORTCUT,
+    roomId,
+  });
+}
+
 export {
   join, leave,
   create, invite,
+  createSpaceShortcut, deleteSpaceShortcut,
 };

src/client/initMatrix.js

@@ -4,6 +4,7 @@ import * as sdk from 'matrix-js-sdk';
 import { secret } from './state/auth';
 import RoomList from './state/RoomList';
 import RoomsInput from './state/RoomsInput';
+import Notifications from './state/Notifications';
 
 global.Olm = require('@matrix-org/olm');
 
@@ -56,6 +57,7 @@ class InitMatrix extends EventEmitter {
         if (prevState === null) {
           this.roomList = new RoomList(this.matrixClient);
           this.roomsInput = new RoomsInput(this.matrixClient);
+          this.notifications = new Notifications(this.roomList);
           this.emit('init_loading_finished');
         }
       },

src/client/state/Notifications.js

@@ -0,0 +1,162 @@
+import EventEmitter from 'events';
+import cons from './cons';
+
+class Notifications extends EventEmitter {
+  constructor(roomList) {
+    super();
+
+    this.matrixClient = roomList.matrixClient;
+    this.roomList = roomList;
+
+    this.roomIdToNoti = new Map();
+
+    this._initNoti();
+    this._listenEvents();
+
+    // TODO:
+    window.notifications = this;
+  }
+
+  _initNoti() {
+    const addNoti = (roomId) => {
+      const room = this.matrixClient.getRoom(roomId);
+      if (this.doesRoomHaveUnread(room) === false) return;
+      const total = room.getUnreadNotificationCount('total');
+      const highlight = room.getUnreadNotificationCount('highlight');
+      const noti = this.getNoti(room.roomId);
+      this._setNoti(room.roomId, total - noti.total, highlight - noti.highlight);
+    };
+    [...this.roomList.rooms].forEach(addNoti);
+    [...this.roomList.directs].forEach(addNoti);
+  }
+
+  doesRoomHaveUnread(room) {
+    const userId = this.matrixClient.getUserId();
+    const readUpToId = room.getEventReadUpTo(userId);
+    const supportEvents = ['m.room.message', 'm.room.encrypted', 'm.sticker'];
+
+    if (room.timeline.length
+      && room.timeline[room.timeline.length - 1].sender
+      && room.timeline[room.timeline.length - 1].sender.userId === userId
+      && room.timeline[room.timeline.length - 1].getType() !== 'm.room.member') {
+      return false;
+    }
+
+    for (let i = room.timeline.length - 1; i >= 0; i -= 1) {
+      const event = room.timeline[i];
+
+      if (event.getId() === readUpToId) return false;
+
+      if (supportEvents.includes(event.getType())) {
+        return true;
+      }
+    }
+    return true;
+  }
+
+  getNoti(roomId) {
+    return this.roomIdToNoti.get(roomId) || { total: 0, highlight: 0, from: null };
+  }
+
+  getTotalNoti(roomId) {
+    const { total } = this.getNoti(roomId);
+    return total;
+  }
+
+  getHighlightNoti(roomId) {
+    const { highlight } = this.getNoti(roomId);
+    return highlight;
+  }
+
+  getFromNoti(roomId) {
+    const { from } = this.getNoti(roomId);
+    return from;
+  }
+
+  hasNoti(roomId) {
+    return this.roomIdToNoti.has(roomId);
+  }
+
+  _setNoti(roomId, total, highlight, childId) {
+    const prevTotal = this.roomIdToNoti.get(roomId)?.total ?? null;
+    const noti = this.getNoti(roomId);
+
+    noti.total += total;
+    noti.highlight += highlight;
+    if (childId) {
+      if (noti.from === null) noti.from = new Set();
+      noti.from.add(childId);
+    }
+
+    this.roomIdToNoti.set(roomId, noti);
+    this.emit(cons.events.notifications.NOTI_CHANGED, roomId, noti.total, prevTotal);
+
+    const parentIds = this.roomList.roomIdToParents.get(roomId);
+    if (typeof parentIds === 'undefined') return;
+    [...parentIds].forEach((parentId) => this._setNoti(parentId, total, highlight, roomId));
+  }
+
+  _deleteNoti(roomId, total, highlight, childId) {
+    if (this.roomIdToNoti.has(roomId) === false) return;
+
+    const noti = this.getNoti(roomId);
+    const prevTotal = noti.total;
+    noti.total -= total;
+    noti.highlight -= highlight;
+    if (childId && noti.from !== null) {
+      noti.from.delete(childId);
+    }
+    if (noti.from === null || noti.from.size === 0) {
+      this.roomIdToNoti.delete(roomId);
+      this.emit(cons.events.notifications.FULL_READ, roomId);
+      this.emit(cons.events.notifications.NOTI_CHANGED, roomId, null, prevTotal);
+    } else {
+      this.roomIdToNoti.set(roomId, noti);
+      this.emit(cons.events.notifications.NOTI_CHANGED, roomId, noti.total, prevTotal);
+    }
+
+    const parentIds = this.roomList.roomIdToParents.get(roomId);
+    if (typeof parentIds === 'undefined') return;
+    [...parentIds].forEach((parentId) => this._deleteNoti(parentId, total, highlight, roomId));
+  }
+
+  _listenEvents() {
+    this.matrixClient.on('Room.timeline', (mEvent, room) => {
+      const supportEvents = ['m.room.message', 'm.room.encrypted', 'm.sticker'];
+      if (!supportEvents.includes(mEvent.getType())) return;
+
+      const lastTimelineEvent = room.timeline[room.timeline.length - 1];
+      if (lastTimelineEvent.getId() !== mEvent.getId()) return;
+      if (mEvent.getSender() === this.matrixClient.getUserId()) return;
+
+      const total = room.getUnreadNotificationCount('total');
+      const highlight = room.getUnreadNotificationCount('highlight');
+
+      const noti = this.getNoti(room.roomId);
+      this._setNoti(room.roomId, total - noti.total, highlight - noti.highlight);
+    });
+
+    this.matrixClient.on('Room.receipt', (mEvent, room) => {
+      if (mEvent.getType() === 'm.receipt') {
+        const content = mEvent.getContent();
+        const readedEventId = Object.keys(content)[0];
+        const readerUserId = Object.keys(content[readedEventId]['m.read'])[0];
+        if (readerUserId !== this.matrixClient.getUserId()) return;
+
+        if (this.hasNoti(room.roomId)) {
+          const noti = this.getNoti(room.roomId);
+          this._deleteNoti(room.roomId, noti.total, noti.highlight);
+        }
+      }
+    });
+
+    this.matrixClient.on('Room.myMembership', (room, membership) => {
+      if (membership === 'leave' && this.hasNoti(room.roomId)) {
+        const noti = this.getNoti(room.roomId);
+        this._deleteNoti(room.roomId, noti.total, noti.highlight);
+      }
+    });
+  }
+}
+
+export default Notifications;

src/client/state/RoomList.js

@@ -2,12 +2,22 @@ import EventEmitter from 'events';
 import appDispatcher from '../dispatcher';
 import cons from './cons';
 
+function isMEventSpaceChild(mEvent) {
+  return mEvent.getType() === 'm.space.child' && Object.keys(mEvent.getContent()).length > 0;
+}
+
 class RoomList extends EventEmitter {
   constructor(matrixClient) {
     super();
     this.matrixClient = matrixClient;
     this.mDirects = this.getMDirects();
 
+    // Contains roomId to parent spaces roomId mapping of all spaces children.
+    // No matter if you have joined those children rooms or not.
+    this.roomIdToParents = new Map();
+
+    this.spaceShortcut = new Set();
+
     this.inviteDirects = new Set();
     this.inviteSpaces = new Set();
     this.inviteRooms = new Set();
@@ -19,18 +29,95 @@ class RoomList extends EventEmitter {
     this.processingRooms = new Map();
 
     this._populateRooms();
+    this._populateSpaceShortcut();
     this._listenEvents();
 
     appDispatcher.register(this.roomActions.bind(this));
   }
 
+  _updateSpaceShortcutData(shortcutList) {
+    const spaceContent = this.matrixClient.getAccountData(cons['in.cinny.spaces'])?.getContent() || {};
+    spaceContent.shortcut = shortcutList;
+    this.matrixClient.setAccountData(cons['in.cinny.spaces'], spaceContent);
+  }
+
+  isOrphan(roomId) {
+    return !this.roomIdToParents.has(roomId);
+  }
+
+  getOrphans() {
+    const rooms = [...this.spaces].concat([...this.rooms]);
+    return rooms.filter((roomId) => !this.roomIdToParents.has(roomId));
+  }
+
+  getSpaceChildren(roomId) {
+    const space = this.matrixClient.getRoom(roomId);
+    const mSpaceChild = space?.currentState.getStateEvents('m.space.child');
+    const children = mSpaceChild?.map((mEvent) => {
+      const childId = mEvent.event.state_key;
+      if (isMEventSpaceChild(mEvent)) return childId;
+      return null;
+    });
+    return children?.filter((childId) => childId !== null);
+  }
+
+  addToRoomIdToParents(roomId, parentRoomId) {
+    if (!this.roomIdToParents.has(roomId)) {
+      this.roomIdToParents.set(roomId, new Set());
+    }
+    const parents = this.roomIdToParents.get(roomId);
+    parents.add(parentRoomId);
+  }
+
+  removeFromRoomIdToParents(roomId, parentRoomId) {
+    if (!this.roomIdToParents.has(roomId)) return;
+    const parents = this.roomIdToParents.get(roomId);
+    parents.delete(parentRoomId);
+    if (parents.size === 0) this.roomIdToParents.delete(roomId);
+  }
+
+  getParentSpaces(roomId) {
+    let parentIds = this.roomIdToParents.get(roomId);
+    if (parentIds) {
+      [...parentIds].forEach((parentId) => {
+        parentIds = new Set([...parentIds, ...this.getParentSpaces(parentId)]);
+      });
+    }
+    return parentIds || new Set();
+  }
+
+  addToSpaces(roomId) {
+    this.spaces.add(roomId);
+    const allParentSpaces = this.getParentSpaces(roomId);
+
+    const spaceChildren = this.getSpaceChildren(roomId);
+    spaceChildren?.forEach((childRoomId) => {
+      if (allParentSpaces.has(childRoomId)) return;
+      this.addToRoomIdToParents(childRoomId, roomId);
+    });
+  }
+
+  deleteFromSpaces(roomId) {
+    this.spaces.delete(roomId);
+    const spaceChildren = this.getSpaceChildren(roomId);
+    spaceChildren?.forEach((childRoomId) => {
+      this.removeFromRoomIdToParents(childRoomId, roomId);
+    });
+
+    if (this.spaceShortcut.has(roomId)) {
+      // if delete space has shortcut remove it.
+      this.spaceShortcut.delete(roomId);
+      this._updateSpaceShortcutData([...this.spaceShortcut]);
+    }
+  }
+
   roomActions(action) {
     const addRoom = (roomId, isDM) => {
       const myRoom = this.matrixClient.getRoom(roomId);
       if (myRoom === null) return false;
 
       if (isDM) this.directs.add(roomId);
-      else if (myRoom.isSpaceRoom()) this.spaces.add(roomId);
+      else if (myRoom.isSpaceRoom()) this.addToSpaces(roomId);
       else this.rooms.add(roomId);
       return true;
     };
@@ -64,6 +151,18 @@ class RoomList extends EventEmitter {
           });
         }
       },
+      [cons.actions.room.CREATE_SPACE_SHORTCUT]: () => {
+        if (this.spaceShortcut.has(action.roomId)) return;
+        this.spaceShortcut.add(action.roomId);
+        this._updateSpaceShortcutData([...this.spaceShortcut]);
+        this.emit(cons.events.roomList.SPACE_SHORTCUT_UPDATED, action.roomId);
+      },
+      [cons.actions.room.DELETE_SPACE_SHORTCUT]: () => {
+        if (!this.spaceShortcut.has(action.roomId)) return;
+        this.spaceShortcut.delete(action.roomId);
+        this._updateSpaceShortcutData([...this.spaceShortcut]);
+        this.emit(cons.events.roomList.SPACE_SHORTCUT_UPDATED, action.roomId);
+      },
     };
     actions[action.type]?.();
   }
@@ -83,8 +182,24 @@ class RoomList extends EventEmitter {
     return mDirectsId;
   }
 
+  _populateSpaceShortcut() {
+    this.spaceShortcut.clear();
+    const spacesContent = this.matrixClient.getAccountData(cons['in.cinny.spaces'])?.getContent();
+
+    if (spacesContent && Array.isArray(spacesContent?.shortcut)) {
+      spacesContent.shortcut.forEach((shortcut) => {
+        if (this.spaces.has(shortcut)) this.spaceShortcut.add(shortcut);
+      });
+      if (spacesContent.shortcut.length !== this.spaceShortcut.size) {
+        // update shortcut list from account data if shortcut space doesn't exist.
+        this._updateSpaceShortcutData([...this.spaceShortcut]);
+      }
+    }
+  }
+
   _populateRooms() {
     this.directs.clear();
+    this.roomIdToParents.clear();
     this.spaces.clear();
     this.rooms.clear();
     this.inviteDirects.clear();
@@ -109,7 +224,7 @@ class RoomList extends EventEmitter {
       if (room.getMyMembership() !== 'join') return;
 
       if (this.mDirects.has(roomId)) this.directs.add(roomId);
-      else if (room.isSpaceRoom()) this.spaces.add(roomId);
+      else if (room.isSpaceRoom()) this.addToSpaces(roomId);
       else this.rooms.add(roomId);
     });
   }
@@ -123,6 +238,12 @@ class RoomList extends EventEmitter {
   _listenEvents() {
     // Update roomList when m.direct changes
     this.matrixClient.on('accountData', (event) => {
+      if (event.getType() === cons['in.cinny.spaces']) {
+        this._populateSpaceShortcut();
+        this.emit(cons.events.roomList.SPACE_SHORTCUT_UPDATED);
+        return;
+      }
+
       if (event.getType() !== 'm.direct') return;
 
       const latestMDirects = this.getMDirects();
@@ -155,17 +276,19 @@ class RoomList extends EventEmitter {
     this.matrixClient.on('Room.name', () => {
       this.emit(cons.events.roomList.ROOMLIST_UPDATED);
     });
-    this.matrixClient.on('Room.receipt', (event) => {
-      if (event.getType() === 'm.receipt') {
-        const evContent = event.getContent();
-        const userId = Object.keys(evContent[Object.keys(evContent)[0]]['m.read'])[0];
-        if (userId !== this.matrixClient.getUserId()) return;
-        this.emit(cons.events.roomList.ROOMLIST_UPDATED);
-      }
-    });
 
-    this.matrixClient.on('RoomState.events', (event) => {
+    this.matrixClient.on('RoomState.events', (mEvent) => {
-      if (event.getType() !== 'm.room.join_rules') return;
+      if (mEvent.getType() === 'm.space.child') {
+        const { event } = mEvent;
+        if (isMEventSpaceChild(mEvent)) {
+          const allParentSpaces = this.getParentSpaces(event.room_id);
+          if (allParentSpaces.has(event.state_key)) return;
+          this.addToRoomIdToParents(event.state_key, event.room_id);
+        } else this.removeFromRoomIdToParents(event.state_key, event.room_id);
+        this.emit(cons.events.roomList.ROOMLIST_UPDATED);
+        return;
+      }
+      if (mEvent.getType() !== 'm.room.join_rules') return;
 
       this.emit(cons.events.roomList.ROOMLIST_UPDATED);
     });
@@ -206,7 +329,7 @@ class RoomList extends EventEmitter {
           const procRoomInfo = this.processingRooms.get(roomId);
 
           if (procRoomInfo.isDM) this.directs.add(roomId);
-          else if (room.isSpaceRoom()) this.spaces.add(roomId);
+          else if (room.isSpaceRoom()) this.addToSpaces(roomId);
           else this.rooms.add(roomId);
 
           if (procRoomInfo.task === 'CREATE') this.emit(cons.events.roomList.ROOM_CREATED, roomId);
@@ -217,7 +340,7 @@ class RoomList extends EventEmitter {
           return;
         }
         if (room.isSpaceRoom()) {
-          this.spaces.add(roomId);
+          this.addToSpaces(roomId);
 
           this.emit(cons.events.roomList.ROOM_JOINED, roomId);
           this.emit(cons.events.roomList.ROOMLIST_UPDATED);
@@ -268,21 +391,17 @@ class RoomList extends EventEmitter {
       }
       // when room is not a DM add/remove it from rooms.
       if (membership === 'leave' || membership === 'kick' || membership === 'ban') {
-        if (room.isSpaceRoom()) this.spaces.delete(roomId);
+        if (room.isSpaceRoom()) this.deleteFromSpaces(roomId);
         else this.rooms.delete(roomId);
         this.emit(cons.events.roomList.ROOM_LEAVED, roomId);
       }
       if (membership === 'join') {
-        if (room.isSpaceRoom()) this.spaces.add(roomId);
+        if (room.isSpaceRoom()) this.addToSpaces(roomId);
         else this.rooms.add(roomId);
         this.emit(cons.events.roomList.ROOM_JOINED, roomId);
       }
       this.emit(cons.events.roomList.ROOMLIST_UPDATED);
     });
-
-    this.matrixClient.on('Room.timeline', () => {
-      this.emit(cons.events.roomList.ROOMLIST_UPDATED);
-    });
   }
 }
 export default RoomList;

src/client/state/cons.js

@@ -6,23 +6,38 @@ const cons = {
     BASE_URL: 'cinny_hs_base_url',
   },
   DEVICE_DISPLAY_NAME: 'Cinny Web',
+  'in.cinny.spaces': 'in.cinny.spaces',
+  tabs: {
+    HOME: 'home',
+    DIRECTS: 'dm',
+  },
+  notifs: {
+    DEFAULT: 'default',
+    ALL_MESSAGES: 'all_messages',
+    MENTIONS_AND_KEYWORDS: 'mentions_and_keywords',
+    MUTE: 'mute',
+  },
   actions: {
     navigation: {
-      CHANGE_TAB: 'CHANGE_TAB',
+      SELECT_TAB: 'SELECT_TAB',
+      SELECT_SPACE: 'SELECT_SPACE',
       SELECT_ROOM: 'SELECT_ROOM',
       TOGGLE_PEOPLE_DRAWER: 'TOGGLE_PEOPLE_DRAWER',
       OPEN_INVITE_LIST: 'OPEN_INVITE_LIST',
-      OPEN_PUBLIC_CHANNELS: 'OPEN_PUBLIC_CHANNELS',
+      OPEN_PUBLIC_ROOMS: 'OPEN_PUBLIC_ROOMS',
-      OPEN_CREATE_CHANNEL: 'OPEN_CREATE_CHANNEL',
+      OPEN_CREATE_ROOM: 'OPEN_CREATE_ROOM',
       OPEN_INVITE_USER: 'OPEN_INVITE_USER',
       OPEN_SETTINGS: 'OPEN_SETTINGS',
       OPEN_EMOJIBOARD: 'OPEN_EMOJIBOARD',
       OPEN_READRECEIPTS: 'OPEN_READRECEIPTS',
+      OPEN_ROOMOPTIONS: 'OPEN_ROOMOPTIONS',
     },
     room: {
       JOIN: 'JOIN',
       LEAVE: 'LEAVE',
       CREATE: 'CREATE',
+      CREATE_SPACE_SHORTCUT: 'CREATE_SPACE_SHORTCUT',
+      DELETE_SPACE_SHORTCUT: 'DELETE_SPACE_SHORTCUT',
       error: {
         CREATE: 'ERROR_CREATE',
       },
@@ -33,16 +48,18 @@ const cons = {
   },
   events: {
     navigation: {
-      TAB_CHANGED: 'TAB_CHANGED',
+      TAB_SELECTED: 'TAB_SELECTED',
+      SPACE_SELECTED: 'SPACE_SELECTED',
       ROOM_SELECTED: 'ROOM_SELECTED',
       PEOPLE_DRAWER_TOGGLED: 'PEOPLE_DRAWER_TOGGLED',
       INVITE_LIST_OPENED: 'INVITE_LIST_OPENED',
-      PUBLIC_CHANNELS_OPENED: 'PUBLIC_CHANNELS_OPENED',
+      PUBLIC_ROOMS_OPENED: 'PUBLIC_ROOMS_OPENED',
-      CREATE_CHANNEL_OPENED: 'CREATE_CHANNEL_OPENED',
+      CREATE_ROOM_OPENED: 'CREATE_ROOM_OPENED',
       INVITE_USER_OPENED: 'INVITE_USER_OPENED',
       SETTINGS_OPENED: 'SETTINGS_OPENED',
       EMOJIBOARD_OPENED: 'EMOJIBOARD_OPENED',
       READRECEIPTS_OPENED: 'READRECEIPTS_OPENED',
+      ROOMOPTIONS_OPENED: 'ROOMOPTIONS_OPENED',
     },
     roomList: {
       ROOMLIST_UPDATED: 'ROOMLIST_UPDATED',
@@ -50,6 +67,11 @@ const cons = {
       ROOM_JOINED: 'ROOM_JOINED',
       ROOM_LEAVED: 'ROOM_LEAVED',
       ROOM_CREATED: 'ROOM_CREATED',
+      SPACE_SHORTCUT_UPDATED: 'SPACE_SHORTCUT_UPDATED',
+    },
+    notifications: {
+      NOTI_CHANGED: 'NOTI_CHANGED',
+      FULL_READ: 'FULL_READ',
     },
     roomTimeline: {
       EVENT: 'EVENT',

src/client/state/navigation.js

@@ -6,28 +6,52 @@ class Navigation extends EventEmitter {
   constructor() {
     super();
 
-    this.activeTab = 'channels';
+    this.selectedTab = cons.tabs.HOME;
-    this.activeRoomId = null;
+    this.selectedSpaceId = null;
+    this.selectedSpacePath = [cons.tabs.HOME];
+
+    this.selectedRoomId = null;
     this.isPeopleDrawerVisible = true;
   }
 
-  getActiveTab() {
+  _setSpacePath(roomId) {
-    return this.activeTab;
+    if (roomId === null || roomId === cons.tabs.HOME) {
-  }
+      this.selectedSpacePath = [cons.tabs.HOME];
-
+      return;
-  getActiveRoomId() {
+    }
-    return this.activeRoomId;
+    if (this.selectedSpacePath.includes(roomId)) {
+      const spIndex = this.selectedSpacePath.indexOf(roomId);
+      this.selectedSpacePath = this.selectedSpacePath.slice(0, spIndex + 1);
+      return;
+    }
+    this.selectedSpacePath.push(roomId);
   }
 
   navigate(action) {
     const actions = {
-      [cons.actions.navigation.CHANGE_TAB]: () => {
+      [cons.actions.navigation.SELECT_TAB]: () => {
-        this.activeTab = action.tabId;
+        this.selectedTab = action.tabId;
-        this.emit(cons.events.navigation.TAB_CHANGED, this.activeTab);
+        if (this.selectedTab !== cons.tabs.DIRECTS) {
+          if (this.selectedTab === cons.tabs.HOME) {
+            this.selectedSpacePath = [cons.tabs.HOME];
+            this.selectedSpaceId = null;
+          } else {
+            this.selectedSpacePath = [this.selectedTab];
+            this.selectedSpaceId = this.selectedTab;
+          }
+          this.emit(cons.events.navigation.SPACE_SELECTED, this.selectedSpaceId);
+        } else this.selectedSpaceId = null;
+        this.emit(cons.events.navigation.TAB_SELECTED, this.selectedTab);
+      },
+      [cons.actions.navigation.SELECT_SPACE]: () => {
+        this._setSpacePath(action.roomId);
+        this.selectedSpaceId = action.roomId;
+        this.emit(cons.events.navigation.SPACE_SELECTED, this.selectedSpaceId);
       },
       [cons.actions.navigation.SELECT_ROOM]: () => {
-        this.activeRoomId = action.roomId;
+        const prevSelectedRoomId = this.selectedRoomId;
-        this.emit(cons.events.navigation.ROOM_SELECTED, this.activeRoomId);
+        this.selectedRoomId = action.roomId;
+        this.emit(cons.events.navigation.ROOM_SELECTED, this.selectedRoomId, prevSelectedRoomId);
       },
       [cons.actions.navigation.TOGGLE_PEOPLE_DRAWER]: () => {
         this.isPeopleDrawerVisible = !this.isPeopleDrawerVisible;
@@ -36,11 +60,11 @@ class Navigation extends EventEmitter {
       [cons.actions.navigation.OPEN_INVITE_LIST]: () => {
         this.emit(cons.events.navigation.INVITE_LIST_OPENED);
       },
-      [cons.actions.navigation.OPEN_PUBLIC_CHANNELS]: () => {
+      [cons.actions.navigation.OPEN_PUBLIC_ROOMS]: () => {
-        this.emit(cons.events.navigation.PUBLIC_CHANNELS_OPENED, action.searchTerm);
+        this.emit(cons.events.navigation.PUBLIC_ROOMS_OPENED, action.searchTerm);
       },
-      [cons.actions.navigation.OPEN_CREATE_CHANNEL]: () => {
+      [cons.actions.navigation.OPEN_CREATE_ROOM]: () => {
-        this.emit(cons.events.navigation.CREATE_CHANNEL_OPENED);
+        this.emit(cons.events.navigation.CREATE_ROOM_OPENED);
       },
       [cons.actions.navigation.OPEN_INVITE_USER]: () => {
         this.emit(cons.events.navigation.INVITE_USER_OPENED, action.roomId, action.searchTerm);
@@ -61,6 +85,13 @@ class Navigation extends EventEmitter {
           action.eventId,
         );
       },
+      [cons.actions.navigation.OPEN_ROOMOPTIONS]: () => {
+        this.emit(
+          cons.events.navigation.ROOMOPTIONS_OPENED,
+          action.cords,
+          action.roomId,
+        );
+      },
     };
     actions[action.type]?.();
   }

src/index.scss

@@ -4,7 +4,9 @@
 
   /* background color | --bg-[background type]: value */
   --bg-surface: #FFFFFF;
+  --bg-surface-transparent: #FFFFFF00;
   --bg-surface-low: #F6F6F6;
+  --bg-surface-low-transparent: #F6F6F600;
   --bg-surface-hover: rgba(0, 0, 0, 3%);
   --bg-surface-active: rgba(0, 0, 0, 5%);
   --bg-surface-border: rgba(0, 0, 0, 6%);
@@ -30,10 +32,12 @@
   --bg-danger-border: rgba(240, 71, 71, 20%);
 
   --bg-tooltip: #353535;
+  --bg-badge: #989898;
 
   /* text color | --tc-[background type]-[priority]: value */
   --tc-surface-high: #000000;
   --tc-surface-normal: rgba(0, 0, 0, 68%);
+  --tc-surface-normal-low: rgba(0, 0, 0, 60%);
   --tc-surface-low: rgba(0, 0, 0, 38%);
   
   --tc-primary-high: #ffffff;
@@ -53,8 +57,9 @@
   --tc-danger-low: rgba(240, 71, 71, 60%);
 
   --tc-code: #e62498;
-
+  --tc-link: hsl(213deg 76% 56%);
   --tc-tooltip: white;
+  --tc-badge: white;
 
 
   /* system icons | --ic-[background type]-[priority]: value */
@@ -155,35 +160,43 @@
 .silver-theme {
   /* background color | --bg-[background type]: value */
   --bg-surface: hsl(0, 0%, 95%);
+  --bg-surface-transparent: hsla(0, 0%, 95%, 0);
   --bg-surface-low: hsl(0, 0%, 91%);
+  --bg-surface-low-transparent: hsla(0, 0%, 91%, 0);
 }
 
 .dark-theme,
 .butter-theme {
   /* background color | --bg-[background type]: value */
-  --bg-surface: hsl(208, 8%, 20%);
+  --bg-surface: hsl(208, 8%, 16%);
-  --bg-surface-low: hsl(208, 8%, 16%);
+  --bg-surface-transparent: hsla(208, 8%, 16%, 0);
+  --bg-surface-low: hsl(208, 8%, 12%);
+  --bg-surface-low-transparent: hsla(208, 8%, 12%, 0);
   --bg-surface-hover: rgba(255, 255, 255, 3%);
   --bg-surface-active: rgba(255, 255, 255, 5%);
   --bg-surface-border: rgba(0, 0, 0, 20%);
 
-  --bg-primary: rgb(59, 119, 191);
+  --bg-primary: rgb(42, 98, 166);
-  --bg-primary-hover: rgba(59, 119, 191, 80%);
+  --bg-primary-hover: rgba(42, 98, 166, 80%);
-  --bg-primary-active: rgba(59, 119, 191, 70%);
+  --bg-primary-active: rgba(42, 98, 166, 70%);
-  --bg-primary-border: rgba(59, 119, 191, 38%);
+  --bg-primary-border: rgba(42, 98, 166, 38%);
 
   --bg-tooltip: #000;
+  --bg-badge: hsl(0, 0%, 75%);
 
   /* text color | --tc-[background type]-[priority]: value */
-  --tc-surface-high: rgba(255, 255, 255, 94%);
+  --tc-surface-high: rgba(255, 255, 255, 98%);
-  --tc-surface-normal: rgba(255, 255, 255, 74%);
+  --tc-surface-normal: rgba(255, 255, 255, 84%);
-  --tc-surface-low: rgba(255, 255, 255, 38%);
+  --tc-surface-normal-low: rgba(255, 255, 255, 60%);
+  --tc-surface-low: rgba(255, 255, 255, 48%);
   
   --tc-primary-high: #ffffff;
   --tc-primary-normal: rgba(255, 255, 255, 0.68);
   --tc-primary-low: rgba(255, 255, 255, 0.4);
 
   --tc-code: #e565b1;
+  --tc-link: hsl(213deg 94% 73%);
+  --tc-badge: black;
 
   /* system icons | --ic-[background type]-[priority]: value */
   --ic-surface-normal: rgba(255, 255, 255, 68%);
@@ -206,12 +219,17 @@
 .butter-theme {
   /* background color | --bg-[background type]: value */
   --bg-surface: hsl(64, 6%, 14%);
+  --bg-surface-transparent: hsla(64, 6%, 14%, 0);
   --bg-surface-low: hsl(64, 6%, 10%);
+  --bg-surface-low-transparent: hsla(64, 6%, 14%, 0);
+
+  --bg-badge: #c4c1ab;
 
   
   /* text color | --tc-[background type]-[priority]: value */
   --tc-surface-high: rgb(255, 251, 222, 94%);
   --tc-surface-normal: rgba(255, 251, 222, 74%);
+  --tc-surface-normal-low: rgba(255, 251, 222, 60%); 
   --tc-surface-low: rgba(255, 251, 222, 38%);
 
 
@@ -243,7 +261,7 @@ body {
   -webkit-tap-highlight-color: transparent;
 }
 a {
-  color: var(--bg-primary);
+  color: var(--tc-link);
   text-decoration: none;
 }
 b {

src/util/Postie.js

@@ -0,0 +1,91 @@
+class Postie {
+  constructor() {
+    this._topics = new Map();
+  }
+
+  _getSubscribers(topic) {
+    const subscribers = this._topics.get(topic);
+    if (typeof subscribers === 'undefined') {
+      throw new Error(`Topic:"${topic}" doesn't exist.`);
+    }
+    return subscribers;
+  }
+
+  _getSubscriber(topic, address) {
+    const subscribers = this._getSubscribers(topic);
+    const subscriber = subscribers.get(address);
+    if (typeof subscriber === 'undefined') {
+      throw new Error(`Subscriber on topic:"${topic}" at address:"${address}" doesn't exist.`);
+    }
+    return subscriber;
+  }
+
+  hasTopic(topic) {
+    return typeof this._topics.get(topic) !== 'undefined';
+  }
+
+  hasSubscriber(topic, address) {
+    const subscribers = this._getSubscribers(topic);
+    return typeof subscribers.get(address) !== 'undefined';
+  }
+
+  hasTopicAndSubscriber(topic, address) {
+    return (this.hasTopic(topic))
+      ? this.hasSubscriber(topic, address)
+      : false;
+  }
+
+  /**
+   * @param {string} topic - Subscription topic
+   * @param {string} address - Address of subscriber
+   * @param {function} inbox - The inbox function to receive post data
+   */
+  subscribe(topic, address, inbox) {
+    if (typeof inbox !== 'function') {
+      throw new TypeError('Inbox  must be a function.');
+    }
+
+    if (typeof this._topics.get(topic) === 'undefined') {
+      this._topics.set(topic, new Map());
+    }
+    const subscribers = this._topics.get(topic);
+    if (subscribers.get(address)) {
+      throw new Error(`Subscription on topic:"${topic}" at address:"${address}" already exist.`);
+    }
+    subscribers.set(address, inbox);
+  }
+
+  unsubscribe(topic, address) {
+    const subscribers = this._getSubscribers(topic);
+    if (subscribers.has(address)) {
+      subscribers.delete(address);
+    } else throw new Error(`Unable to unsubscribe. Subscriber on topic:"${topic}" at address:"${address}" doesn't exist`);
+    if (subscribers.size === 0) {
+      this._topics.delete(topic);
+    }
+  }
+
+  /**
+   * @param {string} topic - Subscription topic
+   * @param {string|string[]} address - Address of subscriber
+   * @param {*} data - Data to deliver to subscriber
+   */
+  post(topic, address, data) {
+    const sendPost = (subscriber, addr) => {
+      if (typeof subscriber === 'undefined') {
+        throw new Error(`Unable to post on topic:"${topic}" at address:"${addr}". Subscriber doesn't exist.`);
+      }
+      subscriber(data);
+    };
+    if (Array.isArray(address)) {
+      const subscribers = this._getSubscribers(topic);
+      address.forEach((addr) => {
+        sendPost(subscribers.get(addr), addr);
+      });
+      return;
+    }
+    sendPost(this._getSubscriber(topic, address), address);
+  }
+}
+
+export default Postie;

src/util/common.js

@@ -19,3 +19,17 @@ export function isNotInSameDay(dt2, dt1) {
     || dt2.getYear() !== dt1.getYear()
   );
 }
+
+export function getEventCords(ev) {
+  const boxInfo = ev.target.getBoundingClientRect();
+  return {
+    x: boxInfo.x,
+    y: boxInfo.y,
+    detail: ev.detail,
+  };
+}
+
+export function abbreviateNumber(number) {
+  if (number > 99) return '99+';
+  return number;
+}