From 268055269913bf32ba42e2c17df8fd8b656105a0 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 1 Jan 2026 11:49:36 +0000
Subject: [PATCH 1/3] feat: Add Instagram drawer for viewing beta videos

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].
---
 .../play/[climb_uuid]/play-view-client.tsx    |  32 ++-
 .../instagram-drawer/instagram-drawer.tsx     | 267 ++++++++++++++++++
 .../queue-control/queue-control-bar.tsx       |  36 ++-
 .../queue-control/queue-list-item.tsx         |  10 +-
 .../components/queue-control/queue-list.tsx   |  24 ++
 5 files changed, 364 insertions(+), 5 deletions(-)
 create mode 100644 packages/web/app/components/instagram-drawer/instagram-drawer.tsx

diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/play/[climb_uuid]/play-view-client.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/play/[climb_uuid]/play-view-client.tsx
index d25417af..1e27a3be 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/play/[climb_uuid]/play-view-client.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/play/[climb_uuid]/play-view-client.tsx
@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState, useCallback } from 'react';
 import { Button, Empty } from 'antd';
-import { LeftOutlined, RightOutlined } from '@ant-design/icons';
+import { LeftOutlined, RightOutlined, InstagramOutlined } from '@ant-design/icons';
 import { useSwipeable } from 'react-swipeable';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { track } from '@vercel/analytics';
@@ -12,6 +12,7 @@ import BoardRenderer from '@/app/components/board-renderer/board-renderer';
 import ClimbTitle from '@/app/components/climb-card/climb-title';
 import { constructClimbListWithSlugs, constructPlayUrlWithSlugs } from '@/app/lib/url-utils';
 import { themeTokens } from '@/app/theme/theme-config';
+import InstagramDrawer from '@/app/components/instagram-drawer/instagram-drawer';
 import styles from './play-view.module.css';
 
 type PlayViewClientProps = {
@@ -37,6 +38,7 @@ const PlayViewClient: React.FC<PlayViewClientProps> = ({ boardDetails, initialCl
 
   const [swipeOffset, setSwipeOffset] = useState(0);
   const [showSwipeHint, setShowSwipeHint] = useState(true);
+  const [isInstagramDrawerOpen, setIsInstagramDrawerOpen] = useState(false);
 
   // Use queue's current climb if available, otherwise use initial climb from SSR
   const displayClimb = currentClimb || initialClimb;
@@ -177,9 +179,27 @@ const PlayViewClient: React.FC<PlayViewClientProps> = ({ boardDetails, initialCl
           className={styles.climbTitleContainer}
           style={{
             padding: `${themeTokens.spacing[1]}px ${themeTokens.spacing[3]}px`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            gap: themeTokens.spacing[2],
           }}
         >
-          <ClimbTitle climb={displayClimb} layout="horizontal" showSetterInfo />
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <ClimbTitle climb={displayClimb} layout="horizontal" showSetterInfo />
+          </div>
+          <Button
+            type="text"
+            icon={<InstagramOutlined />}
+            onClick={() => {
+              setIsInstagramDrawerOpen(true);
+              track('Instagram Drawer Opened', {
+                source: 'play-screen',
+                boardLayout: boardDetails.layout_name || '',
+              });
+            }}
+            aria-label="View beta videos"
+          />
         </div>
         <div {...swipeHandlers} className={styles.swipeContainer}>
           {/* Swipe indicators */}
@@ -217,6 +237,14 @@ const PlayViewClient: React.FC<PlayViewClientProps> = ({ boardDetails, initialCl
           )}
         </div>
       </div>
+
+      {/* Instagram Drawer for Beta Videos */}
+      <InstagramDrawer
+        open={isInstagramDrawerOpen}
+        onClose={() => setIsInstagramDrawerOpen(false)}
+        climb={displayClimb}
+        boardName={boardDetails.board_name}
+      />
     </div>
   );
 };
diff --git a/packages/web/app/components/instagram-drawer/instagram-drawer.tsx b/packages/web/app/components/instagram-drawer/instagram-drawer.tsx
new file mode 100644
index 00000000..04698686
--- /dev/null
+++ b/packages/web/app/components/instagram-drawer/instagram-drawer.tsx
@@ -0,0 +1,267 @@
+'use client';
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { Drawer, Card, Row, Col, Typography, Empty, Modal, Spin, Button } from 'antd';
+import { InstagramOutlined, UserOutlined, CloseOutlined } from '@ant-design/icons';
+import { BetaLink } from '@/app/lib/api-wrappers/sync-api-types';
+import { BoardName, Climb } from '@/app/lib/types';
+import { themeTokens } from '@/app/theme/theme-config';
+
+const { Text, Title } = Typography;
+
+interface InstagramDrawerProps {
+  open: boolean;
+  onClose: () => void;
+  climb: Climb | null;
+  boardName: BoardName;
+}
+
+const getInstagramEmbedUrl = (link: string) => {
+  const instagramRegex = /(?:instagram\.com|instagr\.am)\/(?:p|reel|tv)\/([\w-]+)/;
+  const match = link.match(instagramRegex);
+
+  if (match && match[1]) {
+    return `https://www.instagram.com/p/${match[1]}/embed`;
+  }
+
+  return null;
+};
+
+const InstagramDrawer: React.FC<InstagramDrawerProps> = ({ open, onClose, climb, boardName }) => {
+  const [betaLinks, setBetaLinks] = useState<BetaLink[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [selectedVideo, setSelectedVideo] = useState<BetaLink | null>(null);
+  const [iframeKey, setIframeKey] = useState(0);
+
+  const fetchBetaLinks = useCallback(async () => {
+    if (!climb?.uuid || !boardName) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(`/api/v1/${boardName}/beta/${climb.uuid}`);
+      if (!response.ok) {
+        throw new Error('Failed to fetch beta videos');
+      }
+      const data = await response.json();
+      setBetaLinks(data);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An error occurred');
+      setBetaLinks([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [climb?.uuid, boardName]);
+
+  useEffect(() => {
+    if (open && climb?.uuid) {
+      fetchBetaLinks();
+    }
+  }, [open, climb?.uuid, fetchBetaLinks]);
+
+  const handleVideoClick = (betaLink: BetaLink) => {
+    setSelectedVideo(betaLink);
+    setModalVisible(true);
+  };
+
+  const handleModalClose = () => {
+    setIframeKey((prev) => prev + 1);
+    setModalVisible(false);
+    setSelectedVideo(null);
+  };
+
+  const renderContent = () => {
+    if (loading) {
+      return (
+        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 200 }}>
+          <Spin size="large" />
+        </div>
+      );
+    }
+
+    if (error) {
+      return <Empty description={error} image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+    }
+
+    if (betaLinks.length === 0) {
+      return <Empty description="No beta videos available for this climb" image={Empty.PRESENTED_IMAGE_SIMPLE} />;
+    }
+
+    return (
+      <Row gutter={[12, 12]}>
+        {betaLinks.map((betaLink, index) => {
+          const embedUrl = getInstagramEmbedUrl(betaLink.link);
+
+          return (
+            <Col xs={24} sm={12} key={index}>
+              <Card
+                hoverable
+                size="small"
+                styles={{ body: { padding: 0 } }}
+                onClick={() => handleVideoClick(betaLink)}
+              >
+                {embedUrl ? (
+                  <div
+                    style={{
+                      position: 'relative',
+                      paddingBottom: '100%',
+                      overflow: 'hidden',
+                      borderRadius: `${themeTokens.borderRadius.md}px ${themeTokens.borderRadius.md}px 0 0`,
+                    }}
+                  >
+                    <iframe
+                      src={embedUrl}
+                      style={{
+                        position: 'absolute',
+                        top: '-20%',
+                        left: 0,
+                        width: '100%',
+                        height: '140%',
+                        border: 'none',
+                        pointerEvents: 'none',
+                      }}
+                      scrolling="no"
+                      title={`Beta video ${index + 1} thumbnail`}
+                    />
+                  </div>
+                ) : (
+                  <div
+                    style={{
+                      padding: themeTokens.spacing[8],
+                      textAlign: 'center',
+                      background: themeTokens.neutral[100],
+                    }}
+                  >
+                    <InstagramOutlined style={{ fontSize: 32, color: themeTokens.neutral[400] }} />
+                    <p style={{ margin: `${themeTokens.spacing[2]}px 0 0`, color: themeTokens.neutral[500] }}>
+                      Unable to load video
+                    </p>
+                  </div>
+                )}
+                <div
+                  style={{
+                    padding: themeTokens.spacing[3],
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                    borderTop: `1px solid ${themeTokens.neutral[100]}`,
+                  }}
+                >
+                  {betaLink.foreign_username && (
+                    <Text type="secondary" style={{ fontSize: themeTokens.typography.fontSize.sm }}>
+                      <UserOutlined style={{ marginRight: 4 }} />@{betaLink.foreign_username}
+                      {betaLink.angle && <span style={{ marginLeft: 8 }}>{betaLink.angle}°</span>}
+                    </Text>
+                  )}
+                  <a
+                    href={betaLink.link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onClick={(e) => e.stopPropagation()}
+                    style={{
+                      color: themeTokens.colors.primary,
+                      fontSize: themeTokens.typography.fontSize.sm,
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 4,
+                    }}
+                  >
+                    <InstagramOutlined /> View
+                  </a>
+                </div>
+              </Card>
+            </Col>
+          );
+        })}
+      </Row>
+    );
+  };
+
+  return (
+    <>
+      <Drawer
+        title={
+          <div style={{ display: 'flex', alignItems: 'center', gap: themeTokens.spacing[2] }}>
+            <InstagramOutlined style={{ color: themeTokens.colors.primary }} />
+            <span>Beta Videos</span>
+            {climb?.name && (
+              <Text type="secondary" style={{ fontWeight: 'normal', fontSize: themeTokens.typography.fontSize.sm }}>
+                - {climb.name}
+              </Text>
+            )}
+          </div>
+        }
+        placement="bottom"
+        height="90%"
+        open={open}
+        onClose={onClose}
+        styles={{
+          body: {
+            padding: themeTokens.spacing[4],
+            overflow: 'auto',
+          },
+        }}
+      >
+        {renderContent()}
+      </Drawer>
+
+      {modalVisible && (
+        <Modal
+          title={selectedVideo?.foreign_username ? `Beta by @${selectedVideo.foreign_username}` : 'Beta Video'}
+          open={modalVisible}
+          onCancel={handleModalClose}
+          footer={
+            <a
+              href={selectedVideo?.link}
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{
+                color: themeTokens.colors.primary,
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 6,
+              }}
+            >
+              <InstagramOutlined /> View on Instagram
+            </a>
+          }
+          width="90%"
+          style={{ maxWidth: '500px' }}
+          centered
+          destroyOnClose
+        >
+          {selectedVideo && (
+            <div
+              style={{
+                position: 'relative',
+                paddingBottom: '140%',
+                overflow: 'hidden',
+                borderRadius: themeTokens.borderRadius.md,
+              }}
+            >
+              <iframe
+                key={iframeKey}
+                src={getInstagramEmbedUrl(selectedVideo.link) || ''}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  width: '100%',
+                  height: '100%',
+                  border: 'none',
+                }}
+                scrolling="no"
+                title="Beta video"
+              />
+            </div>
+          )}
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export default InstagramDrawer;
diff --git a/packages/web/app/components/queue-control/queue-control-bar.tsx b/packages/web/app/components/queue-control/queue-control-bar.tsx
index cc1d7be4..3783c34e 100644
--- a/packages/web/app/components/queue-control/queue-control-bar.tsx
+++ b/packages/web/app/components/queue-control/queue-control-bar.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React, { useState, useCallback } from 'react';
-import { Button, Row, Col, Card, Drawer, Space, Popconfirm } from 'antd';
-import { SyncOutlined, DeleteOutlined, ExpandOutlined, FastForwardOutlined, FastBackwardOutlined } from '@ant-design/icons';
+import { Button, Row, Col, Card, Drawer, Space, Popconfirm, Dropdown } from 'antd';
+import { SyncOutlined, DeleteOutlined, ExpandOutlined, FastForwardOutlined, FastBackwardOutlined, MoreOutlined, InstagramOutlined } from '@ant-design/icons';
 import { track } from '@vercel/analytics';
 import { useSwipeable } from 'react-swipeable';
 import { useQueueContext } from '../graphql-queue';
@@ -18,6 +18,7 @@ import ClimbThumbnail from '../climb-card/climb-thumbnail';
 import ClimbTitle from '../climb-card/climb-title';
 import { AscentStatus } from './queue-list-item';
 import { themeTokens } from '@/app/theme/theme-config';
+import InstagramDrawer from '../instagram-drawer/instagram-drawer';
 import styles from './queue-control-bar.module.css';
 
 // Swipe threshold in pixels to trigger navigation
@@ -34,6 +35,7 @@ export interface QueueControlBar {
 const QueueControlBar: React.FC<QueueControlBar> = ({ boardDetails, angle }: QueueControlBar) => {
   const [isQueueOpen, setIsQueueOpen] = useState(false);
   const [swipeOffset, setSwipeOffset] = useState(0);
+  const [isInstagramDrawerOpen, setIsInstagramDrawerOpen] = useState(false);
   const pathname = usePathname();
   const params = useParams<BoardRouteParameters>();
   const searchParams = useSearchParams();
@@ -340,6 +342,28 @@ const QueueControlBar: React.FC<QueueControlBar> = ({ boardDetails, angle }: Que
                     </Space>
                   </span>
                   <TickButton currentClimb={currentClimb} angle={angle} boardDetails={boardDetails} />
+                  <Dropdown
+                    menu={{
+                      items: [
+                        {
+                          key: 'instagram',
+                          label: 'Beta Videos',
+                          icon: <InstagramOutlined />,
+                          onClick: () => {
+                            setIsInstagramDrawerOpen(true);
+                            track('Instagram Drawer Opened', {
+                              source: 'queue-control-bar',
+                              boardLayout: boardDetails.layout_name || '',
+                            });
+                          },
+                        },
+                      ],
+                    }}
+                    trigger={['click']}
+                    placement="topRight"
+                  >
+                    <Button type="text" icon={<MoreOutlined />} />
+                  </Dropdown>
                 </Space>
               </Col>
             </Row>
@@ -373,6 +397,14 @@ const QueueControlBar: React.FC<QueueControlBar> = ({ boardDetails, angle }: Que
       >
         <QueueList boardDetails={boardDetails} onClimbNavigate={() => setIsQueueOpen(false)} />
       </Drawer>
+
+      {/* Instagram Drawer for Beta Videos */}
+      <InstagramDrawer
+        open={isInstagramDrawerOpen}
+        onClose={() => setIsInstagramDrawerOpen(false)}
+        climb={currentClimb}
+        boardName={boardDetails.board_name}
+      />
     </div>
   );
 };
diff --git a/packages/web/app/components/queue-control/queue-list-item.tsx b/packages/web/app/components/queue-control/queue-list-item.tsx
index 4397530a..8433ac11 100644
--- a/packages/web/app/components/queue-control/queue-list-item.tsx
+++ b/packages/web/app/components/queue-control/queue-list-item.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
 import { Row, Col, Avatar, Tooltip, Dropdown, Button } from 'antd';
-import { CheckOutlined, CloseOutlined, UserOutlined, DeleteOutlined, MoreOutlined, InfoCircleOutlined } from '@ant-design/icons';
+import { CheckOutlined, CloseOutlined, UserOutlined, DeleteOutlined, MoreOutlined, InfoCircleOutlined, InstagramOutlined } from '@ant-design/icons';
 import { BoardDetails, ClimbUuid, Climb } from '@/app/lib/types';
 import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
@@ -26,6 +26,7 @@ type QueueListItemProps = {
   setCurrentClimbQueueItem: (item: ClimbQueueItem) => void;
   removeFromQueue: (item: ClimbQueueItem) => void;
   onTickClick: (climb: Climb) => void;
+  onInstagramClick: (climb: Climb) => void;
   onClimbNavigate?: () => void;
 };
 
@@ -91,6 +92,7 @@ const QueueListItem: React.FC<QueueListItemProps> = ({
   setCurrentClimbQueueItem,
   removeFromQueue,
   onTickClick,
+  onInstagramClick,
   onClimbNavigate,
 }) => {
   const router = useRouter();
@@ -353,6 +355,12 @@ const QueueListItem: React.FC<QueueListItemProps> = ({
                       icon: <InfoCircleOutlined />,
                       onClick: handleViewClimb,
                     },
+                    {
+                      key: 'instagram',
+                      label: 'Beta Videos',
+                      icon: <InstagramOutlined />,
+                      onClick: () => item.climb && onInstagramClick(item.climb),
+                    },
                     {
                       key: 'tick',
                       label: 'Tick Climb',
diff --git a/packages/web/app/components/queue-control/queue-list.tsx b/packages/web/app/components/queue-control/queue-list.tsx
index f355db4b..2980b1c7 100644
--- a/packages/web/app/components/queue-control/queue-list.tsx
+++ b/packages/web/app/components/queue-control/queue-list.tsx
@@ -15,6 +15,7 @@ import { SUGGESTIONS_THRESHOLD } from '../board-page/constants';
 import { useBoardProvider } from '../board-provider/board-provider-context';
 import { LogAscentDrawer } from '../logbook/log-ascent-drawer';
 import AuthModal from '../auth/auth-modal';
+import InstagramDrawer from '../instagram-drawer/instagram-drawer';
 
 const { Text, Paragraph } = Typography;
 
@@ -46,6 +47,10 @@ const QueueList: React.FC<QueueListProps> = ({ boardDetails, onClimbNavigate })
   const [tickClimb, setTickClimb] = useState<Climb | null>(null);
   const [showAuthModal, setShowAuthModal] = useState(false);
 
+  // Instagram drawer state
+  const [instagramDrawerVisible, setInstagramDrawerVisible] = useState(false);
+  const [instagramClimb, setInstagramClimb] = useState<Climb | null>(null);
+
   const handleTickClick = useCallback((climb: Climb) => {
     setTickClimb(climb);
     setTickDrawerVisible(true);
@@ -56,6 +61,16 @@ const QueueList: React.FC<QueueListProps> = ({ boardDetails, onClimbNavigate })
     setTickClimb(null);
   }, []);
 
+  const handleInstagramClick = useCallback((climb: Climb) => {
+    setInstagramClimb(climb);
+    setInstagramDrawerVisible(true);
+  }, []);
+
+  const closeInstagramDrawer = useCallback(() => {
+    setInstagramDrawerVisible(false);
+    setInstagramClimb(null);
+  }, []);
+
   // Monitor for drag-and-drop events
   useEffect(() => {
     const cleanup = monitorForElements({
@@ -150,6 +165,7 @@ const QueueList: React.FC<QueueListProps> = ({ boardDetails, onClimbNavigate })
               setCurrentClimbQueueItem={setCurrentClimbQueueItem}
               removeFromQueue={removeFromQueue}
               onTickClick={handleTickClick}
+              onInstagramClick={handleInstagramClick}
               onClimbNavigate={onClimbNavigate}
             />
           );
@@ -262,6 +278,14 @@ const QueueList: React.FC<QueueListProps> = ({ boardDetails, onClimbNavigate })
         title="Sign in to record ticks"
         description="Create an account to log your climbs and track your progress."
       />
+
+      {/* Instagram Drawer for Beta Videos */}
+      <InstagramDrawer
+        open={instagramDrawerVisible}
+        onClose={closeInstagramDrawer}
+        climb={instagramClimb}
+        boardName={boardDetails.board_name}
+      />
     </>
   );
 };

From 12e406ef3551de324a93a8edbe47fcacc80b14a8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 1 Jan 2026 11:57:41 +0000
Subject: [PATCH 2/3] feat: Add beta video count badges to ellipsis menus

- Add useBetaCount hook to fetch video count from API
- Show badge with video count in queue control bar ellipsis menu
- Show badge on Instagram button in play screen
- Show badge in queue list item dropdown menus
- Use EllipsisOutlined icon instead of MoreOutlined
- Reduce button spacing in queue control bar (size={4})
---
 .../play/[climb_uuid]/play-view-client.tsx    | 34 ++++++++-----
 .../instagram-drawer/use-beta-count.ts        | 49 +++++++++++++++++++
 .../queue-control/queue-control-bar.tsx       | 23 +++++++--
 .../queue-control/queue-list-item.tsx         | 21 ++++++--
 4 files changed, 105 insertions(+), 22 deletions(-)
 create mode 100644 packages/web/app/components/instagram-drawer/use-beta-count.ts

diff --git a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/play/[climb_uuid]/play-view-client.tsx b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/play/[climb_uuid]/play-view-client.tsx
index 1e27a3be..c7ff70ed 100644
--- a/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/play/[climb_uuid]/play-view-client.tsx
+++ b/packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/play/[climb_uuid]/play-view-client.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect, useState, useCallback } from 'react';
-import { Button, Empty } from 'antd';
+import { Button, Empty, Badge } from 'antd';
 import { LeftOutlined, RightOutlined, InstagramOutlined } from '@ant-design/icons';
 import { useSwipeable } from 'react-swipeable';
 import { useRouter, useSearchParams } from 'next/navigation';
@@ -13,6 +13,7 @@ import ClimbTitle from '@/app/components/climb-card/climb-title';
 import { constructClimbListWithSlugs, constructPlayUrlWithSlugs } from '@/app/lib/url-utils';
 import { themeTokens } from '@/app/theme/theme-config';
 import InstagramDrawer from '@/app/components/instagram-drawer/instagram-drawer';
+import { useBetaCount } from '@/app/components/instagram-drawer/use-beta-count';
 import styles from './play-view.module.css';
 
 type PlayViewClientProps = {
@@ -43,6 +44,11 @@ const PlayViewClient: React.FC<PlayViewClientProps> = ({ boardDetails, initialCl
   // Use queue's current climb if available, otherwise use initial climb from SSR
   const displayClimb = currentClimb || initialClimb;
 
+  const betaCount = useBetaCount({
+    climbUuid: displayClimb?.uuid,
+    boardName: boardDetails.board_name,
+  });
+
   // Hide swipe hint after first interaction
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -188,18 +194,20 @@ const PlayViewClient: React.FC<PlayViewClientProps> = ({ boardDetails, initialCl
           <div style={{ flex: 1, minWidth: 0 }}>
             <ClimbTitle climb={displayClimb} layout="horizontal" showSetterInfo />
           </div>
-          <Button
-            type="text"
-            icon={<InstagramOutlined />}
-            onClick={() => {
-              setIsInstagramDrawerOpen(true);
-              track('Instagram Drawer Opened', {
-                source: 'play-screen',
-                boardLayout: boardDetails.layout_name || '',
-              });
-            }}
-            aria-label="View beta videos"
-          />
+          <Badge count={betaCount ?? 0} size="small" offset={[-4, 4]}>
+            <Button
+              type="text"
+              icon={<InstagramOutlined />}
+              onClick={() => {
+                setIsInstagramDrawerOpen(true);
+                track('Instagram Drawer Opened', {
+                  source: 'play-screen',
+                  boardLayout: boardDetails.layout_name || '',
+                });
+              }}
+              aria-label="View beta videos"
+            />
+          </Badge>
         </div>
         <div {...swipeHandlers} className={styles.swipeContainer}>
           {/* Swipe indicators */}
diff --git a/packages/web/app/components/instagram-drawer/use-beta-count.ts b/packages/web/app/components/instagram-drawer/use-beta-count.ts
new file mode 100644
index 00000000..1b9c2b28
--- /dev/null
+++ b/packages/web/app/components/instagram-drawer/use-beta-count.ts
@@ -0,0 +1,49 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { BoardName } from '@/app/lib/types';
+
+interface UseBetaCountOptions {
+  climbUuid: string | undefined;
+  boardName: BoardName;
+  enabled?: boolean;
+}
+
+export function useBetaCount({ climbUuid, boardName, enabled = true }: UseBetaCountOptions): number | null {
+  const [count, setCount] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (!climbUuid || !boardName || !enabled) {
+      setCount(null);
+      return;
+    }
+
+    let cancelled = false;
+
+    const fetchCount = async () => {
+      try {
+        const response = await fetch(`/api/v1/${boardName}/beta/${climbUuid}`);
+        if (!response.ok) {
+          setCount(null);
+          return;
+        }
+        const data = await response.json();
+        if (!cancelled) {
+          setCount(Array.isArray(data) ? data.length : 0);
+        }
+      } catch {
+        if (!cancelled) {
+          setCount(null);
+        }
+      }
+    };
+
+    fetchCount();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [climbUuid, boardName, enabled]);
+
+  return count;
+}
diff --git a/packages/web/app/components/queue-control/queue-control-bar.tsx b/packages/web/app/components/queue-control/queue-control-bar.tsx
index 3783c34e..afde805f 100644
--- a/packages/web/app/components/queue-control/queue-control-bar.tsx
+++ b/packages/web/app/components/queue-control/queue-control-bar.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React, { useState, useCallback } from 'react';
-import { Button, Row, Col, Card, Drawer, Space, Popconfirm, Dropdown } from 'antd';
-import { SyncOutlined, DeleteOutlined, ExpandOutlined, FastForwardOutlined, FastBackwardOutlined, MoreOutlined, InstagramOutlined } from '@ant-design/icons';
+import { Button, Row, Col, Card, Drawer, Space, Popconfirm, Dropdown, Badge } from 'antd';
+import { SyncOutlined, DeleteOutlined, ExpandOutlined, FastForwardOutlined, FastBackwardOutlined, EllipsisOutlined, InstagramOutlined } from '@ant-design/icons';
 import { track } from '@vercel/analytics';
 import { useSwipeable } from 'react-swipeable';
 import { useQueueContext } from '../graphql-queue';
@@ -19,6 +19,7 @@ import ClimbTitle from '../climb-card/climb-title';
 import { AscentStatus } from './queue-list-item';
 import { themeTokens } from '@/app/theme/theme-config';
 import InstagramDrawer from '../instagram-drawer/instagram-drawer';
+import { useBetaCount } from '../instagram-drawer/use-beta-count';
 import styles from './queue-control-bar.module.css';
 
 // Swipe threshold in pixels to trigger navigation
@@ -46,6 +47,11 @@ const QueueControlBar: React.FC<QueueControlBar> = ({ boardDetails, angle }: Que
   const isPlayPage = pathname.includes('/play/');
   const { currentClimb, mirrorClimb, queue, setQueue, getNextClimbQueueItem, getPreviousClimbQueueItem, setCurrentClimbQueueItem, viewOnlyMode } = useQueueContext();
 
+  const betaCount = useBetaCount({
+    climbUuid: currentClimb?.uuid,
+    boardName: boardDetails.board_name,
+  });
+
   const nextClimb = getNextClimbQueueItem();
   const previousClimb = getPreviousClimbQueueItem();
   const shouldNavigate = isViewPage || isPlayPage;
@@ -302,7 +308,7 @@ const QueueControlBar: React.FC<QueueControlBar> = ({ boardDetails, angle }: Que
 
               {/* Button cluster */}
               <Col xs={9} style={{ textAlign: 'right' }}>
-                <Space>
+                <Space size={4}>
                   {boardDetails.supportsMirroring ? (
                     <Button
                       id="button-mirror"
@@ -347,7 +353,14 @@ const QueueControlBar: React.FC<QueueControlBar> = ({ boardDetails, angle }: Que
                       items: [
                         {
                           key: 'instagram',
-                          label: 'Beta Videos',
+                          label: (
+                            <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                              Beta Videos
+                              {betaCount !== null && betaCount > 0 && (
+                                <Badge count={betaCount} size="small" />
+                              )}
+                            </span>
+                          ),
                           icon: <InstagramOutlined />,
                           onClick: () => {
                             setIsInstagramDrawerOpen(true);
@@ -362,7 +375,7 @@ const QueueControlBar: React.FC<QueueControlBar> = ({ boardDetails, angle }: Que
                     trigger={['click']}
                     placement="topRight"
                   >
-                    <Button type="text" icon={<MoreOutlined />} />
+                    <Button type="text" icon={<EllipsisOutlined />} />
                   </Dropdown>
                 </Space>
               </Col>
diff --git a/packages/web/app/components/queue-control/queue-list-item.tsx b/packages/web/app/components/queue-control/queue-list-item.tsx
index 8433ac11..86ddd1d7 100644
--- a/packages/web/app/components/queue-control/queue-list-item.tsx
+++ b/packages/web/app/components/queue-control/queue-list-item.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import { useRouter } from 'next/navigation';
-import { Row, Col, Avatar, Tooltip, Dropdown, Button } from 'antd';
-import { CheckOutlined, CloseOutlined, UserOutlined, DeleteOutlined, MoreOutlined, InfoCircleOutlined, InstagramOutlined } from '@ant-design/icons';
+import { Row, Col, Avatar, Tooltip, Dropdown, Button, Badge } from 'antd';
+import { CheckOutlined, CloseOutlined, UserOutlined, DeleteOutlined, EllipsisOutlined, InfoCircleOutlined, InstagramOutlined } from '@ant-design/icons';
 import { BoardDetails, ClimbUuid, Climb } from '@/app/lib/types';
 import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
@@ -15,6 +15,7 @@ import ClimbTitle from '../climb-card/climb-title';
 import { useBoardProvider } from '../board-provider/board-provider-context';
 import { themeTokens } from '@/app/theme/theme-config';
 import { constructClimbViewUrl, constructClimbViewUrlWithSlugs, parseBoardRouteParams } from '@/app/lib/url-utils';
+import { useBetaCount } from '../instagram-drawer/use-beta-count';
 
 type QueueListItemProps = {
   item: ClimbQueueItem;
@@ -102,6 +103,11 @@ const QueueListItem: React.FC<QueueListItemProps> = ({
   const [isHorizontalSwipe, setIsHorizontalSwipe] = useState<boolean | null>(null);
   const itemRef = useRef<HTMLDivElement>(null);
 
+  const betaCount = useBetaCount({
+    climbUuid: item.climb?.uuid,
+    boardName: boardDetails.board_name,
+  });
+
   const handleViewClimb = useCallback(() => {
     if (!item.climb) return;
 
@@ -357,7 +363,14 @@ const QueueListItem: React.FC<QueueListItemProps> = ({
                     },
                     {
                       key: 'instagram',
-                      label: 'Beta Videos',
+                      label: (
+                        <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                          Beta Videos
+                          {betaCount !== null && betaCount > 0 && (
+                            <Badge count={betaCount} size="small" />
+                          )}
+                        </span>
+                      ),
                       icon: <InstagramOutlined />,
                       onClick: () => item.climb && onInstagramClick(item.climb),
                     },
@@ -379,7 +392,7 @@ const QueueListItem: React.FC<QueueListItemProps> = ({
                 trigger={['click']}
                 placement="bottomRight"
               >
-                <Button type="text" icon={<MoreOutlined />} />
+                <Button type="text" icon={<EllipsisOutlined />} />
               </Dropdown>
             </Col>
           </Row>

From 2d616aa1371a9a4051e5fdea8ac75ea8b90a0d45 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 1 Jan 2026 12:01:54 +0000
Subject: [PATCH 3/3] refactor: Fix code review issues in Instagram drawer

- Remove unused imports (CloseOutlined, Title) from instagram-drawer.tsx
- Create shared useBetaLinks hook to avoid duplicate API calls
- Update useBetaCount to use the shared hook
- Update InstagramDrawer to use the shared hook instead of fetching directly
- Use betaLink.link as React key instead of array index
---
 .../instagram-drawer/instagram-drawer.tsx     | 45 ++++----------
 .../instagram-drawer/use-beta-count.ts        | 38 +-----------
 .../instagram-drawer/use-beta-links.ts        | 61 +++++++++++++++++++
 3 files changed, 74 insertions(+), 70 deletions(-)
 create mode 100644 packages/web/app/components/instagram-drawer/use-beta-links.ts

diff --git a/packages/web/app/components/instagram-drawer/instagram-drawer.tsx b/packages/web/app/components/instagram-drawer/instagram-drawer.tsx
index 04698686..1f288b76 100644
--- a/packages/web/app/components/instagram-drawer/instagram-drawer.tsx
+++ b/packages/web/app/components/instagram-drawer/instagram-drawer.tsx
@@ -1,13 +1,14 @@
 'use client';
 
-import React, { useState, useEffect, useCallback } from 'react';
-import { Drawer, Card, Row, Col, Typography, Empty, Modal, Spin, Button } from 'antd';
-import { InstagramOutlined, UserOutlined, CloseOutlined } from '@ant-design/icons';
+import React, { useState } from 'react';
+import { Drawer, Card, Row, Col, Typography, Empty, Modal, Spin } from 'antd';
+import { InstagramOutlined, UserOutlined } from '@ant-design/icons';
 import { BetaLink } from '@/app/lib/api-wrappers/sync-api-types';
 import { BoardName, Climb } from '@/app/lib/types';
 import { themeTokens } from '@/app/theme/theme-config';
+import { useBetaLinks } from './use-beta-links';
 
-const { Text, Title } = Typography;
+const { Text } = Typography;
 
 interface InstagramDrawerProps {
   open: boolean;
@@ -28,39 +29,15 @@ const getInstagramEmbedUrl = (link: string) => {
 };
 
 const InstagramDrawer: React.FC<InstagramDrawerProps> = ({ open, onClose, climb, boardName }) => {
-  const [betaLinks, setBetaLinks] = useState<BetaLink[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
   const [modalVisible, setModalVisible] = useState(false);
   const [selectedVideo, setSelectedVideo] = useState<BetaLink | null>(null);
   const [iframeKey, setIframeKey] = useState(0);
 
-  const fetchBetaLinks = useCallback(async () => {
-    if (!climb?.uuid || !boardName) return;
-
-    setLoading(true);
-    setError(null);
-
-    try {
-      const response = await fetch(`/api/v1/${boardName}/beta/${climb.uuid}`);
-      if (!response.ok) {
-        throw new Error('Failed to fetch beta videos');
-      }
-      const data = await response.json();
-      setBetaLinks(data);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'An error occurred');
-      setBetaLinks([]);
-    } finally {
-      setLoading(false);
-    }
-  }, [climb?.uuid, boardName]);
-
-  useEffect(() => {
-    if (open && climb?.uuid) {
-      fetchBetaLinks();
-    }
-  }, [open, climb?.uuid, fetchBetaLinks]);
+  const { betaLinks, loading, error } = useBetaLinks({
+    climbUuid: climb?.uuid,
+    boardName,
+    enabled: open,
+  });
 
   const handleVideoClick = (betaLink: BetaLink) => {
     setSelectedVideo(betaLink);
@@ -96,7 +73,7 @@ const InstagramDrawer: React.FC<InstagramDrawerProps> = ({ open, onClose, climb,
           const embedUrl = getInstagramEmbedUrl(betaLink.link);
 
           return (
-            <Col xs={24} sm={12} key={index}>
+            <Col xs={24} sm={12} key={betaLink.link}>
               <Card
                 hoverable
                 size="small"
diff --git a/packages/web/app/components/instagram-drawer/use-beta-count.ts b/packages/web/app/components/instagram-drawer/use-beta-count.ts
index 1b9c2b28..76ff0b7b 100644
--- a/packages/web/app/components/instagram-drawer/use-beta-count.ts
+++ b/packages/web/app/components/instagram-drawer/use-beta-count.ts
@@ -1,7 +1,7 @@
 'use client';
 
-import { useState, useEffect } from 'react';
 import { BoardName } from '@/app/lib/types';
+import { useBetaLinks } from './use-beta-links';
 
 interface UseBetaCountOptions {
   climbUuid: string | undefined;
@@ -10,40 +10,6 @@ interface UseBetaCountOptions {
 }
 
 export function useBetaCount({ climbUuid, boardName, enabled = true }: UseBetaCountOptions): number | null {
-  const [count, setCount] = useState<number | null>(null);
-
-  useEffect(() => {
-    if (!climbUuid || !boardName || !enabled) {
-      setCount(null);
-      return;
-    }
-
-    let cancelled = false;
-
-    const fetchCount = async () => {
-      try {
-        const response = await fetch(`/api/v1/${boardName}/beta/${climbUuid}`);
-        if (!response.ok) {
-          setCount(null);
-          return;
-        }
-        const data = await response.json();
-        if (!cancelled) {
-          setCount(Array.isArray(data) ? data.length : 0);
-        }
-      } catch {
-        if (!cancelled) {
-          setCount(null);
-        }
-      }
-    };
-
-    fetchCount();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [climbUuid, boardName, enabled]);
-
+  const { count } = useBetaLinks({ climbUuid, boardName, enabled });
   return count;
 }
diff --git a/packages/web/app/components/instagram-drawer/use-beta-links.ts b/packages/web/app/components/instagram-drawer/use-beta-links.ts
new file mode 100644
index 00000000..76a1476a
--- /dev/null
+++ b/packages/web/app/components/instagram-drawer/use-beta-links.ts
@@ -0,0 +1,61 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { BetaLink } from '@/app/lib/api-wrappers/sync-api-types';
+import { BoardName } from '@/app/lib/types';
+
+interface UseBetaLinksOptions {
+  climbUuid: string | undefined;
+  boardName: BoardName;
+  enabled?: boolean;
+}
+
+interface UseBetaLinksResult {
+  betaLinks: BetaLink[];
+  count: number | null;
+  loading: boolean;
+  error: string | null;
+  refetch: () => void;
+}
+
+export function useBetaLinks({ climbUuid, boardName, enabled = true }: UseBetaLinksOptions): UseBetaLinksResult {
+  const [betaLinks, setBetaLinks] = useState<BetaLink[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchBetaLinks = useCallback(async () => {
+    if (!climbUuid || !boardName || !enabled) {
+      setBetaLinks([]);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await fetch(`/api/v1/${boardName}/beta/${climbUuid}`);
+      if (!response.ok) {
+        throw new Error('Failed to fetch beta videos');
+      }
+      const data = await response.json();
+      setBetaLinks(Array.isArray(data) ? data : []);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An error occurred');
+      setBetaLinks([]);
+    } finally {
+      setLoading(false);
+    }
+  }, [climbUuid, boardName, enabled]);
+
+  useEffect(() => {
+    fetchBetaLinks();
+  }, [fetchBetaLinks]);
+
+  return {
+    betaLinks,
+    count: betaLinks.length > 0 ? betaLinks.length : null,
+    loading,
+    error,
+    refetch: fetchBetaLinks,
+  };
+}