Add circuit/list filtering support

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

@@ -69,14 +69,14 @@ const TabsWrapper: React.FC<{ boardDetails: BoardDetails }> = ({ boardDetails })
 
 const ListLayoutClient: React.FC<PropsWithChildren<ListLayoutClientProps>> = ({ boardDetails, children }) => {
   return (
-    <Layout className={styles.listLayout}>
-      <Content className={styles.mainContent}>{children}</Content>
-      <Sider width={400} className={styles.sider} theme="light" style={{ padding: '20px'}}>
-        <UISearchParamsProvider>
+    <UISearchParamsProvider>
+      <Layout className={styles.listLayout}>
+        <Content className={styles.mainContent}>{children}</Content>
+        <Sider width={400} className={styles.sider} theme="light" style={{ padding: '20px'}}>
           <TabsWrapper boardDetails={boardDetails} />
-        </UISearchParamsProvider>
-      </Sider>
-    </Layout>
+        </Sider>
+      </Layout>
+    </UISearchParamsProvider>
   );
 };
 

app/api/internal/[board]/circuits/[uuid]/climbs/route.ts

@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { BoardName } from '@/app/lib/types';
+import { getClimbsByCircuit } from '@/app/lib/db/queries/circuits/get-circuits';
+
+type Params = Promise<{
+  board: BoardName;
+  uuid: string;
+}>;
+
+export async function GET(
+  request: NextRequest,
+  segmentData: { params: Params }
+): Promise<NextResponse> {
+  const params = await segmentData.params;
+  const { board, uuid } = params;
+
+  try {
+    const climbUuids = await getClimbsByCircuit(board, uuid);
+
+    return NextResponse.json({ climbUuids });
+  } catch (error) {
+    console.error('Error fetching circuit climbs:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch circuit climbs' },
+      { status: 500 }
+    );
+  }
+}

app/api/internal/[board]/circuits/route.ts

@@ -0,0 +1,45 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { BoardName } from '@/app/lib/types';
+import { getUserAndPublicCircuits, getCircuitsByUser } from '@/app/lib/db/queries/circuits/get-circuits';
+import { getSession } from '@/app/lib/session';
+import { cookies } from 'next/headers';
+
+type Params = Promise<{
+  board: BoardName;
+}>;
+
+export async function GET(
+  request: NextRequest,
+  segmentData: { params: Params }
+): Promise<NextResponse> {
+  const params = await segmentData.params;
+  const { board } = params;
+
+  try {
+    const cookieStore = await cookies();
+    const session = await getSession(cookieStore, board);
+
+    let userId: number | undefined;
+    if (session) {
+      userId = session.userId;
+    }
+
+    const searchParams = request.nextUrl.searchParams;
+    const userOnly = searchParams.get('userOnly') === 'true';
+
+    let circuits;
+    if (userOnly && userId) {
+      circuits = await getCircuitsByUser(board, userId);
+    } else {
+      circuits = await getUserAndPublicCircuits(board, userId);
+    }
+
+    return NextResponse.json({ circuits });
+  } catch (error) {
+    console.error('Error fetching circuits:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch circuits' },
+      { status: 500 }
+    );
+  }
+}

app/api/internal/[board]/climbs/[uuid]/circuits/route.ts

@@ -0,0 +1,28 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { BoardName } from '@/app/lib/types';
+import { getCircuitsForClimb } from '@/app/lib/db/queries/circuits/get-circuits';
+
+type Params = Promise<{
+  board: BoardName;
+  uuid: string;
+}>;
+
+export async function GET(
+  request: NextRequest,
+  segmentData: { params: Params }
+): Promise<NextResponse> {
+  const params = await segmentData.params;
+  const { board, uuid } = params;
+
+  try {
+    const circuits = await getCircuitsForClimb(board, uuid);
+
+    return NextResponse.json({ circuits });
+  } catch (error) {
+    console.error('Error fetching climb circuits:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch climb circuits' },
+      { status: 500 }
+    );
+  }
+}

app/components/board-page/climbs-list.tsx

@@ -6,6 +6,7 @@ import InfiniteScroll from 'react-infinite-scroll-component';
 import { track } from '@vercel/analytics';
 import { Climb, ParsedBoardRouteParameters, BoardDetails } from '@/app/lib/types';
 import { useQueueContext } from '../queue-control/queue-context';
+import { useUISearchParams } from '../queue-control/ui-searchparams-provider';
 import ClimbCard from '../climb-card/climb-card';
 import { useEffect, useRef } from 'react';
 import { PlusCircleOutlined, FireOutlined } from '@ant-design/icons';
@@ -44,6 +45,8 @@ const ClimbsList = ({ boardDetails, initialClimbs }: ClimbsListProps) => {
     hasDoneFirstFetch,
     isFetchingClimbs,
   } = useQueueContext();
+
+  const { updateFilters } = useUISearchParams();
 
   const searchParams = useSearchParams();
   const page = searchParams.get('page');
@@ -161,6 +164,13 @@ const ClimbsList = ({ boardDetails, initialClimbs }: ClimbsListProps) => {
                     climbUuid: climb.uuid,
                   });
                 }}
+                onCircuitClick={(circuitUuid) => {
+                  updateFilters({ circuitUuids: [circuitUuid] });
+                  track('Circuit Tag Clicked', {
+                    circuitUuid,
+                    climbUuid: climb.uuid,
+                  });
+                }}
               />
             </div>
           </Col>

app/components/climb-card/climb-card.tsx

@@ -2,11 +2,14 @@
 
 import React from 'react';
 import Card from 'antd/es/card';
+import { Tag } from 'antd';
 import { CopyrightOutlined } from '@ant-design/icons';
 
 import ClimbCardCover from './climb-card-cover';
 import { Climb, BoardDetails } from '@/app/lib/types';
 import ClimbCardActions from './climb-card-actions';
+import { useClimbCircuits } from '@/app/hooks/use-climb-circuits';
+import { useBoardProvider } from '@/app/components/board-provider/board-provider-context';
 
 type ClimbCardProps = {
   climb?: Climb;
@@ -15,9 +18,13 @@ type ClimbCardProps = {
   onCoverClick?: () => void;
   selected?: boolean;
   actions?: React.JSX.Element[];
+  onCircuitClick?: (circuitUuid: string) => void;
 };
 
-const ClimbCard = ({ climb, boardDetails, onCoverClick, selected, actions }: ClimbCardProps) => {
+const ClimbCard = ({ climb, boardDetails, onCoverClick, selected, actions, onCircuitClick }: ClimbCardProps) => {
+  const { boardName, isAuthenticated } = useBoardProvider();
+  const { circuits } = useClimbCircuits(boardName, climb?.uuid || null, Boolean(isAuthenticated && climb?.uuid));
+
   const cover = <ClimbCardCover climb={climb} boardDetails={boardDetails} onClick={onCoverClick} />;
 
   const cardTitle = climb ? (
@@ -49,7 +56,37 @@ const ClimbCard = ({ climb, boardDetails, onCoverClick, selected, actions }: Cli
       actions={actions || ClimbCardActions({ climb, boardDetails })}
     >
       {/* TODO: Make a link to the list with the setter_name filter  */}
-      {climb ? `By ${climb.setter_username} - ${climb.ascensionist_count} ascents` : null}
+      {climb && (
+        <div>
+          <div style={{ marginBottom: circuits.length > 0 ? '8px' : '0' }}>
+            By {climb.setter_username} - {climb.ascensionist_count} ascents
+          </div>
+          {circuits.length > 0 && (
+            <div style={{ display: 'flex', gap: '4px', flexWrap: 'wrap' }}>
+              {circuits.map((circuit) => (
+                <Tag
+                  key={circuit.uuid}
+                  color={circuit.color || undefined}
+                  style={{ 
+                    cursor: onCircuitClick ? 'pointer' : 'default',
+                    fontSize: '11px',
+                    padding: '2px 6px',
+                    margin: '0',
+                    borderRadius: '4px'
+                  }}
+                  onClick={onCircuitClick ? (e) => {
+                    e.stopPropagation();
+                    onCircuitClick(circuit.uuid);
+                  } : undefined}
+                  title={onCircuitClick ? `Filter by circuit: ${circuit.name}` : circuit.name || 'Unnamed Circuit'}
+                >
+                  {circuit.name || 'Unnamed Circuit'}
+                </Tag>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
       {cover}
     </Card>
   );

app/components/queue-control/__tests__/hooks/use-queue-data-fetching.test.tsx

@@ -81,7 +81,8 @@ const mockSearchParams: SearchRequestPagination = {
   hideAttempted: false,
   hideCompleted: false,
   showOnlyAttempted: false,
-  showOnlyCompleted: false
+  showOnlyCompleted: false,
+  circuitUuids: []
 };
 
 const mockParsedParams: ParsedBoardRouteParameters = {

app/components/queue-control/__tests__/reducer.test.ts

@@ -47,7 +47,8 @@ const mockSearchParams: SearchRequestPagination = {
   hideAttempted: false,
   hideCompleted: false,
   showOnlyAttempted: false,
-  showOnlyCompleted: false
+  showOnlyCompleted: false,
+  circuitUuids: []
 };
 
 const initialState: QueueState = {
@@ -292,7 +293,8 @@ describe('queueReducer', () => {
         hideAttempted: false,
         hideCompleted: false,
         showOnlyAttempted: false,
-        showOnlyCompleted: false
+        showOnlyCompleted: false,
+        circuitUuids: []
       };
 
       const action: QueueAction = {

app/components/queue-control/ui-searchparams-provider.tsx

@@ -41,6 +41,7 @@ export const UISearchParamsProvider: React.FC<{ children: React.ReactNode }> = (
     if (uiSearchParams.hideCompleted) activeFilters.push('hideCompleted');
     if (uiSearchParams.showOnlyAttempted) activeFilters.push('showOnlyAttempted');
     if (uiSearchParams.showOnlyCompleted) activeFilters.push('showOnlyCompleted');
+    if (uiSearchParams.circuitUuids && uiSearchParams.circuitUuids.length > 0) activeFilters.push('circuits');
 
     if (activeFilters.length > 0) {
       track('Climb Search Performed', {

app/components/search-drawer/basic-search-form.tsx

@@ -5,13 +5,15 @@ import { Form, InputNumber, Row, Col, Select, Input, Switch, Alert, Typography }
 import { TENSION_KILTER_GRADES } from '@/app/lib/board-data';
 import { useUISearchParams } from '@/app/components/queue-control/ui-searchparams-provider';
 import { useBoardProvider } from '@/app/components/board-provider/board-provider-context';
+import { useCircuits } from '@/app/hooks/use-circuits';
 import SearchClimbNameInput from './search-climb-name-input';
 
 const { Title } = Typography;
 
 const BasicSearchForm: React.FC = () => {
   const { uiSearchParams, updateFilters } = useUISearchParams();
-  const { token, user_id } = useBoardProvider();
+  const { token, user_id, boardName } = useBoardProvider();
+  const { circuits, isLoading: circuitsLoading } = useCircuits(boardName, Boolean(token && user_id));
   const grades = TENSION_KILTER_GRADES;
 
   const isLoggedIn = token && user_id;
@@ -194,6 +196,40 @@ const BasicSearchForm: React.FC = () => {
         <Input value={uiSearchParams.settername} onChange={(e) => updateFilters({ settername: e.target.value })} />
       </Form.Item>
 
+      {isLoggedIn && (
+        <Form.Item label="Circuits">
+          <Select
+            mode="multiple"
+            placeholder={circuitsLoading ? "Loading circuits..." : "Filter by circuits"}
+            value={uiSearchParams.circuitUuids}
+            onChange={(value) => updateFilters({ circuitUuids: value })}
+            style={{ width: '100%' }}
+            loading={circuitsLoading}
+            disabled={circuitsLoading}
+            allowClear
+          >
+            {circuits.map((circuit) => (
+              <Select.Option key={circuit.uuid} value={circuit.uuid}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                  {circuit.color && (
+                    <div
+                      style={{
+                        width: '12px',
+                        height: '12px',
+                        backgroundColor: circuit.color,
+                        borderRadius: '50%',
+                        flexShrink: 0,
+                      }}
+                    />
+                  )}
+                  {circuit.name || 'Unnamed Circuit'}
+                </div>
+              </Select.Option>
+            ))}
+          </Select>
+        </Form.Item>
+      )}
+
       <Form.Item>
         <Title level={5}>Personal Progress</Title>
       </Form.Item>

app/hooks/use-circuits.ts

@@ -0,0 +1,18 @@
+import useSWR from 'swr';
+import { BoardName } from '@/app/lib/types';
+import { Circuit } from '@/app/lib/db/queries/circuits/get-circuits';
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+export function useCircuits(boardName: BoardName | null, enabled: boolean = true) {
+  const { data, error, isLoading } = useSWR(
+    enabled && boardName ? `/api/internal/${boardName}/circuits` : null,
+    fetcher
+  );
+
+  return {
+    circuits: (data?.circuits || []) as Circuit[],
+    isLoading,
+    error,
+  };
+}

app/hooks/use-climb-circuits.ts

@@ -0,0 +1,18 @@
+import useSWR from 'swr';
+import { BoardName, ClimbUuid } from '@/app/lib/types';
+import { Circuit } from '@/app/lib/db/queries/circuits/get-circuits';
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+export function useClimbCircuits(boardName: BoardName | null, climbUuid: ClimbUuid | null, enabled: boolean = true) {
+  const { data, error, isLoading } = useSWR(
+    enabled && boardName && climbUuid ? `/api/internal/${boardName}/climbs/${climbUuid}/circuits` : null,
+    fetcher
+  );
+
+  return {
+    circuits: (data?.circuits || []) as Circuit[],
+    isLoading,
+    error,
+  };
+}

app/lib/api-wrappers/aurora/types.ts

@@ -201,6 +201,7 @@ export const USER_TABLES = [
   'bids',
   'tags',
   'circuits',
+  'circuits_climbs',
 ];
 export const SHARED_SYNC_TABLES = [
   'products',

app/lib/data-sync/aurora/user-sync.ts

@@ -252,6 +252,26 @@ async function upsertTableData(
       break;
     }
 
+    case 'circuits_climbs': {
+      const circuitsClimbsSchema = getTable('circuitsClimbs', boardName);
+      for (const item of data) {
+        await db
+          .insert(circuitsClimbsSchema)
+          .values({
+            circuitUuid: item.circuit_uuid,
+            climbUuid: item.climb_uuid,
+            position: Number(item.position || 0),
+          })
+          .onConflictDoUpdate({
+            target: [circuitsClimbsSchema.circuitUuid, circuitsClimbsSchema.climbUuid],
+            set: {
+              position: Number(item.position || 0),
+            },
+          });
+      }
+      break;
+    }
+
     default:
       console.warn(`No specific upsert logic for table: ${tableName}`);
       break;