Add talk thumbnail rendering for slides and download

[samholmes]

Note

Medium Risk
Adds new client-side SVG rendering and raster export logic (canvas + embedding external images), which may surface CORS/image-fetch issues and has some performance/memory considerations despite being UI-only.

Overview
Adds a reusable TalkThumbnail component that renders a DEVx-styled 16:9 SVG thumbnail (background + branding + optional circular speaker photo) with basic title line-wrapping.

Updates submit-talk to fetch profile_photo from profiles and show a live “Video thumbnail preview” using the current talk title and the user’s profile name/photo.

Introduces a new talk-thumbnail-gen page that lets users upload a photo or look one up by handle, previews the thumbnail at 1280×720, and downloads PNG/JPG by serializing the SVG with embedded images and rasterizing via canvas.

Minor: adds dev:supabase script and reformats a slide metadata.json.

^{Written by Cursor Bugbot for commit 7bf53ab. This will update automatically on new commits. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

This PR is being reviewed by Cursor Bugbot

Details

You are on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

[cursor]

SVG percentage dimensions cause blurry rasterized downloads

High Severity

The TalkThumbnail SVG uses width="100%" and height="100%", and buildEmbeddedSvgString clones this SVG as-is. When the serialized SVG is loaded as a standalone image via blob URL for canvas rasterization, percentage dimensions have no parent to resolve against. Per the CSS spec, the browser falls back to a default object size (typically 300×150), so the SVG is rasterized at very low resolution and then upscaled to 1280×720 on the canvas, producing a blurry downloaded image. The cloned SVG needs explicit pixel width and height attributes before serialization.

Additional Locations (1)

• app/components/TalkThumbnail.tsx#L69-L76

 

[cursor]

Hardcoded SVG clipPath ID causes multi-instance collision

Medium Severity

The clipPath uses a hardcoded id="thumbPhotoClip". Since TalkThumbnail is an exported reusable component, rendering multiple instances on the same page (e.g., a talk listing) would create duplicate DOM IDs. The clipPath="url(#thumbPhotoClip)" reference would resolve to the first instance's clip circle, causing all other thumbnails' photos to be clipped incorrectly. A unique ID per instance (e.g., using useId) would fix this.