feat(admin): rotate a photo from the review queue (#301)

Two icon buttons under every thumbnail, and the client for the item-scoped endpoints behind them. Icon-only with an aria-label rather than visible text, because three labelled buttons under a 120px thumbnail is more furniture than the photo — and a button with no text has no accessible name at all without one.

They are not gated on the background-removal flag. That flag is about the sidecar, and rotation has nothing to do with it: turning a photo is a local file operation that works in every environment, including one where REMBG_URL was never set.

The cache-busting src is the part most likely to have shipped broken. Rotation does not change image_path, so after a successful turn the src is byte-for-byte the string the browser already holds a copy for, and the photo would appear not to have moved. express.static is mounted with no maxAge and would serve the new bytes on a full page reload, but nothing in a session asks it to. A version held in component state is what makes the button visibly do something, and it needs no column and no server change, because the file's identity has not changed — only this page's need to see it again.

The client lives in its own module rather than in draftsApi, whose send() hardcodes the item-drafts prefix these routes deliberately do not use. The inventory editor imports this same module unchanged when it follows, which is the whole reason the endpoints went on the item.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-09-04 13:52:20 -05:00
co-authored by Claude Opus 5
parent 3891f4fd75
commit dd533ffd63
3 changed files with 120 additions and 1 deletions
@@ -117,4 +117,31 @@ test.describe('The review queue', () => {
const card = page.locator('.ant-card').filter({ hasText: note });
await expect(card.getByRole('button', { name: 'Remove background' })).toBeVisible();
});
// Rotation is what repairs the photos uploaded before #300 taught the
// re-encode to apply EXIF orientation rather than discard it. The 1x1 PNG
// this spec uploads is square, so there is nothing visual to assert — what is
// being proved is that the control is there and the whole path answers
// without an error.
test('offers to rotate each photo', async ({ page, admin }) => {
const note = `Sideways ${RUN}`;
await submitAnItem(page, note);
await admin.open('Review queue');
const card = page.locator('.ant-card').filter({ hasText: note });
await expect(card.getByRole('button', { name: 'Rotate left' })).toBeVisible();
await expect(card.getByRole('button', { name: 'Rotate right' })).toBeVisible();
// Asserted on the response rather than on the absence of an error toast.
// toHaveCount(0) passes the instant it is evaluated, before a failure has
// had time to appear, so it would report success on a broken round trip —
// which is barely an assertion at all. Waiting for the POST proves the
// whole path: the button is wired, the route exists, and it answered 204.
const rotated = page.waitForResponse(
(res) => res.url().includes('/rotate-right') && res.request().method() === 'POST'
);
await card.getByRole('button', { name: 'Rotate right' }).click();
expect((await rotated).status()).toBe(204);
});
});