feat: Expand search bar to full width on focus with collapsible header

packages/web/app/components/board-page/header.module.css

@@ -10,6 +10,14 @@
   display: none;
 }
 
+.hideOnMobileExpanded {
+  display: flex;
+}
+
+.showOnMobileExpanded {
+  display: none;
+}
+
 .header {
   touch-action: manipulation;
 }
@@ -32,4 +40,12 @@
   .mobileMenuButton {
     display: flex;
   }
+
+  .hideOnMobileExpanded {
+    display: none;
+  }
+
+  .showOnMobileExpanded {
+    display: flex;
+  }
 }

packages/web/app/components/board-page/header.tsx

@@ -1,6 +1,6 @@
 'use client';
-import React from 'react';
-import { Flex, Button, Dropdown, MenuProps } from 'antd';
+import React, { useState, useRef } from 'react';
+import { Flex, Button, Dropdown, MenuProps, InputRef } from 'antd';
 import { Header } from 'antd/es/layout/layout';
 import { useSession, signIn, signOut } from 'next-auth/react';
 import SearchButton from '../search-drawer/search-button';
@@ -12,7 +12,7 @@ import { generateLayoutSlug, generateSizeSlug, generateSetSlug } from '@/app/lib
 import { ShareBoardButton } from './share-button';
 import { useBoardProvider } from '../board-provider/board-provider-context';
 import { useQueueContext } from '../graphql-queue';
-import { UserOutlined, LogoutOutlined, LoginOutlined, PlusOutlined, MoreOutlined } from '@ant-design/icons';
+import { UserOutlined, LogoutOutlined, LoginOutlined, PlusOutlined, MoreOutlined, CloseOutlined } from '@ant-design/icons';
 import AngleSelector from './angle-selector';
 import Logo from '../brand/logo';
 import styles from './header.module.css';
@@ -26,12 +26,23 @@ export default function BoardSeshHeader({ boardDetails, angle }: BoardSeshHeader
   const { data: session } = useSession();
   const { logout } = useBoardProvider();
   const { currentClimb } = useQueueContext();
+  const [isSearchExpanded, setIsSearchExpanded] = useState(false);
+  const searchInputRef = useRef<InputRef>(null);
 
   const handleSignOut = () => {
     signOut();
     logout(); // Also logout from board provider
   };
 
+  const handleSearchFocus = () => {
+    setIsSearchExpanded(true);
+  };
+
+  const handleSearchCollapse = () => {
+    setIsSearchExpanded(false);
+    searchInputRef.current?.blur();
+  };
+
   const userMenuItems: MenuProps['items'] = [
     {
       key: 'logout',
@@ -57,6 +68,12 @@ export default function BoardSeshHeader({ boardDetails, angle }: BoardSeshHeader
       label: 'Login',
       onClick: () => signIn(),
     }] : []),
+    ...(session?.user ? [{
+      key: 'logout',
+      icon: <LogoutOutlined />,
+      label: 'Logout',
+      onClick: handleSignOut,
+    }] : []),
   ];
   return (
     <Header
@@ -71,23 +88,34 @@ export default function BoardSeshHeader({ boardDetails, angle }: BoardSeshHeader
     >
       <UISearchParamsProvider>
         <Flex justify="space-between" align="center" style={{ width: '100%' }} gap={8}>
-          {/* Logo - Fixed to left */}
-          <Flex align="center">
+          {/* Logo - Fixed to left, hidden on mobile when search is expanded */}
+          <Flex align="center" className={isSearchExpanded ? styles.hideOnMobileExpanded : undefined}>
             <Logo size="sm" showText={false} />
           </Flex>
 
           {/* Center Section - Mobile only */}
           <Flex justify="center" gap={2} style={{ flex: 1 }}>
             <div className={styles.mobileOnly} style={{ flex: 1 }}>
-              <SearchClimbNameInput />
+              <SearchClimbNameInput
+                onFocus={handleSearchFocus}
+                inputRef={searchInputRef}
+              />
             </div>
             <div className={styles.mobileOnly}>
-              <SearchButton boardDetails={boardDetails} />
+              {isSearchExpanded ? (
+                <Button
+                  icon={<CloseOutlined />}
+                  type="text"
+                  onClick={handleSearchCollapse}
+                />
+              ) : (
+                <SearchButton boardDetails={boardDetails} />
+              )}
             </div>
           </Flex>
 
-          {/* Right Section */}
-          <Flex gap={4} align="center">
+          {/* Right Section - hidden on mobile when search is expanded */}
+          <Flex gap={4} align="center" className={isSearchExpanded ? styles.hideOnMobileExpanded : undefined}>
             {angle !== undefined && <AngleSelector boardName={boardDetails.board_name} currentAngle={angle} currentClimb={currentClimb} />}
 
             {/* Desktop: show Create Climb button */}
@@ -120,16 +148,14 @@ export default function BoardSeshHeader({ boardDetails, angle }: BoardSeshHeader
                 </Button>
               </div>
             )}
-
-            {/* Mobile: meatball menu for Create Climb and Login */}
-            {mobileMenuItems.length > 0 && (
-              <div className={styles.mobileMenuButton}>
-                <Dropdown menu={{ items: mobileMenuItems }} placement="bottomRight" trigger={['click']}>
-                  <Button icon={<MoreOutlined />} type="default" />
-                </Dropdown>
-              </div>
-            )}
           </Flex>
+
+          {/* Mobile: meatball menu - always show when search is expanded, otherwise only when there are items */}
+          <div className={isSearchExpanded ? styles.showOnMobileExpanded : styles.mobileMenuButton}>
+            <Dropdown menu={{ items: mobileMenuItems }} placement="bottomRight" trigger={['click']}>
+              <Button icon={<MoreOutlined />} type="default" />
+            </Dropdown>
+          </div>
         </Flex>
       </UISearchParamsProvider>
     </Header>

packages/web/app/components/search-drawer/search-climb-name-input.tsx

@@ -1,15 +1,24 @@
 'use client';
 
-import React from 'react';
-import { Input } from 'antd';
+import React, { useRef } from 'react';
+import { Input, InputRef } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 import { useUISearchParams } from '../queue-control/ui-searchparams-provider';
 
-const SearchClimbNameInput = () => {
+interface SearchClimbNameInputProps {
+  onFocus?: () => void;
+  onBlur?: () => void;
+  inputRef?: React.RefObject<InputRef | null>;
+}
+
+const SearchClimbNameInput = ({ onFocus, onBlur, inputRef }: SearchClimbNameInputProps) => {
   const { uiSearchParams, updateFilters } = useUISearchParams();
+  const localRef = useRef<InputRef>(null);
+  const ref = inputRef || localRef;
 
   return (
     <Input
+      ref={ref}
       placeholder="Search by climb name..."
       prefix={<SearchOutlined style={{ color: '#9CA3AF' }} />}
       allowClear
@@ -19,6 +28,8 @@ const SearchClimbNameInput = () => {
         });
       }}
       value={uiSearchParams.name}
+      onFocus={onFocus}
+      onBlur={onBlur}
     />
   );
 };