Add tall climbs only filter for Kilter Homewall 10x12 (#304)

marcodejongh · claude · web-flow · commit 1625fbaf1e70 · 2025-11-25T22:13:39.000+11:00
This filter allows users to show only climbs that use holds in the
bottom 8 rows that are exclusive to the 10x12 board size. The filter:

- Only appears on Kilter Homewall (layout_id=8) when on the largest size
- Uses a SQL subquery to find climbs with edge_bottom below the
  second-largest size's threshold
- Adds tooltip explaining the filter's purpose
- Properly integrates with existing URL params and analytics tracking

Co-authored-by: Claude &lt;noreply@anthropic.com&gt;
diff --git a/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/layout-client.tsx b/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/layout-client.tsx
@@ -44,7 +44,7 @@ const TabsWrapper: React.FC<{ boardDetails: BoardDetails }> = ({ boardDetails })
       children: (
         <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
           <div style={{ flex: 1, overflow: 'auto' }}>
-            <BasicSearchForm />
+            <BasicSearchForm boardDetails={boardDetails} />
           </div>
           <SearchResultsFooter />
         </div>
diff --git a/app/components/queue-control/__tests__/hooks/use-queue-data-fetching.test.tsx b/app/components/queue-control/__tests__/hooks/use-queue-data-fetching.test.tsx
@@ -75,6 +75,7 @@ const mockSearchParams: SearchRequestPagination = {
   sortOrder: 'desc',
   name: '',
   onlyClassics: false,
+  onlyTallClimbs: false,
   settername: [],
   setternameSuggestion: '',
   holdsFilter: {},
diff --git a/app/components/queue-control/__tests__/reducer.test.ts b/app/components/queue-control/__tests__/reducer.test.ts
@@ -41,6 +41,7 @@ const mockSearchParams: SearchRequestPagination = {
   sortOrder: 'desc',
   name: '',
   onlyClassics: false,
+  onlyTallClimbs: false,
   settername: [],
   setternameSuggestion: '',
   holdsFilter: {},
@@ -286,6 +287,7 @@ describe('queueReducer', () => {
         sortOrder: 'asc',
         name: '',
         onlyClassics: false,
+        onlyTallClimbs: false,
         settername: [],
         setternameSuggestion: '',
         holdsFilter: {},
diff --git a/app/components/queue-control/ui-searchparams-provider.tsx b/app/components/queue-control/ui-searchparams-provider.tsx
@@ -37,6 +37,7 @@ export const UISearchParamsProvider: React.FC<{ children: React.ReactNode }> = (
     if (uiSearchParams.settername.length > 0) activeFilters.push('setter');
     if (uiSearchParams.holdsFilter && Object.entries(uiSearchParams.holdsFilter).length > 0)
       activeFilters.push('holds');
+    if (uiSearchParams.onlyTallClimbs) activeFilters.push('onlyTallClimbs');
     if (uiSearchParams.hideAttempted) activeFilters.push('hideAttempted');
     if (uiSearchParams.hideCompleted) activeFilters.push('hideCompleted');
     if (uiSearchParams.showOnlyAttempted) activeFilters.push('showOnlyAttempted');
diff --git a/app/components/search-drawer/basic-search-form.tsx b/app/components/search-drawer/basic-search-form.tsx
@@ -1,22 +1,36 @@
 'use client';
 
 import React from 'react';
-import { Form, InputNumber, Row, Col, Select, Switch, Alert, Typography } from 'antd';
+import { Form, InputNumber, Row, Col, Select, Switch, Alert, Typography, Tooltip } 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';
+import { BoardDetails } from '@/app/lib/types';
 
 const { Title } = Typography;
 
-const BasicSearchForm: React.FC = () => {
+// Kilter Homewall layout ID
+const KILTER_HOMEWALL_LAYOUT_ID = 8;
+
+interface BasicSearchFormProps {
+  boardDetails: BoardDetails;
+}
+
+const BasicSearchForm: React.FC<BasicSearchFormProps> = ({ boardDetails }) => {
   const { uiSearchParams, updateFilters } = useUISearchParams();
   const { token, user_id } = useBoardProvider();
   const grades = TENSION_KILTER_GRADES;
-  
+
   const isLoggedIn = token && user_id;
 
+  // Check if we should show the tall climbs filter
+  // Only show for Kilter Homewall on the largest size (10x12)
+  const isKilterHomewall = boardDetails.board_name === 'kilter' && boardDetails.layout_id === KILTER_HOMEWALL_LAYOUT_ID;
+  const isLargestSize = boardDetails.size_name?.toLowerCase().includes('12');
+  const showTallClimbsFilter = isKilterHomewall && isLargestSize;
+
   const handleGradeChange = (type: 'min' | 'max', value: number | undefined) => {
     if (type === 'min') {
       updateFilters({ minGrade: value });
@@ -178,6 +192,23 @@ const BasicSearchForm: React.FC = () => {
         />
       </Form.Item>
 
+      {showTallClimbsFilter && (
+        <Form.Item
+          label={
+            <Tooltip title="Show only climbs that use holds in the bottom 8 rows (only available on 10x12 boards)">
+              Tall Climbs Only
+            </Tooltip>
+          }
+          valuePropName="checked"
+        >
+          <Switch
+            style={{ float: 'right' }}
+            checked={uiSearchParams.onlyTallClimbs}
+            onChange={(checked) => updateFilters({ onlyTallClimbs: checked })}
+          />
+        </Form.Item>
+      )}
+
       <Form.Item label="Grade Accuracy">
         <Select
           value={uiSearchParams.gradeAccuracy}
diff --git a/app/components/search-drawer/search-form.tsx b/app/components/search-drawer/search-form.tsx
@@ -14,7 +14,7 @@ const SearchForm: React.FC<SearchFormProps> = ({ boardDetails }) => {
     {
       key: 'filters',
       label: 'Search',
-      children: <BasicSearchForm />,
+      children: <BasicSearchForm boardDetails={boardDetails} />,
     },
     {
       key: 'holds',
diff --git a/app/lib/db/queries/climbs/create-climb-filters.ts b/app/lib/db/queries/climbs/create-climb-filters.ts
@@ -94,6 +94,30 @@ export const createClimbFilters = (
     ...notHolds.map((holdId) => notLike(tables.climbs.frames, `%${holdId}r%`)),
   ];
 
+  // Tall climbs filter condition
+  // Only applies for Kilter Homewall (layout_id = 8) on the largest size
+  // A "tall climb" is one that uses holds in the bottom rows that are only available on the largest size
+  const tallClimbsConditions: SQL[] = [];
+  const KILTER_HOMEWALL_LAYOUT_ID = 8;
+
+  if (searchParams.onlyTallClimbs && params.board_name === 'kilter' && params.layout_id === KILTER_HOMEWALL_LAYOUT_ID) {
+    // Find the maximum edge_bottom of all sizes smaller than the current size
+    // Climbs with edge_bottom below this threshold use "tall only" holds
+    const productSizesTable = getTableName(params.board_name, 'product_sizes');
+    const layoutsTable = getTableName(params.board_name, 'layouts');
+
+    tallClimbsConditions.push(
+      sql`${tables.climbs.edgeBottom} < (
+        SELECT MAX(other_sizes.edge_bottom)
+        FROM ${sql.identifier(productSizesTable)} other_sizes
+        INNER JOIN ${sql.identifier(layoutsTable)} layouts ON other_sizes.product_id = layouts.product_id
+        WHERE layouts.id = ${params.layout_id}
+        AND other_sizes.id != ${params.size_id}
+        AND other_sizes.edge_bottom < ${sizeTable.edgeTop}
+      )`
+    );
+  }
+
   // Personal progress filter conditions (only apply if userId is provided)
   const personalProgressConditions: SQL[] = [];
   if (userId) {
@@ -193,7 +217,7 @@ export const createClimbFilters = (
 
   return {
     // Helper function to get all climb filtering conditions
-    getClimbWhereConditions: () => [...baseConditions, ...nameCondition, ...setterNameCondition, ...holdConditions, ...personalProgressConditions],
+    getClimbWhereConditions: () => [...baseConditions, ...nameCondition, ...setterNameCondition, ...holdConditions, ...tallClimbsConditions, ...personalProgressConditions],
 
     // Size-specific conditions
     getSizeConditions: () => sizeConditions,
@@ -225,6 +249,7 @@ export const createClimbFilters = (
     nameCondition,
     setterNameCondition,
     holdConditions,
+    tallClimbsConditions,
     sizeConditions,
     personalProgressConditions,
     anyHolds,
diff --git a/app/lib/types.ts b/app/lib/types.ts
@@ -86,6 +86,7 @@ export type SearchRequest = {
   sortOrder: 'asc' | 'desc';
   name: string;
   onlyClassics: boolean;
+  onlyTallClimbs: boolean;
   settername: string[];
   setternameSuggestion: string;
   holdsFilter: LitUpHoldsMap;
diff --git a/app/lib/url-utils.ts b/app/lib/url-utils.ts
@@ -47,6 +47,7 @@ export const searchParamsToUrlParams = ({
   sortOrder,
   name,
   onlyClassics,
+  onlyTallClimbs,
   settername,
   setternameSuggestion,
   holdsFilter,
@@ -87,6 +88,9 @@ export const searchParamsToUrlParams = ({
   if (onlyClassics !== DEFAULT_SEARCH_PARAMS.onlyClassics) {
     params.onlyClassics = onlyClassics.toString();
   }
+  if (onlyTallClimbs !== DEFAULT_SEARCH_PARAMS.onlyTallClimbs) {
+    params.onlyTallClimbs = onlyTallClimbs.toString();
+  }
   if (settername && settername.length > 0) {
     params.settername = settername.join(',');
   }
@@ -131,6 +135,7 @@ export const DEFAULT_SEARCH_PARAMS: SearchRequestPagination = {
   sortOrder: 'desc',
   name: '',
   onlyClassics: false,
+  onlyTallClimbs: false,
   settername: [],
   setternameSuggestion: '',
   holdsFilter: {},
@@ -160,6 +165,7 @@ export const urlParamsToSearchParams = (urlParams: URLSearchParams): SearchReque
     sortOrder: (urlParams.get('sortOrder') ?? DEFAULT_SEARCH_PARAMS.sortOrder) as 'asc' | 'desc',
     name: urlParams.get('name') ?? DEFAULT_SEARCH_PARAMS.name,
     onlyClassics: urlParams.get('onlyClassics') === 'true',
+    onlyTallClimbs: urlParams.get('onlyTallClimbs') === 'true',
     settername: urlParams.get('settername')?.split(',').filter(s => s.length > 0) ?? DEFAULT_SEARCH_PARAMS.settername,
     setternameSuggestion: urlParams.get('setternameSuggestion') ?? DEFAULT_SEARCH_PARAMS.setternameSuggestion,
     //@ts-expect-error fix later

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ const SearchForm: React.FC<SearchFormProps> = ({ boardDetails }) => {`
`14`	`14`	`{`
`15`	`15`	`key: 'filters',`
`16`	`16`	`label: 'Search',`
`17`		`- children: <BasicSearchForm />,`
	`17`	`+ children: <BasicSearchForm boardDetails={boardDetails} />,`
`18`	`18`	`},`
`19`	`19`	`{`
`20`	`20`	`key: 'holds',`