From 1902db6d04b037e7407fa46aee98b2f38327e06f Mon Sep 17 00:00:00 2001 From: Thom Lamb Date: Thu, 3 Sep 2026 13:07:17 -0500 Subject: [PATCH] feat(intake): offer background removal on the submission page, ticked (#281) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adds a checkbox to the public submission page that lets a sender opt out of background removal, ticked by default because most items look better cut out and the reverse default would mean almost nobody got it. It only renders when the server reports the sidecar is configured, matching the intake link's new backgroundRemoval flag from Task 5 — an unconfigured environment gets no checkbox rather than one that would do nothing. submitItem now takes removeBackground as a required fourth parameter, sent as the multipart string 'true' or 'false' to match the backend's exact-string opt-out contract. Making the parameter required rather than optional was deliberate, so the compiler would catch any call site left unupdated; the frontend build (which also type-checks tests/ via tsconfig.test.json) confirmed the only call site, in Submit.tsx, was updated. scripts/start-local.ps1 now sets REMBG_URL for the local backend so the checkbox is visible during local and e2e runs; the value need not resolve, since no e2e submission reaches the sidecar without a configured drafting step. Adds two e2e cases to intake-submit.spec.ts: the checkbox appears ticked by default, and a sender can uncheck it and still submit successfully. Both are written per the task-7 brief but not run in this session, since running Playwright requires the full local stack (database, backend, frontend dev server) which was not started. Co-Authored-By: Claude Opus 5 --- frontend/src/intake/Submit.tsx | 20 ++++++++++++++++- frontend/src/intake/intakeApi.ts | 13 ++++++++++- frontend/tests/e2e/intake-submit.spec.ts | 28 ++++++++++++++++++++++++ scripts/start-local.ps1 | 5 +++++ 4 files changed, 64 insertions(+), 2 deletions(-) diff --git a/frontend/src/intake/Submit.tsx b/frontend/src/intake/Submit.tsx index 2151898..c1332c7 100644 --- a/frontend/src/intake/Submit.tsx +++ b/frontend/src/intake/Submit.tsx @@ -8,6 +8,7 @@ import Input from 'antd/es/input'; import Alert from 'antd/es/alert'; import Spin from 'antd/es/spin'; import Space from 'antd/es/space'; +import Checkbox from 'antd/es/checkbox'; import { UploadOutlined } from '@ant-design/icons'; import type { UploadFile } from 'antd/es/upload/interface'; import { fetchIntakeLink, submitItem } from './intakeApi'; @@ -33,6 +34,10 @@ export default function Submit() { const [checking, setChecking] = useState(true); const [files, setFiles] = useState([]); const [note, setNote] = useState(''); + // Ticked by default. Most items look better cut out, and a submitter who + // wants their kitchen table in the photograph can say so — the reverse + // default would mean almost nobody got it. + const [removeBackground, setRemoveBackground] = useState(true); const [sending, setSending] = useState(false); const [sent, setSent] = useState(false); const [error, setError] = useState(null); @@ -62,7 +67,8 @@ export default function Submit() { // rather than map-then-filter because a type predicate cannot narrow to // File here — antd's RcFile extends it, so the predicate would widen. files.flatMap((f) => (f.originFileObj ? [f.originFileObj] : [])), - note + note, + removeBackground ); setSending(false); @@ -129,6 +135,7 @@ export default function Submit() { onClick={() => { setFiles([]); setNote(''); + setRemoveBackground(true); setSent(false); }} > @@ -171,6 +178,17 @@ export default function Submit() { placeholder="What is it, what is it made of, how big, what condition, where did it come from? Anything you know helps — a photo cannot show any of it." /> + {state.kind === 'usable' && state.link.backgroundRemoval && ( + setRemoveBackground(e.target.checked)} + > + {/* Described by what it does, not by how. Nobody sending in a + vase knows what a cut-out or an alpha channel is. */} + Remove the background from my photos + + )} + {error && }