fix(frontend): collapse pod join into a single name→Join action

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>
This commit is contained in:
Kartikeya
2026-06-27 23:13:17 -07:00
parent 562bc1979a
commit 1c491866ba
+10 -35
View File
@@ -2,7 +2,6 @@ import { useState } from 'react';
import { import {
BrainCircuitIcon, BrainCircuitIcon,
MoreHorizontalIcon, MoreHorizontalIcon,
PlusIcon,
Trash2Icon, Trash2Icon,
UserRoundIcon, UserRoundIcon,
VideoIcon, VideoIcon,
@@ -16,7 +15,6 @@ import {
CardAction, CardAction,
CardContent, CardContent,
CardDescription, CardDescription,
CardFooter,
CardHeader, CardHeader,
CardTitle, CardTitle,
} from '@/components/ui/card'; } from '@/components/ui/card';
@@ -43,9 +41,9 @@ export function PodCard({
pod, pod,
busy, busy,
presence, presence,
onJoin, onJoin: _onJoin,
onAddAndJoin, onAddAndJoin,
onAddMember, onAddMember: _onAddMember,
onRemoveMember: _onRemoveMember, onRemoveMember: _onRemoveMember,
onUpdate, onUpdate,
onDelete, onDelete,
@@ -72,7 +70,6 @@ export function PodCard({
const inRoom = (name: string) => presence.some((p) => p.toLowerCase() === name.toLowerCase()); const inRoom = (name: string) => presence.some((p) => p.toLowerCase() === name.toLowerCase());
const active = presence.length > 0; const active = presence.length > 0;
const primaryMember = pod.members[0] ?? '';
function saveEdit() { function saveEdit() {
onUpdate(pod.id, { onUpdate(pod.id, {
@@ -83,11 +80,12 @@ export function PodCard({
setEditing(false); 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(); const name = newMember.trim();
if (!name) return; if (!name) return;
if (join) onAddAndJoin(pod, name); onAddAndJoin(pod, name);
else onAddMember(pod.id, name);
setNewMember(''); setNewMember('');
} }
@@ -165,39 +163,16 @@ export function PodCard({
value={newMember} value={newMember}
onChange={(e) => setNewMember(e.target.value)} onChange={(e) => setNewMember(e.target.value)}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter') submitMember(true); if (e.key === 'Enter') join();
}} }}
/> />
<Button <Button className="min-w-24" onClick={join} disabled={busy || !newMember.trim()}>
variant="outline" <VideoIcon data-icon="inline-start" />
size="icon" Join
onClick={() => submitMember(false)}
disabled={busy || !newMember.trim()}
>
<PlusIcon />
<span className="sr-only">Add member</span>
</Button> </Button>
</div> </div>
</div> </div>
</CardContent> </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> </Card>
<Dialog open={editing} onOpenChange={setEditing}> <Dialog open={editing} onOpenChange={setEditing}>