feat(games): fetch games from backend

app/(main)/community/page.tsx

@@ -6,12 +6,13 @@ import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
 import { listGames, listOrders, listPlayers, listPosts } from "@/lib/api"
 import { roleLabels } from "@/lib/constants"
+import type { Game } from "@/lib/types"
 import { ClipboardList, Heart, MessageCircle, PenSquare, Pin } from "lucide-react"
 import Link from "next/link"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 
 export default function CommunityPage() {
-  const games = listGames()
+  const [games, setGames] = useState<Game[]>([])
   const posts = listPosts()
   const orders = listOrders()
   const players = listPlayers()
@@ -19,6 +20,24 @@ export default function CommunityPage() {
   const [sortMode, setSortMode] = useState<"latest" | "hot">("latest")
   const [selectedGame, setSelectedGame] = useState<string | null>(null)
 
+  useEffect(() => {
+    let cancelled = false
+
+    listGames()
+      .then((items) => {
+        if (cancelled) return
+        setGames(items)
+      })
+      .catch(() => {
+        if (cancelled) return
+        setGames([])
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
   const filteredPosts = posts
     .filter((post) => {
       if (!selectedGame) return true

app/(main)/page.tsx

@@ -8,8 +8,8 @@ import { GameIcon } from "@/lib/game-icons"
 import { ArrowRight, Search, ShoppingBag, Star } from "lucide-react"
 import Link from "next/link"
 
-export default function HomePage() {
-  const games = listGames()
+export default async function HomePage() {
+  const games = await listGames()
   const players = listPlayers()
   const shops = listShops()
 

app/(main)/search/page.tsx

@@ -374,7 +374,7 @@ function FilterSection({
 function SearchPageContent() {
   const searchParams = useSearchParams()
   const router = useRouter()
-  const games = listGames()
+  const [games, setGames] = useState<Game[]>([])
 
   const [searchQuery, setSearchQuery] = useState(searchParams.get("q") || "")
   const [selectedGames, setSelectedGames] = useState<string[]>(() => {
@@ -396,6 +396,24 @@ function SearchPageContent() {
   const [hasLoaded, setHasLoaded] = useState(false)
   const [error, setError] = useState<string | null>(null)
 
+  useEffect(() => {
+    let cancelled = false
+
+    listGames()
+      .then((items) => {
+        if (cancelled) return
+        setGames(items)
+      })
+      .catch(() => {
+        if (cancelled) return
+        setGames([])
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
   const replaceUrl = useCallback(
     (updater: (params: URLSearchParams) => void) => {
       const params = new URLSearchParams(searchParams.toString())