Better layout

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

@@ -1,45 +1,96 @@
 import { PropsWithChildren } from "react";
-import { Layout } from "antd";
-import { ParsedBoardRouteParameters, BoardRouteParametersWithUuid } from "@/app/lib/types";
-import { parseBoardRouteParams } from "@/app/lib/util"; // Assume this utility helps with parsing
+import { Affix, Layout } from "antd";
+import { ParsedBoardRouteParameters, BoardRouteParametersWithUuid, SearchRequestPagination } from "@/app/lib/types";
+import { parseBoardRouteParams } from "@/app/lib/url-utils"; // Assume this utility helps with parsing
 
-import { Content, Footer, Header } from "antd/es/layout/layout";
+import { Content } from "antd/es/layout/layout";
 import HistoryControlBar from "@/app/components/board-control/history-control-bar";
-import { fetchBoardDetails } from "@/app/components/rest-api/api";
+import { fetchBoardDetails, fetchResults } from "@/app/components/rest-api/api";
 import BoardSeshHeader from "@/app/components/board-page/header";
 import { QueueProvider } from "@/app/components/board-control/queue-context";
+import { PAGE_LIMIT } from "@/app/components/board-page/constants";
 
 interface LayoutProps {
   params: BoardRouteParametersWithUuid;
+  searchParams: {
+    query?: string;
+    page?: string;
+    gradeAccuracy?: string;
+    maxGrade?: string;
+    minAscents?: string;
+    minGrade?: string;
+    minRating?: string;
+    sortBy?: string;
+    sortOrder?: string;
+    name?: string;
+    onlyClassics?: string;
+    settername?: string;
+    setternameSuggestion?: string;
+    holds?: string;
+    mirroredHolds?: string;
+    pageSize?: string;
+  }
 }
 
-export default async function BoardLayout({ children, params }: PropsWithChildren<LayoutProps>) {
+export default async function BoardLayout({ children, params, searchParams = {} }: PropsWithChildren<LayoutProps>) {
   // Parse the route parameters
   const parsedParams: ParsedBoardRouteParameters = parseBoardRouteParams(params);
+
   const { board_name, layout_id, size_id, set_ids, angle, uuid } = parsedParams;
-  const boardDetails = await fetchBoardDetails(board_name, layout_id, size_id, set_ids);
-
+
+  // TODO: Unduplicate this code
+  const searchParamsObject: SearchRequestPagination = {
+      gradeAccuracy: parseFloat(searchParams.gradeAccuracy || "0"),
+      maxGrade: parseInt(searchParams.maxGrade || "29", 10),
+      minAscents: parseInt(searchParams.minAscents || "0", 10),
+      minGrade: parseInt(searchParams.minGrade || "1", 10),
+      minRating: parseFloat(searchParams.minRating || "0"),
+      sortBy: (searchParams.sortBy || "ascents") as "ascents" | "difficulty" | "name" | "quality",
+      sortOrder: (searchParams.sortOrder || "desc") as "asc" | "desc",
+      name: searchParams.name || "",
+      onlyClassics: searchParams.onlyClassics === "true",
+      settername: searchParams.settername || "",
+      setternameSuggestion: searchParams.setternameSuggestion || "",
+      holds: searchParams.holds || "",
+      mirroredHolds: searchParams.mirroredHolds || "",
+      pageSize: Number(searchParams.pageSize || PAGE_LIMIT),
+      page: Number(searchParams.page || 0),
+    };
+  // Fetch the climbs and board details server-side
+  const [fetchedResults, boardDetails] = await Promise.all([
+      fetchResults(searchParamsObject, parsedParams),
+      fetchBoardDetails(parsedParams.board_name, parsedParams.layout_id, parsedParams.size_id, parsedParams.set_ids),
+    ]);
   return (
     <>
       <title>{`Boardsesh on ${board_name} - Layout ${layout_id}`}</title>
       <Layout style={{ height: "100dvh", display: "flex", flexDirection: "column" }}>
-        <QueueProvider>
+        <QueueProvider parsedParams={parsedParams} initialClimbSearchResults={fetchedResults.boulderproblems} initialClimbSearchTotalCount={fetchedResults.totalCount}>
           <BoardSeshHeader params={parsedParams} />
-            <Content style={{ height: "80dvh", justifyContent: "center", alignItems: "center" }}>
-              {children} {/* This will render the dynamic content from the child pages */}
-            </Content>
+          <Content id="content-for-scrollable" style={{ 
+            flex: 1, 
+            justifyContent: "center", 
+            alignItems: "center", 
+            overflowY: "auto", 
+            overflowX: 'hidden',
+            height: "80vh", 
+            paddingLeft: "18px",
+            paddingRight: "18px",
+            paddingTop: "18px",
+
+            }}>
+            {children}
+          </Content>
 
-            <Footer style={{ height: "10dvh", padding: 0, backgroundColor: "#fff" }}>
+          <Affix offsetBottom={0}>
+            <div style={{ width: "100%", backgroundColor: "#fff", boxShadow: "0 -2px 8px rgba(0, 0, 0, 0.15)" }}>
               <HistoryControlBar
                 board={board_name}
                 boardDetails={boardDetails}
-
-                // navigateClimbsLeft={navigateClimbsLeft}
-                // navigateClimbsRight={navigateClimbsRight}
               />
-            </Footer>
+            </div>
+          </Affix>
         </QueueProvider>
-
       </Layout>
     </>
   );

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

@@ -0,0 +1,28 @@
+import { PropsWithChildren } from "react";
+
+import SearchColumn from "@/app/components/search-drawer/search-drawer";
+import { BoardRouteParametersWithUuid, ParsedBoardRouteParameters } from "@/app/lib/types";
+import { parseBoardRouteParams } from "@/app/lib/url-utils";
+import Col from "antd/es/col";
+import { Content } from "antd/es/layout/layout";
+import Row from "antd/es/row";
+
+interface LayoutProps {
+  params: BoardRouteParametersWithUuid;
+}
+
+export default function ListLayout ({ children, params }: PropsWithChildren<LayoutProps>)  {
+  const parsedParams: ParsedBoardRouteParameters = parseBoardRouteParams(params);
+  return (
+    <Row gutter={16}>
+      <Col xs={24} md={16}>
+        <Content>
+          {children}
+        </Content>
+      </Col>
+      <Col xs={24} md={8} style={{ marginBottom: "16px" }}>
+        <SearchColumn />
+      </Col>
+    </Row>
+  )
+}

app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/list/page.tsx

@@ -1,6 +1,6 @@
 import { notFound } from "next/navigation";
 import { BoardRouteParametersWithUuid, SearchRequestPagination } from "@/app/lib/types";
-import { parseBoardRouteParams } from "@/app/lib/util";
+import { parseBoardRouteParams } from "@/app/lib/url-utils";
 import ClimbsList from "@/app/components/board-page/climbs-list";
 import { fetchBoardDetails, fetchResults } from "@/app/components/rest-api/api";
 
@@ -64,10 +64,7 @@ export default async function DynamicResultsPage({
     return (
       <ClimbsList
         {...parsedParams}
-        initialClimbs={fetchedResults.boulderproblems}
-        resultsCount={fetchedResults.totalCount}
         boardDetails={boardDetails}
-        searchParams={searchParamsObject} // Pass the parsed searchParams
       />
     );
   } catch (error) {

app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/view/[climb_uuid]/page.tsx

@@ -1,8 +1,11 @@
 import { notFound } from "next/navigation";
 import { BoardRouteParametersWithUuid } from "@/app/lib/types";
-import { parseBoardRouteParams } from "@/app/lib/util";
+import { parseBoardRouteParams } from "@/app/lib/url-utils";
 import { fetchBoardDetails, fetchCurrentClimb } from "@/app/components/rest-api/api";
 import BoardLitupHolds from "@/app/components/board/board-litup-holds";
+import ClimbCard from "@/app/components/climb-card/climb-card";
+import { Col, Row } from "antd";
+import ClimbInfoColumn from "@/app/components/climb-info/climb-info-drawer";
 
 export default async function DynamicResultsPage({
   params,
@@ -17,12 +20,25 @@ export default async function DynamicResultsPage({
       fetchBoardDetails(parsedParams.board_name, parsedParams.layout_id, parsedParams.size_id, parsedParams.set_ids),
       fetchCurrentClimb(parsedParams)
     ]);
-    
+
     return (
-      <BoardLitupHolds 
-        holdsData={boardDetails.holdsData} 
-        litUpHoldsMap={currentClimb.litUpHoldsMap} 
-       />
+      <Row >
+        <Col xs={24} md={16}>
+          <ClimbCard 
+            parsedParams={parsedParams}
+            climb={currentClimb}
+            boardDetails={boardDetails} 
+          >
+            <BoardLitupHolds 
+              holdsData={boardDetails.holdsData}
+              litUpHoldsMap={currentClimb.litUpHoldsMap} 
+            />
+          </ClimbCard>
+        </Col>
+        <Col xs={24} md={8} style={{ marginBottom: "16px" }}>
+          <ClimbInfoColumn />
+        </Col>
+      </Row>
     );
   } catch (error) {
     console.error("Error fetching results or climb:", error);

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

@@ -2,7 +2,7 @@
 import { convertLitUpHoldsStringToMap } from "@/app/components/board/util";
 import { getBoulderProblem } from "@/app/lib/data/queries";
 import { BoardRouteParametersWithUuid, ErrorResponse, FetchCurrentProblemResponse } from "@/app/lib/types";
-import { parseBoardRouteParams } from "@/app/lib/util";
+import { parseBoardRouteParams } from "@/app/lib/url-utils";
 import { sql } from "@vercel/postgres";
 import { NextResponse } from "next/server";
 

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

@@ -2,7 +2,7 @@ import { PAGE_LIMIT } from "@/app/components/board-page/constants";
 import { convertLitUpHoldsStringToMap } from "@/app/components/board/util";
 import { SearchBoulderProblemResult, searchBoulderProblems } from "@/app/lib/data/queries";
 import { BoardRouteParameters, ErrorResponse, FetchResultsResponse, SearchRequest, SearchRequestPagination } from "@/app/lib/types";
-import { parseBoardRouteParams } from "@/app/lib/util";
+import { parseBoardRouteParams } from "@/app/lib/url-utils";
 import { sql } from "@vercel/postgres";
 import { NextResponse } from "next/server";
 

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

@@ -1,7 +1,7 @@
 import { getBoardDetails } from "@/app/lib/data/queries";
 import { BoardRouteParameters } from "@/app/lib/types";
 import { NextResponse } from "next/server";
-import { parseBoardRouteParams } from "@/app/lib/util";
+import { parseBoardRouteParams } from "@/app/lib/url-utils";
 
 export async function GET(req: Request, { params }: { params: BoardRouteParameters }) {
   try {

app/components/BoardForm.tsx

@@ -1,3 +1,4 @@
+//@ts-nocheck
 "use client"
 
 import React, { useEffect, useState } from "react";

app/components/board-control/history-control-bar.tsx

@@ -10,7 +10,7 @@ import NextClimbButton from "./next-climb-button";
 import { useParams, usePathname } from "next/navigation";
 import PreviousClimbButton from "./previous-climb-button";
 import Link from "next/link";
-import { parseBoardRouteParams } from "@/app/lib/util";
+import { parseBoardRouteParams } from "@/app/lib/url-utils";
 import { BoardName, BoardRouteParametersWithUuid, BoulderProblem, GetBoardDetailsResponse } from "@/app/lib/types";
 
 const { Title, Text } = Typography;
@@ -40,7 +40,7 @@ const HistoryControlBar: React.FC<FloatingBarProps> = ({
 
   const isViewPage = pathname.includes('/view/');
 
-  const { currentClimb, nextClimb } = useQueueContext();
+  const { currentClimb } = useQueueContext();
   return (
     <Card
       bodyStyle={{

app/components/board-control/next-climb-button.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { useQueueContext } from "./queue-context";
 import { useParams } from "next/navigation";
-import { parseBoardRouteParams } from "@/app/lib/util";
+import { parseBoardRouteParams } from "@/app/lib/url-utils";
 import { BoardRouteParametersWithUuid } from "@/app/lib/types";
 import { RightOutlined } from "@ant-design/icons";
 import Button, { ButtonProps } from "antd/es/button";
@@ -25,13 +25,13 @@ export default function NextClimbButton ({ navigate=false }: NextClimbButtonProp
   const nextClimb = getNextClimbQueueItem();
 
   const handleClick = () => {
-    if (nextClimb) {
-      // Remove the next climb from the queue by updating the state
-      setCurrentClimbQueueItem(nextClimb);
+    if (!nextClimb) {
+      return;
     }
+    setCurrentClimbQueueItem(nextClimb);
   };
 
-  if (navigate) {
+  if (navigate && nextClimb) {
     return (
       <Link
         href={`/${board_name}/${layout_id}/${size_id}/${set_ids}/${angle}/view/${nextClimb?.climb.uuid}`}

app/components/board-control/previous-climb-button.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { useQueueContext } from "./queue-context";
 import { useParams } from "next/navigation";
-import { parseBoardRouteParams } from "@/app/lib/util";
+import { parseBoardRouteParams } from "@/app/lib/url-utils";
 import { BoardRouteParametersWithUuid } from "@/app/lib/types";
 import { LeftOutlined } from "@ant-design/icons";
 import Button, { ButtonProps } from "antd/es/button";