Harlekin
d49edeed18
„Zwischen der Auswahl und dem Text ist kaum Platz" - und das stimmte überall, nicht nur an der einen Stelle. Der Grund war messbar: der Abstand zur Beschriftung betrug 8 px, die Polsterung innerhalb des Feldes 11,2 px. Das Wort stand also näher am Rahmen als der Inhalt des Rahmens an demselben Rahmen, und genau daran erkennt das Auge einen zu engen Satz. Die Regel heisst jetzt: der Abstand nach aussen ist grösser als die Polsterung nach innen. Sie steht einmal in globals.css als .field-label, .field-row und .field-hint - vorher war sie ein Dutzend Mal als mt-1, mt-1.5 oder gap-2 an den Aufrufstellen verteilt, mit drei verschiedenen Werten, von denen keiner reichte. 33 Stellen umgestellt. Der Test prüft die Regel und nicht die Zahl: er liest die Polsterung von .field aus dem CSS und verlangt, dass beide Abstände darüber liegen. Gegengeprobt mit einem zu kleinen Wert, dann schlägt er an. Nachgemessen im Browser mit dem gebauten CSS: 8 px senkrecht gegen 5,6 px Innenpolsterung, 13,6 px waagerecht gegen 11,2 px.
104 lines
3.3 KiB
TypeScript
104 lines
3.3 KiB
TypeScript
'use client'
|
|
|
|
import { useOptimistic, useRef, useState, useTransition } from 'react'
|
|
import { uuidv7 } from '@/lib/uuidv7'
|
|
import { caseText, entryText } from '@/lib/i18n/cases'
|
|
import { addEntryAction } from '../actions'
|
|
|
|
type Pending = { id: string; body: string; failed: boolean }
|
|
|
|
/**
|
|
* Vermerk anlegen, optimistisch.
|
|
*
|
|
* Die clientseitig erzeugte UUIDv7 ist zugleich Idempotenzschlüssel: ein
|
|
* Wiederholungsversuch nach einem Netzfehler erzeugt keinen zweiten Eintrag.
|
|
* Siehe docs/09-performance-und-ux.md.
|
|
*
|
|
* Nach dem Absenden springt der Fokus sofort zurück ins leere Feld, Enter
|
|
* sendet, Shift+Enter macht einen Zeilenumbruch.
|
|
*/
|
|
export function EntryComposer({ caseNumber }: { caseNumber: string }) {
|
|
const [draft, setDraft] = useState('')
|
|
const [failures, setFailures] = useState<Pending[]>([])
|
|
const [optimistic, addOptimistic] = useOptimistic<Pending[], Pending>(
|
|
[],
|
|
(current, entry) => [entry, ...current],
|
|
)
|
|
const [pending, startTransition] = useTransition()
|
|
const field = useRef<HTMLTextAreaElement>(null)
|
|
|
|
function submit(text: string) {
|
|
const body = text.trim()
|
|
if (!body) return
|
|
|
|
const id = uuidv7()
|
|
setDraft('')
|
|
field.current?.focus()
|
|
|
|
startTransition(async () => {
|
|
addOptimistic({ id, body, failed: false })
|
|
const result = await addEntryAction({ id, caseNumber, body, minClearance: 0 })
|
|
if (!result.ok) {
|
|
// Der Eintrag bleibt stehen und ist als nicht gespeichert markiert.
|
|
setFailures((current) => [{ id, body, failed: true }, ...current])
|
|
}
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<form
|
|
action={() => submit(draft)}
|
|
className="max-w-(--container-measure)"
|
|
>
|
|
<label htmlFor="vermerk" className="field-label">
|
|
{caseText.newEntry}
|
|
</label>
|
|
<textarea
|
|
id="vermerk"
|
|
ref={field}
|
|
value={draft}
|
|
onChange={(event) => setDraft(event.target.value)}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter' && !event.shiftKey) {
|
|
event.preventDefault()
|
|
submit(draft)
|
|
}
|
|
}}
|
|
rows={3}
|
|
placeholder={caseText.entryPlaceholder}
|
|
className="mt-1.5 block w-full field"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={pending || draft.trim().length === 0}
|
|
className="mt-2 btn btn-primary"
|
|
>
|
|
{pending ? caseText.saving : entryText.create}
|
|
</button>
|
|
</form>
|
|
|
|
{optimistic.length > 0 || failures.length > 0 ? (
|
|
<ol className="mt-6 timeline">
|
|
{[...failures, ...optimistic].map((entry) => (
|
|
<li key={entry.id} className={entry.failed ? 'pb-4' : 'pb-4 opacity-60'}>
|
|
<p
|
|
className={
|
|
entry.failed
|
|
? 'max-w-(--container-measure) border-l-(length:--spacing-edge) border-stamp-4 pl-3 text-sm whitespace-pre-wrap'
|
|
: 'max-w-(--container-measure) text-sm whitespace-pre-wrap'
|
|
}
|
|
>
|
|
{entry.body}
|
|
</p>
|
|
{entry.failed ? (
|
|
<p className="mt-1 font-condensed text-2xs text-stamp-4">{caseText.unsaved}</p>
|
|
) : null}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|