fix: convert PublicGames to client component to avoid async server component in client tree

client/src/components/home/PublicGames/PublicGames.tsx

@@ -1,14 +1,27 @@
+"use client";
+
+import { useEffect, useState } from "react";
 import { fetchPublicGames } from "@/lib/game";
+import type { Game } from "@michess/types";
 import JoinButton from "./JoinButton";
 import RefreshButton from "./RefreshButton";
 
-export default async function PublicGames() {
-  const games = await fetchPublicGames();
+export default function PublicGames() {
+  const [games, setGames] = useState<Game[]>([]);
+
+  async function load() {
+    const data = await fetchPublicGames();
+    setGames(data || []);
+  }
+
+  useEffect(() => {
+    load();
+  }, []);
 
   return (
     <div className="flex flex-col items-center">
       <h2 className="mb-2 text-2xl font-bold leading-tight">
-        Public games <RefreshButton />
+        Public games <RefreshButton onRefresh={load} />
       </h2>
 
       <div className="bg-base-200 h-80 max-h-80 overflow-y-auto rounded-xl">
@@ -21,7 +34,7 @@ export default async function PublicGames() {
             </tr>
           </thead>
           <tbody>
-            {games && games.length > 0 ? (
+            {games.length > 0 ? (
               games.map((game) => (
                 <tr key={game.code} className="group">
                   <td className={typeof game.host?.id === "number" ? "text-primary" : ""}>

client/src/components/home/PublicGames/RefreshButton.tsx

@@ -4,13 +4,14 @@ import { IconRefresh } from "@tabler/icons-react";
 import { useRouter } from "next/navigation";
 import { useTransition } from "react";
 
-export default function RefreshButton() {
+export default function RefreshButton({ onRefresh }: { onRefresh?: () => void }) {
   const router = useRouter();
   const [isLoading, startTransition] = useTransition();
 
   function handleRefresh() {
     startTransition(() => {
-      router.refresh();
+      if (onRefresh) onRefresh();
+      else router.refresh();
     });
   }