Use shared modals and combine selected-day actions

src/components/HabitForm.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useRef, useState, type FormEvent } from "react";
-import { Button, SectionHeading } from "./design-system/primitives";
+import { Modal } from "./design-system/Modal";
+import { useRef, useState, type FormEvent } from "react";
+import { Button } from "./design-system/primitives";
 import { Field } from "./design-system/Field";
 import { ScheduleEditor } from "./design-system/EditingWorkbench";
 import { HabitColorPicker } from "./design-system/HabitColorPicker";
@@ -30,12 +31,6 @@ export function HabitForm({
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
 
-  useEffect(() => {
-    const previous = document.activeElement as HTMLElement | null;
-    form.current?.querySelector<HTMLInputElement>("input")?.focus();
-    return () => previous?.focus();
-  }, []);
-
   async function submit(event: FormEvent) {
     event.preventDefault();
     if (saving.current) return;
@@ -80,23 +75,7 @@ export function HabitForm({
   }
 
   return (
-    <section
-      className="ds-section ds-split-section"
-      aria-labelledby="new-habit-title"
-      id="new-habit"
-    >
-      <SectionHeading
-        number="A NEW HABIT"
-        id="new-habit-title"
-        title={
-          <>
-            Make it <em>yours.</em>
-          </>
-        }
-      >
-        Choose what counts as complete. Your schedule follows your account’s
-        timezone.
-      </SectionHeading>
+    <Modal id="new-habit" eyebrow="A NEW HABIT" title={<>Make it <em>yours.</em></>} description="Choose what counts as complete. Your schedule follows your account’s timezone." onClose={onCancel} closeLabel="Close new habit" busy={busy} size="compact" initialFocus="input" returnFocus={() => document.getElementById("add-habit")}>
       <form ref={form} className="ds-edit-content" onSubmit={submit}>
         <fieldset className="ds-task-editor-fieldset" disabled={busy}>
           <Field label="Habit name">
@@ -223,6 +202,6 @@ export function HabitForm({
           </Button>
         </div>
       </form>
-    </section>
+    </Modal>
   );
 }