Refine settings, archive, and check-in styling

src/components/HabitHistory.tsx

@@ -23,6 +23,7 @@ export function HabitHistory({
   editor,
   onExpired,
   onHistorySaved,
+  calendarOnly = false,
 }: {
   habit: TodayHabit;
   date: string;
@@ -35,6 +36,7 @@ export function HabitHistory({
   editor?: ReactNode;
   onExpired?: () => void;
   onHistorySaved?: () => void;
+  calendarOnly?: boolean;
 }) {
   const [selectedDate, setSelectedDate] = useState<string>();
   const [editingDay, setEditingDay] = useState(false);
@@ -132,18 +134,19 @@ export function HabitHistory({
         />
       }
     />
-    <div className="ds-actions">
+    <div className="ds-action-row ds-history-actions">
       <Button variant="text" disabled={disabled} onClick={() => { setSelectedDate(selectedDate ?? date); setEditingDay(!editingDay); }} aria-expanded={editingDay}>
         {editingDay ? "Close check-in editor" : "Edit selected check-in"}
       </Button>
     </div>
-    {editingDay && <>
-      <Field label="Check-in date">{id => <input id={id} type="date" max={date} value={selectedDate ?? date} onChange={event => { if (event.target.value) setSelectedDate(event.target.value); }} />}</Field>
+    {editingDay && <div className="ds-history-editor">
+      <div className="ds-form-stack"><Field label="Check-in date">{id => <input id={id} type="date" max={date} value={selectedDate ?? date} onChange={event => { if (event.target.value) setSelectedDate(event.target.value); }} />}</Field><p className="ds-supporting-copy">Update the progress recorded for this day.</p></div>
       <CheckInEditor key={`${habit.habitId}:${selectedDate ?? date}`} habitId={habit.habitId} date={selectedDate ?? date} disabled={disabled} onExpired={onExpired}
         onSaved={() => { setAttempt(value => value + 1); onHistorySaved?.(); }} />
-    </>}
+    </div>}
     </>
   );
+  if (calendarOnly) return chart;
   return (
     <HabitChart
       id={`history-${habit.habitId}`}