[LAY-2690] Make statement upload a drag-and-drop zone

[augmentcode]

^{Frontend Expert🎨 on behalf of darren@layerfi.com}

🎨 View Storybook preview — Chromatic build 597

Description

Jeffrey asked for two changes to the statement upload inside bookkeeping tasks (Slack thread):

1. The optional description box takes five lines of height. It now takes one line.
2. The Select files button gives no drop target. It is now a drag-and-drop zone that also opens the file picker.

The dropzone follows the existing CsvUpload pattern: useDropzone with noClick, a hidden input on the drop container, and a Browse button that opens the picker. Multi-file selection stays available, so you can drop or pick several statements at once.

Changes

• src/components/features/bookkeeping/TasksListItem/TasksListItem.tsx
  • Replace the FileInput button in the "no files selected" state with a drop container built from useDropzone.
  • Mark the drag-active state with a data-drag-active attribute.
  • Tag the task body with data-upload-document so only upload tasks get the single-line description box.
  • Hoist the repeated task.userResponseType === TaskUserResponseType.UploadDocument check into isUploadDocumentTask.
• src/components/features/bookkeeping/TasksListItem/tasksListItem.scss (new)
  • Constrain the description TextArea to 1lh for upload tasks only. The shared TextArea default is unchanged.
  • Style the dropzone with the dashed-border design-system language CsvUpload uses.
• src/components/features/bookkeeping/TasksListItem/TasksListItem.scratch.stories.tsx (new, scratch)
  • Render one upload-document task and one free-response task, each through an MSW periods override.

New string: upload:label.drag_drop_files_browse — "Drag and drop files, or <browse>Browse</browse>." It sits in the shared upload namespace beside the existing single-file variant. The locale JSON is untouched; extraction collects the key.

bookkeeping:TasksListItem.action.select_files no longer has a call site. Extraction removes it.

Blockers

None.

How this has been tested?

Stories in the Chromatic build:

• Scratch / TasksListItem / Upload Document Task (scratch — will be removed before merge) — shows the change: a one-line description box above the dashed dropzone.
• Scratch / TasksListItem / Free Response Task (scratch — will be removed before merge) — the unchanged baseline: no dropzone, and the description box keeps its five-line height.
• Components / Tasks / Default — the free-response task list, unchanged.

Measured in a headless browser against the built Storybook:

Story	Description box height	Dropzone
Upload Document Task	38 px (one line)	present, 1px dashed rgb(224, 224, 225), "Drag and drop files, or Browse."
Free Response Task	116 px (five lines)	absent

Dropping two files on the zone sets data-drag-active on drag enter, replaces the zone with the selected-files list (statement-1.pdf, statement-2.pdf), and shows the Cancel and Submit actions.

Commands:

• npm run typecheck — passes.
• npm run lint — passes.
• npm test -- --run — 47 files, 345 tests, all pass.
• npm run i18n:check — ok (1368 keys).
• npm run storybook:build — passes.
• npm run stories:check-render — all 122 stories render, including both new play functions.

The repo defines no test-storybook script, so interaction tests run through stories:check-render instead.

The scratch story file is listed above. The cleanup GitHub Action removes it on approval.

Follow-up fixes (commit 7d7ecc6)

^{Frontend Expert🎨 on behalf of darren@layerfi.com}

Jeffrey reviewed the first Chromatic build and reported two problems. Both are fixed.

1. The description box was two lines tall. The 1lh override set only min-block-size, so the textarea kept its default rows="2" height of 57 px. The override now sets block-size: 1lh as well, which gives 38 px: one 19.6 px line, 8 px of padding above and below, and 1 px of border on each edge. The text is centred because the content box holds exactly one line.
2. The dropzone sentence used two font sizes, and the icon sat below the text.
   • .Layer__UI__Button sets font-size: var(--text-md) (14 px), and variant='text' does not inherit the surrounding size, so Browse rendered at 14 px inside a 12 px sentence. A scoped rule now sets font-size: inherit on buttons inside the dropzone.
   • tasksList.scss applied margin-bottom: var(--spacing-md) to every .Layer__P under .Layer__tasks-list-item__body-info, which also reached the dropzone sentence. That 16 px margin grew the icon-and-text row to 33 px, so align-items: center dropped the icon 9 px below the text and pushed the group 4 px above the box centre. The rule now uses the child combinator > .Layer__P, so it applies only to the question paragraph it was written for.

Files changed in the follow-up

• src/components/features/bookkeeping/TasksListItem/tasksListItem.scss
• src/components/features/bookkeeping/TasksList/tasksList.scss

Measurements, before and after

Headless Chromium at 1200 px wide, measured against the built Storybook.

Measurement	Before	After
Description box height, upload task	57.19 px	37.59 px
Description box height, free response baseline	116 px	116 px
Sentence font size	12 px	12 px
Browse font size	14 px	12 px
Browse baseline offset from the sentence	1.31 px	0.32 px
Icon centre minus text-row centre	9.05 px	0.01 px
Space above the icon and text	17 px	17 px
Space below the icon and text	25.56 px	17 px

The icon and the text row share the same centre line, and the equal 17 px gaps show the group is centred in the box.

Verification

• npm run typecheck — passes.
• npm run lint — passes.
• npm test -- --run — 47 files, 345 tests, all pass.
• npm run i18n:check — ok (1368 keys).
• npm run storybook:build — passes.
• npm run stories:check-render — all 122 stories render.

---

Pull Request opened by Augment Code | View session

[github-actions]

Storybook preview — add the storybook-preview label to build one.

It renders stories against a live sandbox business instead of MSW fixtures, and rebuilds on every push while the storybook-preview label is applied.

[augmentcode]

^{FE Review Healer🩹 on behalf of sarah@layerfi.com}

Live preview

🎨 View Storybook preview — Chromatic build 598

Updated: 2026-09-02T19:08Z

Stories included

• Scratch / TasksListItem / Upload Document Task — one-line description box above the drag-and-drop zone (scratch — will be removed before merge)
• Scratch / TasksListItem / Free Response Task — unchanged baseline: no dropzone, five-line description box (scratch — will be removed before merge)
• Components / Tasks / Default — free-response task list, unchanged

^{Session: https://cosmos.augmentcode.com/session?agentId=01M1HNT2854GPJPPAA59SEMX6Z}

[augmentcode]

^{FE Review Healer🩹 on behalf of sarah@layerfi.com}

👀 watching this PR — I'll respond to comments, reviews, and pushes automatically. Remove the augment/watch-frontend label any time to hand it back.