From 3ce8b75e3f3fb5bc9bfc358f8a19b5e2169486f2 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 7 Sep 2023 16:17:52 +0800
Subject: [PATCH] Add shortcut help for focusing columns in multi-column mode

---
 src/components/keyboard-shortcuts-help.css |  4 +++
 src/components/keyboard-shortcuts-help.jsx | 42 +++++++++++++---------
 2 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/src/components/keyboard-shortcuts-help.css b/src/components/keyboard-shortcuts-help.css
index 1dbe69e..96bfdb9 100644
--- a/src/components/keyboard-shortcuts-help.css
+++ b/src/components/keyboard-shortcuts-help.css
@@ -1,5 +1,9 @@
 #keyboard-shortcuts-help-container {
   table {
+    tr > * {
+      border-top: 1px solid var(--outline-color);
+      vertical-align: middle;
+    }
     th {
       font-weight: normal;
       text-align: start;
diff --git a/src/components/keyboard-shortcuts-help.jsx b/src/components/keyboard-shortcuts-help.jsx
index 0d876d9..0bf76da 100644
--- a/src/components/keyboard-shortcuts-help.jsx
+++ b/src/components/keyboard-shortcuts-help.jsx
@@ -84,23 +84,6 @@ export default function KeyboardShortcutsHelp() {
                     </>
                   ),
                 },
-                {
-                  action: 'Search',
-                  keys: <kbd>/</kbd>,
-                },
-                {
-                  action: 'Compose new post',
-                  keys: <kbd>c</kbd>,
-                },
-                {
-                  action: 'Send post',
-                  keys: (
-                    <>
-                      <kbd>Ctrl</kbd> + <kbd>Enter</kbd> or <kbd>⌘</kbd> +{' '}
-                      <kbd>Enter</kbd>
-                    </>
-                  ),
-                },
                 {
                   action: 'Open post details',
                   keys: (
@@ -121,6 +104,31 @@ export default function KeyboardShortcutsHelp() {
                     </>
                   ),
                 },
+                {
+                  action: 'Focus column in multi-column mode',
+                  keys: (
+                    <>
+                      <kbd>1</kbd> to <kbd>9</kbd>
+                    </>
+                  ),
+                },
+                {
+                  action: 'Compose new post',
+                  keys: <kbd>c</kbd>,
+                },
+                {
+                  action: 'Send post',
+                  keys: (
+                    <>
+                      <kbd>Ctrl</kbd> + <kbd>Enter</kbd> or <kbd>⌘</kbd> +{' '}
+                      <kbd>Enter</kbd>
+                    </>
+                  ),
+                },
+                {
+                  action: 'Search',
+                  keys: <kbd>/</kbd>,
+                },
               ].map(({ action, keys }) => (
                 <tr key={action}>
                   <th>{action}</th>