feat(ui): printer photos

[ChristopherHoffman]

Lets users attach photos to their printers, and shows a printer's default photo everywhere a printer is named — so a multi-printer user can tell their machines apart at a glance.

Needs HoffmanEngineering/3d-print-log-api#114.

What's here

The editor. The filament images panel is generalized into EntityImagesPanelComponent, parameterized by an EntityImageTarget — an ID and the gateway that understands it, travelling together so a printer ID can never be handed to a material's endpoints. FilamentImageComponent becomes SignedImageComponent. Printer detail gets the panel, with the create flow sequenced so the new ID is written back onto the form before the uploads run — without that, retrying after a failed upload creates a second printer.

The cross-cutting surfaces. PrinterAvatarComponent renders the default photo on the print list, print cards, the grouped view, print detail, the printer picker, maintenance and analytics. All seven read one per-user map through PrinterThumbnailStore rather than adding a signed URL to five DTOs. The store's endpoint is authenticated-only, so an anonymous visitor gets an empty map and therefore no avatars — a structural guarantee rather than a guard repeated on seven surfaces.

Upload failures are classified. The panel prechecks size and type before uploading, and separates a 400 (these bytes will never be accepted — no retry offered) from anything else (retry offered). The callers navigate on allSucceeded rather than on an empty failure array, so a permanent rejection cannot look like success.

Three bugs found after the first pass

An adversarial review plus a real browser run turned up three things worth calling out, each now covered by a test that fails without the fix:

1. The avatar took the print list down. thumbnailFor() started its fetch inline, which writes a signal — and the avatar reads it from a computed(), where Angular forbids that (NG0600). The error propagated out of the table cell holding the avatar, so /prints rendered with no rows at all. Every test passed straight through it, because they all stubbed the store. The read now schedules the fetch on a microtask, and the avatar spec gained a suite that renders against the real store.

2. Deferred writes were cancelled by the navigation they triggered. uploadStagedImages reported success before the set-default and reorder requests landed; the caller then navigated away, destroying the panel and cancelling them through takeUntilDestroyed. The photo a user starred while it was still staged was silently dropped. Those writes are now chained into the returned observable.

3. A failed thumbnail could never recover. SAS signing is bucketed to six hours server-side so a re-signed URL is byte-identical — deliberately, so the browser image cache can hit. The avatar suppressed the exact URL that failed, so inside a bucket the refreshed value was the value it was suppressing. The store now exposes a generation bumped by each completed fetch, and suppression is scoped to it: one attempt per refetch, and a genuinely dead blob re-suppresses.

Also fixed: SignedImageComponent gained an explicit fit input. The printer list's square thumbnail rendered letterboxed because its ::ng-deep override tied on specificity with the component's own rule — a caller cannot win that race with CSS alone.

Screenshots and docs

The home and docs captures are regenerated with printer photos, and three demo printer photos are committed. The fixture's makes and models were changed to match them — a screenshot of a Snapmaker labelled "(Bambu Lab A1)" is worse than no photo at all.

The five affected capture targets gain imagesLoaded('app-printer-avatar'), which waits for decode rather than for a DOM node the way imagesRendered does — a still-loading <img> already satisfies the old gate, which is the exact race that loses a photo from a capture. first-print-form is deliberately not gated: its avatars live in mat-options that only exist while the select overlay is open, and a figure of an open dropdown is not what that tutorial step shows.

src/content/docs/printers.md gains a Photos section, including that printer photos are never shown on a print's public page.

Testing

• npm run test:brief — 1748 passing.
• npm run lint:brief clean; npm run test:scripts 415/415; node scripts/validate-docs.mjs passes.
• npx cypress run --spec cypress/e2e/prints/public-print-anonymous.cy.ts against a local API in E2ETesting — 3/3. It now asserts a logged-out visitor renders no avatar and issues no /api/Printers/thumbnails request at all.
• Both capture sets regenerated and inspected by eye.
• Manual browser pass against a local API: created a printer with two staged photos, starred the second, confirmed both uploaded and that the starred one became the list thumbnail and the picker avatar.

One thing to flag

AGENTS.md says user-facing docs live in src/documentation. That's stale — authored pages are src/content/docs/*.md, and src/app/documentation/generated/ is build output. Not fixed here to keep the diff on-topic.