Function KeymapSettings

packages/app-core/src/components/SettingsModal.tsx:3499–3670

({
  vimMode,
  overrides,
  onSetBinding,
  onResetAll
}: {
  vimMode: boolean
  overrides: KeymapOverrides
  onSetBinding: (id: KeymapId, binding: string | null) => void
  onResetAll: () => void
})

}

function KeymapSettings({
  vimMode,
  overrides,
  onSetBinding,
  onResetAll
}: {
  vimMode: boolean
  overrides: KeymapOverrides
  onSetBinding: (id: KeymapId, binding: string | null) => void
  onResetAll: () => void
}): JSX.Element {
  const [query, setQuery] = useState('')
  const [recording, setRecording] = useState<KeymapDefinition | null>(null)

  const groups = useMemo(() => {
    const q = query.trim().toLowerCase()
    return getKeymapDefinitionsByGroup()
      .map((group) => {
        const items = group.items.filter((definition) => {
          if (definition.vimOnly && !vimMode && definition.id !== 'global.searchNotesNonVim') {
            // Keep Vim-only bindings visible so users can prep their layout
            // before turning Vim mode back on, but still let the filter work.
          }
          if (!q) return true
          return (
            definition.title.toLowerCase().includes(q) ||
            definition.description.toLowerCase().includes(q) ||
            getKeymapDisplay(overrides, definition.id).toLowerCase().includes(q)
          )
        })
        return items.length > 0 ? { ...group, items } : null
      })
      .filter((group): group is ReturnType<typeof getKeymapDefinitionsByGroup>[number] => !!group)
  }, [overrides, query, vimMode])

  const hasOverrides = Object.keys(overrides).length > 0

  return (
    <div className="flex h-full min-h-0 flex-col">
      <div className="flex min-h-0 flex-1 flex-col rounded-3xl border border-paper-300/60 bg-paper-50/45 shadow-[0_14px_36px_rgba(15,23,42,0.04)]">
        <div className="sticky top-0 z-10 rounded-t-[22px] border-b border-paper-300/55 bg-paper-50/95 px-5 py-4 backdrop-blur">
          <div className="flex flex-wrap items-center justify-between gap-3">
          <div className="min-w-0">
            <div className="text-sm font-medium text-ink-900">Shortcut editor</div>
            <div className="mt-1 text-xs leading-5 text-ink-500">
              Record a new key or sequence for the app’s keyboard-first actions. Standard
              accessibility fallbacks like arrows, Enter, and Escape still work.
            </div>
          </div>
          <div className="flex items-center gap-2">
            <input
              value={query}
              onChange={(e) => setQuery(e.target.value)}
              placeholder="Filter keymaps…"
              className="w-72 rounded-xl border border-paper-300/70 bg-paper-100/80 px-4 py-2.5 text-sm text-ink-900 outline-none placeholder:text-ink-400 focus:border-accent/45"
            />
            <button
              type="button"