fix(session-sharing): show participant presence in member terminals (#1504)

plugins/session-sharing/src/frontend/ParticipantsOverlay.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+import {
+  ParticipantsBadge,
+  type SessionParticipantInfo,
+} from "./SharedSessionView";
+
+interface ParticipantsOverlayProps {
+  subscribe: (
+    listener: (message: { type: string; [key: string]: unknown }) => void,
+  ) => () => void;
+}
+
+export function ParticipantsOverlay({ subscribe }: ParticipantsOverlayProps) {
+  const { t } = useTranslation();
+  const [participants, setParticipants] = useState<SessionParticipantInfo[]>(
+    [],
+  );
+
+  useEffect(
+    () =>
+      subscribe((message) => {
+        if (
+          message.type === "participants" &&
+          Array.isArray(message.participants)
+        ) {
+          setParticipants(message.participants as SessionParticipantInfo[]);
+        } else if (message.type === "session_closed") {
+          setParticipants([]);
+        }
+      }),
+    [subscribe],
+  );
+
+  return (
+    <ParticipantsBadge
+      participants={participants}
+      ownerLabel={t("sessionSharing.guestView.ownerLabel")}
+    />
+  );
+}

plugins/session-sharing/src/frontend/SharedSessionView.tsx

@@ -33,7 +33,7 @@ export interface SessionParticipantInfo {
   label: string | null;
 }
 
-function ParticipantsBadge({
+export function ParticipantsBadge({
   participants,
   ownerLabel,
 }: {

plugins/session-sharing/src/frontend/index.tsx

@@ -17,6 +17,7 @@ import CollabGuestView from "./CollabGuestView";
 import { CollabPanel } from "./CollabPanel";
 import { CollabRoomTab } from "./CollabRoomTab";
 import SharedSessionView from "./SharedSessionView";
+import { ParticipantsOverlay } from "./ParticipantsOverlay";
 import {
   ShareDialogHost,
   closeShareDialog,
@@ -224,6 +225,15 @@ export function activate(app: TermixApp): void {
     },
   });
 
+  app.registerSlotContribution("terminal.overlay", {
+    actionId: "session-sharing.participants",
+    titleKey: "collab.members",
+    kind: "component",
+    component: ParticipantsOverlay as unknown as ComponentType<
+      Record<string, unknown>
+    >,
+  });
+
   app.registerSlotContribution("shell.overlay", {
     actionId: "session-sharing.shareDialog",
     titleKey: "sessionSharing.shareButton",