Function KeyboardSettings

web/components/settings/KeyboardSettings.tsx:118–161

()

}

export function KeyboardSettings() {
  const { settings, updateSettings, resetSettings } = useChatStore();
  const keybindings = settings.keybindings;

  // Find conflicts
  const bindingValues = Object.values(keybindings);
  const conflicts = new Set(
    bindingValues.filter((v, i) => bindingValues.indexOf(v) !== i)
  );

  function rebind(id: string, combo: string) {
    updateSettings({ keybindings: { ...keybindings, [id]: combo } });
  }

  function resetOne(id: string) {
    updateSettings({
      keybindings: { ...keybindings, [id]: DEFAULT_SHORTCUTS[id] },
    });
  }

  return (
    <div>
      <SectionHeader title="Keyboard Shortcuts" onReset={() => resetSettings("keybindings")} />

      <p className="text-xs text-surface-400 mb-4">
        Click a shortcut to rebind it. Press Escape to cancel.
      </p>

      <div>
        {Object.entries(keybindings).map(([id, binding]) => (
          <ShortcutRow
            key={id}
            id={id}
            binding={binding}
            isDefault={binding === DEFAULT_SHORTCUTS[id]}
            isConflict={conflicts.has(binding)}
            onRebind={(combo) => rebind(id, combo)}
            onReset={() => resetOne(id)}
          />
        ))}
      </div>
    </div>
  );
}