Function ToggleGroup

packages/app-core/src/components/EditorPane.tsx:3790–3821

({
  mode,
  onChange
}: {
  mode: PaneMode
  onChange: (m: PaneMode) => void
})

}

function ToggleGroup({
  mode,
  onChange
}: {
  mode: PaneMode
  onChange: (m: PaneMode) => void
}): JSX.Element {
  const keymapOverrides = useStore((s) => s.keymapOverrides)
  return (
    <div className="flex items-center gap-1 rounded-md bg-paper-200/70 p-0.5 text-xs">
      {MODE_OPTIONS.map((option) => {
        const shortcut = getKeymapDisplay(keymapOverrides, option.keymapId)
        return (
          <button
            key={option.mode}
            onClick={() => onChange(option.mode)}
            title={`${option.tooltipLabel} (${shortcut})`}
            aria-label={`${option.tooltipLabel} (${shortcut})`}
            className={[
              'rounded px-2 py-1 transition-colors',
              mode === option.mode
                ? 'bg-paper-50 text-ink-900 shadow-sm'
                : 'text-ink-500 hover:text-ink-800'
            ].join(' ')}
          >
            {option.label}
          </button>
        )
      })}
    </div>
  )
}

const INVALID_FILENAME_CHARS = /[/\\:*?"<>|#^\[\]]/