diff --git a/frontend/src/components/users/KeyboardSettingsSection.tsx b/frontend/src/components/users/KeyboardSettingsSection.tsx
new file mode 100644
index 0000000..580dca3
--- /dev/null
+++ b/frontend/src/components/users/KeyboardSettingsSection.tsx
@@ -0,0 +1,173 @@
+import { useEffect, useMemo, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/use-toast'
+import {
+ formatKeyBinding,
+ isSpaceBinding,
+ keyBindingFromKeyboardEvent,
+ SHORTCUT_DEFINITIONS,
+ SHORTCUT_SCOPE_LABELS,
+} from '@/lib/keyboardShortcuts'
+import { useKeyboardShortcutSettings } from '@/lib/useKeyboardShortcuts'
+
+import type { ShortcutActionId } from '@/lib/keyboardShortcuts'
+import type { FC } from 'react'
+
+type Props = {
+ sectionClassName: string
+}
+
+
+const KeyboardSettingsSection: FC
= ({ sectionClassName }) => {
+ const {
+ conflictActionIds,
+ effectiveBindings,
+ keyboardSettings,
+ resetAllBindings,
+ resetBinding,
+ setBinding,
+ setEnabled,
+ } = useKeyboardShortcutSettings ()
+ const [capturingActionId, setCapturingActionId] =
+ useState (null)
+
+ useEffect (() => {
+ if (capturingActionId == null)
+ return
+
+ const onKeyDown = (event: KeyboardEvent) => {
+ if (event.isComposing || event.key === 'Process')
+ return
+
+ event.preventDefault ()
+ event.stopPropagation ()
+
+ if (event.key === 'Escape')
+ {
+ setCapturingActionId (null)
+ return
+ }
+
+ if (event.key === 'Backspace' || event.key === 'Delete')
+ {
+ setBinding (capturingActionId, null)
+ setCapturingActionId (null)
+ return
+ }
+
+ const binding = keyBindingFromKeyboardEvent (event)
+ if (binding == null)
+ return
+
+ if (isSpaceBinding (binding))
+ {
+ toast ({ title: 'Space は今は割り当てられません．' })
+ return
+ }
+
+ setBinding (capturingActionId, binding)
+ setCapturingActionId (null)
+ }
+
+ document.addEventListener ('keydown', onKeyDown, true)
+ return () => document.removeEventListener ('keydown', onKeyDown, true)
+ }, [capturingActionId, setBinding])
+
+ const rows = useMemo (() => SHORTCUT_DEFINITIONS.map (definition => ({
+ ...definition,
+ currentBinding: effectiveBindings[definition.id],
+ hasConflict: conflictActionIds.has (definition.id),
+ hasCustomBinding: Object.prototype.hasOwnProperty.call (
+ keyboardSettings.bindings ?? { },
+ definition.id,
+ ),
+ })), [conflictActionIds, effectiveBindings, keyboardSettings.bindings])
+
+ return (
+
+
+
+
キーボード
+
+ この設定は現在のブラウザに自動保存されます．競合した割当は保存されますが，
+ dispatcher では発火しません．
+
+
+
+
+
+ キー入力待ちです．Escape で取消し，Backspace / Delete で未割当にできます．
+
)}
+
+
+
+
+
+ | 操作 |
+ 適用範囲 |
+ 現在のキー |
+ 変更 |
+ 既定に戻す |
+ 競合状態 |
+
+
+
+ {rows.map (row => (
+
+ | {row.label} |
+ {SHORTCUT_SCOPE_LABELS[row.scope]} |
+
+ {formatKeyBinding (row.currentBinding)}
+ |
+
+
+ |
+
+
+ |
+
+ {row.hasConflict
+ ? 競合あり
+ : 'なし'}
+ |
+
))}
+
+
+
キーボード
-
-
- 現段階では一覧表示のみです．将来は action / key / scope / conflict を持つ
- key bind 設定へ拡張できる形にしています．
-
-
-
-
-
-
- | 操作 |
- キー |
- 適用範囲 |
- 競合 |
-
-
-
- {keyboardShortcutRows.map (row => (
-
- | {row.action} |
- {row.key} |
- {row.scope} |
- {row.conflict} |
-
))}
-
-
-