Function TextInputRow

packages/app-core/src/components/SettingsModal.tsx:4212–4279

({
  label,
  description,
  value,
  placeholder,
  settingId,
  commitOnBlur = false,
  onChange
}: {
  label: string
  description?: string
  value: string
  placeholder?: string
  settingId?: string
  commitOnBlur?: boolean
  onChange: (next: string | null) => void
})

function TextInputRow({
  label,
  description,
  value,
  placeholder,
  settingId,
  commitOnBlur = false,
  onChange
}: {
  label: string
  description?: string
  value: string
  placeholder?: string
  settingId?: string
  commitOnBlur?: boolean
  onChange: (next: string | null) => void
}): JSX.Element {
  const [draft, setDraft] = useState(value)
  const [focused, setFocused] = useState(false)

  useEffect(() => {
    if (!commitOnBlur || !focused) setDraft(value)
  }, [commitOnBlur, focused, value])

  const commit = (raw: string): void => {
    const next = raw.trim()
    if (commitOnBlur && next === value) return
    onChange(next ? next : null)
  }

  return (
    <div
      className="flex items-center justify-between gap-5 px-5 py-4"
      {...settingsSearchTargetProps(settingId)}
    >
      <div className="min-w-0 flex-1">
        <div className="text-sm font-medium text-ink-900">{label}</div>
        {description && <div className="mt-1 text-xs leading-5 text-ink-500">{description}</div>}
      </div>
      <input
        value={commitOnBlur ? draft : value}
        onFocus={() => setFocused(true)}
        onChange={(e) => {
          if (commitOnBlur) {
            setDraft(e.target.value)
            return
          }
          commit(e.target.value)
        }}
        onBlur={(e) => {
          if (!commitOnBlur) return
          setFocused(false)
          commit(e.target.value)
        }}
        onKeyDown={(e) => {
          if (!commitOnBlur) return
          if (e.key === 'Enter' && !isImeComposing(e)) e.currentTarget.blur()
          if (e.key === 'Escape') {