Fix heatmap personal progress filtering (#266)

* 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]>

* Improve personal progress filters UI layout

Updates the search form to use the improved UI pattern from PR #137:

- Changed form layout to horizontal with left-aligned labels (14/10 span)
- Replaced "Classics Only" dropdown with Switch component
- Added Typography.Title for "Personal Progress" section heading
- Updated Alert message for better clarity when not logged in
- Aligned all switches to the right with consistent styling
- Used valuePropName="checked" for proper Switch integration

The UI now matches the cleaner, more organized design pattern
established in the search toggles PR.

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

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

* Fix heatmap personal progress filtering

Updates heatmap to properly respect personal progress filters by
adding header-based authentication support.

## Changes
- Updated heatmap API route to check for x-auth-token and x-user-id headers
- Added fallback to session-based auth for backward compatibility
- Modified use-heatmap.tsx hook to include auth headers when user is logged in
- Added token and user_id to useEffect dependencies for proper re-fetching

## Behavior
- When personal progress filters are active, heatmap API checks headers first
- Falls back to session auth if no headers provided
- Heatmap now properly filters holds based on user's climb history
- Maintains existing functionality for non-authenticated users

The heatmap will now correctly hide/show holds from climbs the user has
attempted or completed when using the personal progress filters.

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

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

---------

Co-authored-by: Claude <[email protected]>

Author: marcodejongh

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

@@ -33,10 +33,35 @@ export async function GET(
     const parsedParams = await parseBoardRouteParamsWithSlugs(params);
     const searchParams: SearchRequestPagination = urlParamsToSearchParams(query);
 
-    const cookieStore = await cookies();
-    const session = await getSession(cookieStore, parsedParams.board_name);
+    // Extract user authentication - try headers first, then fall back to session
+    let userId: number | undefined;
+    
+    // Check for header-based authentication first (for consistency with search API)
+    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);
+      }
+    }
+    
+    // Fall back to session-based authentication if no header auth
+    if (!userId) {
+      const cookieStore = await cookies();
+      const session = await getSession(cookieStore, parsedParams.board_name);
+      userId = session.userId;
+    }
+
     // Get the heatmap data using the query function
-    const holdStats = await getHoldHeatmapData(parsedParams, searchParams, session.userId);
+    const holdStats = await getHoldHeatmapData(parsedParams, searchParams, userId);
 
     // Return response
     return NextResponse.json({

app/components/search-drawer/use-heatmap.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { BoardName, SearchRequestPagination } from '@/app/lib/types';
 import { HeatmapData } from '../board-renderer/types';
 import { searchParamsToUrlParams } from '@/app/lib/url-utils';
+import { useBoardProvider } from '../board-provider/board-provider-context';
 
 interface UseHeatmapDataProps {
   boardName: BoardName;
@@ -16,13 +17,25 @@ export default function useHeatmapData({ boardName, layoutId, sizeId, setIds, an
   const [heatmapData, setHeatmapData] = useState<HeatmapData[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
+  const { token, user_id } = useBoardProvider();
 
   useEffect(() => {
     const fetchHeatmapData = async () => {
       try {
         setLoading(true);
+        
+        // Prepare headers
+        const headers: Record<string, string> = {};
+        
+        // Add authentication headers if available
+        if (token && user_id) {
+          headers['x-auth-token'] = token;
+          headers['x-user-id'] = user_id.toString();
+        }
+        
         const response = await fetch(
           `/api/v1/${boardName}/${layoutId}/${sizeId}/${setIds}/${angle}/heatmap?${searchParamsToUrlParams(filters).toString()}`,
+          { headers }
         );
 
         if (!response.ok) {
@@ -41,7 +54,7 @@ export default function useHeatmapData({ boardName, layoutId, sizeId, setIds, an
     };
 
     fetchHeatmapData();
-  }, [boardName, layoutId, sizeId, setIds, angle, filters]);
+  }, [boardName, layoutId, sizeId, setIds, angle, filters, token, user_id]);
 
   return { data: heatmapData, loading, error };
 }