Add image thumbnails to idea list

[meganrm]

Problem

the index page is all text

Review time

small: one new component with styles

Summary

• Extends the IdeaRoll GraphQL query to fetch the first figure from each idea's preliminaryFindings.figures
• Renders a pill-shaped thumbnail (88×56px, zoomed in 20%) on the right side of each list item when an image is available — supports both local imageFile figures (via GatsbyImage) and external imageLink figures (plain <img>)
• Styling: stadium/pill mask with a soft orange (--ALLEN_ORANGE) glow via box-shadow; posts without images are unchanged
• Extracts thumbnail rendering into a standalone FigureThumbnail component so future image sources only require changes in one place

Example screenshot

Test Plan

• Verify ideas with a local imageFile figure show a pill thumbnail with orange glow
• Verify ideas with an external imageLink figure show the same treatment
• Verify ideas with no figures look identical to before (no empty box, full-width text)
• Verify yarn typeCheck and yarn test pass

🤖 Generated with Claude Code

[netlify]

✅ Deploy Preview for project-idea-board ready!

Name	Link
🔨 Latest commit	cd7d620
🔍 Latest deploy log	https://app.netlify.com/projects/project-idea-board/deploys/6a2b2ca723712100084a9810
😎 Deploy Preview	https://deploy-preview-103--project-idea-board.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

Pull request overview

This PR adds optional image thumbnails to each item in the IdeaRoll list by querying the first preliminaryFindings.figure and rendering it as a pill-shaped thumbnail when present (supporting both local imageFile and external imageLink figures).

Changes:

• Extend the IdeaRoll GraphQL query to fetch preliminaryFindings.figures image data (including gatsbyImageData for local files).
• Update IdeaRoll list item layout to include a right-aligned thumbnail alongside the text content.
• Introduce a reusable FigureThumbnail component to render either GatsbyImage or a plain <img> for external URLs.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File	Description
src/style/idea-roll.module.css	Adds flex layout and pill-thumbnail styling (size/mask/shadow).
src/components/IdeaRoll.tsx	Fetches figure data and conditionally renders a thumbnail per idea.
src/components/FigureThumbnail.tsx	New component that renders a local Gatsby image or external image URL thumbnail.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[toloudis]

LGTM, just one minor thing about the width/height values being repeated

[toloudis]

magic numbers? they seem to be repeated in the css also, so I wonder if they can be factored out into one place somehow.

[ShrimpCryptid]

Just curious, Is there a non-sharp child image? (like a blurred thumbnail or something?)

[ShrimpCryptid]

Should these color constants be declared somewhere else as variables?