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:
@@ -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}>
|
||||||
|
|||||||
Reference in New Issue
Block a user