feat: Add Instagram drawer for viewing beta videos

[marcodejongh]

Add a bottom drawer that displays beta videos from Instagram for climbs. The drawer can be opened from:

• Ellipsis menu in the queue control bar
• Instagram button on the play screen
• "Beta Videos" option in queue list item dropdown menus

The drawer opens to 90% height and reuses the existing beta videos API endpoint at /api/v1/[board_name]/beta/[climb_uuid].

[vercel]

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

Project	Deployment	Review	Updated (UTC)
boardsesh	Ready	Preview, Comment	Jan 1, 2026 0:03am

[claude]

Claude Review

✅ Ready to merge - Minor issues noted below, but nothing blocking.

Issues

1. Unused imports - instagram-drawer.tsx:5 and instagram-drawer.tsx:10: CloseOutlined, Button, and Title are imported but never used.

2. Missing state reset on climb change - instagram-drawer.tsx:59-63: When the drawer opens with a different climb, betaLinks state retains stale data until the fetch completes. Consider resetting betaLinks to [] at the start of fetchBetaLinks or when climb?.uuid changes.

3. React key using array index - instagram-drawer.tsx:99: Using index as the key for mapped items can cause issues if the list is reordered. Consider using betaLink.link or a combination of climb_uuid + link as the key.

4. No tests added - New component lacks test coverage. Consider adding tests for the Instagram URL regex parsing (getInstagramEmbedUrl) and component rendering states (loading, error, empty, with data).

[claude]

Claude Review

✅ Ready to merge - Minor issues noted below, but nothing blocking.

Issues

1. Unused imports - instagram-drawer.tsx:5,10: CloseOutlined and Title are imported but never used.

2. Duplicate API calls for badge counts - useBetaCount fetches the full beta links array just to get a count. When InstagramDrawer opens, it fetches the same data again. Consider:

   • Using a count-only API endpoint, or
   • Caching/sharing the fetched data between the hook and drawer

3. Array index as React key - instagram-drawer.tsx:99: Using array index as key (key={index}) can cause issues if the list is reordered. Consider using betaLink.link or another unique identifier.

4. Missing tests - No tests added for the new InstagramDrawer component or useBetaCount hook. These include async data fetching logic that would benefit from test coverage.

[claude]

Claude Review

✅ Ready to merge - Minor issues noted below, but nothing blocking.

Issues

1. Duplicate API calls - useBetaCount wraps useBetaLinks which fetches the full beta data just to get the count. When the drawer opens, InstagramDrawer calls useBetaLinks again, causing a duplicate fetch for the same data. Consider using SWR or a shared cache to deduplicate requests. (use-beta-count.ts:13, instagram-drawer.tsx:36)

2. N+1 API calls in queue list - Each QueueListItem calls useBetaCount independently (queue-list-item.tsx:106). For a queue with 20 items, this triggers 20 separate API requests on render. Consider batching or lazy-loading (fetch only when dropdown opens).

3. Inline styles - CLAUDE.md states "Try to avoid use of the style property". The new components use inline styles extensively (e.g., instagram-drawer.tsx:67-95, play-view-client.tsx:188-193). Consider using CSS modules or styled components.

4. Missing loading state for badge - useBetaCount returns null while loading, so the badge shows 0 during fetch (Badge count={betaCount ?? 0}). This could flash 0 briefly before showing the actual count. Consider hiding the badge while loading.