feat: add initial backend api implementation of custom game storage

Author: kevinjosethomas

src/api/analysis/analysis.ts

@@ -478,7 +478,7 @@ export const getAnalyzedCustomPGN = async (
 ): 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)
 }
@@ -533,7 +533,7 @@ export const getAnalyzedCustomFEN = async (
 ): 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)
 }
@@ -718,3 +718,40 @@ export const getEngineAnalysis = async (
 
   return res.json()
 }
+
+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,
@@ -84,14 +84,9 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
     play: {},
     hand: {},
     brain: {},
+    custom: {},
   })
 
-  const [customAnalyses, setCustomAnalyses] = useState(() => {
-    if (typeof window !== 'undefined') {
-      return getCustomAnalysesAsWebGames()
-    }
-    return []
-  })
   const [favoriteGames, setFavoriteGames] = useState(() => {
     if (typeof window !== 'undefined') {
       return getFavoritesAsWebGames()
@@ -107,10 +102,15 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
   }>({ isOpen: false, game: null })
 
   useEffect(() => {
-    setCustomAnalyses(getCustomAnalysesAsWebGames())
     setFavoriteGames(getFavoritesAsWebGames())
   }, [refreshTrigger])
 
+  useEffect(() => {
+    ensureMigration().catch((error) => {
+      console.warn('Failed to migrate custom analyses:', error)
+    })
+  }, [])
+
   useEffect(() => {
     if (currentId?.[1] === 'custom') {
       setSelected('custom')
@@ -123,6 +123,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
     play: {},
     hand: {},
     brain: {},
+    custom: {},
     lichess: {},
     tournament: {},
   })
@@ -137,6 +138,7 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
     play: 1,
     hand: 1,
     brain: 1,
+    custom: 1,
     lichess: 1,
     tournament: 1,
   })
@@ -185,11 +187,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' &&
       selected !== 'favorites'
     ) {
@@ -205,32 +215,44 @@ export const AnalysisGameList: React.FC<AnalysisGameListProps> = ({
 
         getAnalysisGameList(selected, currentPage)
           .then((data) => {
-            const parse = (
-              game: {
-                game_id: string
-                maia_name: string
-                result: string
-                player_color: 'white' | 'black'
-              },
-              type: string,
-            ) => {
-              const raw = game.maia_name.replace('_kdd_', ' ')
-              const maia = raw.charAt(0).toUpperCase() + raw.slice(1)
-
-              return {
-                id: game.game_id,
-                label:
-                  game.player_color === 'white'
-                    ? `You vs. ${maia}`
-                    : `${maia} vs. You`,
-                result: game.result,
-                type,
+            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'
+                },
+                type: string,
+              ) => {
+                const raw = game.maia_name.replace('_kdd_', ' ')
+                const maia = raw.charAt(0).toUpperCase() + raw.slice(1)
+
+                return {
+                  id: game.game_id,
+                  label:
+                    game.player_color === 'white'
+                      ? `You vs. ${maia}`
+                      : `${maia} vs. You`,
+                  result: game.result,
+                  type,
+                }
               }
-            }
 
-            const parsedGames = data.games.map((game: GameData) =>
-              parse(game, selected),
-            )
+              parsedGames = data.games.map((game: GameData) =>
+                parse(game, selected),
+              )
+            }
             const calculatedTotalPages =
               data.total_pages || Math.ceil(data.total_games / 25)
 
@@ -345,13 +367,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)
@@ -407,7 +428,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') {