From cb5e8812e4c9465934c8215e684701ed549ade73 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 28 Aug 2022 16:35:18 +0530
Subject: [PATCH] Add help command

---
 .../room/{commands.js => commands.jsx}        | 31 ++++++++++++++++++-
 src/app/organisms/room/commands.scss          | 10 ++++++
 2 files changed, 40 insertions(+), 1 deletion(-)
 rename src/app/organisms/room/{commands.js => commands.jsx} (86%)
 create mode 100644 src/app/organisms/room/commands.scss

diff --git a/src/app/organisms/room/commands.js b/src/app/organisms/room/commands.jsx
similarity index 86%
rename from src/app/organisms/room/commands.js
rename to src/app/organisms/room/commands.jsx
index 57796a01..b9314722 100644
--- a/src/app/organisms/room/commands.js
+++ b/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;
diff --git a/src/app/organisms/room/commands.scss b/src/app/organisms/room/commands.scss
new file mode 100644
index 00000000..62839378
--- /dev/null
+++ b/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);
+    }
+  }
+}
\ No newline at end of file