Refine settings, archive, and check-in styling

This commit is contained in:
syntaxbullet
2026-09-04 18:56:05 +02:00
parent 1208e93953
commit 865bdd1328
9 changed files with 184 additions and 72 deletions

View File

@@ -1,5 +1,6 @@
import { FormMessage } from "./design-system/WorkspacePanel";
import { useEffect, useRef, useState } from "react";
import { habitRequest, type TodayHabit } from "../lib/dashboard";
import { habitRequest, formatTrackingDate, type TodayHabit } from "../lib/dashboard";
import { Button, Checkbox } from "./design-system/primitives";
import { Field } from "./design-system/Field";
@@ -38,23 +39,23 @@ export function CheckInEditor({ habitId, date, disabled, onSaved, onExpired }: {
setError(message); if (message.includes("session has expired")) expired.current?.();
} finally { saving.current = false; setBusy(false); }
}
return <div className="ds-inline-item-form" aria-label={`Check-in for ${date}`}>
<p className="type-ui-heading">Check-in · {date}</p>
{error && <p role="alert">{error}</p>}
return <div className="ds-form-stack ds-check-in-controls" aria-label={`Check-in for ${date}`}>
<header className="ds-check-in-heading"><p className="ds-eyebrow">EDITING CHECK-IN</p><p className="type-ui-heading">{formatTrackingDate(date)}</p></header>
<FormMessage error>{error}</FormMessage>
{!day ? error ? <Button onClick={() => setAttempt(value => value + 1)}>Retry check-in</Button> : <p role="status">Loading check-in…</p>
: day.future ? <p>Future check-ins cannot be edited.</p>
: !day.due ? <p>Nothing was scheduled for this date.</p>
: <>
<p className="type-small">{day.name} · {day.timezone}. Changes use the requirements saved for this date.</p>
{day.method === "count" ? <form onSubmit={event => { event.preventDefault(); void save({ count: Number(count) }); }}>
<p className="ds-supporting-copy">{day.timezone} · Using this day’s saved target and schedule.</p>
{day.method === "count" ? <form className="ds-form-stack" onSubmit={event => { event.preventDefault(); void save({ count: Number(count) }); }}>
<Field label={`Count (${day.unit}, target ${day.target})`}>
{id => <input id={id} type="number" min={0} max={1000000000} step={1} required value={count} disabled={busy || disabled} onChange={event => setCount(event.target.value)} />}
</Field>
{day.carriedFrom && <p className="type-small">Includes carryover from {day.carriedFrom}. Saving sets this day's total.</p>}
<Button type="submit" disabled={busy || disabled}>{busy ? "Saving…" : "Save check-in"}</Button>
<div className="ds-action-row"><Button type="submit" disabled={busy || disabled}>{busy ? "Saving…" : "Save check-in"}</Button></div>
</form> : day.method === "manual" ? <Checkbox label="Completed on this date" checked={day.complete} disabled={busy || disabled} onChange={event => void save({ done: event.target.checked })} />
: day.tasks.map(task => <Checkbox key={task.taskId} label={task.name} checked={task.done} disabled={busy || disabled} onChange={event => void save({ done: event.target.checked }, task.taskId)} />)}
</>}
<p role="status">{notice}</p>
<FormMessage>{notice}</FormMessage>
</div>;
}