main
import { Alert } from '@app/components'
import { useT } from '@app/i18n'
import { ApiFailure } from '@app/lib'
import { Button, Checkbox } from '@app/ui'
import { IconLoader2 as Loader2, IconX as X } from '@tabler/icons-react'
import { type FormEvent, type ReactNode, useEffect, useState } from 'react'
import { parseList } from './form-values'
export type FormValues = Record<string, string | boolean>
interface BaseField {
key: string
label: string
optional?: boolean
initialValue?: string | boolean
}
export type FormField =
| (BaseField & {
kind: 'text'
placeholder?: string
hint?: string
type?: 'text' | 'email'
maxLength?: number
sanitize?: (v: string) => string
})
| (BaseField & {
kind: 'textarea'
placeholder?: string
maxLength?: number
hint?: string
rows?: number
/** Monospace rendering — for machine blobs (SSH keys, tokens). */
mono?: boolean
})
| (BaseField & { kind: 'number'; placeholder?: string; hint?: string })
| (BaseField & { kind: 'toggle' })
| (BaseField & { kind: 'select'; options: { value: string; label: string }[] })
/** `<input type=datetime-local>`; the value is a local date-time string. */
| (BaseField & { kind: 'datetime'; hint?: string; placeholder?: string })
/** Toggle chips. The value is the selected option values joined by commas. */
| (BaseField & {
kind: 'multiselect'
options: { value: string; label: string }[]
hint?: string
emptyLabel?: string
})
export interface FormModalProps {
title: string
description?: string
/** Free-form block between the description and the fields (tips, snippets). */
extra?: ReactNode
fields: FormField[]
open: boolean
danger?: boolean
confirmLabel?: string
/** Wider dialog (420px → 560px) for forms with long single-line payloads. */
wide?: boolean
/** Async initial values (e.g. personal preferences). */
load?: () => Promise<FormValues>
/** Return a string to keep the modal open with a success note, void to close. */
onSubmit: (values: FormValues) => Promise<string | void>
onClose: () => void
}
/**
* Config-driven modal dialog shared by the space menu's create/settings flows and
* the repo branch tools. Errors surface through `ApiFailure` (see shared/lib), so any
* slice can throw a translated message and have it shown verbatim.
*/
export function FormModal({
title,
description,
extra,
fields,
open,
danger = false,
confirmLabel,
wide = false,
load,
onSubmit,
onClose,
}: FormModalProps) {
const { t } = useT()
const [values, setValues] = useState<FormValues>({})
const [loading, setLoading] = useState(false)
const [busy, setBusy] = useState(false)
const [error, setError] = useState<string | null>(null)
const [notice, setNotice] = useState<string | null>(null)
useEffect(() => {
if (!open) return
setError(null)
setNotice(null)
setBusy(false)
const base: FormValues = {}
for (const field of fields) {
base[field.key] = field.kind === 'toggle' ? Boolean(field.initialValue) : String(field.initialValue ?? '')
}
setValues(base)
if (!load) return
let active = true
setLoading(true)
load().then(
(loaded) => {
if (!active) return
setValues((prev) => ({ ...prev, ...loaded }))
setLoading(false)
},
(err) => {
if (!active) return
setError(err instanceof ApiFailure ? err.message : t('ui.loadFailed'))
setLoading(false)
},
)
return () => {
active = false
}
// Re-initialise only when the dialog opens; fields/load are stable per dialog.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [open])
useEffect(() => {
if (!open) return
const onKey = (event: KeyboardEvent) => {
if (event.key !== 'Escape') return
// Capture + stop: this is the innermost dialog, so a parent modal
// (e.g. the user-settings overlay) must not close along with it.
event.stopPropagation()
onClose()
}
window.addEventListener('keydown', onKey, true)
return () => window.removeEventListener('keydown', onKey, true)
}, [open, onClose])
if (!open) return null
const setField = (key: string, value: string | boolean) => {
setNotice(null)
setValues((prev) => ({ ...prev, [key]: value }))
}
async function handleSubmit(event: FormEvent) {
event.preventDefault()
if (busy || loading) return
const missing = fields.find((f) => {
if (f.optional) return false
const raw = String(values[f.key] ?? '').trim()
return raw === '' && (f.kind === 'text' || f.kind === 'datetime' || f.kind === 'multiselect')
})
if (missing) {
setError(t('ui.fieldRequired', { field: missing.label }))
return
}
const badNumber = fields.find((f) => {
if (f.kind !== 'number') return false
const raw = String(values[f.key] ?? '')
return raw !== '' && (!Number.isFinite(Number(raw)) || Number(raw) < 0)
})
if (badNumber) {
setError(t('ui.fieldNonNegativeInteger', { field: badNumber.label }))
return
}
setBusy(true)
setError(null)
try {
const message = await onSubmit(values)
if (message) {
setNotice(message)
setBusy(false)
} else {
onClose()
}
} catch (err) {
setError(err instanceof ApiFailure ? err.message : t('ui.actionFailed'))
setBusy(false)
}
}
const labelClass = 'font-mono text-[10px] font-bold uppercase tracking-[1.2px] text-shell-ink-muted'
const inputClass =
'h-10 w-full rounded-md border-2 border-shell-hairline bg-shell-field px-3 text-[13.5px] text-shell-ink outline-none transition-colors focus:border-shell-ink'
return (
<div className="workspace-overlay fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onClose}>
<div
role="dialog"
aria-modal
aria-label={title}
className={`workspace-dialog w-full bg-shell-surface ${wide ? 'max-w-[560px]' : 'max-w-[420px]'}`}
onClick={(e) => e.stopPropagation()}
>
<div className="mb-4 flex items-center justify-between">
<h2 className="text-[16px] font-semibold">{title}</h2>
<button
type="button"
aria-label={t('ui.close')}
className="dialog-close text-shell-ink-muted transition-colors hover:text-shell-ink"
onClick={onClose}
>
<X className="h-4 w-4" />
</button>
</div>
{description ? <p className="mb-4 text-[12.5px] leading-[1.5] text-shell-ink-muted">{description}</p> : null}
{extra ? <div className="mb-4">{extra}</div> : null}
{loading ? (
<div className="flex h-32 items-center justify-center">
<Loader2 className="h-5 w-5 animate-spin text-shell-ink-muted" aria-label={t('ui.loading')} />
</div>
) : (
<form className="flex flex-col gap-4" onSubmit={handleSubmit} noValidate>
{fields.map((field) => (
<div key={field.key} className="flex flex-col gap-1.5">
{field.kind === 'toggle' ? (
<div className="flex items-center gap-2 text-[13px]">
<Checkbox
checked={Boolean(values[field.key])}
onChange={(v) => setField(field.key, v)}
aria-label={field.label}
/>
<span className="cursor-pointer" onClick={() => setField(field.key, !values[field.key])}>
{field.label}
</span>
</div>
) : (
<>
<span className={labelClass}>{field.label}</span>
{field.kind === 'text' ? (
<input
value={String(values[field.key] ?? '')}
onChange={(e) =>
setField(field.key, field.sanitize ? field.sanitize(e.target.value) : e.target.value)
}
type={field.type ?? 'text'}
maxLength={field.maxLength}
placeholder={field.placeholder}
className={inputClass}
/>
) : field.kind === 'datetime' ? (
<input
type="datetime-local"
value={String(values[field.key] ?? '')}
onChange={(e) => setField(field.key, e.target.value)}
placeholder={field.placeholder}
className={inputClass}
/>
) : field.kind === 'multiselect' ? (
<div className="flex flex-wrap gap-2 pt-0.5" role="group" aria-label={field.label}>
{field.options.length === 0 ? (
<span className="text-[12px] text-shell-ink-muted">
{field.emptyLabel ?? t('ui.noOptions')}
</span>
) : (
field.options.map((option) => {
const picked = parseList(values[field.key])
const on = picked.includes(option.value)
return (
<button
key={option.value}
type="button"
aria-pressed={on}
className={`settings-chip${on ? ' is-on' : ''}`}
onClick={() =>
setField(
field.key,
(on
? picked.filter((item) => item !== option.value)
: [...picked, option.value]
).join(','),
)
}
>
{option.label}
</button>
)
})
)}
</div>
) : field.kind === 'number' ? (
<input
type="number"
min={0}
step={1}
value={String(values[field.key] ?? '')}
onChange={(e) => setField(field.key, e.target.value)}
placeholder={field.placeholder}
className={inputClass}
/>
) : field.kind === 'textarea' ? (
<textarea
value={String(values[field.key] ?? '')}
onChange={(e) => setField(field.key, e.target.value)}
maxLength={field.maxLength}
rows={field.rows ?? 3}
placeholder={field.placeholder}
className={`w-full resize-none rounded-md border-2 border-shell-hairline bg-shell-field px-3 py-2 text-[13.5px] text-shell-ink outline-none transition-colors focus:border-shell-ink ${
field.mono ? 'font-mono text-[12.5px] leading-5' : ''
}`}
/>
) : (
<select
value={String(values[field.key] ?? '')}
onChange={(e) => setField(field.key, e.target.value)}
className={inputClass}
>
{field.options.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
)}
{'hint' in field && field.hint ? (
<span className="text-[11px] text-shell-ink-muted">{field.hint}</span>
) : null}
</>
)}
</div>
))}
{notice && <Alert tone="success">{notice}</Alert>}
{error && <Alert tone="error">{error}</Alert>}
<div className="flex justify-end gap-2 pt-1">
<Button variant="secondary" onClick={onClose} disabled={busy}>
{t('common.action.cancel')}
</Button>
<Button
type="submit"
disabled={busy || loading}
className={danger ? 'bg-[#f23f43] text-white hover:brightness-95' : undefined}
>
{busy ? t('common.action.working') : (confirmLabel ?? t('common.action.confirm'))}
</Button>
</div>
</form>
)}
</div>
</div>
)
}