Fix setter name filter bug and add multiselect autocomplete with route counts

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

@@ -0,0 +1,26 @@
+import { getSetterStats, SetterStat } from '@/app/lib/db/queries/climbs/setter-stats';
+import { BoardRouteParameters, ErrorResponse } from '@/app/lib/types';
+import { parseBoardRouteParamsWithSlugs } from '@/app/lib/url-utils.server';
+import { NextResponse } from 'next/server';
+
+export async function GET(
+  req: Request,
+  props: { params: Promise<BoardRouteParameters> },
+): Promise<NextResponse<SetterStat[] | ErrorResponse>> {
+  const params = await props.params;
+
+  try {
+    const parsedParams = await parseBoardRouteParamsWithSlugs(params);
+
+    // Extract search query parameter
+    const url = new URL(req.url);
+    const searchQuery = url.searchParams.get('search') || undefined;
+
+    const setterStats = await getSetterStats(parsedParams, searchQuery);
+
+    return NextResponse.json(setterStats);
+  } catch (error) {
+    console.error('Error fetching setter stats:', error);
+    return NextResponse.json({ error: 'Failed to fetch setter stats' }, { status: 500 });
+  }
+}

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

@@ -75,7 +75,7 @@ const mockSearchParams: SearchRequestPagination = {
   sortOrder: 'desc',
   name: '',
   onlyClassics: false,
-  settername: '',
+  settername: [],
   setternameSuggestion: '',
   holdsFilter: {},
   hideAttempted: false,

app/components/queue-control/__tests__/queue-context.test.tsx

@@ -2,7 +2,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import React from 'react';
 import { render, screen, act, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { useSearchParams, useRouter } from 'next/navigation';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 import { QueueProvider, useQueueContext } from '../queue-context';
 import { ParsedBoardRouteParameters, Climb } from '@/app/lib/types';
 import { ClimbQueueItem } from '../types';
@@ -11,7 +11,8 @@ import { useConnection } from '../../connection-manager/use-connection';
 // Mock dependencies
 vi.mock('next/navigation', () => ({
   useSearchParams: vi.fn(),
-  useRouter: vi.fn()
+  useRouter: vi.fn(),
+  usePathname: vi.fn()
 }));
 
 vi.mock('@/app/lib/url-utils', () => ({
@@ -76,6 +77,7 @@ const mockSearchParams = new URLSearchParams();
 const mockRouter = {
   replace: vi.fn()
 };
+const mockPathname = '/test/path';
 
 const mockUseConnection = vi.mocked(useConnection);
 
@@ -144,6 +146,7 @@ describe('QueueProvider', () => {
     vi.clearAllMocks();
     (useSearchParams as ReturnType<typeof vi.fn>).mockReturnValue(mockSearchParams);
     (useRouter as ReturnType<typeof vi.fn>).mockReturnValue(mockRouter);
+    (usePathname as ReturnType<typeof vi.fn>).mockReturnValue(mockPathname);
     mockUseConnection.mockReturnValue({
       sendData: vi.fn(),
       peerId: 'test-peer-id',
@@ -249,7 +252,8 @@ describe('QueueProvider with peer functionality', () => {
     vi.clearAllMocks();
     (useSearchParams as ReturnType<typeof vi.fn>).mockReturnValue(mockSearchParams);
     (useRouter as ReturnType<typeof vi.fn>).mockReturnValue(mockRouter);
-
+    (usePathname as ReturnType<typeof vi.fn>).mockReturnValue(mockPathname);
+
     // Mock peer context with host
     mockSubscribeToData.mockReturnValue(vi.fn()); // Return unsubscribe function
     mockUseConnection.mockReturnValue({
@@ -364,6 +368,7 @@ describe('QueueProvider utility functions', () => {
     vi.clearAllMocks();
     (useSearchParams as ReturnType<typeof vi.fn>).mockReturnValue(mockSearchParams);
     (useRouter as ReturnType<typeof vi.fn>).mockReturnValue(mockRouter);
+    (usePathname as ReturnType<typeof vi.fn>).mockReturnValue(mockPathname);
     mockUseConnection.mockReturnValue({
       sendData: vi.fn(),
       peerId: 'test-peer-id',

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

@@ -41,7 +41,7 @@ const mockSearchParams: SearchRequestPagination = {
   sortOrder: 'desc',
   name: '',
   onlyClassics: false,
-  settername: '',
+  settername: [],
   setternameSuggestion: '',
   holdsFilter: {},
   hideAttempted: false,
@@ -286,7 +286,7 @@ describe('queueReducer', () => {
         sortOrder: 'asc',
         name: '',
         onlyClassics: false,
-        settername: '',
+        settername: [],
         setternameSuggestion: '',
         holdsFilter: {},
         hideAttempted: false,

app/components/queue-control/queue-context.tsx

@@ -2,7 +2,7 @@
 'use client';
 
 import React, { useContext, createContext, ReactNode, useEffect, useCallback } from 'react';
-import { useSearchParams, useRouter } from 'next/navigation';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
 import { v4 as uuidv4 } from 'uuid';
 import { useConnection } from '../connection-manager/use-connection';
 import { useQueueReducer } from './reducer';
@@ -29,10 +29,11 @@ const QueueContext = createContext<QueueContextType | undefined>(undefined);
 export const QueueProvider = ({ parsedParams, children }: QueueContextProps) => {
   const searchParams = useSearchParams();
   const router = useRouter();
+  const pathname = usePathname();
   const initialSearchParams = urlParamsToSearchParams(searchParams);
   const [state, dispatch] = useQueueReducer(initialSearchParams);
   const connection = useConnection();
-  
+
   // Check if we're in controller mode
   const controllerUrl = searchParams.get('controllerUrl');
   const isControllerMode = !!controllerUrl;
@@ -171,6 +172,7 @@ export const QueueProvider = ({ parsedParams, children }: QueueContextProps) =>
     isFetchingClimbs,
     hasDoneFirstFetch: state.hasDoneFirstFetch,
     viewOnlyMode: isControllerMode ? false : (hostId ? !state.initialQueueDataReceivedFromPeers : false),
+    parsedParams,
     // Actions
     addToQueue: (climb: Climb) => {
       const newItem = createClimbQueueItem(climb, peerId);
@@ -246,8 +248,9 @@ export const QueueProvider = ({ parsedParams, children }: QueueContextProps) =>
 
       // Update URL with new search parameters
       const urlParams = searchParamsToUrlParams(params);
-      const currentPath = window.location.pathname;
-      router.replace(`${currentPath}?${urlParams.toString()}`);
+      const queryString = urlParams.toString();
+      const newUrl = queryString ? `${pathname}?${queryString}` : pathname;
+      router.replace(newUrl, { scroll: false });
     },
 
     mirrorClimb: () => {

app/components/queue-control/types.ts

@@ -1,4 +1,4 @@
-import { Climb, SearchRequestPagination } from '@/app/lib/types';
+import { Climb, SearchRequestPagination, ParsedBoardRouteParameters } from '@/app/lib/types';
 
 export type PeerId = string | null;
 export type UserName = PeerId;
@@ -51,6 +51,7 @@ export interface QueueContextType {
   isFetchingClimbs: boolean;
   hasDoneFirstFetch: boolean;
   viewOnlyMode: boolean;
+  parsedParams: ParsedBoardRouteParameters;
   addToQueue: (climb: Climb) => void;
   removeFromQueue: (item: ClimbQueueItem) => void;
   setCurrentClimb: (climb: Climb) => void;

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

@@ -34,7 +34,7 @@ export const UISearchParamsProvider: React.FC<{ children: React.ReactNode }> = (
     if (uiSearchParams.minRating) activeFilters.push('minRating');
     if (uiSearchParams.onlyClassics) activeFilters.push('classics');
     if (uiSearchParams.gradeAccuracy) activeFilters.push('gradeAccuracy');
-    if (uiSearchParams.settername) activeFilters.push('setter');
+    if (uiSearchParams.settername.length > 0) activeFilters.push('setter');
     if (uiSearchParams.holdsFilter && Object.entries(uiSearchParams.holdsFilter).length > 0)
       activeFilters.push('holds');
     if (uiSearchParams.hideAttempted) activeFilters.push('hideAttempted');

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

@@ -1,11 +1,12 @@
 'use client';
 
 import React from 'react';
-import { Form, InputNumber, Row, Col, Select, Input, Switch, Alert, Typography } from 'antd';
+import { Form, InputNumber, Row, Col, Select, Switch, Alert, Typography } 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';
+import SetterNameSelect from './setter-name-select';
 
 const { Title } = Typography;
 
@@ -191,7 +192,7 @@ const BasicSearchForm: React.FC = () => {
       </Form.Item>
 
       <Form.Item label="Setter Name">
-        <Input value={uiSearchParams.settername} onChange={(e) => updateFilters({ settername: e.target.value })} />
+        <SetterNameSelect />
       </Form.Item>
 
       <Form.Item>

app/components/search-drawer/constants.ts

@@ -12,7 +12,7 @@ export const defaultClimbSearchParameters: SearchRequestPagination = {
   minRating: 1.0,
   onlyClassics: false,
   gradeAccuracy: 1,
-  settername: '',
+  settername: [],
   setternameSuggestion: '',
   //@ts-expect-error TODO fix later
   holdsFilter: '',

app/components/search-drawer/setter-name-select.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Select } from 'antd';
+import { useUISearchParams } from '../queue-control/ui-searchparams-provider';
+import { useQueueContext } from '../queue-control/queue-context';
+import useSWR from 'swr';
+import { constructSetterStatsUrl } from '@/app/lib/url-utils';
+
+interface SetterStat {
+  setter_username: string;
+  climb_count: number;
+}
+
+const fetcher = (url: string) => fetch(url).then((res) => res.json());
+
+const MIN_SEARCH_LENGTH = 2; // Only search when user has typed at least 2 characters
+
+const SetterNameSelect = () => {
+  const { uiSearchParams, updateFilters } = useUISearchParams();
+  const { parsedParams } = useQueueContext();
+  const [searchValue, setSearchValue] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+
+  // Fetch top setters when dropdown is open OR when user is searching
+  const shouldFetch = isOpen || searchValue.length >= MIN_SEARCH_LENGTH;
+  const isSearching = searchValue.length >= MIN_SEARCH_LENGTH;
+
+  // Build API URL - with search query if searching, without if just showing top setters
+  const apiUrl = shouldFetch
+    ? constructSetterStatsUrl(parsedParams, isSearching ? searchValue : undefined)
+    : null;
+
+  // Fetch setter stats from the API
+  const { data: setterStats, isLoading } = useSWR<SetterStat[]>(
+    apiUrl,
+    fetcher,
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+      keepPreviousData: true,
+    }
+  );
+
+  // Map setter stats to Select options
+  const options = React.useMemo(() => {
+    if (!setterStats) return [];
+
+    return setterStats.map(stat => ({
+      value: stat.setter_username,
+      label: `${stat.setter_username} (${stat.climb_count})`,
+      count: stat.climb_count,
+    }));
+  }, [setterStats]);
+
+  return (
+    <Select
+      mode="multiple"
+      placeholder="Select setters..."
+      value={uiSearchParams.settername}
+      onChange={(value) => updateFilters({ settername: value })}
+      onSearch={setSearchValue}
+      onDropdownVisibleChange={setIsOpen}
+      loading={isLoading}
+      showSearch
+      filterOption={false} // Server-side filtering
+      options={options}
+      style={{ width: '100%' }}
+      maxTagCount="responsive"
+      notFoundContent={
+        isLoading
+          ? 'Loading...'
+          : !isOpen && searchValue.length === 0
+          ? 'Open dropdown to see setters'
+          : 'No setters found'
+      }
+    />
+  );
+};
+
+export default SetterNameSelect;

app/lib/__tests__/url-utils.test.ts

@@ -53,10 +53,10 @@ describe('searchParamsToUrlParams', () => {
     const result = searchParamsToUrlParams({
       ...DEFAULT_SEARCH_PARAMS,
       name: '',
-      settername: '',
+      settername: [],
       minGrade: 3,
     });
-    
+
     expect(result.toString()).toBe('minGrade=3');
   });
 
@@ -204,7 +204,7 @@ describe('parsedRouteSearchParamsToSearchParams', () => {
     const input = {
       ...DEFAULT_SEARCH_PARAMS,
       name: 'test climb',
-      settername: 'john doe',
+      settername: ['john doe'],
       sortBy: 'difficulty' as any,
       sortOrder: 'asc' as any,
       onlyClassics: true,
@@ -214,7 +214,7 @@ describe('parsedRouteSearchParamsToSearchParams', () => {
     const result = parsedRouteSearchParamsToSearchParams(input);
 
     expect(result.name).toBe('test climb');
-    expect(result.settername).toBe('john doe');
+    expect(result.settername).toEqual(['john doe']);
     expect(result.sortBy).toBe('difficulty');
     expect(result.sortOrder).toBe('asc');
     expect(result.onlyClassics).toBe(true);

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

@@ -1,4 +1,4 @@
-import { eq, gte, sql, like, notLike, SQL } from 'drizzle-orm';
+import { eq, gte, sql, like, notLike, inArray, SQL } from 'drizzle-orm';
 import { PgTableWithColumns } from 'drizzle-orm/pg-core';
 import { ParsedBoardRouteParameters, SearchRequestPagination } from '@/app/lib/types';
 import { TableSet } from '@/lib/db/queries/util/table-select';
@@ -83,6 +83,11 @@ export const createClimbFilters = (
   // Name search condition (only used in searchClimbs)
   const nameCondition: SQL[] = searchParams.name ? [sql`${tables.climbs.name} ILIKE ${`%${searchParams.name}%`}`] : [];
 
+  // Setter name filter condition
+  const setterNameCondition: SQL[] = searchParams.settername && searchParams.settername.length > 0
+    ? [inArray(tables.climbs.setterUsername, searchParams.settername)]
+    : [];
+
   // Hold filter conditions
   const holdConditions: SQL[] = [
     ...anyHolds.map((holdId) => like(tables.climbs.frames, `%${holdId}r%`)),
@@ -188,7 +193,7 @@ export const createClimbFilters = (
 
   return {
     // Helper function to get all climb filtering conditions
-    getClimbWhereConditions: () => [...baseConditions, ...nameCondition, ...holdConditions, ...personalProgressConditions],
+    getClimbWhereConditions: () => [...baseConditions, ...nameCondition, ...setterNameCondition, ...holdConditions, ...personalProgressConditions],
 
     // Size-specific conditions
     getSizeConditions: () => sizeConditions,
@@ -218,6 +223,7 @@ export const createClimbFilters = (
     baseConditions,
     climbStatsConditions,
     nameCondition,
+    setterNameCondition,
     holdConditions,
     sizeConditions,
     personalProgressConditions,