feat: Add clear queue button with confirmation dialog

CLAUDE.md

@@ -133,6 +133,7 @@ We are using next.js app router, it's important we try to use server side compon
 - Always try to use server side rendering wherever possibe. But do note that for some parts such as the QueueList and related components, thats impossible, so dont try to force SSR there.
 - Always use the AntD components and their properties.
 - Try to avoid use of the style property
+- Always use design tokens from `packages/web/app/theme/theme-config.ts` for colors, spacing, and other design values - never use hardcoded values
 - Always use CSS media queries for mobile/responsive design
 - For rendering avoid JavaScript breakpoint detection & Grid.useBreakpoint()
 - While we work together, be careful to remove any code you no longer use, so we dont end up with lots of deadcode

packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/layout-client.tsx

@@ -2,8 +2,11 @@
 
 import React from 'react';
 import { PropsWithChildren } from 'react';
-import { Layout, Tabs, Badge } from 'antd';
+import { Layout, Tabs, Badge, Button, Popconfirm, Flex } from 'antd';
+import { DeleteOutlined } from '@ant-design/icons';
+import { track } from '@vercel/analytics';
 import { BoardDetails } from '@/app/lib/types';
+import { themeTokens } from '@/app/theme/theme-config';
 import BasicSearchForm from '@/app/components/search-drawer/basic-search-form';
 import ClimbHoldSearchForm from '@/app/components/search-drawer/climb-hold-search-form';
 import SearchResultsFooter from '@/app/components/search-drawer/search-results-footer';
@@ -19,7 +22,15 @@ interface ListLayoutClientProps {
 }
 
 const TabsWrapper: React.FC<{ boardDetails: BoardDetails }> = ({ boardDetails }) => {
-  const { queue } = useQueueContext();
+  const { queue, setQueue } = useQueueContext();
+
+  const handleClearQueue = () => {
+    setQueue([]);
+    track('Queue Cleared', {
+      boardLayout: boardDetails.layout_name || '',
+      itemsCleared: queue.length,
+    });
+  };
 
   const tabItems = [
     {
@@ -36,7 +47,28 @@ const TabsWrapper: React.FC<{ boardDetails: BoardDetails }> = ({ boardDetails })
           Queue
         </Badge>
       ),
-      children: <QueueList boardDetails={boardDetails} />,
+      children: (
+        <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+          {queue.length > 0 && (
+            <Flex justify="flex-end" style={{ padding: '8px 8px 0 8px' }}>
+              <Popconfirm
+                title="Clear queue"
+                description="Are you sure you want to clear all items from the queue?"
+                onConfirm={handleClearQueue}
+                okText="Clear"
+                cancelText="Cancel"
+              >
+                <Button type="text" icon={<DeleteOutlined />} size="small" style={{ color: themeTokens.neutral[400] }}>
+                  Clear
+                </Button>
+              </Popconfirm>
+            </Flex>
+          )}
+          <div style={{ flex: 1, overflow: 'auto' }}>
+            <QueueList boardDetails={boardDetails} />
+          </div>
+        </div>
+      ),
     },
     {
       key: 'search',

packages/web/app/components/queue-control/queue-control-bar.tsx

@@ -1,7 +1,7 @@
 'use client';
 import React, { useState } from 'react';
-import { Button, Row, Col, Card, Drawer, Space } from 'antd';
-import { SyncOutlined } from '@ant-design/icons';
+import { Button, Row, Col, Card, Drawer, Space, Popconfirm } from 'antd';
+import { SyncOutlined, DeleteOutlined } from '@ant-design/icons';
 import { track } from '@vercel/analytics';
 import { useQueueContext } from '../graphql-queue';
 import NextClimbButton from './next-climb-button';
@@ -28,7 +28,15 @@ const QueueControlBar: React.FC<QueueControlBar> = ({ boardDetails, angle }: Que
 
   const isViewPage = pathname.includes('/view/');
   const isListPage = pathname.includes('/list');
-  const { currentClimb, mirrorClimb } = useQueueContext();
+  const { currentClimb, mirrorClimb, queue, setQueue } = useQueueContext();
+
+  const handleClearQueue = () => {
+    setQueue([]);
+    track('Queue Cleared', {
+      boardLayout: boardDetails.layout_name || '',
+      itemsCleared: queue.length,
+    });
+  };
 
   const toggleQueueDrawer = () => {
     // Don't open drawer on desktop when on list page (queue is in sidebar)
@@ -127,6 +135,21 @@ const QueueControlBar: React.FC<QueueControlBar> = ({ boardDetails, angle }: Que
         open={isQueueOpen}
         onClose={toggleQueueDrawer}
         styles={{ body: { padding: 0 } }}
+        extra={
+          queue.length > 0 && (
+            <Popconfirm
+              title="Clear queue"
+              description="Are you sure you want to clear all items from the queue?"
+              onConfirm={handleClearQueue}
+              okText="Clear"
+              cancelText="Cancel"
+            >
+              <Button type="text" icon={<DeleteOutlined />} style={{ color: themeTokens.neutral[400] }}>
+                Clear
+              </Button>
+            </Popconfirm>
+          )
+        }
       >
         <QueueList boardDetails={boardDetails} onClimbNavigate={() => setIsQueueOpen(false)} />
       </Drawer>