Add personal progress filters to climb search

Implements filtering by climbs already attempted or completed by the logged-in user.

## New Features
- Hide Attempted: Filter out climbs the user has attempted
- Hide Completed: Filter out climbs the user has completed
- Only Attempted: Show only climbs the user has attempted
- Only Completed: Show only climbs the user has completed

## Implementation Details
- Added new boolean properties to SearchRequest type
- Enhanced search form UI with toggle switches (only visible when logged in)
- Updated backend queries to join ascents/bids tables when filters are active
- Modified API route to handle user authentication headers
- Updated data fetching to include auth headers when available
- Added URL parameter persistence and analytics tracking
- Fixed test files to include new required properties

## Database Integration
- Uses EXISTS subqueries for optimal performance
- Supports both Kilter and Tension board types
- Only applies filters when user is authenticated

Addresses issue #110 - good first issue for filtering climbs by user progress.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: marcodejongh

app/api/v1/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/search/route.ts

@@ -17,8 +17,26 @@ export async function GET(
     const parsedParams = await parseBoardRouteParamsWithSlugs(params);
     const searchParams: SearchRequestPagination = urlParamsToSearchParams(query);
 
+    // Extract user authentication from headers for personal progress filters
+    let userId: number | undefined;
+    const personalProgressFiltersEnabled = 
+      searchParams.hideAttempted || 
+      searchParams.hideCompleted || 
+      searchParams.showOnlyAttempted || 
+      searchParams.showOnlyCompleted;
+    
+    if (personalProgressFiltersEnabled) {
+      const userIdHeader = req.headers.get('x-user-id');
+      const tokenHeader = req.headers.get('x-auth-token');
+      
+      // Only use userId if both user ID and token are provided (basic auth check)
+      if (userIdHeader && tokenHeader && userIdHeader !== 'null') {
+        userId = parseInt(userIdHeader, 10);
+      }
+    }
+
     // Call the separate function to perform the search
-    const result = await searchClimbs(parsedParams, searchParams);
+    const result = await searchClimbs(parsedParams, searchParams, userId);
 
     // Return response
     return NextResponse.json({

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

@@ -77,7 +77,11 @@ const mockSearchParams: SearchRequestPagination = {
   onlyClassics: false,
   settername: '',
   setternameSuggestion: '',
-  holdsFilter: {}
+  holdsFilter: {},
+  hideAttempted: false,
+  hideCompleted: false,
+  showOnlyAttempted: false,
+  showOnlyCompleted: false
 };
 
 const mockParsedParams: ParsedBoardRouteParameters = {

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

@@ -43,7 +43,11 @@ const mockSearchParams: SearchRequestPagination = {
   onlyClassics: false,
   settername: '',
   setternameSuggestion: '',
-  holdsFilter: {}
+  holdsFilter: {},
+  hideAttempted: false,
+  hideCompleted: false,
+  showOnlyAttempted: false,
+  showOnlyCompleted: false
 };
 
 const initialState: QueueState = {
@@ -284,7 +288,11 @@ describe('queueReducer', () => {
         onlyClassics: false,
         settername: '',
         setternameSuggestion: '',
-        holdsFilter: {}
+        holdsFilter: {},
+        hideAttempted: false,
+        hideCompleted: false,
+        showOnlyAttempted: false,
+        showOnlyCompleted: false
       };
 
       const action: QueueAction = {

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

@@ -7,7 +7,18 @@ import { Climb, ParsedBoardRouteParameters, SearchRequestPagination } from '@/ap
 import { useEffect, useMemo } from 'react';
 import { useBoardProvider } from '../../board-provider/board-provider-context';
 
-const fetcher = (url: string) => fetch(url).then((res) => res.json());
+const createFetcher = (authState: { token: string | null; user_id: number | null }) => 
+  (url: string) => {
+    const headers: Record<string, string> = {};
+    
+    // Add authentication headers if available
+    if (authState.token && authState.user_id) {
+      headers['x-auth-token'] = authState.token;
+      headers['x-user-id'] = authState.user_id.toString();
+    }
+    
+    return fetch(url, { headers }).then((res) => res.json());
+  };
 
 interface UseQueueDataFetchingProps {
   searchParams: SearchRequestPagination;
@@ -24,8 +35,9 @@ export const useQueueDataFetching = ({
   hasDoneFirstFetch,
   setHasDoneFirstFetch,
 }: UseQueueDataFetchingProps) => {
-  const { getLogbook } = useBoardProvider();
+  const { getLogbook, token, user_id } = useBoardProvider();
   const fetchedUuidsRef = useRef<string>('');
+  const fetcher = useMemo(() => createFetcher({ token, user_id }), [token, user_id]);
 
   const getKey = (pageIndex: number, previousPageData: { climbs: Climb[] }) => {
     if (previousPageData && previousPageData.climbs.length === 0) return null;

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

@@ -37,6 +37,10 @@ export const UISearchParamsProvider: React.FC<{ children: React.ReactNode }> = (
     if (uiSearchParams.settername) activeFilters.push('setter');
     if (uiSearchParams.holdsFilter && Object.entries(uiSearchParams.holdsFilter).length > 0)
       activeFilters.push('holds');
+    if (uiSearchParams.hideAttempted) activeFilters.push('hideAttempted');
+    if (uiSearchParams.hideCompleted) activeFilters.push('hideCompleted');
+    if (uiSearchParams.showOnlyAttempted) activeFilters.push('showOnlyAttempted');
+    if (uiSearchParams.showOnlyCompleted) activeFilters.push('showOnlyCompleted');
 
     if (activeFilters.length > 0) {
       track('Climb Search Performed', {

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

@@ -1,14 +1,18 @@
 'use client';
 
 import React from 'react';
-import { Form, InputNumber, Row, Col, Select, Input } from 'antd';
+import { Form, InputNumber, Row, Col, Select, Input, Switch, Divider } from 'antd';
 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 SearchClimbNameInput from './search-climb-name-input';
 
 const BasicSearchForm: React.FC = () => {
   const { uiSearchParams, updateFilters } = useUISearchParams();
+  const { token, user_id } = useBoardProvider();
   const grades = TENSION_KILTER_GRADES;
+  
+  const isLoggedIn = token && user_id;
 
   const handleGradeChange = (type: 'min' | 'max', value: number | undefined) => {
     if (type === 'min') {
@@ -139,6 +143,40 @@ const BasicSearchForm: React.FC = () => {
       <Form.Item label="Setter Name">
         <Input value={uiSearchParams.settername} onChange={(e) => updateFilters({ settername: e.target.value })} />
       </Form.Item>
+
+      {isLoggedIn && (
+        <>
+          <Divider>Personal Progress</Divider>
+          
+          <Form.Item label="Hide Attempted" tooltip="Hide climbs you have attempted">
+            <Switch
+              checked={uiSearchParams.hideAttempted}
+              onChange={(checked) => updateFilters({ hideAttempted: checked })}
+            />
+          </Form.Item>
+
+          <Form.Item label="Hide Completed" tooltip="Hide climbs you have completed">
+            <Switch
+              checked={uiSearchParams.hideCompleted}
+              onChange={(checked) => updateFilters({ hideCompleted: checked })}
+            />
+          </Form.Item>
+
+          <Form.Item label="Only Attempted" tooltip="Show only climbs you have attempted">
+            <Switch
+              checked={uiSearchParams.showOnlyAttempted}
+              onChange={(checked) => updateFilters({ showOnlyAttempted: checked })}
+            />
+          </Form.Item>
+
+          <Form.Item label="Only Completed" tooltip="Show only climbs you have completed">
+            <Switch
+              checked={uiSearchParams.showOnlyCompleted}
+              onChange={(checked) => updateFilters({ showOnlyCompleted: checked })}
+            />
+          </Form.Item>
+        </>
+      )}
     </Form>
   );
 };

app/lib/db/queries/climbs/create-climb-filters.ts

@@ -89,6 +89,57 @@ export const createClimbFilters = (
     ...notHolds.map((holdId) => notLike(tables.climbs.frames, `%${holdId}r%`)),
   ];
 
+  // Personal progress filter conditions (only apply if userId is provided)
+  const personalProgressConditions: SQL[] = [];
+  if (userId) {
+    const ascentsTable = getTableName(params.board_name, 'ascents');
+    const bidsTable = getTableName(params.board_name, 'bids');
+
+    if (searchParams.hideAttempted) {
+      personalProgressConditions.push(
+        sql`NOT EXISTS (
+          SELECT 1 FROM ${sql.identifier(bidsTable)}
+          WHERE climb_uuid = ${tables.climbs.uuid}
+          AND user_id = ${userId}
+          AND angle = ${params.angle}
+        )`
+      );
+    }
+
+    if (searchParams.hideCompleted) {
+      personalProgressConditions.push(
+        sql`NOT EXISTS (
+          SELECT 1 FROM ${sql.identifier(ascentsTable)}
+          WHERE climb_uuid = ${tables.climbs.uuid}
+          AND user_id = ${userId}
+          AND angle = ${params.angle}
+        )`
+      );
+    }
+
+    if (searchParams.showOnlyAttempted) {
+      personalProgressConditions.push(
+        sql`EXISTS (
+          SELECT 1 FROM ${sql.identifier(bidsTable)}
+          WHERE climb_uuid = ${tables.climbs.uuid}
+          AND user_id = ${userId}
+          AND angle = ${params.angle}
+        )`
+      );
+    }
+
+    if (searchParams.showOnlyCompleted) {
+      personalProgressConditions.push(
+        sql`EXISTS (
+          SELECT 1 FROM ${sql.identifier(ascentsTable)}
+          WHERE climb_uuid = ${tables.climbs.uuid}
+          AND user_id = ${userId}
+          AND angle = ${params.angle}
+        )`
+      );
+    }
+  }
+
   // User-specific logbook data selectors
   const getUserLogbookSelects = () => {
     const ascentsTable = getTableName(params.board_name, 'ascents');
@@ -137,7 +188,7 @@ export const createClimbFilters = (
 
   return {
     // Helper function to get all climb filtering conditions
-    getClimbWhereConditions: () => [...baseConditions, ...nameCondition, ...holdConditions],
+    getClimbWhereConditions: () => [...baseConditions, ...nameCondition, ...holdConditions, ...personalProgressConditions],
 
     // Size-specific conditions
     getSizeConditions: () => sizeConditions,
@@ -169,6 +220,7 @@ export const createClimbFilters = (
     nameCondition,
     holdConditions,
     sizeConditions,
+    personalProgressConditions,
     anyHolds,
     notHolds,
   };

app/lib/types.ts

@@ -89,6 +89,10 @@ export type SearchRequest = {
   settername: string;
   setternameSuggestion: string;
   holdsFilter: LitUpHoldsMap;
+  hideAttempted: boolean;
+  hideCompleted: boolean;
+  showOnlyAttempted: boolean;
+  showOnlyCompleted: boolean;
   [key: `hold_${number}`]: HoldFilterValue; // Allow dynamic hold keys directly in the search params
 };
 

app/lib/url-utils.ts

@@ -50,6 +50,10 @@ export const searchParamsToUrlParams = ({
   settername,
   setternameSuggestion,
   holdsFilter,
+  hideAttempted,
+  hideCompleted,
+  showOnlyAttempted,
+  showOnlyCompleted,
   page,
   pageSize,
 }: SearchRequestPagination): URLSearchParams => {
@@ -95,6 +99,18 @@ export const searchParamsToUrlParams = ({
   if (pageSize !== DEFAULT_SEARCH_PARAMS.pageSize) {
     params.pageSize = pageSize.toString();
   }
+  if (hideAttempted !== DEFAULT_SEARCH_PARAMS.hideAttempted) {
+    params.hideAttempted = hideAttempted.toString();
+  }
+  if (hideCompleted !== DEFAULT_SEARCH_PARAMS.hideCompleted) {
+    params.hideCompleted = hideCompleted.toString();
+  }
+  if (showOnlyAttempted !== DEFAULT_SEARCH_PARAMS.showOnlyAttempted) {
+    params.showOnlyAttempted = showOnlyAttempted.toString();
+  }
+  if (showOnlyCompleted !== DEFAULT_SEARCH_PARAMS.showOnlyCompleted) {
+    params.showOnlyCompleted = showOnlyCompleted.toString();
+  }
 
   // Add holds filter entries only if they exist
   if (holdsFilter && Object.keys(holdsFilter).length > 0) {
@@ -118,6 +134,10 @@ export const DEFAULT_SEARCH_PARAMS: SearchRequestPagination = {
   settername: '',
   setternameSuggestion: '',
   holdsFilter: {},
+  hideAttempted: false,
+  hideCompleted: false,
+  showOnlyAttempted: false,
+  showOnlyCompleted: false,
   page: 0,
   pageSize: PAGE_LIMIT,
 };
@@ -144,6 +164,10 @@ export const urlParamsToSearchParams = (urlParams: URLSearchParams): SearchReque
     setternameSuggestion: urlParams.get('setternameSuggestion') ?? DEFAULT_SEARCH_PARAMS.setternameSuggestion,
     //@ts-expect-error fix later
     holdsFilter: holdsFilter ?? DEFAULT_SEARCH_PARAMS.holdsFilter,
+    hideAttempted: urlParams.get('hideAttempted') === 'true',
+    hideCompleted: urlParams.get('hideCompleted') === 'true',
+    showOnlyAttempted: urlParams.get('showOnlyAttempted') === 'true',
+    showOnlyCompleted: urlParams.get('showOnlyCompleted') === 'true',
     page: Number(urlParams.get('page') ?? DEFAULT_SEARCH_PARAMS.page),
     pageSize: Number(urlParams.get('pageSize') ?? DEFAULT_SEARCH_PARAMS.pageSize),
   };