Merge branch 'dev' into feature/migrate-favorites-to-backend

Author: kevinjosethomas

src/api/analysis/analysis.ts

@@ -13,6 +13,11 @@ import {
 import { buildUrl } from '../utils'
 import { cpToWinrate } from 'src/lib/stockfish'
 import { AvailableMoves } from 'src/types/training'
+import { Chess } from 'chess.ts'
+import {
+  saveCustomAnalysis,
+  getCustomAnalysisById,
+} from 'src/lib/customAnalysis'
 
 function buildGameTree(moves: any[], initialFen: string) {
   const tree = new GameTree(initialFen)
@@ -405,7 +410,6 @@ const createAnalyzedGameFromPGN = async (
   pgn: string,
   id?: string,
 ): Promise<AnalyzedGame> => {
-  const { Chess } = await import('chess.ts')
   const chess = new Chess()
 
   try {
@@ -476,9 +480,7 @@ export const getAnalyzedCustomPGN = async (
   pgn: string,
   name?: string,
 ): Promise<AnalyzedGame> => {
-  const { saveCustomAnalysis } = await import('src/lib/customAnalysis')
-
-  const stored = saveCustomAnalysis('pgn', pgn, name)
+  const stored = await saveCustomAnalysis('pgn', pgn, name)
 
   return createAnalyzedGameFromPGN(pgn, stored.id)
 }
@@ -487,7 +489,6 @@ const createAnalyzedGameFromFEN = async (
   fen: string,
   id?: string,
 ): Promise<AnalyzedGame> => {
-  const { Chess } = await import('chess.ts')
   const chess = new Chess()
 
   try {
@@ -531,18 +532,14 @@ export const getAnalyzedCustomFEN = async (
   fen: string,
   name?: string,
 ): Promise<AnalyzedGame> => {
-  const { saveCustomAnalysis } = await import('src/lib/customAnalysis')
-
-  const stored = saveCustomAnalysis('fen', fen, name)
+  const stored = await saveCustomAnalysis('fen', fen, name)
 
   return createAnalyzedGameFromFEN(fen, stored.id)
 }
 
 export const getAnalyzedCustomGame = async (
   id: string,
 ): Promise<AnalyzedGame> => {
-  const { getCustomAnalysisById } = await import('src/lib/customAnalysis')
-
   const stored = getCustomAnalysisById(id)
   if (!stored) {
     throw new Error('Custom analysis not found')
@@ -748,3 +745,40 @@ export const updateGameMetadata = async (
     throw new Error('Failed to update game metadata')
   }
 }
+
+export interface StoreCustomGameRequest {
+  name?: string
+  pgn?: string
+  fen?: string
+}
+
+export interface StoredCustomGameResponse {
+  id: string
+  name: string
+  pgn?: string
+  fen?: string
+  created_at: string
+}
+
+export const storeCustomGame = async (
+  data: StoreCustomGameRequest,
+): Promise<StoredCustomGameResponse> => {
+  const res = await fetch(buildUrl('analysis/store_custom_game'), {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(data),
+  })
+
+  if (res.status === 401) {
+    throw new Error('Unauthorized')
+  }
+
+  if (!res.ok) {
+    const errorText = await res.text()
+    throw new Error(`Failed to store custom game: ${errorText}`)
+  }
+
+  return res.json() as Promise<StoredCustomGameResponse>
+}

src/components/Analysis/AnalysisGameList.tsx

@@ -12,7 +12,7 @@ import { Tournament } from 'src/components'
 import { FavoriteModal } from 'src/components/Common/FavoriteModal'
 import { AnalysisListContext } from 'src/contexts'
 import { getAnalysisGameList } from 'src/api'
-import { getCustomAnalysesAsWebGames } from 'src/lib/customAnalysis'
+import { ensureMigration } from 'src/lib/customAnalysis'
 import {
   getFavoritesAsWebGames,
   addFavoriteGame,
@@ -87,14 +87,9 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
     hand: {},
     brain: {},
     favorites: {},
+    custom: {},
   })
 
-  const [customAnalyses, setCustomAnalyses] = useState(() => {
-    if (typeof window !== 'undefined') {
-      return getCustomAnalysesAsWebGames()
-    }
-    return []
-  })
   const [favoriteGames, setFavoriteGames] = useState<AnalysisWebGame[]>([])
   const [favoritedGameIds, setFavoritedGameIds] = useState<Set<string>>(new Set())
   const [hbSubsection, setHbSubsection] = useState<'hand' | 'brain'>('hand')
@@ -106,7 +101,6 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
   }>({ isOpen: false, game: null })
 
   useEffect(() => {
-    setCustomAnalyses(getCustomAnalysesAsWebGames())
     // Load favorites asynchronously
     getFavoritesAsWebGames().then((favorites) => {
       setFavoriteGames(favorites)
@@ -117,6 +111,12 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
     })
   }, [refreshTrigger])
 
+  useEffect(() => {
+    ensureMigration().catch((error) => {
+      console.warn('Failed to migrate custom analyses:', error)
+    })
+  }, [])
+
   useEffect(() => {
     if (currentId?.[1] === 'custom') {
       setSelected('custom')
@@ -129,6 +129,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
     play: {},
     hand: {},
     brain: {},
+    custom: {},
     lichess: {},
     tournament: {},
     favorites: {},
@@ -144,6 +145,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
     play: 1,
     hand: 1,
     brain: 1,
+    custom: 1,
     lichess: 1,
     tournament: 1,
     favorites: 1,
@@ -193,11 +195,19 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
     setLoadingIndex(null)
   }, [selected])
 
+  useEffect(() => {
+    if (selected === 'custom') {
+      setFetchedCache((prev) => ({
+        ...prev,
+        custom: {},
+      }))
+    }
+  }, [refreshTrigger, selected])
+
   useEffect(() => {
     if (
       selected !== 'tournament' &&
       selected !== 'lichess' &&
-      selected !== 'custom' &&
       selected !== 'hb'
     ) {
       const isAlreadyFetched = fetchedCache[selected]?.[currentPage]
@@ -227,19 +237,30 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
               }))
             } else {
               // Handle regular games response format
+              let parsedGames
+
+            if (selected === 'custom') {
+              parsedGames = data.games.map((game: any) => ({
+                id: game.id,
+                label: game.name || 'Custom Game',
+                result: '*',
+                type: game.pgn ? 'custom-pgn' : 'custom-fen',
+                pgn: game.pgn,
+              }))
+            } else {
               const parse = (
-                game: {
-                  game_id: string
-                  maia_name: string
-                  result: string
-                  player_color: 'white' | 'black'
+                  game: {
+                    game_id: string
+                    maia_name: string
+                    result: string
+                    player_color: 'white' | 'black'
                   is_favorited?: boolean
                   custom_name?: string
-                },
-                type: string,
-              ) => {
-                const raw = game.maia_name.replace('_kdd_', ' ')
-                const maia = raw.charAt(0).toUpperCase() + raw.slice(1)
+                  },
+                  type: string,
+                ) => {
+                  const raw = game.maia_name.replace('_kdd_', ' ')
+                  const maia = raw.charAt(0).toUpperCase() + raw.slice(1)
 
                 // Use custom name if available, otherwise generate default label
                 const defaultLabel = game.player_color === 'white'
@@ -396,13 +417,12 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
     } else if (totalPagesCache[selected]) {
       setTotalPages(totalPagesCache[selected])
       setCurrentPage(currentPagePerTab[selected] || 1)
-    } else if (
-      selected === 'lichess' ||
-      selected === 'tournament' ||
-      selected === 'custom'
-    ) {
+    } else if (selected === 'lichess' || selected === 'tournament') {
       setTotalPages(1)
       setCurrentPage(1)
+    } else if (selected === 'custom') {
+      setTotalPages(totalPagesCache['custom'] || 1)
+      setCurrentPage(currentPagePerTab['custom'] || 1)
     } else {
       setTotalPages(1)
       setCurrentPage(currentPagePerTab[selected] || 1)
@@ -538,7 +558,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
       const gameType = hbSubsection === 'hand' ? 'hand' : 'brain'
       return gamesByPage[gameType]?.[currentPage] || []
     } else if (selected === 'custom') {
-      return customAnalyses
+      return gamesByPage['custom']?.[currentPage] || []
     } else if (selected === 'lichess') {
       return analysisLichessList
     } else if (selected === 'favorites') {

src/components/Common/Header.tsx

@@ -370,6 +370,19 @@ export const Header: React.FC = () => {
             >
               Feedback
             </a>
+            {user?.lichessId && (
+              <>
+                <Link href="/profile" className="uppercase">
+                  Profile
+                </Link>
+                <Link href="/settings" className="uppercase">
+                  Settings
+                </Link>
+                <button onClick={logout} className="uppercase text-left">
+                  Logout
+                </button>
+              </>
+            )}
           </div>
           <div className="flex w-full flex-row items-center gap-3 px-4">
             <a
@@ -385,7 +398,20 @@ export const Header: React.FC = () => {
                 loading={leaderboardLoading}
               />
             )}
-            {userInfo}
+            {user?.lichessId ? (
+              <div className="flex items-center gap-2">
+                <span className="material-symbols-outlined text-xl text-primary/80">
+                  account_circle
+                </span>
+                <span className="text-sm font-medium text-primary/90">
+                  {user?.displayName}
+                </span>
+              </div>
+            ) : (
+              <button onClick={connectLichess} className="uppercase">
+                Sign in
+              </button>
+            )}
           </div>
         </div>
       )}

src/components/Common/ResignationConfirmModal.tsx

@@ -0,0 +1,46 @@
+interface ResignationConfirmModalProps {
+  isOpen: boolean
+  onClose: () => void
+  onConfirm: () => void
+}
+
+export const ResignationConfirmModal: React.FC<
+  ResignationConfirmModalProps
+> = ({ isOpen, onClose, onConfirm }) => {
+  if (!isOpen) return null
+
+  const handleConfirm = () => {
+    onConfirm()
+    onClose()
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="w-full max-w-sm rounded-lg bg-background-1 p-6 shadow-lg">
+        <h3 className="mb-4 text-lg font-semibold text-primary">
+          Confirm Resignation
+        </h3>
+
+        <p className="mb-6 text-sm text-secondary">
+          Are you sure you want to resign this game? This action cannot be
+          undone.
+        </p>
+
+        <div className="flex gap-3">
+          <button
+            onClick={onClose}
+            className="flex-1 rounded border border-white border-opacity-20 px-4 py-2 text-sm text-secondary transition hover:bg-background-2"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleConfirm}
+            className="flex-1 rounded bg-red-600 px-4 py-2 text-sm text-white transition hover:bg-red-700"
+          >
+            Resign
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/Common/index.ts

@@ -17,3 +17,4 @@ export * from './ModalContainer'
 export * from './ContinueAgainstMaia'
 export * from './AnimatedNumber'
 export * from './DownloadModelModal'
+export * from './ResignationConfirmModal'

src/components/Play/HandBrainPlayControls.tsx

@@ -1,8 +1,10 @@
 /* eslint-disable @next/next/no-img-element */
 /* eslint-disable jsx-a11y/alt-text */
+import { useState } from 'react'
 import { PieceSymbol } from 'chess.ts'
 
 import { BaseGame, Color } from 'src/types'
+import { ResignationConfirmModal } from 'src/components'
 
 const pieceTypes: PieceSymbol[] = ['k', 'q', 'r', 'b', 'n', 'p']
 
@@ -52,6 +54,17 @@ export const HandBrainPlayControls: React.FC<Props> = ({
   simulateMaiaTime,
   setSimulateMaiaTime,
 }: Props) => {
+  const [showResignConfirm, setShowResignConfirm] = useState(false)
+
+  const handleResignClick = () => {
+    setShowResignConfirm(true)
+  }
+
+  const handleConfirmResign = () => {
+    if (resign) {
+      resign()
+    }
+  }
   const status = playerActive
     ? isBrain
       ? selectedPiece
@@ -218,7 +231,7 @@ export const HandBrainPlayControls: React.FC<Props> = ({
                 {/* Resign Button - Smaller and Less Prominent */}
                 <div className="flex justify-center">
                   <button
-                    onClick={resign}
+                    onClick={handleResignClick}
                     disabled={!resign || !playerActive}
                     className={`rounded px-3 py-1 text-xs font-medium transition-colors duration-200 ${
                       resign && playerActive
@@ -234,6 +247,12 @@ export const HandBrainPlayControls: React.FC<Props> = ({
           </>
         )}
       </div>
+
+      <ResignationConfirmModal
+        isOpen={showResignConfirm}
+        onClose={() => setShowResignConfirm(false)}
+        onConfirm={handleConfirmResign}
+      />
     </div>
   )
 }