From 1c491866ba8a91d77ed93b861894bfba10848fb7 Mon Sep 17 00:00:00 2001
From: Kartikeya <176560021+karti-ai@users.noreply.github.com>
Date: Sat, 27 Jun 2026 23:13:17 -0700
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20collapse=20pod=20join=20into?=
 =?UTF-8?q?=20a=20single=20name=E2=86=92Join=20action?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the confusing Join / Add-and-join / +Add trio on PodCard with one flow: type your name, hit Join → added to the roster (deduped server-side) and connected in one step. Removes the join-as-members[0] impersonation footgun where a second person could kick the first.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/components/PodCard.tsx | 45 +++++++----------------------
 1 file changed, 10 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/PodCard.tsx b/frontend/src/components/PodCard.tsx
index a609691..8cb7783 100644
--- a/frontend/src/components/PodCard.tsx
+++ b/frontend/src/components/PodCard.tsx
@@ -2,7 +2,6 @@ import { useState } from 'react';
 import {
   BrainCircuitIcon,
   MoreHorizontalIcon,
-  PlusIcon,
   Trash2Icon,
   UserRoundIcon,
   VideoIcon,
@@ -16,7 +15,6 @@ import {
   CardAction,
   CardContent,
   CardDescription,
-  CardFooter,
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
@@ -43,9 +41,9 @@ export function PodCard({
   pod,
   busy,
   presence,
-  onJoin,
+  onJoin: _onJoin,
   onAddAndJoin,
-  onAddMember,
+  onAddMember: _onAddMember,
   onRemoveMember: _onRemoveMember,
   onUpdate,
   onDelete,
@@ -72,7 +70,6 @@ export function PodCard({
 
   const inRoom = (name: string) => presence.some((p) => p.toLowerCase() === name.toLowerCase());
   const active = presence.length > 0;
-  const primaryMember = pod.members[0] ?? '';
 
   function saveEdit() {
     onUpdate(pod.id, {
@@ -83,11 +80,12 @@ export function PodCard({
     setEditing(false);
   }
 
-  function submitMember(join: boolean) {
+  // One action: enter your name, hit Join → added to the roster (deduped
+  // server-side) and connected to the room in a single step.
+  function join() {
     const name = newMember.trim();
     if (!name) return;
-    if (join) onAddAndJoin(pod, name);
-    else onAddMember(pod.id, name);
+    onAddAndJoin(pod, name);
     setNewMember('');
   }
 
@@ -165,39 +163,16 @@ export function PodCard({
                 value={newMember}
                 onChange={(e) => setNewMember(e.target.value)}
                 onKeyDown={(e) => {
-                  if (e.key === 'Enter') submitMember(true);
+                  if (e.key === 'Enter') join();
                 }}
               />
-              <Button
-                variant="outline"
-                size="icon"
-                onClick={() => submitMember(false)}
-                disabled={busy || !newMember.trim()}
-              >
-                <PlusIcon />
-                <span className="sr-only">Add member</span>
+              <Button className="min-w-24" onClick={join} disabled={busy || !newMember.trim()}>
+                <VideoIcon data-icon="inline-start" />
+                Join
               </Button>
             </div>
           </div>
         </CardContent>
-
-        <CardFooter className="justify-between gap-2">
-          <Button
-            variant="outline"
-            onClick={() => primaryMember && onJoin(pod, primaryMember)}
-            disabled={busy || !primaryMember}
-          >
-            <VideoIcon data-icon="inline-start" />
-            Join
-          </Button>
-          <Button
-            className="min-w-28"
-            onClick={() => submitMember(true)}
-            disabled={busy || !newMember.trim()}
-          >
-            Add and join
-          </Button>
-        </CardFooter>
       </Card>
 
       <Dialog open={editing} onOpenChange={setEditing}>