+
diff --git a/apps/desktop/src/components/Avatar.tsx b/apps/desktop/src/components/Avatar.tsx
new file mode 100644
index 0000000..d005f28
--- /dev/null
+++ b/apps/desktop/src/components/Avatar.tsx
@@ -0,0 +1,45 @@
+// Reusable avatar that prefers an uploaded image and falls back to a coloured
+// letter circle. Use this everywhere the app needs to render a profile.
+
+interface Props {
+ url?: string | null | undefined;
+ displayName?: string | null | undefined;
+ className?: string;
+ // Background gradient classes used when no image is set. Defaults to a
+ // brand-tinted fallback; callers can override (e.g. to colour-by-id).
+ fallbackClass?: string;
+ alt?: string;
+}
+
+export function Avatar({
+ url,
+ displayName,
+ className = 'h-10 w-10',
+ fallbackClass = 'bg-accent/20 text-accent',
+ alt,
+}: Props) {
+ if (url) {
+ return (
+ 
+ );
+ }
+ const letter = (displayName ?? '?').trim().charAt(0).toUpperCase() || '?';
+ return (
+ = {
+ // Tailwind classes tuned per spec: violet/amber/rose/teal swatches in both
+ // light and dark modes. Dark pairs invert to keep contrast readable.
+ violet: {
+ bg: 'bg-violet-200 dark:bg-violet-900/60',
+ fg: 'text-violet-800 dark:text-violet-200',
+ },
+ amber: {
+ bg: 'bg-amber-200 dark:bg-amber-900/60',
+ fg: 'text-amber-900 dark:text-amber-200',
+ },
+ rose: {
+ bg: 'bg-rose-200 dark:bg-rose-900/60',
+ fg: 'text-rose-900 dark:text-rose-200',
+ },
+ teal: {
+ bg: 'bg-teal-200 dark:bg-teal-900/60',
+ fg: 'text-teal-900 dark:text-teal-200',
+ },
+};
+
+const COLOR_KEYS: AvatarColorKey[] = ['violet', 'amber', 'rose', 'teal'];
+
+// Stable per-user color from identity string — keeps avatars visually
+// consistent across re-mounts without needing a color field on the profile.
+export function colorKeyFor(id: string): AvatarColorKey {
+ let hash = 0;
+ for (let i = 0; i < id.length; i++) {
+ hash = (hash * 31 + id.charCodeAt(i)) >>> 0;
+ }
+ return COLOR_KEYS[hash % COLOR_KEYS.length]!;
+}
+
+export interface ParticipantTileProps {
+ userId: string;
+ displayName: string;
+ avatarUrl: string | null;
+ me: boolean;
+ muted: boolean;
+ speaking: boolean;
+ sharing: boolean;
+ video: boolean;
+ e2ee: boolean;
+ size?: 'default' | 'small';
+ focused?: boolean;
+ onClick?: () => void;
+ onOpenScreenShare?: () => void;
+}
+
+export function CallParticipantTile(props: ParticipantTileProps) {
+ const {
+ displayName,
+ me,
+ muted,
+ speaking,
+ sharing,
+ video,
+ e2ee,
+ size = 'default',
+ focused = false,
+ onClick,
+ onOpenScreenShare,
+ } = props;
+
+ const small = size === 'small';
+ const borderClass = speaking
+ ? 'border-emerald-500 shadow-[0_0_0_2px_rgba(22,163,74,0.25)] dark:border-emerald-400'
+ : focused
+ ? 'border-accent'
+ : 'border-line hover:border-accent';
+
+ return (
+
+ {letter}
+
+ );
+}
diff --git a/apps/desktop/src/components/CallControls.tsx b/apps/desktop/src/components/CallControls.tsx
new file mode 100644
index 0000000..5139eec
--- /dev/null
+++ b/apps/desktop/src/components/CallControls.tsx
@@ -0,0 +1,170 @@
+import { useTranslation } from 'react-i18next';
+
+import {
+ MicIcon,
+ MicOffIcon,
+ MonitorShareIcon,
+ MonitorStopIcon,
+ PhoneOffIcon,
+ UsersIcon,
+ VideoIcon,
+} from './icons';
+
+interface Props {
+ muted: boolean;
+ sharing: boolean;
+ video: boolean;
+ onToggleMute: () => void;
+ onToggleShare: () => void;
+ onToggleVideo?: () => void;
+ onHangup: () => void;
+ onOpenParticipants?: () => void;
+ /** Compact variant used inside the docked call (36px buttons). */
+ compact?: boolean;
+ /** Glass variant used when controls float on fullscreen cinema mode. */
+ glass?: boolean;
+ /** Disable transient interactions while the call isn't fully connected. */
+ disabledMedia?: boolean;
+}
+
+export function CallControls({
+ muted,
+ sharing,
+ video,
+ onToggleMute,
+ onToggleShare,
+ onToggleVideo,
+ onHangup,
+ onOpenParticipants,
+ compact = false,
+ glass = false,
+ disabledMedia = false,
+}: Props) {
+ const { t } = useTranslation(['app']);
+ const wrapBase = glass
+ ? 'glass-pill flex items-center justify-center gap-2 rounded-[18px] p-2.5'
+ : 'flex items-center justify-center gap-2 border-t border-line bg-surface-3 p-3';
+ const btnSize = compact ? 'h-9 w-9 rounded-[10px]' : 'h-12 w-12 rounded-[14px]';
+ const hangupSize = compact ? 'h-9 w-[54px] rounded-[10px]' : 'h-12 w-[72px] rounded-[14px]';
+ return (
+
+
+ {muted ?
+ {onToggleVideo && (
+
+
+ )}
+
+ {sharing ? (
+
+ {onOpenParticipants && (
+
+
+ )}
+
+
+
+ );
+}
+
+interface CallButtonProps {
+ label: string;
+ onClick: () => void;
+ disabled?: boolean;
+ active?: boolean;
+ activeTone?: 'accent' | 'danger';
+ tone?: 'default' | 'danger';
+ glass?: boolean;
+ className?: string;
+ children: React.ReactNode;
+}
+
+function CallButton({
+ label,
+ onClick,
+ disabled,
+ active,
+ activeTone = 'accent',
+ tone = 'default',
+ glass = false,
+ className = '',
+ children,
+}: CallButtonProps) {
+ const base =
+ 'inline-flex cursor-pointer items-center justify-center border transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 disabled:cursor-not-allowed disabled:opacity-50';
+
+ let toneClass: string;
+ if (tone === 'danger') {
+ toneClass = 'bg-rose-600 text-white border-rose-600 hover:bg-rose-500';
+ } else if (active && activeTone === 'danger') {
+ toneClass = 'bg-rose-600 text-white border-rose-600 hover:bg-rose-500';
+ } else if (active) {
+ toneClass = 'bg-accent text-accent-fg border-accent hover:brightness-110';
+ } else if (glass) {
+ toneClass =
+ 'border-white/15 bg-white/10 text-white hover:bg-white/15';
+ } else {
+ toneClass = 'border-line bg-surface-2 text-fg hover:bg-surface';
+ }
+
+ return (
+
+ );
+}
diff --git a/apps/desktop/src/components/CallParticipantTile.tsx b/apps/desktop/src/components/CallParticipantTile.tsx
new file mode 100644
index 0000000..ea10568
--- /dev/null
+++ b/apps/desktop/src/components/CallParticipantTile.tsx
@@ -0,0 +1,254 @@
+import { CrownIcon, LockIcon, MicOffIcon, MonitorShareIcon } from './icons';
+
+export type AvatarColorKey = 'violet' | 'amber' | 'rose' | 'teal';
+
+const AVATAR_COLORS: Record
+ {sharing ? (
+
+ );
+}
+
+function AudioContent({
+ userId,
+ displayName,
+ avatarUrl,
+ speaking,
+ small,
+}: ParticipantTileProps & { small: boolean }) {
+ const key = colorKeyFor(userId);
+ const colors = AVATAR_COLORS[key];
+ const letter = displayName.trim().charAt(0).toUpperCase() || '?';
+ return (
+
+
+
+ {me &&
+
+ {muted && (
+
+
+
+
+ );
+}
+
+function VideoStub({
+ userId,
+ displayName,
+ avatarUrl,
+ small,
+}: ParticipantTileProps & { small: boolean }) {
+ // Video capture playback is out of scope for this UI iteration — show the
+ // audio-avatar gradient background as a placeholder so the layout is stable
+ // when a participant enables video.
+ const key = colorKeyFor(userId);
+ const colors = AVATAR_COLORS[key];
+ const letter = displayName.trim().charAt(0).toUpperCase() || '?';
+ return (
+
+ {speaking && (
+
+ )}
+ {avatarUrl ? (
+ 
+ ) : (
+
+ {letter}
+
+ )}
+
+
+
+ );
+}
+
+interface ScreenshareStubProps {
+ displayName: string;
+ small: boolean;
+ onOpen?: (() => void) | undefined;
+}
+
+// Fake browser window placeholder — click to open the real
+ {avatarUrl ? (
+
+ ) : (
+ letter
+ )}
+
+