Refine settings, archive, and check-in styling
This commit is contained in:
@@ -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>;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user