Drag dinners onto days, by pointer or keyboard (Feature 14)

From tablet up, a Quest-log or Regular dinner is dragged from desktop's
right panel or tablet's Quest-log strip onto a day of the week to swap it
in. Pointer events with capture: the source becomes a dashed ghost at 55%
opacity, a copy floats with shadow-lg at -3deg, and the day under the
pointer shows a dashed 2.5 px grape border on grape-100 with "Drop to swap /
Replaces {dinner}". Letting go over a day calls useSwapDay's mutate, so the
swap is optimistic and rolls back with the existing error; anywhere else, a
pointer cancel or Escape cancels with no request.

Keyboard alternative: Enter or Space picks a row up onto Monday, the arrow
keys choose the day, Enter drops (moving focus to that day's swap button),
Escape or leaving the row cancels. Each step is announced in a polite live
region. No drag starts while a swap of the week is pending, nor for a
dinner already this week, matching the swap sheet. Mobile is unchanged.

Task: 5c2842a8-5ac1-4141-9575-c0f461d90c3e

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

web/src/plan/PlanPanel.tsx

@@ -1,5 +1,6 @@
 import { Compass } from 'lucide-react'
-import { useState, type ReactNode } from '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'
@@ -9,14 +10,16 @@ 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 { emptyLists, sourceNames, type Source } from './SwapSheet.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.
-// TODO(5c2842a8): drag-and-drop and its keyboard alternative; until then the
-// rows and chips are not draggable.
 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
@@ -54,6 +57,64 @@ function Grip() {
   )
 }
 
+// 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
+// under 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
@@ -63,6 +124,7 @@ export function PlanPanel() {
   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
@@ -81,11 +143,18 @@ export function PlanPanel() {
         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) => (
-              <li key={dinner.id} className={styles.row}>
+              <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} />
@@ -95,7 +164,7 @@ export function PlanPanel() {
                   {dinner.difficulty !== null && <span className={styles.rowMeta}>{DIFFICULTY_LABEL[dinner.difficulty]}</span>}
                 </span>
                 <Grip />
-              </li>
+              </Draggable>
             ))}
           </ul>
         )}
@@ -109,9 +178,11 @@ export function PlanPanel() {
 }
 
 // QuestLogStrip is tablet's Quest log under the week's grid (mock 2c): each
-// dinner a chip with its 28 px photo and name.
+// 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}>
@@ -119,16 +190,17 @@ export function QuestLogStrip() {
         <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) => (
-              <li key={dinner.id} className={styles.chip}>
+              <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}
-              </li>
+              </Draggable>
             ))}
           </ul>
         )}