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>
2026-06-27 15:17:07 -07:00
parent fc3752bbe9
commit e26961d526
5 changed files with 223 additions and 60 deletions
@@ -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>
+  );
+}