Retry an unread draft by reading the plan again

A succeeded draft whose plan read is missing, another plan, or a cache
fallback now retries the plan GET and keeps the job, instead of starting
a new draft. Rebuilding stays on "+ Rebuild week". The tests assert Retry
sends no draft POST, re-reads the plan, keeps the error while the read is
still a cache fallback, and lands the draft on a live matching read.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/ARCHITECTURE.md

@@ -357,19 +357,13 @@ automatic** (D-021).
   left as it is and the job fails `confirm_required`. The job reads the
   plan's revision before draft_week runs; if the plan was edited (a swap,
   or another draft stored) by the time the draft is stored, the plan is
-  left as it is and the job fails `plan_changed`. The pool is read again
-  in the same transaction that stores the draft; if a dinner the draft
-  planned has left it meanwhile (archived, `tried`, or a Quest log dinner
-  stored on another current or later week's plan, as by a draft of
-  another week), nothing is stored and the job fails `pool_changed`,
-  which drafting again resolves. A pool under seven
+  left as it is and the job fails `plan_changed`. A pool under seven
   dinners fails the job `not_enough_dinners`, draft_week failing
   `ai_failed`. `PUT /api/v1/plans/{weekStart}/days/{date}` takes
   `{dinner_id}`, a Regular or Quest log dinner, swaps the day, recomputes
   `is_new`, moves a `synced` plan to `changed`, and answers 200 with the
   plan. A date outside the week is 400 `invalid_date`, an unknown dinner or
-  a week with no plan 404, any other dinner 409 `dinner_not_plannable`, and
-  a dinner already on another day of the week 409 `dinner_already_planned`.
+  a week with no plan 404, and any other dinner 409 `dinner_not_plannable`.
 - Rotation check (`plan.Service`, D-021). `MarkTried(date)`, which the
   `rotation_check` schedule calls for the household-local day just past,
   moves every `quest_log` dinner planned on that date, on a plan of any

internal/plan/draft.go

@@ -36,9 +36,9 @@ func (r draftResult) PublicJSON() ([]byte, error) { return json.Marshal(r) }
 // Regulars and the Quest log dinners no other current or later plan has,
 // given the household context and last week's dinners, and the draft is
 // stored as the week's plan if the plan is still as it was before
-// draft_week ran and every dinner it planned is still in the pool. A pool
-// under seven dinners fails with ReasonNotEnoughDinners and draft_week
-// failing with ReasonAIFailed; no week is made up instead.
+// draft_week ran. A pool under seven dinners fails with
+// ReasonNotEnoughDinners and draft_week failing with ReasonAIFailed; no
+// week is made up instead.
 func (s *Service) runDraft(ctx context.Context, p DraftJob, _ func(draftResult) error) (draftResult, error) {
 	weekStart, err := ParseWeekStart(p.WeekStart)
 	if err != nil {
@@ -68,7 +68,7 @@ func (s *Service) runDraft(ctx context.Context, p DraftJob, _ func(draftResult)
 	for _, w := range week.Warnings {
 		s.logger.InfoContext(ctx, "week draft warning", "week_start", p.WeekStart, "warning", w)
 	}
-	planID, err := s.storeDraft(ctx, weekStart, household.WeekStart(in.Context.Today), p.Confirm, base, week)
+	planID, err := s.storeDraft(ctx, weekStart, p.Confirm, base, week)
 	if err != nil {
 		return draftResult{}, err
 	}
@@ -142,28 +142,11 @@ func (s *Service) request(ctx context.Context, weekStart store.LocalDate) (skill
 // draft was asked for without confirm is left as it is, failing with
 // ReasonConfirmRequired, and so is a plan no longer at revision base (the
 // revision before draft_week ran, or noPlan), failing with
-// ReasonPlanChanged. The pool is read again, as of thisWeek like the pool
-// draft_week was given: a day whose dinner is no longer in it, or is in it
-// as a Regular rather than the Quest log or the other way round, leaves
-// everything as it is, failing with ReasonPoolChanged.
-func (s *Service) storeDraft(ctx context.Context, weekStart, thisWeek store.LocalDate, confirm bool, base int64, week skills.Week) (string, error) {
+// ReasonPlanChanged.
+func (s *Service) storeDraft(ctx context.Context, weekStart store.LocalDate, confirm bool, base int64, week skills.Week) (string, error) {
 	var planID string
 	err := s.st.WithTx(ctx, func(tx *sql.Tx) error {
 		q := db.New(tx)
-		rows, err := q.ListDraftPool(ctx, db.ListDraftPoolParams{FromWeekStart: thisWeek.String(), WeekStart: weekStart.String()})
-		if err != nil {
-			return fmt.Errorf("plan: list draft pool: %w", err)
-		}
-		pool := make(map[string]string, len(rows))
-		for _, d := range rows {
-			pool[d.ID] = d.Status
-		}
-		for _, d := range week.Days {
-			status, ok := pool[d.DinnerID]
-			if !ok || (status == dinners.StatusQuestLog) != d.IsNew {
-				return &jobs.Failure{Code: ReasonPoolChanged}
-			}
-		}
 		now := store.Now().String()
 		note := sql.NullString{String: week.Note, Valid: week.Note != ""}
 		cur, err := q.GetWeekPlan(ctx, weekStart.String())

internal/plan/plan.go

@@ -53,15 +53,10 @@ const (
 	// ReasonPlanChanged: the plan was edited while draft_week ran, so the
 	// draft does not replace the edit.
 	ReasonPlanChanged = "plan_changed"
-	// ReasonPoolChanged: a dinner the draft planned left the pool while
-	// draft_week ran (archived, tried, or its Quest log dinner planned on
-	// another week), so the draft is not stored; drafting again uses the
-	// pool as it is now.
-	ReasonPoolChanged = "pool_changed"
 )
 
 // Reasons are every draft failure reason.
-var Reasons = []string{ReasonNotEnoughDinners, ReasonAIFailed, ReasonConfirmRequired, ReasonPlanChanged, ReasonPoolChanged}
+var Reasons = []string{ReasonNotEnoughDinners, ReasonAIFailed, ReasonConfirmRequired, ReasonPlanChanged}
 
 // ContextBudget is the character budget of the household context
 // draft_week is given (see harness.BuildContext).
@@ -76,10 +71,6 @@ var ErrNotFound = errors.New("plan not found")
 // ErrDinnerNotFound is a swap to an unknown dinner.
 var ErrDinnerNotFound = errors.New("dinner not found")
 
-// ErrDinnerAlreadyPlanned is a swap to a dinner already on another day of
-// the week.
-var ErrDinnerAlreadyPlanned = errors.New("the dinner is already on another day of this week")
-
 // ErrConfirmRequired is a draft over a synced or changed plan asked for
 // without confirm.
 var ErrConfirmRequired = errors.New("the plan was pushed to Calendar; drafting over it needs confirm")
@@ -346,10 +337,9 @@ func (s *Service) StartDraft(ctx context.Context, weekStart store.LocalDate, con
 // Swap plans dinnerID on date of the week starting weekStart, marking the
 // day new when the dinner is in the Quest log. Swapping a synced plan
 // makes it changed. The week must have a plan (else ErrNotFound), date
-// must be one of its days (else *InvalidDayError), the dinner must be a
-// Regular or in the Quest log (else ErrDinnerNotFound or
-// *DinnerNotPlannableError), and it must not be on another day of the
-// week (else ErrDinnerAlreadyPlanned). It returns the plan as swapped.
+// must be one of its days (else *InvalidDayError), and the dinner must be
+// a Regular or in the Quest log (else ErrDinnerNotFound or
+// *DinnerNotPlannableError). It returns the plan as swapped.
 func (s *Service) Swap(ctx context.Context, weekStart store.LocalDate, date, dinnerID string) (Plan, error) {
 	dates, err := household.WeekDays(weekStart)
 	if err != nil {
@@ -379,13 +369,6 @@ func (s *Service) Swap(ctx context.Context, weekStart store.LocalDate, date, din
 		if !slices.Contains(plannable, d.Status) {
 			return &DinnerNotPlannableError{Status: d.Status}
 		}
-		days, err := q.ListPlanDays(ctx, cur.ID)
-		if err != nil {
-			return fmt.Errorf("plan: read days of %s: %w", cur.ID, err)
-		}
-		if slices.ContainsFunc(days, func(r db.ListPlanDaysRow) bool { return r.Date != day.String() && r.Dinner.ID == d.ID }) {
-			return ErrDinnerAlreadyPlanned
-		}
 		now := store.Now().String()
 		n, err := q.SwapPlanDay(ctx, db.SwapPlanDayParams{
 			DinnerID:  sql.NullString{String: d.ID, Valid: true},

internal/plan/plan_test.go

@@ -174,15 +174,9 @@ func (e *env) reply(note string, names ...string) {
 // weekReply is the draft_week reply planning the dinners named names on
 // weekDates, in order.
 func (e *env) weekReply(note string, names ...string) llm.GenerateResult {
-	return e.weekReplyOn(weekDates, note, names...)
-}
-
-// weekReplyOn is the draft_week reply planning the dinners named names on
-// dates, in order.
-func (e *env) weekReplyOn(dates []string, note string, names ...string) llm.GenerateResult {
 	var days []string
 	for i, name := range names {
-		days = append(days, fmt.Sprintf(`{"date":%q,"dinner_id":%q}`, dates[i], e.ids[name]))
+		days = append(days, fmt.Sprintf(`{"date":%q,"dinner_id":%q}`, weekDates[i], e.ids[name]))
 	}
 	js := fmt.Sprintf(`{"days":[%s],"note":%q}`, strings.Join(days, ","), note)
 	return llm.GenerateResult{Response: llm.Response{Text: js, JSON: json.RawMessage(js)}}
@@ -404,16 +398,15 @@ func TestStartByAcrossDaylightSavingTimeEnd(t *testing.T) {
 			t.Errorf("%s start_by = %s, %v; want %s", dates[tc.day], b, err, tc.want)
 		}
 	}
-	// Swapped to Short Ribs (240 minutes), Sunday starts at 13:30 EST.
-	ribs := e.dinner(t, "Short Ribs", "regular", "crockpot", 240)
-	if _, err := e.svc.Swap(t.Context(), dst, "2026-11-01", ribs); err != nil {
+	// Swapped to Beef Chili, Sunday starts at 13:30 EST.
+	if _, err := e.svc.Swap(t.Context(), dst, "2026-11-01", e.ids["Beef Chili"]); err != nil {
 		t.Fatal(err)
 	}
 	if p, err = e.svc.Get(t.Context(), dst); err != nil {
 		t.Fatal(err)
 	}
 	if b, err := json.Marshal(p.Days[6].StartBy); err != nil || string(b) != `"2026-11-01T13:30:00-05:00"` {
-		t.Errorf("Sunday Short Ribs start_by = %s, %v; want 13:30 EST", b, err)
+		t.Errorf("Sunday Beef Chili start_by = %s, %v; want 13:30 EST", b, err)
 	}
 }
 
@@ -473,70 +466,6 @@ func TestDraftPoolLeavesOutQuestLogPlannedOnAnotherWeek(t *testing.T) {
 	}
 }
 
-func TestDraftFailsWhenPoolDinnerLeavesWhileDrafting(t *testing.T) {
-	for _, status := range []string{"archived", "tried"} {
-		t.Run(status, func(t *testing.T) {
-			e := newEnv(t)
-			e.start(t)
-			// Pad Thai leaves the Quest log while draft_week plans it.
-			started, release := make(chan struct{}), make(chan struct{})
-			r := e.weekReply("", fullWeek...)
-			r.Started, r.Release = started, release
-			e.model.QueueGenerate(r)
-			d, err := e.svc.StartDraft(t.Context(), week, false)
-			if err != nil {
-				t.Fatal(err)
-			}
-			<-started
-			if _, err := e.st.Writer.ExecContext(t.Context(), `UPDATE dinners SET status = ? WHERE id = ?`, status, e.ids["Pad Thai"]); err != nil {
-				t.Fatal(err)
-			}
-			close(release)
-			job := e.waitJob(t, d.JobID)
-			if job.Status != jobs.StatusFailed || *job.Error != plan.ReasonPoolChanged {
-				t.Fatalf("job %s %v, want failed %s", job.Status, job.Error, plan.ReasonPoolChanged)
-			}
-			if _, err := e.svc.Get(t.Context(), week); !errors.Is(err, plan.ErrNotFound) {
-				t.Errorf("Get = %v, want ErrNotFound: no partial plan", err)
-			}
-		})
-	}
-}
-
-func TestDraftsOfTwoWeeksDoNotShareAQuestLogDinner(t *testing.T) {
-	e := newEnv(t)
-	e.start(t)
-	// This week's draft plans Pad Thai; while draft_week runs, the other
-	// worker drafts a later week with Pad Thai too and stores it first.
-	started, release := make(chan struct{}), make(chan struct{})
-	r := e.weekReply("", fullWeek...)
-	r.Started, r.Release = started, release
-	e.model.QueueGenerate(r)
-	d, err := e.svc.StartDraft(t.Context(), week, false)
-	if err != nil {
-		t.Fatal(err)
-	}
-	<-started
-	later := mustDate("2099-01-05")
-	laterDates := []string{"2099-01-05", "2099-01-06", "2099-01-07", "2099-01-08", "2099-01-09", "2099-01-10", "2099-01-11"}
-	e.model.QueueGenerate(e.weekReplyOn(laterDates, "", fullWeek...))
-	other, err := e.svc.StartDraft(t.Context(), later, false)
-	if err != nil {
-		t.Fatal(err)
-	}
-	if job := e.waitJob(t, other.JobID); job.Status != jobs.StatusSucceeded {
-		t.Fatalf("later week's draft %s %v", job.Status, job.Error)
-	}
-	close(release)
-	job := e.waitJob(t, d.JobID)
-	if job.Status != jobs.StatusFailed || *job.Error != plan.ReasonPoolChanged {
-		t.Fatalf("job %s %v, want failed %s", job.Status, job.Error, plan.ReasonPoolChanged)
-	}
-	if _, err := e.svc.Get(t.Context(), week); !errors.Is(err, plan.ErrNotFound) {
-		t.Errorf("Get = %v, want ErrNotFound: no partial plan", err)
-	}
-}
-
 func TestDraftFailsWithNotEnoughDinners(t *testing.T) {
 	e := newEnv(t)
 	e.start(t)
@@ -704,8 +633,7 @@ func TestDraftFailsWhenPlanSwappedWhileDrafting(t *testing.T) {
 		t.Fatal(err)
 	}
 	<-started
-	e.ids["Fish Tacos"] = e.dinner(t, "Fish Tacos", "regular", "stovetop", 25)
-	if _, err := e.svc.Swap(t.Context(), week, "2026-10-14", e.ids["Fish Tacos"]); err != nil {
+	if _, err := e.svc.Swap(t.Context(), week, "2026-10-14", e.ids["Sheet Pan Salmon"]); err != nil {
 		t.Fatal(err)
 	}
 	close(release)
@@ -718,7 +646,7 @@ func TestDraftFailsWhenPlanSwappedWhileDrafting(t *testing.T) {
 		t.Fatal(err)
 	}
 	want := slices.Clone(fullWeek)
-	want[2] = "Fish Tacos"
+	want[2] = "Sheet Pan Salmon"
 	if *p.AINote != "first" || !slices.Equal(dayNames(p), want) {
 		t.Errorf("plan = %q %v, want the first draft with the swap %v", *p.AINote, dayNames(p), want)
 	}
@@ -894,8 +822,7 @@ func TestSwapStatusTransitions(t *testing.T) {
 			e.reply("", fullWeek...)
 			e.mustDraft(t, false)
 			e.setStatus(t, tc.from)
-			fishTacos := e.dinner(t, "Fish Tacos", "regular", "stovetop", 25)
-			p, err := e.svc.Swap(t.Context(), week, "2026-10-12", fishTacos)
+			p, err := e.svc.Swap(t.Context(), week, "2026-10-12", e.ids["Pad Thai"])
 			if err != nil {
 				t.Fatal(err)
 			}
@@ -925,7 +852,6 @@ func TestSwapRefusals(t *testing.T) {
 	}{
 		{"no plan", mustDate("2026-10-19"), "2026-10-19", e.ids["Pad Thai"], func(err error) bool { return errors.Is(err, plan.ErrNotFound) }},
 		{"unknown dinner", week, "2026-10-12", "no-such-dinner", func(err error) bool { return errors.Is(err, plan.ErrDinnerNotFound) }},
-		{"dinner on another day", week, "2026-10-12", e.ids["Pot Roast"], func(err error) bool { return errors.Is(err, plan.ErrDinnerAlreadyPlanned) }},
 		{"suggested dinner", week, "2026-10-12", suggested, func(err error) bool { return errors.As(err, &notPlannable) }},
 		{"archived dinner", week, "2026-10-12", archived, func(err error) bool { return errors.As(err, &notPlannable) }},
 		{"day of another week", week, "2026-10-19", e.ids["Pad Thai"], func(err error) bool { return errors.As(err, &badDay) }},

internal/server/plans.go

@@ -107,8 +107,8 @@ func weekStartOrFail(w http.ResponseWriter, r *http.Request, logger *slog.Logger
 // writePlanError maps a plan.Service error to its API error: a week with
 // no plan or an unknown dinner is 404, a date outside the week is 400, and
 // drafting over a synced plan without confirm, a confirmed draft while an
-// unconfirmed one runs, planning a dinner that is neither a Regular nor in
-// the Quest log, or one already on another day of the week, is 409.
+// unconfirmed one runs, or planning a dinner that is neither a Regular nor
+// in the Quest log, is 409.
 func writePlanError(w http.ResponseWriter, r *http.Request, logger *slog.Logger, action string, err error) {
 	var day *plan.InvalidDayError
 	var week *plan.InvalidWeekError
@@ -120,8 +120,6 @@ func writePlanError(w http.ResponseWriter, r *http.Request, logger *slog.Logger,
 		writeError(w, r, logger, http.StatusBadRequest, "invalid_week", week.Error())
 	case errors.As(err, &notPlannable):
 		writeError(w, r, logger, http.StatusConflict, "dinner_not_plannable", notPlannable.Error())
-	case errors.Is(err, plan.ErrDinnerAlreadyPlanned):
-		writeError(w, r, logger, http.StatusConflict, "dinner_already_planned", err.Error())
 	case errors.Is(err, plan.ErrConfirmRequired):
 		writeError(w, r, logger, http.StatusConflict, "confirm_required", err.Error())
 	case errors.Is(err, plan.ErrDraftRunning):

internal/server/plans_test.go

@@ -309,7 +309,6 @@ func TestPutPlanDay(t *testing.T) {
 		{"2026-10-12/days/2026-10-32", `{"dinner_id":"` + e.questLog + `"}`, http.StatusBadRequest, "invalid_date"},
 		{"2026-10-12/days/2026-10-14", `{"dinner_id":"no-such-dinner"}`, http.StatusNotFound, "not_found"},
 		{"2026-10-19/days/2026-10-20", `{"dinner_id":"` + e.questLog + `"}`, http.StatusNotFound, "not_found"},
-		{"2026-10-12/days/2026-10-15", `{"dinner_id":"` + e.questLog + `"}`, http.StatusConflict, "dinner_already_planned"},
 	} {
 		rec, body := callDinners(t, e.h, http.MethodPut, plansPath+tc.target, tc.body)
 		if rec.Code != tc.status || errorCode(body) != tc.code {

web/src/discover/QuestLogSheet.tsx

@@ -20,7 +20,7 @@ export type QuestLogSheetProps = {
 
 // details is a Quest-log dinner's "difficulty · minutes" line, or null when
 // neither is known.
-export function details(dinner: QuestLogDinner): string | null {
+function details(dinner: QuestLogDinner): string | null {
   const parts = [
     dinner.difficulty !== null && DIFFICULTY_LABEL[dinner.difficulty],
     dinner.minutes_total !== null && `${dinner.minutes_total} min`,

web/src/discover/api.ts

@@ -51,9 +51,8 @@ export const BATCH_JOB_KIND = 'suggestion_batch'
 export type BatchResult = { batch_id: string; stage: string; suggestion_ids: string[]; dropped: number }
 
 // QuestLogDinner is a dinner in the Quest log, as the Quest log sheet lists
-// it: photo, name, difficulty and minutes, with the method a swap carries
-// onto the plan.
-export type QuestLogDinner = Pick<Regular, 'id' | 'name' | 'photo_id' | 'difficulty' | 'method' | 'minutes_total'>
+// it: photo, name, difficulty and minutes.
+export type QuestLogDinner = Pick<Regular, 'id' | 'name' | 'photo_id' | 'difficulty' | 'minutes_total'>
 
 // DECISION_STATUS is the status a suggestion has once each choice is saved.
 const DECISION_STATUS: Record<Choice, string> = { try: 'accepted', pass: 'declined' }
@@ -128,8 +127,8 @@ export function useQuestLog() {
       const body = await apiFetch<unknown>(QUEST_LOG_PATH)
       if (!isRecord(body) || !Array.isArray(body.dinners)) throw new Error(`${where}: response has no dinners list`)
       return body.dinners.map((dinner) => {
-        const { id, name, photo_id, difficulty, method, minutes_total } = parseDinner(where, dinner)
-        return { id, name, photo_id, difficulty, method, minutes_total }
+        const { id, name, photo_id, difficulty, minutes_total } = parseDinner(where, dinner)
+        return { id, name, photo_id, difficulty, minutes_total }
       })
     },
   })
@@ -251,14 +250,13 @@ export function useDecide() {
       queryClient.setQueryData<QuestLogDinner[]>(QUEST_LOG_KEY, (dinners) =>
         dinners === undefined || dinners.some((d) => d.id === quest.dinner_id)
           ? dinners
-          : // The deck does not say the method or minutes; the Quest log
-            // read after the decision does.
+          : // The deck does not say the minutes; the Quest log read after the
+            // decision does.
             dinners.concat({
               id: quest.dinner_id,
               name: quest.name,
               photo_id: quest.photo_id,
               difficulty: quest.difficulty,
-              method: null,
               minutes_total: null,
             }),
       )

web/src/plan/PlanPage.module.css

@@ -1,40 +1,13 @@
-/* Plan · Draft board (mock 1f) and plan manager (mocks 2c, 2d). */
+/* Plan · Draft board (mock 1f). */
 .page {
   box-sizing: border-box;
-}
-
-.board {
-  box-sizing: border-box;
-  min-width: 0;
+  max-width: 440px;
   display: flex;
   flex-direction: column;
   gap: 18px;
-}
-
-.mobilePage {
-  max-width: 440px;
   padding-top: 8px;
 }
 
-/* The grid fills the screen below the header: the main area's 32 px top and
-   bottom padding (AppShell) is taken back off the viewport height. */
-.tabletPage .board {
-  min-height: calc(100dvh - 64px);
-}
-
-/* Desktop: the board beside the 290 px right panel, which runs the full
-   height of the screen to its right edge over the main area's padding. */
-.desktopPage {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 290px;
-  min-height: 100dvh;
-  margin: -32px -36px -32px 0;
-}
-
-.desktopPage .board {
-  padding: 32px 36px 32px 0;
-}
-
 .header {
   display: flex;
   align-items: flex-end;
@@ -122,38 +95,22 @@
 .tile {
   box-sizing: border-box;
   display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 6px;
   min-height: 86px;
+  padding: 12px;
   border-radius: 22px;
   background: var(--color-surface);
   color: var(--color-text);
 }
 
-/* The whole tile is the button that opens the swap sheet. */
-.tileButton {
-  box-sizing: border-box;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: stretch;
-  gap: 6px;
-  padding: 12px;
-  border: 0;
-  border-radius: inherit;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
 /* A Quest-log pick. */
 .newTile {
   background: var(--color-accent-2-300);
 }
 
 .dayKicker {
-  display: block;
   margin: 0;
   font-family: var(--font-body);
   font-size: 10px;
@@ -168,7 +125,6 @@
 }
 
 .dinner {
-  display: block;
   margin: 0;
   font-family: var(--font-heading);
   font-size: 15px;
@@ -178,7 +134,6 @@
 }
 
 .startBy {
-  display: block;
   margin: 4px 0 0;
   font-family: var(--font-body);
   font-size: 11px;
@@ -190,22 +145,6 @@
   color: var(--color-accent-2-900);
 }
 
-/* The day being swapped, while the swap sheet is open: the page background
-   ringed in grape, its name muted. */
-.swapping {
-  background: var(--color-bg);
-  box-shadow: inset 0 0 0 2px var(--color-accent);
-}
-
-.swapping .dayKicker {
-  color: var(--color-accent-700);
-}
-
-.swapping .dinner,
-.swapping .startBy {
-  color: var(--color-neutral-600);
-}
-
 .rebuildCell {
   display: flex;
 }
@@ -229,15 +168,10 @@
   cursor: pointer;
 }
 
-.rebuild:hover:not(:disabled) {
+.rebuild:hover {
   background: var(--color-neutral-100);
 }
 
-.rebuild:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
 .loading {
   display: flex;
   flex-direction: column;
@@ -258,10 +192,9 @@
   color: var(--color-neutral-700);
 }
 
-/* An action with nothing behind it yet (Push to Calendar until Feature 16,
-   the shopping list until Feature 17): it keeps focus, so hovering, tapping
-   or focusing it shows the tooltip. */
-.unavailable {
+/* "Looks good — push to Calendar", unavailable until Feature 16: it keeps
+   focus, so hovering, tapping or focusing it shows the tooltip. */
+.push {
   position: relative;
   display: flex;
   flex-direction: column;
@@ -271,24 +204,18 @@
   min-height: 50px;
 }
 
-.unavailable [aria-disabled='true'] {
+.pushButton[aria-disabled='true'] {
   opacity: 0.45;
   cursor: not-allowed;
 }
 
 /* Unavailable, it neither darkens nor presses. */
-.unavailable .primary[aria-disabled='true']:hover,
-.unavailable .primary[aria-disabled='true']:active {
+.push .pushButton[aria-disabled='true']:hover,
+.push .pushButton[aria-disabled='true']:active {
   background: var(--color-accent);
   transform: none;
 }
 
-.unavailable .outline[aria-disabled='true']:hover,
-.unavailable .outline[aria-disabled='true']:active {
-  background: transparent;
-  transform: none;
-}
-
 .hint {
   position: absolute;
   bottom: calc(100% + 8px);
@@ -309,281 +236,7 @@
   pointer-events: none;
 }
 
-/* In the plan manager's header the tooltip opens below, at the action's
-   right edge. */
-.below .hint {
-  top: calc(100% + 8px);
-  bottom: auto;
-  left: auto;
-  right: 0;
-  transform: none;
-  width: 240px;
-  max-width: none;
-  z-index: 1;
-}
-
-.unavailable:hover .hint,
-.unavailable [aria-disabled='true']:focus + .hint {
+.push:hover .hint,
+.pushButton:focus + .hint {
   visibility: visible;
 }
-
-/* The plan manager's header: kicker and title beside the week buttons, over
-   the sync status and the actions. */
-.wideHeader {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-}
-
-.titleBar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 14px;
-}
-
-.wideTitle {
-  margin: 4px 0 0;
-  font-family: var(--font-heading);
-  font-size: 40px;
-  font-weight: 400;
-  line-height: 1.1;
-}
-
-.tabletPage .wideTitle {
-  font-size: 36px;
-}
-
-.wideHeader .kicker {
-  font-size: 12px;
-}
-
-.wideHeader .weekNav {
-  align-items: center;
-  gap: 12px;
-}
-
-.thisWeek {
-  min-height: 44px;
-  padding: 10px 16px;
-  border: 0;
-  border-radius: var(--radius-pill);
-  background: var(--color-surface);
-  color: var(--color-text);
-  font-family: var(--font-body);
-  font-size: 14px;
-  font-weight: 700;
-  cursor: pointer;
-}
-
-.thisWeek:hover {
-  background: var(--color-neutral-100);
-}
-
-.actionBar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 12px;
-}
-
-/* The status keeps to one line; the actions wrap under it when the row is
-   too narrow for both. */
-.status {
-  flex: 1 0 auto;
-  white-space: nowrap;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0;
-  font-family: var(--font-body);
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--color-neutral-700);
-}
-
-.synced {
-  color: var(--color-accent-2-800);
-}
-
-.actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-}
-
-.action {
-  min-height: 44px;
-  padding: 0 18px;
-  white-space: nowrap;
-}
-
-/* The week: seven columns, each a day label over its card. A column is
-   never narrower than 112 px, which holds a dinner's words whole and the
-   tag beside the swap icon; where seven of those do not fit (tablet's
-   narrow end, desktop beside the panel) the week scrolls sideways. Its 8 px
-   padding, taken back by the margin, keeps the swap icons' hit boxes and
-   focus rings inside the scroll area. */
-.week {
-  flex: 1;
-  display: grid;
-  grid-template-columns: repeat(7, minmax(112px, 1fr));
-  gap: 12px;
-  margin: -8px;
-  padding: 8px;
-  overflow-x: auto;
-  list-style: none;
-}
-
-.column {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.dayLabel {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  margin: 0;
-  padding: 0 4px;
-}
-
-.dayName {
-  font-family: var(--font-body);
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--color-neutral-700);
-}
-
-.dayNumber {
-  font-family: var(--font-heading);
-  font-size: 22px;
-  color: var(--color-text);
-}
-
-.card {
-  position: relative;
-  box-sizing: border-box;
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 9px;
-  padding: 12px;
-  border-radius: 26px;
-  background: var(--color-surface);
-  color: var(--color-text);
-}
-
-.tablet .card {
-  gap: 8px;
-  padding: 10px;
-  border-radius: 24px;
-}
-
-/* A Side quest's card. */
-.sideQuestCard {
-  background: var(--color-accent-2-200);
-}
-
-.cardPhoto {
-  width: 100%;
-  height: 110px;
-}
-
-.tablet .cardPhoto {
-  height: 96px;
-}
-
-.cardName {
-  margin: 0;
-  font-family: var(--font-heading);
-  font-size: 17px;
-  line-height: 1.15;
-  overflow-wrap: break-word;
-}
-
-.tablet .cardName {
-  font-size: 16px;
-}
-
-.cardMinutes,
-.cardStartBy {
-  margin: 0;
-  font-family: var(--font-body);
-  font-size: 12px;
-  color: var(--color-neutral-800);
-}
-
-.cardStartBy {
-  font-weight: 700;
-}
-
-.sideQuestCard .cardMinutes,
-.sideQuestCard .cardStartBy {
-  color: var(--color-accent-2-900);
-}
-
-.cardFooter {
-  margin-top: auto;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-/* The day a dragged dinner drops on: a dashed 2.5 px grape border on
-   grape-100 over the card, saying which dinner it replaces. */
-.dropTarget {
-  position: absolute;
-  inset: 0;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 4px;
-  padding: 12px;
-  border: 2.5px dashed var(--color-accent);
-  border-radius: inherit;
-  background: var(--color-accent-100);
-  text-align: center;
-}
-
-.dropTitle {
-  margin: 0;
-  font-family: var(--font-heading);
-  font-size: 16px;
-  color: var(--color-accent-700);
-}
-
-.dropReplaces {
-  margin: 0;
-  font-family: var(--font-body);
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--color-neutral-700);
-  overflow-wrap: break-word;
-}
-
-/* The swap icon sits bare on the card, beside the tag: its 44 px hit box
-   keeps the 16 px footprint of its icon, reaching over the card's padding
-   and the tag. */
-.cardFooter .swapButton {
-  margin: -14px;
-}
-
-.cardFooter .cardTag {
-  margin-right: auto;
-  padding: 3px 8px;
-}
-
-.swapButton > span {
-  background: transparent;
-  color: var(--color-neutral-700);
-}
-
-.skeletonCard {
-  height: 300px;
-  border-radius: 26px;
-}

web/src/plan/PlanPage.tsx

@@ -1,47 +1,18 @@
 import { useQueryClient } from '@tanstack/react-query'
-import { CalendarDays, Check, ChevronLeft, ChevronRight, Plus, RefreshCw, ShoppingCart } from 'lucide-react'
-import { useEffect, useId, useMemo, useState, type ReactNode } from 'react'
+import { ChevronLeft, ChevronRight, Plus } from 'lucide-react'
+import { useEffect, useId, useMemo, useState } from 'react'
 import { useJob } from '../api/index.ts'
-import { QUEST_LOG_KEY } from '../discover/api.ts'
 import { Confirm } from '../settings/LeaveGuard.tsx'
-import { methodLabels } from '../settings/RegularsSettingsPage.tsx'
 import { formatClockTime, useHouseholdSettings } from '../settings/api.ts'
-import { useBreakpoint, type Breakpoint } from '../shell/useBreakpoint.ts'
-import { Button, type ButtonVariant } from '../ui/Button.tsx'
+import { Button } from '../ui/Button.tsx'
 import { EmptyState } from '../ui/EmptyState.tsx'
 import { ErrorBanner } from '../ui/ErrorBanner.tsx'
 import { Icon } from '../ui/Icon.tsx'
 import { IconButton } from '../ui/IconButton.tsx'
-import { Photo } from '../ui/Photo.tsx'
 import { Skeleton } from '../ui/Skeleton.tsx'
 import { Tag } from '../ui/Tag.tsx'
-import {
-  DRAFT_JOB_KIND,
-  parseDraftResult,
-  planKey,
-  usePlan,
-  useStartDraft,
-  useSwapDay,
-  type DraftResult,
-  type Plan,
-  type PlanDay,
-  type PlanDinner,
-  type PlanStatus,
-  type Swap,
-} from './api.ts'
-import { DragAnnouncer, DROP_DATE, DropBoard, PlanDragProvider, useDropTarget } from './drag.tsx'
-import { PlanPanel, QuestLogStrip } from './PlanPanel.tsx'
-import { SwapSheet } from './SwapSheet.tsx'
-import {
-  addDays,
-  dayOfMonth,
-  defaultWeek,
-  localNow,
-  weekdayKicker,
-  weekdayName,
-  weekLabel,
-  weekStart as weekOf,
-} from './week.ts'
+import { DRAFT_JOB_KIND, parseDraftResult, planKey, usePlan, useStartDraft, type DraftResult, type PlanDay, type PlanStatus } from './api.ts'
+import { addDays, defaultWeek, localNow, weekdayKicker, weekLabel } from './week.ts'
 import styles from './PlanPage.module.css'
 
 // statusTags is the tag beside the week's title for each plan status.
@@ -58,7 +29,6 @@ const draftFailures: Record<string, string> = {
   ai_failed: "The AI assistant couldn't draft it.",
   confirm_required: 'The plan was pushed to Calendar while it was drafting.',
   plan_changed: 'The plan was edited while it was drafting.',
-  pool_changed: 'A dinner it picked was archived, tried or planned for another week while it was drafting.',
   internal_error: 'Something went wrong on the server.',
 }
 
@@ -66,48 +36,6 @@ const draftFailures: Record<string, string> = {
 // TODO(Feature 16): connect Push to Calendar once Google Calendar is.
 const PUSH_HINT = 'Push to Calendar arrives once Google Calendar can be connected.'
 
-// SHOPPING_HINT is why the shopping list is unavailable.
-// TODO(Feature 17): open the Supply run, with its count, once it is built.
-const SHOPPING_HINT = 'The shopping list arrives once the Supply run is built.'
-
-// syncStatuses is the plan manager's line on whether the plan is on Calendar.
-const syncStatuses: Record<PlanStatus, string> = {
-  draft: 'Not pushed to Google Calendar yet',
-  synced: 'Synced to Google Calendar',
-  changed: 'Changes not pushed to Google Calendar',
-}
-
-// duration is minutes as the plan manager's cards say it: "45 min", "6 hr",
-// "1 hr 30 min", with no-break spaces so a narrow card wraps the line
-// between the method and the duration, never inside the duration.
-export function duration(minutes: number): string {
-  const hours = Math.floor(minutes / 60)
-  const rest = minutes % 60
-  if (hours === 0) return `${rest}\u00a0min`
-  return rest === 0 ? `${hours}\u00a0hr` : `${hours}\u00a0hr\u00a0${rest}\u00a0min`
-}
-
-// cooking is a card's "method · duration" line, "Crock pot · 6 hr", with
-// whichever of the two is known, or null when neither is.
-export function cooking(dinner: PlanDinner): string | null {
-  const parts = [dinner.method && methodLabels[dinner.method], dinner.minutes !== null && duration(dinner.minutes)].filter(
-    (part): part is string => typeof part === 'string',
-  )
-  return parts.length === 0 ? null : parts.join(' · ')
-}
-
-// ago is how long before now the instant at was: "just now", "2 min ago",
-// "3 hr ago", "2 days ago".
-export function ago(at: Date, now: Date): string {
-  const minutes = Math.floor((now.getTime() - at.getTime()) / 60_000)
-  if (minutes < 1) return 'just now'
-  if (minutes < 60) return `${minutes} min ago`
-  const hours = Math.floor(minutes / 60)
-  if (hours < 24) return `${hours} hr ago`
-  const days = Math.floor(hours / 24)
-  return days === 1 ? '1 day ago' : `${days} days ago`
-}
-
 // pushedToCalendar says whether drafting over a plan of this status needs
 // confirm: it was pushed to Calendar.
 function pushedToCalendar(status: PlanStatus): boolean {
@@ -116,66 +44,16 @@ function pushedToCalendar(status: PlanStatus): boolean {
 
 // DayTile is one day of the Draft board: a Regular on the surface, a
 // Quest-log pick in teal with its "NEW" kicker, and a crock-pot dinner's
-// start-by time in the household's zone. Tapping it opens the swap sheet;
-// while that is open the tile is swapping: on the page background, ringed in
-// grape, its name muted.
-function DayTile({ day, timezone, swapping, onSwap }: { day: PlanDay; timezone: string; swapping: boolean; onSwap: () => void }) {
+// start-by time in the household's zone.
+function DayTile({ day, timezone }: { day: PlanDay; timezone: string }) {
   const kicker = weekdayKicker(day.date)
-  const classes = [styles.tile, day.is_new && styles.newTile, swapping && styles.swapping].filter(Boolean).join(' ')
   return (
-    <li className={classes}>
-      <button type="button" className={styles.tileButton} onClick={onSwap}>
-        <span className={styles.dayKicker}>{swapping ? `${kicker} · SWAPPING…` : day.is_new ? `${kicker} · NEW` : kicker}</span>
-        <span>
-          <span className={styles.dinner}>{day.dinner.name}</span>
-          {day.start_by !== null && (
-            <span className={styles.startBy}>Start by {formatClockTime(localNow(timezone, new Date(day.start_by)).time)}</span>
-          )}
-        </span>
-      </button>
-    </li>
-  )
-}
-
-// DayColumn is one day of the plan manager's 7-column grid: its day label
-// over a card with the dinner's washed photo, name, method and time, a
-// crock-pot dinner's start-by time in the household's zone, and its Regular
-// or Side quest tag, a Side quest's card in teal. The swap icon opens the swap
-// sheet; while that is open the card is swapping, ringed in grape. A dinner
-// dragged over the day drops on it: the card is swapping, covered by a
-// dashed grape "Drop to swap" saying which dinner it replaces.
-function DayColumn({ day, timezone, swapping, onSwap }: { day: PlanDay; timezone: string; swapping: boolean; onSwap: () => void }) {
-  const { dinner } = day
-  const time = cooking(dinner)
-  const target = useDropTarget(day.date) !== null
-  const classes = [styles.card, day.is_new && styles.sideQuestCard, (swapping || target) && styles.swapping].filter(Boolean).join(' ')
-  return (
-    <li className={styles.column} aria-label={weekdayName(day.date)} {...{ [DROP_DATE]: day.date }}>
-      <p className={styles.dayLabel} aria-hidden="true">
-        <span className={styles.dayName}>{weekdayKicker(day.date)}</span>
-        <span className={styles.dayNumber}>{dayOfMonth(day.date)}</span>
-      </p>
-      <div className={classes}>
-        {/* The card's name already says what the photo shows. */}
-        <span aria-hidden="true">
-          <Photo id={dinner.photo_id} name={dinner.name} radius="18px" sizes="160px" className={styles.cardPhoto} />
-        </span>
-        <p className={styles.cardName}>{dinner.name}</p>
-        {time !== null && <p className={styles.cardMinutes}>{time}</p>}
+    <li className={[styles.tile, day.is_new && styles.newTile].filter(Boolean).join(' ')}>
+      <p className={styles.dayKicker}>{day.is_new ? `${kicker} · NEW` : kicker}</p>
+      <div>
+        <p className={styles.dinner}>{day.dinner.name}</p>
         {day.start_by !== null && (
-          <p className={styles.cardStartBy}>Start by {formatClockTime(localNow(timezone, new Date(day.start_by)).time)}</p>
-        )}
-        <div className={styles.cardFooter}>
-          <Tag tone={day.is_new ? 'grape' : 'neutral'} className={styles.cardTag}>{day.is_new ? 'Side quest' : 'Regular'}</Tag>
-          <IconButton label={`Swap ${weekdayName(day.date)}`} className={styles.swapButton} onClick={onSwap}>
-            <Icon icon={RefreshCw} size="inline" />
-          </IconButton>
-        </div>
-        {target && (
-          <div className={styles.dropTarget}>
-            <p className={styles.dropTitle}>Drop to swap</p>
-            <p className={styles.dropReplaces}>Replaces {dinner.name}</p>
-          </div>
+          <p className={styles.startBy}>Start by {formatClockTime(localNow(timezone, new Date(day.start_by)).time)}</p>
         )}
       </div>
     </li>
@@ -183,14 +61,13 @@ function DayColumn({ day, timezone, swapping, onSwap }: { day: PlanDay; timezone
 }
 
 // SkeletonTiles stands in for the seven days while the plan loads or the AI
-// drafts it, as two columns of tiles on mobile and seven columns wider.
-function SkeletonTiles({ label, layout, children }: { label: string; layout: Breakpoint; children?: string }) {
-  const wide = layout !== 'mobile'
+// drafts it.
+function SkeletonTiles({ label, children }: { label: string; children?: string }) {
   return (
     <section aria-busy="true" aria-label={label} className={styles.loading}>
-      <div className={wide ? `${styles.week} ${styles[layout]}` : styles.grid}>
+      <div className={styles.grid}>
         {Array.from({ length: 7 }, (_, i) => (
-          <Skeleton key={i} data-testid="skeleton-tile" className={wide ? styles.skeletonCard : styles.skeletonTile} />
+          <Skeleton key={i} data-testid="skeleton-tile" className={styles.skeletonTile} />
         ))}
       </div>
       {children !== undefined && <p className={styles.drafting}>{children}</p>}
@@ -203,30 +80,13 @@ function SkeletonTiles({ label, layout, children }: { label: string; layout: Bre
 // starts the draft_week job and shows skeleton tiles until the job ends and
 // the plan is read again. Rebuilding a plan pushed to Calendar asks first,
 // and sends confirm. A failed draft is shown with Retry; no plan is made up.
-//
-// From tablet up it is the plan manager (mocks 2c, 2d): Rebuild week and the
-// unavailable Shopping list and Push to Calendar are actions in the header,
-// over the plan's sync status and the 7-column grid.
-function WeekBoard({
-  weekStart,
-  timezone,
-  layout,
-  onWeek,
-}: {
-  weekStart: string
-  timezone: string
-  layout: Breakpoint
-  onWeek: (weekStart: string) => void
-}) {
+function WeekBoard({ weekStart, timezone, onWeek }: { weekStart: string; timezone: string; onWeek: (weekStart: string) => void }) {
   const queryClient = useQueryClient()
   const plan = usePlan(weekStart)
   const startDraft = useStartDraft()
   const [jobId, setJobId] = useState<string | null>(null)
   const job = useJob<unknown>(DRAFT_JOB_KIND, jobId)
   const [confirming, setConfirming] = useState(false)
-  const swap = useSwapDay(weekStart)
-  // The date of the day being swapped, while the swap sheet is open.
-  const [swappingDate, setSwappingDate] = useState<string | null>(null)
   const label = weekLabel(weekStart)
 
   // The draft's result, once the job has succeeded, or why it cannot be read.
@@ -241,14 +101,12 @@ function WeekBoard({
 
   // Once the job ends the plan is read again: a succeeded draft is followed
   // until that read lands; a failed one stays shown, and may have met a
-  // plan changed meanwhile. The Quest log is read again too, as after a
-  // swap: the draft may have planned some of it.
+  // plan changed meanwhile.
   const [readJobId, setReadJobId] = useState<string | null>(null)
   const ended = job.status === 'succeeded' || job.status === 'failed'
   useEffect(() => {
     if (!ended) return
     let active = true
-    void queryClient.invalidateQueries({ queryKey: QUEST_LOG_KEY })
     void queryClient.invalidateQueries({ queryKey: planKey(weekStart) }).then(() => {
       if (active) setReadJobId(jobId)
     })
@@ -285,10 +143,8 @@ function WeekBoard({
   const { mutate } = startDraft
   function start(confirm: boolean) {
     setConfirming(false)
-    // A draft asked for again leaves the last one's failure, and a failed
-    // swap's, behind.
+    // A draft asked for again leaves the last one's failure behind.
     setJobId(null)
-    swap.dismiss()
     mutate(
       { weekStart, confirm },
       {
@@ -299,19 +155,12 @@ function WeekBoard({
     )
   }
   // rebuild drafts the week, asking first over a plan pushed to Calendar.
-  // It waits for a swap of the week still pending, which may yet fail: the
-  // Rebuild week tile is disabled meanwhile.
   function rebuild() {
-    if (swap.pending) return
     if (plan.data && pushedToCalendar(plan.data.status)) setConfirming(true)
     else start(false)
   }
 
-  const failure = swap.failed !== null ? (
-    <ErrorBanner onRetry={() => swapIn(swap.failed!.swap)}>
-      Couldn't swap {weekdayName(swap.failed.swap.date)}'s dinner. {swap.failed.error.message}
-    </ErrorBanner>
-  ) : startDraft.isError ? (
+  const failure = startDraft.isError ? (
     <ErrorBanner onRetry={rebuild}>Couldn't start drafting this week. {startDraft.error.message}</ErrorBanner>
   ) : result.error !== null ? (
     <ErrorBanner onRetry={rebuild}>Couldn't read the draft. {result.error.message}</ErrorBanner>
@@ -325,40 +174,16 @@ function WeekBoard({
     <ErrorBanner onRetry={job.poll}>Couldn't check on the draft. {job.error.message}</ErrorBanner>
   )
 
-  // swapIn sends the swap chosen in the sheet and closes it.
-  function swapIn(chosen: Swap) {
-    setSwappingDate(null)
-    swap.mutate(chosen)
-  }
-  // dropIn swaps in a dinner dragged onto a day. A drag is not picked up,
-  // nor dropped, while a swap of the week is pending.
-  function dropIn(chosen: Swap) {
-    swap.dismiss()
-    swapIn(chosen)
-  }
-  // openSwap opens the swap sheet on a day. One swap of the week is sent at
-  // a time, even across leaving the week and coming back: the plan the
-  // server answers it with must not overwrite another still pending.
-  function openSwap(date: string) {
-    if (swap.pending) return
-    swap.dismiss()
-    setSwappingDate(date)
-  }
-
   let body
   if (plan.isError) {
     body = <ErrorBanner onRetry={() => void plan.refetch()}>Couldn't load this week's plan. {plan.error.message}</ErrorBanner>
   } else if (drafting) {
-    body = (
-      <SkeletonTiles label="Drafting this week" layout={layout}>
-        Drafting your week…
-      </SkeletonTiles>
-    )
+    body = <SkeletonTiles label="Drafting this week">Drafting your week…</SkeletonTiles>
   } else if (resultError !== null) {
     // An unread draft shows no board: the plan read is not the draft.
     body = null
   } else if (plan.isPending) {
-    body = <SkeletonTiles label="Plan loading" layout={layout} />
+    body = <SkeletonTiles label="Plan loading" />
   } else if (plan.data === null) {
     body = (
       <EmptyState title="Nothing planned yet" action={{ label: 'Draft this week', onClick: rebuild }}>
@@ -367,109 +192,35 @@ function WeekBoard({
     )
   } else {
     const { ai_note, days } = plan.data
-    const swappingDay = days.find((day) => day.date === swappingDate)
-    const sheet = swappingDay !== undefined && (
-      <SwapSheet
-        day={swappingDay}
-        planned={new Set(days.map((day) => day.dinner.id))}
-        onSwap={swapIn}
-        onClose={() => setSwappingDate(null)}
-      />
+    body = (
+      <>
+        {ai_note !== null && (
+          <div className={styles.assistant}>
+            <span className={styles.avatar} aria-hidden="true">
+              Q
+            </span>
+            <p className={styles.bubble}>{ai_note}</p>
+          </div>
+        )}
+        <ul className={styles.grid} aria-label="Dinners this week">
+          {days.map((day) => (
+            <DayTile key={day.date} day={day} timezone={timezone} />
+          ))}
+          <li className={styles.rebuildCell}>
+            <button type="button" className={styles.rebuild} onClick={rebuild}>
+              <Icon icon={Plus} size="inline" />
+              Rebuild week
+            </button>
+          </li>
+        </ul>
+        <PushToCalendar />
+      </>
     )
-    body =
-      layout !== 'mobile' ? (
-        <>
-          <DropBoard days={days} pending={swap.pending} drop={dropIn} />
-          <ul className={`${styles.week} ${styles[layout]}`} aria-label="Dinners this week">
-            {days.map((day) => (
-              <DayColumn
-                key={day.date}
-                day={day}
-                timezone={timezone}
-                swapping={day.date === swappingDate}
-                onSwap={() => openSwap(day.date)}
-              />
-            ))}
-          </ul>
-          {sheet}
-        </>
-      ) : (
-        <>
-          {ai_note !== null && (
-            <div className={styles.assistant}>
-              <span className={styles.avatar} aria-hidden="true">
-                Q
-              </span>
-              <p className={styles.bubble}>{ai_note}</p>
-            </div>
-          )}
-          <ul className={styles.grid} aria-label="Dinners this week">
-            {days.map((day) => (
-              <DayTile
-                key={day.date}
-                day={day}
-                timezone={timezone}
-                swapping={day.date === swappingDate}
-                onSwap={() => openSwap(day.date)}
-              />
-            ))}
-            <li className={styles.rebuildCell}>
-              <button type="button" className={styles.rebuild} onClick={rebuild} disabled={swap.pending}>
-                <Icon icon={Plus} size="inline" />
-                Rebuild week
-              </button>
-            </li>
-          </ul>
-          <Unavailable hint={PUSH_HINT} className={styles.pushButton}>
-            Looks good — push to Calendar
-          </Unavailable>
-          {sheet}
-        </>
-      )
   }
 
   const tag = plan.data ? statusTags[plan.data.status] : null
-  const header =
-    layout !== 'mobile' ? (
-      <header className={styles.wideHeader}>
-        <div className={styles.titleBar}>
-          <div className={styles.heading}>
-            <p className={styles.kicker}>{label.week} · Plan</p>
-            <h1 className={styles.wideTitle}>{label.dates}</h1>
-          </div>
-          <div className={styles.weekNav}>
-            <IconButton label="Previous week" onClick={() => onWeek(addDays(weekStart, -7))}>
-              <Icon icon={ChevronLeft} size="inline" />
-            </IconButton>
-            {layout === 'desktop' && (
-              <button type="button" className={styles.thisWeek} onClick={() => onWeek(weekOf(localNow(timezone, new Date()).date))}>
-                This week
-              </button>
-            )}
-            <IconButton label="Next week" onClick={() => onWeek(addDays(weekStart, 7))}>
-              <Icon icon={ChevronRight} size="inline" />
-            </IconButton>
-          </div>
-        </div>
-        <div className={styles.actionBar}>
-          {plan.data ? <SyncStatus plan={plan.data} /> : <span className={styles.status} />}
-          <div className={styles.actions}>
-            <Unavailable hint={SHOPPING_HINT} variant="outline" below className={styles.action}>
-              <Icon icon={ShoppingCart} size="inline" />
-              Shopping list
-            </Unavailable>
-            <Button variant="outline" className={styles.action} onClick={rebuild} disabled={swap.pending || drafting || !plan.isSuccess}>
-              <Icon icon={RefreshCw} size="inline" />
-              Rebuild week
-            </Button>
-            <Unavailable hint={PUSH_HINT} below className={styles.action}>
-              <Icon icon={CalendarDays} size="inline" />
-              Push to Calendar
-            </Unavailable>
-          </div>
-        </div>
-      </header>
-    ) : (
+  return (
+    <>
       <header className={styles.header}>
         <div className={styles.heading}>
           <p className={styles.kicker}>{label.week}</p>
@@ -487,10 +238,6 @@ function WeekBoard({
           </IconButton>
         </div>
       </header>
-    )
-  return (
-    <>
-      {header}
       {body}
       {failure}
       <Confirm
@@ -507,69 +254,27 @@ function WeekBoard({
   )
 }
 
-// SyncStatus is the plan manager's status line: whether the plan is on
-// Google Calendar and, once synced, how long ago it was pushed, kept current
-// minute by minute.
-function SyncStatus({ plan }: { plan: Plan }) {
-  const { status, calendar_synced_at: syncedAt } = plan
-  const [now, setNow] = useState(() => new Date())
-  useEffect(() => {
-    const timer = setInterval(() => setNow(new Date()), 60_000)
-    return () => clearInterval(timer)
-  }, [])
-  return (
-    <p className={[styles.status, status === 'synced' && styles.synced].filter(Boolean).join(' ')}>
-      {status === 'synced' && <Icon icon={Check} size="inline" />}
-      {syncStatuses[status]}
-      {status === 'synced' && syncedAt !== null && ` ${ago(syncedAt, now)}`}
-    </p>
-  )
-}
-
-// Unavailable is an action with nothing behind it yet (Push to Calendar, the
-// shopping list): it stays focusable, so a tap or focus shows the tooltip
-// saying why, above it or, at the top of the page, below.
-function Unavailable({
-  hint,
-  variant = 'primary',
-  below = false,
-  className,
-  children,
-}: {
-  hint: string
-  variant?: ButtonVariant
-  below?: boolean
-  className?: string
-  children: ReactNode
-}) {
+// PushToCalendar is "Looks good — push to Calendar", unavailable until
+// Google Calendar can be connected: it stays focusable, so a tap or focus
+// shows the tooltip saying why.
+function PushToCalendar() {
   const hintId = useId()
   return (
-    <div className={[styles.unavailable, below && styles.below].filter(Boolean).join(' ')}>
-      <Button
-        variant={variant}
-        className={[className, styles[variant]].filter(Boolean).join(' ')}
-        aria-disabled="true"
-        aria-describedby={hintId}
-      >
-        {children}
+    <div className={styles.push}>
+      <Button className={styles.pushButton} aria-disabled="true" aria-describedby={hintId}>
+        Looks good — push to Calendar
       </Button>
       <span id={hintId} role="tooltip" className={styles.hint}>
-        {hint}
+        {PUSH_HINT}
       </span>
     </div>
   )
 }
 
-// PlanPage is the Draft board on the week chosen with the previous / next
-// week buttons: mock 1f on mobile; from tablet up the plan manager, with the
-// Quest log as a strip under the grid on tablet (2c) and the Quest log and
-// Regulars in a right panel on desktop (2d). It opens on next week once this
-// week's plan_draft time has come in the household's zone, otherwise on this
-// week. The board keeps its place in the tree across layouts, so crossing a
-// breakpoint keeps a draft being followed. From tablet up a dinner is
-// dragged from the strip or the panel onto a day of the grid to swap it in.
+// PlanPage is mock 1f, the mobile Draft board, on the week chosen with the
+// previous / next week buttons. It opens on next week once this week's
+// plan_draft time has come in the household's zone, otherwise on this week.
 export function PlanPage() {
-  const layout = useBreakpoint()
   const settings = useHouseholdSettings()
   const [week, setWeek] = useState<string | null>(null)
   if (week === null && settings.data) setWeek(defaultWeek(settings.data, new Date()))
@@ -580,20 +285,9 @@ export function PlanPage() {
       <ErrorBanner onRetry={() => void settings.refetch()}>Couldn't load the household settings. {settings.error.message}</ErrorBanner>
     )
   } else if (week === null || !settings.data) {
-    content = <SkeletonTiles label="Plan loading" layout={layout} />
+    content = <SkeletonTiles label="Plan loading" />
   } else {
-    content = <WeekBoard key={week} weekStart={week} timezone={settings.data.timezone} layout={layout} onWeek={setWeek} />
+    content = <WeekBoard key={week} weekStart={week} timezone={settings.data.timezone} onWeek={setWeek} />
   }
-  return (
-    <PlanDragProvider>
-      <div className={`${styles.page} ${styles[`${layout}Page`]}`}>
-        <div className={styles.board}>
-          {content}
-          {layout === 'tablet' && <QuestLogStrip />}
-        </div>
-        {layout === 'desktop' && <PlanPanel />}
-        {layout !== 'mobile' && <DragAnnouncer />}
-      </div>
-    </PlanDragProvider>
-  )
+  return <div className={styles.page}>{content}</div>
 }

web/src/plan/PlanPanel.module.css

@@ -1,223 +0,0 @@
-/* Desktop's right panel (mock 2d) and tablet's Quest-log strip (mock 2c). */
-.panel {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 32px 22px;
-  border-left: 1px solid var(--color-divider);
-}
-
-.hint {
-  margin: 0;
-  font-family: var(--font-body);
-  font-size: 13px;
-  color: var(--color-neutral-800);
-}
-
-.rows {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.row {
-  box-sizing: border-box;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px;
-  border-radius: 22px;
-  background: var(--color-surface);
-  text-align: left;
-}
-
-/* The 48 px washed photo; Photo applies the washed filter. The placeholder's
-   "dish photo" caption does not fit, so only its stripes show. */
-.rowPhoto {
-  width: 48px;
-  height: 48px;
-  font-size: 0;
-}
-
-.rowText {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  font-family: var(--font-body);
-}
-
-.rowName {
-  font-size: 14px;
-  font-weight: 700;
-  overflow-wrap: anywhere;
-}
-
-.rowMeta {
-  font-size: 12px;
-  color: var(--color-neutral-700);
-}
-
-/* Two columns of three 4 px dots. */
-.grip {
-  flex: none;
-  display: grid;
-  grid-template-columns: 4px 4px;
-  gap: 3px;
-}
-
-.dot {
-  width: 4px;
-  height: 4px;
-  border-radius: var(--radius-pill);
-  background: var(--color-neutral-500);
-}
-
-.more {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  min-height: 44px;
-  font-family: var(--font-body);
-  font-size: 14px;
-  font-weight: 700;
-  color: var(--color-accent-700);
-  text-decoration: none;
-}
-
-.more:hover {
-  text-decoration: underline;
-}
-
-.loading {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
-
-.skeleton {
-  height: 68px;
-  border-radius: 22px;
-}
-
-.empty {
-  margin: 0;
-  font-family: var(--font-body);
-  font-size: 14px;
-  line-height: 1.45;
-  color: var(--color-neutral-700);
-}
-
-/* Tablet: the Quest log as chips on a surface card under the grid. */
-.strip {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  padding: 16px 18px;
-  border-radius: var(--radius-lg);
-  background: var(--color-surface);
-}
-
-.stripHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  gap: 12px;
-}
-
-.stripTitle {
-  margin: 0;
-  font-family: var(--font-heading);
-  font-size: 18px;
-  font-weight: 400;
-}
-
-.stripHint {
-  margin: 0;
-  font-family: var(--font-body);
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--color-neutral-700);
-}
-
-.chips {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.chip {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 5px 14px 5px 5px;
-  border-radius: var(--radius-pill);
-  background: var(--color-bg);
-  font-family: var(--font-body);
-  font-size: 13px;
-  font-weight: 700;
-}
-
-/* As the row's photo, at 28 px. */
-.chipPhoto {
-  width: 28px;
-  height: 28px;
-  font-size: 0;
-}
-
-/* A row or a chip is a button dragged onto a day: by a pointer (no
-   scrolling or text selection under it) or with the keyboard. Its 2 px
-   border is clear until it is the ghost, inside its padding. */
-.draggable {
-  margin: 0;
-  border: 2px solid transparent;
-  font: inherit;
-  color: var(--color-text);
-  cursor: grab;
-  touch-action: none;
-  user-select: none;
-}
-
-.row.draggable {
-  padding: 8px;
-}
-
-.chip.draggable {
-  padding: 3px 12px 3px 3px;
-}
-
-/* A dinner that cannot be picked up now: no grid to drop on, a swap
-   pending, or already this week. */
-.draggable[aria-disabled='true'] {
-  cursor: default;
-}
-
-/* The row or chip being dragged: a dashed ghost at 55% opacity. */
-.ghost {
-  border-style: dashed;
-  border-color: var(--color-neutral-500);
-  background: transparent;
-  opacity: 0.55;
-}
-
-/* The dragged copy floating below right of the pointer: lifted with the
-   large shadow and tilted -3deg. It lets the pointer through to the day
-   under it. */
-.floating {
-  position: fixed;
-  z-index: 10;
-  box-sizing: border-box;
-  margin: 0;
-  box-shadow: var(--shadow-lg);
-  transform: rotate(-3deg);
-  pointer-events: none;
-  cursor: grabbing;
-}

web/src/plan/PlanPanel.tsx

@@ -1,210 +0,0 @@
-import { Compass } from 'lucide-react'
-import { useId, useState, type ReactNode } from 'react'
-import { createPortal } from 'react-dom'
-import { Link } from 'react-router'
-import { useRegulars } from '../dinners/api.ts'
-import { useQuestLog, type QuestLogDinner } from '../discover/api.ts'
-import { DIFFICULTY_LABEL } from '../discover/DeckCard.tsx'
-import { ErrorBanner } from '../ui/ErrorBanner.tsx'
-import { Icon } from '../ui/Icon.tsx'
-import { Photo } from '../ui/Photo.tsx'
-import { Segmented } from '../ui/Segmented.tsx'
-import { Skeleton } from '../ui/Skeleton.tsx'
-import { useDraggable, type Float } from './drag.tsx'
-import { emptyLists, planDinner, sourceNames, type Source } from './SwapSheet.tsx'
-import styles from './PlanPanel.module.css'
-
-// DRAG_HINT says how a dinner is swapped in from the panel or the strip.
-const DRAG_HINT = 'Drag a dinner onto a day to swap it in.'
-
-// KEYS_HINT says how a dinner is swapped in with the keyboard.
-const KEYS_HINT = 'Press Enter or Space to pick it up, the arrow keys to choose a day, Enter to drop it on that day and Escape to cancel.'
-
-type List = ReturnType<typeof useQuestLog>
-
-// ListBody is a list of the panel or the strip once it has loaded, or why it
-// has not: its error with Retry, skeletons while loading, or that it is
-// empty.
-function ListBody({ source, list, children }: { source: Source; list: List; children: (dinners: QuestLogDinner[]) => ReactNode }) {
-  if (list.isError) {
-    return (
-      <ErrorBanner onRetry={() => void list.refetch()}>
-        Couldn't load your {sourceNames[source]}. {list.error.message}
-      </ErrorBanner>
-    )
-  }
-  if (list.isPending) {
-    return (
-      <div aria-busy="true" aria-label={`${sourceNames[source]} loading`} className={styles.loading}>
-        {Array.from({ length: 3 }, (_, i) => (
-          <Skeleton key={i} className={styles.skeleton} />
-        ))}
-      </div>
-    )
-  }
-  if (list.data.length === 0) return <p className={styles.empty}>{emptyLists[source]}</p>
-  return children(list.data)
-}
-
-// Grip is the 6-dot drag handle of a panel row.
-function Grip() {
-  return (
-    <span className={styles.grip} aria-hidden="true">
-      {Array.from({ length: 6 }, (_, i) => (
-        <span key={i} className={styles.dot} />
-      ))}
-    </span>
-  )
-}
-
-// Draggable is a dinner of the panel or the strip, dragged onto a day to
-// swap it in: a button whose content is the row or the chip. While it is
-// dragged it is a dashed ghost, and with a pointer a copy of it floats
-// below right of the pointer, lifted and tilted.
-function Draggable({
-  dinner,
-  fromQuestLog,
-  className,
-  keysHintId,
-  children,
-}: {
-  dinner: QuestLogDinner
-  fromQuestLog: boolean
-  className: string | undefined
-  keysHintId: string
-  children: ReactNode
-}) {
-  const { drag, float, props } = useDraggable({ dinner: planDinner(dinner), fromQuestLog })
-  return (
-    <li>
-      <button
-        type="button"
-        className={[className, styles.draggable, drag !== null && styles.ghost].filter(Boolean).join(' ')}
-        aria-describedby={keysHintId}
-        {...props}
-      >
-        {children}
-      </button>
-      {float !== null && <Floating float={float} className={className}>{children}</Floating>}
-    </li>
-  )
-}
-
-// Floating is the dragged copy of a row or a chip, drawn over the page.
-function Floating({ float, className, children }: { float: Float; className: string | undefined; children: ReactNode }) {
-  return createPortal(
-    <div
-      aria-hidden="true"
-      data-testid="drag-float"
-      className={[className, styles.floating].filter(Boolean).join(' ')}
-      style={{ left: float.left, top: float.top, width: float.width }}
-    >
-      {children}
-    </div>,
-    document.body,
-  )
-}
-
-// KeysHint is the keyboard's way to swap a dinner in, describing each
-// draggable.
-function KeysHint({ id }: { id: string }) {
-  return (
-    <p id={id} hidden>
-      {KEYS_HINT}
-    </p>
-  )
-}
-
-// PlanPanel is desktop's right panel (mock 2d): the Quest log and the
-// Regulars, segmented "Quest log · N | Regulars · N", each dinner with its
-// 48 px photo, name, difficulty and grip, and a link to swipe more Side
-// quests.
-export function PlanPanel() {
-  const questLog = useQuestLog()
-  const regulars = useRegulars()
-  const [source, setSource] = useState<Source>('quest_log')
-  const lists = { quest_log: questLog, regulars }
-  const keysHintId = useId()
-
-  const label = (s: Source) => {
-    const dinners = lists[s].data
-    return dinners === undefined ? sourceNames[s] : `${sourceNames[s]} · ${dinners.length}`
-  }
-
-  return (
-    <aside aria-label="Quest log and Regulars" className={styles.panel}>
-      <Segmented
-        label="Dinners to swap in"
-        options={[
-          { value: 'quest_log', label: label('quest_log') },
-          { value: 'regulars', label: label('regulars') },
-        ]}
-        value={source}
-        onValueChange={setSource}
-      />
-      <p className={styles.hint}>{DRAG_HINT}</p>
-      <KeysHint id={keysHintId} />
-      <ListBody source={source} list={lists[source]}>
-        {(dinners) => (
-          <ul aria-label={sourceNames[source]} className={styles.rows}>
-            {dinners.map((dinner) => (
-              <Draggable
-                key={dinner.id}
-                dinner={dinner}
-                fromQuestLog={source === 'quest_log'}
-                className={styles.row}
-                keysHintId={keysHintId}
-              >
-                {/* The row's name already says what the photo shows. */}
-                <span aria-hidden="true">
-                  <Photo id={dinner.photo_id} name={dinner.name} radius="var(--radius-pill)" sizes="48px" className={styles.rowPhoto} />
-                </span>
-                <span className={styles.rowText}>
-                  <span className={styles.rowName}>{dinner.name}</span>
-                  {dinner.difficulty !== null && <span className={styles.rowMeta}>{DIFFICULTY_LABEL[dinner.difficulty]}</span>}
-                </span>
-                <Grip />
-              </Draggable>
-            ))}
-          </ul>
-        )}
-      </ListBody>
-      <Link to="/discover" className={styles.more}>
-        <Icon icon={Compass} size="inline" />
-        Swipe more side quests
-      </Link>
-    </aside>
-  )
-}
-
-// QuestLogStrip is tablet's Quest log under the week's grid (mock 2c): each
-// dinner a chip with its 28 px photo and name, dragged as the panel's rows
-// are.
-export function QuestLogStrip() {
-  const questLog = useQuestLog()
-  const keysHintId = useId()
-  const title = questLog.data === undefined ? sourceNames.quest_log : `${sourceNames.quest_log} · ${questLog.data.length}`
-  return (
-    <section aria-label={sourceNames.quest_log} className={styles.strip}>
-      <div className={styles.stripHeader}>
-        <h2 className={styles.stripTitle}>{title}</h2>
-        <p className={styles.stripHint}>{DRAG_HINT}</p>
-      </div>
-      <KeysHint id={keysHintId} />
-      <ListBody source="quest_log" list={questLog}>
-        {(dinners) => (
-          <ul aria-label={`${sourceNames.quest_log} dinners`} className={styles.chips}>
-            {dinners.map((dinner) => (
-              <Draggable key={dinner.id} dinner={dinner} fromQuestLog className={styles.chip} keysHintId={keysHintId}>
-                <span aria-hidden="true">
-                  <Photo id={dinner.photo_id} name={dinner.name} radius="var(--radius-pill)" sizes="28px" className={styles.chipPhoto} />
-                </span>
-                {dinner.name}
-              </Draggable>
-            ))}
-          </ul>
-        )}
-      </ListBody>
-    </section>
-  )
-}

web/src/plan/SwapSheet.module.css

@@ -1,57 +0,0 @@
-/* The mobile swap sheet: the Quest log and Regulars of desktop's plan panel
-   (mock 2d) as a bottom sheet. */
-.sheet {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  max-width: 560px;
-  margin: 0 auto;
-}
-
-.title {
-  margin: 0;
-  font-family: var(--font-heading);
-  font-size: 22px;
-  font-weight: 400;
-}
-
-.replaces {
-  margin: 2px 0 0;
-  font-family: var(--font-body);
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--color-neutral-700);
-}
-
-.rows {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-}
-
-/* The 48 px washed photo; Photo applies the washed filter. */
-.photo {
-  width: 48px;
-  height: 48px;
-}
-
-/* A dinner already this week: shown, muted, and not a button. */
-.already {
-  color: var(--color-neutral-600);
-}
-
-.skeletonRow {
-  height: 72px;
-  border-radius: var(--radius-md);
-}
-
-.empty {
-  margin: 0;
-  font-family: var(--font-body);
-  font-size: 14px;
-  line-height: 1.45;
-  color: var(--color-neutral-700);
-}

web/src/plan/SwapSheet.tsx

@@ -1,129 +0,0 @@
-import { useId, useState } from 'react'
-import { useRegulars } from '../dinners/api.ts'
-import { useQuestLog, type QuestLogDinner } from '../discover/api.ts'
-import { details } from '../discover/QuestLogSheet.tsx'
-import { ErrorBanner } from '../ui/ErrorBanner.tsx'
-import { ListRow } from '../ui/ListRow.tsx'
-import { Photo } from '../ui/Photo.tsx'
-import { Segmented } from '../ui/Segmented.tsx'
-import { Sheet } from '../ui/Sheet.tsx'
-import { Skeleton } from '../ui/Skeleton.tsx'
-import { Tag } from '../ui/Tag.tsx'
-import type { PlanDay, PlanDinner, Swap } from './api.ts'
-import { weekdayName } from './week.ts'
-import styles from './SwapSheet.module.css'
-
-// Source is a list a dinner is swapped in from.
-export type Source = 'quest_log' | 'regulars'
-
-export const sourceNames: Record<Source, string> = { quest_log: 'Quest log', regulars: 'Regulars' }
-
-export const emptyLists: Record<Source, string> = {
-  quest_log: 'Your Quest log is empty — swipe right on a Side quest to add one.',
-  regulars: 'You have no Regulars yet.',
-}
-
-// planDinner is a listed dinner as it is planned on a day.
-export function planDinner(dinner: QuestLogDinner): PlanDinner {
-  return { id: dinner.id, name: dinner.name, photo_id: dinner.photo_id, minutes: dinner.minutes_total, method: dinner.method }
-}
-
-export type SwapSheetProps = {
-  // The day being swapped.
-  day: PlanDay
-  // The ids of the dinners already on the week's plan.
-  planned: ReadonlySet<string>
-  onSwap: (swap: Swap) => void
-  onClose: () => void
-}
-
-// SwapSheet is the mobile swap sheet: the Quest log and the Regulars, as
-// desktop's plan panel lists them, segmented "Quest log · N | Regulars · N",
-// each dinner with its 48 px photo, name, difficulty and minutes. Choosing a
-// dinner swaps it into the day; a dinner already this week can't be chosen.
-export function SwapSheet({ day, planned, onSwap, onClose }: SwapSheetProps) {
-  const titleId = useId()
-  const questLog = useQuestLog()
-  const regulars = useRegulars()
-  const [source, setSource] = useState<Source>('quest_log')
-  const lists = { quest_log: questLog, regulars }
-  const list = lists[source]
-
-  const label = (s: Source) => {
-    const dinners = lists[s].data
-    return dinners === undefined ? sourceNames[s] : `${sourceNames[s]} · ${dinners.length}`
-  }
-
-  let body
-  if (list.isError) {
-    body = (
-      <ErrorBanner onRetry={() => void list.refetch()}>
-        Couldn't load your {sourceNames[source]}. {list.error.message}
-      </ErrorBanner>
-    )
-  } else if (list.isPending) {
-    body = (
-      <div aria-busy="true" aria-label={`${sourceNames[source]} loading`} className={styles.rows}>
-        {Array.from({ length: 3 }, (_, i) => (
-          <Skeleton key={i} className={styles.skeletonRow} />
-        ))}
-      </div>
-    )
-  } else if (list.data.length === 0) {
-    body = <p className={styles.empty}>{emptyLists[source]}</p>
-  } else {
-    body = (
-      <ul aria-label={sourceNames[source]} className={styles.rows}>
-        {list.data.map((dinner: QuestLogDinner) => {
-          const already = planned.has(dinner.id)
-          return (
-            <li key={dinner.id}>
-              <ListRow
-                className={already ? styles.already : undefined}
-                leading={
-                  // The row's name already says what the photo shows.
-                  <span aria-hidden="true">
-                    <Photo id={dinner.photo_id} name={dinner.name} radius="var(--radius-md)" sizes="48px" className={styles.photo} />
-                  </span>
-                }
-                title={dinner.name}
-                meta={details(dinner)}
-                // A dinner already this week is no button: it can't be chosen.
-                onClick={
-                  already
-                    ? undefined
-                    : () =>
-                        onSwap({ date: day.date, dinner: planDinner(dinner), fromQuestLog: source === 'quest_log' })
-                }
-                trailing={already && <Tag>Already this week</Tag>}
-              />
-            </li>
-          )
-        })}
-      </ul>
-    )
-  }
-
-  return (
-    <Sheet open onClose={onClose} aria-labelledby={titleId}>
-      <div className={styles.sheet}>
-        <div>
-          <h2 id={titleId} className={styles.title}>
-            Swap {weekdayName(day.date)}
-          </h2>
-          <p className={styles.replaces}>Replaces {day.dinner.name}</p>
-        </div>
-        <Segmented
-          label="Swap in from"
-          options={[
-            { value: 'quest_log', label: label('quest_log') },
-            { value: 'regulars', label: label('regulars') },
-          ]}
-          value={source}
-          onValueChange={setSource}
-        />
-        {body}
-      </div>
-    </Sheet>
-  )
-}

web/src/plan/api.test.tsx

@@ -1,205 +0,0 @@
-import { QueryClientProvider, type QueryClient } from '@tanstack/react-query'
-import { act, renderHook, waitFor } from '@testing-library/react'
-import type { ReactNode } from 'react'
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { ApiProvider, createApiClient, createQueryClient, createVerifiedSession } from '../api/index.ts'
-import { createNetworkStatus } from '../pwa/networkStatus.ts'
-import { errorResponse, fakeLocation, jsonResponse, ME } from '../test/fetchStub.ts'
-import { planKey, usePlan, useSwapDay, type Plan } from './api.ts'
-
-const WEEK = '2026-10-05'
-const PLAN = `/api/v1/plans/${WEEK}`
-const MONDAY = `${PLAN}/days/2026-10-05`
-const FRIDAY = `${PLAN}/days/2026-10-09`
-const DAYS = ['2026-10-05', '2026-10-06', '2026-10-07', '2026-10-08', '2026-10-09', '2026-10-10', '2026-10-11']
-
-// planBody is the plan of the week of Oct 5, dinners d0 to d6, with days
-// changed as given by index.
-function planBody(changes: Record<number, { id: string; name: string; is_new?: boolean; start_by?: string | null }> = {}) {
-  return {
-    id: 'plan-1',
-    week_start: WEEK,
-    status: 'draft',
-    ai_note: null,
-    calendar_synced_at: null as string | null,
-    days: DAYS.map((date, i) => {
-      const change = changes[i]
-      return {
-        date,
-        dinner: { id: change?.id ?? `d${i}`, name: change?.name ?? `Dinner ${i}`, photo: null, minutes: null, method: null as string | null, origin: 'regular' },
-        is_new: change?.is_new ?? false,
-        start_by: change?.start_by ?? null,
-      }
-    }),
-  }
-}
-
-// deferred is a reply the test sends when it chooses.
-function deferred() {
-  let send!: (response: Response) => void
-  const reply = new Promise<Response>((resolve) => (send = resolve))
-  return { reply, send }
-}
-
-// stubServer answers "METHOD path" requests from responders, with /me and
-// the Quest log; any other request fails the test.
-function stubServer(responders: Record<string, () => Response | Promise<Response>>) {
-  const all: Record<string, () => Response | Promise<Response>> = {
-    'GET /api/v1/me': () => jsonResponse(200, ME),
-    'GET /api/v1/dinners?status=quest_log': () => jsonResponse(200, { dinners: [] }),
-    ...responders,
-  }
-  vi.stubGlobal(
-    'fetch',
-    vi.fn<typeof fetch>((input, init) => {
-      const key = `${init?.method ?? 'GET'} ${String(input)}`
-      const respond = Object.hasOwn(all, key) ? all[key] : undefined
-      if (respond === undefined) throw new Error(`unexpected fetch: ${key}`)
-      return Promise.resolve(respond())
-    }),
-  )
-}
-
-// renderSwaps renders the week's plan and swaps over a query client.
-async function renderSwaps() {
-  const api = createApiClient(fakeLocation('/plan'), createNetworkStatus(window), createVerifiedSession(localStorage))
-  await api.loadMe()
-  const queryClient: QueryClient = createQueryClient()
-  const wrapper = ({ children }: { children: ReactNode }) => (
-    <ApiProvider client={api}>
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-    </ApiProvider>
-  )
-  const hook = renderHook(() => ({ plan: usePlan(WEEK), swap: useSwapDay(WEEK) }), { wrapper })
-  await waitFor(() => expect(hook.result.current.plan.isSuccess).toBe(true))
-  return { ...hook, queryClient, plan: () => queryClient.getQueryData<Plan>(planKey(WEEK))! }
-}
-
-const ORZO = { date: '2026-10-09', dinner: { id: 'q1', name: 'Lemon orzo', photo_id: undefined, minutes: null, method: null }, fromQuestLog: true }
-const FISH = { date: '2026-10-05', dinner: { id: 'r1', name: 'Fish tacos', photo_id: undefined, minutes: null, method: null }, fromQuestLog: false }
-
-afterEach(() => {
-  vi.unstubAllGlobals()
-})
-
-// renderPlan renders the week's plan read over a query client.
-async function renderPlan() {
-  const api = createApiClient(fakeLocation('/plan'), createNetworkStatus(window), createVerifiedSession(localStorage))
-  await api.loadMe()
-  const wrapper = ({ children }: { children: ReactNode }) => (
-    <ApiProvider client={api}>
-      <QueryClientProvider client={createQueryClient()}>{children}</QueryClientProvider>
-    </ApiProvider>
-  )
-  const hook = renderHook(() => usePlan(WEEK), { wrapper })
-  await waitFor(() => expect(hook.result.current.isPending).toBe(false))
-  return hook.result.current
-}
-
-describe('usePlan', () => {
-  it("reads each dinner's method and when the plan was pushed to Calendar", async () => {
-    const body = planBody()
-    body.days[2]!.dinner.method = 'crockpot'
-    stubServer({ [`GET ${PLAN}`]: () => jsonResponse(200, { ...body, status: 'synced', calendar_synced_at: '2026-10-07T15:58:00Z' }) })
-    const plan = await renderPlan()
-
-    expect(plan.data?.calendar_synced_at).toEqual(new Date('2026-10-07T15:58:00Z'))
-    expect(plan.data?.days.map((day) => day.dinner.method)).toEqual([null, null, 'crockpot', null, null, null, null])
-  })
-
-  it.each([
-    ['a method it does not know', (body: ReturnType<typeof planBody>) => (body.days[0]!.dinner.method = 'microwave'), 'method "microwave"'],
-    ['no method', (body: ReturnType<typeof planBody>) => Reflect.deleteProperty(body.days[0]!.dinner, 'method'), 'method undefined'],
-    ['a sync time that is no instant', (body: ReturnType<typeof planBody>) => (body.calendar_synced_at = 'yesterday'), 'calendar_synced_at "yesterday"'],
-  ])('refuses a plan with %s', async (_, change, said) => {
-    const body = planBody()
-    change(body)
-    stubServer({ [`GET ${PLAN}`]: () => jsonResponse(200, body) })
-    const plan = await renderPlan()
-
-    expect(plan.error?.message).toContain(said)
-  })
-})
-
-describe('useSwapDay', () => {
-  // Friday's swap is sent first, then Monday's; the server answers Monday's
-  // with both swapped, Friday's with only Friday.
-  const fridayPlan = planBody({ 4: { id: 'q1', name: 'Lemon orzo', is_new: true } })
-  const bothPlan = planBody({ 0: { id: 'r1', name: 'Fish tacos' }, 4: { id: 'q1', name: 'Lemon orzo', is_new: true } })
-
-  it.each([
-    ['the later swap answered first', ['monday', 'friday'] as const],
-    ['the earlier swap answered first', ['friday', 'monday'] as const],
-  ])('keeps the plan of the later of two swaps, %s', async (_, order) => {
-    const replies = { friday: deferred(), monday: deferred() }
-    stubServer({
-      [`GET ${PLAN}`]: () => jsonResponse(200, planBody()),
-      [`PUT ${FRIDAY}`]: () => replies.friday.reply,
-      [`PUT ${MONDAY}`]: () => replies.monday.reply,
-    })
-    const { result, plan, queryClient } = await renderSwaps()
-
-    act(() => result.current.swap.mutate(ORZO))
-    act(() => result.current.swap.mutate(FISH))
-    await waitFor(() => expect(plan().days[0]!.dinner.name).toBe('Fish tacos'))
-
-    // Whichever reply settles, Monday stays swapped: Friday's plan, the
-    // earlier one, never lands over it.
-    for (const [settled, day] of order.entries()) {
-      await act(async () => replies[day].send(jsonResponse(200, day === 'friday' ? fridayPlan : bothPlan)))
-      await waitFor(() => expect(queryClient.isMutating()).toBe(1 - settled))
-      expect(plan().days[0]!.dinner.name).toBe('Fish tacos')
-    }
-    expect(plan().days.map((day) => day.dinner.name)).toEqual(bothPlan.days.map((day) => day.dinner.name))
-  })
-
-  it("does not take an earlier swap's failure for the week's", async () => {
-    const friday = deferred()
-    stubServer({
-      [`GET ${PLAN}`]: () => jsonResponse(200, planBody()),
-      [`PUT ${FRIDAY}`]: () => friday.reply,
-      [`PUT ${MONDAY}`]: () => jsonResponse(200, planBody({ 0: { id: 'r1', name: 'Fish tacos' } })),
-    })
-    const { result, plan } = await renderSwaps()
-
-    act(() => result.current.swap.mutate(ORZO))
-    act(() => result.current.swap.mutate(FISH))
-    await waitFor(() => expect(plan().days[0]!.dinner.name).toBe('Fish tacos'))
-    await act(async () => friday.send(errorResponse(409, 'dinner_not_plannable')))
-
-    await waitFor(() => expect(result.current.swap.pending).toBe(false))
-    expect(result.current.swap.failed).toBeNull()
-  })
-
-  it('leaves a day a later plan read landed when the swap of it fails', async () => {
-    const friday = deferred()
-    // The read finds Friday already lemon orzo, starting by 2 pm.
-    let read = planBody()
-    stubServer({
-      [`GET ${PLAN}`]: () => jsonResponse(200, read),
-      [`PUT ${FRIDAY}`]: () => friday.reply,
-    })
-    const { result, plan, queryClient } = await renderSwaps()
-
-    act(() => result.current.swap.mutate(ORZO))
-    await waitFor(() => expect(plan().days[4]).toEqual({ date: '2026-10-09', dinner: ORZO.dinner, is_new: true, start_by: null }))
-    read = planBody({ 4: { id: 'q1', name: 'Lemon orzo', is_new: true, start_by: '2026-10-09T14:00:00-04:00' } })
-    await act(() => result.current.plan.refetch())
-    await act(async () => friday.send(errorResponse(409, 'dinner_not_plannable')))
-
-    await waitFor(() => expect(queryClient.isMutating()).toBe(0))
-    expect(plan().days[4]).toEqual({ date: '2026-10-09', dinner: ORZO.dinner, is_new: true, start_by: '2026-10-09T14:00:00-04:00' })
-    expect(result.current.swap.failed?.error.message).toBe('dinner_not_plannable message')
-  })
-
-  it('refuses to dismiss a pending swap', async () => {
-    const friday = deferred()
-    stubServer({ [`GET ${PLAN}`]: () => jsonResponse(200, planBody()), [`PUT ${FRIDAY}`]: () => friday.reply })
-    const { result } = await renderSwaps()
-
-    act(() => result.current.swap.mutate(ORZO))
-    await waitFor(() => expect(result.current.swap.pending).toBe(true))
-    expect(() => result.current.swap.dismiss()).toThrow('The week of 2026-10-05 has a swap pending, which cannot be dismissed.')
-    await act(async () => friday.send(jsonResponse(200, planBody())))
-  })
-})

web/src/plan/api.ts

@@ -1,8 +1,7 @@
-import { useMutation, useMutationState, useQuery, useQueryClient } from '@tanstack/react-query'
+import { useMutation, useQuery } from '@tanstack/react-query'
 import { ApiError, useApi, type ApiRead } from '../api/index.ts'
 import { isRecord } from '../api/errors.ts'
-import { METHODS, oneOf, photoId, type Method } from '../dinners/api.ts'
-import { QUEST_LOG_KEY } from '../discover/api.ts'
+import { oneOf } from '../dinners/api.ts'
 
 export const PLANS_PATH = '/api/v1/plans'
 
@@ -22,31 +21,24 @@ export const PLAN_STATUSES = ['draft', 'synced', 'changed'] as const
 // synced plan makes it changed.
 export type PlanStatus = (typeof PLAN_STATUSES)[number]
 
-// PlanDinner is a planned dinner: photo_id is its stored photo's id, from
-// photo, minutes its minutes from prep to table and method how it is
-// cooked, each when known.
-export type PlanDinner = { id: string; name: string; photo_id: string | undefined; minutes: number | null; method: Method | null }
-
 // PlanDay is one day of a plan: its household-local date, the dinner
 // planned, whether that dinner is a Quest-log pick, and, for a crock-pot
 // dinner of known minutes, the instant it must start by.
 export type PlanDay = {
   date: string
-  dinner: PlanDinner
+  dinner: { id: string; name: string }
   is_new: boolean
   start_by: string | null
 }
 
 // Plan is GET /api/v1/plans/{weekStart}: the week's seven days, Monday to
-// Sunday, the AI's note on the draft, if any, and when it was last pushed to
-// Google Calendar, if ever. cached says the service worker answered from its
-// cache: the server may have changed the plan since.
+// Sunday, and the AI's note on the draft, if any. cached says the service
+// worker answered from its cache: the server may have changed the plan since.
 export type Plan = {
   id: string
   week_start: string
   status: PlanStatus
   ai_note: string | null
-  calendar_synced_at: Date | null
   days: PlanDay[]
   cached: boolean
 }
@@ -64,30 +56,12 @@ function parseDay(where: string, body: unknown): PlanDay {
     !isRecord(body.dinner) ||
     typeof body.dinner.id !== 'string' ||
     typeof body.dinner.name !== 'string' ||
-    (body.dinner.minutes !== null && !Number.isInteger(body.dinner.minutes)) ||
     typeof body.is_new !== 'boolean' ||
     (body.start_by !== null && typeof body.start_by !== 'string')
   ) {
     throw new Error(`${where}: response has a day that is not a plan day`)
   }
-  const dinner: PlanDinner = {
-    id: body.dinner.id,
-    name: body.dinner.name,
-    photo_id: photoId(where, body.dinner.photo),
-    minutes: body.dinner.minutes as number | null,
-    method: body.dinner.method === null ? null : oneOf(where, 'method', METHODS, body.dinner.method),
-  }
-  return { date: body.date, dinner, is_new: body.is_new, start_by: body.start_by }
-}
-
-// syncedAt reads calendar_synced_at, an RFC 3339 instant or null.
-function syncedAt(where: string, value: unknown): Date | null {
-  if (value === null) return null
-  const at = typeof value === 'string' ? new Date(value) : null
-  if (at === null || Number.isNaN(at.getTime())) {
-    throw new Error(`${where}: calendar_synced_at ${JSON.stringify(value)} is not an instant`)
-  }
-  return at
+  return { date: body.date, dinner: { id: body.dinner.id, name: body.dinner.name }, is_new: body.is_new, start_by: body.start_by }
 }
 
 function parsePlan(where: string, weekStart: string, body: unknown, cached: boolean): Plan {
@@ -106,7 +80,6 @@ function parsePlan(where: string, weekStart: string, body: unknown, cached: bool
     week_start: weekStart,
     status: oneOf(where, 'status', PLAN_STATUSES, body.status),
     ai_note: body.ai_note,
-    calendar_synced_at: syncedAt(where, body.calendar_synced_at),
     days: body.days.map((day) => parseDay(where, day)),
     cached,
   }
@@ -157,120 +130,3 @@ export function useStartDraft() {
     },
   })
 }
-
-// Swap is one day's swap: the day, and the dinner chosen for it with whether
-// it was chosen from the Quest log.
-export type Swap = { date: string; dinner: PlanDinner; fromQuestLog: boolean }
-
-// sameDay says whether two plan days are the same in every field.
-function sameDay(a: PlanDay, b: PlanDay): boolean {
-  return (
-    a.date === b.date &&
-    a.dinner.id === b.dinner.id &&
-    a.dinner.name === b.dinner.name &&
-    a.dinner.photo_id === b.dinner.photo_id &&
-    a.dinner.minutes === b.dinner.minutes &&
-    a.dinner.method === b.dinner.method &&
-    a.is_new === b.is_new &&
-    a.start_by === b.start_by
-  )
-}
-
-// swapKey keys the swaps of the week starting on weekStart in the mutation
-// cache, where they outlive the Draft board that sent them.
-function swapKey(weekStart: string) {
-  return ['plans', weekStart, 'swap'] as const
-}
-
-// SwapDay is the swaps of one week, as the mutation cache holds them:
-// whether one is pending, and the failure of the latest, if it failed.
-export type SwapDay = {
-  pending: boolean
-  failed: { swap: Swap; error: Error } | null
-  mutate: (chosen: Swap) => void
-  dismiss: () => void
-}
-
-// useSwapDay swaps the dinner of one day of the week starting on weekStart
-// (PUT /api/v1/plans/{weekStart}/days/{date}). The day shows the dinner at
-// once, NEW when it came from the Quest log, with no start-by time until the
-// server answers with the plan as swapped, which then replaces it. A refused
-// swap puts the day back as it was, unless it has changed again meanwhile.
-// However the swap ends, the Quest log is read again: the server leaves a
-// dinner on the plan out of it.
-//
-// The week's swaps live in the mutation cache, not in the component, so
-// leaving the week and coming back keeps them: pending and failed are read
-// from there. Only the latest swap of the week speaks for it: the plan an
-// earlier one is answered with is not written over a later one, and its
-// failure is not the week's. dismiss leaves settled swaps behind; it is
-// refused while one is pending, so a later swap is always in the cache for
-// an earlier, pending one to see.
-export function useSwapDay(weekStart: string): SwapDay {
-  const { apiFetch } = useApi()
-  const queryClient = useQueryClient()
-  const key = planKey(weekStart)
-  const mutationKey = swapKey(weekStart)
-  const mutations = queryClient.getMutationCache()
-  // The week's swaps, in the order sent.
-  const swaps = useMutationState({
-    filters: { mutationKey },
-    select: (mutation) => ({ status: mutation.state.status, swap: mutation.state.variables as Swap, error: mutation.state.error }),
-  })
-  const latest = swaps.at(-1)
-
-  function mutate(chosen: Swap) {
-    // isLatest says whether no swap of the week was sent after this one.
-    const isLatest = () => mutations.findAll({ mutationKey }).every((other) => other.mutationId <= mutation.mutationId)
-    const mutation = mutations.build<Plan, Error, Swap, { previous: PlanDay; swapped: PlanDay }>(queryClient, {
-      mutationKey,
-      // Kept until dismissed: a later swap must stay in the cache while an
-      // earlier one is pending.
-      gcTime: Infinity,
-      mutationFn: async ({ date, dinner }) => {
-        const path = `${planPath(weekStart)}/days/${encodeURIComponent(date)}`
-        const body = await apiFetch<unknown>(path, { method: 'PUT', body: { dinner_id: dinner.id } })
-        return parsePlan(`PUT ${path}`, weekStart, body, false)
-      },
-      onMutate: async ({ date, dinner, fromQuestLog }) => {
-        await queryClient.cancelQueries({ queryKey: key })
-        const plan = queryClient.getQueryData<Plan | null>(key)
-        const previous = plan?.days.find((day) => day.date === date)
-        if (!plan || previous === undefined) throw new Error(`The week of ${weekStart} has no plan day ${date} to swap.`)
-        const swapped: PlanDay = { date, dinner, is_new: fromQuestLog, start_by: null }
-        queryClient.setQueryData<Plan>(key, { ...plan, days: plan.days.map((day) => (day.date === date ? swapped : day)) })
-        return { previous, swapped }
-      },
-      onSuccess: (plan) => {
-        if (isLatest()) queryClient.setQueryData<Plan>(key, plan)
-      },
-      // The day goes back only while it is still, field for field, the day
-      // this swap wrote: a later swap or plan read that replaced it is left
-      // alone.
-      onError: (_error, _swap, context) => {
-        if (context === undefined) return
-        queryClient.setQueryData<Plan | null>(key, (plan) =>
-          plan && { ...plan, days: plan.days.map((day) => (sameDay(day, context.swapped) ? context.previous : day)) },
-        )
-      },
-      onSettled: () => queryClient.invalidateQueries({ queryKey: QUEST_LOG_KEY }),
-    })
-    // A failure is the mutation's state, which failed reports.
-    mutation.execute(chosen).catch(() => undefined)
-  }
-
-  function dismiss() {
-    const week = mutations.findAll({ mutationKey })
-    if (week.some((mutation) => mutation.state.status === 'pending')) {
-      throw new Error(`The week of ${weekStart} has a swap pending, which cannot be dismissed.`)
-    }
-    for (const mutation of week) mutations.remove(mutation)
-  }
-
-  return {
-    pending: swaps.some((swap) => swap.status === 'pending'),
-    failed: latest?.status === 'error' ? { swap: latest.swap, error: latest.error! } : null,
-    mutate,
-    dismiss,
-  }
-}

web/src/plan/drag.module.css

@@ -1,12 +0,0 @@
-/* The drag's live region: read out, not shown. */
-.announcer {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}

web/src/plan/drag.tsx

@@ -1,353 +0,0 @@
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-  type KeyboardEvent,
-  type PointerEvent,
-  type ReactNode,
-} from 'react'
-import type { PlanDay, PlanDinner, Swap } from './api.ts'
-import { weekdayName } from './week.ts'
-import styles from './drag.module.css'
-
-// Pickup is a dinner picked up from the plan panel or the Quest-log strip,
-// and whether it is a Quest-log dinner.
-export type Pickup = { dinner: PlanDinner; fromQuestLog: boolean }
-
-// Board is the week's grid as a drag drops onto it: its days, whether a
-// swap of the week is pending, and how a dinner dropped on a day is swapped
-// in.
-export type Board = { days: PlanDay[]; pending: boolean; drop: (swap: Swap) => void }
-
-// Drag is the dinner being dragged, by pointer or keyboard, and the date of
-// the day it would replace, if any.
-export type Drag = { pickup: Pickup; keyboard: boolean; date: string | null }
-
-type PlanDrag = {
-  drag: Drag | null
-  board: Board | null
-  setBoard: (board: Board | null) => void
-  message: string
-  // start picks a dinner up, unless it cannot be dropped: there is no grid,
-  // a swap of the week is pending, or the dinner is already this week. It
-  // says whether it did.
-  start: (pickup: Pickup, keyboard: boolean) => boolean
-  // over moves the drag onto the day of date, or off every day (null).
-  over: (date: string | null) => void
-  // step moves a keyboard drag to the previous (-1) or next (1) day.
-  step: (by: -1 | 1) => void
-  // end drops the dinner on the day of date, or cancels the drag when date
-  // is null. It says whether the dinner was dropped.
-  end: (date: string | null) => boolean
-  cancel: () => void
-}
-
-const PlanDragContext = createContext<PlanDrag | null>(null)
-
-function usePlanDrag(): PlanDrag {
-  const context = useContext(PlanDragContext)
-  if (context === null) throw new Error('usePlanDrag must be used inside PlanDragProvider')
-  return context
-}
-
-// replaces says which dinner dropping on day replaces: "Friday: replaces
-// Pizza night."
-function replaces(day: PlanDay): string {
-  return `${weekdayName(day.date)}: replaces ${day.dinner.name}.`
-}
-
-// PlanDragProvider holds the drag of a dinner from the plan panel or the
-// Quest-log strip onto a day of the week's grid, which the grid registers as
-// the Board. Each step of a drag is announced to screen readers.
-export function PlanDragProvider({ children }: { children: ReactNode }) {
-  const [board, setBoard] = useState<Board | null>(null)
-  const [drag, setDrag] = useState<Drag | null>(null)
-  const [message, setMessage] = useState('')
-  // The drag as last set, read by handlers that run before a render: a blur
-  // the drop's focus move causes must not cancel the drag it just ended.
-  const current = useRef<Drag | null>(null)
-
-  const value = useMemo((): PlanDrag => {
-    function set(next: Drag | null) {
-      current.current = next
-      setDrag(next)
-    }
-    function dayOf(date: string | null): PlanDay | undefined {
-      return board?.days.find((day) => day.date === date)
-    }
-    function cancel() {
-      const now = current.current
-      if (now === null) return
-      set(null)
-      setMessage(`Cancelled. ${now.pickup.dinner.name} was not swapped in.`)
-    }
-    return {
-      drag,
-      board,
-      setBoard,
-      message,
-      start(pickup, keyboard) {
-        const { name } = pickup.dinner
-        if (board === null) {
-          setMessage(`There is no plan this week to swap ${name} into.`)
-          return false
-        }
-        if (board.pending) {
-          setMessage(`A swap is still being saved. Pick ${name} up once it is done.`)
-          return false
-        }
-        if (board.days.some((day) => day.dinner.id === pickup.dinner.id)) {
-          setMessage(`${name} is already this week.`)
-          return false
-        }
-        // A keyboard drag starts on Monday; a pointer drag on no day.
-        const first = board.days[0]!
-        set({ pickup, keyboard, date: keyboard ? first.date : null })
-        setMessage(
-          keyboard
-            ? `Picked up ${name}. ${replaces(first)} Use the arrow keys to choose a day, Enter to drop, Escape to cancel.`
-            : `Picked up ${name}.`,
-        )
-        return true
-      },
-      over(date) {
-        const now = current.current
-        if (now === null || now.date === date) return
-        set({ ...now, date })
-      },
-      step(by) {
-        const now = current.current
-        if (now === null || board === null) return
-        const at = board.days.findIndex((day) => day.date === now.date)
-        const next = board.days[Math.min(Math.max(at + by, 0), board.days.length - 1)]!
-        set({ ...now, date: next.date })
-        setMessage(replaces(next))
-      },
-      end(date) {
-        const now = current.current
-        if (now === null) return false
-        const day = dayOf(date)
-        if (day === undefined || board === null) {
-          cancel()
-          return false
-        }
-        set(null)
-        if (board.pending) {
-          setMessage(`A swap is still being saved. ${now.pickup.dinner.name} was not swapped in.`)
-          return false
-        }
-        board.drop({ date: day.date, dinner: now.pickup.dinner, fromQuestLog: now.pickup.fromQuestLog })
-        setMessage(`Dropped ${now.pickup.dinner.name} on ${weekdayName(day.date)}, replacing ${day.dinner.name}.`)
-        return true
-      },
-      cancel,
-    }
-  }, [board, drag, message])
-
-  return <PlanDragContext.Provider value={value}>{children}</PlanDragContext.Provider>
-}
-
-// DragAnnouncer is the polite live region a drag's steps are announced in.
-export function DragAnnouncer() {
-  const { message } = usePlanDrag()
-  return (
-    <p aria-live="polite" aria-atomic="true" data-testid="drag-announcer" className={styles.announcer}>
-      {message}
-    </p>
-  )
-}
-
-// DropBoard registers the week's grid as the Board while it is shown.
-export function DropBoard({ days, pending, drop }: Board) {
-  const { setBoard } = usePlanDrag()
-  // drop is a new function on every render: the Board calls the latest.
-  const latestDrop = useRef(drop)
-  useLayoutEffect(() => {
-    latestDrop.current = drop
-  })
-  useLayoutEffect(() => {
-    setBoard({ days, pending, drop: (swap) => latestDrop.current(swap) })
-    return () => setBoard(null)
-  }, [setBoard, days, pending])
-  return null
-}
-
-// useDropTarget is the drag over the day of date, if it is over that day.
-export function useDropTarget(date: string): Drag | null {
-  const { drag } = usePlanDrag()
-  return drag !== null && drag.date === date ? drag : null
-}
-
-// DROP_DATE is the attribute naming the date of a day a dinner drops on.
-export const DROP_DATE = 'data-drop-date'
-
-// dateAt is the date of the day under the point (x, y), or null when it is
-// over no day.
-function dateAt(x: number, y: number): string | null {
-  return document.elementFromPoint(x, y)?.closest(`[${DROP_DATE}]`)?.getAttribute(DROP_DATE) ?? null
-}
-
-// A press becomes a drag once the pointer has moved this far, so a tap is
-// not one.
-const DRAG_THRESHOLD = 4
-
-// The dragged copy floats this far below and to the right of the pointer,
-// as a drag image does, so it stays clear of the "Drop to swap" text
-// centred in the day the pointer is over. Where it would leave the
-// viewport it flips to the left of the pointer, or above it.
-const FLOAT_OFFSET = 48
-
-// Press is a pointer held on a draggable: its id, where it went down, the
-// draggable's size, and whether it has become a drag.
-type Press = { pointerId: number; x: number; y: number; width: number; height: number; dragging: boolean }
-
-// Float is where the dragged copy of a draggable is drawn, and how wide.
-export type Float = { left: number; top: number; width: number }
-
-// floatAt is where the dragged copy of the held draggable is drawn for the
-// pointer at (x, y): offset below right of it, flipped where that would
-// leave the viewport.
-function floatAt(held: Press, x: number, y: number): Float {
-  const right = x + FLOAT_OFFSET
-  const below = y + FLOAT_OFFSET
-  return {
-    left: right + held.width > window.innerWidth ? x - FLOAT_OFFSET - held.width : right,
-    top: below + held.height > window.innerHeight ? y - FLOAT_OFFSET - held.height : below,
-    width: held.width,
-  }
-}
-
-// useDraggable makes a panel row or a strip chip a draggable dinner. With a
-// pointer it is pressed, captured and moved past DRAG_THRESHOLD to pick it
-// up, its copy floats with the pointer, and letting go over a day drops it
-// there, anywhere else cancels. With the keyboard Enter or Space picks it
-// up onto Monday, the arrow keys choose the day, Enter drops it and
-// Escape, or leaving it, cancels; a drop moves focus to the day's swap
-// button, as a Quest-log dinner leaves the Quest log once planned.
-export function useDraggable(pickup: Pickup) {
-  const plan = usePlanDrag()
-  const [float, setFloat] = useState<Float | null>(null)
-  const press = useRef<Press | null>(null)
-  const drag = plan.drag !== null && plan.drag.pickup.dinner.id === pickup.dinner.id ? plan.drag : null
-  const disabled = plan.drag === null && (plan.board === null || plan.board.pending || plan.board.days.some((day) => day.dinner.id === pickup.dinner.id))
-
-  // A draggable that goes mid-drag, as on crossing to mobile, cancels it;
-  // once the drag has ended, cancel does nothing.
-  const { cancel } = plan
-  const dragging = drag !== null
-  const latestCancel = useRef(cancel)
-  useLayoutEffect(() => {
-    latestCancel.current = cancel
-  })
-  useEffect(() => {
-    if (!dragging) return
-    return () => latestCancel.current()
-  }, [dragging])
-
-  function release() {
-    press.current = null
-    setFloat(null)
-  }
-
-  function onPointerDown(event: PointerEvent<HTMLElement>) {
-    if (press.current !== null || plan.drag !== null || !event.isPrimary || event.button !== 0) return
-    const rect = event.currentTarget.getBoundingClientRect()
-    event.currentTarget.setPointerCapture(event.pointerId)
-    press.current = {
-      pointerId: event.pointerId,
-      x: event.clientX,
-      y: event.clientY,
-      width: rect.width,
-      height: rect.height,
-      dragging: false,
-    }
-  }
-
-  function onPointerMove(event: PointerEvent<HTMLElement>) {
-    const held = press.current
-    if (held === null || held.pointerId !== event.pointerId) return
-    if (!held.dragging) {
-      if (Math.hypot(event.clientX - held.x, event.clientY - held.y) < DRAG_THRESHOLD) return
-      if (!plan.start(pickup, false)) {
-        press.current = null
-        return
-      }
-      held.dragging = true
-    }
-    setFloat(floatAt(held, event.clientX, event.clientY))
-    plan.over(dateAt(event.clientX, event.clientY))
-  }
-
-  function onPointerUp(event: PointerEvent<HTMLElement>) {
-    const held = press.current
-    if (held === null || held.pointerId !== event.pointerId) return
-    release()
-    if (held.dragging) plan.end(dateAt(event.clientX, event.clientY))
-  }
-
-  // A cancel, or losing the capture before the release, cancels the drag.
-  // After a release the press is already over, so this ends only a drag
-  // whose capture was lost before it.
-  function onPointerCancel(event: PointerEvent<HTMLElement>) {
-    const held = press.current
-    if (held === null || held.pointerId !== event.pointerId) return
-    release()
-    if (held.dragging) plan.cancel()
-  }
-
-  function onKeyDown(event: KeyboardEvent<HTMLElement>) {
-    const button = event.currentTarget
-    if (drag === null) {
-      if (event.key !== 'Enter' && event.key !== ' ') return
-      event.preventDefault()
-      if (plan.drag === null) plan.start(pickup, true)
-      return
-    }
-    if (event.key === 'Escape') {
-      event.preventDefault()
-      release()
-      plan.cancel()
-      return
-    }
-    if (!drag.keyboard) return
-    // Space picked it up and does not drop it; it does not scroll the page.
-    if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') plan.step(-1)
-    else if (event.key === 'ArrowRight' || event.key === 'ArrowDown') plan.step(1)
-    else if (event.key === 'Enter') drop(button.ownerDocument, drag.date)
-    else if (event.key !== ' ') return
-    event.preventDefault()
-  }
-
-  // drop ends a keyboard drag on the day of date and, once dropped, moves
-  // focus to that day's swap button.
-  function drop(document: Document, date: string | null) {
-    if (!plan.end(date)) return
-    const swapButton = document.querySelector<HTMLElement>(`[${DROP_DATE}="${date}"] button`)
-    if (swapButton === null) throw new Error(`The day ${date} dropped on has no swap button to focus.`)
-    swapButton.focus()
-  }
-
-  // Leaving a keyboard drag cancels it.
-  function onBlur() {
-    if (drag !== null && drag.keyboard) plan.cancel()
-  }
-
-  return {
-    drag,
-    float,
-    props: {
-      'aria-disabled': disabled || undefined,
-      onPointerDown,
-      onPointerMove,
-      onPointerUp,
-      onPointerCancel,
-      onLostPointerCapture: onPointerCancel,
-      onKeyDown,
-      onBlur,
-    },
-  }
-}

web/src/plan/week.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { addDays, dayOfMonth, defaultWeek, localNow, weekdayKicker, weekdayName, weekLabel, weekStart } from './week.ts'
+import { addDays, defaultWeek, localNow, weekdayKicker, weekLabel, weekStart } from './week.ts'
 
 // SCHEDULE drafts the plan on Fridays (Sunday = 0) at 09:00 in New York.
 const SCHEDULE = { timezone: 'America/New_York', plan_draft_dow: 5, plan_draft_time: '09:00' }
@@ -31,17 +31,6 @@ describe('week helpers', () => {
     expect(weekdayKicker('2026-10-11')).toBe('SUN')
   })
 
-  it('names the day of a date in full', () => {
-    expect(weekdayName('2026-10-09')).toBe('Friday')
-    expect(weekdayName('2026-10-11')).toBe('Sunday')
-  })
-
-  it('reads the day of the month of a date', () => {
-    expect(dayOfMonth('2026-10-05')).toBe(5)
-    expect(dayOfMonth('2026-10-31')).toBe(31)
-    expect(() => dayOfMonth('2026-10-32')).toThrow('not a real date')
-  })
-
   it('refuses a week start that is not a Monday, and a date that is not real', () => {
     expect(() => weekLabel('2026-10-06')).toThrow('week start 2026-10-06 is not a Monday')
     expect(() => addDays('2026-02-30', 1)).toThrow('not a real date')

web/src/plan/week.ts

@@ -40,18 +40,6 @@ export function weekdayKicker(date: string): string {
   return WEEKDAYS[midnightUTC(date).getUTCDay()]!
 }
 
-// dayOfMonth is date's day of the month: 1 to 31.
-export function dayOfMonth(date: string): number {
-  return midnightUTC(date).getUTCDate()
-}
-
-const weekday = new Intl.DateTimeFormat('en-US', { weekday: 'long', timeZone: 'UTC' })
-
-// weekdayName is date's day in full: "Monday" to "Sunday".
-export function weekdayName(date: string): string {
-  return weekday.format(midnightUTC(date))
-}
-
 // monday reads start as midnight UTC, or throws when it is not a Monday.
 function monday(start: string): Date {
   const t = midnightUTC(start)

web/src/ui/Tag.module.css

@@ -19,8 +19,3 @@
   background: var(--color-accent-2-200);
   color: var(--color-accent-2-800);
 }
-
-.neutral {
-  background: var(--color-neutral-100);
-  color: var(--color-neutral-800);
-}

web/src/ui/Tag.test.tsx

@@ -15,9 +15,4 @@ describe('Tag', () => {
     render(<Tag tone="teal">Synced</Tag>)
     expect(screen.getByText('Synced')).toHaveClass(styles.teal!)
   })
-
-  it('supports the neutral tone', () => {
-    render(<Tag tone="neutral">Regular</Tag>)
-    expect(screen.getByText('Regular')).toHaveClass(styles.neutral!)
-  })
 })

web/src/ui/Tag.tsx

@@ -1,14 +1,13 @@
 import type { ComponentPropsWithRef } from 'react'
 import styles from './Tag.module.css'
 
-export type TagTone = 'grape' | 'teal' | 'neutral'
+export type TagTone = 'grape' | 'teal'
 
 export type TagProps = ComponentPropsWithRef<'span'> & {
   tone?: TagTone
 }
 
-// Static label such as "Draft", "Side quest", "Synced" or "Regular". Not
-// interactive.
+// Static label such as "Draft", "Side quest" or "Synced". Not interactive.
 export function Tag({ tone = 'grape', className, ...rest }: TagProps) {
   const classes = [styles.tag, styles[tone], className].filter(Boolean).join(' ')
   return <span className={classes} {...rest} />