From b29c467766ff2d0b6c00c081cdf06b004f7af43c Mon Sep 17 00:00:00 2001
From: Michess <michess@mischlabs.de>
Date: Tue, 14 Apr 2026 13:16:00 +0200
Subject: [PATCH] feat: add friend invite modal to all game modes

- New InviteFriendsModal component: fetches friends list, sends game
  invite via notification socket with per-friend sent confirmation
- Multiplayer (GamePage): invite button below copy link, hidden after game ends
- Correspondence: invite button in waiting-for-opponent card
- Tournament: invite button for joined players while status is waiting
- Invite links use mode-prefixed codes (correspondence/XYZ, tournament/XYZ)
  so notification "Beitreten" button navigates to the correct page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 client/src/app/correspondence/[code]/page.tsx |  2 +
 client/src/app/tournament/[code]/page.tsx     |  6 +-
 client/src/components/InviteFriendsModal.tsx  | 90 +++++++++++++++++++
 client/src/components/game/GamePage.tsx       |  6 ++
 4 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/InviteFriendsModal.tsx

diff --git a/client/src/app/correspondence/[code]/page.tsx b/client/src/app/correspondence/[code]/page.tsx
index 2cf3389..e398990 100644
--- a/client/src/app/correspondence/[code]/page.tsx
+++ b/client/src/app/correspondence/[code]/page.tsx
@@ -14,6 +14,7 @@ import { useCallback, useEffect, useState } from "react";
 import { Chessboard } from "react-chessboard";
 import type { Square } from "chess.js";
 import { APP_URL } from "@/config";
+import InviteFriendsModal from "@/components/InviteFriendsModal";
 
 export default function CorrespondenceGamePage() {
   const { user } = useSession();
@@ -194,6 +195,7 @@ export default function CorrespondenceGamePage() {
               >
                 {copied ? "Kopiert!" : `${APP_URL.replace(/^https?:\/\//, "")}/correspondence/${code}`}
               </button>
+              <InviteFriendsModal gameCode={`correspondence/${code}`} label="Freunde einladen" />
               {!isPlayer && user?.id && (
                 <button
                   className={"btn btn-primary btn-sm" + (joining ? " loading" : "")}
diff --git a/client/src/app/tournament/[code]/page.tsx b/client/src/app/tournament/[code]/page.tsx
index 78efd47..842b1b7 100644
--- a/client/src/app/tournament/[code]/page.tsx
+++ b/client/src/app/tournament/[code]/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import InviteFriendsModal from "@/components/InviteFriendsModal";
 import { useSession } from "@/context/session";
 import { fetchTournament, joinTournament, startTournament } from "@/lib/tournament";
 import type { Tournament, TournamentRound } from "@michess/types";
@@ -109,7 +110,7 @@ export default function TournamentDetailPage() {
             )}
           </div>
         </div>
-        <div className="flex gap-2">
+        <div className="flex gap-2 flex-wrap">
           {tournament.status === "waiting" && user?.id && !isJoined && (
             <button
               className={"btn btn-secondary btn-sm" + (actionLoading ? " loading" : "")}
@@ -119,6 +120,9 @@ export default function TournamentDetailPage() {
               Beitreten
             </button>
           )}
+          {tournament.status === "waiting" && isJoined && (
+            <InviteFriendsModal gameCode={`tournament/${code}`} label="Freunde einladen" />
+          )}
           {canStart && (
             <button
               className={"btn btn-primary btn-sm" + (actionLoading ? " loading" : "")}
diff --git a/client/src/components/InviteFriendsModal.tsx b/client/src/components/InviteFriendsModal.tsx
new file mode 100644
index 0000000..ebfd22c
--- /dev/null
+++ b/client/src/components/InviteFriendsModal.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { API_URL } from "@/config";
+import { useNotifications } from "@/context/NotificationContext";
+import { useSession } from "@/context/session";
+import { useState } from "react";
+
+interface Friend {
+  id: number;
+  friend_id: number;
+  friend_name: string;
+}
+
+export default function InviteFriendsModal({
+  gameCode,
+  label = "Freunde einladen"
+}: {
+  gameCode: string;
+  label?: string;
+}) {
+  const { user } = useSession();
+  const { sendGameInvite } = useNotifications();
+  const [open, setOpen] = useState(false);
+  const [friends, setFriends] = useState<Friend[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [sent, setSent] = useState<Record<number, boolean>>({});
+
+  async function openModal() {
+    if (!user?.id || typeof user.id === "string") return;
+    setOpen(true);
+    setLoading(true);
+    const res = await fetch(`${API_URL}/v1/friends`, { credentials: "include" });
+    if (res.ok) setFriends(await res.json());
+    setLoading(false);
+  }
+
+  function invite(friendId: number) {
+    sendGameInvite(friendId, gameCode);
+    setSent((prev) => ({ ...prev, [friendId]: true }));
+    setTimeout(() => setSent((prev) => ({ ...prev, [friendId]: false })), 3000);
+  }
+
+  if (!user?.id || typeof user.id === "string") return null;
+
+  return (
+    <>
+      <button className="btn btn-sm btn-outline" onClick={openModal}>
+        {label}
+      </button>
+
+      {open && (
+        <dialog className="modal modal-open">
+          <div className="modal-box max-w-sm">
+            <button
+              className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
+              onClick={() => setOpen(false)}
+            >
+              ✕
+            </button>
+            <h3 className="font-bold text-lg mb-4">{label}</h3>
+            {loading ? (
+              <div className="flex justify-center py-4">
+                <span className="loading loading-spinner" />
+              </div>
+            ) : friends.length === 0 ? (
+              <p className="text-sm opacity-60">
+                Keine Freunde gefunden. Füge zuerst Freunde hinzu.
+              </p>
+            ) : (
+              <div className="flex flex-col gap-3">
+                {friends.map((f) => (
+                  <div key={f.id} className="flex items-center justify-between gap-2">
+                    <span className="font-medium">{f.friend_name}</span>
+                    <button
+                      className={"btn btn-sm btn-secondary" + (sent[f.friend_id] ? " btn-success" : "")}
+                      onClick={() => invite(f.friend_id)}
+                    >
+                      {sent[f.friend_id] ? "✓ Gesendet" : "Einladen"}
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+          <div className="modal-backdrop bg-black/40" onClick={() => setOpen(false)} />
+        </dialog>
+      )}
+    </>
+  );
+}
diff --git a/client/src/components/game/GamePage.tsx b/client/src/components/game/GamePage.tsx
index f794a76..5439261 100644
--- a/client/src/components/game/GamePage.tsx
+++ b/client/src/components/game/GamePage.tsx
@@ -23,6 +23,7 @@ import type { ClearPremoves } from "react-chessboard";
 import { Chessboard } from "react-chessboard";
 
 import { API_URL, APP_URL } from "@/config";
+import InviteFriendsModal from "@/components/InviteFriendsModal";
 import { io } from "socket.io-client";
 
 import { lobbyReducer, squareReducer } from "./reducers";
@@ -654,6 +655,11 @@ export default function GamePage({ initialLobby }: { initialLobby: Game }) {
                 </div>
               </div>
             </div>
+            {!lobby.endReason && (
+              <div className="mt-1 flex justify-end">
+                <InviteFriendsModal gameCode={initialLobby.code!} label="Freunde einladen" />
+              </div>
+            )}
             <div className="h-32 w-full overflow-y-scroll" ref={moveListRef}>
               <table className="table-compact table w-full">
                 <tbody>{getMoveListHtml()}</tbody>