Refactor HabitColorPicker to use HABIT_COLOR_CHOICES, update styles and tests

- Replaced HABIT_PALETTES with HABIT_COLOR_CHOICES in HabitColorPicker component and related tests.
- Adjusted the layout and styles of the color picker for improved usability.
- Updated tests to reflect changes in color selection logic.
- Modified WorkspacePanel and SettingRow components to allow optional eyebrow and description props.
- Enhanced accessibility tests for calendar navigation.
- Updated calendar model to include a 1-month view option.
- Refined styles across various components for consistency and improved responsiveness.

src/components/HabitForm.tsx

@@ -7,12 +7,6 @@ import { HabitColorPicker } from "./design-system/HabitColorPicker";
 import { habitInput, type Schedule } from "../habits/contracts";
 import { habitRequest } from "../lib/dashboard";
 
-const STARTERS = [
-  { label: "Reading", name: "Read", method: "count", target: 10, unit: "pages", tasks: [""], color: "#426582" },
-  { label: "Get outside", name: "Get outside", method: "manual", target: 1, unit: "times", tasks: [""], color: "#58765b" },
-  { label: "Evening routine", name: "Wind down", method: "tasks", target: 1, unit: "times", tasks: ["Put things away", "Prepare for tomorrow"], color: "#79618d" },
-] as const;
-
 /** Account behavior composed from the design system's existing form components. */
 export function HabitForm({
   date,
@@ -33,22 +27,10 @@ export function HabitForm({
   const [unit, setUnit] = useState("pages");
   const [tasks, setTasks] = useState([""]);
   const [schedule, setSchedule] = useState<Schedule>({ type: "daily" });
-  const [color, setColor] = useState("#58765b");
+  const [color, setColor] = useState("#3e805d");
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState("");
 
-  function applyStarter(starter: (typeof STARTERS)[number] | null) {
-    setName(starter?.name ?? "");
-    setMethod(starter?.method ?? "manual");
-    setTarget(starter?.target ?? 10);
-    setUnit(starter?.unit ?? "pages");
-    setTasks(starter ? [...starter.tasks] : [""]);
-    setColor(starter?.color ?? "#58765b");
-    setSchedule({ type: "daily" });
-    setError("");
-    form.current?.querySelector<HTMLInputElement>("input")?.focus();
-  }
-
   async function submit(event: FormEvent) {
     event.preventDefault();
     if (saving.current) return;
@@ -93,17 +75,9 @@ export function HabitForm({
   }
 
   return (
-    <Modal id="new-habit" eyebrow="A NEW HABIT" title={<>Make it <em>yours.</em></>} description="Schedules follow your account’s timezone." onClose={onCancel} closeLabel="Close new habit" busy={busy} size="compact" initialFocus="input" returnFocus={() => document.getElementById("add-habit")}>
+    <Modal id="new-habit" title="Create habit" 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}>
-          <div className="ds-habit-starters" role="group" aria-label="Start with an idea">
-            <div className="ds-habit-starter-options">
-              {STARTERS.map((starter) => (
-                <Button key={starter.label} variant="secondary" onClick={() => applyStarter(starter)}>{starter.label}</Button>
-              ))}
-              <Button variant="text" onClick={() => applyStarter(null)}>Start from scratch</Button>
-            </div>
-          </div>
+        <fieldset className="ds-task-editor-fieldset ds-habit-form-grid" disabled={busy}>
           <Field label="Habit name">
             {(id) => (
               <input
@@ -116,7 +90,7 @@ export function HabitForm({
               />
             )}
           </Field>
-          <Field label="How will you track it?">
+          <Field label="Tracking">
             {(id) => (
               <select
                 id={id}
@@ -131,9 +105,10 @@ export function HabitForm({
               </select>
             )}
           </Field>
+          <ScheduleEditor value={schedule} onChange={setSchedule} anchorDate={date} />
           {method === "count" && (
             <div className="ds-form-grid">
-              <Field label="Target per scheduled day">
+              <Field label="Daily target">
                 {(id) => (
                   <input
                     id={id}
@@ -202,17 +177,9 @@ export function HabitForm({
               >
                 Add task +
               </Button>
-              <p className="ds-form-feedback">
-                Tasks repeat on each scheduled day.
-              </p>
             </div>
           )}
-          <ScheduleEditor
-            value={schedule}
-            onChange={setSchedule}
-            anchorDate={date}
-          />
-          <HabitColorPicker value={color} onChange={setColor} mode="create" compact />
+          <HabitColorPicker value={color} onChange={setColor} mode="create" />
         </fieldset>
         {error && (
           <p className="ds-form-feedback" role="alert">