feat(keybinding): several shortcuts per action, mouse buttons, searchable picker

Shortcuts were defined in four places that drifted apart: per-action IPC channel
pairs, a hand-written VK table in the service, a second one in the renderer, and
three copies of the keycap styling. Adding an action meant editing all of them,
so two shortcuts stayed hardcoded in bootstrap and one had no settings entry at
all.

packages/core/src/keybinding.ts is now the single source for the binding type,
the selectable key catalog, the action catalog, normalization, validation,
conflict detection, display labels, search and deserialization. Main, preload
and renderer all read from it; nothing redefines keys or rules locally.

- Each action holds a list of bindings instead of one. AppConfig's four
  *Shortcut fields collapse into a single keyBindings map, migrated on launch.
- Mouse buttons can be bound. Left click is refused, right/middle need a
  modifier, side buttons are free. uiohook cannot swallow events, so the
  original click still fires and the UI says so.
- Keys can be picked from a grouped dropdown with a search box, not only by
  recording a keypress.
- HOTKEY's 14 channels become KEYBINDING's 9, taking the action as a parameter,
  so actions no longer multiply channels. The history and command popups moved
  out of bootstrap into ordinary actions.
- displayLabel is gone; labels derive from the binding and follow the app
  language and platform.

Fixes found on the way:
- Double-press hands-free was unreachable: lookup returned only the first
  matching action, and dictation shares its default binding.
- Reserved-combination checks compared joined key names, so a different modifier
  order let Ctrl+C through.
- Disabling shortcuts released every global registration in the process,
  including the popup ones, and never restored them.
- Enabling shortcuts after starting disabled left nothing registered.
- The dashboard stored the caption event payload instead of the state in it.

apps/desktop/src/renderer/components/SettingsModal.tsx

@@ -20,21 +20,21 @@ import {
   InputLabel,
   FormControl,
   Button,
-  Chip,
-  Stack,
   Paper,
 } from '@mui/material'
-import { X, Keyboard, Pencil, Mic, Lock, Cloud, RefreshCw, Play, Cpu, HelpCircle } from 'lucide-react'
+import { X, Keyboard, Mic, Lock, Cloud, RefreshCw, Play, Cpu, HelpCircle } from 'lucide-react'
 import { d3roPalette, d3roFontMono, d3roShadow, d3roRadius, d3roTypo } from '@d3ro/ui/theme'
 import { Led } from '@d3ro/ui/components/ds'
-import { HotkeyRecordModal } from './HotkeyRecordModal'
-import { formatHotkeyLabel, formatHotkeySegments } from '../utils/format-hotkey'
 import { LicenseTab } from './LicenseTab'
 import { CloudSyncSection } from './CloudSyncSection'
 import { STTTab } from './STTTab'
+import { KeyBindingField } from './keybinding/KeyBindingField'
+import { asTranslationKey } from './keybinding/translation-key'
 import { useI18n, LOCALE_META } from '@d3ro/i18n'
 import type { Locale } from '@d3ro/i18n'
-import type { ThemeMode, AppConfig, HotkeyBinding, AudioDevice, LLMModel, LLMStatus } from '@d3ro/core/types'
+import type { KeyBindingActionGroup } from '@d3ro/core/keybinding'
+import { KEYBINDING_ACTIONS } from '@d3ro/core/keybinding'
+import type { ThemeMode, AppConfig, AudioDevice, LLMModel, LLMStatus } from '@d3ro/core/types'
 
 interface SettingsModalProps {
   open: boolean
@@ -53,135 +53,13 @@ function TabPanel({ children, value, index }: TabPanelProps): React.ReactElement
   return <Box sx={{ pt: 2 }}>{children}</Box>
 }
 
-// ── 핫키 표시 컴포넌트 ──────────────────────────────────
-function HotkeyDisplay({
-  binding,
-  onEdit,
-  label,
-  notSetLabel,
-}: {
-  binding: HotkeyBinding | null
-  onEdit: () => void
-  label: string
-  notSetLabel: string
-}): React.ReactElement {
-  return (
-    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-      <Typography variant="body2" sx={{ color: d3roPalette.text.secondary, minWidth: 40 }}>
-        {label}
-      </Typography>
-      {binding ? (
-        <Stack direction="row" spacing={0.5} alignItems="center">
-          {formatHotkeySegments(binding).map((key, idx) => (
-            <Chip
-              key={`${key}-${idx}`}
-              label={key}
-              size="small"
-              sx={{
-                fontWeight: 500,
-                fontSize: d3roTypo.label.size,
-                bgcolor: d3roPalette.bg.elevated,
-                color: d3roPalette.text.primary,
-                border: `1px solid ${d3roPalette.border.default}`,
-                borderRadius: d3roRadius.xs,
-                height: 28,
-              }}
-            />
-          ))}
-        </Stack>
-      ) : (
-        <Typography variant="body2" sx={{ color: d3roPalette.text.disabled }}>
-          {notSetLabel}
-        </Typography>
-      )}
-      <IconButton size="small" onClick={onEdit} sx={{ color: d3roPalette.text.inactive, ml: 'auto' }}>
-        <Pencil size={16} />
-      </IconButton>
-    </Box>
-  )
+// ── 액션 그룹 섹션 ─────────────────────────────────────
+const ACTION_GROUP_LABEL_KEYS: Readonly<Record<KeyBindingActionGroup, string>> = {
+  voice: 'keybinding.ui.sectionVoice',
+  window: 'keybinding.ui.sectionWindow',
 }
 
-// ── 음성 모드 카드 ──────────────────────────────────────
-function VoiceModeCard({
-  title,
-  description,
-  enabled,
-  onToggle,
-  disabled,
-  enabledLabel,
-  disabledLabel,
-  children,
-}: {
-  title: string
-  description: string
-  enabled: boolean
-  onToggle: (enabled: boolean) => void
-  disabled?: boolean
-  enabledLabel: string
-  disabledLabel: string
-  children?: React.ReactNode
-}): React.ReactElement {
-  return (
-    <Paper
-      elevation={0}
-      sx={{
-        p: 2,
-        bgcolor: d3roPalette.bg.inset,
-        borderRadius: '10px',
-        border: 'none',
-        boxShadow: d3roShadow.inset,
-      }}
-    >
-      <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
-        <Box sx={{ flex: 1 }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 0.5 }}>
-            <Typography
-              variant="subtitle2"
-              sx={{ fontWeight: 500, fontFamily: d3roFontMono, fontSize: d3roTypo.small.size, letterSpacing: '0.5px' }}
-            >
-              {title}
-            </Typography>
-            <FormControlLabel
-              control={
-                <Switch
-                  checked={enabled}
-                  onChange={(e) => onToggle(e.target.checked)}
-                  disabled={disabled}
-                  size="small"
-                  sx={{
-                    '& .MuiSwitch-switchBase.Mui-checked': { color: d3roPalette.tag.green },
-                    '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
-                      backgroundColor: d3roPalette.tag.green,
-                    },
-                  }}
-                />
-              }
-              label={
-                <Chip
-                  label={enabled ? enabledLabel : disabledLabel}
-                  size="small"
-                  sx={{
-                    fontSize: '10px', // P4: 토큰에 없는 10px 보존
-                    fontWeight: 500,
-                    height: 20,
-                    bgcolor: enabled ? d3roPalette.tag.greenBg : 'transparent',
-                    color: enabled ? d3roPalette.tag.green : d3roPalette.text.disabled,
-                    border: enabled ? 'none' : `1px solid ${d3roPalette.border.subtle}`,
-                  }}
-                />
-              }
-              sx={{ ml: 0, mr: 0 }}
-            />
-          </Box>
-          <Typography variant="body2" sx={{ color: d3roPalette.text.inactive, fontSize: d3roTypo.label.size }}>
-            {description}
-          </Typography>
-        </Box>
-      </Box>
-      {children && <Box sx={{ mt: 1.5 }}>{children}</Box>}
-    </Paper>
-  )
-}
+const ACTION_GROUP_ORDER: readonly KeyBindingActionGroup[] = ['voice', 'window']
 
 export function SettingsModal({ open, initialTab = 0, onClose }: SettingsModalProps): React.ReactElement {
   const { t, locale, setLocale } = useI18n()
@@ -213,18 +91,8 @@ export function SettingsModal({ open, initialTab = 0, onClose }: SettingsModalPr
     }
   }, [open])
 
-  // 음성 모드 상태
-  const [dictationEnabled, setDictationEnabled] = useState(true)
-  const [dictationBinding, setDictationBinding] = useState<HotkeyBinding | null>(null)
-  const [handsFreeEnabled, setHandsFreeEnabled] = useState(false)
-  const [handsFreeBinding, setHandsFreeBinding] = useState<HotkeyBinding | null>(null)
-  const [captionBinding, setCaptionBinding] = useState<HotkeyBinding | null>(null)
-  const [, setHotkeyGlobalEnabled] = useState(true)
-
-  // 핫키 녹화 모달
-  const [hotkeyModalOpen, setHotkeyModalOpen] = useState(false)
-  const [hotkeyModalTarget, setHotkeyModalTarget] = useState<'dictation' | 'handsFree' | 'caption'>('dictation')
-
+  // 전역 단축키 on/off (개별 바인딩은 KeyBindingField 가 담당한다)
+  const [keybindingEnabled, setKeybindingEnabled] = useState(true)
 
   // 오디오 디바이스
   const [audioDevices, setAudioDevices] = useState<AudioDevice[]>([])
@@ -261,20 +129,11 @@ export function SettingsModal({ open, initialTab = 0, onClose }: SettingsModalPr
 
     Promise.all([
       window.electronAPI.config.getAll(),
-      window.electronAPI.hotkey.getDictationShortcut(),
-      window.electronAPI.hotkey.getHandsFreeShortcut(),
-      window.electronAPI.hotkey.getCaptionShortcut(),
-      window.electronAPI.hotkey.isEnabled(),
+      window.electronAPI.keybinding.isEnabled(),
     ])
-      .then(([configResult, dictResult, hfResult, capResult, enabledResult]) => {
+      .then(([configResult, enabledResult]) => {
         if (configResult.success) setConfig(configResult.data)
-        if (dictResult.success && dictResult.data) setDictationBinding(dictResult.data)
-        if (hfResult.success && hfResult.data) setHandsFreeBinding(hfResult.data)
-        if (capResult.success && capResult.data) setCaptionBinding(capResult.data)
-        if (enabledResult.success) {
-          setHotkeyGlobalEnabled(enabledResult.data)
-          setDictationEnabled(enabledResult.data)
-        }
+        if (enabledResult.success) setKeybindingEnabled(enabledResult.data)
       })
       .finally(() => setLoading(false))
 
@@ -293,48 +152,9 @@ export function SettingsModal({ open, initialTab = 0, onClose }: SettingsModalPr
     window.electronAPI.config.set({ key, value })
   }, [])
 
-  const handleDictationToggle = useCallback(
-    (enabled: boolean) => {
-      setDictationEnabled(enabled)
-      window.electronAPI.hotkey.setEnabled({ enabled })
-      if (!enabled && handsFreeEnabled) {
-        setHandsFreeEnabled(false)
-      }
-    },
-    [handsFreeEnabled]
-  )
-
-  const handleHandsFreeToggle = useCallback((enabled: boolean) => {
-    if (enabled && !handsFreeBinding) {
-      setHotkeyModalTarget('handsFree')
-      setHotkeyModalOpen(true)
-      return
-    }
-    setHandsFreeEnabled(enabled)
-  }, [handsFreeBinding])
-
-  const handleHotkeySave = useCallback(
-    (binding: HotkeyBinding) => {
-      if (hotkeyModalTarget === 'dictation') {
-        setDictationBinding(binding)
-        window.electronAPI.hotkey.setDictationShortcut({ binding })
-        setDictationEnabled(true)
-        window.electronAPI.hotkey.setEnabled({ enabled: true })
-      } else if (hotkeyModalTarget === 'handsFree') {
-        setHandsFreeBinding(binding)
-        window.electronAPI.hotkey.setHandsFreeShortcut({ binding })
-        setHandsFreeEnabled(true)
-      } else {
-        setCaptionBinding(binding)
-        window.electronAPI.hotkey.setCaptionShortcut({ binding })
-      }
-    },
-    [hotkeyModalTarget]
-  )
-
-  const openHotkeyModal = useCallback((target: 'dictation' | 'handsFree' | 'caption') => {
-    setHotkeyModalTarget(target)
-    setHotkeyModalOpen(true)
+  const handleKeybindingToggle = useCallback((enabled: boolean) => {
+    setKeybindingEnabled(enabled)
+    void window.electronAPI.keybinding.setEnabled({ enabled })
   }, [])
 
   const handleLanguageChange = useCallback((newLocale: string) => {
@@ -418,73 +238,48 @@ export function SettingsModal({ open, initialTab = 0, onClose }: SettingsModalPr
           {/* ── 일반 탭 ─────────────────────────────── */}
           <TabPanel value={activeTab} index={0}>
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2.5 }}>
-              <Typography variant="overline" sx={{ color: d3roPalette.text.label, letterSpacing: '1.5px' }}>
-                {t('settings.shortcuts')}
-              </Typography>
-
-              <Stack spacing={1.5}>
-                <VoiceModeCard
-                  title={t('settings.dictation')}
-                  description={t('settings.dictation.desc')}
-                  enabled={dictationEnabled}
-                  onToggle={handleDictationToggle}
-                  enabledLabel={t('settings.enabled')}
-                  disabledLabel={t('settings.disabled')}
-                >
-                  <HotkeyDisplay
-                    binding={dictationBinding}
-                    onEdit={() => openHotkeyModal('dictation')}
-                    label={t('settings.key')}
-                    notSetLabel={t('settings.notSet')}
-                  />
-                </VoiceModeCard>
-
-                <VoiceModeCard
-                  title={t('settings.agent')}
-                  description={
-                    dictationBinding
-                      ? t('settings.agent.descWithKey', { key: formatHotkeyLabel(dictationBinding) })
-                      : t('settings.agent.descNoKey')
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <Typography variant="overline" sx={{ color: d3roPalette.text.label, letterSpacing: '1.5px' }}>
+                  {t('settings.shortcuts')}
+                </Typography>
+                <FormControlLabel
+                  sx={{ ml: 'auto', mr: 0 }}
+                  control={
+                    <Switch
+                      size="small"
+                      checked={keybindingEnabled}
+                      onChange={(e) => handleKeybindingToggle(e.target.checked)}
+                    />
+                  }
+                  label={
+                    <Typography sx={{ fontSize: d3roTypo.label.size, color: d3roPalette.text.secondary }}>
+                      {t('keybinding.ui.globalEnabled')}
+                    </Typography>
                   }
-                  enabled={dictationEnabled}
-                  onToggle={handleDictationToggle}
-                  disabled={!dictationEnabled}
-                  enabledLabel={t('settings.enabled')}
-                  disabledLabel={t('settings.disabled')}
                 />
+              </Box>
 
-                <VoiceModeCard
-                  title={t('settings.oneTouch')}
-                  description={t('settings.oneTouch.desc')}
-                  enabled={handsFreeEnabled}
-                  onToggle={handleHandsFreeToggle}
-                  disabled={!dictationEnabled}
-                  enabledLabel={t('settings.enabled')}
-                  disabledLabel={t('settings.disabled')}
-                >
-                  <HotkeyDisplay
-                    binding={handsFreeBinding}
-                    onEdit={() => openHotkeyModal('handsFree')}
-                    label={t('settings.key')}
-                    notSetLabel={t('settings.notSet')}
-                  />
-                </VoiceModeCard>
-
-                <VoiceModeCard
-                  title={t('settings.caption')}
-                  description={t('settings.caption.desc')}
-                  enabled={true}
-                  enabledLabel={t('settings.enabled')}
-                  disabledLabel={t('settings.disabled')}
-                >
-                  <HotkeyDisplay
-                    binding={captionBinding}
-                    onEdit={() => openHotkeyModal('caption')}
-                    label={t('settings.key')}
-                    notSetLabel={t('settings.notSet')}
-                  />
-                </VoiceModeCard>
-              </Stack>
+              {ACTION_GROUP_ORDER.map((group) => {
+                const actions = KEYBINDING_ACTIONS.filter((action) => action.group === group)
+                if (actions.length === 0) return null
+                return (
+                  <Box key={group} sx={{ display: 'flex', flexDirection: 'column', gap: 1.25 }}>
+                    <Typography
+                      sx={{
+                        color: d3roPalette.text.dimLabel,
+                        fontSize: d3roTypo.engrave.size,
+                        letterSpacing: '0.1em',
+                        textTransform: 'uppercase',
+                      }}
+                    >
+                      {t(asTranslationKey(ACTION_GROUP_LABEL_KEYS[group]))}
+                    </Typography>
+                    {actions.map((action) => (
+                      <KeyBindingField key={action.id} actionId={action.id} />
+                    ))}
+                  </Box>
+                )
+              })}
 
               <Divider sx={{ borderColor: d3roPalette.border.subtle }} />
 
@@ -981,14 +776,6 @@ export function SettingsModal({ open, initialTab = 0, onClose }: SettingsModalPr
           </Box>
         </DialogContent>
       </Dialog>
-
-      <HotkeyRecordModal
-        open={hotkeyModalOpen}
-        onClose={() => setHotkeyModalOpen(false)}
-        onSave={handleHotkeySave}
-        currentBinding={hotkeyModalTarget === 'dictation' ? dictationBinding : hotkeyModalTarget === 'handsFree' ? handsFreeBinding : captionBinding}
-        title={hotkeyModalTarget === 'dictation' ? t('hotkey.dictationTitle') : hotkeyModalTarget === 'handsFree' ? t('hotkey.oneTouchTitle') : t('hotkey.captionTitle')}
-      />
     </>
   )
 }