feat: add shortcuts list

src/components/menu/items/index.ts

@@ -5,3 +5,4 @@ export { Notepad as NotepadItem } from './notepad';
 export { Source as SourceItem } from './source';
 export { Pomodoro as PomodoroItem } from './pomodoro';
 export { Presets as PresetsItem } from './presets';
+export { Shortcuts as ShortcutsItem } from './shortcuts';

src/components/menu/items/shortcuts.tsx

@@ -0,0 +1,18 @@
+import { MdKeyboardCommandKey } from 'react-icons/md/index';
+
+import { Item } from '../item';
+
+interface ShortcutsProps {
+  open: () => void;
+}
+
+export function Shortcuts({ open }: ShortcutsProps) {
+  return (
+    <Item
+      icon={<MdKeyboardCommandKey />}
+      label="Shortcuts"
+      shortcut="Shift + H"
+      onClick={open}
+    />
+  );
+}

src/components/menu/menu.tsx

@@ -12,10 +12,12 @@ import {
   SourceItem,
   PomodoroItem,
   PresetsItem,
+  ShortcutsItem,
 } from './items';
 import { Divider } from './divider';
 import { ShareLinkModal } from '@/components/modals/share-link';
 import { PresetsModal } from '@/components/modals/presets';
+import { ShortcutsModal } from '@/components/modals/shortcuts';
 import { Notepad, Pomodoro } from '@/components/toolbox';
 import { fade, mix, slideY } from '@/lib/motion';
 import { useSoundStore } from '@/store';
@@ -34,6 +36,7 @@ export function Menu() {
       pomodoro: false,
       presets: false,
       shareLink: false,
+      shortcuts: false,
     }),
     [],
   );
@@ -59,6 +62,7 @@ export function Menu() {
   useHotkeys('shift+n', () => open('notepad'));
   useHotkeys('shift+p', () => open('pomodoro'));
   useHotkeys('shift+alt+p', () => open('presets'));
+  useHotkeys('shift+h', () => open('shortcuts'));
   useHotkeys('shift+s', () => open('shareLink'), { enabled: !noSelected });
 
   useCloseListener(closeAll);
@@ -95,9 +99,14 @@ export function Menu() {
                     <PresetsItem open={() => open('presets')} />
                     <ShareItem open={() => open('shareLink')} />
                     <ShuffleItem />
+
                     <Divider />
                     <NotepadItem open={() => open('notepad')} />
                     <PomodoroItem open={() => open('pomodoro')} />
+
+                    <Divider />
+                    <ShortcutsItem open={() => open('shortcuts')} />
+
                     <Divider />
                     <DonateItem />
                     <SourceItem />
@@ -113,6 +122,10 @@ export function Menu() {
         show={modals.shareLink}
         onClose={() => close('shareLink')}
       />
+      <ShortcutsModal
+        show={modals.shortcuts}
+        onClose={() => close('shortcuts')}
+      />
       <PresetsModal show={modals.presets} onClose={() => close('presets')} />
       <Notepad show={modals.notepad} onClose={() => close('notepad')} />
       <Pomodoro

src/components/modals/shortcuts/index.ts

@@ -0,0 +1 @@
+export { ShortcutsModal } from './shortcuts';

src/components/modals/shortcuts/shortcuts.module.css

@@ -0,0 +1,47 @@
+.heading {
+  margin-bottom: 20px;
+  font-family: var(--font-heading);
+  font-size: var(--font-md);
+  font-weight: 600;
+}
+
+.shortcuts {
+  display: flex;
+  flex-direction: column;
+  row-gap: 12px;
+}
+
+.row {
+  display: flex;
+  column-gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+
+  & .label {
+    font-weight: 500;
+    color: var(--color-foreground-subtle);
+  }
+
+  & .divider {
+    flex-grow: 1;
+    height: 1px;
+    background-color: var(--color-neutral-200);
+  }
+
+  & .keys {
+    display: flex;
+    column-gap: 8px;
+    align-items: center;
+  }
+}
+
+.key {
+  padding: 6px 8px;
+  font-size: var(--font-2xsm);
+  background-color: var(--color-neutral-100);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 4px;
+  box-shadow:
+    inset 0 1px 1px var(--color-neutral-400),
+    inset 0 -2px 0 var(--color-neutral-50);
+}

src/components/modals/shortcuts/shortcuts.tsx

@@ -0,0 +1,83 @@
+import { Modal } from '@/components/modal';
+
+import styles from './shortcuts.module.css';
+
+interface ShortcutsModalProps {
+  onClose: () => void;
+  show: boolean;
+}
+
+export function ShortcutsModal({ onClose, show }: ShortcutsModalProps) {
+  const shortcuts = [
+    {
+      keys: ['Shift', 'H'],
+      label: 'Shortcuts List',
+    },
+    {
+      keys: ['Shift', 'Alt', 'P'],
+      label: 'Presets',
+    },
+    {
+      keys: ['Shift', 'S'],
+      label: 'Share Sounds',
+    },
+    {
+      keys: ['Shift', 'N'],
+      label: 'Notepad',
+    },
+    {
+      keys: ['Shift', 'P'],
+      label: 'Pomodoro Timer',
+    },
+    {
+      keys: ['Shift', 'Space'],
+      label: 'Toggle Play',
+    },
+    {
+      keys: ['Shift', 'R'],
+      label: 'Unselect All Sounds',
+    },
+  ];
+
+  return (
+    <Modal show={show} onClose={onClose}>
+      <h1 className={styles.heading}>Keyboard Shortcuts</h1>
+      <div className={styles.shortcuts}>
+        {shortcuts.map(shortcut => (
+          <Row
+            key={shortcut.label}
+            keys={shortcut.keys}
+            label={shortcut.label}
+          />
+        ))}
+      </div>
+    </Modal>
+  );
+}
+
+interface RowProps {
+  keys: Array<string>;
+  label: string;
+}
+
+function Row({ keys, label }: RowProps) {
+  return (
+    <div className={styles.row}>
+      <p className={styles.label}>{label}</p>
+      <div className={styles.divider} />
+      <div className={styles.keys}>
+        {keys.map(key => (
+          <Key key={`${label}-${key}`}>{key}</Key>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface KeyProps {
+  children: React.ReactNode;
+}
+
+function Key({ children }: KeyProps) {
+  return <div className={styles.key}>{children}</div>;
+}