added lobby membership dialog case of already being in a lobby

package.json

@@ -58,7 +58,8 @@
     "tailwind-merge": "^3.0.2",
     "tsx": "^4.19.3",
     "tw-animate-css": "^1.2.4",
-    "zod": "^3.24.2"
+    "zod": "^3.24.2",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",

pnpm-lock.yaml

@@ -125,6 +125,9 @@ importers:
       zod:
         specifier: ^3.24.2
         version: 3.24.2
+      zustand:
+        specifier: ^5.0.3
+        version: 5.0.3(@types/react@19.0.12)(react@19.0.0)
     devDependencies:
       '@eslint/eslintrc':
         specifier: ^3.3.1
@@ -3382,6 +3385,24 @@ packages:
   zod@3.24.2:
     resolution: {integrity: sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==}
 
+  zustand@5.0.3:
+    resolution: {integrity: sha512-14fwWQtU3pH4dE0dOpdMiWjddcH+QzKIgk1cl8epwSE7yag43k/AD/m4L6+K7DytAOr9gGBe3/EXj9g7cdostg==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
 snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
@@ -6498,3 +6519,8 @@ snapshots:
   yocto-queue@0.1.0: {}
 
   zod@3.24.2: {}
+
+  zustand@5.0.3(@types/react@19.0.12)(react@19.0.0):
+    optionalDependencies:
+      '@types/react': 19.0.12
+      react: 19.0.0

src/app/(routes)/layout.tsx

@@ -1,16 +1,22 @@
 import React from "react";
 import Navbar from "@/components/navbar";
 import Footer from "@/components/footer";
+import { api } from "@/trpc/server";
+import AppProvider from "../_components/app-provider";
+
+async function Layout({ children }: { children: React.ReactNode }) {
+  const sessionPlayer = await api.player.getBySession();
 
-function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <div className="gradient-bg min-h-screen">
-      <Navbar />
-      <div className="container mb-8 flex size-full min-h-screen flex-col items-center space-y-6">
-        {children}
+    <AppProvider initialSessionPlayer={sessionPlayer}>
+      <div className="gradient-bg min-h-screen">
+        <Navbar />
+        <div className="container mb-8 flex size-full min-h-screen flex-col items-center space-y-6">
+          {children}
+        </div>
+        <Footer />
       </div>
-      <Footer />
-    </div>
+    </AppProvider>
   );
 }
 

src/app/_components/app-provider.tsx

@@ -0,0 +1,22 @@
+"use client";
+import { useSessionPlayerStore } from "@/lib/store/current-player-store";
+import type { Player } from "@/server/db/schema";
+import React from "react";
+
+function AppProvider({
+  initialSessionPlayer,
+  children,
+}: {
+  initialSessionPlayer?: Player | null;
+  children: React.ReactNode;
+}) {
+  const setSessionPlayer = useSessionPlayerStore(
+    (state) => state.setSessionPlayer,
+  );
+  React.useEffect(() => {
+    setSessionPlayer(initialSessionPlayer);
+  }, [initialSessionPlayer]);
+  return children;
+}
+
+export default AppProvider;

src/app/_components/lobby/lobby-form.tsx

@@ -37,7 +37,7 @@ function LobbyForm({
   const form = useForm<z.infer<typeof lobbyPatchSchema>>({
     resolver: zodResolver(lobbyPatchSchema),
     defaultValues: {
-      name: server_lobby?.name ?? "",
+      name: server_lobby?.name ?? "Random Name",
       maxPlayers: server_lobby?.maxPlayers ?? 2,
     },
   });
@@ -107,7 +107,10 @@ function LobbyForm({
         <div className="flex items-center justify-end">
           <Button
             type="submit"
-            disabled={loading || !form.formState.isDirty}
+            disabled={
+              loading ||
+              (Boolean(server_lobby?.id?.length) && !form.formState.isDirty)
+            }
             className="ml-auto"
           >
             {server_lobby?.id?.length ? "Update" : "Create"} Lobby

src/app/_components/lobby/lobby-membership-dialog.tsx

@@ -26,19 +26,39 @@ function LobbyMembershipDialog({
   join: boolean;
 }) {
   const [loading, setLoading] = React.useState(false);
-  const membership = api.lobby.membership.useMutation();
   const labelText = join ? "join" : "leave";
   const router = useRouter();
+  const membership = api.lobby.membership.useMutation({
+    onSuccess(data) {
+      if (data?.success) {
+        toast.success(`Successfully ${labelText} the lobby.`);
+        if (join) router.push(appRoutes.currentlobby);
+        else router.push(appRoutes.lobby(lobbyId));
+        router.refresh();
+      } else {
+        if (data?.knownError) {
+          toast.message(data.error, {
+            action: {
+              label: "Jump to Lobby",
+              onClick: () => router.push(appRoutes.currentlobby),
+            },
+          });
+        }
+      }
+    },
+  });
   const handleConfirm = async () => {
     setLoading(true);
-    const result = await membership.mutateAsync({ lobbyId, join });
-    if (result) {
-      toast.success(`Successfully ${labelText} the lobby.`);
-      if (join) router.push(appRoutes.currentlobby);
-      else router.push(appRoutes.lobby(lobbyId));
+    try {
+      await membership.mutateAsync({
+        lobbyId,
+        join,
+      });
+    } catch (e) {
+      // Catching any errors here will prevent them from reaching Next.js's error boundary
+      console.error("Handled mutation error:", e);
+    }
 
-      router.refresh();
-    } else toast.error("Something went wrong");
     setLoading(false);
   };
 

src/app/_components/lobby/lobby-page.tsx

@@ -1,90 +1,104 @@
 "use client";
 
 import React from "react";
-import type { Lobby, Player } from "@/server/db/schema";
-import LobbyPlayerCard from "@/app/_components/lobby/lobby-player/lobby-player-card";
+import type { Lobby } from "@/server/db/schema";
+import LobbyPlayerCard from "@/app/_components/lobby/lobby-player/player-card";
 import LobbyMembershipDialog from "@/app/_components/lobby/lobby-membership-dialog";
 import { Badge } from "@/components/ui/badge";
 import CopyToClip from "@/components/copy-to-clip";
 import { appRoutes } from "@/config/app.routes";
 import LobbySettingsDialog from "./lobby-settings-dialog";
-import { useRealtimeLobby } from "@/hooks/use-lobby";
 import { getBaseUrl } from "@/lib/utils";
 import GameSelector from "./game-selector";
+import LobbyProvider from "./lobby-provider";
+import { useSessionPlayerStore } from "@/lib/store/current-player-store";
+import { useLobbyStore } from "@/lib/store/lobby-store";
+import { Share2, UserPlus } from "lucide-react";
 
-function LobbyPage({
-  sessionPlayer,
-  initialLobby,
-}: {
-  sessionPlayer?: Player | null;
-  initialLobby: Lobby;
-}) {
-  const { members, lobby } = useRealtimeLobby({ initialLobby, sessionPlayer });
+function LobbyPage({ initialLobby }: { initialLobby: Lobby }) {
+  const sessionPlayer = useSessionPlayerStore((state) => state.sessionPlayer);
+  const lobby = useLobbyStore((state) => state.lobby);
+  const members = useLobbyStore((state) => state.members);
+  const isJoined = sessionPlayer
+    ? members.find((m) => m.playerId === sessionPlayer.id)
+    : null;
 
-  const isJoined = members.find((m) => m.playerId === sessionPlayer?.id);
   const isAdmin = isJoined?.role === "admin";
 
   return (
-    <div className="grid max-w-4xl grid-cols-3 grid-rows-2 gap-4">
-      <div className="container-bg col-span-2 w-full space-y-4 p-6">
-        <div className="flex items-center gap-2">
-          {isJoined && (
+    <LobbyProvider initialLobby={initialLobby}>
+      <div className="grid max-w-4xl grid-cols-3 grid-rows-2 gap-4">
+        <div className="container-bg col-span-2 w-full space-y-4 p-6">
+          <div className="flex items-center gap-2">
             <CopyToClip
               target="invite link"
               text={getBaseUrl() + appRoutes.lobby(lobby.id)}
               buttonProps={{ variant: "outline" }}
             >
-              Invite Players
+              {isJoined ? (
+                <>
+                  <UserPlus className="size-4" />
+                  <span>Invite Players</span>
+                </>
+              ) : (
+                <>
+                  <Share2 className="size-4" />
+                  <span>Share Lobby</span>
+                </>
+              )}
             </CopyToClip>
-          )}
-          <div className="ml-auto">
-            {sessionPlayer && (
-              <LobbyMembershipDialog lobbyId={lobby.id} join={!isJoined} />
-            )}
-          </div>
-        </div>
-        <div className="flex w-full items-center justify-between text-nowrap">
-          <h1 className="w-full overflow-hidden text-2xl font-bold text-ellipsis">
-            {lobby.name}
-          </h1>
-          {isAdmin && <LobbySettingsDialog lobby={lobby} />}
-        </div>
-        <div className="border-border/20 flex items-center justify-between border-b pb-4">
-          <h2 className="text-sm font-medium">
-            Players ({members?.length || 0}/{lobby.maxPlayers || 8})
-          </h2>
-          <span className="text-xs">
-            {members?.length === (lobby.maxPlayers || 8)
-              ? "Lobby Full"
-              : "Waiting..."}
-          </span>
-        </div>
 
-        <ul className="space-y-2">
-          {members?.map((member, idx) => (
-            <li key={idx}>
-              <LobbyPlayerCard
-                lobbyId={lobby.id}
-                highlight={member?.player?.id === sessionPlayer?.id}
-                player={member?.player!}
-                className="relative"
-                showOptions={isAdmin && member?.playerId !== sessionPlayer?.id}
-              >
-                {member?.role === "admin" && (
-                  <Badge className="absolute -top-2 right-2 z-20 p-px px-2 text-white">
-                    Admin
-                  </Badge>
-                )}
-              </LobbyPlayerCard>
-            </li>
-          ))}
-        </ul>
+            <div className="ml-auto">
+              {sessionPlayer && (
+                <LobbyMembershipDialog lobbyId={lobby.id} join={!isJoined} />
+              )}
+            </div>
+          </div>
+          <div className="flex w-full items-center justify-between text-nowrap">
+            <h1 className="w-full overflow-hidden text-2xl font-bold text-ellipsis">
+              {lobby.name}
+            </h1>
+            {isAdmin && <LobbySettingsDialog lobby={lobby} />}
+          </div>
+          <div className="border-border/20 flex items-center justify-between border-b pb-4">
+            <h2 className="text-sm font-medium">
+              Players ({members?.length || 0}/{lobby.maxPlayers || 8})
+            </h2>
+            <span className="text-xs">
+              {members?.length === (lobby.maxPlayers || 8)
+                ? "Lobby Full"
+                : "Waiting..."}
+            </span>
+          </div>
+
+          <ul className="space-y-2">
+            {members?.map((member, idx) => (
+              <li key={idx}>
+                <LobbyPlayerCard
+                  lobbyId={lobby.id}
+                  highlight={member?.player?.id === sessionPlayer?.id}
+                  player={member?.player!}
+                  className="relative"
+                  showOptions={
+                    isAdmin && member?.playerId !== sessionPlayer?.id
+                  }
+                >
+                  {member?.role === "admin" && (
+                    <Badge className="absolute -top-2 right-2 z-20 p-px px-2 text-white">
+                      Admin
+                    </Badge>
+                  )}
+                </LobbyPlayerCard>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="container-bg col-span-1 size-full"></div>
+        <div className="col-span-3">
+          <GameSelector />
+        </div>
       </div>
-      <div className="container-bg col-span-1 size-full"></div>
-      <div className="col-span-3">
-        <GameSelector />
-      </div>
-    </div>
+    </LobbyProvider>
   );
 }
 

src/app/_components/lobby/lobby-player/player-card.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import Avatar from "@/components/avatar";
 import { cn } from "@/lib/utils";
 import type { Player } from "@/server/db/schema";
-import LobbyPlayerOptions from "./lobby-player-options";
+import LobbyPlayerOptions from "./player-options";
 
 function LobbyPlayerCard({
   lobbyId,

src/app/_components/lobby/lobby-player/player-options.tsx

@@ -23,7 +23,7 @@ import type { Player } from "@/server/db/schema";
 import Link from "next/link";
 import { appRoutes } from "@/config/app.routes";
 import { cn } from "@/lib/utils";
-import KickPlayerDialog from "./kick-player-dialog";
+import KickPlayerDialog from "./player-kick-dialog";
 import { api } from "@/trpc/react";
 function LobbyPlayerOptions({
   player,

src/app/_components/lobby/lobby-provider.tsx

@@ -0,0 +1,57 @@
+import { appRoutes } from "@/config/app.routes";
+import { useSessionPlayerStore } from "@/lib/store/current-player-store";
+import { useLobbyStore } from "@/lib/store/lobby-store";
+import type { Lobby, LobbyMember } from "@/server/db/schema";
+import type { LobbyMemberLeaveEventData } from "@/server/redis/events";
+import { api } from "@/trpc/react";
+import { useRouter } from "next/navigation";
+import React from "react";
+
+function LobbyProvider({
+  children,
+  initialLobby,
+}: {
+  children: React.ReactNode;
+  initialLobby: Lobby;
+}) {
+  const sessionPlayer = useSessionPlayerStore((state) => state.sessionPlayer);
+  const lobby = useLobbyStore((state) => state.lobby);
+  const updateLobby = useLobbyStore((state) => state.updateLobby);
+  const resetLobby = useLobbyStore((state) => state.resetLobby);
+  const setMembers = useLobbyStore((state) => state.setMembers);
+  const addMember = useLobbyStore((state) => state.addMember);
+  const removeMember = useLobbyStore((state) => state.removeMember);
+
+  const router = useRouter();
+  api.lobby.onMemberUpdate.useSubscription(undefined, {
+    onData({ data: _data }) {
+      const joined = _data.joined;
+      if (joined) {
+        const data = _data.membership as LobbyMember;
+        addMember(data);
+      } else {
+        const data = _data.membership as LobbyMemberLeaveEventData;
+        removeMember(data.playerId);
+        if (data?.kicked && data?.playerId === sessionPlayer?.id) {
+          router.push(appRoutes.lobby(lobby.id));
+          router.refresh();
+        }
+      }
+    },
+  });
+
+  api.lobby.onUpdate.useSubscription(undefined, {
+    onData({ data }) {
+      if (!data?.lobby) return;
+      updateLobby(data.lobby);
+    },
+  });
+  React.useEffect(() => {
+    resetLobby(initialLobby);
+    setMembers(initialLobby?.members ?? []);
+  }, [initialLobby]);
+
+  return children;
+}
+
+export default LobbyProvider;

src/hooks/use-lobby.ts

@@ -1,50 +0,0 @@
-"use client";
-
-import { appRoutes } from "@/config/app.routes";
-import type { Lobby, LobbyMember, Player } from "@/server/db/schema";
-import type { LobbyMemberLeaveEventData } from "@/server/redis/events";
-import { api } from "@/trpc/react";
-import { useRouter } from "next/navigation";
-import React from "react";
-
-export function useRealtimeLobby({
-  initialLobby,
-  sessionPlayer,
-}: {
-  initialLobby: Lobby;
-  sessionPlayer?: Player | null;
-}) {
-  const [lobby, setLobby] = React.useState(initialLobby);
-  const [members, setMembers] = React.useState<Array<LobbyMember>>(
-    initialLobby?.members ?? [],
-  );
-  const router = useRouter();
-  api.lobby.onMemberUpdate.useSubscription(undefined, {
-    onData({ data: _data }) {
-      const joined = _data.joined;
-      if (joined) {
-        const data = _data.membership as LobbyMember;
-
-        setMembers((prev) => {
-          if (prev.find((m) => m.playerId === data.playerId)) return prev;
-          return [...prev, data];
-        });
-      } else {
-        const data = _data.membership as LobbyMemberLeaveEventData;
-        setMembers((prev) => prev.filter((m) => m.playerId !== data.playerId));
-        if (data?.kicked && data?.playerId === sessionPlayer?.id) {
-          router.push(appRoutes.lobby(lobby.id));
-          router.refresh();
-        }
-      }
-    },
-  });
-
-  api.lobby.onUpdate.useSubscription(undefined, {
-    onData({ data }) {
-      if (!data?.lobby) return;
-      setLobby((prev) => ({ ...data.lobby, members: prev.members }));
-    },
-  });
-  return { lobby, members };
-}

src/lib/store/current-player-store.ts

@@ -0,0 +1,12 @@
+import { create } from "zustand";
+import type { Player } from "@/server/db/schema";
+
+type SessionPlayerStore = {
+  sessionPlayer?: Player | null;
+  setSessionPlayer: (player?: Player | null) => void;
+};
+
+export const useSessionPlayerStore = create<SessionPlayerStore>((set) => ({
+  sessionPlayer: undefined,
+  setSessionPlayer: (player) => set({ sessionPlayer: player }),
+}));

src/lib/store/lobby-store.ts

@@ -0,0 +1,37 @@
+import { create } from "zustand";
+import type { Lobby, LobbyMember } from "@/server/db/schema";
+
+type LobbyStore = {
+  lobby: Lobby;
+  updateLobby: (lobby: Lobby) => void;
+  resetLobby: (lobby?: Lobby) => void;
+  members: Array<LobbyMember>;
+  setMembers: (members: Array<LobbyMember>) => void;
+  findMember: (playerId: string) => LobbyMember | null | undefined;
+  addMember: (member: LobbyMember) => void;
+  removeMember: (playerId: string, kicked?: boolean) => void;
+  selectedGame: number;
+  setSelectedGame: (gameId: number) => void;
+};
+
+export const useLobbyStore = create<LobbyStore>((set, get) => ({
+  lobby: {} as Lobby,
+  members: [],
+  selectedGame: 0,
+  setSelectedGame: (gameId) => set({ selectedGame: gameId }),
+  updateLobby: (lobby) =>
+    set((state) => ({ ...state, ...lobby, members: state.members })),
+  setMembers: (members) => set({ members }),
+  resetLobby: (lobby) => set({ lobby: lobby ?? ({} as Lobby) }),
+  findMember: (playerId) => get().members.find((m) => m.playerId === playerId),
+  addMember: (member) =>
+    set((state) => {
+      if (state.members.find((m) => m.playerId === member.playerId))
+        return state;
+      return { members: [...state.members, member] };
+    }),
+  removeMember: (playerId) =>
+    set((state) => ({
+      members: state.members.filter((m) => m.playerId !== playerId),
+    })),
+}));

src/server/api/routers/lobby.ts

@@ -16,7 +16,7 @@ import {
   redisAsyncIterator,
   redisPublish,
 } from "@/server/redis/sse-redis";
-import { tracked } from "@trpc/server";
+import { tracked, TRPCError } from "@trpc/server";
 import { trcpSubscriptionInput } from "@/lib/validations/trcp";
 import type { LobbyMemberLeaveEventData } from "@/server/redis/events";
 
@@ -140,22 +140,43 @@ export const lobbyRouter = createTRPCRouter({
     )
     .mutation(async ({ ctx, input }) => {
       if (input.join) {
-        const [member] = await ctx.db
-          .insert(lobbyMembers)
-          .values({
-            lobbyId: input.lobbyId,
-            playerId: ctx.session.user.id,
-            isReady: false,
-            role: "player",
-          })
-          .returning();
-        const player = member
-          ? await ctx.db.query.players.findFirst({
-              where: eq(players.id, member.playerId),
+        try {
+          const [member] = await ctx.db
+            .insert(lobbyMembers)
+            .values({
+              lobbyId: input.lobbyId,
+              playerId: ctx.session.user.id,
+              isReady: false,
+              role: "player",
             })
-          : undefined;
-        if (member) redisPublish("lobby:member:join", { ...member, player });
-        return member;
+            .returning();
+          const player = member
+            ? await ctx.db.query.players.findFirst({
+                where: eq(players.id, member.playerId),
+              })
+            : undefined;
+          if (member) redisPublish("lobby:member:join", { ...member, player });
+          return { success: true, member };
+        } catch (e: unknown) {
+          if (e instanceof Error) {
+            if (
+              e.message.includes(
+                "duplicate key value violates unique constraint",
+              )
+            )
+              return {
+                knownError: true,
+                succes: false,
+                error: "You can only be in one lobby at a time.",
+              };
+          } else {
+            return {
+              knownError: true,
+              succes: false,
+              error: "Error joining lobby",
+            };
+          }
+        }
       } else {
         const [member] = await ctx.db
           .delete(lobbyMembers)
@@ -168,7 +189,7 @@ export const lobbyRouter = createTRPCRouter({
           .returning();
         if (member)
           redisPublish("lobby:member:leave", { playerId: member.playerId });
-        return member;
+        return { success: true, member };
       }
     }),
   // admin mutaions

src/server/api/routers/player.ts

@@ -1,13 +1,13 @@
 import { eq } from "drizzle-orm";
 import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";
-import { players } from "@/server/db/schema";
+import { players, type Player } from "@/server/db/schema";
 
 export const playerRouter = createTRPCRouter({
   getBySession: publicProcedure.query(async ({ ctx }) => {
     return ctx?.session?.user
-      ? await ctx.db.query.players.findFirst({
+      ? ((await ctx.db.query.players.findFirst({
           where: eq(players.id, ctx.session.user.id),
-        })
+        })) as Player)
       : null;
   }),
 });