fix: Resolve AntD deprecation warnings across the codebase

packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlist/[playlist_uuid]/playlist-climbs-list.tsx

@@ -219,7 +219,7 @@ export default function PlaylistClimbsList({
         <Alert
           type="info"
           showIcon
-          message={`Not showing ${hiddenCount} ${hiddenCount === 1 ? 'climb' : 'climbs'} from other layouts`}
+          title={`Not showing ${hiddenCount} ${hiddenCount === 1 ? 'climb' : 'climbs'} from other layouts`}
           className={styles.hiddenClimbsNotice}
         />
       )}

packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlist/[playlist_uuid]/playlist-edit-drawer.tsx

@@ -164,7 +164,7 @@ export default function PlaylistEditDrawer({ open, playlist, onClose, onSuccess
           label="Visibility"
           valuePropName="checked"
         >
-          <Space direction="vertical" size={4}>
+          <Space orientation="vertical" size={4}>
             <Switch
               checked={isPublic}
               onChange={handleVisibilityChange}

packages/web/app/[board_name]/[layout_id]/[size_id]/[set_ids]/[angle]/playlists/creator-name-select.tsx

@@ -81,7 +81,7 @@ const CreatorNameSelect = ({
       value={value}
       onChange={onChange}
       onSearch={setSearchValue}
-      onDropdownVisibleChange={setIsOpen}
+      onOpenChange={setIsOpen}
       loading={isLoading}
       showSearch
       filterOption={false}

packages/web/app/about/about-content.tsx

@@ -31,7 +31,7 @@ export default function AboutContent() {
 
       <Content className={styles.content}>
         <Card>
-          <Space direction="vertical" size="large" className={styles.cardContent}>
+          <Space orientation="vertical" size="large" className={styles.cardContent}>
             {/* Hero Section */}
             <div className={styles.heroSection}>
               <Logo size="lg" linkToHome={false} />
@@ -68,7 +68,7 @@ export default function AboutContent() {
                 type="warning"
                 showIcon
                 icon={<LockOutlined />}
-                message="Single Vendor Risk"
+                title="Single Vendor Risk"
                 description="Thousands of dollars worth of climbing equipment relies on software from two small companies. If that software stops working, your expensive LED system becomes unusable."
               />
 

packages/web/app/auth/error/auth-error-content.tsx

@@ -71,10 +71,10 @@ export default function AuthErrorContent() {
         }}
       >
         <Card style={{ width: '100%', maxWidth: 400, textAlign: 'center' }}>
-          <Space direction="vertical" size="large" style={{ width: '100%' }}>
+          <Space orientation="vertical" size="large" style={{ width: '100%' }}>
             <CloseCircleOutlined style={{ fontSize: 48, color: themeTokens.colors.error }} />
             <Title level={3}>Authentication Error</Title>
-            <Alert type="error" message={getErrorMessage()} showIcon />
+            <Alert type="error" title={getErrorMessage()} showIcon />
             <Button type="primary" href="/auth/login" block size="large">
               Back to Login
             </Button>

packages/web/app/auth/login/auth-page-content.tsx

@@ -268,7 +268,7 @@ export default function AuthPageContent() {
         }}
       >
         <Card style={{ width: '100%', maxWidth: 400 }}>
-          <Space direction="vertical" style={{ width: '100%', textAlign: 'center', marginBottom: 24 }}>
+          <Space orientation="vertical" style={{ width: '100%', textAlign: 'center', marginBottom: 24 }}>
             <Logo size="md" />
             <Text type="secondary">Sign in or create an account to continue</Text>
           </Space>

packages/web/app/auth/verify-request/verify-request-content.tsx

@@ -88,11 +88,11 @@ export default function VerifyRequestContent() {
         }}
       >
         <Card style={{ width: '100%', maxWidth: 400, textAlign: 'center' }}>
-          <Space direction="vertical" size="large" style={{ width: '100%' }}>
+          <Space orientation="vertical" size="large" style={{ width: '100%' }}>
             {errorMessage ? (
               <>
                 <CloseCircleOutlined style={{ fontSize: 48, color: themeTokens.colors.error }} />
-                <Alert type="error" message={errorMessage} showIcon />
+                <Alert type="error" title={errorMessage} showIcon />
               </>
             ) : (
               <>

packages/web/app/components/auth/auth-modal.tsx

@@ -124,6 +124,7 @@ export default function AuthModal({
     {
       key: 'login',
       label: 'Login',
+      forceRender: true,
       children: (
         <Form form={loginForm} layout="vertical" onFinish={handleLogin}>
           <Form.Item
@@ -156,6 +157,7 @@ export default function AuthModal({
     {
       key: 'register',
       label: 'Create Account',
+      forceRender: true,
       children: (
         <Form form={registerForm} layout="vertical" onFinish={handleRegister}>
           <Form.Item
@@ -225,14 +227,14 @@ export default function AuthModal({
       width={400}
       centered
     >
-      <Space direction="vertical" size="large" style={{ width: '100%' }}>
-        <Space direction="vertical" style={{ width: '100%', textAlign: 'center' }}>
+      <Space orientation="vertical" size="large" style={{ width: '100%' }}>
+        <Space orientation="vertical" style={{ width: '100%', textAlign: 'center' }}>
           <HeartFilled style={{ fontSize: 32, color: '#ff4d4f' }} />
           <Text strong style={{ fontSize: 18 }}>{title}</Text>
           <Text type="secondary">{description}</Text>
         </Space>
 
-        <Tabs activeKey={activeTab} onChange={setActiveTab} items={tabItems} centered />
+        <Tabs activeKey={activeTab} onChange={setActiveTab} items={tabItems} centered destroyOnHidden={false} />
 
         <Divider style={{ margin: '8px 0' }}>
           <Text type="secondary">or</Text>

packages/web/app/components/board-page/angle-selector.tsx

@@ -151,7 +151,7 @@ export default function AngleSelector({ boardName, currentAngle, currentClimb }:
       >
         {currentClimb && (
           <Alert
-            message={currentClimb.name}
+            title={currentClimb.name}
             type="info"
             style={{ marginBottom: 12, textAlign: 'center' }}
           />

packages/web/app/components/climb-actions/actions/playlist-action.tsx

@@ -158,7 +158,7 @@ export function PlaylistAction({
         <Text strong>Add to Playlist</Text>
       </div>
       {playlists.length === 0 && !showCreateForm ? (
-        <Space direction="vertical" style={{ width: '100%', textAlign: 'center', padding: themeTokens.spacing[2] }}>
+        <Space orientation="vertical" style={{ width: '100%', textAlign: 'center', padding: themeTokens.spacing[2] }}>
           <Text type="secondary">No playlists yet</Text>
           <Button
             type="primary"
@@ -195,7 +195,7 @@ export function PlaylistAction({
                       onClick={() => handleTogglePlaylist(playlist.uuid, isInPlaylist)}
                     >
                       <Space style={{ width: '100%', justifyContent: 'space-between' }}>
-                        <Space direction="vertical" size={0}>
+                        <Space orientation="vertical" size={0}>
                           <Text strong style={{ fontSize: 13 }}>{playlist.name}</Text>
                           <Text type="secondary" style={{ fontSize: 11 }}>
                             {playlist.climbCount} {playlist.climbCount === 1 ? 'climb' : 'climbs'}

packages/web/app/components/climb-actions/actions/tick-action.tsx

@@ -67,7 +67,7 @@ export function TickAction({
   }, [boardDetails, climb.uuid, angle, closeDrawer]);
 
   const renderSignInPrompt = () => (
-    <Space direction="vertical" size="large" style={{ width: '100%', textAlign: 'center', padding: '24px 0' }}>
+    <Space orientation="vertical" size="large" style={{ width: '100%', textAlign: 'center', padding: '24px 0' }}>
       <Text strong style={{ fontSize: 16 }}>Sign in to record ticks</Text>
       <Paragraph type="secondary">
         Create a Boardsesh account to log your climbs and track your progress.

packages/web/app/components/create-climb/create-climb-form.tsx

@@ -263,7 +263,7 @@ export default function CreateClimbForm({ boardDetails, angle, forkFrames, forkN
       {/* Auth alerts */}
       {!isAuthenticated && (
         <Alert
-          message="Sign in required"
+          title="Sign in required"
           description="Sign in to your Boardsesh account to save your climb."
           type="warning"
           showIcon

packages/web/app/components/create-climb/moonboard-create-climb-form.tsx

@@ -163,7 +163,7 @@ export default function MoonBoardCreateClimbForm({
   return (
     <div className={styles.pageContainer}>
       <Alert
-        message={`MoonBoard Beta - ${layoutName} @ ${angle}°`}
+        title={`MoonBoard Beta - ${layoutName} @ ${angle}°`}
         description="MoonBoard support is in beta. Climbs are saved locally for now. Database sync coming soon!"
         type="info"
         showIcon
@@ -174,7 +174,7 @@ export default function MoonBoardCreateClimbForm({
 
       {saveSuccess && (
         <Alert
-          message="Climb saved successfully!"
+          title="Climb saved successfully!"
           description="Your climb has been saved locally. You can create another climb."
           type="success"
           showIcon
@@ -185,7 +185,7 @@ export default function MoonBoardCreateClimbForm({
 
       {ocrError && (
         <Alert
-          message="Import Failed"
+          title="Import Failed"
           description={ocrError}
           type="error"
           showIcon
@@ -197,7 +197,7 @@ export default function MoonBoardCreateClimbForm({
 
       {ocrWarnings.length > 0 && (
         <Alert
-          message="Import Warnings"
+          title="Import Warnings"
           description={ocrWarnings.map((w, i) => <div key={i}>{w}</div>)}
           type="warning"
           showIcon

packages/web/app/components/logbook/tick-button.tsx

@@ -67,7 +67,7 @@ export const TickButton: React.FC<TickButtonProps> = ({ currentClimb, angle, boa
           open={drawerVisible}
           styles={{ wrapper: { height: '50%' } }}
         >
-          <Space direction="vertical" size="large" style={{ width: '100%', textAlign: 'center', padding: '24px 0' }}>
+          <Space orientation="vertical" size="large" style={{ width: '100%', textAlign: 'center', padding: '24px 0' }}>
             <Text strong style={{ fontSize: 16 }}>Sign in to record ticks</Text>
             <Paragraph type="secondary">
               Create a Boardsesh account to log your climbs and track your progress.

packages/web/app/components/moonboard-import/moonboard-bulk-import.tsx

@@ -251,7 +251,7 @@ export default function MoonBoardBulkImport({
           {/* Errors */}
           {state.errors.length > 0 && (
             <Alert
-              message={`${state.errors.length} Warning(s)`}
+              title={`${state.errors.length} Warning(s)`}
               description={
                 <ul className={styles.errorList}>
                   {state.errors.map((err, i) => (
@@ -271,7 +271,7 @@ export default function MoonBoardBulkImport({
           {/* Success Summary */}
           {state.climbs.length > 0 && (
             <Alert
-              message={`${state.climbs.length} climb(s) ready to import`}
+              title={`${state.climbs.length} climb(s) ready to import`}
               description="Review the climbs below. You can edit or remove any before saving."
               type="success"
               showIcon

packages/web/app/components/queue-control/queue-list.tsx

@@ -297,7 +297,7 @@ const QueueList = forwardRef<QueueListHandle, QueueListProps>(({ boardDetails, o
           open={tickDrawerVisible}
           styles={{ wrapper: { height: '50%' } }}
         >
-          <Space direction="vertical" size="large" style={{ width: '100%', textAlign: 'center', padding: '24px 0' }}>
+          <Space orientation="vertical" size="large" style={{ width: '100%', textAlign: 'center', padding: '24px 0' }}>
             <Text strong style={{ fontSize: 16 }}>Sign in to record ticks</Text>
             <Paragraph type="secondary">
               Create a Boardsesh account to log your climbs and track your progress.

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

@@ -45,7 +45,7 @@ const BasicSearchForm: React.FC<BasicSearchFormProps> = ({ boardDetails }) => {
     if (!isAuthenticated) {
       return (
         <Alert
-          message="Sign in to filter by progress"
+          title="Sign in to filter by progress"
           description="Login to filter climbs based on your attempt and completion history."
           type="info"
           showIcon

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

@@ -60,7 +60,7 @@ const SetterNameSelect = () => {
       value={uiSearchParams.settername}
       onChange={(value) => updateFilters({ settername: value })}
       onSearch={setSearchValue}
-      onDropdownVisibleChange={setIsOpen}
+      onOpenChange={setIsOpen}
       loading={isLoading}
       showSearch
       filterOption={false} // Server-side filtering

packages/web/app/components/settings/aurora-credentials-section.tsx

@@ -137,7 +137,7 @@ function BoardCredentialCard({
             type="warning"
             icon={<WarningOutlined />}
             showIcon
-            message={`${totalUnsynced} item${totalUnsynced > 1 ? 's' : ''} pending sync`}
+            title={`${totalUnsynced} item${totalUnsynced > 1 ? 's' : ''} pending sync`}
             description={
               <Text type="secondary">
                 {unsyncedCounts.ascents > 0 && `${unsyncedCounts.ascents} ascent${unsyncedCounts.ascents > 1 ? 's' : ''}`}
@@ -293,7 +293,7 @@ export default function AuroraCredentialsSection() {
           Data created in Boardsesh stays local and does not sync back to Aurora.
         </Text>
 
-        <Space direction="vertical" size="middle" className={styles.cardsContainer}>
+        <Space orientation="vertical" size="middle" className={styles.cardsContainer}>
           <BoardCredentialCard
             boardType="kilter"
             credential={getCredentialForBoard('kilter')}

packages/web/app/components/setup-wizard/join-session-tab.tsx

@@ -88,7 +88,7 @@ const JoinSessionTab = () => {
         {error && (
           <Alert
             type="warning"
-            message={getGeolocationErrorMessage(error)}
+            title={getGeolocationErrorMessage(error)}
             style={{ marginBottom: themeTokens.spacing[4] }}
           />
         )}
@@ -122,7 +122,7 @@ const JoinSessionTab = () => {
       <div style={{ textAlign: 'center', padding: themeTokens.spacing[8] }}>
         <Empty
           description={
-            <Space direction="vertical" size="small">
+            <Space orientation="vertical" size="small">
               <Text>No backend server configured</Text>
               <Paragraph type="secondary" style={{ marginBottom: 0 }}>
                 To join sessions, you need to connect to a Boardsesh backend server.
@@ -140,7 +140,7 @@ const JoinSessionTab = () => {
       <div style={{ textAlign: 'center', padding: themeTokens.spacing[8] }}>
         <Alert
           type="error"
-          message={fetchError}
+          title={fetchError}
           style={{ marginBottom: themeTokens.spacing[4] }}
         />
         <Button icon={<ReloadOutlined />} onClick={refresh}>
@@ -156,7 +156,7 @@ const JoinSessionTab = () => {
       <div style={{ textAlign: 'center', padding: themeTokens.spacing[8] }}>
         <Empty
           description={
-            <Space direction="vertical" size="small">
+            <Space orientation="vertical" size="small">
               <Text>No sessions found nearby</Text>
               <Paragraph type="secondary" style={{ marginBottom: 0 }}>
                 There are no active climbing sessions within 500 meters.

packages/web/app/settings/settings-page-content.tsx

@@ -295,7 +295,7 @@ export default function SettingsPageContent() {
 
           <Form form={form} layout="vertical">
             <Form.Item label="Avatar">
-              <Space direction="vertical" align="center" style={{ width: '100%' }}>
+              <Space orientation="vertical" align="center" style={{ width: '100%' }}>
                 <Avatar size={96} src={previewUrl} icon={<UserOutlined />} />
                 <Space>
                   <Upload {...uploadProps}>