Kartikeya
5a03ad4d6b
Pods are persisted in MongoDB and CRUD'd via /api/pods (list/create/get/ update/delete + add/remove member). Shared Pod reshaped to a persisted entity (members: string[], description, timestamps) + PodInput. Backend seeds Demo/ Frontend/Backend Pods on first run (Squad -> Pod rename). Frontend replaces hardcoded teams with live data: PodCard (member chips add/remove, inline edit, delete, join) + CreatePodForm; App fetches+mutates via API. Removes teams.ts/ TeamCard; gitignores test artifacts. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
85 lines
3.0 KiB
TypeScript
85 lines
3.0 KiB
TypeScript
import type { Pod } from '@podman/shared';
|
||
import { Avatar } from './Avatar.js';
|
||
|
||
export function PodView({
|
||
team,
|
||
me,
|
||
devMode,
|
||
onLeave,
|
||
}: {
|
||
team: Pod;
|
||
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>
|
||
);
|
||
}
|