feat(frontend): team-browsing GUI with pod view
Replace the single join form with a richer UI: team cards (members as avatars, repo, description), a member picker, and a post-join PodView showing pod members (you highlighted) plus a PodMan panel with a slot for live intervention cards. Adds Avatar/TeamCard/PodView components. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Kartikeya
@@ -0,0 +1,36 @@
|
||||
function colorFor(name: string): string {
|
||||
let h = 0;
|
||||
for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) % 360;
|
||||
return `hsl(${h} 55% 42%)`;
|
||||
}
|
||||
|
||||
function initials(name: string): string {
|
||||
return name
|
||||
.split(/\s+/)
|
||||
.map((w) => w[0] ?? '')
|
||||
.join('')
|
||||
.slice(0, 2)
|
||||
.toUpperCase();
|
||||
}
|
||||
|
||||
export function Avatar({
|
||||
name,
|
||||
size = 36,
|
||||
ring = false,
|
||||
}: {
|
||||
name: string;
|
||||
size?: number;
|
||||
ring?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={`flex shrink-0 items-center justify-center rounded-full font-semibold text-white ${
|
||||
ring ? 'ring-2 ring-emerald-400 ring-offset-2 ring-offset-slate-950' : ''
|
||||
}`}
|
||||
style={{ width: size, height: size, background: colorFor(name), fontSize: size * 0.38 }}
|
||||
title={name}
|
||||
>
|
||||
{initials(name)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import type { DemoTeam } from '../lib/teams.js';
|
||||
import { Avatar } from './Avatar.js';
|
||||
|
||||
export function PodView({
|
||||
team,
|
||||
me,
|
||||
devMode,
|
||||
onLeave,
|
||||
}: {
|
||||
team: DemoTeam;
|
||||
me: string;
|
||||
devMode: boolean;
|
||||
onLeave: () => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<header className="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-slate-100">{team.name}</h2>
|
||||
<p className="text-xs text-slate-500">{team.repo}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onLeave}
|
||||
className="rounded-md border border-slate-700 px-3 py-1.5 text-sm text-slate-300 hover:bg-slate-800"
|
||||
>
|
||||
Leave
|
||||
</button>
|
||||
</header>
|
||||
|
||||
{devMode && (
|
||||
<p className="rounded-md border border-amber-700/50 bg-amber-950/40 px-3 py-2 text-xs text-amber-300">
|
||||
DEV MODE — LiveKit not configured / insecure context, so screen capture is off.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-[1fr_300px]">
|
||||
{/* Pod members */}
|
||||
<section>
|
||||
<h3 className="mb-3 text-sm font-medium text-slate-400">In this pod</h3>
|
||||
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
|
||||
{team.members.map((m) => {
|
||||
const isMe = m === me;
|
||||
return (
|
||||
<div
|
||||
key={m}
|
||||
className={`flex items-center gap-3 rounded-lg border p-3 ${
|
||||
isMe ? 'border-emerald-500/50 bg-emerald-950/20' : 'border-slate-800 bg-slate-900/40'
|
||||
}`}
|
||||
>
|
||||
<Avatar name={m} size={36} ring={isMe} />
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm font-medium text-slate-200">{m}</p>
|
||||
<p className="text-xs text-slate-500">{isMe ? 'you' : 'in pod'}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* PodMan panel */}
|
||||
<aside className="rounded-xl border border-slate-800 bg-slate-900/40 p-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg">🛰️</span>
|
||||
<h3 className="font-semibold text-slate-100">PodMan</h3>
|
||||
<span className="ml-auto flex items-center gap-1 text-xs text-emerald-400">
|
||||
<span className="inline-block h-2 w-2 rounded-full bg-emerald-400" /> watching
|
||||
</span>
|
||||
</div>
|
||||
<p className="mt-2 text-xs text-slate-500">
|
||||
Watching {team.members.length} screen{team.members.length === 1 ? '' : 's'} for collisions
|
||||
before push.
|
||||
</p>
|
||||
<div className="mt-4 border-t border-slate-800 pt-4">
|
||||
<h4 className="mb-2 text-xs font-medium text-slate-400">Interventions</h4>
|
||||
<div className="rounded-lg border border-dashed border-slate-800 px-3 py-6 text-center text-xs text-slate-600">
|
||||
No collisions detected.
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import type { DemoTeam } from '../lib/teams.js';
|
||||
import { Avatar } from './Avatar.js';
|
||||
|
||||
export function TeamCard({
|
||||
team,
|
||||
selected,
|
||||
onSelect,
|
||||
}: {
|
||||
team: DemoTeam;
|
||||
selected: boolean;
|
||||
onSelect: (id: string) => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
onClick={() => onSelect(team.id)}
|
||||
className={`flex w-full flex-col gap-3 rounded-xl border p-4 text-left transition ${
|
||||
selected
|
||||
? 'border-emerald-500 bg-emerald-950/30 ring-1 ring-emerald-500/40'
|
||||
: 'border-slate-700 bg-slate-900/50 hover:border-slate-500 hover:bg-slate-900'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-semibold text-slate-100">{team.name}</h3>
|
||||
<span className="rounded-full bg-slate-800 px-2 py-0.5 text-xs text-slate-400">
|
||||
{team.members.length} members
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500">{team.repo}</p>
|
||||
<p className="text-sm text-slate-300">{team.description}</p>
|
||||
<div className="flex -space-x-2 pt-1">
|
||||
{team.members.map((m) => (
|
||||
<Avatar key={m} name={m} size={28} />
|
||||
))}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user