Add help command

src/app/organisms/room/commands.jsx

@@ -1,8 +1,14 @@
+import React from 'react';
+import './commands.scss';
+
 import initMatrix from '../../../client/initMatrix';
 import { toggleMarkdown } from '../../../client/action/settings';
 import * as roomActions from '../../../client/action/room';
 import { hasDMWith, hasDevices } from '../../../util/matrixUtil';
-import { selectRoom } from '../../../client/action/navigation';
+import { selectRoom, openReusableDialog } from '../../../client/action/navigation';
+
+import Text from '../../atoms/text/Text';
+import SettingTile from '../../molecules/setting-tile/SettingTile';
 
 const MXID_REG = /^@\S+:\S+$/;
 const ROOM_ID_ALIAS_REG = /^(#|!)\S+:\S+$/;
@@ -27,6 +33,12 @@ const commands = {
       'm.text',
     ),
   },
+  help: {
+    name: 'help',
+    description: 'View all commands',
+    // eslint-disable-next-line no-use-before-define
+    exe: () => openHelpDialog(),
+  },
   markdown: {
     name: 'markdown',
     description: 'Toggle markdown for messages',
@@ -172,4 +184,21 @@ const commands = {
   },
 };
 
+function openHelpDialog() {
+  openReusableDialog(
+    <Text variant="s1" weight="medium">Commands</Text>,
+    () => (
+      <div className="commands-dialog">
+        {Object.keys(commands).map((cmdName) => (
+          <SettingTile
+            key={cmdName}
+            title={cmdName}
+            content={<Text variant="b3">{commands[cmdName].description}</Text>}
+          />
+        ))}
+      </div>
+    ),
+  );
+}
+
 export default commands;

src/app/organisms/room/commands.scss

@@ -0,0 +1,10 @@
+.commands-dialog {
+  & > * {
+    padding: var(--sp-tight) var(--sp-normal);
+    border-bottom: 1px solid var(--bg-surface-border);
+    &:last-child {
+      border-bottom: none;
+      margin-bottom: var(--sp-extra-loose);
+    }
+  }
+}