#34

frontend/src/pages/users/SettingPage.tsx

@@ -10,6 +10,7 @@ import Label from '@/components/common/Label'
 import PageTitle from '@/components/common/PageTitle'
 import MainArea from '@/components/layout/MainArea'
 import TagLink from '@/components/TagLink'
+import KeyboardSettingsSection from '@/components/users/KeyboardSettingsSection'
 import InheritDialogue from '@/components/users/InheritDialogue'
 import UserCodeDialogue from '@/components/users/UserCodeDialogue'
 import { CATEGORY_NAMES, CATEGORIES } from '@/consts'
@@ -32,6 +33,7 @@ import {
     setClientAppearanceThemes,
     updateUserSettings,
 } from '@/lib/settings'
+import { useKeyboardShortcutSettings } from '@/lib/useKeyboardShortcuts'
 import { cn, inputClass } from '@/lib/utils'
 import { useValidationErrors } from '@/lib/useValidationErrors'
 
@@ -100,27 +102,6 @@ const builtinThemeLabel: Record<'light' | 'dark', string> = {
     dark:  'ダーク・モード',
 }
 
-const keyboardShortcutRows = [
-    {
-	action:   '投稿詳細を開く',
-	key:      'Enter',
-	scope:    '一覧・検索結果',
-	conflict: 'なし',
-    },
-    {
-	action:   '候補タグを選ぶ',
-	key:      '↑ / ↓ / Enter',
-	scope:    'タグ入力',
-	conflict: 'なし',
-    },
-    {
-	action:   '候補タグを閉じる',
-	key:      'Escape',
-	scope:    'タグ入力',
-	conflict: 'なし',
-    },
-]
-
 const previewTag = (
     id:         number,
     name:       string,
@@ -389,39 +370,6 @@ const ThemeSection: FC<SharedSectionProps> = ({
     </section>)
 
 
-const KeyboardSection: FC = () => (
-    <section className={sectionClassName}>
-      <h2 className="text-xl font-bold">キーボード</h2>
-
-      <p className="text-sm text-muted-foreground">
-	現段階では一覧表示のみです．将来は action / key / scope / conflict を持つ
-	key bind 設定へ拡張できる形にしています．
-      </p>
-
-      <div className="overflow-x-auto">
-	<table className="w-full min-w-[28rem] 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>
-	    {keyboardShortcutRows.map (row => (
-		<tr key={row.action} className="border-b border-border/60 last:border-b-0">
-		  <td className="p-2">{row.action}</td>
-		  <td className="p-2 font-mono">{row.key}</td>
-		  <td className="p-2">{row.scope}</td>
-		  <td className="p-2">{row.conflict}</td>
-		</tr>))}
-	  </tbody>
-	</table>
-      </div>
-    </section>)
-
-
 const SettingPage: FC<Props> = ({ user, setUser }) => {
   const location = useLocation ()
   const navigate = useNavigate ()
@@ -440,6 +388,7 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
   const [draftCustomThemes, setDraftCustomThemes] =
       useState<Record<string, CustomClientTheme>> (getClientCustomThemes ())
   const [userCodeVsbl, setUserCodeVsbl] = useState (false)
+  const { conflictActionIds } = useKeyboardShortcutSettings ()
   const {
     baseErrors: userBaseErrors,
     fieldErrors: userFieldErrors,
@@ -472,8 +421,8 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
   const settingsTabErrors = useMemo<Record<SettingsTab, boolean>> (() => ({
       account: Boolean (userFieldErrors.name?.length),
       theme: Boolean (settingsFieldErrors.theme?.length),
-      keyboard: false,
-  }), [settingsFieldErrors.theme, userFieldErrors.name])
+      keyboard: conflictActionIds.size > 0,
+  }), [conflictActionIds.size, settingsFieldErrors.theme, userFieldErrors.name])
 
   const applyDraftThemeSelection = (
       activeThemeId: ActiveThemeId,
@@ -780,7 +729,7 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 		    <>
 		      <AccountSection {...sectionProps}/>
 		      <ThemeSection {...sectionProps}/>
-		      <KeyboardSection/>
+		      <KeyboardSettingsSection sectionClassName={sectionClassName}/>
 		    </>)}
 	      </>)}
 	</div>
@@ -828,7 +777,9 @@ const SettingPage: FC<Props> = ({ user, setUser }) => {
 			<>
 			  {activeTab === 'account' && <AccountSection {...sectionProps}/>}
 			  {activeTab === 'theme' && <ThemeSection {...sectionProps}/>}
-			  {activeTab === 'keyboard' && <KeyboardSection/>}
+			  {activeTab === 'keyboard' && (
+			      <KeyboardSettingsSection sectionClassName={sectionClassName}/>
+			  )}
 			</>)}
 		  </div>)}
 	    </div>