@tribe-nest/forge 3.42.1 → 3.48.0

package/src/ui/media/panels/CallSidePanel.tsx

@@ -0,0 +1,152 @@
+import { X } from "lucide-react";
+import type { RaisedHand } from "@tribe-nest/media-client";
+
+import type { ForgeT } from "../../../i18n";
+import type { CallStageChat } from "../callChat";
+import type { CallTile } from "../callState";
+import type { StageTokens } from "../stage/stageTheme";
+import { CallChatPanel } from "./CallChatPanel";
+import { CallParticipantsPanel } from "./CallParticipantsPanel";
+
+export type SidePanelTab = "chat" | "people";
+
+/**
+ * The right rail: one width, two tabs, the Zoom-familiar shape. Tabs rather
+ * than stacked panels because the rail's width is the stage's loss, and two
+ * rails would take a third of a laptop screen.
+ */
+export function CallSidePanel({
+  tab,
+  onTab,
+  onClose,
+  tokens,
+  t,
+  chat,
+  tiles,
+  hands,
+  isHost,
+  myIdentity,
+  onLowerHand,
+  onLowerAll,
+  unread,
+  fill = false,
+}: {
+  tab: SidePanelTab;
+  onTab: (tab: SidePanelTab) => void;
+  onClose: () => void;
+  tokens: StageTokens;
+  t: ForgeT;
+  chat?: CallStageChat;
+  tiles: readonly CallTile[];
+  hands: readonly RaisedHand[];
+  isHost: boolean;
+  myIdentity: string | null;
+  onLowerHand: (identity: string) => void;
+  onLowerAll: () => void;
+  unread: number;
+  /** Fill the parent (a full-screen overlay on a phone) instead of the fixed
+   * docked width. */
+  fill?: boolean;
+}) {
+  const tabButton = (which: SidePanelTab, label: string, badge?: number) => (
+    <button
+      type="button"
+      onClick={() => onTab(which)}
+      aria-pressed={tab === which}
+      style={{
+        flex: 1,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "0.375rem",
+        padding: "0.5rem",
+        border: "none",
+        borderBottom: `2px solid ${tab === which ? tokens.accent : "transparent"}`,
+        backgroundColor: "transparent",
+        color: tab === which ? tokens.stageText : tokens.stageMuted,
+        cursor: "pointer",
+        font: "inherit",
+        fontSize: "0.8125rem",
+        fontWeight: 600,
+      }}
+    >
+      {label}
+      {!!badge && (
+        <span
+          style={{
+            minWidth: 18,
+            height: 18,
+            borderRadius: 9999,
+            backgroundColor: tokens.accent,
+            color: tokens.accentText,
+            fontSize: "0.6875rem",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "0 0.25rem",
+          }}
+        >
+          {badge > 99 ? "99+" : badge}
+        </span>
+      )}
+    </button>
+  );
+
+  return (
+    <aside
+      data-testid="call-side-panel"
+      style={{
+        width: fill ? "100%" : "min(20rem, 85vw)",
+        ...(fill ? { height: "100%" } : {}),
+        display: "flex",
+        flexDirection: "column",
+        minHeight: 0,
+        borderRadius: tokens.cornerRadius,
+        backgroundColor: tokens.stageSurface,
+        border: `1px solid ${tokens.stageBorder}`,
+        color: tokens.stageText,
+        overflow: "hidden",
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", borderBottom: `1px solid ${tokens.stageBorder}` }}>
+        {chat && tabButton("chat", t("forge.call_stage.tab_chat"), tab === "chat" ? 0 : unread)}
+        {tabButton("people", t("forge.call_stage.tab_people"), hands.length)}
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label={t("forge.call_stage.close_panel")}
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 32,
+            height: 32,
+            margin: "0 0.25rem",
+            border: "none",
+            borderRadius: tokens.cornerRadius,
+            backgroundColor: "transparent",
+            color: tokens.stageMuted,
+            cursor: "pointer",
+          }}
+        >
+          <X width={16} height={16} aria-hidden="true" />
+        </button>
+      </div>
+
+      {tab === "chat" && chat ? (
+        <CallChatPanel chat={chat} tokens={tokens} t={t} />
+      ) : (
+        <CallParticipantsPanel
+          tiles={tiles}
+          hands={hands}
+          isHost={isHost}
+          myIdentity={myIdentity}
+          onLowerHand={onLowerHand}
+          onLowerAll={onLowerAll}
+          tokens={tokens}
+          t={t}
+        />
+      )}
+    </aside>
+  );
+}

package/src/ui/media/stage/CallCenterNotice.tsx

@@ -0,0 +1,89 @@
+import { Loader2, PhoneOff, RefreshCw, Users } from "lucide-react";
+
+import type { ForgeT } from "../../../i18n";
+import type { StageNotice } from "../callState";
+import type { StageTokens } from "./stageTheme";
+
+/**
+ * The centre of the stage, when the stage itself is the message.
+ *
+ * Terminal states (ended, failed) and empty ones (joining, waiting,
+ * everyone-left) render HERE, where a person staring at a dead stage actually
+ * looks; the top pill keeps the transient states so live tiles stay visible
+ * behind them. What renders is `stageNotice`'s one decision, so this file
+ * holds no logic worth testing.
+ */
+export function CallCenterNotice({
+  notice,
+  tokens,
+  t,
+  onRetry,
+}: {
+  notice: StageNotice;
+  tokens: StageTokens;
+  t: ForgeT;
+  onRetry: () => void;
+}) {
+  const detail = notice.detailKey ? t(notice.detailKey) : notice.detailText;
+  const busy = notice.kind === "joining";
+  const Icon = notice.kind === "joining" ? Loader2 : notice.kind === "waiting" || notice.kind === "everyone_left" ? Users : PhoneOff;
+
+  return (
+    <div
+      // `alert` only for a failure somebody must not miss. The other kinds
+      // carry NO live region: the top pill already announces the connection
+      // state, and two live regions saying the same thing read twice.
+      {...(notice.kind === "failed" ? { role: "alert" } : {})}
+      data-testid={`stage-notice-${notice.kind}`}
+      style={{
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "0.75rem",
+        textAlign: "center",
+        padding: "1.5rem",
+        color: tokens.stageText,
+        // Terminal states cover what is behind them; the empty states have
+        // nothing behind them to cover.
+        backgroundColor: notice.kind === "ended" || notice.kind === "failed" ? tokens.stageBg : "transparent",
+        borderRadius: tokens.cornerRadius,
+      }}
+    >
+      <Icon
+        width={28}
+        height={28}
+        aria-hidden="true"
+        color={notice.kind === "failed" ? tokens.danger : tokens.stageMuted}
+        style={busy ? { animation: "forge-call-spin 1.2s linear infinite" } : undefined}
+      />
+      <strong style={{ fontSize: "1.05rem" }}>{t(notice.headlineKey)}</strong>
+      {detail && <span style={{ fontSize: "0.875rem", color: tokens.stageMuted, maxWidth: "28rem" }}>{detail}</span>}
+      {notice.canRetry && (
+        <button
+          type="button"
+          onClick={onRetry}
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.375rem",
+            padding: "0.5rem 1rem",
+            borderRadius: tokens.cornerRadius,
+            border: "none",
+            cursor: "pointer",
+            backgroundColor: tokens.accent,
+            color: tokens.accentText,
+            font: "inherit",
+            fontSize: "0.875rem",
+          }}
+        >
+          <RefreshCw width={14} height={14} aria-hidden="true" />
+          {t("forge.call_stage.retry")}
+        </button>
+      )}
+      <style>{`@keyframes forge-call-spin { to { transform: rotate(360deg); } }`}</style>
+    </div>
+  );
+}