Keyboard shortcuts help sheet

src/app.jsx

@@ -23,6 +23,7 @@ import Compose from './components/compose';
 import ComposeButton from './components/compose-button';
 import Drafts from './components/drafts';
 import { ICONS } from './components/icon';
+import KeyboardShortcutsHelp from './components/keyboard-shortcuts-help';
 import Loader from './components/loader';
 import MediaModal from './components/media-modal';
 import Modal from './components/modal';
@@ -192,7 +193,8 @@ function App() {
     snapStates.showAccount ||
     snapStates.showDrafts ||
     snapStates.showMediaModal ||
-    snapStates.showShortcutsSettings;
+    snapStates.showShortcutsSettings ||
+    snapStates.showKeyboardShortcutsHelp;
   useEffect(() => {
     if (!showModal) focusDeck();
   }, [showModal]);
@@ -433,6 +435,7 @@ function App() {
       <NotificationService />
       <BackgroundService isLoggedIn={isLoggedIn} />
       <SearchCommand onClose={focusDeck} />
+      <KeyboardShortcutsHelp />
     </>
   );
 }

src/components/icon.jsx

@@ -97,6 +97,7 @@ export const ICONS = {
   clipboard: () => import('@iconify-icons/mingcute/clipboard-line'),
   'account-edit': () => import('@iconify-icons/mingcute/user-edit-line'),
   'account-warning': () => import('@iconify-icons/mingcute/user-warning-line'),
+  keyboard: () => import('@iconify-icons/mingcute/keyboard-line'),
 };
 
 function Icon({

src/components/keyboard-shortcuts-help.css

@@ -0,0 +1,22 @@
+#keyboard-shortcuts-help-container {
+  table {
+    th {
+      font-weight: normal;
+      text-align: start;
+      padding: 0.25em 0;
+      line-height: 1;
+    }
+    td {
+      padding: 0.25em 1em;
+    }
+  }
+
+  kbd {
+    border-radius: 4px;
+    display: inline-block;
+    padding: 0.3em;
+    line-height: 1;
+    border: 1px solid var(--outline-color);
+    background-color: var(--bg-faded-color);
+  }
+}

src/components/keyboard-shortcuts-help.jsx

@@ -0,0 +1,136 @@
+import './keyboard-shortcuts-help.css';
+
+import { useHotkeys } from 'react-hotkeys-hook';
+import { useSnapshot } from 'valtio';
+
+import states from '../utils/states';
+
+import Icon from './icon';
+import Modal from './modal';
+
+export default function KeyboardShortcutsHelp() {
+  const snapStates = useSnapshot(states);
+
+  function onClose() {
+    states.showKeyboardShortcutsHelp = false;
+  }
+
+  useHotkeys(
+    '?, shift+?',
+    (e) => {
+      console.log('help');
+      states.showKeyboardShortcutsHelp = true;
+    },
+    {
+      ignoreEventWhen: (e) => {
+        const hasModal = !!document.querySelector('#modal-container > *');
+        return hasModal;
+      },
+    },
+  );
+
+  const escRef = useHotkeys('esc', onClose, []);
+
+  return (
+    !!snapStates.showKeyboardShortcutsHelp && (
+      <Modal
+        class="light"
+        onClick={(e) => {
+          if (e.target === e.currentTarget) {
+            onClose();
+          }
+        }}
+      >
+        <div
+          id="keyboard-shortcuts-help-container"
+          class="sheet"
+          tabindex="-1"
+          ref={escRef}
+        >
+          <button type="button" class="sheet-close" onClick={onClose}>
+            <Icon icon="x" />
+          </button>
+          <header>
+            <h2>Keyboard shortcuts</h2>
+          </header>
+          <main>
+            <table>
+              {[
+                {
+                  action: 'Keyboard shortcuts help',
+                  keys: <kbd>?</kbd>,
+                },
+                {
+                  action: 'Next post',
+                  keys: <kbd>j</kbd>,
+                },
+                {
+                  action: 'Previous post',
+                  keys: <kbd>k</kbd>,
+                },
+                {
+                  action: 'Skip carousel to next post',
+                  keys: (
+                    <>
+                      <kbd>Shift</kbd> + <kbd>j</kbd>
+                    </>
+                  ),
+                },
+                {
+                  action: 'Skip carousel to previous post',
+                  keys: (
+                    <>
+                      <kbd>Shift</kbd> + <kbd>k</kbd>
+                    </>
+                  ),
+                },
+                {
+                  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: (
+                    <>
+                      <kbd>Enter</kbd> or <kbd>o</kbd>
+                    </>
+                  ),
+                },
+                {
+                  action: 'Toggle expanded/collapsed thread',
+                  keys: <kbd>x</kbd>,
+                },
+                {
+                  action: 'Close post or dialogs',
+                  keys: (
+                    <>
+                      <kbd>Esc</kbd> or <kbd>Backspace</kbd>
+                    </>
+                  ),
+                },
+              ].map(({ action, keys }) => (
+                <tr key={action}>
+                  <th>{action}</th>
+                  <td>{keys}</td>
+                </tr>
+              ))}
+            </table>
+          </main>
+        </div>
+      </Modal>
+    )
+  );
+}

src/components/nav-menu.jsx

@@ -204,6 +204,14 @@ function NavMenu(props) {
               >
                 <Icon icon="group" size="l" /> <span>Accounts&hellip;</span>
               </MenuItem>
+              <MenuItem
+                onClick={() => {
+                  states.showKeyboardShortcutsHelp = true;
+                }}
+              >
+                <Icon icon="keyboard" size="l" />{' '}
+                <span>Keyboard shortcuts</span>
+              </MenuItem>
               <MenuItem
                 onClick={() => {
                   states.showShortcutsSettings = true;

src/index.css

@@ -315,7 +315,8 @@ pre {
   tab-size: 2;
 }
 pre code,
-code {
+code,
+kbd {
   font-size: 90%;
   font-family: var(--monospace-font);
 }

src/utils/states.js

@@ -38,6 +38,7 @@ const states = proxy({
   showDrafts: false,
   showMediaModal: false,
   showShortcutsSettings: false,
+  showKeyboardShortcutsHelp: false,
   // Shortcuts
   shortcuts: store.account.get('shortcuts') ?? [],
   // Settings
@@ -137,6 +138,7 @@ export function hideAllModals() {
   states.showDrafts = false;
   states.showMediaModal = false;
   states.showShortcutsSettings = false;
+  states.showKeyboardShortcutsHelp = false;
 }
 
 export function statusKey(id, instance) {