Add reusable logbook entity thumbnails

[ultimate]

Motivation

• Provide a single reusable component to render boat, crew and sheet images consistently across the logbook UI and to centralize the logic that turns stored image payloads into usable data: image sources.
• Replace ad-hoc dummy thumbnails with accessible fallbacks and ensure consistent sizing, rounded/circular avatars, and correct object-fit behavior for previews and thumbnails.

Description

• Added app/components/logbook/EntityImage.tsx which accepts a stored image payload (StoredImage | string | null | undefined), an entityType (boat | crew | sheet), alt text, and a variant (thumb | list | preview | header), and renders either an <img> with a data:${mimeType};base64,... source or an accessible fallback icon. (EntityImage, getImageSource)
• Replaced the dummy .picture-thumb in app/components/logbook/pages/LogbookListPage.tsx with EntityImage for boat thumbnails.
• Added EntityImage usage to boat list entries in app/components/logbook/pages/BoatManagerPage.tsx, crew list entries in app/components/logbook/pages/CrewManagerPage.tsx, and sheet preview/header rendering in app/components/logbook/pages/LogbookDetailsPage.tsx (including preview areas and the sheet header).
• Added and updated CSS in app/globals.css and app/styles/design-refresh.css to style .entity-image variants for circular crew avatars, rounded thumbnails, list/preview/header sizes, object-fit rules, and fallback visuals.

Testing

• Ran npm test (Vitest): all test files passed (23 passed, 134 passed | 12 skipped in the run shown). — Success.
• Ran npm run typecheck (tsc --noEmit): no type errors — Success.
• Ran npm run lint (eslint .): linting completed; initial unused eslint-disable warnings were fixed and final lint succeeded — Success.

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ultilog	Ready	Preview, Comment	Jul 11, 2026 9:56am

[ultimate]

Implements #98