# Slice 8 — Message compose + WidgetConfigDialog mobile forms (worker output)

## Files changed

| File | Status | Lines |
|------|--------|-------|
| `frontend/src/pages/UsersPage.impl.tsx` | modified | +245 / -200 (extraction + re-indent) |
| `frontend/src/components/WidgetConfigDialog.tsx` | modified | +215 / -178 (extraction + re-indent) |
| `frontend/src/pages/__tests__/UsersPage.test.tsx` | modified | +33 / -0 |
| `frontend/src/components/__tests__/WidgetConfigDialog.test.tsx` | new | 57 lines |

**Diff stat total:** 484 insertions, 387 deletions across 3 tracked + 1 new file. The diff is large because the compose body and WidgetConfigDialog body were extracted into shared `const` variables (so both SheetForm and Dialog can consume them). The actual **behavioral delta** is ~80 lines of new code (SheetForm branches + dynamic props); the rest is structural re-indentation of existing, token-identical content.

**Over the 400-line budget.** The overrun is inherent to the extraction pattern: sharing a form body between Dialog and SheetForm requires lifting it into a const, which inflates the diff with movement. Both changes were prioritized per the task instruction ("prioritize the compose dialog… keep WidgetConfigDialog changes minimal but correct").

## What was implemented

### 8.1 — Message compose SheetForm (UsersPage.impl.tsx)

Below `md` (`isMobile === true`), the compose dialog renders inside a `<SheetForm>` instead of a `<Dialog>`:

- **Body extracted** into a `composeBody` const (Progress bar, error/success alerts, queue banner, selected-users info, subject input, formatting toolbar, HTML textarea, email preview iframe, attachments). Same content renders inside both SheetForm (mobile) and Dialog (desktop).
- **SheetForm wiring:** title="Message selected users", onSave=handleSend, onCancel=closeCompose, isPending=sendUserMessage.isPending, saveDisabled=!selectedDeliverableRows.length || !subject.trim(), saveLabel="Send message".
- **Send semantics preserved:** handleSend already calls setComposeOpen(false) on success (R4.5 satisfied).
- **Attachment UI preserved** inside the SheetForm body (iOS Safari upload deferred to Slice 10 manual pass per the task note).
- **Desktop (md+)**: the Dialog renders with the exact same composeBody + DialogHeader + DialogFooter. isComposeMobile (900px) fullscreen styling still applies for 768–900px.

### 8.2 — WidgetConfigDialog SheetForm

Below `md`, the widget config dialog renders inside a `<SheetForm>` with **dynamic props based on the two-mode flow**:

- **List mode** (no draft): title="Dashboard widgets", onSave=()=>handleClose(false) (closes dialog), onCancel=()=>handleClose(false), saveLabel="Done". Both footer buttons close the dialog.
- **Draft mode** (add/edit): title="Edit widget" / "Add widget", onSave=saveDraft, onCancel=reset (back to list, NOT close), saveLabel="Save widget", isPending=saveWidget.isPending.
- **Draft inline Back/Save hidden on mobile** (`{!isMobile ? <Back/Save> : null}`) since the SheetForm footer provides Cancel=reset + Save=saveDraft.
- **Body extracted** into a `draftBody` const shared between both branches. List view (reorder/toggle/edit/delete + add-widget buttons) and draft view (Title/SortOrder/Enabled/config editor) are unchanged.
- **Desktop (md+)**: the Dialog renders with the same draftBody. The draft's inline Back/Save buttons are present (isMobile=false).

### 8.3 — Tests

**UsersPage.test.tsx:** +1 test in the slice-5 mobile describe block:

- "renders compose in a SheetForm below md with send button" — selects a user, opens compose, asserts title + Send button + Subject input are present.

**WidgetConfigDialog.test.tsx** (new): 2 tests:

- Desktop: renders Dialog with "Dashboard widgets" heading.
- Mobile: renders SheetForm with "Dashboard widgets" title + "Done" button.

## Validation

```
npm run lint   → 0 errors, 2 pre-existing warnings (UsersPage.impl.tsx exhaustive-deps, pre-existing)
npm run build  → ✓ built (tsc -b + vite)
npm run test   → 28 files / 116 tests passed (was 113; +3 new)
```

## Deviations from design

1. **IIFE pattern for compose branch.** The compose dialog sits inside the component's main return. Extracting the body and branching required either an IIFE (`{(() => { ... })()}`) or a separate helper component. Used the IIFE to keep the compose logic inline with the component's state/handlers (it references 15+ local variables: subject, htmlBody, attachments, sendUserMessage, etc.). A helper component would need all of these as props, which is worse.

2. **WidgetConfigDialog dynamic SheetForm props.** The design said "reorder list and per-widget config render inside SheetForm." The two-mode flow (list → draft) doesn't map to SheetForm's single onSave/onCancel cleanly. Solved with conditional props: list mode = Done/close, draft mode = Save-widget/back-to-list. The "Done" button in list mode is slightly redundant with Cancel (both close), but it's functional and the footer is always present.

3. **Over 400-line budget.** The extraction pattern inflates the diff. Both changes were completed; the alternative (CSS-only `hidden md:block` on two separate copies of the form body) would duplicate ~200 lines of form JSX.

## skill_resolution

`none` — no project/user SKILL.md paths were injected, and no `.atl/skill-registry.md` was found.

## Residual risks

- **R4.5 dirty-state outside-click confirm** still not implemented at the SheetForm level. Same deferred concern as Slices 6–7. Flag for verify pass.
- **WidgetConfigDialog "Done" + Cancel redundancy.** In list mode, both footer buttons close the dialog. A single "Done" button would be cleaner but would require a SheetForm API change (hide Cancel). Non-blocking.
- **Diff over budget.** Flagging for parent decision: accept the extraction overhead, or request the IIFE pattern be replaced with CSS-only branching (which would duplicate form JSX).