#34

frontend/src/components/users/KeyboardSettingsSection.tsx

@@ -3,15 +3,18 @@ import { useEffect, useMemo, useState } from 'react'
 import { Button } from '@/components/ui/button'
 import { toast } from '@/components/ui/use-toast'
 import {
+    getConflictingShortcutActionIds,
     formatKeyBinding,
     isSpaceBinding,
     keyBindingFromKeyboardEvent,
     SHORTCUT_DEFINITIONS,
     SHORTCUT_SCOPE_LABELS,
 } from '@/lib/keyboardShortcuts'
+import { getEffectiveKeyBindings } from '@/lib/settings'
 import { useKeyboardShortcutSettings } from '@/lib/useKeyboardShortcuts'
 
 import type { ShortcutActionId } from '@/lib/keyboardShortcuts'
+import type { ClientKeyboardSettings } from '@/lib/settings'
 import type { FC } from 'react'
 
 type Props = {
@@ -21,16 +24,30 @@ type Props = {
 
 const KeyboardSettingsSection: FC<Props> = ({ sectionClassName }) => {
   const {
-    conflictActionIds,
-    effectiveBindings,
-    keyboardSettings,
-    resetAllBindings,
-    resetBinding,
-    setBinding,
-    setEnabled,
+      keyboardSettings,
+      saveKeyboardSettings,
   } = useKeyboardShortcutSettings ()
   const [capturingActionId, setCapturingActionId] =
       useState<ShortcutActionId | null> (null)
+  const [draftKeyboardSettings, setDraftKeyboardSettings] =
+      useState<ClientKeyboardSettings> (keyboardSettings)
+
+  useEffect (() => {
+    setDraftKeyboardSettings (keyboardSettings)
+  }, [keyboardSettings])
+
+  const draftEffectiveBindings = useMemo (
+      () => getEffectiveKeyBindings (draftKeyboardSettings.bindings),
+      [draftKeyboardSettings.bindings],
+  )
+  const draftConflictActionIds = useMemo (
+      () => getConflictingShortcutActionIds (draftEffectiveBindings),
+      [draftEffectiveBindings],
+  )
+  const hasUnsavedChanges = useMemo (
+      () => JSON.stringify (draftKeyboardSettings) !== JSON.stringify (keyboardSettings),
+      [draftKeyboardSettings, keyboardSettings],
+  )
 
   useEffect (() => {
     if (capturingActionId == null)
@@ -51,7 +68,13 @@ const KeyboardSettingsSection: FC<Props> = ({ sectionClassName }) => {
 
       if (event.key === 'Backspace' || event.key === 'Delete')
 	{
-	  setBinding (capturingActionId, null)
+	  setDraftKeyboardSettings (current => ({
+	      ...current,
+	      bindings: {
+		  ...(current.bindings ?? { }),
+		  [capturingActionId]: null,
+	      },
+	  }))
 	  setCapturingActionId (null)
 	  return
 	}
@@ -66,46 +89,92 @@ const KeyboardSettingsSection: FC<Props> = ({ sectionClassName }) => {
 	  return
 	}
 
-      setBinding (capturingActionId, binding)
+      setDraftKeyboardSettings (current => ({
+	  ...current,
+	  bindings: {
+	      ...(current.bindings ?? { }),
+	      [capturingActionId]: binding,
+	  },
+      }))
       setCapturingActionId (null)
     }
 
     document.addEventListener ('keydown', onKeyDown, true)
     return () => document.removeEventListener ('keydown', onKeyDown, true)
-  }, [capturingActionId, setBinding])
+  }, [capturingActionId])
 
   const rows = useMemo (() => SHORTCUT_DEFINITIONS.map (definition => ({
       ...definition,
-      currentBinding:    effectiveBindings[definition.id],
-      hasConflict:       conflictActionIds.has (definition.id),
+      currentBinding:    draftEffectiveBindings[definition.id],
+      hasConflict:       draftConflictActionIds.has (definition.id),
       hasCustomBinding:  Object.prototype.hasOwnProperty.call (
-	  keyboardSettings.bindings ?? { },
+	  draftKeyboardSettings.bindings ?? { },
 	  definition.id,
       ),
-  })), [conflictActionIds, effectiveBindings, keyboardSettings.bindings])
+  })), [
+      draftConflictActionIds,
+      draftEffectiveBindings,
+      draftKeyboardSettings.bindings,
+  ])
+
+  const handleSave = () => {
+    saveKeyboardSettings (draftKeyboardSettings)
+    toast ({ title: 'キーボード設定を保存しました' })
+  }
+
+  const handleDiscard = () => {
+    setDraftKeyboardSettings (keyboardSettings)
+    setCapturingActionId (null)
+  }
 
   return (
       <section className={sectionClassName}>
 	<div className="flex flex-wrap items-start justify-between gap-3">
 	  <div className="space-y-1">
 	    <h2 className="text-xl font-bold">キーボード</h2>
-	    <p className="text-sm text-muted-foreground">
-	      この設定は現在のブラウザに自動保存されます．競合した割当は保存されますが，
-	      dispatcher では発火しません．
-	    </p>
+	    {hasUnsavedChanges && (
+		<p className="text-sm text-amber-700 dark:text-amber-300">
+		  未保存の変更があります
+		</p>)}
 	  </div>
 
-	  <Button type="button" variant="outline" onClick={resetAllBindings}>
-	    すべて既定に戻す
-	  </Button>
+	  <div className="flex flex-wrap gap-2">
+	    <Button
+		type="button"
+		variant="outline"
+		onClick={() => {
+		  setDraftKeyboardSettings (current => ({
+		      ...current,
+		      bindings: { },
+		  }))
+		}}>
+	      すべて既定に戻す
+	    </Button>
+	    <Button
+		type="button"
+		variant="outline"
+		disabled={!(hasUnsavedChanges)}
+		onClick={handleDiscard}>
+	      変更を破棄
+	    </Button>
+	    <Button
+		type="button"
+		disabled={!(hasUnsavedChanges) || draftConflictActionIds.size > 0}
+		onClick={handleSave}>
+	      保存
+	    </Button>
+	  </div>
 	</div>
 
 	<label className="flex items-center gap-2 text-sm">
 	  <input
 	      type="checkbox"
-	      checked={keyboardSettings.enabled !== false}
+	      checked={draftKeyboardSettings.enabled !== false}
 	      onChange={event => {
-		setEnabled (event.target.checked)
+		setDraftKeyboardSettings (current => ({
+		    ...current,
+		    enabled: event.target.checked,
+		}))
 	      }}/>
 	  <span>キーボード・ショートカットを有効にする</span>
 	</label>
@@ -154,7 +223,16 @@ const KeyboardSettingsSection: FC<Props> = ({ sectionClassName }) => {
 			  variant="ghost"
 			  className="h-8"
 			  disabled={!(row.hasCustomBinding)}
-			  onClick={() => resetBinding (row.id)}>
+			  onClick={() => {
+			    setDraftKeyboardSettings (current => {
+				const nextBindings = { ...(current.bindings ?? { }) }
+				delete nextBindings[row.id]
+				return {
+				    ...current,
+				    bindings: nextBindings,
+				}
+			    })
+			  }}>
 			既定に戻す
 		      </Button>
 		    </td>

frontend/src/components/users/ShortcutHelpDialog.tsx

@@ -0,0 +1,77 @@
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog'
+import {
+    formatKeyBinding,
+    SHORTCUT_DEFINITIONS,
+    SHORTCUT_SCOPE_LABELS,
+} from '@/lib/keyboardShortcuts'
+
+import type {
+    KeyBinding,
+    ShortcutActionId,
+    ShortcutScope,
+} from '@/lib/keyboardShortcuts'
+import type { FC } from 'react'
+
+type Props = {
+    open:               boolean
+    onOpenChange:       (open: boolean) => void
+    activeScope:        ShortcutScope
+    effectiveBindings:  Record<ShortcutActionId, KeyBinding | null>
+    conflictActionIds:  Set<ShortcutActionId>
+}
+
+
+const ShortcutHelpDialog: FC<Props> = (
+    { open, onOpenChange, activeScope, effectiveBindings, conflictActionIds },
+) => {
+  const rows = SHORTCUT_DEFINITIONS.filter (definition =>
+      definition.scope === 'global' || definition.scope === activeScope)
+
+  return (
+      <Dialog open={open} onOpenChange={onOpenChange}>
+	<DialogContent className="max-w-3xl px-6 pb-6 pt-7">
+	  <DialogHeader className="pl-8">
+	    <DialogTitle>キーボード・ショートカット</DialogTitle>
+	    <DialogDescription>
+	      この画面で利用できるショートカットを表示します。
+	    </DialogDescription>
+	  </DialogHeader>
+
+	  <div className="overflow-x-auto">
+	    <table className="w-full min-w-[40rem] table-fixed border-collapse text-sm">
+	      <thead className="border-b border-border">
+		<tr>
+		  <th className="p-2 text-left">操作</th>
+		  <th className="p-2 text-left">適用範囲</th>
+		  <th className="p-2 text-left">キー</th>
+		  <th className="p-2 text-left">競合</th>
+		</tr>
+	      </thead>
+	      <tbody>
+		{rows.map (row => (
+		    <tr key={row.id} className="border-b border-border/60 last:border-b-0">
+		      <td className="p-2">{row.label}</td>
+		      <td className="p-2">{SHORTCUT_SCOPE_LABELS[row.scope]}</td>
+		      <td className="p-2 font-mono">
+			{formatKeyBinding (effectiveBindings[row.id])}
+		      </td>
+		      <td className="p-2">
+			{conflictActionIds.has (row.id)
+			 ? <span className="text-red-600 dark:text-red-400">競合あり</span>
+			 : 'なし'}
+		      </td>
+		    </tr>))}
+	      </tbody>
+	    </table>
+	  </div>
+	</DialogContent>
+      </Dialog>)
+}
+
+export default ShortcutHelpDialog