From c53d14d91ead361ebc51b7134974d6ccd3a6ee72 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 12 Apr 2025 03:38:58 -0500
Subject: [PATCH 001/242] add groupcall state event

---
 src/types/matrix/room.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/types/matrix/room.ts b/src/types/matrix/room.ts
index 65dc35f4..d41f73c7 100644
--- a/src/types/matrix/room.ts
+++ b/src/types/matrix/room.ts
@@ -30,6 +30,8 @@ export enum StateEvent {
   RoomGuestAccess = 'm.room.guest_access',
   RoomServerAcl = 'm.room.server_acl',
   RoomTombstone = 'm.room.tombstone',
+  GroupCallPrefix = "org.matrix.msc3401.call",
+  GroupCallMemberPrefix = "org.matrix.msc3401.call.member",
 
   SpaceChild = 'm.space.child',
   SpaceParent = 'm.space.parent',

From 7e74fb146233c3a0ea9cd1b80392e461ba35da31 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 12 Apr 2025 03:39:21 -0500
Subject: [PATCH 002/242] docker nginx embedded element-call

---
 docker-nginx.conf | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docker-nginx.conf b/docker-nginx.conf
index a2dbeba0..aea395ae 100644
--- a/docker-nginx.conf
+++ b/docker-nginx.conf
@@ -14,6 +14,8 @@ server {
     rewrite ^/public/(.*)$ /public/$1 break;
     rewrite ^/assets/(.*)$ /assets/$1 break;
 
+    rewrite ^/element-call/dist/(.*)$ /element-call/dist/$1 break;
+
     rewrite ^(.+)$ /index.html break;
   }
 }

From 389fc17e454993da45b9950ec79f9f15d4c0ad76 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 12 Apr 2025 03:39:48 -0500
Subject: [PATCH 003/242] add embedded-element-call and react-sdk-module-api

---
 package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/package.json b/package.json
index b489dc2c..2ea322ee 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
     "@fontsource/inter": "4.5.14",
+    "@matrix-org/react-sdk-module-api": "^2.5.0",
     "@tanstack/react-query": "5.24.1",
     "@tanstack/react-query-devtools": "5.24.1",
     "@tanstack/react-virtual": "3.2.0",
@@ -39,6 +40,7 @@
     "dateformat": "5.0.3",
     "dayjs": "1.11.10",
     "domhandler": "5.0.3",
+    "@element-hq/element-call-embedded": "^0.9.0",
     "emojibase": "15.3.1",
     "emojibase-data": "15.3.2",
     "file-saver": "2.0.5",

From ac0ac4ff352a17da66c620b988a744d370cd9f1e Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 12 Apr 2025 03:39:59 -0500
Subject: [PATCH 004/242] add small widgetdriver

---
 src/app/features/room/SmallWidgetDriver.ts | 158 +++++++++++++++++++++
 1 file changed, 158 insertions(+)
 create mode 100644 src/app/features/room/SmallWidgetDriver.ts

diff --git a/src/app/features/room/SmallWidgetDriver.ts b/src/app/features/room/SmallWidgetDriver.ts
new file mode 100644
index 00000000..0dc57065
--- /dev/null
+++ b/src/app/features/room/SmallWidgetDriver.ts
@@ -0,0 +1,158 @@
+import {
+    type Capability,
+    EventDirection,
+    type IOpenIDCredentials,
+    type IOpenIDUpdate,
+    type ISendDelayedEventDetails,
+    type ISendEventDetails,
+    type ITurnServer,
+    type IReadEventRelationsResult,
+    type IRoomEvent,
+    MatrixCapabilities,
+    OpenIDRequestState,
+    type SimpleObservable,
+    type Widget,
+    WidgetDriver,
+    WidgetEventCapability,
+    WidgetKind,
+    type IWidgetApiErrorResponseDataDetails,
+    type ISearchUserDirectoryResult,
+    type IGetMediaConfigResult,
+    type UpdateDelayedEventAction,
+} from "matrix-widget-api";
+import {
+    ClientEvent,
+    type ITurnServer as IClientTurnServer,
+    EventType,
+    type IContent,
+    MatrixError,
+    type MatrixEvent,
+    Direction,
+    THREAD_RELATION_TYPE,
+    type SendDelayedEventResponse,
+    type StateEvents,
+    type TimelineEvents,
+    MatrixClient,
+} from "matrix-js-sdk";
+import {
+    type ApprovalOpts,
+    type CapabilitiesOpts,
+    WidgetLifecycle,
+} from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
+
+
+export class SmallWidgetDriver extends WidgetDriver {
+    private allowedCapabilities: Set<Capability>;
+    private readonly mxClient: MatrixClient; // Store the client instance
+
+    public constructor(
+        mx: MatrixClient,
+        allowedCapabilities: Capability[],
+        private forWidget: Widget,
+        private forWidgetKind: WidgetKind,
+        virtual: boolean,
+        private inRoomId?: string,
+    ) {
+        super();
+        this.mxClient = mx; // Store the passed instance
+
+        this.allowedCapabilities = new Set([
+            ...allowedCapabilities,
+            MatrixCapabilities.Screenshots,
+        ]);
+
+        // This is a trusted Element Call widget that we control
+        this.allowedCapabilities.add(MatrixCapabilities.AlwaysOnScreen);
+        this.allowedCapabilities.add(MatrixCapabilities.MSC3846TurnServers);
+
+        // Capability to access the room timeline (MSC2762)
+        // Ensure inRoomId is correctly passed during SmallWidgetDriver instantiation
+        if (inRoomId) {
+            this.allowedCapabilities.add(`org.matrix.msc2762.timeline:${inRoomId}`);
+        } else {
+            console.warn("inRoomId is undefined, cannot add timeline capability.");
+        }
+        this.allowedCapabilities.add(MatrixCapabilities.MSC4157SendDelayedEvent);
+        this.allowedCapabilities.add(MatrixCapabilities.MSC4157UpdateDelayedEvent);
+
+        this.allowedCapabilities.add(
+            WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomMember).raw,
+        );
+        this.allowedCapabilities.add(
+            WidgetEventCapability.forStateEvent(EventDirection.Receive, "org.matrix.msc3401.call").raw,
+        );
+        this.allowedCapabilities.add(
+            WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomEncryption).raw,
+        );
+        const clientUserId = this.mxClient.getUserId();
+        // For the legacy membership type
+        this.allowedCapabilities.add(
+            WidgetEventCapability.forStateEvent(EventDirection.Send, "org.matrix.msc3401.call.member", clientUserId ?? undefined)
+                .raw,
+        );
+        const clientDeviceId = this.mxClient.getDeviceId();
+        if (clientDeviceId !== null) {
+            // For the session membership type compliant with MSC4143
+            this.allowedCapabilities.add(
+                WidgetEventCapability.forStateEvent(
+                    EventDirection.Send,
+                    "org.matrix.msc3401.call.member",
+                    `_${clientUserId}_${clientDeviceId}`,
+                ).raw,
+            );
+            // Version with no leading underscore, for room versions whose auth rules allow it
+            this.allowedCapabilities.add(
+                WidgetEventCapability.forStateEvent(
+                    EventDirection.Send,
+                    "org.matrix.msc3401.call.member",
+                    `${clientUserId}_${clientDeviceId}`,
+                ).raw,
+            );
+        }
+        this.allowedCapabilities.add(
+            WidgetEventCapability.forStateEvent(EventDirection.Receive, "org.matrix.msc3401.call.member").raw,
+        );
+        // for determining auth rules specific to the room version
+        this.allowedCapabilities.add(
+            WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomCreate).raw,
+        );
+
+        const sendRecvRoomEvents = [
+            "io.element.call.encryption_keys",
+            "org.matrix.rageshake_request",
+            EventType.Reaction,
+            EventType.RoomRedaction,
+            "io.element.call.reaction",
+        ];
+        for (const eventType of sendRecvRoomEvents) {
+            this.allowedCapabilities.add(WidgetEventCapability.forRoomEvent(EventDirection.Send, eventType).raw);
+            this.allowedCapabilities.add(WidgetEventCapability.forRoomEvent(EventDirection.Receive, eventType).raw);
+        }
+
+        const sendRecvToDevice = [
+            EventType.CallInvite,
+            EventType.CallCandidates,
+            EventType.CallAnswer,
+            EventType.CallHangup,
+            EventType.CallReject,
+            EventType.CallSelectAnswer,
+            EventType.CallNegotiate,
+            EventType.CallSDPStreamMetadataChanged,
+            EventType.CallSDPStreamMetadataChangedPrefix,
+            EventType.CallReplaces,
+            EventType.CallEncryptionKeysPrefix,
+        ];
+        for (const eventType of sendRecvToDevice) {
+            this.allowedCapabilities.add(
+                WidgetEventCapability.forToDeviceEvent(EventDirection.Send, eventType).raw,
+            );
+            this.allowedCapabilities.add(
+                WidgetEventCapability.forToDeviceEvent(EventDirection.Receive, eventType).raw,
+            );
+        }
+
+        // To always allow OIDC requests for element call, the widgetPermissionStore is used:
+
+
+    }
+}
\ No newline at end of file

From aa65dd57ba1e1b4d57cdb20e845b730a1d08f724 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 12 Apr 2025 03:40:13 -0500
Subject: [PATCH 005/242] add scaffolding for widget-based call

---
 src/app/features/room/RoomView.tsx | 145 ++++++++++++++++++++++++++---
 1 file changed, 131 insertions(+), 14 deletions(-)

diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx
index b6eebdf2..43912c87 100644
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useEffect } from 'react'; // Added useEffect
 import { Box, Text, config } from 'folds';
 import { EventType, Room } from 'matrix-js-sdk';
 import { ReactEditor } from 'slate-react';
@@ -23,6 +23,9 @@ import { settingsAtom } from '../../state/settings';
 import { useSetting } from '../../state/hooks/settings';
 import { useAccessibleTagColors, usePowerLevelTags } from '../../hooks/usePowerLevelTags';
 import { useTheme } from '../../hooks/useTheme';
+import { logger } from 'matrix-js-sdk/lib/logger';
+import { ClientWidgetApi, Widget, WidgetKind } from 'matrix-widget-api';
+import { SmallWidgetDriver } from './SmallWidgetDriver';
 
 const FN_KEYS_REGEX = /^F\d+$/;
 const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
@@ -57,9 +60,38 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
   return true;
 };
 
+// Keep this function to generate the URL
+const getWidgetUrl = (mx, roomId) => {
+  const baseUrl = window.location.href;
+  const params = new URLSearchParams({
+    embed: "true", // We're embedding EC within another application
+    widgetId: "test",
+    // Template variables are used, so that this can be configured using the  data.
+    preload: "$preload", // We want it to load in the background.
+    // skipLobby: "true", // Skip the lobby in case we show a lobby component of our own.
+    returnToLobby: "$returnToLobby", // Returns to the lobby (instead of blank screen) when the call ends. (For video rooms)
+    perParticipantE2EE: "$perParticipantE2EE",
+    hideHeader: "true", // Hide the header since our room header is enough
+    userId: mx.getUserId()!,
+    deviceId: mx.getDeviceId()!,
+    roomId: roomId,
+    baseUrl: window.location.href,
+    parentUrl: baseUrl,
+    // lang: getCurrentLanguage().replace("_", "-"),
+    // fontScale: (FontWatcher.getRootFontSize() / FontWatcher.getBrowserDefaultFontSize()).toString(),
+    theme: "$org.matrix.msc2873.client_theme",
+});
+const replacedUrl = params.toString().replace(/%24/g, "$");
+const url= 'https://elementcall.example.quest' + `#?${replacedUrl}`;
+logger.error(url);
+  return url;
+}
+
+
 export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
   const roomInputRef = useRef<HTMLDivElement>(null);
   const roomViewRef = useRef<HTMLDivElement>(null);
+  const iframeRef = useRef<HTMLIFrameElement>(null); // Ref for the iframe
 
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
 
@@ -80,31 +112,117 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
   const theme = useTheme();
   const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
 
+  const isCall = room.isCallRoom(); // Determine if it's a call room
+
   useKeyDown(
     window,
     useCallback(
       (evt) => {
         if (editableActiveElement()) return;
-        if (
-          document.body.lastElementChild?.className !== 'ReactModalPortal' ||
-          navigation.isRawModalVisible
-        ) {
-          return;
+        // Check modal visibility more robustly if needed
+        if (document.querySelector('.ReactModalPortal > *')) { // Simple check if any modal portal has content
+             if (navigation.isRawModalVisible) return; // Skip if raw modal is explicitly visible
+             // Add other modal checks if necessary
         }
+
         if (shouldFocusMessageField(evt) || isKeyHotkey('mod+v', evt)) {
-          ReactEditor.focus(editor);
+          // Only focus editor if not in a call view where editor isn't present
+          if (!isCall && editor) {
+             ReactEditor.focus(editor);
+          }
         }
       },
-      [editor]
+      [editor, isCall] // Add isCall dependency
     )
   );
 
+  // Effect to setup the widget API when the iframe is mounted for a call room
+  useEffect(() => {
+    let widgetApi: ClientWidgetApi | null = null;
+    let driver: SmallWidgetDriver | null = null;
+
+    // Only run setup if it's a call room and the iframe ref is available
+    if (isCall && iframeRef.current) {
+      const iframe = iframeRef.current;
+      const url = getWidgetUrl(mx, roomId);
+
+      // Update iframe src if necessary (though it's set in JSX, this ensures it if URL changes)
+      if (iframe.src !== url) {
+        iframe.src = url;
+      }
+
+      logger.info(`Setting up widget API for room ${roomId}`);
+
+      const widget = new Widget({
+        id: 'test-call-widget', // Match ID used in URL params
+        creatorUserId: mx.getUserId()!,
+        type: 'm.custom', // Or appropriate widget type e.g., m.video
+        url: url,
+        roomId: roomId, // Pass roomId if needed by Widget constructor
+        waitForIframeLoad: false,
+        // Add other necessary Widget properties
+      });
+
+      // Ensure driver is correctly instantiated with necessary parameters
+      // The second argument `[]` might need adjustment based on SmallWidgetDriver's needs (e.g., allowed capabilities)
+      driver = new SmallWidgetDriver(mx, [], widget, WidgetKind.Room, true, roomId);
+
+      widgetApi = new ClientWidgetApi(widget, iframe, driver);
+      // widgetApi.start(); // Start communication if required by your setup
+
+      // Return a cleanup function
+      return () => {
+        logger.info(`Cleaning up widget API for room ${roomId}`);
+        // Implement proper cleanup for ClientWidgetApi and SmallWidgetDriver
+        // This might involve calling stop methods, removing listeners, etc.
+        // Example: widgetApi?.stop();
+        // Example: driver?.stop();
+        widgetApi = null;
+        driver = null;
+        // Clear iframe src to stop loading/activity
+        if (iframeRef.current) {
+            iframeRef.current.src = 'about:blank';
+        }
+      };
+    }
+
+    // If it's not a call room or the iframe isn't ready, ensure no setup runs/is cleaned up
+    return undefined;
+
+  }, [isCall, mx, roomId]); // Dependencies: run effect if call status, client, or room ID changes
+
+
+  // Render Call View
+  if (isCall) {
+    const url = getWidgetUrl(mx, roomId);
+    return (
+      // Attach roomViewRef here if <Page> is the main container you want to reference
+      <Page ref={roomViewRef} style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+        <RoomViewHeader />
+        {/* Embed the iframe directly. Ensure parent has definite height or use flex grow */}
+        <Box grow="Yes" style={{ overflow: 'hidden' }}> {/* Use Box with grow */}
+            <iframe
+              ref={iframeRef}
+              src={url} // Set initial source
+              style={{ width: '100%', height: '100%', border: 'none' }}
+              title={`Element Call - ${room.name || roomId}`} // Accessible title
+              // Add necessary sandbox/allow attributes for WebRTC, etc.
+              sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-downloads"
+              allow="microphone; camera; display-capture; autoplay;"
+            />
+        </Box>
+         {/* You might want a minimal footer or status bar here */}
+      </Page>
+    );
+  }
+
+  // Render Standard Text/Timeline Room View
   return (
     <Page ref={roomViewRef}>
       <RoomViewHeader />
       <Box grow="Yes" direction="Column">
         <RoomTimeline
-          key={roomId}
+          key={roomId} // Key helps React reset state when room changes
           room={room}
           eventId={eventId}
           roomInputRef={roomInputRef}
@@ -124,18 +242,17 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
             />
           ) : (
             <>
-              {canMessage && (
+              {canMessage ? (
                 <RoomInput
                   room={room}
                   editor={editor}
                   roomId={roomId}
-                  fileDropContainerRef={roomViewRef}
+                  fileDropContainerRef={roomViewRef} // Pass the Page ref here if needed
                   ref={roomInputRef}
                   getPowerLevelTag={getPowerLevelTag}
                   accessibleTagColors={accessibleTagColors}
                 />
-              )}
-              {!canMessage && (
+              ) : (
                 <RoomInputPlaceholder
                   style={{ padding: config.space.S200 }}
                   alignItems="Center"
@@ -151,4 +268,4 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
       </Box>
     </Page>
   );
-}
+}
\ No newline at end of file

From 7dedb121383ba5a06664c15a702dbf1f84e49542 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 12 Apr 2025 03:40:32 -0500
Subject: [PATCH 006/242] add element-call to the vite copyFiles for build

---
 vite.config.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/vite.config.js b/vite.config.js
index 9c8d88bc..e5cb6232 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -11,6 +11,10 @@ import buildConfig from './build.config';
 
 const copyFiles = {
   targets: [
+    {
+      src: 'node_modules/@element-hq/element-call-embedded/dist',
+      dest: 'element-call'
+    },    
     {
       src: 'node_modules/pdfjs-dist/build/pdf.worker.min.mjs',
       dest: '',

From 2fa1e1a187817eda379ae85387acb76949077493 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 13 Apr 2025 16:00:41 -0500
Subject: [PATCH 007/242] create a shortened version of element's widget
 implementation

---
 src/app/features/room/RoomView.tsx | 147 +++++++++++++++++++++++------
 1 file changed, 118 insertions(+), 29 deletions(-)

diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx
index 43912c87..fa0ad5cb 100644
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useRef, useEffect } from 'react'; // Added useEffect
 import { Box, Text, config } from 'folds';
-import { EventType, Room } from 'matrix-js-sdk';
+import { CallEvent, EventType, MatrixClient, Room } from 'matrix-js-sdk';
 import { ReactEditor } from 'slate-react';
 import { isKeyHotkey } from 'is-hotkey';
 import { useStateEvent } from '../../hooks/useStateEvent';
@@ -24,8 +24,9 @@ import { useSetting } from '../../state/hooks/settings';
 import { useAccessibleTagColors, usePowerLevelTags } from '../../hooks/usePowerLevelTags';
 import { useTheme } from '../../hooks/useTheme';
 import { logger } from 'matrix-js-sdk/lib/logger';
-import { ClientWidgetApi, Widget, WidgetKind } from 'matrix-widget-api';
+import { ClientWidgetApi, IWidget, IWidgetData, Widget, WidgetKind } from 'matrix-widget-api';
 import { SmallWidgetDriver } from './SmallWidgetDriver';
+import EventEmitter from 'events';
 
 const FN_KEYS_REGEX = /^F\d+$/;
 const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
@@ -65,28 +66,107 @@ const getWidgetUrl = (mx, roomId) => {
   const baseUrl = window.location.href;
   const params = new URLSearchParams({
     embed: "true", // We're embedding EC within another application
-    widgetId: "test",
+    widgetId: `element-call-${roomId}`,
+    appPrompt: "false",
     // Template variables are used, so that this can be configured using the  data.
-    preload: "$preload", // We want it to load in the background.
-    // skipLobby: "true", // Skip the lobby in case we show a lobby component of our own.
-    returnToLobby: "$returnToLobby", // Returns to the lobby (instead of blank screen) when the call ends. (For video rooms)
-    perParticipantE2EE: "$perParticipantE2EE",
+    preload: "true", // We want it to load in the background.
+    intent: "join_existing",
+    // skipLobby: "false", // Skip the lobby in case we show a lobby component of our own.
+    returnToLobby: "true", // Returns to the lobby (instead of blank screen) when the call ends. (For video rooms)
+    perParticipantE2EE: "true",
     hideHeader: "true", // Hide the header since our room header is enough
     userId: mx.getUserId()!,
     deviceId: mx.getDeviceId()!,
     roomId: roomId,
-    baseUrl: window.location.href,
-    parentUrl: baseUrl,
+    baseUrl: mx.baseUrl,
+    parentUrl: window.location.origin,
     // lang: getCurrentLanguage().replace("_", "-"),
     // fontScale: (FontWatcher.getRootFontSize() / FontWatcher.getBrowserDefaultFontSize()).toString(),
-    theme: "$org.matrix.msc2873.client_theme",
+    // theme: "$org.matrix.msc2873.client_theme",
 });
 const replacedUrl = params.toString().replace(/%24/g, "$");
-const url= 'https://elementcall.example.quest' + `#?${replacedUrl}`;
+const url= 'https://livekit.hampter.quest' + `#?${replacedUrl}`;
 logger.error(url);
+logger.error(baseUrl);
+logger.error(mx.baseUrl);
+logger.error(window.location.origin);
+logger.error('EQRWEROIEQWRJQWEROEWQRJEWQORWQEORJWQEJROQEWRJQWEORJWEQRJQWRE')
   return url;
 }
 
+interface IApp extends IWidget {
+  "client": MatrixClient;
+  "roomId": string;
+  "eventId"?: string; // not present on virtual widgets
+  // eslint-disable-next-line camelcase
+  "avatar_url"?: string; // MSC2765 https://github.com/matrix-org/matrix-doc/pull/2765
+  // Whether the widget was created from `widget_build_url` and thus is a call widget of some kind
+  "io.element.managed_hybrid"?: boolean;
+}
+
+class CinnyWidget extends Widget {
+  public constructor(private rawDefinition: IApp) {
+    super(rawDefinition);
+  }
+}
+
+class Edget extends EventEmitter {
+  private client: MatrixClient;
+  private messaging: ClientWidgetApi | null = null;
+  private mockWidget: CinnyWidget;
+  private roomId?: string;
+  private type: string;
+
+  constructor(private iapp: IApp) {
+    super();
+    this.client = iapp.client;
+    this.roomId = iapp.roomId;
+    this.type = iapp.type;
+
+    this.mockWidget = new CinnyWidget(iapp);
+  }
+  
+  startMessaging(iframe: HTMLIFrameElement) : any {
+      // Ensure driver is correctly instantiated with necessary parameters
+      // The second argument `[]` might need adjustment based on SmallWidgetDriver's needs (e.g., allowed capabilities)
+      const driver = new SmallWidgetDriver(this.client, [], this.mockWidget, WidgetKind.Room, true, this.roomId);
+
+      this.messaging = new ClientWidgetApi(this.mockWidget, iframe, driver);
+      this.messaging.on("preparing", () => this.emit("preparing"));
+      this.messaging.on("error:preparing", (err: unknown) => this.emit("error:preparing", err));
+      this.messaging.once("ready", () => {
+        this.emit("ready");
+    });
+    return this.messaging;
+    //this.messaging.on("capabilitiesNotified", () => this.emit("capabilitiesNotified"));
+  }
+
+}
+
+const getWidgetData = (client: MatrixClient, roomId: string, currentData: Object, overwriteData: Object) : IWidgetData => {
+  let perParticipantE2EE = true;
+  return {
+    ...currentData,
+    ...overwriteData,
+    perParticipantE2EE,
+  }
+};
+
+const createVirtualWidget = (client : MatrixClient, id : string, creatorUserId : string, name : string, type :string, url : string, waitForIframeLoad : boolean, data : IWidgetData, roomId : string) : IApp => {
+  return {
+    client,
+    id,
+    creatorUserId,
+    name,
+    type,
+    url,
+    waitForIframeLoad,
+    data,
+    roomId,
+
+  }
+}
+
 
 export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
   const roomInputRef = useRef<HTMLDivElement>(null);
@@ -153,23 +233,32 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
 
       logger.info(`Setting up widget API for room ${roomId}`);
 
-      const widget = new Widget({
-        id: 'test-call-widget', // Match ID used in URL params
-        creatorUserId: mx.getUserId()!,
-        type: 'm.custom', // Or appropriate widget type e.g., m.video
-        url: url,
-        roomId: roomId, // Pass roomId if needed by Widget constructor
-        waitForIframeLoad: false,
-        // Add other necessary Widget properties
-      });
-
-      // Ensure driver is correctly instantiated with necessary parameters
-      // The second argument `[]` might need adjustment based on SmallWidgetDriver's needs (e.g., allowed capabilities)
-      driver = new SmallWidgetDriver(mx, [], widget, WidgetKind.Room, true, roomId);
-
-      widgetApi = new ClientWidgetApi(widget, iframe, driver);
-      // widgetApi.start(); // Start communication if required by your setup
+      const userId : string = mx.getUserId() ?? '';
 
+      
+      const app = createVirtualWidget(
+        mx,
+        `element-call-${roomId}`, 
+        userId,
+        'Element Call', 
+        'm.call', 
+        url, 
+        false, 
+        getWidgetData(
+          mx,
+          roomId,
+          {},
+          {skipLobby: true,
+            preload: false,
+            returnToLobby: false,
+          }),
+        roomId);
+        
+        const widget = new Edget(app);
+        const test = widget.startMessaging(iframe);
+        logger.error('Before join');
+        test.transport.send("io.element.join", {});
+        test.emit("io.element.join");
       // Return a cleanup function
       return () => {
         logger.info(`Cleaning up widget API for room ${roomId}`);
@@ -177,8 +266,8 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
         // This might involve calling stop methods, removing listeners, etc.
         // Example: widgetApi?.stop();
         // Example: driver?.stop();
-        widgetApi = null;
-        driver = null;
+        widgetApi;// = null;
+        driver;// = null;
         // Clear iframe src to stop loading/activity
         if (iframeRef.current) {
             iframeRef.current.src = 'about:blank';

From ba75abd8ddac4129b71af7839a53164659951a2f Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 13 Apr 2025 16:01:05 -0500
Subject: [PATCH 008/242] add the remainder of element's widget driver impl
 (and correct where needed)

---
 src/app/features/room/SmallWidgetDriver.ts | 395 ++++++++++++++++++++-
 1 file changed, 379 insertions(+), 16 deletions(-)

diff --git a/src/app/features/room/SmallWidgetDriver.ts b/src/app/features/room/SmallWidgetDriver.ts
index 0dc57065..781f425e 100644
--- a/src/app/features/room/SmallWidgetDriver.ts
+++ b/src/app/features/room/SmallWidgetDriver.ts
@@ -33,12 +33,15 @@ import {
     type StateEvents,
     type TimelineEvents,
     MatrixClient,
-} from "matrix-js-sdk";
+    Room, // Import Room
+    Timeline, // Import Timeline
+} from "matrix-js-sdk"; // Assuming matrix-js-sdk is correctly imported
 import {
     type ApprovalOpts,
     type CapabilitiesOpts,
     WidgetLifecycle,
-} from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
+} from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle"; // Assuming this path is correct
+import { logger } from "matrix-js-sdk/lib/logger"; // Assuming logger is correctly imported
 
 
 export class SmallWidgetDriver extends WidgetDriver {
@@ -50,7 +53,7 @@ export class SmallWidgetDriver extends WidgetDriver {
         allowedCapabilities: Capability[],
         private forWidget: Widget,
         private forWidgetKind: WidgetKind,
-        virtual: boolean,
+        virtual: boolean, // Assuming 'virtual' might be needed later, kept for consistency
         private inRoomId?: string,
     ) {
         super();
@@ -59,22 +62,19 @@ export class SmallWidgetDriver extends WidgetDriver {
         this.allowedCapabilities = new Set([
             ...allowedCapabilities,
             MatrixCapabilities.Screenshots,
+            // Add other base capabilities as needed, e.g., ElementWidgetCapabilities.RequiresClient
         ]);
 
-        // This is a trusted Element Call widget that we control
+        // --- Capabilities specific to Element Call (or similar trusted widgets) ---
+        // This is a trusted Element Call widget that we control (adjust if not Element Call)
         this.allowedCapabilities.add(MatrixCapabilities.AlwaysOnScreen);
         this.allowedCapabilities.add(MatrixCapabilities.MSC3846TurnServers);
-
-        // Capability to access the room timeline (MSC2762)
-        // Ensure inRoomId is correctly passed during SmallWidgetDriver instantiation
-        if (inRoomId) {
-            this.allowedCapabilities.add(`org.matrix.msc2762.timeline:${inRoomId}`);
-        } else {
-            console.warn("inRoomId is undefined, cannot add timeline capability.");
-        }
         this.allowedCapabilities.add(MatrixCapabilities.MSC4157SendDelayedEvent);
         this.allowedCapabilities.add(MatrixCapabilities.MSC4157UpdateDelayedEvent);
-
+	// Capability to access the room timeline (MSC2762)
+	this.allowedCapabilities.add(`org.matrix.msc2762.timeline:${inRoomId}`);
+        // Capability to read room state (MSC2762)
+        this.allowedCapabilities.add(`org.matrix.msc2762.state:${inRoomId}`);
         this.allowedCapabilities.add(
             WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomMember).raw,
         );
@@ -84,10 +84,10 @@ export class SmallWidgetDriver extends WidgetDriver {
         this.allowedCapabilities.add(
             WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomEncryption).raw,
         );
-        const clientUserId = this.mxClient.getUserId();
+        const clientUserId = this.mxClient.getSafeUserId();
         // For the legacy membership type
         this.allowedCapabilities.add(
-            WidgetEventCapability.forStateEvent(EventDirection.Send, "org.matrix.msc3401.call.member", clientUserId ?? undefined)
+            WidgetEventCapability.forStateEvent(EventDirection.Send, "org.matrix.msc3401.call.member", clientUserId)
                 .raw,
         );
         const clientDeviceId = this.mxClient.getDeviceId();
@@ -151,8 +151,371 @@ export class SmallWidgetDriver extends WidgetDriver {
             );
         }
 
-        // To always allow OIDC requests for element call, the widgetPermissionStore is used:
+    }
 
 
+    public async validateCapabilities(requested: Set<Capability>): Promise<Set<Capability>> {
+        // Stubbed under the assumption voice calls will be valid thru element-call
+        return requested;
+    }
+
+    public async sendEvent<K extends keyof StateEvents>(
+        eventType: K,
+        content: StateEvents[K],
+        stateKey: string | null,
+        targetRoomId: string | null,
+    ): Promise<ISendEventDetails>;
+    public async sendEvent<K extends keyof TimelineEvents>(
+        eventType: K,
+        content: TimelineEvents[K],
+        stateKey: null,
+        targetRoomId: string | null,
+    ): Promise<ISendEventDetails>;
+    public async sendEvent(
+        eventType: string,
+        content: IContent,
+        stateKey: string | null = null,
+        targetRoomId: string | null = null,
+    ): Promise<ISendEventDetails> {
+        const client = this.mxClient;
+        const roomId = targetRoomId || this.inRoomId;
+
+        if (!client || !roomId) throw new Error("Not in a room or not attached to a client");
+
+        let r: { event_id: string } | null;
+        if (stateKey !== null) {
+            // state event
+            r = await client.sendStateEvent(
+                roomId,
+                eventType as keyof StateEvents,
+                content as StateEvents[keyof StateEvents],
+                stateKey,
+            );
+        } else if (eventType === EventType.RoomRedaction) {
+            // special case: extract the `redacts` property and call redact
+            r = await client.redactEvent(roomId, content["redacts"]);
+        } else {
+            // message event
+            r = await client.sendEvent(
+                roomId,
+                eventType as keyof TimelineEvents,
+                content as TimelineEvents[keyof TimelineEvents],
+            );
+        }
+
+        return { roomId, eventId: r.event_id };
+    }
+
+    /**
+     * @experimental Part of MSC4140 & MSC4157
+     * @see {@link WidgetDriver#sendDelayedEvent}
+     */
+    public async sendDelayedEvent<K extends keyof StateEvents>(
+        delay: number | null,
+        parentDelayId: string | null,
+        eventType: K,
+        content: StateEvents[K],
+        stateKey: string | null,
+        targetRoomId: string | null,
+    ): Promise<ISendDelayedEventDetails>;
+    /**
+     * @experimental Part of MSC4140 & MSC4157
+     */
+    public async sendDelayedEvent<K extends keyof TimelineEvents>(
+        delay: number | null,
+        parentDelayId: string | null,
+        eventType: K,
+        content: TimelineEvents[K],
+        stateKey: null,
+        targetRoomId: string | null,
+    ): Promise<ISendDelayedEventDetails>;
+    public async sendDelayedEvent(
+        delay: number | null,
+        parentDelayId: string | null,
+        eventType: string,
+        content: IContent,
+        stateKey: string | null = null,
+        targetRoomId: string | null = null,
+    ): Promise<ISendDelayedEventDetails> {
+        const client = this.mxClient;
+        const roomId = targetRoomId || this.inRoomId;
+
+        if (!client || !roomId) throw new Error("Not in a room or not attached to a client");
+
+        let delayOpts;
+        if (delay !== null) {
+            delayOpts = {
+                delay,
+                ...(parentDelayId !== null && { parent_delay_id: parentDelayId }),
+            };
+        } else if (parentDelayId !== null) {
+            delayOpts = {
+                parent_delay_id: parentDelayId,
+            };
+        } else {
+            throw new Error("Must provide at least one of delay or parentDelayId");
+        }
+
+        let r: SendDelayedEventResponse | null;
+        if (stateKey !== null) {
+            // state event
+            r = await client._unstable_sendDelayedStateEvent(
+                roomId,
+                delayOpts,
+                eventType as keyof StateEvents,
+                content as StateEvents[keyof StateEvents],
+                stateKey,
+            );
+        } else {
+            // message event
+            r = await client._unstable_sendDelayedEvent(
+                roomId,
+                delayOpts,
+                null,
+                eventType as keyof TimelineEvents,
+                content as TimelineEvents[keyof TimelineEvents],
+            );
+        }
+
+        return {
+            roomId,
+            delayId: r.delay_id,
+        };
+    }
+
+    /**
+     * @experimental Part of MSC4140 & MSC4157
+     */
+    public async updateDelayedEvent(delayId: string, action: UpdateDelayedEventAction): Promise<void> {
+        const client = this.mxClient;
+
+        if (!client) throw new Error("Not in a room or not attached to a client");
+
+        await client._unstable_updateDelayedEvent(delayId, action);
+    }
+
+    /**
+     * Implements {@link WidgetDriver#sendToDevice}
+     */
+    public async sendToDevice(
+        eventType: string,
+        encrypted: boolean,
+        contentMap: { [userId: string]: { [deviceId: string]: object } },
+    ): Promise<void> {
+        const client = this.mxClient;
+
+        if (encrypted) {
+            const crypto = client.getCrypto();
+            if (!crypto) throw new Error("E2EE not enabled");
+
+            // attempt to re-batch these up into a single request
+            const invertedContentMap: { [content: string]: { userId: string; deviceId: string }[] } = {};
+
+            for (const userId of Object.keys(contentMap)) {
+                const userContentMap = contentMap[userId];
+                for (const deviceId of Object.keys(userContentMap)) {
+                    const content = userContentMap[deviceId];
+                    const stringifiedContent = JSON.stringify(content);
+                    invertedContentMap[stringifiedContent] = invertedContentMap[stringifiedContent] || [];
+                    invertedContentMap[stringifiedContent].push({ userId, deviceId });
+                }
+            }
+
+            await Promise.all(
+                Object.entries(invertedContentMap).map(async ([stringifiedContent, recipients]) => {
+                    const batch = await crypto.encryptToDeviceMessages(
+                        eventType,
+                        recipients,
+                        JSON.parse(stringifiedContent),
+                    );
+
+                    await client.queueToDevice(batch);
+                }),
+            );
+        } else {
+            await client.queueToDevice({
+                eventType,
+                batch: Object.entries(contentMap).flatMap(([userId, userContentMap]) =>
+                    Object.entries(userContentMap).map(([deviceId, content]) => ({
+                        userId,
+                        deviceId,
+                        payload: content,
+                    })),
+                ),
+            });
+        }
+    }
+
+    /**
+     * Reads all events of the given type, and optionally `msgtype` (if applicable/defined),
+     * the user has access to. The widget API will have already verified that the widget is
+     * capable of receiving the events. Less events than the limit are allowed to be returned,
+     * but not more.
+     * @param roomId The ID of the room to look within.
+     * @param eventType The event type to be read.
+     * @param msgtype The msgtype of the events to be read, if applicable/defined.
+     * @param stateKey The state key of the events to be read, if applicable/defined.
+     * @param limit The maximum number of events to retrieve. Will be zero to denote "as many as
+     * possible".
+     * @param since When null, retrieves the number of events specified by the "limit" parameter.
+     * Otherwise, the event ID at which only subsequent events will be returned, as many as specified
+     * in "limit".
+     * @returns {Promise<IRoomEvent[]>} Resolves to the room events, or an empty array.
+     */
+    public async readRoomTimeline(
+        roomId: string,
+        eventType: string,
+        msgtype: string | undefined,
+        stateKey: string | undefined,
+        limit: number,
+        since: string | undefined,
+    ): Promise<IRoomEvent[]> {
+        limit = limit > 0 ? Math.min(limit, Number.MAX_SAFE_INTEGER) : Number.MAX_SAFE_INTEGER; // relatively arbitrary
+
+        const room = this.mxClient.getRoom(roomId);
+        if (room === null) return [];
+        const results: MatrixEvent[] = [];
+        const events = room.getLiveTimeline().getEvents(); // timelines are most recent last
+        for (let i = events.length - 1; i >= 0; i--) {
+            const ev = events[i];
+            if (results.length >= limit) break;
+            if (since !== undefined && ev.getId() === since) break;
+
+            if (ev.getType() !== eventType || ev.isState()) continue;
+            if (eventType === EventType.RoomMessage && msgtype && msgtype !== ev.getContent()["msgtype"]) continue;
+            if (ev.getStateKey() !== undefined && stateKey !== undefined && ev.getStateKey() !== stateKey) continue;
+            results.push(ev);
+        }
+
+        return results.map((e) => e.getEffectiveEvent() as IRoomEvent);
+    }
+
+    /**
+     * Reads the current values of all matching room state entries.
+     * @param roomId The ID of the room.
+     * @param eventType The event type of the entries to be read.
+     * @param stateKey The state key of the entry to be read. If undefined,
+     * all room state entries with a matching event type should be returned.
+     * @returns {Promise<IRoomEvent[]>} Resolves to the events representing the
+     * current values of the room state entries.
+     */
+    public async readRoomState(roomId: string, eventType: string, stateKey: string | undefined): Promise<IRoomEvent[]> {
+        const room = this.mxClient.getRoom(roomId);
+        if (room === null) return [];
+        const state = room.getLiveTimeline().getState(Direction.Forward);
+        if (state === undefined) return [];
+
+        if (stateKey === undefined)
+            return state.getStateEvents(eventType).map((e) => e.getEffectiveEvent() as IRoomEvent);
+        const event = state.getStateEvents(eventType, stateKey);
+        return event === null ? [] : [event.getEffectiveEvent() as IRoomEvent];
+    }
+
+    /*
+    public async navigate(uri: string): Promise<void> {
+        navigateToPermalink(uri);
+    }
+    */
+
+    public async readEventRelations(
+        eventId: string,
+        roomId?: string,
+        relationType?: string,
+        eventType?: string,
+        from?: string,
+        to?: string,
+        limit?: number,
+        direction?: "f" | "b",
+    ): Promise<IReadEventRelationsResult> {
+        const client = this.mxClient;
+        const dir = direction as Direction;
+        roomId = roomId ?? this.inRoomId ?? undefined;
+
+        if (typeof roomId !== "string") {
+            throw new Error("Error while reading the current room");
+        }
+
+        const { events, nextBatch, prevBatch } = await client.relations(
+            roomId,
+            eventId,
+            relationType ?? null,
+            eventType ?? null,
+            { from, to, limit, dir },
+        );
+
+        return {
+            chunk: events.map((e) => e.getEffectiveEvent() as IRoomEvent),
+            nextBatch: nextBatch ?? undefined,
+            prevBatch: prevBatch ?? undefined,
+        };
+    }
+
+    public async searchUserDirectory(searchTerm: string, limit?: number): Promise<ISearchUserDirectoryResult> {
+        const client = this.mxClient;
+
+        const { limited, results } = await client.searchUserDirectory({ term: searchTerm, limit });
+
+        return {
+            limited,
+            results: results.map((r) => ({
+                userId: r.user_id,
+                displayName: r.display_name,
+                avatarUrl: r.avatar_url,
+            })),
+        };
+    }
+
+    public async getMediaConfig(): Promise<IGetMediaConfigResult> {
+        const client = this.mxClient;
+
+        return await client.getMediaConfig();
+    }
+
+    public async uploadFile(file: XMLHttpRequestBodyInit): Promise<{ contentUri: string }> {
+        const client = this.mxClient;
+
+        const uploadResult = await client.uploadContent(file);
+
+        return { contentUri: uploadResult.content_uri };
+    }
+
+    /**
+     * Download a file from the media repository on the homeserver.
+     *
+     * @param contentUri - the MXC URI of the file to download
+     * @returns an object with: file - response contents as Blob
+     */
+    /*
+    public async downloadFile(contentUri: string): Promise<{ file: XMLHttpRequestBodyInit }> {
+        const client = this.mxClient;
+        const media = mediaFromMxc(contentUri, client);
+        const response = await media.downloadSource();
+        const blob = await response.blob();
+        return { file: blob };
+    }
+    */
+
+    /**
+     * Gets the IDs of all joined or invited rooms currently known to the
+     * client.
+     * @returns The room IDs.
+     */
+    /*
+    public getKnownRooms(): string[] {
+        return this.mxClient
+            .getVisibleRooms(SettingsStore.getValue("feature_dynamic_room_predecessors"))
+            .map((r) => r.roomId);
+    }
+            */
+
+    /**
+     * Expresses a {@link MatrixError} as a JSON payload
+     * for use by Widget API error responses.
+     * @param error The error to handle.
+     * @returns The error expressed as a JSON payload,
+     * or undefined if it is not a {@link MatrixError}.
+     */
+    public processError(error: unknown): IWidgetApiErrorResponseDataDetails | undefined {
+        return error instanceof MatrixError ? { matrix_api_error: error.asWidgetApiErrorData() } : undefined;
     }
 }
\ No newline at end of file

From 93a1401b7c191f7ed605b48b79354efe91f0cb40 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Mon, 14 Apr 2025 04:28:08 -0500
Subject: [PATCH 009/242] shift load order to enable embedded element call to
 work proper + add groundwork for intercepting the read_events so we can
 correctly process them (not sure what is wrong but I believe there is a weird
 set of version mismatches between the embedded app, cinny, and the matrix
 widget api)

---
 src/app/features/room/RoomView.tsx | 624 ++++++++++++++++++++++-------
 1 file changed, 475 insertions(+), 149 deletions(-)

diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx
index fa0ad5cb..9cccbd3e 100644
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -1,44 +1,55 @@
-import React, { useCallback, useRef, useEffect } from 'react'; // Added useEffect
-import { Box, Text, config } from 'folds';
-import { CallEvent, EventType, MatrixClient, Room } from 'matrix-js-sdk';
+import React, { useCallback, useRef, useEffect } from 'react';
+import { Box, Text, config } from 'folds'; // Assuming 'folds' is a UI library
+import { CallEvent, ClientEvent, Direction, EventType, MatrixClient, MatrixEvent, MatrixEventEvent, Room, RoomStateEvent } from 'matrix-js-sdk';
+import { KnownMembership } from "matrix-js-sdk/src/types";
 import { ReactEditor } from 'slate-react';
 import { isKeyHotkey } from 'is-hotkey';
-import { useStateEvent } from '../../hooks/useStateEvent';
-import { StateEvent } from '../../../types/matrix/room';
-import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useEditor } from '../../components/editor';
+import { useStateEvent } from '../../hooks/useStateEvent'; // Assuming custom hook
+import { StateEvent } from '../../../types/matrix/room'; // Assuming custom types
+import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels'; // Assuming custom hook
+import { useMatrixClient } from '../../hooks/useMatrixClient'; // Assuming custom hook
+import { useEditor } from '../../components/editor'; // Assuming custom hook/component
 import { RoomInputPlaceholder } from './RoomInputPlaceholder';
 import { RoomTimeline } from './RoomTimeline';
 import { RoomViewTyping } from './RoomViewTyping';
 import { RoomTombstone } from './RoomTombstone';
 import { RoomInput } from './RoomInput';
 import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
-import { Page } from '../../components/page';
+import { Page } from '../../components/page'; // Assuming custom component
 import { RoomViewHeader } from './RoomViewHeader';
-import { useKeyDown } from '../../hooks/useKeyDown';
-import { editableActiveElement } from '../../utils/dom';
-import navigation from '../../../client/state/navigation';
-import { settingsAtom } from '../../state/settings';
-import { useSetting } from '../../state/hooks/settings';
-import { useAccessibleTagColors, usePowerLevelTags } from '../../hooks/usePowerLevelTags';
-import { useTheme } from '../../hooks/useTheme';
+import { useKeyDown } from '../../hooks/useKeyDown'; // Assuming custom hook
+import { editableActiveElement } from '../../utils/dom'; // Assuming utility function
+import navigation from '../../../client/state/navigation'; // Assuming navigation state management
+import { settingsAtom } from '../../state/settings'; // Assuming state management (e.g., Jotai/Recoil)
+import { useSetting } from '../../state/hooks/settings'; // Assuming custom hook
+import { useAccessibleTagColors, usePowerLevelTags } from '../../hooks/usePowerLevelTags'; // Assuming custom hook
+import { useTheme } from '../../hooks/useTheme'; // Assuming custom hook
 import { logger } from 'matrix-js-sdk/lib/logger';
-import { ClientWidgetApi, IWidget, IWidgetData, Widget, WidgetKind } from 'matrix-widget-api';
-import { SmallWidgetDriver } from './SmallWidgetDriver';
+import { ClientWidgetApi, IRoomEvent, IStickyActionRequest, IWidget, IWidgetData, MatrixCapabilities, Widget, WidgetApiFromWidgetAction, type IWidgetApiRequestEmptyData, WidgetKind, IWidgetApiRequest } from 'matrix-widget-api';
+import { SmallWidgetDriver } from './SmallWidgetDriver'; // Assuming custom widget driver
 import EventEmitter from 'events';
 
+// --- Constants ---
 const FN_KEYS_REGEX = /^F\d+$/;
+
+// --- Helper Functions ---
+
+/**
+ * Determines if a keyboard event should trigger focusing the message input field.
+ * @param evt - The KeyboardEvent.
+ * @returns True if the input should be focused, false otherwise.
+ */
 const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
   const { code } = evt;
+  // Ignore if modifier keys are pressed
   if (evt.metaKey || evt.altKey || evt.ctrlKey) {
     return false;
   }
 
-  // do not focus on F keys
+  // Ignore function keys (F1, F2, etc.)
   if (FN_KEYS_REGEX.test(code)) return false;
 
-  // do not focus on numlock/scroll lock
+  // Ignore specific control/navigation keys
   if (
     code.startsWith('OS') ||
     code.startsWith('Meta') ||
@@ -50,257 +61,569 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
     code.startsWith('End') ||
     code.startsWith('Home') ||
     code === 'Tab' ||
-    code === 'Space' ||
-    code === 'Enter' ||
+    code === 'Space' || // Allow space if needed elsewhere, but not for focusing input
+    code === 'Enter' || // Allow enter if needed elsewhere
     code === 'NumLock' ||
     code === 'ScrollLock'
   ) {
     return false;
   }
 
+  // If none of the above conditions met, it's likely a character key
   return true;
 };
 
-// Keep this function to generate the URL
-const getWidgetUrl = (mx, roomId) => {
-  const baseUrl = window.location.href;
+/**
+ * Generates the URL for the Element Call widget.
+ * @param mx - The MatrixClient instance.
+ * @param roomId - The ID of the room.
+ * @returns The generated URL object.
+ */
+const getWidgetUrl = (mx: MatrixClient, roomId: string): URL => {
+  const baseUrl = window.location.origin;
+  // Ensure the path is correct relative to the application's structure
+  let url = new URL("./dist/element-call/dist/index.html", baseUrl);
+
   const params = new URLSearchParams({
-    embed: "true", // We're embedding EC within another application
+    embed: "true",
     widgetId: `element-call-${roomId}`,
-    appPrompt: "false",
-    // Template variables are used, so that this can be configured using the  data.
-    preload: "true", // We want it to load in the background.
-    intent: "join_existing",
-    // skipLobby: "false", // Skip the lobby in case we show a lobby component of our own.
-    returnToLobby: "true", // Returns to the lobby (instead of blank screen) when the call ends. (For video rooms)
+    preload: "true", // Consider if preloading is always desired
+    skipLobby: "false", // Configurable based on needs
+    returnToLobby: "true",
     perParticipantE2EE: "true",
-    hideHeader: "true", // Hide the header since our room header is enough
+    hideHeader: "true",
     userId: mx.getUserId()!,
     deviceId: mx.getDeviceId()!,
     roomId: roomId,
-    baseUrl: mx.baseUrl,
-    parentUrl: window.location.origin,
-    // lang: getCurrentLanguage().replace("_", "-"),
-    // fontScale: (FontWatcher.getRootFontSize() / FontWatcher.getBrowserDefaultFontSize()).toString(),
-    // theme: "$org.matrix.msc2873.client_theme",
-});
-const replacedUrl = params.toString().replace(/%24/g, "$");
-const url= 'https://livekit.hampter.quest' + `#?${replacedUrl}`;
-logger.error(url);
-logger.error(baseUrl);
-logger.error(mx.baseUrl);
-logger.error(window.location.origin);
-logger.error('EQRWEROIEQWRJQWEROEWQRJEWQORWQEORJWQEJROQEWRJQWEORJWEQRJQWRE')
+    baseUrl: mx.baseUrl!, // Ensure baseUrl is available
+    parentUrl: window.location.origin, // Optional, might be needed by widget
+    // lang: getCurrentLanguage().replace("_", "-"), // Add language if needed
+    // theme: "$org.matrix.msc2873.client_theme", // Add theme if needed
+  });
+
+  // Replace '$' encoded as %24 if necessary for template variables
+  const replacedParams = params.toString().replace(/%24/g, "$");
+  url.hash = `#?${replacedParams}`; // Use #? for query parameters in the hash
+
+  logger.info("Generated Element Call Widget URL:", url.toString()); // Use info level for clarity
   return url;
 }
 
+// --- Widget Interfaces and Classes ---
+
+// Interface describing the data structure for the widget
 interface IApp extends IWidget {
   "client": MatrixClient;
   "roomId": string;
-  "eventId"?: string; // not present on virtual widgets
-  // eslint-disable-next-line camelcase
-  "avatar_url"?: string; // MSC2765 https://github.com/matrix-org/matrix-doc/pull/2765
-  // Whether the widget was created from `widget_build_url` and thus is a call widget of some kind
+  "eventId"?: string;
+  "avatar_url"?: string;
   "io.element.managed_hybrid"?: boolean;
 }
 
+// Wrapper class for the widget definition
 class CinnyWidget extends Widget {
   public constructor(private rawDefinition: IApp) {
     super(rawDefinition);
   }
 }
 
+// Custom EventEmitter class to manage widget communication setup
 class Edget extends EventEmitter {
   private client: MatrixClient;
   private messaging: ClientWidgetApi | null = null;
   private mockWidget: CinnyWidget;
   private roomId?: string;
-  private type: string;
+  private type: string; // Type of the widget (e.g., 'm.call')
+  private readUpToMap: { [roomId: string]: string } = {}; // room ID to event ID
+  private readonly eventsToFeed = new WeakSet<MatrixEvent>();
+  private stickyPromise?: () => Promise<void>;
+
 
   constructor(private iapp: IApp) {
     super();
     this.client = iapp.client;
     this.roomId = iapp.roomId;
     this.type = iapp.type;
-
     this.mockWidget = new CinnyWidget(iapp);
   }
-  
-  startMessaging(iframe: HTMLIFrameElement) : any {
-      // Ensure driver is correctly instantiated with necessary parameters
-      // The second argument `[]` might need adjustment based on SmallWidgetDriver's needs (e.g., allowed capabilities)
-      const driver = new SmallWidgetDriver(this.client, [], this.mockWidget, WidgetKind.Room, true, this.roomId);
 
-      this.messaging = new ClientWidgetApi(this.mockWidget, iframe, driver);
-      this.messaging.on("preparing", () => this.emit("preparing"));
-      this.messaging.on("error:preparing", (err: unknown) => this.emit("error:preparing", err));
-      this.messaging.once("ready", () => {
-        this.emit("ready");
-    });
+  /**
+   * Initializes the widget messaging API.
+   * @param iframe - The HTMLIFrameElement to bind to.
+   * @returns The initialized ClientWidgetApi instance.
+   */
+  startMessaging(iframe: HTMLIFrameElement): ClientWidgetApi {
+    // Ensure the driver is correctly instantiated
+    // The capabilities array might need adjustment based on required permissions
+    const driver = new SmallWidgetDriver(this.client, [], this.mockWidget, WidgetKind.Room, true, this.roomId);
+
+    this.messaging = new ClientWidgetApi(this.mockWidget, iframe, driver);
+
+    // Emit events during the widget lifecycle
+    this.messaging.on("preparing", () => this.emit("preparing"));
+    this.messaging.on("error:preparing", (err: unknown) => this.emit("error:preparing", err));
+    this.messaging.once("ready", () => this.emit("ready"));
+    // this.messaging.on("capabilitiesNotified", () => this.emit("capabilitiesNotified")); // Uncomment if needed
+
+        // Populate the map of "read up to" events for this widget with the current event in every room.
+        // This is a bit inefficient, but should be okay. We do this for all rooms in case the widget
+        // requests timeline capabilities in other rooms down the road. It's just easier to manage here.
+        for (const room of this.client.getRooms()) {
+          // Timelines are most recent last
+          const events = room.getLiveTimeline()?.getEvents() || [];
+          const roomEvent = events[events.length - 1];
+          if (!roomEvent) continue; // force later code to think the room is fresh
+          this.readUpToMap[room.roomId] = roomEvent.getId()!;
+      }
+      
+    this.messaging.on("action:org.matrix.msc2876.read_events", ((ev: CustomEvent) => {
+      ev.preventDefault();
+      const room = this.client.getRoom(this.roomId);
+      logger.error("CAN WE GET MUCH HIGHER");
+
+      if (room === null) return [];
+      const state = room.getLiveTimeline().getState(Direction.Forward);
+      if (state === undefined) return [];
+      
+      //logger.error("CAN WE GET MUCH HIGHER");
+      const event = state.getStateEvents(ev.type, 'true');
+      logger.error(event);
+      logger.error(ev);
+      logger.error(state);
+      if (true === undefined) {
+          return state.getStateEvents(ev.type).map((e) => e.getEffectiveEvent() as IRoomEvent);
+      }
+      //const event = state.getStateEvents(ev.type, 'true');
+      logger.error(event);
+      return event === null ? [] : [event.getEffectiveEvent() as IRoomEvent];
+
+      this.messaging?.transport.reply(ev.detail, {event: ['CATS BABY']});
+    }));
+
+
+  
+    
+
+    this.client.on(ClientEvent.Event, this.onEvent);
+    this.client.on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
+    //this.client.on(RoomStateEvent.Events, this.onStateUpdate);
+    this.client.on(ClientEvent.ToDeviceEvent, this.onToDeviceEvent);
+    //this.client.on(RoomStateEvent.Events, this.onReadEvent);
+    // this.messaging.setViewedRoomId(this.roomId ?? null);
+    this.messaging.on(
+      `action:${WidgetApiFromWidgetAction.UpdateAlwaysOnScreen}`,
+      async (ev: CustomEvent<IStickyActionRequest>) => {
+          if (this.messaging?.hasCapability(MatrixCapabilities.AlwaysOnScreen)) {
+              ev.preventDefault();
+              if (ev.detail.data.value) {
+                  // If the widget wants to become sticky we wait for the stickyPromise to resolve
+                  if (this.stickyPromise) await this.stickyPromise();
+                    this.messaging.transport.reply(ev.detail, {});
+              }
+              // Stop being persistent can be done instantly
+              //MAKE PERSISTENT HERE
+              // Send the ack after the widget actually has become sticky.
+             ;
+          }
+       },
+    );
+
+    
+    logger.info(`Widget messaging started for widgetId: ${this.mockWidget.id}`);
     return this.messaging;
-    //this.messaging.on("capabilitiesNotified", () => this.emit("capabilitiesNotified"));
+  }
+    private onEvent = (ev: MatrixEvent): void => {
+        this.client.decryptEventIfNeeded(ev);
+        this.feedEvent(ev);
+    };
+
+    private onEventDecrypted = (ev: MatrixEvent): void => {
+        this.feedEvent(ev);
+    };
+
+  private onReadEvent = (ev: MatrixEvent): void => {
+    this.feedEvent(ev);
   }
 
+
+  private onStateUpdate = (ev: MatrixEvent): void => {
+    if (this.messaging === null) return;
+    const raw = ev.getEffectiveEvent();
+    logger.error(raw);
+    this.messaging.feedEvent(raw as IRoomEvent).catch((e) => {
+        logger.error("Error sending state update to widget: ", e);
+    });
+  };
+
+  private onToDeviceEvent = async (ev: MatrixEvent): Promise<void> => {
+    await this.client.decryptEventIfNeeded(ev);
+    if (ev.isDecryptionFailure()) return;
+    await this.messaging?.feedToDevice(ev.getEffectiveEvent() as IRoomEvent, ev.isEncrypted());
+};
+
+    /**
+     * Determines whether the event comes from a room that we've been invited to
+     * (in which case we likely don't have the full timeline).
+     */
+    private isFromInvite(ev: MatrixEvent): boolean {
+      const room = this.client.getRoom(ev.getRoomId());
+      return room?.getMyMembership() === KnownMembership.Invite;
+  }
+
+    /**
+     * Determines whether the event has a relation to an unknown parent.
+     */
+    private relatesToUnknown(ev: MatrixEvent): boolean {
+      // Replies to unknown events don't count
+      if (!ev.relationEventId || ev.replyEventId) return false;
+      const room = this.client.getRoom(ev.getRoomId());
+      return room === null || !room.findEventById(ev.relationEventId);
+  }
+
+  private arrayFastClone<T>(a: T[]): T[] {
+    return a.slice(0, a.length);
+  }
+
+  private advanceReadUpToMarker(ev: MatrixEvent): boolean {
+    const evId = ev.getId();
+    if (evId === undefined) return false;
+    const roomId = ev.getRoomId();
+    if (roomId === undefined) return false;
+    const room = this.client.getRoom(roomId);
+    if (room === null) return false;
+
+    const upToEventId = this.readUpToMap[ev.getRoomId()!];
+    if (!upToEventId) {
+        // There's no marker yet; start it at this event
+        this.readUpToMap[roomId] = evId;
+        return true;
+    }
+
+    // Small optimization for exact match (skip the search)
+    if (upToEventId === evId) return false;
+
+    // Timelines are most recent last, so reverse the order and limit ourselves to 100 events
+    // to avoid overusing the CPU.
+    const timeline = room.getLiveTimeline();
+    const events = this.arrayFastClone(timeline.getEvents()).reverse().slice(0, 100);
+
+    for (const timelineEvent of events) {
+        if (timelineEvent.getId() === upToEventId) {
+            // The event must be somewhere before the "read up to" marker
+            return false;
+        } else if (timelineEvent.getId() === ev.getId()) {
+            // The event is after the marker; advance it
+            this.readUpToMap[roomId] = evId;
+            return true;
+        }
+    }
+
+    // We can't say for sure whether the widget has seen the event; let's
+    // just assume that it has
+    return false;
 }
 
-const getWidgetData = (client: MatrixClient, roomId: string, currentData: Object, overwriteData: Object) : IWidgetData => {
-  let perParticipantE2EE = true;
+
+private feedEvent(ev: MatrixEvent): void {
+  if (this.messaging === null) return;
+
+  if (
+      // If we had decided earlier to feed this event to the widget, but
+      // it just wasn't ready, give it another try
+      this.eventsToFeed.delete(ev) ||
+      // Skip marker timeline check for events with relations to unknown parent because these
+      // events are not added to the timeline here and will be ignored otherwise:
+      // https://github.com/matrix-org/matrix-js-sdk/blob/d3dfcd924201d71b434af3d77343b5229b6ed75e/src/models/room.ts#L2207-L2213
+      this.relatesToUnknown(ev) ||
+      // Skip marker timeline check for rooms where membership is
+      // 'invite', otherwise the membership event from the invitation room
+      // will advance the marker and new state events will not be
+      // forwarded to the widget.
+      this.isFromInvite(ev) ||
+      // Check whether this event would be before or after our "read up to" marker. If it's
+      // before, or we can't decide, then we assume the widget will have already seen the event.
+      // If the event is after, or we don't have a marker for the room, then the marker will advance and we'll
+      // send it through.
+      // This approach of "read up to" prevents widgets receiving decryption spam from startup or
+      // receiving ancient events from backfill and such.
+      this.advanceReadUpToMarker(ev)
+  ) {
+      // If the event is still being decrypted, remember that we want to
+      // feed it to the widget (even if not strictly in the order given by
+      // the timeline) and get back to it later
+      if (ev.isBeingDecrypted() || ev.isDecryptionFailure()) {
+          this.eventsToFeed.add(ev);
+      } else {
+          const raw = ev.getEffectiveEvent();
+          this.messaging.feedEvent(raw as IRoomEvent, this.roomId ?? '').catch((e) => {
+              logger.error("Error sending event to widget: ", e);
+          });
+      }
+  }
+}
+
+  /**
+   * Stops the widget messaging and cleans up resources.
+   */
+  stopMessaging() {
+    if (this.messaging) {
+      // Potentially call stop() or remove listeners if the API provides such methods
+      // this.messaging.stop(); // Example if a stop method exists
+      this.messaging.removeAllListeners(); // Remove listeners attached by Edget
+      logger.info(`Widget messaging stopped for widgetId: ${this.mockWidget.id}`);
+      this.messaging = null;
+    }
+    // Clean up driver resources if necessary
+    // driver.stop(); // Example
+  }
+}
+
+/**
+ * Creates the data object for the widget.
+ * @param client - The MatrixClient instance.
+ * @param roomId - The ID of the room.
+ * @param currentData - Existing widget data.
+ * @param overwriteData - Data to merge or overwrite.
+ * @returns The final widget data object.
+ */
+const getWidgetData = (client: MatrixClient, roomId: string, currentData: object, overwriteData: object): IWidgetData => {
+  // Example: Determine E2EE based on room state if needed
+  let perParticipantE2EE = true; // Default or based on logic
+  // const roomEncryption = client.getRoom(roomId)?.currentState.getStateEvents(EventType.RoomEncryption, "");
+  // if (roomEncryption) perParticipantE2EE = true; // Simplified example
+
   return {
     ...currentData,
     ...overwriteData,
     perParticipantE2EE,
-  }
+  };
 };
 
-const createVirtualWidget = (client : MatrixClient, id : string, creatorUserId : string, name : string, type :string, url : string, waitForIframeLoad : boolean, data : IWidgetData, roomId : string) : IApp => {
+/**
+ * Creates a virtual widget definition (IApp).
+ * @param client - MatrixClient instance.
+ * @param id - Widget ID.
+ * @param creatorUserId - User ID of the creator.
+ * @param name - Widget display name.
+ * @param type - Widget type (e.g., 'm.call').
+ * @param url - Widget URL.
+ * @param waitForIframeLoad - Whether to wait for iframe load signal.
+ * @param data - Widget data.
+ * @param roomId - Room ID.
+ * @returns The IApp widget definition.
+ */
+const createVirtualWidget = (
+  client: MatrixClient,
+  id: string,
+  creatorUserId: string,
+  name: string,
+  type: string,
+  url: URL,
+  waitForIframeLoad: boolean,
+  data: IWidgetData,
+  roomId: string
+): IApp => {
   return {
     client,
     id,
     creatorUserId,
     name,
     type,
-    url,
+    url: url.toString(), // Store URL as string in the definition
     waitForIframeLoad,
     data,
     roomId,
+    // Add other required fields from IWidget if necessary
+    sender: creatorUserId, // Example: Assuming sender is the creator
+    content: { // Example content structure
+        type,
+        url: url.toString(),
+        name,
+        data,
+        creatorUserId,
+    }
+  };
+};
 
-  }
-}
 
+// --- RoomView Component ---
 
 export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
+  // Refs
   const roomInputRef = useRef<HTMLDivElement>(null);
-  const roomViewRef = useRef<HTMLDivElement>(null);
-  const iframeRef = useRef<HTMLIFrameElement>(null); // Ref for the iframe
+  const roomViewRef = useRef<HTMLDivElement>(null); // Ref for the main Page container
+  const iframeRef = useRef<HTMLIFrameElement>(null); // Ref for the iframe element
+  const widgetApiRef = useRef<ClientWidgetApi | null>(null); // Ref to store the widget API instance
+  const edgetRef = useRef<Edget | null>(null); // Ref to store the Edget instance
 
+  // State & Hooks
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
-
   const { roomId } = room;
   const editor = useEditor();
-
   const mx = useMatrixClient();
-
   const tombstoneEvent = useStateEvent(room, StateEvent.RoomTombstone);
   const powerLevels = usePowerLevelsContext();
   const { getPowerLevel, canSendEvent } = usePowerLevelsAPI(powerLevels);
   const myUserId = mx.getUserId();
-  const canMessage = myUserId
-    ? canSendEvent(EventType.RoomMessage, getPowerLevel(myUserId))
-    : false;
-
+  const canMessage = myUserId ? canSendEvent(EventType.RoomMessage, getPowerLevel(myUserId)) : false;
   const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
   const theme = useTheme();
   const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
-
   const isCall = room.isCallRoom(); // Determine if it's a call room
 
+  // Effect for focusing input on key press (for non-call rooms)
   useKeyDown(
     window,
     useCallback(
       (evt) => {
+        // Don't focus if an editable element already has focus
         if (editableActiveElement()) return;
-        // Check modal visibility more robustly if needed
-        if (document.querySelector('.ReactModalPortal > *')) { // Simple check if any modal portal has content
-             if (navigation.isRawModalVisible) return; // Skip if raw modal is explicitly visible
-             // Add other modal checks if necessary
+        // Don't focus if a modal is likely open
+        if (document.querySelector('.ReactModalPortal > *') || navigation.isRawModalVisible) {
+             return;
         }
+        // Don't focus if in a call view (no text editor)
+        if (isCall) return;
 
+        // Check if the key pressed should trigger focus or is paste hotkey
         if (shouldFocusMessageField(evt) || isKeyHotkey('mod+v', evt)) {
-          // Only focus editor if not in a call view where editor isn't present
-          if (!isCall && editor) {
+          if (editor) {
              ReactEditor.focus(editor);
           }
         }
       },
-      [editor, isCall] // Add isCall dependency
+      [editor, isCall] // Dependencies
     )
   );
 
-  // Effect to setup the widget API when the iframe is mounted for a call room
+  // Effect to setup and cleanup the widget API for call rooms
   useEffect(() => {
-    let widgetApi: ClientWidgetApi | null = null;
-    let driver: SmallWidgetDriver | null = null;
-
-    // Only run setup if it's a call room and the iframe ref is available
-    if (isCall && iframeRef.current) {
-      const iframe = iframeRef.current;
-      const url = getWidgetUrl(mx, roomId);
-
-      // Update iframe src if necessary (though it's set in JSX, this ensures it if URL changes)
-      if (iframe.src !== url) {
-        iframe.src = url;
+    // Only run if it's a call room
+    if (isCall) {
+      const iframeElement = iframeRef.current;
+      // Ensure iframe element exists before proceeding
+      if (!iframeElement) {
+        logger.warn(`Iframe element not found for room ${roomId}, cannot initialize widget.`);
+        return;
       }
 
-      logger.info(`Setting up widget API for room ${roomId}`);
+      logger.info(`Setting up Element Call widget for room ${roomId}`);
+      const userId = mx.getUserId() ?? ''; // Ensure userId is not null
+      const url = getWidgetUrl(mx, roomId); // Generate the widget URL
 
-      const userId : string = mx.getUserId() ?? '';
-
-      
+      // 1. Create the virtual widget definition
       const app = createVirtualWidget(
         mx,
-        `element-call-${roomId}`, 
+        `element-call-${roomId}`,
         userId,
-        'Element Call', 
-        'm.call', 
-        url, 
-        false, 
-        getWidgetData(
+        'Element Call',
+        'm.call', // Widget type
+        url,
+        false, // waitForIframeLoad - false as we manually control src loading
+        getWidgetData( // Widget data
           mx,
           roomId,
-          {},
-          {skipLobby: true,
-            preload: false,
-            returnToLobby: false,
-          }),
-        roomId);
-        
-        const widget = new Edget(app);
-        const test = widget.startMessaging(iframe);
-        logger.error('Before join');
-        test.transport.send("io.element.join", {});
-        test.emit("io.element.join");
-      // Return a cleanup function
+          {}, // Initial data (can be fetched if needed)
+          { // Overwrite/specific data
+            skipLobby: true, // Example configuration
+            preload: false, // Set preload based on whether you want background loading
+            returnToLobby: false, // Example configuration
+          }
+        ),
+        roomId
+      );
+
+      // 2. Instantiate Edget to manage widget communication
+      const edget = new Edget(app);
+      edgetRef.current = edget; // Store instance in ref
+
+      // 3. Start the widget messaging *before* setting the iframe src
+      try {
+        const widgetApi = edget.startMessaging(iframeElement);
+        widgetApiRef.current = widgetApi; // Store API instance
+
+        // Listen for the 'ready' event from the widget API
+        widgetApi.once("ready", () => {
+            logger.info(`Element Call widget is ready for room ${roomId}.`);
+            // Perform actions needed once the widget confirms it's ready
+            // Example: widgetApi.transport.send("action", { data: "..." });
+        });
+
+        widgetApi.on("action:im.vector.hangup", () => {
+            logger.info(`Received hangup action from widget in room ${roomId}.`);
+            // Handle hangup logic (e.g., navigate away, update room state)
+        });
+
+        // Add other necessary event listeners from the widget API
+        // widgetApi.on("action:some_other_action", (ev) => { ... });
+
+        // 4. Set the iframe src *after* messaging is initialized
+        logger.info(`Setting iframe src for room ${roomId}: ${url.toString()}`);
+        iframeElement.src = url.toString();
+
+      } catch (error) {
+        logger.error(`Error initializing widget messaging for room ${roomId}:`, error);
+        // Handle initialization error (e.g., show an error message to the user)
+      }
+
+      // 5. Return cleanup function
       return () => {
-        logger.info(`Cleaning up widget API for room ${roomId}`);
-        // Implement proper cleanup for ClientWidgetApi and SmallWidgetDriver
-        // This might involve calling stop methods, removing listeners, etc.
-        // Example: widgetApi?.stop();
-        // Example: driver?.stop();
-        widgetApi;// = null;
-        driver;// = null;
-        // Clear iframe src to stop loading/activity
+        logger.info(`Cleaning up Element Call widget for room ${roomId}`);
+        // Stop messaging and clean up resources
+        if (edgetRef.current) {
+          edgetRef.current.stopMessaging();
+          edgetRef.current = null;
+        }
+        widgetApiRef.current = null; // Clear API ref
+
+        // Clear iframe src to stop activity and free resources
         if (iframeRef.current) {
             iframeRef.current.src = 'about:blank';
+            logger.info(`Cleared iframe src for room ${roomId}`);
         }
       };
+    } else {
+      // If not a call room, ensure any previous call state is cleaned up
+      // (This might be redundant if component unmounts/remounts correctly, but safe)
+      if (widgetApiRef.current && iframeRef.current) {
+        logger.info(`Room ${roomId} is no longer a call room, ensuring cleanup.`);
+         if (edgetRef.current) {
+          edgetRef.current.stopMessaging();
+          edgetRef.current = null;
+        }
+        widgetApiRef.current = null;
+        iframeRef.current.src = 'about:blank';
+      }
     }
 
-    // If it's not a call room or the iframe isn't ready, ensure no setup runs/is cleaned up
+    // Explicitly return undefined if not a call room or no cleanup needed initially
     return undefined;
 
-  }, [isCall, mx, roomId]); // Dependencies: run effect if call status, client, or room ID changes
+  }, [isCall, mx, roomId, editor]); // Dependencies: run effect if these change
 
 
+  // --- Render Logic ---
+
   // Render Call View
   if (isCall) {
-    const url = getWidgetUrl(mx, roomId);
+    // Initial src is set to about:blank. The useEffect hook will set the actual src later.
     return (
-      // Attach roomViewRef here if <Page> is the main container you want to reference
-      <Page ref={roomViewRef} style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <Page ref={roomViewRef} style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
         <RoomViewHeader />
-        {/* Embed the iframe directly. Ensure parent has definite height or use flex grow */}
-        <Box grow="Yes" style={{ overflow: 'hidden' }}> {/* Use Box with grow */}
+        {/* Box grows to fill available space */}
+        <Box grow="Yes" style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
             <iframe
               ref={iframeRef}
-              src={url} // Set initial source
-              style={{ width: '100%', height: '100%', border: 'none' }}
-              title={`Element Call - ${room.name || roomId}`} // Accessible title
-              // Add necessary sandbox/allow attributes for WebRTC, etc.
-              sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-downloads"
-              allow="microphone; camera; display-capture; autoplay;"
+              src="about:blank" // Start with a blank page
+              style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
+              title={`Element Call - ${room.name || roomId}`}
+              // Sandbox attributes for security. Adjust as needed by Element Call.
+              //sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
+              // Permissions policy for features like camera, microphone.
+              allow="microphone; camera; display-capture; autoplay; clipboard-write;"
             />
         </Box>
-         {/* You might want a minimal footer or status bar here */}
+         {/* Optional: Minimal footer or status indicators */}
       </Page>
     );
   }
@@ -309,7 +632,8 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
   return (
     <Page ref={roomViewRef}>
       <RoomViewHeader />
-      <Box grow="Yes" direction="Column">
+      {/* Main timeline area */}
+      <Box grow="Yes" direction="Column" style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
         <RoomTimeline
           key={roomId} // Key helps React reset state when room changes
           room={room}
@@ -321,8 +645,9 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
         />
         <RoomViewTyping room={room} />
       </Box>
+      {/* Input area and potentially other footer elements */}
       <Box shrink="No" direction="Column">
-        <div style={{ padding: `0 ${config.space.S400}` }}>
+        <div style={{ padding: `0 ${config.space.S400}` }}> {/* Use theme spacing */}
           {tombstoneEvent ? (
             <RoomTombstone
               roomId={roomId}
@@ -336,7 +661,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
                   room={room}
                   editor={editor}
                   roomId={roomId}
-                  fileDropContainerRef={roomViewRef} // Pass the Page ref here if needed
+                  fileDropContainerRef={roomViewRef} // Pass the Page ref for file drops
                   ref={roomInputRef}
                   getPowerLevelTag={getPowerLevelTag}
                   accessibleTagColors={accessibleTagColors}
@@ -353,8 +678,9 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
             </>
           )}
         </div>
+        {/* Following/Activity Feed */}
         {hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
       </Box>
     </Page>
   );
-}
\ No newline at end of file
+}

From b59a5ac30708e17f398de64c6c7311b2d100a179 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Mon, 14 Apr 2025 04:30:13 -0500
Subject: [PATCH 010/242] add a generic getKnownRooms

---
 src/app/features/room/SmallWidgetDriver.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/app/features/room/SmallWidgetDriver.ts b/src/app/features/room/SmallWidgetDriver.ts
index 781f425e..0833111e 100644
--- a/src/app/features/room/SmallWidgetDriver.ts
+++ b/src/app/features/room/SmallWidgetDriver.ts
@@ -405,7 +405,7 @@ export class SmallWidgetDriver extends WidgetDriver {
         const state = room.getLiveTimeline().getState(Direction.Forward);
         if (state === undefined) return [];
 
-        if (stateKey === undefined)
+        if (stateKey === undefined) 
             return state.getStateEvents(eventType).map((e) => e.getEffectiveEvent() as IRoomEvent);
         const event = state.getStateEvents(eventType, stateKey);
         return event === null ? [] : [event.getEffectiveEvent() as IRoomEvent];
@@ -500,13 +500,11 @@ export class SmallWidgetDriver extends WidgetDriver {
      * client.
      * @returns The room IDs.
      */
-    /*
     public getKnownRooms(): string[] {
         return this.mxClient
-            .getVisibleRooms(SettingsStore.getValue("feature_dynamic_room_predecessors"))
+            .getVisibleRooms()
             .map((r) => r.roomId);
     }
-            */
 
     /**
      * Expresses a {@link MatrixError} as a JSON payload

From 8baa3a2cf9cafbc4314519204bef5e69b0042cab Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Mon, 14 Apr 2025 04:30:23 -0500
Subject: [PATCH 011/242] set versions

---
 package.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 2ea322ee..56595f39 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,6 @@
     "dateformat": "5.0.3",
     "dayjs": "1.11.10",
     "domhandler": "5.0.3",
-    "@element-hq/element-call-embedded": "^0.9.0",
     "emojibase": "15.3.1",
     "emojibase-data": "15.3.2",
     "file-saver": "2.0.5",
@@ -59,6 +58,7 @@
     "linkify-react": "4.1.3",
     "linkifyjs": "4.1.3",
     "matrix-js-sdk": "35.0.0",
+    "matrix-widget-api": "1.11.0",
     "millify": "6.1.0",
     "pdfjs-dist": "4.2.67",
     "prismjs": "1.30.0",
@@ -84,6 +84,7 @@
     "ua-parser-js": "1.0.35"
   },
   "devDependencies": {
+    "@element-hq/element-call-embedded": "0.9.0",
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@rollup/plugin-inject": "5.0.3",
     "@rollup/plugin-wasm": "6.1.1",
@@ -116,4 +117,5 @@
     "vite-plugin-static-copy": "1.0.4",
     "vite-plugin-top-level-await": "1.4.4"
   }
+
 }

From e1a080e50c92ec85f2a7e1ef03d2b1fdf42b9bd0 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Mon, 14 Apr 2025 09:43:36 -0500
Subject: [PATCH 012/242] clean up roomview removing unursed and refactoring
 superfluous to own files

---
 src/app/features/room/RoomView.tsx | 477 ++++-------------------------
 1 file changed, 54 insertions(+), 423 deletions(-)

diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx
index 9cccbd3e..46c62f62 100644
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -1,33 +1,31 @@
 import React, { useCallback, useRef, useEffect } from 'react';
 import { Box, Text, config } from 'folds'; // Assuming 'folds' is a UI library
-import { CallEvent, ClientEvent, Direction, EventType, MatrixClient, MatrixEvent, MatrixEventEvent, Room, RoomStateEvent } from 'matrix-js-sdk';
-import { KnownMembership } from "matrix-js-sdk/src/types";
+import { EventType, Room } from 'matrix-js-sdk';
 import { ReactEditor } from 'slate-react';
 import { isKeyHotkey } from 'is-hotkey';
-import { useStateEvent } from '../../hooks/useStateEvent'; // Assuming custom hook
-import { StateEvent } from '../../../types/matrix/room'; // Assuming custom types
-import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels'; // Assuming custom hook
-import { useMatrixClient } from '../../hooks/useMatrixClient'; // Assuming custom hook
-import { useEditor } from '../../components/editor'; // Assuming custom hook/component
+import { ClientWidgetApi } from 'matrix-widget-api';
+import { logger } from 'matrix-js-sdk/lib/logger';
+import { useStateEvent } from '../../hooks/useStateEvent';
+import { StateEvent } from '../../../types/matrix/room';
+import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useEditor } from '../../components/editor';
 import { RoomInputPlaceholder } from './RoomInputPlaceholder';
 import { RoomTimeline } from './RoomTimeline';
 import { RoomViewTyping } from './RoomViewTyping';
 import { RoomTombstone } from './RoomTombstone';
 import { RoomInput } from './RoomInput';
 import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
-import { Page } from '../../components/page'; // Assuming custom component
+import { Page } from '../../components/page';
 import { RoomViewHeader } from './RoomViewHeader';
-import { useKeyDown } from '../../hooks/useKeyDown'; // Assuming custom hook
-import { editableActiveElement } from '../../utils/dom'; // Assuming utility function
-import navigation from '../../../client/state/navigation'; // Assuming navigation state management
-import { settingsAtom } from '../../state/settings'; // Assuming state management (e.g., Jotai/Recoil)
-import { useSetting } from '../../state/hooks/settings'; // Assuming custom hook
-import { useAccessibleTagColors, usePowerLevelTags } from '../../hooks/usePowerLevelTags'; // Assuming custom hook
-import { useTheme } from '../../hooks/useTheme'; // Assuming custom hook
-import { logger } from 'matrix-js-sdk/lib/logger';
-import { ClientWidgetApi, IRoomEvent, IStickyActionRequest, IWidget, IWidgetData, MatrixCapabilities, Widget, WidgetApiFromWidgetAction, type IWidgetApiRequestEmptyData, WidgetKind, IWidgetApiRequest } from 'matrix-widget-api';
-import { SmallWidgetDriver } from './SmallWidgetDriver'; // Assuming custom widget driver
-import EventEmitter from 'events';
+import { useKeyDown } from '../../hooks/useKeyDown';
+import { editableActiveElement } from '../../utils/dom';
+import navigation from '../../../client/state/navigation';
+import { settingsAtom } from '../../state/settings';
+import { useSetting } from '../../state/hooks/settings';
+import { useAccessibleTagColors, usePowerLevelTags } from '../../hooks/usePowerLevelTags';
+import { useTheme } from '../../hooks/useTheme';
+import { createVirtualWidget, Edget, getWidgetData, getWidgetUrl } from './SmallWidget';
 
 // --- Constants ---
 const FN_KEYS_REGEX = /^F\d+$/;
@@ -73,379 +71,6 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
   return true;
 };
 
-/**
- * Generates the URL for the Element Call widget.
- * @param mx - The MatrixClient instance.
- * @param roomId - The ID of the room.
- * @returns The generated URL object.
- */
-const getWidgetUrl = (mx: MatrixClient, roomId: string): URL => {
-  const baseUrl = window.location.origin;
-  // Ensure the path is correct relative to the application's structure
-  let url = new URL("./dist/element-call/dist/index.html", baseUrl);
-
-  const params = new URLSearchParams({
-    embed: "true",
-    widgetId: `element-call-${roomId}`,
-    preload: "true", // Consider if preloading is always desired
-    skipLobby: "false", // Configurable based on needs
-    returnToLobby: "true",
-    perParticipantE2EE: "true",
-    hideHeader: "true",
-    userId: mx.getUserId()!,
-    deviceId: mx.getDeviceId()!,
-    roomId: roomId,
-    baseUrl: mx.baseUrl!, // Ensure baseUrl is available
-    parentUrl: window.location.origin, // Optional, might be needed by widget
-    // lang: getCurrentLanguage().replace("_", "-"), // Add language if needed
-    // theme: "$org.matrix.msc2873.client_theme", // Add theme if needed
-  });
-
-  // Replace '$' encoded as %24 if necessary for template variables
-  const replacedParams = params.toString().replace(/%24/g, "$");
-  url.hash = `#?${replacedParams}`; // Use #? for query parameters in the hash
-
-  logger.info("Generated Element Call Widget URL:", url.toString()); // Use info level for clarity
-  return url;
-}
-
-// --- Widget Interfaces and Classes ---
-
-// Interface describing the data structure for the widget
-interface IApp extends IWidget {
-  "client": MatrixClient;
-  "roomId": string;
-  "eventId"?: string;
-  "avatar_url"?: string;
-  "io.element.managed_hybrid"?: boolean;
-}
-
-// Wrapper class for the widget definition
-class CinnyWidget extends Widget {
-  public constructor(private rawDefinition: IApp) {
-    super(rawDefinition);
-  }
-}
-
-// Custom EventEmitter class to manage widget communication setup
-class Edget extends EventEmitter {
-  private client: MatrixClient;
-  private messaging: ClientWidgetApi | null = null;
-  private mockWidget: CinnyWidget;
-  private roomId?: string;
-  private type: string; // Type of the widget (e.g., 'm.call')
-  private readUpToMap: { [roomId: string]: string } = {}; // room ID to event ID
-  private readonly eventsToFeed = new WeakSet<MatrixEvent>();
-  private stickyPromise?: () => Promise<void>;
-
-
-  constructor(private iapp: IApp) {
-    super();
-    this.client = iapp.client;
-    this.roomId = iapp.roomId;
-    this.type = iapp.type;
-    this.mockWidget = new CinnyWidget(iapp);
-  }
-
-  /**
-   * Initializes the widget messaging API.
-   * @param iframe - The HTMLIFrameElement to bind to.
-   * @returns The initialized ClientWidgetApi instance.
-   */
-  startMessaging(iframe: HTMLIFrameElement): ClientWidgetApi {
-    // Ensure the driver is correctly instantiated
-    // The capabilities array might need adjustment based on required permissions
-    const driver = new SmallWidgetDriver(this.client, [], this.mockWidget, WidgetKind.Room, true, this.roomId);
-
-    this.messaging = new ClientWidgetApi(this.mockWidget, iframe, driver);
-
-    // Emit events during the widget lifecycle
-    this.messaging.on("preparing", () => this.emit("preparing"));
-    this.messaging.on("error:preparing", (err: unknown) => this.emit("error:preparing", err));
-    this.messaging.once("ready", () => this.emit("ready"));
-    // this.messaging.on("capabilitiesNotified", () => this.emit("capabilitiesNotified")); // Uncomment if needed
-
-        // Populate the map of "read up to" events for this widget with the current event in every room.
-        // This is a bit inefficient, but should be okay. We do this for all rooms in case the widget
-        // requests timeline capabilities in other rooms down the road. It's just easier to manage here.
-        for (const room of this.client.getRooms()) {
-          // Timelines are most recent last
-          const events = room.getLiveTimeline()?.getEvents() || [];
-          const roomEvent = events[events.length - 1];
-          if (!roomEvent) continue; // force later code to think the room is fresh
-          this.readUpToMap[room.roomId] = roomEvent.getId()!;
-      }
-      
-    this.messaging.on("action:org.matrix.msc2876.read_events", ((ev: CustomEvent) => {
-      ev.preventDefault();
-      const room = this.client.getRoom(this.roomId);
-      logger.error("CAN WE GET MUCH HIGHER");
-
-      if (room === null) return [];
-      const state = room.getLiveTimeline().getState(Direction.Forward);
-      if (state === undefined) return [];
-      
-      //logger.error("CAN WE GET MUCH HIGHER");
-      const event = state.getStateEvents(ev.type, 'true');
-      logger.error(event);
-      logger.error(ev);
-      logger.error(state);
-      if (true === undefined) {
-          return state.getStateEvents(ev.type).map((e) => e.getEffectiveEvent() as IRoomEvent);
-      }
-      //const event = state.getStateEvents(ev.type, 'true');
-      logger.error(event);
-      return event === null ? [] : [event.getEffectiveEvent() as IRoomEvent];
-
-      this.messaging?.transport.reply(ev.detail, {event: ['CATS BABY']});
-    }));
-
-
-  
-    
-
-    this.client.on(ClientEvent.Event, this.onEvent);
-    this.client.on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
-    //this.client.on(RoomStateEvent.Events, this.onStateUpdate);
-    this.client.on(ClientEvent.ToDeviceEvent, this.onToDeviceEvent);
-    //this.client.on(RoomStateEvent.Events, this.onReadEvent);
-    // this.messaging.setViewedRoomId(this.roomId ?? null);
-    this.messaging.on(
-      `action:${WidgetApiFromWidgetAction.UpdateAlwaysOnScreen}`,
-      async (ev: CustomEvent<IStickyActionRequest>) => {
-          if (this.messaging?.hasCapability(MatrixCapabilities.AlwaysOnScreen)) {
-              ev.preventDefault();
-              if (ev.detail.data.value) {
-                  // If the widget wants to become sticky we wait for the stickyPromise to resolve
-                  if (this.stickyPromise) await this.stickyPromise();
-                    this.messaging.transport.reply(ev.detail, {});
-              }
-              // Stop being persistent can be done instantly
-              //MAKE PERSISTENT HERE
-              // Send the ack after the widget actually has become sticky.
-             ;
-          }
-       },
-    );
-
-    
-    logger.info(`Widget messaging started for widgetId: ${this.mockWidget.id}`);
-    return this.messaging;
-  }
-    private onEvent = (ev: MatrixEvent): void => {
-        this.client.decryptEventIfNeeded(ev);
-        this.feedEvent(ev);
-    };
-
-    private onEventDecrypted = (ev: MatrixEvent): void => {
-        this.feedEvent(ev);
-    };
-
-  private onReadEvent = (ev: MatrixEvent): void => {
-    this.feedEvent(ev);
-  }
-
-
-  private onStateUpdate = (ev: MatrixEvent): void => {
-    if (this.messaging === null) return;
-    const raw = ev.getEffectiveEvent();
-    logger.error(raw);
-    this.messaging.feedEvent(raw as IRoomEvent).catch((e) => {
-        logger.error("Error sending state update to widget: ", e);
-    });
-  };
-
-  private onToDeviceEvent = async (ev: MatrixEvent): Promise<void> => {
-    await this.client.decryptEventIfNeeded(ev);
-    if (ev.isDecryptionFailure()) return;
-    await this.messaging?.feedToDevice(ev.getEffectiveEvent() as IRoomEvent, ev.isEncrypted());
-};
-
-    /**
-     * Determines whether the event comes from a room that we've been invited to
-     * (in which case we likely don't have the full timeline).
-     */
-    private isFromInvite(ev: MatrixEvent): boolean {
-      const room = this.client.getRoom(ev.getRoomId());
-      return room?.getMyMembership() === KnownMembership.Invite;
-  }
-
-    /**
-     * Determines whether the event has a relation to an unknown parent.
-     */
-    private relatesToUnknown(ev: MatrixEvent): boolean {
-      // Replies to unknown events don't count
-      if (!ev.relationEventId || ev.replyEventId) return false;
-      const room = this.client.getRoom(ev.getRoomId());
-      return room === null || !room.findEventById(ev.relationEventId);
-  }
-
-  private arrayFastClone<T>(a: T[]): T[] {
-    return a.slice(0, a.length);
-  }
-
-  private advanceReadUpToMarker(ev: MatrixEvent): boolean {
-    const evId = ev.getId();
-    if (evId === undefined) return false;
-    const roomId = ev.getRoomId();
-    if (roomId === undefined) return false;
-    const room = this.client.getRoom(roomId);
-    if (room === null) return false;
-
-    const upToEventId = this.readUpToMap[ev.getRoomId()!];
-    if (!upToEventId) {
-        // There's no marker yet; start it at this event
-        this.readUpToMap[roomId] = evId;
-        return true;
-    }
-
-    // Small optimization for exact match (skip the search)
-    if (upToEventId === evId) return false;
-
-    // Timelines are most recent last, so reverse the order and limit ourselves to 100 events
-    // to avoid overusing the CPU.
-    const timeline = room.getLiveTimeline();
-    const events = this.arrayFastClone(timeline.getEvents()).reverse().slice(0, 100);
-
-    for (const timelineEvent of events) {
-        if (timelineEvent.getId() === upToEventId) {
-            // The event must be somewhere before the "read up to" marker
-            return false;
-        } else if (timelineEvent.getId() === ev.getId()) {
-            // The event is after the marker; advance it
-            this.readUpToMap[roomId] = evId;
-            return true;
-        }
-    }
-
-    // We can't say for sure whether the widget has seen the event; let's
-    // just assume that it has
-    return false;
-}
-
-
-private feedEvent(ev: MatrixEvent): void {
-  if (this.messaging === null) return;
-
-  if (
-      // If we had decided earlier to feed this event to the widget, but
-      // it just wasn't ready, give it another try
-      this.eventsToFeed.delete(ev) ||
-      // Skip marker timeline check for events with relations to unknown parent because these
-      // events are not added to the timeline here and will be ignored otherwise:
-      // https://github.com/matrix-org/matrix-js-sdk/blob/d3dfcd924201d71b434af3d77343b5229b6ed75e/src/models/room.ts#L2207-L2213
-      this.relatesToUnknown(ev) ||
-      // Skip marker timeline check for rooms where membership is
-      // 'invite', otherwise the membership event from the invitation room
-      // will advance the marker and new state events will not be
-      // forwarded to the widget.
-      this.isFromInvite(ev) ||
-      // Check whether this event would be before or after our "read up to" marker. If it's
-      // before, or we can't decide, then we assume the widget will have already seen the event.
-      // If the event is after, or we don't have a marker for the room, then the marker will advance and we'll
-      // send it through.
-      // This approach of "read up to" prevents widgets receiving decryption spam from startup or
-      // receiving ancient events from backfill and such.
-      this.advanceReadUpToMarker(ev)
-  ) {
-      // If the event is still being decrypted, remember that we want to
-      // feed it to the widget (even if not strictly in the order given by
-      // the timeline) and get back to it later
-      if (ev.isBeingDecrypted() || ev.isDecryptionFailure()) {
-          this.eventsToFeed.add(ev);
-      } else {
-          const raw = ev.getEffectiveEvent();
-          this.messaging.feedEvent(raw as IRoomEvent, this.roomId ?? '').catch((e) => {
-              logger.error("Error sending event to widget: ", e);
-          });
-      }
-  }
-}
-
-  /**
-   * Stops the widget messaging and cleans up resources.
-   */
-  stopMessaging() {
-    if (this.messaging) {
-      // Potentially call stop() or remove listeners if the API provides such methods
-      // this.messaging.stop(); // Example if a stop method exists
-      this.messaging.removeAllListeners(); // Remove listeners attached by Edget
-      logger.info(`Widget messaging stopped for widgetId: ${this.mockWidget.id}`);
-      this.messaging = null;
-    }
-    // Clean up driver resources if necessary
-    // driver.stop(); // Example
-  }
-}
-
-/**
- * Creates the data object for the widget.
- * @param client - The MatrixClient instance.
- * @param roomId - The ID of the room.
- * @param currentData - Existing widget data.
- * @param overwriteData - Data to merge or overwrite.
- * @returns The final widget data object.
- */
-const getWidgetData = (client: MatrixClient, roomId: string, currentData: object, overwriteData: object): IWidgetData => {
-  // Example: Determine E2EE based on room state if needed
-  let perParticipantE2EE = true; // Default or based on logic
-  // const roomEncryption = client.getRoom(roomId)?.currentState.getStateEvents(EventType.RoomEncryption, "");
-  // if (roomEncryption) perParticipantE2EE = true; // Simplified example
-
-  return {
-    ...currentData,
-    ...overwriteData,
-    perParticipantE2EE,
-  };
-};
-
-/**
- * Creates a virtual widget definition (IApp).
- * @param client - MatrixClient instance.
- * @param id - Widget ID.
- * @param creatorUserId - User ID of the creator.
- * @param name - Widget display name.
- * @param type - Widget type (e.g., 'm.call').
- * @param url - Widget URL.
- * @param waitForIframeLoad - Whether to wait for iframe load signal.
- * @param data - Widget data.
- * @param roomId - Room ID.
- * @returns The IApp widget definition.
- */
-const createVirtualWidget = (
-  client: MatrixClient,
-  id: string,
-  creatorUserId: string,
-  name: string,
-  type: string,
-  url: URL,
-  waitForIframeLoad: boolean,
-  data: IWidgetData,
-  roomId: string
-): IApp => {
-  return {
-    client,
-    id,
-    creatorUserId,
-    name,
-    type,
-    url: url.toString(), // Store URL as string in the definition
-    waitForIframeLoad,
-    data,
-    roomId,
-    // Add other required fields from IWidget if necessary
-    sender: creatorUserId, // Example: Assuming sender is the creator
-    content: { // Example content structure
-        type,
-        url: url.toString(),
-        name,
-        data,
-        creatorUserId,
-    }
-  };
-};
-
-
 // --- RoomView Component ---
 
 export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
@@ -465,7 +90,9 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
   const powerLevels = usePowerLevelsContext();
   const { getPowerLevel, canSendEvent } = usePowerLevelsAPI(powerLevels);
   const myUserId = mx.getUserId();
-  const canMessage = myUserId ? canSendEvent(EventType.RoomMessage, getPowerLevel(myUserId)) : false;
+  const canMessage = myUserId
+    ? canSendEvent(EventType.RoomMessage, getPowerLevel(myUserId))
+    : false;
   const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
   const theme = useTheme();
   const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
@@ -480,7 +107,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
         if (editableActiveElement()) return;
         // Don't focus if a modal is likely open
         if (document.querySelector('.ReactModalPortal > *') || navigation.isRawModalVisible) {
-             return;
+          return;
         }
         // Don't focus if in a call view (no text editor)
         if (isCall) return;
@@ -488,7 +115,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
         // Check if the key pressed should trigger focus or is paste hotkey
         if (shouldFocusMessageField(evt) || isKeyHotkey('mod+v', evt)) {
           if (editor) {
-             ReactEditor.focus(editor);
+            ReactEditor.focus(editor);
           }
         }
       },
@@ -520,11 +147,13 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
         'm.call', // Widget type
         url,
         false, // waitForIframeLoad - false as we manually control src loading
-        getWidgetData( // Widget data
+        getWidgetData(
+          // Widget data
           mx,
           roomId,
           {}, // Initial data (can be fetched if needed)
-          { // Overwrite/specific data
+          {
+            // Overwrite/specific data
             skipLobby: true, // Example configuration
             preload: false, // Set preload based on whether you want background loading
             returnToLobby: false, // Example configuration
@@ -543,15 +172,15 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
         widgetApiRef.current = widgetApi; // Store API instance
 
         // Listen for the 'ready' event from the widget API
-        widgetApi.once("ready", () => {
-            logger.info(`Element Call widget is ready for room ${roomId}.`);
-            // Perform actions needed once the widget confirms it's ready
-            // Example: widgetApi.transport.send("action", { data: "..." });
+        widgetApi.once('ready', () => {
+          logger.info(`Element Call widget is ready for room ${roomId}.`);
+          // Perform actions needed once the widget confirms it's ready
+          // Example: widgetApi.transport.send("action", { data: "..." });
         });
 
-        widgetApi.on("action:im.vector.hangup", () => {
-            logger.info(`Received hangup action from widget in room ${roomId}.`);
-            // Handle hangup logic (e.g., navigate away, update room state)
+        widgetApi.on('action:im.vector.hangup', () => {
+          logger.info(`Received hangup action from widget in room ${roomId}.`);
+          // Handle hangup logic (e.g., navigate away, update room state)
         });
 
         // Add other necessary event listeners from the widget API
@@ -560,7 +189,6 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
         // 4. Set the iframe src *after* messaging is initialized
         logger.info(`Setting iframe src for room ${roomId}: ${url.toString()}`);
         iframeElement.src = url.toString();
-
       } catch (error) {
         logger.error(`Error initializing widget messaging for room ${roomId}:`, error);
         // Handle initialization error (e.g., show an error message to the user)
@@ -578,8 +206,8 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
 
         // Clear iframe src to stop activity and free resources
         if (iframeRef.current) {
-            iframeRef.current.src = 'about:blank';
-            logger.info(`Cleared iframe src for room ${roomId}`);
+          iframeRef.current.src = 'about:blank';
+          logger.info(`Cleared iframe src for room ${roomId}`);
         }
       };
     } else {
@@ -587,7 +215,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
       // (This might be redundant if component unmounts/remounts correctly, but safe)
       if (widgetApiRef.current && iframeRef.current) {
         logger.info(`Room ${roomId} is no longer a call room, ensuring cleanup.`);
-         if (edgetRef.current) {
+        if (edgetRef.current) {
           edgetRef.current.stopMessaging();
           edgetRef.current = null;
         }
@@ -598,32 +226,33 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
 
     // Explicitly return undefined if not a call room or no cleanup needed initially
     return undefined;
-
   }, [isCall, mx, roomId, editor]); // Dependencies: run effect if these change
 
-
   // --- Render Logic ---
 
   // Render Call View
   if (isCall) {
     // Initial src is set to about:blank. The useEffect hook will set the actual src later.
     return (
-      <Page ref={roomViewRef} style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
+      <Page
+        ref={roomViewRef}
+        style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}
+      >
         <RoomViewHeader />
         {/* Box grows to fill available space */}
         <Box grow="Yes" style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
-            <iframe
-              ref={iframeRef}
-              src="about:blank" // Start with a blank page
-              style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
-              title={`Element Call - ${room.name || roomId}`}
-              // Sandbox attributes for security. Adjust as needed by Element Call.
-              //sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
-              // Permissions policy for features like camera, microphone.
-              allow="microphone; camera; display-capture; autoplay; clipboard-write;"
-            />
+          <iframe
+            ref={iframeRef}
+            src="about:blank" // Start with a blank page
+            style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
+            title={`Element Call - ${room.name || roomId}`}
+            // Sandbox attributes for security. Adjust as needed by Element Call.
+            //sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
+            // Permissions policy for features like camera, microphone.
+            allow="microphone; camera; display-capture; autoplay; clipboard-write;"
+          />
         </Box>
-         {/* Optional: Minimal footer or status indicators */}
+        {/* Optional: Minimal footer or status indicators */}
       </Page>
     );
   }
@@ -647,7 +276,9 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
       </Box>
       {/* Input area and potentially other footer elements */}
       <Box shrink="No" direction="Column">
-        <div style={{ padding: `0 ${config.space.S400}` }}> {/* Use theme spacing */}
+        <div style={{ padding: `0 ${config.space.S400}` }}>
+          {' '}
+          {/* Use theme spacing */}
           {tombstoneEvent ? (
             <RoomTombstone
               roomId={roomId}

From 9b23c757fe6030bc314c65b53dd16cecb24a3070 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Mon, 14 Apr 2025 09:43:51 -0500
Subject: [PATCH 013/242] dummy meta class

---
 src/app/features/room/CinnyWidget.ts | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 src/app/features/room/CinnyWidget.ts

diff --git a/src/app/features/room/CinnyWidget.ts b/src/app/features/room/CinnyWidget.ts
new file mode 100644
index 00000000..3894af87
--- /dev/null
+++ b/src/app/features/room/CinnyWidget.ts
@@ -0,0 +1,9 @@
+import { Widget } from 'matrix-widget-api';
+import { IApp } from './SmallWidget';
+
+// Wrapper class for the widget definition
+export class CinnyWidget extends Widget {
+  public constructor(private rawDefinition: IApp) {
+    super(rawDefinition);
+  }
+}

From 8bd812b789be6f226a44ae44202ae5ff79a4b8af Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Mon, 14 Apr 2025 09:44:06 -0500
Subject: [PATCH 014/242] widget class

---
 src/app/features/room/SmallWidget.ts | 392 +++++++++++++++++++++++++++
 1 file changed, 392 insertions(+)
 create mode 100644 src/app/features/room/SmallWidget.ts

diff --git a/src/app/features/room/SmallWidget.ts b/src/app/features/room/SmallWidget.ts
new file mode 100644
index 00000000..19f622f6
--- /dev/null
+++ b/src/app/features/room/SmallWidget.ts
@@ -0,0 +1,392 @@
+import EventEmitter from 'events';
+import { KnownMembership, MatrixClient, MatrixEvent } from 'matrix-js-sdk';
+import {
+  ClientWidgetApi,
+  IRoomEvent,
+  IStickyActionRequest,
+  IWidget,
+  IWidgetData,
+  MatrixCapabilities,
+  WidgetKind,
+} from 'matrix-widget-api';
+import { logger } from 'matrix-js-sdk/lib/logger';
+import { CinnyWidget } from './CinnyWidget';
+import { SmallWidgetDriver } from './SmallWidgetDriver';
+
+/**
+ * Generates the URL for the Element Call widget.
+ * @param mx - The MatrixClient instance.
+ * @param roomId - The ID of the room.
+ * @returns The generated URL object.
+ */
+export const getWidgetUrl = (mx: MatrixClient, roomId: string): URL => {
+  const baseUrl = window.location.origin;
+  // Ensure the path is correct relative to the application's structure
+  let url = new URL('./dist/element-call/dist/index.html', baseUrl);
+
+  const params = new URLSearchParams({
+    embed: 'true',
+    widgetId: `element-call-${roomId}`,
+    preload: 'true', // Consider if preloading is always desired
+    skipLobby: 'false', // Configurable based on needs
+    returnToLobby: 'true',
+    perParticipantE2EE: 'true',
+    hideHeader: 'true',
+    userId: mx.getUserId()!,
+    deviceId: mx.getDeviceId()!,
+    roomId: roomId,
+    baseUrl: mx.baseUrl!, // Ensure baseUrl is available
+    parentUrl: window.location.origin, // Optional, might be needed by widget
+    // lang: getCurrentLanguage().replace("_", "-"), // Add language if needed
+    // theme: "$org.matrix.msc2873.client_theme", // Add theme if needed
+  });
+
+  // Replace '$' encoded as %24 if necessary for template variables
+  const replacedParams = params.toString().replace(/%24/g, '$');
+  url.hash = `#?${replacedParams}`; // Use #? for query parameters in the hash
+
+  logger.info('Generated Element Call Widget URL:', url.toString()); // Use info level for clarity
+  return url;
+};
+
+// --- Widget Interfaces and Classes ---
+
+// Interface describing the data structure for the widget
+export interface IApp extends IWidget {
+  client: MatrixClient;
+  roomId: string;
+  eventId?: string;
+  avatar_url?: string;
+  'io.element.managed_hybrid'?: boolean;
+}
+
+// Custom EventEmitter class to manage widget communication setup
+export class Edget extends EventEmitter {
+  private client: MatrixClient;
+
+  private messaging: ClientWidgetApi | null = null;
+
+  private mockWidget: CinnyWidget;
+
+  private roomId?: string;
+
+  private type: string; // Type of the widget (e.g., 'm.call')
+
+  private readUpToMap: { [roomId: string]: string } = {}; // room ID to event ID
+
+  private readonly eventsToFeed = new WeakSet<MatrixEvent>();
+
+  private stickyPromise?: () => Promise<void>;
+
+  constructor(private iapp: IApp) {
+    super();
+    this.client = iapp.client;
+    this.roomId = iapp.roomId;
+    this.type = iapp.type;
+    this.mockWidget = new CinnyWidget(iapp);
+  }
+
+  /**
+   * Initializes the widget messaging API.
+   * @param iframe - The HTMLIFrameElement to bind to.
+   * @returns The initialized ClientWidgetApi instance.
+   */
+  startMessaging(iframe: HTMLIFrameElement): ClientWidgetApi {
+    // Ensure the driver is correctly instantiated
+    // The capabilities array might need adjustment based on required permissions
+    const driver = new SmallWidgetDriver(
+      this.client,
+      [],
+      this.mockWidget,
+      WidgetKind.Room,
+      true,
+      this.roomId
+    );
+
+    this.messaging = new ClientWidgetApi(this.mockWidget, iframe, driver);
+
+    // Emit events during the widget lifecycle
+    this.messaging.on('preparing', () => this.emit('preparing'));
+    this.messaging.on('error:preparing', (err: unknown) => this.emit('error:preparing', err));
+    this.messaging.once('ready', () => this.emit('ready'));
+    // this.messaging.on("capabilitiesNotified", () => this.emit("capabilitiesNotified")); // Uncomment if needed
+
+    // Populate the map of "read up to" events for this widget with the current event in every room.
+    // This is a bit inefficient, but should be okay. We do this for all rooms in case the widget
+    // requests timeline capabilities in other rooms down the road. It's just easier to manage here.
+    for (const room of this.client.getRooms()) {
+      // Timelines are most recent last
+      const events = room.getLiveTimeline()?.getEvents() || [];
+      const roomEvent = events[events.length - 1];
+      if (!roomEvent) continue; // force later code to think the room is fresh
+      this.readUpToMap[room.roomId] = roomEvent.getId()!;
+    }
+
+    this.messaging.on('action:org.matrix.msc2876.read_events', (ev: CustomEvent) => {
+      ev.preventDefault();
+      const room = this.client.getRoom(this.roomId);
+      logger.error('CAN WE GET MUCH HIGHER');
+
+      if (room === null) return [];
+      const state = room.getLiveTimeline().getState(Direction.Forward);
+      if (state === undefined) return [];
+
+      //logger.error("CAN WE GET MUCH HIGHER");
+      const event = state.getStateEvents(ev.type, 'true');
+      logger.error(event);
+      logger.error(ev);
+      logger.error(state);
+      if (true === undefined) {
+        return state.getStateEvents(ev.type).map((e) => e.getEffectiveEvent() as IRoomEvent);
+      }
+      //const event = state.getStateEvents(ev.type, 'true');
+      logger.error(event);
+      return event === null ? [] : [event.getEffectiveEvent() as IRoomEvent];
+
+      this.messaging?.transport.reply(ev.detail, { event: ['CATS BABY'] });
+    });
+
+    this.client.on(ClientEvent.Event, this.onEvent);
+    this.client.on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
+    //this.client.on(RoomStateEvent.Events, this.onStateUpdate);
+    this.client.on(ClientEvent.ToDeviceEvent, this.onToDeviceEvent);
+    //this.client.on(RoomStateEvent.Events, this.onReadEvent);
+    // this.messaging.setViewedRoomId(this.roomId ?? null);
+    this.messaging.on(
+      `action:${WidgetApiFromWidgetAction.UpdateAlwaysOnScreen}`,
+      async (ev: CustomEvent<IStickyActionRequest>) => {
+        if (this.messaging?.hasCapability(MatrixCapabilities.AlwaysOnScreen)) {
+          ev.preventDefault();
+          if (ev.detail.data.value) {
+            // If the widget wants to become sticky we wait for the stickyPromise to resolve
+            if (this.stickyPromise) await this.stickyPromise();
+            this.messaging.transport.reply(ev.detail, {});
+          }
+          // Stop being persistent can be done instantly
+          //MAKE PERSISTENT HERE
+          // Send the ack after the widget actually has become sticky.
+        }
+      }
+    );
+
+    logger.info(`Widget messaging started for widgetId: ${this.mockWidget.id}`);
+    return this.messaging;
+  }
+
+  private onEvent = (ev: MatrixEvent): void => {
+    this.client.decryptEventIfNeeded(ev);
+    this.feedEvent(ev);
+  };
+
+  private onEventDecrypted = (ev: MatrixEvent): void => {
+    this.feedEvent(ev);
+  };
+
+  private onReadEvent = (ev: MatrixEvent): void => {
+    this.feedEvent(ev);
+  };
+
+  /*
+  private onStateUpdate = (ev: MatrixEvent): void => {
+    if (this.messaging === null) return;
+    const raw = ev.getEffectiveEvent();
+    logger.error(raw);
+    this.messaging.feedEvent(raw as IRoomEvent).catch((e) => {
+      logger.error('Error sending state update to widget: ', e);
+    });
+  };
+  */
+
+  private onToDeviceEvent = async (ev: MatrixEvent): Promise<void> => {
+    await this.client.decryptEventIfNeeded(ev);
+    if (ev.isDecryptionFailure()) return;
+    await this.messaging?.feedToDevice(ev.getEffectiveEvent() as IRoomEvent, ev.isEncrypted());
+  };
+
+  /**
+   * Determines whether the event comes from a room that we've been invited to
+   * (in which case we likely don't have the full timeline).
+   */
+  private isFromInvite(ev: MatrixEvent): boolean {
+    const room = this.client.getRoom(ev.getRoomId());
+    return room?.getMyMembership() === KnownMembership.Invite;
+  }
+
+  /**
+   * Determines whether the event has a relation to an unknown parent.
+   */
+  private relatesToUnknown(ev: MatrixEvent): boolean {
+    // Replies to unknown events don't count
+    if (!ev.relationEventId || ev.replyEventId) return false;
+    const room = this.client.getRoom(ev.getRoomId());
+    return room === null || !room.findEventById(ev.relationEventId);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  private arrayFastClone<T>(a: T[]): T[] {
+    return a.slice(0, a.length);
+  }
+
+  private advanceReadUpToMarker(ev: MatrixEvent): boolean {
+    const evId = ev.getId();
+    if (evId === undefined) return false;
+    const roomId = ev.getRoomId();
+    if (roomId === undefined) return false;
+    const room = this.client.getRoom(roomId);
+    if (room === null) return false;
+
+    const upToEventId = this.readUpToMap[ev.getRoomId()!];
+    if (!upToEventId) {
+      // There's no marker yet; start it at this event
+      this.readUpToMap[roomId] = evId;
+      return true;
+    }
+
+    // Small optimization for exact match (skip the search)
+    if (upToEventId === evId) return false;
+
+    // Timelines are most recent last, so reverse the order and limit ourselves to 100 events
+    // to avoid overusing the CPU.
+    const timeline = room.getLiveTimeline();
+    const events = this.arrayFastClone(timeline.getEvents()).reverse().slice(0, 100);
+
+    for (const timelineEvent of events) {
+      if (timelineEvent.getId() === upToEventId) {
+        // The event must be somewhere before the "read up to" marker
+        return false;
+      } else if (timelineEvent.getId() === ev.getId()) {
+        // The event is after the marker; advance it
+        this.readUpToMap[roomId] = evId;
+        return true;
+      }
+    }
+
+    // We can't say for sure whether the widget has seen the event; let's
+    // just assume that it has
+    return false;
+  }
+
+  private feedEvent(ev: MatrixEvent): void {
+    if (this.messaging === null) return;
+
+    if (
+      // If we had decided earlier to feed this event to the widget, but
+      // it just wasn't ready, give it another try
+      this.eventsToFeed.delete(ev) ||
+      // Skip marker timeline check for events with relations to unknown parent because these
+      // events are not added to the timeline here and will be ignored otherwise:
+      // https://github.com/matrix-org/matrix-js-sdk/blob/d3dfcd924201d71b434af3d77343b5229b6ed75e/src/models/room.ts#L2207-L2213
+      this.relatesToUnknown(ev) ||
+      // Skip marker timeline check for rooms where membership is
+      // 'invite', otherwise the membership event from the invitation room
+      // will advance the marker and new state events will not be
+      // forwarded to the widget.
+      this.isFromInvite(ev) ||
+      // Check whether this event would be before or after our "read up to" marker. If it's
+      // before, or we can't decide, then we assume the widget will have already seen the event.
+      // If the event is after, or we don't have a marker for the room, then the marker will advance and we'll
+      // send it through.
+      // This approach of "read up to" prevents widgets receiving decryption spam from startup or
+      // receiving ancient events from backfill and such.
+      this.advanceReadUpToMarker(ev)
+    ) {
+      // If the event is still being decrypted, remember that we want to
+      // feed it to the widget (even if not strictly in the order given by
+      // the timeline) and get back to it later
+      if (ev.isBeingDecrypted() || ev.isDecryptionFailure()) {
+        this.eventsToFeed.add(ev);
+      } else {
+        const raw = ev.getEffectiveEvent();
+        this.messaging.feedEvent(raw as IRoomEvent, this.roomId ?? '').catch((e) => {
+          logger.error('Error sending event to widget: ', e);
+        });
+      }
+    }
+  }
+
+  /**
+   * Stops the widget messaging and cleans up resources.
+   */
+  stopMessaging() {
+    if (this.messaging) {
+      // Potentially call stop() or remove listeners if the API provides such methods
+      // this.messaging.stop(); // Example if a stop method exists
+      this.messaging.removeAllListeners(); // Remove listeners attached by Edget
+      logger.info(`Widget messaging stopped for widgetId: ${this.mockWidget.id}`);
+      this.messaging = null;
+    }
+    // Clean up driver resources if necessary
+    // driver.stop(); // Example
+  }
+}
+
+/**
+ * Creates the data object for the widget.
+ * @param client - The MatrixClient instance.
+ * @param roomId - The ID of the room.
+ * @param currentData - Existing widget data.
+ * @param overwriteData - Data to merge or overwrite.
+ * @returns The final widget data object.
+ */
+export const getWidgetData = (
+  client: MatrixClient,
+  roomId: string,
+  currentData: object,
+  overwriteData: object
+): IWidgetData => {
+  // Example: Determine E2EE based on room state if needed
+  let perParticipantE2EE = true; // Default or based on logic
+  // const roomEncryption = client.getRoom(roomId)?.currentState.getStateEvents(EventType.RoomEncryption, "");
+  // if (roomEncryption) perParticipantE2EE = true; // Simplified example
+
+  return {
+    ...currentData,
+    ...overwriteData,
+    perParticipantE2EE,
+  };
+};
+
+/**
+ * Creates a virtual widget definition (IApp).
+ * @param client - MatrixClient instance.
+ * @param id - Widget ID.
+ * @param creatorUserId - User ID of the creator.
+ * @param name - Widget display name.
+ * @param type - Widget type (e.g., 'm.call').
+ * @param url - Widget URL.
+ * @param waitForIframeLoad - Whether to wait for iframe load signal.
+ * @param data - Widget data.
+ * @param roomId - Room ID.
+ * @returns The IApp widget definition.
+ */
+export const createVirtualWidget = (
+  client: MatrixClient,
+  id: string,
+  creatorUserId: string,
+  name: string,
+  type: string,
+  url: URL,
+  waitForIframeLoad: boolean,
+  data: IWidgetData,
+  roomId: string
+): IApp => ({
+  client,
+  id,
+  creatorUserId,
+  name,
+  type,
+  url: url.toString(), // Store URL as string in the definition
+  waitForIframeLoad,
+  data,
+  roomId,
+  // Add other required fields from IWidget if necessary
+  sender: creatorUserId, // Example: Assuming sender is the creator
+  content: {
+    // Example content structure
+    type,
+    url: url.toString(),
+    name,
+    data,
+    creatorUserId,
+  },
+});

From c413396562ecc3be0a0e60e52667f985f6799ca5 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Mon, 14 Apr 2025 09:49:06 -0500
Subject: [PATCH 015/242] Add some missing imports

---
 src/app/features/room/SmallWidget.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/app/features/room/SmallWidget.ts b/src/app/features/room/SmallWidget.ts
index 19f622f6..a40a4e6d 100644
--- a/src/app/features/room/SmallWidget.ts
+++ b/src/app/features/room/SmallWidget.ts
@@ -1,5 +1,12 @@
 import EventEmitter from 'events';
-import { KnownMembership, MatrixClient, MatrixEvent } from 'matrix-js-sdk';
+import {
+  ClientEvent,
+  Direction,
+  KnownMembership,
+  MatrixClient,
+  MatrixEvent,
+  MatrixEventEvent,
+} from 'matrix-js-sdk';
 import {
   ClientWidgetApi,
   IRoomEvent,
@@ -7,6 +14,7 @@ import {
   IWidget,
   IWidgetData,
   MatrixCapabilities,
+  WidgetApiFromWidgetAction,
   WidgetKind,
 } from 'matrix-widget-api';
 import { logger } from 'matrix-js-sdk/lib/logger';

From e2c97f81a7159ec07b5d02423ac918724e7877fc Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Mon, 14 Apr 2025 09:49:53 -0500
Subject: [PATCH 016/242] remove unneeded imports

---
 src/app/features/room/SmallWidgetDriver.ts | 942 +++++++++++----------
 1 file changed, 472 insertions(+), 470 deletions(-)

diff --git a/src/app/features/room/SmallWidgetDriver.ts b/src/app/features/room/SmallWidgetDriver.ts
index 0833111e..5c13e405 100644
--- a/src/app/features/room/SmallWidgetDriver.ts
+++ b/src/app/features/room/SmallWidgetDriver.ts
@@ -1,491 +1,493 @@
 import {
-    type Capability,
-    EventDirection,
-    type IOpenIDCredentials,
-    type IOpenIDUpdate,
-    type ISendDelayedEventDetails,
-    type ISendEventDetails,
-    type ITurnServer,
-    type IReadEventRelationsResult,
-    type IRoomEvent,
-    MatrixCapabilities,
-    OpenIDRequestState,
-    type SimpleObservable,
-    type Widget,
-    WidgetDriver,
-    WidgetEventCapability,
-    WidgetKind,
-    type IWidgetApiErrorResponseDataDetails,
-    type ISearchUserDirectoryResult,
-    type IGetMediaConfigResult,
-    type UpdateDelayedEventAction,
-} from "matrix-widget-api";
+  type Capability,
+  EventDirection,
+  type ISendDelayedEventDetails,
+  type ISendEventDetails,
+  type IReadEventRelationsResult,
+  type IRoomEvent,
+  MatrixCapabilities,
+  type Widget,
+  WidgetDriver,
+  WidgetEventCapability,
+  WidgetKind,
+  type IWidgetApiErrorResponseDataDetails,
+  type ISearchUserDirectoryResult,
+  type IGetMediaConfigResult,
+  type UpdateDelayedEventAction,
+} from 'matrix-widget-api';
 import {
-    ClientEvent,
-    type ITurnServer as IClientTurnServer,
-    EventType,
-    type IContent,
-    MatrixError,
-    type MatrixEvent,
-    Direction,
-    THREAD_RELATION_TYPE,
-    type SendDelayedEventResponse,
-    type StateEvents,
-    type TimelineEvents,
-    MatrixClient,
-    Room, // Import Room
-    Timeline, // Import Timeline
-} from "matrix-js-sdk"; // Assuming matrix-js-sdk is correctly imported
-import {
-    type ApprovalOpts,
-    type CapabilitiesOpts,
-    WidgetLifecycle,
-} from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle"; // Assuming this path is correct
-import { logger } from "matrix-js-sdk/lib/logger"; // Assuming logger is correctly imported
-
+  EventType,
+  type IContent,
+  MatrixError,
+  type MatrixEvent,
+  Direction,
+  type SendDelayedEventResponse,
+  type StateEvents,
+  type TimelineEvents,
+  MatrixClient,
+} from 'matrix-js-sdk';
 
 export class SmallWidgetDriver extends WidgetDriver {
-    private allowedCapabilities: Set<Capability>;
-    private readonly mxClient: MatrixClient; // Store the client instance
+  private allowedCapabilities: Set<Capability>;
 
-    public constructor(
-        mx: MatrixClient,
-        allowedCapabilities: Capability[],
-        private forWidget: Widget,
-        private forWidgetKind: WidgetKind,
-        virtual: boolean, // Assuming 'virtual' might be needed later, kept for consistency
-        private inRoomId?: string,
-    ) {
-        super();
-        this.mxClient = mx; // Store the passed instance
+  private readonly mxClient: MatrixClient; // Store the client instance
 
-        this.allowedCapabilities = new Set([
-            ...allowedCapabilities,
-            MatrixCapabilities.Screenshots,
-            // Add other base capabilities as needed, e.g., ElementWidgetCapabilities.RequiresClient
-        ]);
+  public constructor(
+    mx: MatrixClient,
+    allowedCapabilities: Capability[],
+    private forWidget: Widget,
+    private forWidgetKind: WidgetKind,
+    virtual: boolean, // Assuming 'virtual' might be needed later, kept for consistency
+    private inRoomId?: string
+  ) {
+    super();
+    this.mxClient = mx; // Store the passed instance
 
-        // --- Capabilities specific to Element Call (or similar trusted widgets) ---
-        // This is a trusted Element Call widget that we control (adjust if not Element Call)
-        this.allowedCapabilities.add(MatrixCapabilities.AlwaysOnScreen);
-        this.allowedCapabilities.add(MatrixCapabilities.MSC3846TurnServers);
-        this.allowedCapabilities.add(MatrixCapabilities.MSC4157SendDelayedEvent);
-        this.allowedCapabilities.add(MatrixCapabilities.MSC4157UpdateDelayedEvent);
-	// Capability to access the room timeline (MSC2762)
-	this.allowedCapabilities.add(`org.matrix.msc2762.timeline:${inRoomId}`);
-        // Capability to read room state (MSC2762)
-        this.allowedCapabilities.add(`org.matrix.msc2762.state:${inRoomId}`);
-        this.allowedCapabilities.add(
-            WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomMember).raw,
-        );
-        this.allowedCapabilities.add(
-            WidgetEventCapability.forStateEvent(EventDirection.Receive, "org.matrix.msc3401.call").raw,
-        );
-        this.allowedCapabilities.add(
-            WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomEncryption).raw,
-        );
-        const clientUserId = this.mxClient.getSafeUserId();
-        // For the legacy membership type
-        this.allowedCapabilities.add(
-            WidgetEventCapability.forStateEvent(EventDirection.Send, "org.matrix.msc3401.call.member", clientUserId)
-                .raw,
-        );
-        const clientDeviceId = this.mxClient.getDeviceId();
-        if (clientDeviceId !== null) {
-            // For the session membership type compliant with MSC4143
-            this.allowedCapabilities.add(
-                WidgetEventCapability.forStateEvent(
-                    EventDirection.Send,
-                    "org.matrix.msc3401.call.member",
-                    `_${clientUserId}_${clientDeviceId}`,
-                ).raw,
-            );
-            // Version with no leading underscore, for room versions whose auth rules allow it
-            this.allowedCapabilities.add(
-                WidgetEventCapability.forStateEvent(
-                    EventDirection.Send,
-                    "org.matrix.msc3401.call.member",
-                    `${clientUserId}_${clientDeviceId}`,
-                ).raw,
-            );
-        }
-        this.allowedCapabilities.add(
-            WidgetEventCapability.forStateEvent(EventDirection.Receive, "org.matrix.msc3401.call.member").raw,
-        );
-        // for determining auth rules specific to the room version
-        this.allowedCapabilities.add(
-            WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomCreate).raw,
-        );
+    this.allowedCapabilities = new Set([
+      ...allowedCapabilities,
+      MatrixCapabilities.Screenshots,
+      // Add other base capabilities as needed, e.g., ElementWidgetCapabilities.RequiresClient
+    ]);
 
-        const sendRecvRoomEvents = [
-            "io.element.call.encryption_keys",
-            "org.matrix.rageshake_request",
-            EventType.Reaction,
-            EventType.RoomRedaction,
-            "io.element.call.reaction",
-        ];
-        for (const eventType of sendRecvRoomEvents) {
-            this.allowedCapabilities.add(WidgetEventCapability.forRoomEvent(EventDirection.Send, eventType).raw);
-            this.allowedCapabilities.add(WidgetEventCapability.forRoomEvent(EventDirection.Receive, eventType).raw);
-        }
-
-        const sendRecvToDevice = [
-            EventType.CallInvite,
-            EventType.CallCandidates,
-            EventType.CallAnswer,
-            EventType.CallHangup,
-            EventType.CallReject,
-            EventType.CallSelectAnswer,
-            EventType.CallNegotiate,
-            EventType.CallSDPStreamMetadataChanged,
-            EventType.CallSDPStreamMetadataChangedPrefix,
-            EventType.CallReplaces,
-            EventType.CallEncryptionKeysPrefix,
-        ];
-        for (const eventType of sendRecvToDevice) {
-            this.allowedCapabilities.add(
-                WidgetEventCapability.forToDeviceEvent(EventDirection.Send, eventType).raw,
-            );
-            this.allowedCapabilities.add(
-                WidgetEventCapability.forToDeviceEvent(EventDirection.Receive, eventType).raw,
-            );
-        }
+    // --- Capabilities specific to Element Call (or similar trusted widgets) ---
+    // This is a trusted Element Call widget that we control (adjust if not Element Call)
+    this.allowedCapabilities.add(MatrixCapabilities.AlwaysOnScreen);
+    this.allowedCapabilities.add(MatrixCapabilities.MSC3846TurnServers);
+    this.allowedCapabilities.add(MatrixCapabilities.MSC4157SendDelayedEvent);
+    this.allowedCapabilities.add(MatrixCapabilities.MSC4157UpdateDelayedEvent);
+    // Capability to access the room timeline (MSC2762)
+    this.allowedCapabilities.add(`org.matrix.msc2762.timeline:${inRoomId}`);
+    // Capability to read room state (MSC2762)
+    this.allowedCapabilities.add(`org.matrix.msc2762.state:${inRoomId}`);
+    this.allowedCapabilities.add(
+      WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomMember).raw
+    );
+    this.allowedCapabilities.add(
+      WidgetEventCapability.forStateEvent(EventDirection.Receive, 'org.matrix.msc3401.call').raw
+    );
+    this.allowedCapabilities.add(
+      WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomEncryption).raw
+    );
+    const clientUserId = this.mxClient.getSafeUserId();
+    // For the legacy membership type
+    this.allowedCapabilities.add(
+      WidgetEventCapability.forStateEvent(
+        EventDirection.Send,
+        'org.matrix.msc3401.call.member',
+        clientUserId
+      ).raw
+    );
+    const clientDeviceId = this.mxClient.getDeviceId();
+    if (clientDeviceId !== null) {
+      // For the session membership type compliant with MSC4143
+      this.allowedCapabilities.add(
+        WidgetEventCapability.forStateEvent(
+          EventDirection.Send,
+          'org.matrix.msc3401.call.member',
+          `_${clientUserId}_${clientDeviceId}`
+        ).raw
+      );
+      // Version with no leading underscore, for room versions whose auth rules allow it
+      this.allowedCapabilities.add(
+        WidgetEventCapability.forStateEvent(
+          EventDirection.Send,
+          'org.matrix.msc3401.call.member',
+          `${clientUserId}_${clientDeviceId}`
+        ).raw
+      );
+    }
+    this.allowedCapabilities.add(
+      WidgetEventCapability.forStateEvent(EventDirection.Receive, 'org.matrix.msc3401.call.member')
+        .raw
+    );
+    // for determining auth rules specific to the room version
+    this.allowedCapabilities.add(
+      WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomCreate).raw
+    );
 
+    const sendRecvRoomEvents = [
+      'io.element.call.encryption_keys',
+      'org.matrix.rageshake_request',
+      EventType.Reaction,
+      EventType.RoomRedaction,
+      'io.element.call.reaction',
+    ];
+    for (const eventType of sendRecvRoomEvents) {
+      this.allowedCapabilities.add(
+        WidgetEventCapability.forRoomEvent(EventDirection.Send, eventType).raw
+      );
+      this.allowedCapabilities.add(
+        WidgetEventCapability.forRoomEvent(EventDirection.Receive, eventType).raw
+      );
     }
 
+    const sendRecvToDevice = [
+      EventType.CallInvite,
+      EventType.CallCandidates,
+      EventType.CallAnswer,
+      EventType.CallHangup,
+      EventType.CallReject,
+      EventType.CallSelectAnswer,
+      EventType.CallNegotiate,
+      EventType.CallSDPStreamMetadataChanged,
+      EventType.CallSDPStreamMetadataChangedPrefix,
+      EventType.CallReplaces,
+      EventType.CallEncryptionKeysPrefix,
+    ];
+    for (const eventType of sendRecvToDevice) {
+      this.allowedCapabilities.add(
+        WidgetEventCapability.forToDeviceEvent(EventDirection.Send, eventType).raw
+      );
+      this.allowedCapabilities.add(
+        WidgetEventCapability.forToDeviceEvent(EventDirection.Receive, eventType).raw
+      );
+    }
+  }
 
-    public async validateCapabilities(requested: Set<Capability>): Promise<Set<Capability>> {
-        // Stubbed under the assumption voice calls will be valid thru element-call
-        return requested;
+  public async validateCapabilities(requested: Set<Capability>): Promise<Set<Capability>> {
+    // Stubbed under the assumption voice calls will be valid thru element-call
+    return requested;
+  }
+
+  public async sendEvent<K extends keyof StateEvents>(
+    eventType: K,
+    content: StateEvents[K],
+    stateKey: string | null,
+    targetRoomId: string | null
+  ): Promise<ISendEventDetails>;
+  public async sendEvent<K extends keyof TimelineEvents>(
+    eventType: K,
+    content: TimelineEvents[K],
+    stateKey: null,
+    targetRoomId: string | null
+  ): Promise<ISendEventDetails>;
+  public async sendEvent(
+    eventType: string,
+    content: IContent,
+    stateKey: string | null = null,
+    targetRoomId: string | null = null
+  ): Promise<ISendEventDetails> {
+    const client = this.mxClient;
+    const roomId = targetRoomId || this.inRoomId;
+
+    if (!client || !roomId) throw new Error('Not in a room or not attached to a client');
+
+    let r: { event_id: string } | null;
+    if (stateKey !== null) {
+      // state event
+      r = await client.sendStateEvent(
+        roomId,
+        eventType as keyof StateEvents,
+        content as StateEvents[keyof StateEvents],
+        stateKey
+      );
+    } else if (eventType === EventType.RoomRedaction) {
+      // special case: extract the `redacts` property and call redact
+      r = await client.redactEvent(roomId, content['redacts']);
+    } else {
+      // message event
+      r = await client.sendEvent(
+        roomId,
+        eventType as keyof TimelineEvents,
+        content as TimelineEvents[keyof TimelineEvents]
+      );
     }
 
-    public async sendEvent<K extends keyof StateEvents>(
-        eventType: K,
-        content: StateEvents[K],
-        stateKey: string | null,
-        targetRoomId: string | null,
-    ): Promise<ISendEventDetails>;
-    public async sendEvent<K extends keyof TimelineEvents>(
-        eventType: K,
-        content: TimelineEvents[K],
-        stateKey: null,
-        targetRoomId: string | null,
-    ): Promise<ISendEventDetails>;
-    public async sendEvent(
-        eventType: string,
-        content: IContent,
-        stateKey: string | null = null,
-        targetRoomId: string | null = null,
-    ): Promise<ISendEventDetails> {
-        const client = this.mxClient;
-        const roomId = targetRoomId || this.inRoomId;
+    return { roomId, eventId: r.event_id };
+  }
 
-        if (!client || !roomId) throw new Error("Not in a room or not attached to a client");
+  /**
+   * @experimental Part of MSC4140 & MSC4157
+   * @see {@link WidgetDriver#sendDelayedEvent}
+   */
+  public async sendDelayedEvent<K extends keyof StateEvents>(
+    delay: number | null,
+    parentDelayId: string | null,
+    eventType: K,
+    content: StateEvents[K],
+    stateKey: string | null,
+    targetRoomId: string | null
+  ): Promise<ISendDelayedEventDetails>;
+  /**
+   * @experimental Part of MSC4140 & MSC4157
+   */
+  public async sendDelayedEvent<K extends keyof TimelineEvents>(
+    delay: number | null,
+    parentDelayId: string | null,
+    eventType: K,
+    content: TimelineEvents[K],
+    stateKey: null,
+    targetRoomId: string | null
+  ): Promise<ISendDelayedEventDetails>;
+  public async sendDelayedEvent(
+    delay: number | null,
+    parentDelayId: string | null,
+    eventType: string,
+    content: IContent,
+    stateKey: string | null = null,
+    targetRoomId: string | null = null
+  ): Promise<ISendDelayedEventDetails> {
+    const client = this.mxClient;
+    const roomId = targetRoomId || this.inRoomId;
 
-        let r: { event_id: string } | null;
-        if (stateKey !== null) {
-            // state event
-            r = await client.sendStateEvent(
-                roomId,
-                eventType as keyof StateEvents,
-                content as StateEvents[keyof StateEvents],
-                stateKey,
-            );
-        } else if (eventType === EventType.RoomRedaction) {
-            // special case: extract the `redacts` property and call redact
-            r = await client.redactEvent(roomId, content["redacts"]);
-        } else {
-            // message event
-            r = await client.sendEvent(
-                roomId,
-                eventType as keyof TimelineEvents,
-                content as TimelineEvents[keyof TimelineEvents],
-            );
+    if (!client || !roomId) throw new Error('Not in a room or not attached to a client');
+
+    let delayOpts;
+    if (delay !== null) {
+      delayOpts = {
+        delay,
+        ...(parentDelayId !== null && { parent_delay_id: parentDelayId }),
+      };
+    } else if (parentDelayId !== null) {
+      delayOpts = {
+        parent_delay_id: parentDelayId,
+      };
+    } else {
+      throw new Error('Must provide at least one of delay or parentDelayId');
+    }
+
+    let r: SendDelayedEventResponse | null;
+    if (stateKey !== null) {
+      // state event
+      r = await client._unstable_sendDelayedStateEvent(
+        roomId,
+        delayOpts,
+        eventType as keyof StateEvents,
+        content as StateEvents[keyof StateEvents],
+        stateKey
+      );
+    } else {
+      // message event
+      r = await client._unstable_sendDelayedEvent(
+        roomId,
+        delayOpts,
+        null,
+        eventType as keyof TimelineEvents,
+        content as TimelineEvents[keyof TimelineEvents]
+      );
+    }
+
+    return {
+      roomId,
+      delayId: r.delay_id,
+    };
+  }
+
+  /**
+   * @experimental Part of MSC4140 & MSC4157
+   */
+  public async updateDelayedEvent(
+    delayId: string,
+    action: UpdateDelayedEventAction
+  ): Promise<void> {
+    const client = this.mxClient;
+
+    if (!client) throw new Error('Not in a room or not attached to a client');
+
+    await client._unstable_updateDelayedEvent(delayId, action);
+  }
+
+  /**
+   * Implements {@link WidgetDriver#sendToDevice}
+   */
+  public async sendToDevice(
+    eventType: string,
+    encrypted: boolean,
+    contentMap: { [userId: string]: { [deviceId: string]: object } }
+  ): Promise<void> {
+    const client = this.mxClient;
+
+    if (encrypted) {
+      const crypto = client.getCrypto();
+      if (!crypto) throw new Error('E2EE not enabled');
+
+      // attempt to re-batch these up into a single request
+      const invertedContentMap: { [content: string]: { userId: string; deviceId: string }[] } = {};
+
+      for (const userId of Object.keys(contentMap)) {
+        const userContentMap = contentMap[userId];
+        for (const deviceId of Object.keys(userContentMap)) {
+          const content = userContentMap[deviceId];
+          const stringifiedContent = JSON.stringify(content);
+          invertedContentMap[stringifiedContent] = invertedContentMap[stringifiedContent] || [];
+          invertedContentMap[stringifiedContent].push({ userId, deviceId });
         }
+      }
 
-        return { roomId, eventId: r.event_id };
+      await Promise.all(
+        Object.entries(invertedContentMap).map(async ([stringifiedContent, recipients]) => {
+          const batch = await crypto.encryptToDeviceMessages(
+            eventType,
+            recipients,
+            JSON.parse(stringifiedContent)
+          );
+
+          await client.queueToDevice(batch);
+        })
+      );
+    } else {
+      await client.queueToDevice({
+        eventType,
+        batch: Object.entries(contentMap).flatMap(([userId, userContentMap]) =>
+          Object.entries(userContentMap).map(([deviceId, content]) => ({
+            userId,
+            deviceId,
+            payload: content,
+          }))
+        ),
+      });
+    }
+  }
+
+  /**
+   * Reads all events of the given type, and optionally `msgtype` (if applicable/defined),
+   * the user has access to. The widget API will have already verified that the widget is
+   * capable of receiving the events. Less events than the limit are allowed to be returned,
+   * but not more.
+   * @param roomId The ID of the room to look within.
+   * @param eventType The event type to be read.
+   * @param msgtype The msgtype of the events to be read, if applicable/defined.
+   * @param stateKey The state key of the events to be read, if applicable/defined.
+   * @param limit The maximum number of events to retrieve. Will be zero to denote "as many as
+   * possible".
+   * @param since When null, retrieves the number of events specified by the "limit" parameter.
+   * Otherwise, the event ID at which only subsequent events will be returned, as many as specified
+   * in "limit".
+   * @returns {Promise<IRoomEvent[]>} Resolves to the room events, or an empty array.
+   */
+  public async readRoomTimeline(
+    roomId: string,
+    eventType: string,
+    msgtype: string | undefined,
+    stateKey: string | undefined,
+    limit: number,
+    since: string | undefined
+  ): Promise<IRoomEvent[]> {
+    limit = limit > 0 ? Math.min(limit, Number.MAX_SAFE_INTEGER) : Number.MAX_SAFE_INTEGER; // relatively arbitrary
+
+    const room = this.mxClient.getRoom(roomId);
+    if (room === null) return [];
+    const results: MatrixEvent[] = [];
+    const events = room.getLiveTimeline().getEvents(); // timelines are most recent last
+    for (let i = events.length - 1; i >= 0; i--) {
+      const ev = events[i];
+      if (results.length >= limit) break;
+      if (since !== undefined && ev.getId() === since) break;
+
+      if (ev.getType() !== eventType || ev.isState()) continue;
+      if (eventType === EventType.RoomMessage && msgtype && msgtype !== ev.getContent()['msgtype'])
+        continue;
+      if (ev.getStateKey() !== undefined && stateKey !== undefined && ev.getStateKey() !== stateKey)
+        continue;
+      results.push(ev);
     }
 
-    /**
-     * @experimental Part of MSC4140 & MSC4157
-     * @see {@link WidgetDriver#sendDelayedEvent}
-     */
-    public async sendDelayedEvent<K extends keyof StateEvents>(
-        delay: number | null,
-        parentDelayId: string | null,
-        eventType: K,
-        content: StateEvents[K],
-        stateKey: string | null,
-        targetRoomId: string | null,
-    ): Promise<ISendDelayedEventDetails>;
-    /**
-     * @experimental Part of MSC4140 & MSC4157
-     */
-    public async sendDelayedEvent<K extends keyof TimelineEvents>(
-        delay: number | null,
-        parentDelayId: string | null,
-        eventType: K,
-        content: TimelineEvents[K],
-        stateKey: null,
-        targetRoomId: string | null,
-    ): Promise<ISendDelayedEventDetails>;
-    public async sendDelayedEvent(
-        delay: number | null,
-        parentDelayId: string | null,
-        eventType: string,
-        content: IContent,
-        stateKey: string | null = null,
-        targetRoomId: string | null = null,
-    ): Promise<ISendDelayedEventDetails> {
-        const client = this.mxClient;
-        const roomId = targetRoomId || this.inRoomId;
+    return results.map((e) => e.getEffectiveEvent() as IRoomEvent);
+  }
 
-        if (!client || !roomId) throw new Error("Not in a room or not attached to a client");
+  /**
+   * Reads the current values of all matching room state entries.
+   * @param roomId The ID of the room.
+   * @param eventType The event type of the entries to be read.
+   * @param stateKey The state key of the entry to be read. If undefined,
+   * all room state entries with a matching event type should be returned.
+   * @returns {Promise<IRoomEvent[]>} Resolves to the events representing the
+   * current values of the room state entries.
+   */
+  public async readRoomState(
+    roomId: string,
+    eventType: string,
+    stateKey: string | undefined
+  ): Promise<IRoomEvent[]> {
+    const room = this.mxClient.getRoom(roomId);
+    if (room === null) return [];
+    const state = room.getLiveTimeline().getState(Direction.Forward);
+    if (state === undefined) return [];
 
-        let delayOpts;
-        if (delay !== null) {
-            delayOpts = {
-                delay,
-                ...(parentDelayId !== null && { parent_delay_id: parentDelayId }),
-            };
-        } else if (parentDelayId !== null) {
-            delayOpts = {
-                parent_delay_id: parentDelayId,
-            };
-        } else {
-            throw new Error("Must provide at least one of delay or parentDelayId");
-        }
+    if (stateKey === undefined)
+      return state.getStateEvents(eventType).map((e) => e.getEffectiveEvent() as IRoomEvent);
+    const event = state.getStateEvents(eventType, stateKey);
+    return event === null ? [] : [event.getEffectiveEvent() as IRoomEvent];
+  }
 
-        let r: SendDelayedEventResponse | null;
-        if (stateKey !== null) {
-            // state event
-            r = await client._unstable_sendDelayedStateEvent(
-                roomId,
-                delayOpts,
-                eventType as keyof StateEvents,
-                content as StateEvents[keyof StateEvents],
-                stateKey,
-            );
-        } else {
-            // message event
-            r = await client._unstable_sendDelayedEvent(
-                roomId,
-                delayOpts,
-                null,
-                eventType as keyof TimelineEvents,
-                content as TimelineEvents[keyof TimelineEvents],
-            );
-        }
-
-        return {
-            roomId,
-            delayId: r.delay_id,
-        };
-    }
-
-    /**
-     * @experimental Part of MSC4140 & MSC4157
-     */
-    public async updateDelayedEvent(delayId: string, action: UpdateDelayedEventAction): Promise<void> {
-        const client = this.mxClient;
-
-        if (!client) throw new Error("Not in a room or not attached to a client");
-
-        await client._unstable_updateDelayedEvent(delayId, action);
-    }
-
-    /**
-     * Implements {@link WidgetDriver#sendToDevice}
-     */
-    public async sendToDevice(
-        eventType: string,
-        encrypted: boolean,
-        contentMap: { [userId: string]: { [deviceId: string]: object } },
-    ): Promise<void> {
-        const client = this.mxClient;
-
-        if (encrypted) {
-            const crypto = client.getCrypto();
-            if (!crypto) throw new Error("E2EE not enabled");
-
-            // attempt to re-batch these up into a single request
-            const invertedContentMap: { [content: string]: { userId: string; deviceId: string }[] } = {};
-
-            for (const userId of Object.keys(contentMap)) {
-                const userContentMap = contentMap[userId];
-                for (const deviceId of Object.keys(userContentMap)) {
-                    const content = userContentMap[deviceId];
-                    const stringifiedContent = JSON.stringify(content);
-                    invertedContentMap[stringifiedContent] = invertedContentMap[stringifiedContent] || [];
-                    invertedContentMap[stringifiedContent].push({ userId, deviceId });
-                }
-            }
-
-            await Promise.all(
-                Object.entries(invertedContentMap).map(async ([stringifiedContent, recipients]) => {
-                    const batch = await crypto.encryptToDeviceMessages(
-                        eventType,
-                        recipients,
-                        JSON.parse(stringifiedContent),
-                    );
-
-                    await client.queueToDevice(batch);
-                }),
-            );
-        } else {
-            await client.queueToDevice({
-                eventType,
-                batch: Object.entries(contentMap).flatMap(([userId, userContentMap]) =>
-                    Object.entries(userContentMap).map(([deviceId, content]) => ({
-                        userId,
-                        deviceId,
-                        payload: content,
-                    })),
-                ),
-            });
-        }
-    }
-
-    /**
-     * Reads all events of the given type, and optionally `msgtype` (if applicable/defined),
-     * the user has access to. The widget API will have already verified that the widget is
-     * capable of receiving the events. Less events than the limit are allowed to be returned,
-     * but not more.
-     * @param roomId The ID of the room to look within.
-     * @param eventType The event type to be read.
-     * @param msgtype The msgtype of the events to be read, if applicable/defined.
-     * @param stateKey The state key of the events to be read, if applicable/defined.
-     * @param limit The maximum number of events to retrieve. Will be zero to denote "as many as
-     * possible".
-     * @param since When null, retrieves the number of events specified by the "limit" parameter.
-     * Otherwise, the event ID at which only subsequent events will be returned, as many as specified
-     * in "limit".
-     * @returns {Promise<IRoomEvent[]>} Resolves to the room events, or an empty array.
-     */
-    public async readRoomTimeline(
-        roomId: string,
-        eventType: string,
-        msgtype: string | undefined,
-        stateKey: string | undefined,
-        limit: number,
-        since: string | undefined,
-    ): Promise<IRoomEvent[]> {
-        limit = limit > 0 ? Math.min(limit, Number.MAX_SAFE_INTEGER) : Number.MAX_SAFE_INTEGER; // relatively arbitrary
-
-        const room = this.mxClient.getRoom(roomId);
-        if (room === null) return [];
-        const results: MatrixEvent[] = [];
-        const events = room.getLiveTimeline().getEvents(); // timelines are most recent last
-        for (let i = events.length - 1; i >= 0; i--) {
-            const ev = events[i];
-            if (results.length >= limit) break;
-            if (since !== undefined && ev.getId() === since) break;
-
-            if (ev.getType() !== eventType || ev.isState()) continue;
-            if (eventType === EventType.RoomMessage && msgtype && msgtype !== ev.getContent()["msgtype"]) continue;
-            if (ev.getStateKey() !== undefined && stateKey !== undefined && ev.getStateKey() !== stateKey) continue;
-            results.push(ev);
-        }
-
-        return results.map((e) => e.getEffectiveEvent() as IRoomEvent);
-    }
-
-    /**
-     * Reads the current values of all matching room state entries.
-     * @param roomId The ID of the room.
-     * @param eventType The event type of the entries to be read.
-     * @param stateKey The state key of the entry to be read. If undefined,
-     * all room state entries with a matching event type should be returned.
-     * @returns {Promise<IRoomEvent[]>} Resolves to the events representing the
-     * current values of the room state entries.
-     */
-    public async readRoomState(roomId: string, eventType: string, stateKey: string | undefined): Promise<IRoomEvent[]> {
-        const room = this.mxClient.getRoom(roomId);
-        if (room === null) return [];
-        const state = room.getLiveTimeline().getState(Direction.Forward);
-        if (state === undefined) return [];
-
-        if (stateKey === undefined) 
-            return state.getStateEvents(eventType).map((e) => e.getEffectiveEvent() as IRoomEvent);
-        const event = state.getStateEvents(eventType, stateKey);
-        return event === null ? [] : [event.getEffectiveEvent() as IRoomEvent];
-    }
-
-    /*
+  /*
     public async navigate(uri: string): Promise<void> {
         navigateToPermalink(uri);
     }
     */
 
-    public async readEventRelations(
-        eventId: string,
-        roomId?: string,
-        relationType?: string,
-        eventType?: string,
-        from?: string,
-        to?: string,
-        limit?: number,
-        direction?: "f" | "b",
-    ): Promise<IReadEventRelationsResult> {
-        const client = this.mxClient;
-        const dir = direction as Direction;
-        roomId = roomId ?? this.inRoomId ?? undefined;
+  public async readEventRelations(
+    eventId: string,
+    roomId?: string,
+    relationType?: string,
+    eventType?: string,
+    from?: string,
+    to?: string,
+    limit?: number,
+    direction?: 'f' | 'b'
+  ): Promise<IReadEventRelationsResult> {
+    const client = this.mxClient;
+    const dir = direction as Direction;
+    roomId = roomId ?? this.inRoomId ?? undefined;
 
-        if (typeof roomId !== "string") {
-            throw new Error("Error while reading the current room");
-        }
-
-        const { events, nextBatch, prevBatch } = await client.relations(
-            roomId,
-            eventId,
-            relationType ?? null,
-            eventType ?? null,
-            { from, to, limit, dir },
-        );
-
-        return {
-            chunk: events.map((e) => e.getEffectiveEvent() as IRoomEvent),
-            nextBatch: nextBatch ?? undefined,
-            prevBatch: prevBatch ?? undefined,
-        };
+    if (typeof roomId !== 'string') {
+      throw new Error('Error while reading the current room');
     }
 
-    public async searchUserDirectory(searchTerm: string, limit?: number): Promise<ISearchUserDirectoryResult> {
-        const client = this.mxClient;
+    const { events, nextBatch, prevBatch } = await client.relations(
+      roomId,
+      eventId,
+      relationType ?? null,
+      eventType ?? null,
+      { from, to, limit, dir }
+    );
 
-        const { limited, results } = await client.searchUserDirectory({ term: searchTerm, limit });
+    return {
+      chunk: events.map((e) => e.getEffectiveEvent() as IRoomEvent),
+      nextBatch: nextBatch ?? undefined,
+      prevBatch: prevBatch ?? undefined,
+    };
+  }
 
-        return {
-            limited,
-            results: results.map((r) => ({
-                userId: r.user_id,
-                displayName: r.display_name,
-                avatarUrl: r.avatar_url,
-            })),
-        };
-    }
+  public async searchUserDirectory(
+    searchTerm: string,
+    limit?: number
+  ): Promise<ISearchUserDirectoryResult> {
+    const client = this.mxClient;
 
-    public async getMediaConfig(): Promise<IGetMediaConfigResult> {
-        const client = this.mxClient;
+    const { limited, results } = await client.searchUserDirectory({ term: searchTerm, limit });
 
-        return await client.getMediaConfig();
-    }
+    return {
+      limited,
+      results: results.map((r) => ({
+        userId: r.user_id,
+        displayName: r.display_name,
+        avatarUrl: r.avatar_url,
+      })),
+    };
+  }
 
-    public async uploadFile(file: XMLHttpRequestBodyInit): Promise<{ contentUri: string }> {
-        const client = this.mxClient;
+  public async getMediaConfig(): Promise<IGetMediaConfigResult> {
+    const client = this.mxClient;
 
-        const uploadResult = await client.uploadContent(file);
+    return await client.getMediaConfig();
+  }
 
-        return { contentUri: uploadResult.content_uri };
-    }
+  public async uploadFile(file: XMLHttpRequestBodyInit): Promise<{ contentUri: string }> {
+    const client = this.mxClient;
 
-    /**
-     * Download a file from the media repository on the homeserver.
-     *
-     * @param contentUri - the MXC URI of the file to download
-     * @returns an object with: file - response contents as Blob
-     */
-    /*
+    const uploadResult = await client.uploadContent(file);
+
+    return { contentUri: uploadResult.content_uri };
+  }
+
+  /**
+   * Download a file from the media repository on the homeserver.
+   *
+   * @param contentUri - the MXC URI of the file to download
+   * @returns an object with: file - response contents as Blob
+   */
+  /*
     public async downloadFile(contentUri: string): Promise<{ file: XMLHttpRequestBodyInit }> {
         const client = this.mxClient;
         const media = mediaFromMxc(contentUri, client);
@@ -495,25 +497,25 @@ export class SmallWidgetDriver extends WidgetDriver {
     }
     */
 
-    /**
-     * Gets the IDs of all joined or invited rooms currently known to the
-     * client.
-     * @returns The room IDs.
-     */
-    public getKnownRooms(): string[] {
-        return this.mxClient
-            .getVisibleRooms()
-            .map((r) => r.roomId);
-    }
+  /**
+   * Gets the IDs of all joined or invited rooms currently known to the
+   * client.
+   * @returns The room IDs.
+   */
+  public getKnownRooms(): string[] {
+    return this.mxClient.getVisibleRooms().map((r) => r.roomId);
+  }
 
-    /**
-     * Expresses a {@link MatrixError} as a JSON payload
-     * for use by Widget API error responses.
-     * @param error The error to handle.
-     * @returns The error expressed as a JSON payload,
-     * or undefined if it is not a {@link MatrixError}.
-     */
-    public processError(error: unknown): IWidgetApiErrorResponseDataDetails | undefined {
-        return error instanceof MatrixError ? { matrix_api_error: error.asWidgetApiErrorData() } : undefined;
-    }
-}
\ No newline at end of file
+  /**
+   * Expresses a {@link MatrixError} as a JSON payload
+   * for use by Widget API error responses.
+   * @param error The error to handle.
+   * @returns The error expressed as a JSON payload,
+   * or undefined if it is not a {@link MatrixError}.
+   */
+  public processError(error: unknown): IWidgetApiErrorResponseDataDetails | undefined {
+    return error instanceof MatrixError
+      ? { matrix_api_error: error.asWidgetApiErrorData() }
+      : undefined;
+  }
+}

From b4f67ce0ec39f7a35d9b5c802fac066617c0c06a Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Mon, 14 Apr 2025 17:47:11 -0500
Subject: [PATCH 017/242] add prep for DM call button

---
 src/app/features/room/RoomViewHeader.tsx | 34 ++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 352ae4b5..9e102f30 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -232,6 +232,21 @@ export function RoomViewHeader() {
 
   const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
 
+  // I assume there is a global state so I don't have to run this check every time but for now we'll stub this in
+  const isDirectMessage = () => {
+    const mDirectsEvent = mx.getAccountData('m.direct');
+    const { roomId } = room;
+    return (
+      Object.values(mDirectsEvent?.event.content).filter((e) => {
+        if (e.indexOf(roomId) === 0) return true;
+      }).length !== 0
+    );
+  };
+
+  const handleCall: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuAnchor(evt.currentTarget.getBoundingClientRect());
+  };
+
   const handleSearchClick = () => {
     const searchParams: _SearchPathSearchParams = {
       rooms: room.roomId,
@@ -325,6 +340,24 @@ export function RoomViewHeader() {
           </Box>
         </Box>
         <Box shrink="No">
+          {isDirectMessage() && (
+            <TooltipProvider
+              position="Bottom"
+              align="End"
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  <Text>Start a call</Text>
+                </Tooltip>
+              }
+            >
+              {(triggerRef) => (
+                <IconButton onClick={handleCall} ref={triggerRef}>
+                  <Icon size="400" src={Icons.Phone} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          )}
           {!ecryptedRoom && (
             <TooltipProvider
               position="Bottom"
@@ -398,6 +431,7 @@ export function RoomViewHeader() {
               </FocusTrap>
             }
           />
+
           {screenSize === ScreenSize.Desktop && (
             <TooltipProvider
               position="Bottom"

From ca7691ddc5fd76bb76b20d90423ceaffc24bb750 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Tue, 15 Apr 2025 22:07:32 -0500
Subject: [PATCH 018/242] Begin setting up for the calling interface to be
 mounted. Adds a separator for rooms based on voice vs text rooms

---
 src/app/pages/client/space/Space.tsx | 398 +++++++++++++++++++++++----
 1 file changed, 338 insertions(+), 60 deletions(-)

diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index fa8c0ea8..0960cf59 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -10,6 +10,7 @@ import { useAtom, useAtomValue } from 'jotai';
 import {
   Avatar,
   Box,
+  Button,
   Icon,
   IconButton,
   Icons,
@@ -21,7 +22,7 @@ import {
   Text,
   config,
   toRem,
-} from 'folds';
+} from 'folds'; // Assuming 'folds' is your UI library
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { JoinRule, Room } from 'matrix-js-sdk';
 import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
@@ -45,7 +46,7 @@ import {
 import { useSpace } from '../../../hooks/useSpace';
 import { VirtualTile } from '../../../components/virtualizer';
 import { RoomNavCategoryButton, RoomNavItem } from '../../../features/room-nav';
-import { makeNavCategoryId } from '../../../state/closedNavCategories';
+import { makeNavCategoryId as makeSpaceNavCategoryId } from '../../../state/closedNavCategories';
 import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
 import { useCategoryHandler } from '../../../hooks/useCategoryHandler';
 import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper';
@@ -75,7 +76,137 @@ import {
   useRoomsNotificationPreferencesContext,
 } from '../../../hooks/useRoomsNotificationPreferences';
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
+import { useCallState } from '../CallProvider'; // Assuming path
+import { WidgetApiToWidgetAction } from 'matrix-widget-api';
+import { logger } from 'matrix-js-sdk/lib/logger';
 
+// --- Helper Functions ---
+
+// Determine if a room is a voice room (assuming Room object has this method)
+const isVoiceRoom = (room: Room): boolean => room.isCallRoom?.() ?? false;
+// Determine if a room is a text room
+const isTextRoom = (room: Room): boolean => !isVoiceRoom(room);
+
+// Helper function to generate unique category IDs for channel type headers
+const makeChannelTypeId = (parentId: string, type: 'text' | 'voice'): string => {
+  return `${parentId}_${type}_channels`;
+};
+
+/**
+ * Processes the raw hierarchy from useSpaceJoinedHierarchy into a flat list
+ * suitable for the virtualizer, including collapsible headers for text/voice channels.
+ * Removes the top-level "Channels" category header.
+ *
+ * @param hierarchy - The raw hierarchy data (array of { roomId: string }).
+ * @param mx - The Matrix client instance.
+ * @param spaceRoomId - The ID of the root space being viewed.
+ * @param closedCategories - The Set of currently closed category IDs.
+ * @returns An array of processed items for rendering.
+ */
+const processHierarchyForVirtualizer = (
+  hierarchy: { roomId: string }[],
+  mx: ReturnType<typeof useMatrixClient>,
+  spaceRoomId: string,
+  closedCategories: Set<string>
+): Array<{ type: string; key: string; [key: string]: any }> => {
+  const processed: Array<{ type: string; key: string; [key: string]: any }> = [];
+  let currentCategoryRooms = { text: [], voice: [] };
+  // Start with the root space as the initial parent context
+  let currentParentId: string = spaceRoomId;
+
+  // Function to add collected text/voice rooms under their respective headers
+  const addCollectedRoomsToProcessed = (parentId: string) => {
+    const textCategoryId = makeChannelTypeId(parentId, 'text');
+    const voiceCategoryId = makeChannelTypeId(parentId, 'voice');
+    const isTextClosed = closedCategories.has(textCategoryId);
+    const isVoiceClosed = closedCategories.has(voiceCategoryId);
+
+    // Add Text Channels Header and Rooms (if any exist)
+    if (currentCategoryRooms.text.length > 0) {
+      processed.push({
+        type: 'channel_header', // Use specific type for collapsible channel headers
+        title: 'Text Channels',
+        categoryId: textCategoryId, // ID used for collapse state
+        key: `${parentId}-text-header`,
+      });
+      // Only add room items if this category is not closed
+      if (!isTextClosed) {
+        currentCategoryRooms.text.forEach((room) =>
+          processed.push({ type: 'room', room, key: room.roomId })
+        );
+      }
+    }
+
+    // Add Voice Channels Header and Rooms (if any exist)
+    if (currentCategoryRooms.voice.length > 0) {
+      processed.push({
+        type: 'channel_header', // Use specific type
+        title: 'Voice Channels',
+        categoryId: voiceCategoryId, // ID used for collapse state
+        key: `${parentId}-voice-header`,
+      });
+      // Only add room items if this category is not closed
+      if (!isVoiceClosed) {
+        currentCategoryRooms.voice.forEach((room) =>
+          processed.push({ type: 'room', room, key: room.roomId })
+        );
+      }
+    }
+    // Reset collected rooms for the next category/space
+    currentCategoryRooms = { text: [], voice: [] };
+  };
+
+  // Iterate through the raw hierarchy provided by the hook
+  hierarchy.forEach((item) => {
+    const room = mx.getRoom(item.roomId);
+    if (!room) {
+      logger.warn(`processHierarchyForVirtualizer: Room not found for ID ${item.roomId}`);
+      return; // Skip if room data isn't available
+    }
+
+    if (room.isSpaceRoom()) {
+      // When encountering a new space, first process the rooms collected under the *previous* parent
+      addCollectedRoomsToProcessed(currentParentId);
+
+      // Now, set the current parent context to this new space
+      currentParentId = room.roomId;
+
+      // Add the space category item itself to the processed list,
+      // *UNLESS* it's the root space (we want to skip the top-level "Channels" header)
+      if (room.roomId !== spaceRoomId) {
+        const spaceCategoryId = makeSpaceNavCategoryId(spaceRoomId, room.roomId); // Use original ID generator for spaces
+        processed.push({
+          type: 'category', // Type for main space categories
+          room,
+          categoryId: spaceCategoryId, // ID for this space's collapse state
+          key: room.roomId,
+        });
+      }
+      // Note: We assume the `hierarchy` list is already filtered based on closed *space* categories.
+    } else {
+      // This is a regular room (not a space). Add it to the appropriate list (text/voice)
+      // for the *current* parent space.
+      if (isVoiceRoom(room)) {
+        currentCategoryRooms.voice.push(room);
+      } else if (isTextRoom(room)) {
+        currentCategoryRooms.text.push(room);
+      } else {
+        // Fallback or handle unexpected room types if necessary
+        logger.warn(
+          `processHierarchyForVirtualizer: Room ${room.roomId} is neither text nor voice.`
+        );
+        currentCategoryRooms.text.push(room); // Default to text for now
+      }
+    }
+  });
+
+  // After iterating through all items, process any remaining rooms collected under the last parent
+  addCollectedRoomsToProcessed(currentParentId);
+
+  return processed;
+};
+
+// --- Space Menu Component (Remains Unchanged) ---
 type SpaceMenuProps = {
   room: Room;
   requestClose: () => void;
@@ -86,7 +217,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   const roomToParents = useAtomValue(roomToParentsAtom);
   const powerLevels = usePowerLevels(room);
   const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
-  const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
+  const canInvite = canDoAction('invite', mx.getUserId() ?? '');
   const openSpaceSettings = useOpenSpaceSettings();
 
   const allChild = useSpaceChildren(
@@ -202,6 +333,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   );
 });
 
+// --- Space Header Component (Remains Unchanged) ---
 function SpaceHeader() {
   const space = useSpace();
   const spaceName = useRoomName(space);
@@ -219,7 +351,6 @@ function SpaceHeader() {
       return cords;
     });
   };
-
   return (
     <>
       <PageNavHeader>
@@ -255,7 +386,7 @@ function SpaceHeader() {
                 escapeDeactivates: stopPropagation,
               }}
             >
-              <SpaceMenu room={space} requestClose={() => setMenuAnchor(undefined)} />
+              {space && <SpaceMenu room={space} requestClose={() => setMenuAnchor(undefined)} />}
             </FocusTrap>
           }
         />
@@ -264,9 +395,72 @@ function SpaceHeader() {
   );
 }
 
+// --- Fixed Bottom Nav Area Component (Remains Unchanged) ---
+function FixedBottomNavArea() {
+  const { sendWidgetAction, activeCallRoomId } = useCallState();
+  const mx = useMatrixClient();
+  const userName = mx.getUser(mx.getUserId() ?? '')?.displayName ?? mx.getUserId() ?? 'User';
+
+  const handleSendMessageClick = () => {
+    const action = 'my.custom.action'; // Replace with your actual action
+    const data = { message: `Hello from ${userName}!` };
+    logger.debug(`FixedBottomNavArea: Sending action '${action}'`);
+    sendWidgetAction(action, data)
+      .then(() => logger.info(`FixedBottomNavArea: Action '${action}' sent.`))
+      .catch((err) => logger.error(`FixedBottomNavArea: Failed action '${action}':`, err));
+  };
+
+  const handleToggleMuteClick = () => {
+    const action = WidgetApiToWidgetAction.SetAudioInputMuted;
+    const data = {}; // Sending empty data might imply toggle for some widgets
+    logger.debug(`FixedBottomNavArea: Sending action '${action}'`);
+    sendWidgetAction(action, data)
+      .then(() => logger.info(`FixedBottomNavArea: Action '${action}' sent.`))
+      .catch((err) => logger.error(`FixedBottomNavArea: Failed action '${action}':`, err));
+  };
+
+  if (!activeCallRoomId) {
+    return (
+      <Box
+        direction="Column"
+        gap="200"
+        padding="300"
+        style={{ flexShrink: 0, borderTop: `1px solid ${config?.color?.LineStrong ?? '#ccc'}` }} // Use theme color if possible
+      >
+        <Text size="T200" color="Muted" align="Center">
+          No active call
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Text size="T200" color="Muted" align="Center">
+      {mx.getRoom(activeCallRoomId)?.normalizedName}
+    </Text>
+  );
+} /*
+<Box
+      direction="Column"
+      gap="200"
+      padding="300"
+      style={{ flexShrink: 0, borderTop: `1px solid ${config?.color?.LineStrong ?? '#ccc'}` }}
+    >
+      <Box direction="Row" gap="200" justifyContent="Center">
+        <Button onClick={handleSendMessageClick} size="200" variant="Primary" fill="Outline">
+          <Icon src={Icons.Alphabet} size="100" />
+        </Button>
+        <Button onClick={handleToggleMuteClick} size="200" variant="Surface">
+          <Icon src={Icons.VolumeMute} size="100" />
+        </Button>
+      </Box>
+    </Box>
+    */
+
+// --- Main Space Component (Updated Rendering Logic) ---
 export function Space() {
   const mx = useMatrixClient();
-  const space = useSpace();
+  const space = useSpace(); // The current top-level space being viewed
   useNavToActivePathMapper(space.roomId);
   const spaceIdOrAlias = getCanonicalAliasOrRoomId(mx, space.roomId);
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -280,10 +474,12 @@ export function Space() {
   const lobbySelected = useSpaceLobbySelected(spaceIdOrAlias);
   const searchSelected = useSpaceSearchSelected(spaceIdOrAlias);
 
+  // State for managing collapsed categories (includes spaces and channel types)
   const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
 
+  // Memoized callback to get room objects
   const getRoom = useCallback(
-    (rId: string) => {
+    (rId: string): Room | undefined => {
       if (allJoinedRooms.has(rId)) {
         return mx.getRoom(rId) ?? undefined;
       }
@@ -292,45 +488,76 @@ export function Space() {
     [mx, allJoinedRooms]
   );
 
+  // Fetch the raw hierarchy using the hook
+  // Note: The filtering callbacks passed here primarily affect *which* rooms/spaces
+  // are included in the raw list *before* processing.
   const hierarchy = useSpaceJoinedHierarchy(
     space.roomId,
     getRoom,
+    // isRoomHidden callback: Hides room if parent space category is closed, unless room is unread/selected.
     useCallback(
       (parentId, roomId) => {
-        if (!closedCategories.has(makeNavCategoryId(space.roomId, parentId))) {
+        // Generate the category ID for the parent *space*
+        const parentSpaceCategoryId = makeSpaceNavCategoryId(space.roomId, parentId);
+        // If the parent space category is not closed, the room is not hidden by this rule.
+        if (!closedCategories.has(parentSpaceCategoryId)) {
           return false;
         }
-        const showRoom = roomToUnread.has(roomId) || roomId === selectedRoomId;
-        if (showRoom) return false;
-        return true;
+        // Parent space is closed. Hide the room unless it's unread or currently selected.
+        const showRoomAnyway = roomToUnread.has(roomId) || roomId === selectedRoomId;
+        return !showRoomAnyway; // Return true to hide, false to show
       },
-      [space.roomId, closedCategories, roomToUnread, selectedRoomId]
+      [space.roomId, closedCategories, roomToUnread, selectedRoomId] // Dependencies
     ),
+    // isSubCategoryClosed callback: Checks if a *space* subcategory is closed.
     useCallback(
-      (sId) => closedCategories.has(makeNavCategoryId(space.roomId, sId)),
-      [closedCategories, space.roomId]
+      (subCategoryId) => closedCategories.has(makeSpaceNavCategoryId(space.roomId, subCategoryId)),
+      [closedCategories, space.roomId] // Dependencies
     )
   );
 
+  // Process the raw hierarchy into a list with collapsible channel headers
+  const processedHierarchy = useMemo(
+    () =>
+      processHierarchyForVirtualizer(
+        hierarchy,
+        mx,
+        space.roomId,
+        closedCategories // Pass closed state to the processing function
+      ),
+    [hierarchy, mx, space.roomId, closedCategories] // Dependencies for memoization
+  );
+
+  // Setup the virtualizer with the processed list
   const virtualizer = useVirtualizer({
-    count: hierarchy.length,
+    count: processedHierarchy.length,
     getScrollElement: () => scrollRef.current,
-    estimateSize: () => 0,
-    overscan: 10,
+    estimateSize: () => 32, // Adjust based on average item height
+    overscan: 10, // Render items slightly outside the viewport
   });
 
+  // Click handler for toggling category collapse state (works for spaces and channel types)
   const handleCategoryClick = useCategoryHandler(setClosedCategories, (categoryId) =>
     closedCategories.has(categoryId)
   );
 
+  // Function to generate navigation links for rooms
   const getToLink = (roomId: string) =>
     getSpaceRoomPath(spaceIdOrAlias, getCanonicalAliasOrRoomId(mx, roomId));
 
+  // --- Render ---
   return (
-    <PageNav>
+    <PageNav style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      {/* Fixed Header */}
       <SpaceHeader />
-      <PageNavContent scrollRef={scrollRef}>
-        <Box direction="Column" gap="300">
+
+      {/* Scrollable Content Area */}
+      <PageNavContent
+        scrollRef={scrollRef}
+        style={{ flexGrow: 1, overflowY: 'auto', overflowX: 'hidden' }}
+      >
+        {/* Static Top Links (Lobby, Search) */}
+        <Box direction="Column" gap="300" paddingBottom="400">
           <NavCategory>
             <NavItem variant="Background" radii="400" aria-selected={lobbySelected}>
               <NavLink to={getSpaceLobbyPath(getCanonicalAliasOrRoomId(mx, space.roomId))}>
@@ -365,57 +592,108 @@ export function Space() {
               </NavLink>
             </NavItem>
           </NavCategory>
-          <NavCategory
-            style={{
-              height: virtualizer.getTotalSize(),
-              position: 'relative',
-            }}
-          >
-            {virtualizer.getVirtualItems().map((vItem) => {
-              const { roomId } = hierarchy[vItem.index] ?? {};
-              const room = mx.getRoom(roomId);
-              if (!room) return null;
+        </Box>
 
-              if (room.isSpaceRoom()) {
-                const categoryId = makeNavCategoryId(space.roomId, roomId);
+        {/* Virtualized List Area */}
+        <NavCategory
+          style={{
+            height: `${virtualizer.getTotalSize()}px`, // Set height for virtualizer scroll calculations
+            width: '100%',
+            position: 'relative', // Needed for absolute positioning of virtual items
+          }}
+        >
+          {virtualizer.getVirtualItems().map((vItem) => {
+            const item = processedHierarchy[vItem.index];
+            if (!item) return null; // Should not happen with correct processing
 
-                return (
-                  <VirtualTile
-                    virtualItem={vItem}
-                    key={vItem.index}
-                    ref={virtualizer.measureElement}
-                  >
-                    <div style={{ paddingTop: vItem.index === 0 ? undefined : config.space.S400 }}>
+            // --- Render Logic based on Item Type ---
+            const renderContent = () => {
+              switch (item.type) {
+                // Render a main space category header (for nested spaces)
+                case 'category': {
+                  // item has: room, categoryId, key
+                  const { room, categoryId } = item;
+                  // Determine name: Use the room name for nested spaces
+                  const name = room.name;
+                  // Add padding above subsequent categories
+                  // Removed index === 0 check as root category is gone
+                  const paddingTop = config?.space?.S400 ?? '1rem';
+                  return (
+                    <div style={{ paddingTop: paddingTop }}>
                       <NavCategoryHeader>
                         <RoomNavCategoryButton
-                          data-category-id={categoryId}
-                          onClick={handleCategoryClick}
-                          closed={closedCategories.has(categoryId)}
+                          data-category-id={categoryId} // ID for collapse state
+                          onClick={handleCategoryClick} // Toggle collapse
+                          closed={closedCategories.has(categoryId)} // Pass closed state
                         >
-                          {roomId === space.roomId ? 'Rooms' : room?.name}
+                          {name}
                         </RoomNavCategoryButton>
                       </NavCategoryHeader>
                     </div>
-                  </VirtualTile>
-                );
+                  );
+                }
+                // Render a collapsible header for Text or Voice channels
+                case 'channel_header': {
+                  // item has: title, categoryId, key
+                  const { title, categoryId } = item;
+                  return (
+                    // Add indentation and padding for visual hierarchy
+                    <Box paddingLeft="400" paddingTop="200" paddingBottom="100">
+                      <NavCategoryHeader variant="Subtle">
+                        {' '}
+                        {/* Use subtle variant if available */}
+                        <RoomNavCategoryButton
+                          data-category-id={categoryId} // ID for collapse state
+                          onClick={handleCategoryClick} // Toggle collapse
+                          closed={closedCategories.has(categoryId)} // Pass closed state
+                          isSubCategory // Optional prop for styling tweaks
+                        >
+                          {title}
+                        </RoomNavCategoryButton>
+                      </NavCategoryHeader>
+                    </Box>
+                  );
+                }
+                // Render a regular room item (text or voice channel)
+                case 'room': {
+                  // item has: room, key
+                  const { room } = item;
+                  return (
+                    // Add indentation for rooms under headers
+                    <Box paddingLeft="500">
+                      <RoomNavItem
+                        room={room}
+                        selected={selectedRoomId === room.roomId}
+                        showAvatar={mDirects.has(room.roomId)}
+                        direct={mDirects.has(room.roomId)}
+                        linkPath={getToLink(room.roomId)}
+                        notificationMode={getRoomNotificationMode(
+                          notificationPreferences,
+                          room.roomId
+                        )}
+                      />
+                    </Box>
+                  );
+                }
+                default:
+                  // Log error for unexpected item types
+                  logger.error('Unknown item type in virtualized list:', item);
+                  return null;
               }
+            };
 
-              return (
-                <VirtualTile virtualItem={vItem} key={vItem.index} ref={virtualizer.measureElement}>
-                  <RoomNavItem
-                    room={room}
-                    selected={selectedRoomId === roomId}
-                    showAvatar={mDirects.has(roomId)}
-                    direct={mDirects.has(roomId)}
-                    linkPath={getToLink(roomId)}
-                    notificationMode={getRoomNotificationMode(notificationPreferences, room.roomId)}
-                  />
-                </VirtualTile>
-              );
-            })}
-          </NavCategory>
-        </Box>
+            // Render the virtual tile wrapper with the content
+            return (
+              <VirtualTile virtualItem={vItem} key={item.key} ref={virtualizer.measureElement}>
+                {renderContent()}
+              </VirtualTile>
+            );
+          })}
+        </NavCategory>
       </PageNavContent>
+
+      {/* Fixed Bottom Section (Remains Unchanged) */}
+      <FixedBottomNavArea />
     </PageNav>
   );
 }

From f39a262eb5c093385548a2e9cd51e9d030fe8389 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Tue, 15 Apr 2025 22:08:03 -0500
Subject: [PATCH 019/242] remove iframe from RoomView as it isn't needed there
 (since you cant have persistence that way)

---
 src/app/features/room/RoomView.tsx | 134 +++--------------------------
 1 file changed, 10 insertions(+), 124 deletions(-)

diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx
index 46c62f62..f6ce2f20 100644
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -26,6 +26,8 @@ import { useSetting } from '../../state/hooks/settings';
 import { useAccessibleTagColors, usePowerLevelTags } from '../../hooks/usePowerLevelTags';
 import { useTheme } from '../../hooks/useTheme';
 import { createVirtualWidget, Edget, getWidgetData, getWidgetUrl } from './SmallWidget';
+import { PersistentCallContainer } from '../../pages/call/PersistentCallContainer';
+import { CallActivationEffect } from '../../pages/call/CallActivation';
 
 // --- Constants ---
 const FN_KEYS_REGEX = /^F\d+$/;
@@ -77,9 +79,6 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
   // Refs
   const roomInputRef = useRef<HTMLDivElement>(null);
   const roomViewRef = useRef<HTMLDivElement>(null); // Ref for the main Page container
-  const iframeRef = useRef<HTMLIFrameElement>(null); // Ref for the iframe element
-  const widgetApiRef = useRef<ClientWidgetApi | null>(null); // Ref to store the widget API instance
-  const edgetRef = useRef<Edget | null>(null); // Ref to store the Edget instance
 
   // State & Hooks
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
@@ -123,136 +122,23 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
     )
   );
 
-  // Effect to setup and cleanup the widget API for call rooms
-  useEffect(() => {
-    // Only run if it's a call room
-    if (isCall) {
-      const iframeElement = iframeRef.current;
-      // Ensure iframe element exists before proceeding
-      if (!iframeElement) {
-        logger.warn(`Iframe element not found for room ${roomId}, cannot initialize widget.`);
-        return;
-      }
-
-      logger.info(`Setting up Element Call widget for room ${roomId}`);
-      const userId = mx.getUserId() ?? ''; // Ensure userId is not null
-      const url = getWidgetUrl(mx, roomId); // Generate the widget URL
-
-      // 1. Create the virtual widget definition
-      const app = createVirtualWidget(
-        mx,
-        `element-call-${roomId}`,
-        userId,
-        'Element Call',
-        'm.call', // Widget type
-        url,
-        false, // waitForIframeLoad - false as we manually control src loading
-        getWidgetData(
-          // Widget data
-          mx,
-          roomId,
-          {}, // Initial data (can be fetched if needed)
-          {
-            // Overwrite/specific data
-            skipLobby: true, // Example configuration
-            preload: false, // Set preload based on whether you want background loading
-            returnToLobby: false, // Example configuration
-          }
-        ),
-        roomId
-      );
-
-      // 2. Instantiate Edget to manage widget communication
-      const edget = new Edget(app);
-      edgetRef.current = edget; // Store instance in ref
-
-      // 3. Start the widget messaging *before* setting the iframe src
-      try {
-        const widgetApi = edget.startMessaging(iframeElement);
-        widgetApiRef.current = widgetApi; // Store API instance
-
-        // Listen for the 'ready' event from the widget API
-        widgetApi.once('ready', () => {
-          logger.info(`Element Call widget is ready for room ${roomId}.`);
-          // Perform actions needed once the widget confirms it's ready
-          // Example: widgetApi.transport.send("action", { data: "..." });
-        });
-
-        widgetApi.on('action:im.vector.hangup', () => {
-          logger.info(`Received hangup action from widget in room ${roomId}.`);
-          // Handle hangup logic (e.g., navigate away, update room state)
-        });
-
-        // Add other necessary event listeners from the widget API
-        // widgetApi.on("action:some_other_action", (ev) => { ... });
-
-        // 4. Set the iframe src *after* messaging is initialized
-        logger.info(`Setting iframe src for room ${roomId}: ${url.toString()}`);
-        iframeElement.src = url.toString();
-      } catch (error) {
-        logger.error(`Error initializing widget messaging for room ${roomId}:`, error);
-        // Handle initialization error (e.g., show an error message to the user)
-      }
-
-      // 5. Return cleanup function
-      return () => {
-        logger.info(`Cleaning up Element Call widget for room ${roomId}`);
-        // Stop messaging and clean up resources
-        if (edgetRef.current) {
-          edgetRef.current.stopMessaging();
-          edgetRef.current = null;
-        }
-        widgetApiRef.current = null; // Clear API ref
-
-        // Clear iframe src to stop activity and free resources
-        if (iframeRef.current) {
-          iframeRef.current.src = 'about:blank';
-          logger.info(`Cleared iframe src for room ${roomId}`);
-        }
-      };
-    } else {
-      // If not a call room, ensure any previous call state is cleaned up
-      // (This might be redundant if component unmounts/remounts correctly, but safe)
-      if (widgetApiRef.current && iframeRef.current) {
-        logger.info(`Room ${roomId} is no longer a call room, ensuring cleanup.`);
-        if (edgetRef.current) {
-          edgetRef.current.stopMessaging();
-          edgetRef.current = null;
-        }
-        widgetApiRef.current = null;
-        iframeRef.current.src = 'about:blank';
-      }
-    }
-
-    // Explicitly return undefined if not a call room or no cleanup needed initially
-    return undefined;
-  }, [isCall, mx, roomId, editor]); // Dependencies: run effect if these change
-
   // --- Render Logic ---
 
   // Render Call View
   if (isCall) {
-    // Initial src is set to about:blank. The useEffect hook will set the actual src later.
     return (
       <Page
         ref={roomViewRef}
-        style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%',
+          width: '0%',
+          overflow: 'hidden',
+        }}
       >
         <RoomViewHeader />
-        {/* Box grows to fill available space */}
-        <Box grow="Yes" style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
-          <iframe
-            ref={iframeRef}
-            src="about:blank" // Start with a blank page
-            style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
-            title={`Element Call - ${room.name || roomId}`}
-            // Sandbox attributes for security. Adjust as needed by Element Call.
-            //sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
-            // Permissions policy for features like camera, microphone.
-            allow="microphone; camera; display-capture; autoplay; clipboard-write;"
-          />
-        </Box>
-        {/* Optional: Minimal footer or status indicators */}
+        <CallActivationEffect />
       </Page>
     );
   }

From 3403adeb615361e94181f3986580c8c26797f91e Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Tue, 15 Apr 2025 22:09:45 -0500
Subject: [PATCH 020/242] add call  button for DMs and  try to setup  for
 spreading across header for when in call menu (not working yet)

---
 src/app/features/room/RoomViewHeader.tsx | 159 +++++++++++++----------
 1 file changed, 90 insertions(+), 69 deletions(-)

diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 9e102f30..8dc27581 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -21,11 +21,12 @@ import {
   RectCords,
   Badge,
   Spinner,
-} from 'folds';
+} from 'folds'; // Assuming 'folds' is your UI library
 import { useNavigate } from 'react-router-dom';
 import { JoinRule, Room } from 'matrix-js-sdk';
 import { useAtomValue } from 'jotai';
 
+// --- Required Imports (Adjust paths as needed) ---
 import { useStateEvent } from '../../hooks/useStateEvent';
 import { PageHeader } from '../../components/page';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
@@ -40,7 +41,7 @@ import { useSpaceOptionally } from '../../hooks/useSpace';
 import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils';
 import { getCanonicalAliasOrRoomId, isRoomAlias, mxcUrlToHttp } from '../../utils/matrix';
 import { _SearchPathSearchParams } from '../../pages/paths';
-import * as css from './RoomViewHeader.css';
+import * as css from './RoomViewHeader.css'; // Assuming CSS Modules
 import { useRoomUnread } from '../../state/hooks/unread';
 import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { markAsRead } from '../../../client/action/notifications';
@@ -66,11 +67,14 @@ import {
   useRoomsNotificationPreferencesContext,
 } from '../../hooks/useRoomsNotificationPreferences';
 
+// --- RoomMenu Component (Assuming it's defined elsewhere or here) ---
+// (Include the RoomMenu component code from the previous snippet here if needed)
 type RoomMenuProps = {
   room: Room;
   requestClose: () => void;
 };
 const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose }, ref) => {
+  // ... (RoomMenu implementation from previous snippet) ...
   const mx = useMatrixClient();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
@@ -209,7 +213,9 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
   );
 });
 
+// --- RoomViewHeader Component ---
 export function RoomViewHeader() {
+  // --- Hooks ---
   const navigate = useNavigate();
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
@@ -232,19 +238,22 @@ export function RoomViewHeader() {
 
   const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
 
-  // I assume there is a global state so I don't have to run this check every time but for now we'll stub this in
+  // --- Event Handlers ---
   const isDirectMessage = () => {
+    // Simplified check - consider optimizing if performance is an issue
     const mDirectsEvent = mx.getAccountData('m.direct');
     const { roomId } = room;
     return (
-      Object.values(mDirectsEvent?.event.content).filter((e) => {
-        if (e.indexOf(roomId) === 0) return true;
-      }).length !== 0
+      !!mDirectsEvent?.event.content &&
+      Object.values(mDirectsEvent.event.content).flat().includes(roomId)
     );
   };
 
   const handleCall: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    setMenuAnchor(evt.currentTarget.getBoundingClientRect());
+    // Placeholder for call initiation logic
+    console.log('Initiate call');
+    // Potentially set anchor for a call menu if needed, similar to other menus
+    // setMenuAnchor(evt.currentTarget.getBoundingClientRect());
   };
 
   const handleSearchClick = () => {
@@ -265,21 +274,29 @@ export function RoomViewHeader() {
     setPinMenuAnchor(evt.currentTarget.getBoundingClientRect());
   };
 
+  // --- Render ---
   return (
+    // Use PageHeader component for consistent header styling
     <PageHeader balance={screenSize === ScreenSize.Mobile}>
-      <Box grow="Yes" gap="300">
-        {screenSize === ScreenSize.Mobile && (
-          <BackRouteHandler>
-            {(onBack) => (
-              <Box shrink="No" alignItems="Center">
+      {/* Main container Box: Uses Flexbox (row), aligns items vertically centered */}
+      <Box grow="Yes" alignItems="Center" gap="300">
+        {' '}
+        {/* Adjust gap as needed */}
+        {/* --- LEFT GROUP --- */}
+        {/* This Box groups elements intended for the left side */}
+        {/* It takes only the width required by its content */}
+        <Box alignItems="Center" gap="300">
+          {/* Back button shown only on mobile */}
+          {screenSize === ScreenSize.Mobile && (
+            <BackRouteHandler>
+              {(onBack) => (
                 <IconButton onClick={onBack}>
                   <Icon src={Icons.ArrowLeft} />
                 </IconButton>
-              </Box>
-            )}
-          </BackRouteHandler>
-        )}
-        <Box grow="Yes" alignItems="Center" gap="300">
+              )}
+            </BackRouteHandler>
+          )}
+          {/* Avatar shown only on desktop */}
           {screenSize !== ScreenSize.Mobile && (
             <Avatar size="300">
               <RoomAvatar
@@ -296,14 +313,17 @@ export function RoomViewHeader() {
               />
             </Avatar>
           )}
+          {/* Room name and topic */}
           <Box direction="Column">
             <Text size={topic ? 'H5' : 'H3'} truncate>
               {name}
             </Text>
+            {/* Topic is conditionally rendered and includes logic for an overlay */}
             {topic && (
               <UseStateProvider initial={false}>
                 {(viewTopic, setViewTopic) => (
                   <>
+                    {/* Overlay for viewing full topic */}
                     <Overlay open={viewTopic} backdrop={<OverlayBackdrop />}>
                       <OverlayCenter>
                         <FocusTrap
@@ -322,11 +342,12 @@ export function RoomViewHeader() {
                         </FocusTrap>
                       </OverlayCenter>
                     </Overlay>
+                    {/* Clickable truncated topic text */}
                     <Text
                       as="button"
                       type="button"
                       onClick={() => setViewTopic(true)}
-                      className={css.HeaderTopic}
+                      className={css.HeaderTopic} // Apply specific styles if needed
                       size="T200"
                       priority="300"
                       truncate
@@ -338,8 +359,18 @@ export function RoomViewHeader() {
               </UseStateProvider>
             )}
           </Box>
-        </Box>
-        <Box shrink="No">
+        </Box>{' '}
+        {/* --- END OF LEFT GROUP --- */}
+        {/* --- SPACER --- */}
+        {/* This empty Box has 'grow="Yes"', making it expand */}
+        {/* It pushes the Left Group and Right Group to opposite ends */}
+        <Box grow="Yes" />
+        {/* --- RIGHT GROUP --- */}
+        {/* This Box groups elements intended for the right side */}
+        {/* 'shrink="No"' prevents it from collapsing if space is tight */}
+        {/* Items are vertically centered, gap adjusted for icons */}
+        <Box shrink="No" alignItems="Center" gap="100">
+          {/* Call button, shown only for Direct Messages */}
           {isDirectMessage() && (
             <TooltipProvider
               position="Bottom"
@@ -358,6 +389,7 @@ export function RoomViewHeader() {
               )}
             </TooltipProvider>
           )}
+          {/* Search button, hidden for encrypted rooms */}
           {!ecryptedRoom && (
             <TooltipProvider
               position="Bottom"
@@ -375,6 +407,7 @@ export function RoomViewHeader() {
               )}
             </TooltipProvider>
           )}
+          {/* Pinned Messages button */}
           <TooltipProvider
             position="Bottom"
             offset={4}
@@ -386,18 +419,15 @@ export function RoomViewHeader() {
           >
             {(triggerRef) => (
               <IconButton
-                style={{ position: 'relative' }}
+                style={{ position: 'relative' }} // Needed for Badge positioning
                 onClick={handleOpenPinMenu}
                 ref={triggerRef}
-                aria-pressed={!!pinMenuAnchor}
+                aria-pressed={!!pinMenuAnchor} // Indicate state when menu is open
               >
+                {/* Badge showing pin count */}
                 {pinnedEvents.length > 0 && (
                   <Badge
-                    style={{
-                      position: 'absolute',
-                      left: toRem(3),
-                      top: toRem(3),
-                    }}
+                    style={{ position: 'absolute', left: toRem(3), top: toRem(3) }}
                     variant="Secondary"
                     size="400"
                     fill="Solid"
@@ -412,26 +442,7 @@ export function RoomViewHeader() {
               </IconButton>
             )}
           </TooltipProvider>
-          <PopOut
-            anchor={pinMenuAnchor}
-            position="Bottom"
-            content={
-              <FocusTrap
-                focusTrapOptions={{
-                  initialFocus: false,
-                  returnFocusOnDeactivate: false,
-                  onDeactivate: () => setPinMenuAnchor(undefined),
-                  clickOutsideDeactivates: true,
-                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-                  escapeDeactivates: stopPropagation,
-                }}
-              >
-                <RoomPinMenu room={room} requestClose={() => setPinMenuAnchor(undefined)} />
-              </FocusTrap>
-            }
-          />
-
+          {/* Members button, shown only on desktop */}
           {screenSize === ScreenSize.Desktop && (
             <TooltipProvider
               position="Bottom"
@@ -449,6 +460,7 @@ export function RoomViewHeader() {
               )}
             </TooltipProvider>
           )}
+          {/* More Options button */}
           <TooltipProvider
             position="Bottom"
             align="End"
@@ -465,28 +477,37 @@ export function RoomViewHeader() {
               </IconButton>
             )}
           </TooltipProvider>
-          <PopOut
-            anchor={menuAnchor}
-            position="Bottom"
-            align="End"
-            content={
-              <FocusTrap
-                focusTrapOptions={{
-                  initialFocus: false,
-                  returnFocusOnDeactivate: false,
-                  onDeactivate: () => setMenuAnchor(undefined),
-                  clickOutsideDeactivates: true,
-                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-                  escapeDeactivates: stopPropagation,
-                }}
-              >
-                <RoomMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
-              </FocusTrap>
-            }
-          />
-        </Box>
-      </Box>
+        </Box>{' '}
+        {/* --- END OF RIGHT GROUP --- */}
+        {/* PopOuts render their content outside the normal flow (usually via React Portals) */}
+        {/* They are placed here logically near their trigger buttons */}
+        <PopOut
+          anchor={pinMenuAnchor} // Anchored to the pin button's position
+          position="Bottom"
+          content={
+            // FocusTrap manages keyboard focus within the menu
+            <FocusTrap
+              focusTrapOptions={{ /* ... focus options ... */ escapeDeactivates: stopPropagation }}
+            >
+              <RoomPinMenu room={room} requestClose={() => setPinMenuAnchor(undefined)} />
+            </FocusTrap>
+          }
+        />
+        <PopOut
+          anchor={menuAnchor} // Anchored to the 'more options' button's position
+          position="Bottom"
+          align="End"
+          content={
+            // FocusTrap manages keyboard focus within the menu
+            <FocusTrap
+              focusTrapOptions={{ /* ... focus options ... */ escapeDeactivates: stopPropagation }}
+            >
+              <RoomMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
+            </FocusTrap>
+          }
+        />
+      </Box>{' '}
+      {/* --- END OF MAIN CONTAINER BOX --- */}
     </PageHeader>
   );
 }

From a540c86b082b2fd15b45fb713d87c6538043f422 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Tue, 15 Apr 2025 22:12:05 -0500
Subject: [PATCH 021/242] remove transport testing comments still need to fix
 embedded behavior (standalone works for testing rn)

---
 src/app/features/room/SmallWidget.ts | 45 ++++++++++++++--------------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/app/features/room/SmallWidget.ts b/src/app/features/room/SmallWidget.ts
index a40a4e6d..480f9b92 100644
--- a/src/app/features/room/SmallWidget.ts
+++ b/src/app/features/room/SmallWidget.ts
@@ -2,6 +2,7 @@ import EventEmitter from 'events';
 import {
   ClientEvent,
   Direction,
+  IEvent,
   KnownMembership,
   MatrixClient,
   MatrixEvent,
@@ -35,18 +36,18 @@ export const getWidgetUrl = (mx: MatrixClient, roomId: string): URL => {
   const params = new URLSearchParams({
     embed: 'true',
     widgetId: `element-call-${roomId}`,
-    preload: 'true', // Consider if preloading is always desired
-    skipLobby: 'false', // Configurable based on needs
+    appPrompt: 'false',
+    preload: 'true',
+    skipLobby: 'true',
+    intent: 'join_existing',
     returnToLobby: 'true',
     perParticipantE2EE: 'true',
     hideHeader: 'true',
     userId: mx.getUserId()!,
     deviceId: mx.getDeviceId()!,
     roomId: roomId,
-    baseUrl: mx.baseUrl!, // Ensure baseUrl is available
-    parentUrl: window.location.origin, // Optional, might be needed by widget
-    // lang: getCurrentLanguage().replace("_", "-"), // Add language if needed
-    // theme: "$org.matrix.msc2873.client_theme", // Add theme if needed
+    baseUrl: mx.baseUrl!,
+    parentUrl: window.location.origin,
   });
 
   // Replace '$' encoded as %24 if necessary for template variables
@@ -131,27 +132,27 @@ export class Edget extends EventEmitter {
     }
 
     this.messaging.on('action:org.matrix.msc2876.read_events', (ev: CustomEvent) => {
-      ev.preventDefault();
       const room = this.client.getRoom(this.roomId);
-      logger.error('CAN WE GET MUCH HIGHER');
+      const events: Partial<IEvent>[] = [];
+      const { type } = ev.detail.data;
 
-      if (room === null) return [];
-      const state = room.getLiveTimeline().getState(Direction.Forward);
-      if (state === undefined) return [];
+      ev.preventDefault();
 
-      //logger.error("CAN WE GET MUCH HIGHER");
-      const event = state.getStateEvents(ev.type, 'true');
-      logger.error(event);
-      logger.error(ev);
-      logger.error(state);
-      if (true === undefined) {
-        return state.getStateEvents(ev.type).map((e) => e.getEffectiveEvent() as IRoomEvent);
+      if (room === null) {
+        return this.messaging?.transport.reply(ev.detail, { events });
+      }
+      const state = room.getLiveTimeline().getState(Direction.Forward);
+      if (state === undefined) {
+        return this.messaging?.transport.reply(ev.detail, { events });
       }
-      //const event = state.getStateEvents(ev.type, 'true');
-      logger.error(event);
-      return event === null ? [] : [event.getEffectiveEvent() as IRoomEvent];
 
-      this.messaging?.transport.reply(ev.detail, { event: ['CATS BABY'] });
+      const stateEvents = state.events?.get(type);
+
+      for (const [key, eventObject] of stateEvents?.entries() ?? []) {
+        events.push(eventObject.event);
+      }
+
+      return this.messaging?.transport.reply(ev.detail, { events });
     });
 
     this.client.on(ClientEvent.Event, this.onEvent);

From cccf9630a0bca8441a43aa73be1892d5674617e6 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Tue, 15 Apr 2025 22:14:16 -0500
Subject: [PATCH 022/242] add CallActivation

---
 src/app/pages/call/CallActivation.tsx | 58 +++++++++++++++++++++++++++
 1 file changed, 58 insertions(+)
 create mode 100644 src/app/pages/call/CallActivation.tsx

diff --git a/src/app/pages/call/CallActivation.tsx b/src/app/pages/call/CallActivation.tsx
new file mode 100644
index 00000000..dca77a1f
--- /dev/null
+++ b/src/app/pages/call/CallActivation.tsx
@@ -0,0 +1,58 @@
+import React, { useEffect } from 'react';
+import { useParams } from 'react-router-dom'; // Or your router's equivalent hook
+import { logger } from 'matrix-js-sdk/lib/logger';
+
+import { useCallState } from '../client/CallProvider'; // Adjust path if needed
+import { useMatrixClient } from '../../hooks/useMatrixClient'; // Adjust path if needed
+
+// Helper function (replace with your actual implementation)
+// This function determines if a room ID corresponds to a call/voice channel
+const isRoomVoiceChannel = (roomId: string, mx: ReturnType<typeof useMatrixClient>): boolean => {
+  if (!mx) return false;
+  const room = mx.getRoom(roomId);
+  // Example check - use your specific logic (e.g., checking room type, state events)
+  return room?.isCallRoom?.() ?? false;
+};
+
+/**
+ * This component runs an effect to automatically activate the call state
+ * when the user navigates to a room designated as a call/voice channel.
+ */
+export function CallActivationEffect() {
+  // Get the currently viewed room ID from the router
+  const { roomIdOrAlias: viewedRoomId } = useParams<{ roomIdOrAlias: string }>();
+  // Get the call state and setter from context
+  const { activeCallRoomId, setActiveCallRoomId } = useCallState();
+  // Get the Matrix client instance
+  const mx = useMatrixClient();
+
+  useEffect(() => {
+    // Ensure we have the necessary data to proceed
+    if (!viewedRoomId || !mx) {
+      logger.error('CallActivationEffect: Missing viewedRoomId or MatrixClient.');
+      return;
+    }
+
+    // Check if the currently viewed room is a voice/call channel
+    const isViewingCallChannel = isRoomVoiceChannel(viewedRoomId, mx);
+
+    if (isViewingCallChannel) {
+      // If the user is viewing a call channel and it's not already the
+      // one active in the persistent container, activate it.
+      if (viewedRoomId !== activeCallRoomId) {
+        logger.info(`CallActivationEffect: Auto-activating call for viewed room: ${viewedRoomId}`);
+        setActiveCallRoomId(viewedRoomId);
+      } else {
+        logger.debug(
+          `CallActivationEffect: Viewed room ${viewedRoomId} is already the active call.`
+        );
+      }
+    }
+    // No 'else' block needed here if we want the call to persist when navigating
+    // to a non-call room. If you wanted to auto-hangup on navigating away,
+    // you would add: else if (activeCallRoomId === viewedRoomId) { setActiveCallRoomId(null); }
+  }, [viewedRoomId, activeCallRoomId, setActiveCallRoomId, mx]); // Effect dependencies
+
+  // This component doesn't render any UI itself
+  return null;
+}

From d82e49aab859c4c41bb1c6874d07f6927f319c73 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Tue, 15 Apr 2025 22:14:43 -0500
Subject: [PATCH 023/242] add callprovider

---
 src/app/pages/client/CallProvider.tsx | 157 ++++++++++++++++++++++++++
 1 file changed, 157 insertions(+)
 create mode 100644 src/app/pages/client/CallProvider.tsx

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
new file mode 100644
index 00000000..2f308394
--- /dev/null
+++ b/src/app/pages/client/CallProvider.tsx
@@ -0,0 +1,157 @@
+import React, { createContext, useState, useContext, useMemo, useCallback, ReactNode } from 'react';
+import { logger } from 'matrix-js-sdk/lib/logger';
+// Import the transport type and action types from matrix-widget-api
+import { WidgetApiToWidgetAction, ITransport, AnyWidgetAction } from 'matrix-widget-api'; // Ensure ITransport and AnyWidgetAction are imported
+
+// Define the shape of the context value
+interface CallContextState {
+  activeCallRoomId: string | null;
+  setActiveCallRoomId: (roomId: string | null) => void;
+  hangUp: () => void;
+  // --- New additions for API interaction ---
+  activeApiTransport: ITransport | null; // Hold the active transport
+  registerActiveTransport: (roomId: string | null, transport: ITransport | null) => void; // Function for PersistentCallContainer to register/unregister
+  sendWidgetAction: <T = unknown>(
+    action: WidgetApiToWidgetAction | string, // Allow standard actions or custom string actions
+    data: T
+  ) => Promise<void>; // Function for any component to send actions
+}
+
+// Create the context
+const CallContext = createContext<CallContextState | undefined>(undefined);
+
+interface CallProviderProps {
+  children: ReactNode;
+}
+
+// Create the Provider component
+export function CallProvider({ children }: CallProviderProps) {
+  const [activeCallRoomId, setActiveCallRoomIdState] = useState<string | null>(null);
+  // --- New State: Hold the transport of the currently active widget API ---
+  const [activeApiTransport, setActiveApiTransport] = useState<ITransport | null>(null);
+  // Store the room ID associated with the current active transport
+  const [transportRoomId, setTransportRoomId] = useState<string | null>(null);
+
+  // --- Actions ---
+  const setActiveCallRoomId = useCallback(
+    (roomId: string | null) => {
+      logger.debug(`CallContext: Setting activeCallRoomId to ${roomId}`);
+      setActiveCallRoomIdState(roomId);
+      // If the room being cleared is the one associated with the transport, clear the transport
+      if (roomId === null || roomId !== transportRoomId) {
+        logger.debug(
+          `CallContext: Clearing active transport because active room changed or was cleared.`
+        );
+        setActiveApiTransport(null);
+        setTransportRoomId(null);
+      }
+    },
+    [transportRoomId]
+  ); // Depends on transportRoomId to avoid clearing unnecessarily
+
+  const hangUp = useCallback(() => {
+    logger.debug(`CallContext: Hang up called.`);
+    setActiveCallRoomIdState(null);
+    // Also clear the transport on hangup
+    logger.debug(`CallContext: Clearing active transport due to hangup.`);
+    setActiveApiTransport(null);
+    setTransportRoomId(null);
+  }, []);
+
+  // --- New Action: Register/Unregister Transport ---
+  // Called by PersistentCallContainer when its widget API is ready or cleaned up
+  // Now accepts the roomId associated with the transport
+  const registerActiveTransport = useCallback(
+    (roomId: string | null, transport: ITransport | null) => {
+      if (roomId && transport) {
+        logger.debug(`CallContext: Registering active transport for room ${roomId}.`);
+        setActiveApiTransport(transport);
+        setTransportRoomId(roomId);
+      } else {
+        // Only clear if the transport being cleared belongs to the currently stored roomId
+        // or if roomId is explicitly null (global cleanup)
+        if (roomId === transportRoomId || roomId === null) {
+          logger.debug(`CallContext: Clearing active transport for room ${transportRoomId}.`);
+          setActiveApiTransport(null);
+          setTransportRoomId(null);
+        } else {
+          logger.debug(
+            `CallContext: Ignoring transport clear request for room ${roomId}, as current transport belongs to ${transportRoomId}.`
+          );
+        }
+      }
+    },
+    [transportRoomId] // Depends on the currently stored transportRoomId
+  );
+
+  // --- New Action: Send Action to Widget ---
+  // Can be called by any component within the provider
+  const sendWidgetAction = useCallback(
+    async <T = unknown,>(
+      action: WidgetApiToWidgetAction | string, // Use the imported type or allow custom strings
+      data: T
+    ): Promise<void> => {
+      if (!activeApiTransport) {
+        logger.warn(
+          `CallContext: Cannot send action '${action}', no active API transport registered.`
+        );
+        return Promise.reject(new Error('No active call transport'));
+      }
+      if (!transportRoomId || transportRoomId !== activeCallRoomId) {
+        logger.warn(
+          `CallContext: Cannot send action '${action}', transport room (${transportRoomId}) does not match active call room (${activeCallRoomId}). Stale transport?`
+        );
+        return Promise.reject(new Error('Mismatched active call transport'));
+      }
+      try {
+        logger.debug(
+          `CallContext: Sending action '${action}' via active transport (room: ${transportRoomId}) with data:`,
+          data
+        );
+        // Use the transport's send method.
+        // The 'action' parameter should match expected Widget API actions.
+        // The transport handles wrapping this in the correct message format.
+        await activeApiTransport.send<T>(action as AnyWidgetAction, data); // Cast action type if needed by transport method signature
+      } catch (error) {
+        logger.error(`CallContext: Error sending action '${action}':`, error);
+        return Promise.reject(error);
+        // Handle error appropriately
+      }
+    },
+    [activeApiTransport, activeCallRoomId, transportRoomId] // Depends on the current transport and active room IDs
+  );
+
+  // --- Memoize Context Value ---
+  const contextValue = useMemo<CallContextState>(
+    () => ({
+      activeCallRoomId,
+      setActiveCallRoomId,
+      hangUp,
+      // Add new state and actions to the context value
+      activeApiTransport, // Keep exposing transport if direct access is ever needed, but prefer sendWidgetAction
+      registerActiveTransport,
+      sendWidgetAction,
+    }),
+    [
+      activeCallRoomId,
+      setActiveCallRoomId,
+      hangUp,
+      activeApiTransport,
+      registerActiveTransport,
+      sendWidgetAction,
+    ]
+  );
+
+  // Provide the context value to children
+  return <CallContext.Provider value={contextValue}>{children}</CallContext.Provider>;
+}
+
+// --- Custom Hook ---
+// Remains the same, but now returns the extended context value
+export function useCallState(): CallContextState {
+  const context = useContext(CallContext);
+  if (context === undefined) {
+    throw new Error('useCallState must be used within a CallProvider');
+  }
+  return context;
+}

From c367c90a96d2833580390f08f650b8842e82da59 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Tue, 15 Apr 2025 22:15:22 -0500
Subject: [PATCH 024/242] add PersistentCallContainer (moved iframe to here
 from RoomView)

---
 .../pages/call/PersistentCallContainer.tsx    | 275 ++++++++++++++++++
 1 file changed, 275 insertions(+)
 create mode 100644 src/app/pages/call/PersistentCallContainer.tsx

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
new file mode 100644
index 00000000..691d62e3
--- /dev/null
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -0,0 +1,275 @@
+import React, { useEffect, useRef, useMemo } from 'react';
+import { logger } from 'matrix-js-sdk/lib/logger';
+import { ClientWidgetApi, IWidgetApiRequest, MatrixCapabilities } from 'matrix-widget-api'; // Assuming imports
+
+// --- Required Imports (Adjust paths as needed) ---
+import { useCallState } from '../client/CallProvider';
+import {
+  createVirtualWidget,
+  Edget,
+  getWidgetData,
+  getWidgetUrl,
+} from '../../features/room/SmallWidget';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { RoomViewHeader } from '../../features/room/RoomViewHeader';
+import { PowerLevelsContextProvider, usePowerLevels } from '../../hooks/usePowerLevels';
+import { Box } from 'folds';
+import { IsDirectRoomProvider, RoomProvider, useRoom } from '../../hooks/useRoom';
+import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
+import { Page, PageRoot } from '../../components/page';
+import { RouteSpaceProvider, Space, SpaceRouteRoomProvider } from '../client/space';
+import { MobileFriendlyPageNav } from '../MobileFriendly';
+import { SPACE_PATH } from '../paths';
+import { SpaceProvider } from '../../hooks/useSpace';
+import { useSelectedSpace } from '../../hooks/router/useSelectedSpace';
+import { useAtomValue } from 'jotai';
+import { mDirectAtom } from '../../state/mDirectList';
+
+// --- Component Props ---
+interface PersistentCallContainerProps {
+  isVisible: boolean; // Prop passed from parent to control display
+}
+
+// --- PersistentCallContainer Component ---
+
+export function PersistentCallContainer({ isVisible }: PersistentCallContainerProps) {
+  // Global state access
+  const { activeCallRoomId, setActiveCallRoomId } = useCallState(); // Get setter for hangup action
+  const mx = useMatrixClient();
+
+  // Refs
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const widgetApiRef = useRef<ClientWidgetApi | null>(null);
+  const edgetRef = useRef<Edget | null>(null);
+
+  // Effect to manage iframe src and Widget API lifecycle based SOLELY on activeCallRoomId
+  useEffect(() => {
+    // Store the room ID associated with the current Edget instance for clearer cleanup logging
+    const cleanupRoomId = edgetRef.current?.roomId;
+    logger.debug(`PersistentCallContainer effect running. activeCallRoomId: ${activeCallRoomId}`);
+
+    // --- Cleanup Function ---
+    // This runs BEFORE the effect runs again OR when the component unmounts.
+    // Crucially, it cleans up resources associated with the *previous* activeCallRoomId.
+    const cleanup = () => {
+      logger.info(`PersistentCallContainer: Cleaning up for previous room: ${cleanupRoomId}`);
+      if (edgetRef.current) {
+        // Ensure stopMessaging handles removing listeners etc.
+        edgetRef.current.stopMessaging();
+      }
+      // Potentially call widgetApi.stop() or similar if the API instance has it
+      if (widgetApiRef.current) {
+        // widgetApiRef.current.stop?.(); // Example
+      }
+      // Clear refs for the old instances
+      widgetApiRef.current = null;
+      edgetRef.current = null;
+    };
+
+    // --- Setup Logic for NEW activeCallRoomId ---
+    if (activeCallRoomId && mx?.getUserId()) {
+      // --- 1. Generate new URL and App definition ---
+      const newUrl = getWidgetUrl(mx, activeCallRoomId); // Use activeCallRoomId
+      const userId = mx.getUserId() ?? '';
+      const app = createVirtualWidget(
+        mx,
+        `element-call-${activeCallRoomId}`, // ID based on active room
+        userId,
+        'Element Call',
+        'm.call',
+        newUrl,
+        false,
+        // Pass activeCallRoomId to getWidgetData
+        getWidgetData(mx, activeCallRoomId, {}, { skipLobby: true /* other configs */ }),
+        activeCallRoomId // Pass activeCallRoomId as the room ID for the widget context
+      );
+
+      // --- 2. Update iframe src ---
+      // This triggers the iframe reload if the src is different.
+      // The cleanup function from the *previous* effect run will have already cleaned up the old API connection.
+      if (iframeRef.current && iframeRef.current.src !== newUrl.toString()) {
+        logger.info(
+          `PersistentCallContainer: Updating iframe src for ${activeCallRoomId} to ${newUrl.toString()}`
+        );
+        iframeRef.current.src = newUrl.toString();
+      } else if (iframeRef.current && !iframeRef.current.src) {
+        // Handle initial load case if src starts blank
+        logger.info(
+          `PersistentCallContainer: Setting initial iframe src for ${activeCallRoomId} to ${newUrl.toString()}`
+        );
+        iframeRef.current.src = newUrl.toString();
+      }
+
+      // --- 3. Setup new Widget API connection ---
+      const iframeElement = iframeRef.current;
+      if (!iframeElement) {
+        logger.error('PersistentCallContainer: iframeRef is null, cannot setup API.');
+        return cleanup; // Should not happen if iframe is always rendered
+      }
+
+      // Create and store new Edget instance
+      logger.debug(`PersistentCallContainer: Creating new Edget/API for ${activeCallRoomId}`);
+      const edget = new Edget(app);
+      edgetRef.current = edget; // Store ref to new instance
+
+      try {
+        const widgetApiInstance = edget.startMessaging(iframeElement);
+        widgetApiRef.current = widgetApiInstance; // Store ref to new instance
+
+        // --- 4. Add necessary listeners to the NEW widgetApiInstance ---
+        widgetApiInstance.once('ready', () => {
+          logger.info(`PersistentCallContainer: Widget for ${activeCallRoomId} is ready.`);
+        });
+
+        // Example listener for read_events (adjust as needed)
+        widgetApiInstance.on(
+          'action:org.matrix.msc2876.read_events',
+          (ev: CustomEvent<IWidgetApiRequest>) => {
+            logger.info(`PersistentCallContainer: Widget requested 'read_events':`, ev.detail.data);
+            ev.preventDefault(); // Prevent default driver handling
+            // Use the current widgetApiRef to reply
+            widgetApiRef.current?.transport?.reply(ev.detail, { approved: true });
+          }
+        );
+
+        // Listener for hangup action from the widget
+        widgetApiInstance.on('action:im.vector.hangup', () => {
+          logger.info(
+            `PersistentCallContainer: Received hangup action from widget in room ${activeCallRoomId}.`
+          );
+          // Call the global state function to clear the active call
+          // Check if we are still the active call before clearing, prevents race conditions
+          if (edgetRef.current?.roomId === activeCallRoomId) {
+            setActiveCallRoomId(null);
+          }
+        });
+
+        // Add other listeners (TURN servers, etc.)...
+      } catch (error) {
+        logger.error(
+          `PersistentCallContainer: Error initializing widget messaging for ${activeCallRoomId}:`,
+          error
+        );
+        // Cleanup immediately if setup fails
+        cleanup();
+      }
+    } else {
+      // --- No active call ---
+      // Ensure src is blank and perform cleanup for any previous instance
+      if (iframeRef.current && iframeRef.current.src !== 'about:blank') {
+        logger.info('PersistentCallContainer: No active call, setting src to about:blank');
+        iframeRef.current.src = 'about:blank';
+      }
+      // Run cleanup in case an instance was active before becoming null
+      cleanup();
+    }
+
+    // Return the cleanup function to be executed when dependencies change or component unmounts
+    return cleanup;
+
+    // CRITICAL Dependencies: This effect manages the lifecycle based on the active call ID
+  }, [activeCallRoomId, mx, setActiveCallRoomId]);
+
+  // --- Render ---
+  // Apply conditional styling based on the isVisible prop passed by the parent
+  const containerStyle: React.CSSProperties = {
+    width: '100%',
+    height: '100%',
+    // --- Visibility Control ---
+    top: '1',
+    left: '1',
+    display: isVisible ? 'flex' : 'none', // Use flex/block as appropriate for your layout
+    flexDirection: 'row',
+    //overflow: 'hidden',
+  };
+  const roomId = useSelectedRoom();
+  const room = mx.getRoom(roomId);
+  const selectedSpaceId = useSelectedSpace();
+  const space = mx.getRoom(selectedSpaceId);
+  const mDirects = useAtomValue(mDirectAtom);
+  const powerLevels = usePowerLevels(room);
+
+  // Assuming necessary imports: React, Box, Page, PageRoot, MobileFriendlyPageNav,
+  // Space, RoomViewHeader, iframeRef, PowerLevelsContextProvider,
+  // RouteSpaceProvider, SpaceRouteRoomProvider, SPACE_PATH, powerLevels, containerStyle
+
+  return (
+    // Outer container div controlled by parent via isVisible prop
+    <div style={containerStyle}>
+      {/* Context provider(s) needed by components inside */}
+      {/* Pass actual powerLevels if required */}
+      <PowerLevelsContextProvider value={powerLevels}>
+        {/* Route/Space specific context providers MUST wrap both Space and Header */}
+        <RouteSpaceProvider>
+          <SpaceRouteRoomProvider>
+            {/* Main layout container inside providers: Flex Row */}
+            {/* Assuming Box handles flex layout */}
+            <Box direction="Row" grow="Yes" style={{ height: '100%', width: '100%' }}>
+              {/* --- Left Side (Nav/Space) --- */}
+              <Box
+                shrink="No"
+                style={{
+                  width: '250px',
+                  height: '100%',
+                  overflowY: 'auto',
+                  borderRight: '1px solid #ccc',
+                }}
+              >
+                {' '}
+                {/* Example style */}
+                {/* PageRoot likely renders the nav prop */}
+                <PageRoot
+                  nav={
+                    <MobileFriendlyPageNav path={SPACE_PATH}>
+                      {/* Space component requires the providers above */}
+                      <Space />
+                    </MobileFriendlyPageNav>
+                  }
+                />
+              </Box>
+              {/* --- Right Side (Header + Iframe) --- */}
+              {/* This Box takes remaining space and arranges header/iframe vertically */}
+              <Box
+                grow="Yes"
+                direction="Column"
+                style={{ height: '100%', width: '100%', overflow: 'hidden' }}
+              >
+                {/* Header Area */}
+                <Box grow="No">
+                  {' '}
+                  {/* Header doesn't grow/shrink */}
+                  {/* RoomViewHeader requires the providers above */}
+                  <RoomViewHeader />
+                </Box>
+
+                {/* Iframe Area (takes remaining space) */}
+                <Box grow="Yes" style={{ position: 'relative' }}>
+                  {' '}
+                  {/* Use relative positioning for absolute child */}
+                  <iframe
+                    ref={iframeRef}
+                    style={{
+                      // Use absolute positioning to fill the parent Box
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      width: '100%',
+                      height: '100%',
+                      border: 'none',
+                    }}
+                    title={`Persistent Element Call`}
+                    sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
+                    allow="microphone; camera; display-capture; autoplay; clipboard-write;"
+                    src="about:blank" // useEffect sets the correct src
+                  />
+                </Box>
+              </Box>{' '}
+              {/* End Right Side Box */}
+            </Box>{' '}
+            {/* End Main Layout Box (Row) */}
+          </SpaceRouteRoomProvider>
+        </RouteSpaceProvider>
+      </PowerLevelsContextProvider>
+    </div> // End Outer Container Div
+  );
+}

From b88da572a4b795a4d1ddeef8a86c3216391da40d Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Tue, 15 Apr 2025 22:16:35 -0500
Subject: [PATCH 025/242] update client layout to handle active calls

---
 src/app/pages/client/ClientLayout.tsx | 35 ++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/app/pages/client/ClientLayout.tsx b/src/app/pages/client/ClientLayout.tsx
index 4a077ba6..bf598ff8 100644
--- a/src/app/pages/client/ClientLayout.tsx
+++ b/src/app/pages/client/ClientLayout.tsx
@@ -1,15 +1,42 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 import { Box } from 'folds';
+import { useCallState } from './CallProvider';
+import { useParams } from 'react-router-dom';
+import { PersistentCallContainer } from '../call/PersistentCallContainer';
 
 type ClientLayoutProps = {
   nav: ReactNode;
   children: ReactNode;
 };
 export function ClientLayout({ nav, children }: ClientLayoutProps) {
+  const { activeCallRoomId } = useCallState();
+  const { roomIdOrAlias: viewedRoomId } = useParams();
+  const isViewingActiveCall = useMemo(
+    () => activeCallRoomId !== null && activeCallRoomId === viewedRoomId,
+    [activeCallRoomId, viewedRoomId]
+  );
   return (
-    <Box grow="Yes">
-      <Box shrink="No">{nav}</Box>
-      <Box grow="Yes">{children}</Box>
+    <Box grow="Yes" direction="Row" style={{ height: '100vh', width: '100vw', overflow: 'hidden' }}>
+      <Box shrink="No" className="nav-container-styles">
+        {nav}
+      </Box>
+      <Box grow="Yes" direction="Column" style={{ position: 'relative', overflowY: 'auto' }}>
+        <Box grow="Yes" style={{ position: 'relative' }}>
+          <Box
+            grow="Yes"
+            style={{
+              display: isViewingActiveCall ? 'none' : 'flex',
+              flexDirection: 'column',
+              width: '100%',
+              height: '100%',
+            }}
+            className="outlet-wrapper"
+          >
+            {children}
+          </Box>
+          <PersistentCallContainer isVisible={isViewingActiveCall} />
+        </Box>
+      </Box>{' '}
     </Box>
   );
 }

From 5f0ca6a794b4501193ce4a0b74b5fb522d08f24b Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Tue, 15 Apr 2025 22:17:10 -0500
Subject: [PATCH 026/242] add callprovider and callactivationeffect

---
 src/app/pages/Router.tsx | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index 89743693..da88354c 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -61,6 +61,8 @@ import { AutoRestoreBackupOnVerification } from '../components/BackupRestore';
 import { RoomSettingsRenderer } from '../features/room-settings';
 import { ClientRoomsNotificationPreferences } from './client/ClientRoomsNotificationPreferences';
 import { SpaceSettingsRenderer } from '../features/space-settings';
+import { CallProvider } from './client/CallProvider';
+import { CallActivationEffect } from './call/CallActivation';
 
 export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {
   const { hashRouter } = clientConfig;
@@ -116,15 +118,18 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                 <ClientRoomsNotificationPreferences>
                   <ClientBindAtoms>
                     <ClientNonUIFeatures>
-                      <ClientLayout
-                        nav={
-                          <MobileFriendlyClientNav>
-                            <SidebarNav />
-                          </MobileFriendlyClientNav>
-                        }
-                      >
-                        <Outlet />
-                      </ClientLayout>
+                      <CallProvider>
+                        <ClientLayout
+                          nav={
+                            <MobileFriendlyClientNav>
+                              <SidebarNav />
+                            </MobileFriendlyClientNav>
+                          }
+                        >
+                          <Outlet />
+                        </ClientLayout>
+                        <CallActivationEffect />
+                      </CallProvider>
                       <RoomSettingsRenderer />
                       <SpaceSettingsRenderer />
                       <ReceiveSelfDeviceVerification />

From cc88733204701523132a52703d358e8b48f493d3 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Tue, 15 Apr 2025 22:47:30 -0500
Subject: [PATCH 027/242] readd openid handling

---
 src/app/features/room/SmallWidgetDriver.ts | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/app/features/room/SmallWidgetDriver.ts b/src/app/features/room/SmallWidgetDriver.ts
index 5c13e405..ded485b8 100644
--- a/src/app/features/room/SmallWidgetDriver.ts
+++ b/src/app/features/room/SmallWidgetDriver.ts
@@ -14,6 +14,10 @@ import {
   type ISearchUserDirectoryResult,
   type IGetMediaConfigResult,
   type UpdateDelayedEventAction,
+  OpenIDRequestState,
+  IOpenIDCredentials,
+  SimpleObservable,
+  IOpenIDUpdate,
 } from 'matrix-widget-api';
 import {
   EventType,
@@ -385,6 +389,13 @@ export class SmallWidgetDriver extends WidgetDriver {
     return results.map((e) => e.getEffectiveEvent() as IRoomEvent);
   }
 
+  public async askOpenID(observer: SimpleObservable<IOpenIDUpdate>): Promise<void> {
+    return observer.update({
+      state: OpenIDRequestState.Allowed,
+      token: await this.mxClient.getOpenIdToken(),
+    });
+  }
+
   /**
    * Reads the current values of all matching room state entries.
    * @param roomId The ID of the room.

From 99e55b36c6956cd25cc98095c24b3f0d4002f806 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Tue, 15 Apr 2025 22:47:55 -0500
Subject: [PATCH 028/242] reisolate the individual components that need passed
 values

---
 .../pages/call/PersistentCallContainer.tsx    | 116 +++++++++---------
 1 file changed, 60 insertions(+), 56 deletions(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index 691d62e3..1dfa03e0 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -200,21 +200,21 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
       {/* Pass actual powerLevels if required */}
       <PowerLevelsContextProvider value={powerLevels}>
         {/* Route/Space specific context providers MUST wrap both Space and Header */}
-        <RouteSpaceProvider>
-          <SpaceRouteRoomProvider>
-            {/* Main layout container inside providers: Flex Row */}
-            {/* Assuming Box handles flex layout */}
-            <Box direction="Row" grow="Yes" style={{ height: '100%', width: '100%' }}>
-              {/* --- Left Side (Nav/Space) --- */}
-              <Box
-                shrink="No"
-                style={{
-                  width: '250px',
-                  height: '100%',
-                  overflowY: 'auto',
-                  borderRight: '1px solid #ccc',
-                }}
-              >
+        {/* Main layout container inside providers: Flex Row */}
+        {/* Assuming Box handles flex layout */}
+        <Box direction="Row" grow="Yes" style={{ height: '100%', width: '100%' }}>
+          {/* --- Left Side (Nav/Space) --- */}
+          <Box
+            shrink="No"
+            style={{
+              width: '250px',
+              height: '100%',
+              overflowY: 'auto',
+              borderRight: '1px solid #ccc',
+            }}
+          >
+            <RouteSpaceProvider>
+              <SpaceRouteRoomProvider>
                 {' '}
                 {/* Example style */}
                 {/* PageRoot likely renders the nav prop */}
@@ -226,49 +226,53 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
                     </MobileFriendlyPageNav>
                   }
                 />
-              </Box>
-              {/* --- Right Side (Header + Iframe) --- */}
-              {/* This Box takes remaining space and arranges header/iframe vertically */}
-              <Box
-                grow="Yes"
-                direction="Column"
-                style={{ height: '100%', width: '100%', overflow: 'hidden' }}
-              >
-                {/* Header Area */}
-                <Box grow="No">
-                  {' '}
-                  {/* Header doesn't grow/shrink */}
-                  {/* RoomViewHeader requires the providers above */}
+              </SpaceRouteRoomProvider>
+            </RouteSpaceProvider>
+          </Box>
+          {/* --- Right Side (Header + Iframe) --- */}
+          {/* This Box takes remaining space and arranges header/iframe vertically */}
+          <Box
+            grow="Yes"
+            direction="Column"
+            style={{ height: '100%', width: '100%', overflow: 'hidden' }}
+          >
+            {/* Header Area */}
+            <Box grow="No">
+              {' '}
+              {/* Header doesn't grow/shrink */}
+              {/* RoomViewHeader requires the providers above */}
+              <RouteSpaceProvider>
+                <SpaceRouteRoomProvider>
                   <RoomViewHeader />
-                </Box>
+                </SpaceRouteRoomProvider>
+              </RouteSpaceProvider>
+            </Box>
 
-                {/* Iframe Area (takes remaining space) */}
-                <Box grow="Yes" style={{ position: 'relative' }}>
-                  {' '}
-                  {/* Use relative positioning for absolute child */}
-                  <iframe
-                    ref={iframeRef}
-                    style={{
-                      // Use absolute positioning to fill the parent Box
-                      position: 'absolute',
-                      top: 0,
-                      left: 0,
-                      width: '100%',
-                      height: '100%',
-                      border: 'none',
-                    }}
-                    title={`Persistent Element Call`}
-                    sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
-                    allow="microphone; camera; display-capture; autoplay; clipboard-write;"
-                    src="about:blank" // useEffect sets the correct src
-                  />
-                </Box>
-              </Box>{' '}
-              {/* End Right Side Box */}
-            </Box>{' '}
-            {/* End Main Layout Box (Row) */}
-          </SpaceRouteRoomProvider>
-        </RouteSpaceProvider>
+            {/* Iframe Area (takes remaining space) */}
+            <Box grow="Yes" style={{ position: 'relative' }}>
+              {' '}
+              {/* Use relative positioning for absolute child */}
+              <iframe
+                ref={iframeRef}
+                style={{
+                  // Use absolute positioning to fill the parent Box
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  width: '100%',
+                  height: '100%',
+                  border: 'none',
+                }}
+                title={`Persistent Element Call`}
+                sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
+                allow="microphone; camera; display-capture; autoplay; clipboard-write;"
+                src="about:blank" // useEffect sets the correct src
+              />
+            </Box>
+          </Box>{' '}
+          {/* End Right Side Box */}
+        </Box>{' '}
+        {/* End Main Layout Box (Row) */}
       </PowerLevelsContextProvider>
     </div> // End Outer Container Div
   );

From 9c5fde32585cd25a92c612450faefa87fd5df5eb Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 16 Apr 2025 19:49:11 -0500
Subject: [PATCH 029/242] Clean up file and remove broken import

---
 src/app/pages/client/CallProvider.tsx | 65 ++++++++-------------------
 1 file changed, 18 insertions(+), 47 deletions(-)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
index 2f308394..227ea1b7 100644
--- a/src/app/pages/client/CallProvider.tsx
+++ b/src/app/pages/client/CallProvider.tsx
@@ -1,35 +1,28 @@
 import React, { createContext, useState, useContext, useMemo, useCallback, ReactNode } from 'react';
 import { logger } from 'matrix-js-sdk/lib/logger';
-// Import the transport type and action types from matrix-widget-api
-import { WidgetApiToWidgetAction, ITransport, AnyWidgetAction } from 'matrix-widget-api'; // Ensure ITransport and AnyWidgetAction are imported
+import { WidgetApiToWidgetAction, ITransport, WidgetApiAction } from 'matrix-widget-api';
 
-// Define the shape of the context value
 interface CallContextState {
   activeCallRoomId: string | null;
   setActiveCallRoomId: (roomId: string | null) => void;
   hangUp: () => void;
-  // --- New additions for API interaction ---
-  activeApiTransport: ITransport | null; // Hold the active transport
-  registerActiveTransport: (roomId: string | null, transport: ITransport | null) => void; // Function for PersistentCallContainer to register/unregister
+  activeApiTransport: ITransport | null;
+  registerActiveTransport: (roomId: string | null, transport: ITransport | null) => void;
   sendWidgetAction: <T = unknown>(
-    action: WidgetApiToWidgetAction | string, // Allow standard actions or custom string actions
+    action: WidgetApiToWidgetAction | string,
     data: T
-  ) => Promise<void>; // Function for any component to send actions
+  ) => Promise<void>;
 }
 
-// Create the context
 const CallContext = createContext<CallContextState | undefined>(undefined);
 
 interface CallProviderProps {
   children: ReactNode;
 }
 
-// Create the Provider component
 export function CallProvider({ children }: CallProviderProps) {
   const [activeCallRoomId, setActiveCallRoomIdState] = useState<string | null>(null);
-  // --- New State: Hold the transport of the currently active widget API ---
   const [activeApiTransport, setActiveApiTransport] = useState<ITransport | null>(null);
-  // Store the room ID associated with the current active transport
   const [transportRoomId, setTransportRoomId] = useState<string | null>(null);
 
   // --- Actions ---
@@ -37,7 +30,6 @@ export function CallProvider({ children }: CallProviderProps) {
     (roomId: string | null) => {
       logger.debug(`CallContext: Setting activeCallRoomId to ${roomId}`);
       setActiveCallRoomIdState(roomId);
-      // If the room being cleared is the one associated with the transport, clear the transport
       if (roomId === null || roomId !== transportRoomId) {
         logger.debug(
           `CallContext: Clearing active transport because active room changed or was cleared.`
@@ -47,50 +39,37 @@ export function CallProvider({ children }: CallProviderProps) {
       }
     },
     [transportRoomId]
-  ); // Depends on transportRoomId to avoid clearing unnecessarily
+  );
 
   const hangUp = useCallback(() => {
     logger.debug(`CallContext: Hang up called.`);
     setActiveCallRoomIdState(null);
-    // Also clear the transport on hangup
     logger.debug(`CallContext: Clearing active transport due to hangup.`);
     setActiveApiTransport(null);
     setTransportRoomId(null);
   }, []);
 
-  // --- New Action: Register/Unregister Transport ---
-  // Called by PersistentCallContainer when its widget API is ready or cleaned up
-  // Now accepts the roomId associated with the transport
   const registerActiveTransport = useCallback(
     (roomId: string | null, transport: ITransport | null) => {
       if (roomId && transport) {
         logger.debug(`CallContext: Registering active transport for room ${roomId}.`);
         setActiveApiTransport(transport);
         setTransportRoomId(roomId);
+      } else if (roomId === transportRoomId || roomId === null) {
+        logger.debug(`CallContext: Clearing active transport for room ${transportRoomId}.`);
+        setActiveApiTransport(null);
+        setTransportRoomId(null);
       } else {
-        // Only clear if the transport being cleared belongs to the currently stored roomId
-        // or if roomId is explicitly null (global cleanup)
-        if (roomId === transportRoomId || roomId === null) {
-          logger.debug(`CallContext: Clearing active transport for room ${transportRoomId}.`);
-          setActiveApiTransport(null);
-          setTransportRoomId(null);
-        } else {
-          logger.debug(
-            `CallContext: Ignoring transport clear request for room ${roomId}, as current transport belongs to ${transportRoomId}.`
-          );
-        }
+        logger.debug(
+          `CallContext: Ignoring transport clear request for room ${roomId}, as current transport belongs to ${transportRoomId}.`
+        );
       }
     },
-    [transportRoomId] // Depends on the currently stored transportRoomId
+    [transportRoomId]
   );
 
-  // --- New Action: Send Action to Widget ---
-  // Can be called by any component within the provider
   const sendWidgetAction = useCallback(
-    async <T = unknown,>(
-      action: WidgetApiToWidgetAction | string, // Use the imported type or allow custom strings
-      data: T
-    ): Promise<void> => {
+    async <T = unknown,>(action: WidgetApiToWidgetAction | string, data: T): Promise<void> => {
       if (!activeApiTransport) {
         logger.warn(
           `CallContext: Cannot send action '${action}', no active API transport registered.`
@@ -108,17 +87,13 @@ export function CallProvider({ children }: CallProviderProps) {
           `CallContext: Sending action '${action}' via active transport (room: ${transportRoomId}) with data:`,
           data
         );
-        // Use the transport's send method.
-        // The 'action' parameter should match expected Widget API actions.
-        // The transport handles wrapping this in the correct message format.
-        await activeApiTransport.send<T>(action as AnyWidgetAction, data); // Cast action type if needed by transport method signature
+        await activeApiTransport.send<T>(action as WidgetApiAction, data);
       } catch (error) {
         logger.error(`CallContext: Error sending action '${action}':`, error);
         return Promise.reject(error);
-        // Handle error appropriately
       }
     },
-    [activeApiTransport, activeCallRoomId, transportRoomId] // Depends on the current transport and active room IDs
+    [activeApiTransport, activeCallRoomId, transportRoomId]
   );
 
   // --- Memoize Context Value ---
@@ -127,8 +102,7 @@ export function CallProvider({ children }: CallProviderProps) {
       activeCallRoomId,
       setActiveCallRoomId,
       hangUp,
-      // Add new state and actions to the context value
-      activeApiTransport, // Keep exposing transport if direct access is ever needed, but prefer sendWidgetAction
+      activeApiTransport,
       registerActiveTransport,
       sendWidgetAction,
     }),
@@ -142,12 +116,9 @@ export function CallProvider({ children }: CallProviderProps) {
     ]
   );
 
-  // Provide the context value to children
   return <CallContext.Provider value={contextValue}>{children}</CallContext.Provider>;
 }
 
-// --- Custom Hook ---
-// Remains the same, but now returns the extended context value
 export function useCallState(): CallContextState {
   const context = useContext(CallContext);
   if (context === undefined) {

From eba967066467f0c72afe7b51acf349ca975b8a41 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 16 Apr 2025 20:13:18 -0500
Subject: [PATCH 030/242] Remove unneeded comments and imports and clean up
 name of Edget to SmallWidget

---
 .../pages/call/PersistentCallContainer.tsx    | 218 ++++++------------
 1 file changed, 73 insertions(+), 145 deletions(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index 1dfa03e0..7c4b5354 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -1,209 +1,149 @@
-import React, { useEffect, useRef, useMemo } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { logger } from 'matrix-js-sdk/lib/logger';
-import { ClientWidgetApi, IWidgetApiRequest, MatrixCapabilities } from 'matrix-widget-api'; // Assuming imports
-
-// --- Required Imports (Adjust paths as needed) ---
+import { ClientWidgetApi, IWidgetApiRequest } from 'matrix-widget-api';
+import { Box } from 'folds';
 import { useCallState } from '../client/CallProvider';
 import {
   createVirtualWidget,
-  Edget,
+  SmallWidget,
   getWidgetData,
   getWidgetUrl,
 } from '../../features/room/SmallWidget';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { RoomViewHeader } from '../../features/room/RoomViewHeader';
-import { PowerLevelsContextProvider, usePowerLevels } from '../../hooks/usePowerLevels';
-import { Box } from 'folds';
-import { IsDirectRoomProvider, RoomProvider, useRoom } from '../../hooks/useRoom';
-import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
 import { Page, PageRoot } from '../../components/page';
 import { RouteSpaceProvider, Space, SpaceRouteRoomProvider } from '../client/space';
 import { MobileFriendlyPageNav } from '../MobileFriendly';
 import { SPACE_PATH } from '../paths';
-import { SpaceProvider } from '../../hooks/useSpace';
-import { useSelectedSpace } from '../../hooks/router/useSelectedSpace';
-import { useAtomValue } from 'jotai';
-import { mDirectAtom } from '../../state/mDirectList';
+import { PowerLevelsContextProvider } from '../../hooks/usePowerLevels';
+import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
 
-// --- Component Props ---
 interface PersistentCallContainerProps {
-  isVisible: boolean; // Prop passed from parent to control display
+  isVisible: boolean;
 }
 
-// --- PersistentCallContainer Component ---
-
 export function PersistentCallContainer({ isVisible }: PersistentCallContainerProps) {
-  // Global state access
-  const { activeCallRoomId, setActiveCallRoomId } = useCallState(); // Get setter for hangup action
+  const { activeCallRoomId, setActiveCallRoomId } = useCallState();
   const mx = useMatrixClient();
+  const room = useSelectedRoom();
+
+  logger.info(room);
 
-  // Refs
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
   const widgetApiRef = useRef<ClientWidgetApi | null>(null);
-  const edgetRef = useRef<Edget | null>(null);
+  const smallWidgetRef = useRef<SmallWidget | null>(null);
 
-  // Effect to manage iframe src and Widget API lifecycle based SOLELY on activeCallRoomId
   useEffect(() => {
-    // Store the room ID associated with the current Edget instance for clearer cleanup logging
-    const cleanupRoomId = edgetRef.current?.roomId;
+    const cleanupRoomId = smallWidgetRef.current?.roomId;
     logger.debug(`PersistentCallContainer effect running. activeCallRoomId: ${activeCallRoomId}`);
 
-    // --- Cleanup Function ---
-    // This runs BEFORE the effect runs again OR when the component unmounts.
-    // Crucially, it cleans up resources associated with the *previous* activeCallRoomId.
     const cleanup = () => {
-      logger.info(`PersistentCallContainer: Cleaning up for previous room: ${cleanupRoomId}`);
-      if (edgetRef.current) {
-        // Ensure stopMessaging handles removing listeners etc.
-        edgetRef.current.stopMessaging();
+      logger.error(`PersistentCallContainer: Cleaning up for previous room: ${cleanupRoomId}`);
+      if (smallWidgetRef.current) {
+        smallWidgetRef.current.stopMessaging();
       }
       // Potentially call widgetApi.stop() or similar if the API instance has it
       if (widgetApiRef.current) {
-        // widgetApiRef.current.stop?.(); // Example
+        // widgetApiRef.current.stop?.();
       }
-      // Clear refs for the old instances
       widgetApiRef.current = null;
-      edgetRef.current = null;
+      smallWidgetRef.current = null;
     };
 
-    // --- Setup Logic for NEW activeCallRoomId ---
     if (activeCallRoomId && mx?.getUserId()) {
-      // --- 1. Generate new URL and App definition ---
-      const newUrl = getWidgetUrl(mx, activeCallRoomId); // Use activeCallRoomId
+      const newUrl = getWidgetUrl(mx, activeCallRoomId);
       const userId = mx.getUserId() ?? '';
       const app = createVirtualWidget(
         mx,
-        `element-call-${activeCallRoomId}`, // ID based on active room
+        `element-call-${activeCallRoomId}`,
         userId,
         'Element Call',
         'm.call',
         newUrl,
         false,
-        // Pass activeCallRoomId to getWidgetData
-        getWidgetData(mx, activeCallRoomId, {}, { skipLobby: true /* other configs */ }),
-        activeCallRoomId // Pass activeCallRoomId as the room ID for the widget context
+        getWidgetData(mx, activeCallRoomId, {}, { skipLobby: true }),
+        activeCallRoomId
       );
 
-      // --- 2. Update iframe src ---
-      // This triggers the iframe reload if the src is different.
-      // The cleanup function from the *previous* effect run will have already cleaned up the old API connection.
       if (iframeRef.current && iframeRef.current.src !== newUrl.toString()) {
         logger.info(
           `PersistentCallContainer: Updating iframe src for ${activeCallRoomId} to ${newUrl.toString()}`
         );
         iframeRef.current.src = newUrl.toString();
       } else if (iframeRef.current && !iframeRef.current.src) {
-        // Handle initial load case if src starts blank
         logger.info(
           `PersistentCallContainer: Setting initial iframe src for ${activeCallRoomId} to ${newUrl.toString()}`
         );
         iframeRef.current.src = newUrl.toString();
       }
 
-      // --- 3. Setup new Widget API connection ---
       const iframeElement = iframeRef.current;
       if (!iframeElement) {
         logger.error('PersistentCallContainer: iframeRef is null, cannot setup API.');
-        return cleanup; // Should not happen if iframe is always rendered
+        return cleanup;
       }
 
-      // Create and store new Edget instance
-      logger.debug(`PersistentCallContainer: Creating new Edget/API for ${activeCallRoomId}`);
-      const edget = new Edget(app);
-      edgetRef.current = edget; // Store ref to new instance
+      logger.debug(`PersistentCallContainer: Creating new SmallWidget/API for ${activeCallRoomId}`);
+      const smallWidget = new SmallWidget(app);
+      smallWidgetRef.current = smallWidget;
 
       try {
-        const widgetApiInstance = edget.startMessaging(iframeElement);
-        widgetApiRef.current = widgetApiInstance; // Store ref to new instance
-
-        // --- 4. Add necessary listeners to the NEW widgetApiInstance ---
+        const widgetApiInstance = smallWidget.startMessaging(iframeElement);
+        widgetApiRef.current = widgetApiInstance;
         widgetApiInstance.once('ready', () => {
           logger.info(`PersistentCallContainer: Widget for ${activeCallRoomId} is ready.`);
         });
 
-        // Example listener for read_events (adjust as needed)
+        /* Default handling seems bugged on this. Element does not need this in their driver or codebase, but
+           we do. I believe down the road update_state will be used by element-call and this can be removed.
+        */
         widgetApiInstance.on(
           'action:org.matrix.msc2876.read_events',
           (ev: CustomEvent<IWidgetApiRequest>) => {
             logger.info(`PersistentCallContainer: Widget requested 'read_events':`, ev.detail.data);
-            ev.preventDefault(); // Prevent default driver handling
-            // Use the current widgetApiRef to reply
+            ev.preventDefault();
             widgetApiRef.current?.transport?.reply(ev.detail, { approved: true });
           }
         );
 
-        // Listener for hangup action from the widget
         widgetApiInstance.on('action:im.vector.hangup', () => {
           logger.info(
             `PersistentCallContainer: Received hangup action from widget in room ${activeCallRoomId}.`
           );
-          // Call the global state function to clear the active call
-          // Check if we are still the active call before clearing, prevents race conditions
-          if (edgetRef.current?.roomId === activeCallRoomId) {
+          if (smallWidgetRef.current?.roomId === activeCallRoomId) {
             setActiveCallRoomId(null);
           }
         });
-
-        // Add other listeners (TURN servers, etc.)...
       } catch (error) {
         logger.error(
           `PersistentCallContainer: Error initializing widget messaging for ${activeCallRoomId}:`,
           error
         );
-        // Cleanup immediately if setup fails
         cleanup();
       }
     } else {
-      // --- No active call ---
-      // Ensure src is blank and perform cleanup for any previous instance
       if (iframeRef.current && iframeRef.current.src !== 'about:blank') {
         logger.info('PersistentCallContainer: No active call, setting src to about:blank');
         iframeRef.current.src = 'about:blank';
       }
-      // Run cleanup in case an instance was active before becoming null
       cleanup();
     }
-
-    // Return the cleanup function to be executed when dependencies change or component unmounts
     return cleanup;
-
-    // CRITICAL Dependencies: This effect manages the lifecycle based on the active call ID
   }, [activeCallRoomId, mx, setActiveCallRoomId]);
 
-  // --- Render ---
-  // Apply conditional styling based on the isVisible prop passed by the parent
   const containerStyle: React.CSSProperties = {
     width: '100%',
     height: '100%',
-    // --- Visibility Control ---
     top: '1',
     left: '1',
-    display: isVisible ? 'flex' : 'none', // Use flex/block as appropriate for your layout
+    display: isVisible ? 'flex' : 'none',
     flexDirection: 'row',
-    //overflow: 'hidden',
   };
-  const roomId = useSelectedRoom();
-  const room = mx.getRoom(roomId);
-  const selectedSpaceId = useSelectedSpace();
-  const space = mx.getRoom(selectedSpaceId);
-  const mDirects = useAtomValue(mDirectAtom);
-  const powerLevels = usePowerLevels(room);
-
-  // Assuming necessary imports: React, Box, Page, PageRoot, MobileFriendlyPageNav,
-  // Space, RoomViewHeader, iframeRef, PowerLevelsContextProvider,
-  // RouteSpaceProvider, SpaceRouteRoomProvider, SPACE_PATH, powerLevels, containerStyle
 
   return (
-    // Outer container div controlled by parent via isVisible prop
-    <div style={containerStyle}>
-      {/* Context provider(s) needed by components inside */}
-      {/* Pass actual powerLevels if required */}
-      <PowerLevelsContextProvider value={powerLevels}>
-        {/* Route/Space specific context providers MUST wrap both Space and Header */}
-        {/* Main layout container inside providers: Flex Row */}
-        {/* Assuming Box handles flex layout */}
-        <Box direction="Row" grow="Yes" style={{ height: '100%', width: '100%' }}>
-          {/* --- Left Side (Nav/Space) --- */}
+    <Page style={containerStyle}>
+      <Box direction="Row" grow="Yes" style={{ height: '100%', width: '100%' }}>
+        {activeCallRoomId && room && (
           <Box
             shrink="No"
             style={{
@@ -215,13 +155,9 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
           >
             <RouteSpaceProvider>
               <SpaceRouteRoomProvider>
-                {' '}
-                {/* Example style */}
-                {/* PageRoot likely renders the nav prop */}
                 <PageRoot
                   nav={
                     <MobileFriendlyPageNav path={SPACE_PATH}>
-                      {/* Space component requires the providers above */}
                       <Space />
                     </MobileFriendlyPageNav>
                   }
@@ -229,51 +165,43 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
               </SpaceRouteRoomProvider>
             </RouteSpaceProvider>
           </Box>
-          {/* --- Right Side (Header + Iframe) --- */}
-          {/* This Box takes remaining space and arranges header/iframe vertically */}
-          <Box
-            grow="Yes"
-            direction="Column"
-            style={{ height: '100%', width: '100%', overflow: 'hidden' }}
-          >
-            {/* Header Area */}
-            <Box grow="No">
-              {' '}
-              {/* Header doesn't grow/shrink */}
-              {/* RoomViewHeader requires the providers above */}
-              <RouteSpaceProvider>
-                <SpaceRouteRoomProvider>
-                  <RoomViewHeader />
-                </SpaceRouteRoomProvider>
-              </RouteSpaceProvider>
-            </Box>
+        )}
 
-            {/* Iframe Area (takes remaining space) */}
-            <Box grow="Yes" style={{ position: 'relative' }}>
-              {' '}
-              {/* Use relative positioning for absolute child */}
-              <iframe
-                ref={iframeRef}
-                style={{
-                  // Use absolute positioning to fill the parent Box
-                  position: 'absolute',
-                  top: 0,
-                  left: 0,
-                  width: '100%',
-                  height: '100%',
-                  border: 'none',
-                }}
-                title={`Persistent Element Call`}
-                sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
-                allow="microphone; camera; display-capture; autoplay; clipboard-write;"
-                src="about:blank" // useEffect sets the correct src
-              />
+        <Box
+          grow="Yes"
+          direction="Column"
+          style={{ height: '100%', width: '100%', overflow: 'hidden' }}
+        >
+          {activeCallRoomId && room && (
+            <Box grow="No">
+              <PowerLevelsContextProvider value={null}>
+                <RouteSpaceProvider>
+                  <SpaceRouteRoomProvider>
+                    <RoomViewHeader />
+                  </SpaceRouteRoomProvider>
+                </RouteSpaceProvider>
+              </PowerLevelsContextProvider>
             </Box>
-          </Box>{' '}
-          {/* End Right Side Box */}
-        </Box>{' '}
-        {/* End Main Layout Box (Row) */}
-      </PowerLevelsContextProvider>
-    </div> // End Outer Container Div
+          )}
+          <Box grow="Yes" style={{ position: 'relative' }}>
+            <iframe
+              ref={iframeRef}
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                border: 'none',
+              }}
+              title={`Persistent Element Call`}
+              sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
+              allow="microphone; camera; display-capture; autoplay; clipboard-write;"
+              src="about:blank"
+            />
+          </Box>
+        </Box>
+      </Box>
+    </Page>
   );
 }

From 38ad5e3f7ee3c7c54b14f332d39e7a1cb7f68672 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 16 Apr 2025 20:17:59 -0500
Subject: [PATCH 031/242] add elementCallUrl

---
 config.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/config.json b/config.json
index de6015a1..bde28067 100644
--- a/config.json
+++ b/config.json
@@ -10,6 +10,8 @@
   ],
   "allowCustomHomeservers": true,
 
+  "elementCallUrl": "https://elementcall.example.com",
+
   "featuredCommunities": {
     "openAsDefault": false,
     "spaces": [

From 0106fab00b11d7752ebdabba6c532a18d3bfe81e Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 16 Apr 2025 20:36:24 -0500
Subject: [PATCH 032/242] clean up to provide elementUrl option (instead of
 while testing just planting a string with the url)

---
 src/app/features/room/SmallWidget.ts | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/src/app/features/room/SmallWidget.ts b/src/app/features/room/SmallWidget.ts
index 480f9b92..a7f059c6 100644
--- a/src/app/features/room/SmallWidget.ts
+++ b/src/app/features/room/SmallWidget.ts
@@ -28,10 +28,9 @@ import { SmallWidgetDriver } from './SmallWidgetDriver';
  * @param roomId - The ID of the room.
  * @returns The generated URL object.
  */
-export const getWidgetUrl = (mx: MatrixClient, roomId: string): URL => {
+export const getWidgetUrl = (mx: MatrixClient, roomId: string, elementCallUrl: string): URL => {
   const baseUrl = window.location.origin;
-  // Ensure the path is correct relative to the application's structure
-  let url = new URL('./dist/element-call/dist/index.html', baseUrl);
+  const url = new URL(elementCallUrl) ?? new URL('./dist/element-call/dist/index.html', baseUrl);
 
   const params = new URLSearchParams({
     embed: 'true',
@@ -50,17 +49,13 @@ export const getWidgetUrl = (mx: MatrixClient, roomId: string): URL => {
     parentUrl: window.location.origin,
   });
 
-  // Replace '$' encoded as %24 if necessary for template variables
   const replacedParams = params.toString().replace(/%24/g, '$');
-  url.hash = `#?${replacedParams}`; // Use #? for query parameters in the hash
+  url.hash = `#?${replacedParams}`;
 
-  logger.info('Generated Element Call Widget URL:', url.toString()); // Use info level for clarity
+  logger.info('Generated Element Call Widget URL:', url.toString());
   return url;
 };
 
-// --- Widget Interfaces and Classes ---
-
-// Interface describing the data structure for the widget
 export interface IApp extends IWidget {
   client: MatrixClient;
   roomId: string;
@@ -69,8 +64,7 @@ export interface IApp extends IWidget {
   'io.element.managed_hybrid'?: boolean;
 }
 
-// Custom EventEmitter class to manage widget communication setup
-export class Edget extends EventEmitter {
+export class SmallWidget extends EventEmitter {
   private client: MatrixClient;
 
   private messaging: ClientWidgetApi | null = null;
@@ -263,7 +257,8 @@ export class Edget extends EventEmitter {
       if (timelineEvent.getId() === upToEventId) {
         // The event must be somewhere before the "read up to" marker
         return false;
-      } else if (timelineEvent.getId() === ev.getId()) {
+      }
+      if (timelineEvent.getId() === ev.getId()) {
         // The event is after the marker; advance it
         this.readUpToMap[roomId] = evId;
         return true;
@@ -320,7 +315,7 @@ export class Edget extends EventEmitter {
     if (this.messaging) {
       // Potentially call stop() or remove listeners if the API provides such methods
       // this.messaging.stop(); // Example if a stop method exists
-      this.messaging.removeAllListeners(); // Remove listeners attached by Edget
+      this.messaging.removeAllListeners(); // Remove listeners attached by SmallWidget
       logger.info(`Widget messaging stopped for widgetId: ${this.mockWidget.id}`);
       this.messaging = null;
     }
@@ -344,7 +339,7 @@ export const getWidgetData = (
   overwriteData: object
 ): IWidgetData => {
   // Example: Determine E2EE based on room state if needed
-  let perParticipantE2EE = true; // Default or based on logic
+  const perParticipantE2EE = true; // Default or based on logic
   // const roomEncryption = client.getRoom(roomId)?.currentState.getStateEvents(EventType.RoomEncryption, "");
   // if (roomEncryption) perParticipantE2EE = true; // Simplified example
 

From 2c8ae9693b699ec17462a374db2f45a20fe87963 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 16 Apr 2025 20:43:56 -0500
Subject: [PATCH 033/242] Remove extra comments and unneeded helper function

---
 src/app/pages/call/CallActivation.tsx | 37 +++++----------------------
 1 file changed, 7 insertions(+), 30 deletions(-)

diff --git a/src/app/pages/call/CallActivation.tsx b/src/app/pages/call/CallActivation.tsx
index dca77a1f..7e8f4580 100644
--- a/src/app/pages/call/CallActivation.tsx
+++ b/src/app/pages/call/CallActivation.tsx
@@ -1,44 +1,25 @@
 import React, { useEffect } from 'react';
-import { useParams } from 'react-router-dom'; // Or your router's equivalent hook
+import { useParams } from 'react-router-dom';
 import { logger } from 'matrix-js-sdk/lib/logger';
 
-import { useCallState } from '../client/CallProvider'; // Adjust path if needed
-import { useMatrixClient } from '../../hooks/useMatrixClient'; // Adjust path if needed
+import { useCallState } from '../client/CallProvider';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
-// Helper function (replace with your actual implementation)
-// This function determines if a room ID corresponds to a call/voice channel
-const isRoomVoiceChannel = (roomId: string, mx: ReturnType<typeof useMatrixClient>): boolean => {
-  if (!mx) return false;
-  const room = mx.getRoom(roomId);
-  // Example check - use your specific logic (e.g., checking room type, state events)
-  return room?.isCallRoom?.() ?? false;
-};
-
-/**
- * This component runs an effect to automatically activate the call state
- * when the user navigates to a room designated as a call/voice channel.
- */
 export function CallActivationEffect() {
-  // Get the currently viewed room ID from the router
   const { roomIdOrAlias: viewedRoomId } = useParams<{ roomIdOrAlias: string }>();
-  // Get the call state and setter from context
   const { activeCallRoomId, setActiveCallRoomId } = useCallState();
-  // Get the Matrix client instance
   const mx = useMatrixClient();
+  const room = mx.getRoom(viewedRoomId);
 
   useEffect(() => {
-    // Ensure we have the necessary data to proceed
     if (!viewedRoomId || !mx) {
       logger.error('CallActivationEffect: Missing viewedRoomId or MatrixClient.');
       return;
     }
 
-    // Check if the currently viewed room is a voice/call channel
-    const isViewingCallChannel = isRoomVoiceChannel(viewedRoomId, mx);
+    const isViewingCallRoom = room?.isCallRoom?.() ?? false;
 
-    if (isViewingCallChannel) {
-      // If the user is viewing a call channel and it's not already the
-      // one active in the persistent container, activate it.
+    if (isViewingCallRoom) {
       if (viewedRoomId !== activeCallRoomId) {
         logger.info(`CallActivationEffect: Auto-activating call for viewed room: ${viewedRoomId}`);
         setActiveCallRoomId(viewedRoomId);
@@ -48,11 +29,7 @@ export function CallActivationEffect() {
         );
       }
     }
-    // No 'else' block needed here if we want the call to persist when navigating
-    // to a non-call room. If you wanted to auto-hangup on navigating away,
-    // you would add: else if (activeCallRoomId === viewedRoomId) { setActiveCallRoomId(null); }
-  }, [viewedRoomId, activeCallRoomId, setActiveCallRoomId, mx]); // Effect dependencies
+  }, [viewedRoomId, activeCallRoomId, setActiveCallRoomId, mx, room]);
 
-  // This component doesn't render any UI itself
   return null;
 }

From 28f5d8afe8bee598a2833c63426be547b8f0e833 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 16 Apr 2025 20:44:33 -0500
Subject: [PATCH 034/242] Remove unneeded comments

---
 src/app/pages/client/CallProvider.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
index 227ea1b7..f3ec3eb5 100644
--- a/src/app/pages/client/CallProvider.tsx
+++ b/src/app/pages/client/CallProvider.tsx
@@ -25,7 +25,6 @@ export function CallProvider({ children }: CallProviderProps) {
   const [activeApiTransport, setActiveApiTransport] = useState<ITransport | null>(null);
   const [transportRoomId, setTransportRoomId] = useState<string | null>(null);
 
-  // --- Actions ---
   const setActiveCallRoomId = useCallback(
     (roomId: string | null) => {
       logger.debug(`CallContext: Setting activeCallRoomId to ${roomId}`);
@@ -96,7 +95,6 @@ export function CallProvider({ children }: CallProviderProps) {
     [activeApiTransport, activeCallRoomId, transportRoomId]
   );
 
-  // --- Memoize Context Value ---
   const contextValue = useMemo<CallContextState>(
     () => ({
       activeCallRoomId,

From 0b6a7c752d1c167eb9ecef6c50694753ae11339f Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 16 Apr 2025 20:45:33 -0500
Subject: [PATCH 035/242] fix import order

---
 src/app/pages/client/ClientLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/pages/client/ClientLayout.tsx b/src/app/pages/client/ClientLayout.tsx
index bf598ff8..35854deb 100644
--- a/src/app/pages/client/ClientLayout.tsx
+++ b/src/app/pages/client/ClientLayout.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode, useMemo } from 'react';
 import { Box } from 'folds';
-import { useCallState } from './CallProvider';
 import { useParams } from 'react-router-dom';
+import { useCallState } from './CallProvider';
 import { PersistentCallContainer } from '../call/PersistentCallContainer';
 
 type ClientLayoutProps = {

From 9d352de995da09ff09019caac18d7e685e8121a5 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 16 Apr 2025 20:52:29 -0500
Subject: [PATCH 036/242] Remove pointless comments, helper funcs, and clean up
 formatting

---
 src/app/pages/client/space/Space.tsx | 181 +++++++--------------------
 1 file changed, 48 insertions(+), 133 deletions(-)

diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 0960cf59..17b004b5 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -10,7 +10,6 @@ import { useAtom, useAtomValue } from 'jotai';
 import {
   Avatar,
   Box,
-  Button,
   Icon,
   IconButton,
   Icons,
@@ -22,11 +21,13 @@ import {
   Text,
   config,
   toRem,
-} from 'folds'; // Assuming 'folds' is your UI library
+} from 'folds';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { JoinRule, Room } from 'matrix-js-sdk';
 import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
 import FocusTrap from 'focus-trap-react';
+import { logger } from 'matrix-js-sdk/lib/logger';
+import { WidgetApiToWidgetAction } from 'matrix-widget-api';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { mDirectAtom } from '../../../state/mDirectList';
 import {
@@ -46,6 +47,7 @@ import {
 import { useSpace } from '../../../hooks/useSpace';
 import { VirtualTile } from '../../../components/virtualizer';
 import { RoomNavCategoryButton, RoomNavItem } from '../../../features/room-nav';
+// Using the original name for clarity when generating space category IDs
 import { makeNavCategoryId as makeSpaceNavCategoryId } from '../../../state/closedNavCategories';
 import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
 import { useCategoryHandler } from '../../../hooks/useCategoryHandler';
@@ -76,26 +78,12 @@ import {
   useRoomsNotificationPreferencesContext,
 } from '../../../hooks/useRoomsNotificationPreferences';
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
-import { useCallState } from '../CallProvider'; // Assuming path
-import { WidgetApiToWidgetAction } from 'matrix-widget-api';
-import { logger } from 'matrix-js-sdk/lib/logger';
-
-// --- Helper Functions ---
-
-// Determine if a room is a voice room (assuming Room object has this method)
-const isVoiceRoom = (room: Room): boolean => room.isCallRoom?.() ?? false;
-// Determine if a room is a text room
-const isTextRoom = (room: Room): boolean => !isVoiceRoom(room);
-
-// Helper function to generate unique category IDs for channel type headers
-const makeChannelTypeId = (parentId: string, type: 'text' | 'voice'): string => {
-  return `${parentId}_${type}_channels`;
-};
+import { useCallState } from '../CallProvider';
 
 /**
  * Processes the raw hierarchy from useSpaceJoinedHierarchy into a flat list
  * suitable for the virtualizer, including collapsible headers for text/voice channels.
- * Removes the top-level "Channels" category header.
+ * Removes the top-level "Rooms" category header.
  *
  * @param hierarchy - The raw hierarchy data (array of { roomId: string }).
  * @param mx - The Matrix client instance.
@@ -111,25 +99,21 @@ const processHierarchyForVirtualizer = (
 ): Array<{ type: string; key: string; [key: string]: any }> => {
   const processed: Array<{ type: string; key: string; [key: string]: any }> = [];
   let currentCategoryRooms = { text: [], voice: [] };
-  // Start with the root space as the initial parent context
   let currentParentId: string = spaceRoomId;
 
-  // Function to add collected text/voice rooms under their respective headers
   const addCollectedRoomsToProcessed = (parentId: string) => {
-    const textCategoryId = makeChannelTypeId(parentId, 'text');
-    const voiceCategoryId = makeChannelTypeId(parentId, 'voice');
+    const textCategoryId = `${parentId}_text_rooms`;
+    const voiceCategoryId = `${parentId}_call_rooms`;
     const isTextClosed = closedCategories.has(textCategoryId);
-    const isVoiceClosed = closedCategories.has(voiceCategoryId);
+    const isCallClosed = closedCategories.has(voiceCategoryId);
 
-    // Add Text Channels Header and Rooms (if any exist)
     if (currentCategoryRooms.text.length > 0) {
       processed.push({
-        type: 'channel_header', // Use specific type for collapsible channel headers
-        title: 'Text Channels',
-        categoryId: textCategoryId, // ID used for collapse state
+        type: 'channel_header',
+        title: 'Text Rooms',
+        categoryId: textCategoryId,
         key: `${parentId}-text-header`,
       });
-      // Only add room items if this category is not closed
       if (!isTextClosed) {
         currentCategoryRooms.text.forEach((room) =>
           processed.push({ type: 'room', room, key: room.roomId })
@@ -137,76 +121,55 @@ const processHierarchyForVirtualizer = (
       }
     }
 
-    // Add Voice Channels Header and Rooms (if any exist)
     if (currentCategoryRooms.voice.length > 0) {
       processed.push({
-        type: 'channel_header', // Use specific type
-        title: 'Voice Channels',
-        categoryId: voiceCategoryId, // ID used for collapse state
+        type: 'channel_header',
+        title: 'Call Rooms',
+        categoryId: voiceCategoryId,
         key: `${parentId}-voice-header`,
       });
-      // Only add room items if this category is not closed
-      if (!isVoiceClosed) {
+      if (!isCallClosed) {
         currentCategoryRooms.voice.forEach((room) =>
           processed.push({ type: 'room', room, key: room.roomId })
         );
       }
     }
-    // Reset collected rooms for the next category/space
     currentCategoryRooms = { text: [], voice: [] };
   };
 
-  // Iterate through the raw hierarchy provided by the hook
   hierarchy.forEach((item) => {
     const room = mx.getRoom(item.roomId);
     if (!room) {
       logger.warn(`processHierarchyForVirtualizer: Room not found for ID ${item.roomId}`);
-      return; // Skip if room data isn't available
     }
 
     if (room.isSpaceRoom()) {
-      // When encountering a new space, first process the rooms collected under the *previous* parent
       addCollectedRoomsToProcessed(currentParentId);
-
-      // Now, set the current parent context to this new space
       currentParentId = room.roomId;
-
-      // Add the space category item itself to the processed list,
-      // *UNLESS* it's the root space (we want to skip the top-level "Channels" header)
       if (room.roomId !== spaceRoomId) {
-        const spaceCategoryId = makeSpaceNavCategoryId(spaceRoomId, room.roomId); // Use original ID generator for spaces
+        const spaceCategoryId = makeSpaceNavCategoryId(spaceRoomId, room.roomId);
         processed.push({
-          type: 'category', // Type for main space categories
+          type: 'category',
           room,
-          categoryId: spaceCategoryId, // ID for this space's collapse state
+          categoryId: spaceCategoryId,
           key: room.roomId,
         });
       }
-      // Note: We assume the `hierarchy` list is already filtered based on closed *space* categories.
+    } else if (room.isCallRoom()) {
+      currentCategoryRooms.voice.push(room);
+    } else if (!room.isCallRoom()) {
+      currentCategoryRooms.text.push(room);
     } else {
-      // This is a regular room (not a space). Add it to the appropriate list (text/voice)
-      // for the *current* parent space.
-      if (isVoiceRoom(room)) {
-        currentCategoryRooms.voice.push(room);
-      } else if (isTextRoom(room)) {
-        currentCategoryRooms.text.push(room);
-      } else {
-        // Fallback or handle unexpected room types if necessary
-        logger.warn(
-          `processHierarchyForVirtualizer: Room ${room.roomId} is neither text nor voice.`
-        );
-        currentCategoryRooms.text.push(room); // Default to text for now
-      }
+      logger.warn(`processHierarchyForVirtualizer: Room ${room.roomId} is neither text nor voice.`);
+      currentCategoryRooms.text.push(room);
     }
   });
 
-  // After iterating through all items, process any remaining rooms collected under the last parent
   addCollectedRoomsToProcessed(currentParentId);
 
   return processed;
 };
 
-// --- Space Menu Component (Remains Unchanged) ---
 type SpaceMenuProps = {
   room: Room;
   requestClose: () => void;
@@ -333,7 +296,6 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   );
 });
 
-// --- Space Header Component (Remains Unchanged) ---
 function SpaceHeader() {
   const space = useSpace();
   const spaceName = useRoomName(space);
@@ -395,14 +357,13 @@ function SpaceHeader() {
   );
 }
 
-// --- Fixed Bottom Nav Area Component (Remains Unchanged) ---
 function FixedBottomNavArea() {
   const { sendWidgetAction, activeCallRoomId } = useCallState();
   const mx = useMatrixClient();
   const userName = mx.getUser(mx.getUserId() ?? '')?.displayName ?? mx.getUserId() ?? 'User';
 
   const handleSendMessageClick = () => {
-    const action = 'my.custom.action'; // Replace with your actual action
+    const action = 'my.custom.action';
     const data = { message: `Hello from ${userName}!` };
     logger.debug(`FixedBottomNavArea: Sending action '${action}'`);
     sendWidgetAction(action, data)
@@ -412,7 +373,7 @@ function FixedBottomNavArea() {
 
   const handleToggleMuteClick = () => {
     const action = WidgetApiToWidgetAction.SetAudioInputMuted;
-    const data = {}; // Sending empty data might imply toggle for some widgets
+    const data = {};
     logger.debug(`FixedBottomNavArea: Sending action '${action}'`);
     sendWidgetAction(action, data)
       .then(() => logger.info(`FixedBottomNavArea: Action '${action}' sent.`))
@@ -425,7 +386,7 @@ function FixedBottomNavArea() {
         direction="Column"
         gap="200"
         padding="300"
-        style={{ flexShrink: 0, borderTop: `1px solid ${config?.color?.LineStrong ?? '#ccc'}` }} // Use theme color if possible
+        style={{ flexShrink: 0, borderTop: `1px solid ${config?.color?.LineStrong ?? '#ccc'}` }}
       >
         <Text size="T200" color="Muted" align="Center">
           No active call
@@ -436,7 +397,7 @@ function FixedBottomNavArea() {
 
   return (
     <Text size="T200" color="Muted" align="Center">
-      {mx.getRoom(activeCallRoomId)?.normalizedName}
+      {}
     </Text>
   );
 } /*
@@ -457,10 +418,9 @@ function FixedBottomNavArea() {
     </Box>
     */
 
-// --- Main Space Component (Updated Rendering Logic) ---
 export function Space() {
   const mx = useMatrixClient();
-  const space = useSpace(); // The current top-level space being viewed
+  const space = useSpace();
   useNavToActivePathMapper(space.roomId);
   const spaceIdOrAlias = getCanonicalAliasOrRoomId(mx, space.roomId);
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -474,10 +434,8 @@ export function Space() {
   const lobbySelected = useSpaceLobbySelected(spaceIdOrAlias);
   const searchSelected = useSpaceSearchSelected(spaceIdOrAlias);
 
-  // State for managing collapsed categories (includes spaces and channel types)
   const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
 
-  // Memoized callback to get room objects
   const getRoom = useCallback(
     (rId: string): Room | undefined => {
       if (allJoinedRooms.has(rId)) {
@@ -488,75 +446,53 @@ export function Space() {
     [mx, allJoinedRooms]
   );
 
-  // Fetch the raw hierarchy using the hook
-  // Note: The filtering callbacks passed here primarily affect *which* rooms/spaces
-  // are included in the raw list *before* processing.
   const hierarchy = useSpaceJoinedHierarchy(
     space.roomId,
     getRoom,
-    // isRoomHidden callback: Hides room if parent space category is closed, unless room is unread/selected.
     useCallback(
       (parentId, roomId) => {
-        // Generate the category ID for the parent *space*
         const parentSpaceCategoryId = makeSpaceNavCategoryId(space.roomId, parentId);
-        // If the parent space category is not closed, the room is not hidden by this rule.
         if (!closedCategories.has(parentSpaceCategoryId)) {
           return false;
         }
-        // Parent space is closed. Hide the room unless it's unread or currently selected.
         const showRoomAnyway = roomToUnread.has(roomId) || roomId === selectedRoomId;
-        return !showRoomAnyway; // Return true to hide, false to show
+        return !showRoomAnyway;
       },
-      [space.roomId, closedCategories, roomToUnread, selectedRoomId] // Dependencies
+      [space.roomId, closedCategories, roomToUnread, selectedRoomId]
     ),
-    // isSubCategoryClosed callback: Checks if a *space* subcategory is closed.
+
     useCallback(
       (subCategoryId) => closedCategories.has(makeSpaceNavCategoryId(space.roomId, subCategoryId)),
-      [closedCategories, space.roomId] // Dependencies
+      [closedCategories, space.roomId]
     )
   );
 
-  // Process the raw hierarchy into a list with collapsible channel headers
   const processedHierarchy = useMemo(
-    () =>
-      processHierarchyForVirtualizer(
-        hierarchy,
-        mx,
-        space.roomId,
-        closedCategories // Pass closed state to the processing function
-      ),
-    [hierarchy, mx, space.roomId, closedCategories] // Dependencies for memoization
+    () => processHierarchyForVirtualizer(hierarchy, mx, space.roomId, closedCategories),
+    [hierarchy, mx, space.roomId, closedCategories]
   );
 
-  // Setup the virtualizer with the processed list
   const virtualizer = useVirtualizer({
     count: processedHierarchy.length,
     getScrollElement: () => scrollRef.current,
-    estimateSize: () => 32, // Adjust based on average item height
-    overscan: 10, // Render items slightly outside the viewport
+    estimateSize: () => 32,
+    overscan: 10,
   });
 
-  // Click handler for toggling category collapse state (works for spaces and channel types)
   const handleCategoryClick = useCategoryHandler(setClosedCategories, (categoryId) =>
     closedCategories.has(categoryId)
   );
 
-  // Function to generate navigation links for rooms
   const getToLink = (roomId: string) =>
     getSpaceRoomPath(spaceIdOrAlias, getCanonicalAliasOrRoomId(mx, roomId));
 
-  // --- Render ---
   return (
     <PageNav style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
-      {/* Fixed Header */}
       <SpaceHeader />
-
-      {/* Scrollable Content Area */}
       <PageNavContent
         scrollRef={scrollRef}
         style={{ flexGrow: 1, overflowY: 'auto', overflowX: 'hidden' }}
       >
-        {/* Static Top Links (Lobby, Search) */}
         <Box direction="Column" gap="300" paddingBottom="400">
           <NavCategory>
             <NavItem variant="Background" radii="400" aria-selected={lobbySelected}>
@@ -593,38 +529,29 @@ export function Space() {
             </NavItem>
           </NavCategory>
         </Box>
-
-        {/* Virtualized List Area */}
         <NavCategory
           style={{
-            height: `${virtualizer.getTotalSize()}px`, // Set height for virtualizer scroll calculations
+            height: `${virtualizer.getTotalSize()}px`,
             width: '100%',
-            position: 'relative', // Needed for absolute positioning of virtual items
+            position: 'relative',
           }}
         >
           {virtualizer.getVirtualItems().map((vItem) => {
             const item = processedHierarchy[vItem.index];
-            if (!item) return null; // Should not happen with correct processing
-
-            // --- Render Logic based on Item Type ---
+            if (!item) return null;
             const renderContent = () => {
               switch (item.type) {
-                // Render a main space category header (for nested spaces)
                 case 'category': {
-                  // item has: room, categoryId, key
                   const { room, categoryId } = item;
-                  // Determine name: Use the room name for nested spaces
                   const name = room.name;
-                  // Add padding above subsequent categories
-                  // Removed index === 0 check as root category is gone
                   const paddingTop = config?.space?.S400 ?? '1rem';
                   return (
                     <div style={{ paddingTop: paddingTop }}>
                       <NavCategoryHeader>
                         <RoomNavCategoryButton
-                          data-category-id={categoryId} // ID for collapse state
-                          onClick={handleCategoryClick} // Toggle collapse
-                          closed={closedCategories.has(categoryId)} // Pass closed state
+                          data-category-id={categoryId}
+                          onClick={handleCategoryClick}
+                          closed={closedCategories.has(categoryId)}
                         >
                           {name}
                         </RoomNavCategoryButton>
@@ -632,21 +559,16 @@ export function Space() {
                     </div>
                   );
                 }
-                // Render a collapsible header for Text or Voice channels
                 case 'channel_header': {
-                  // item has: title, categoryId, key
                   const { title, categoryId } = item;
                   return (
-                    // Add indentation and padding for visual hierarchy
                     <Box paddingLeft="400" paddingTop="200" paddingBottom="100">
                       <NavCategoryHeader variant="Subtle">
-                        {' '}
-                        {/* Use subtle variant if available */}
                         <RoomNavCategoryButton
-                          data-category-id={categoryId} // ID for collapse state
-                          onClick={handleCategoryClick} // Toggle collapse
-                          closed={closedCategories.has(categoryId)} // Pass closed state
-                          isSubCategory // Optional prop for styling tweaks
+                          data-category-id={categoryId}
+                          onClick={handleCategoryClick}
+                          closed={closedCategories.has(categoryId)}
+                          isSubCategory
                         >
                           {title}
                         </RoomNavCategoryButton>
@@ -654,12 +576,9 @@ export function Space() {
                     </Box>
                   );
                 }
-                // Render a regular room item (text or voice channel)
                 case 'room': {
-                  // item has: room, key
                   const { room } = item;
                   return (
-                    // Add indentation for rooms under headers
                     <Box paddingLeft="500">
                       <RoomNavItem
                         room={room}
@@ -676,13 +595,11 @@ export function Space() {
                   );
                 }
                 default:
-                  // Log error for unexpected item types
                   logger.error('Unknown item type in virtualized list:', item);
                   return null;
               }
             };
 
-            // Render the virtual tile wrapper with the content
             return (
               <VirtualTile virtualItem={vItem} key={item.key} ref={virtualizer.measureElement}>
                 {renderContent()}
@@ -691,8 +608,6 @@ export function Space() {
           })}
         </NavCategory>
       </PageNavContent>
-
-      {/* Fixed Bottom Section (Remains Unchanged) */}
       <FixedBottomNavArea />
     </PageNav>
   );

From 1629341c084401b7b53ea6eaa2e4cbc06aaa15dc Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 16 Apr 2025 20:53:10 -0500
Subject: [PATCH 037/242] update to provide client context for the widget url's
 element call endpoint if provided

---
 src/app/pages/call/PersistentCallContainer.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index 7c4b5354..e750801b 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -17,6 +17,7 @@ import { MobileFriendlyPageNav } from '../MobileFriendly';
 import { SPACE_PATH } from '../paths';
 import { PowerLevelsContextProvider } from '../../hooks/usePowerLevels';
 import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
+import { useClientConfig } from '../../hooks/useClientConfig';
 
 interface PersistentCallContainerProps {
   isVisible: boolean;
@@ -26,6 +27,7 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
   const { activeCallRoomId, setActiveCallRoomId } = useCallState();
   const mx = useMatrixClient();
   const room = useSelectedRoom();
+  const clientConfig = useClientConfig();
 
   logger.info(room);
 
@@ -51,7 +53,7 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
     };
 
     if (activeCallRoomId && mx?.getUserId()) {
-      const newUrl = getWidgetUrl(mx, activeCallRoomId);
+      const newUrl = getWidgetUrl(mx, activeCallRoomId, clientConfig.elementCallUrl ?? '');
       const userId = mx.getUserId() ?? '';
       const app = createVirtualWidget(
         mx,

From 9b6bfea359c42f6f09bc0d05c2c5d97f0a01c112 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 16 Apr 2025 20:53:30 -0500
Subject: [PATCH 038/242] add elementCallUrl

---
 src/app/hooks/useClientConfig.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/hooks/useClientConfig.ts b/src/app/hooks/useClientConfig.ts
index e5fc6cc6..70ba26bb 100644
--- a/src/app/hooks/useClientConfig.ts
+++ b/src/app/hooks/useClientConfig.ts
@@ -9,6 +9,7 @@ export type ClientConfig = {
   defaultHomeserver?: number;
   homeserverList?: string[];
   allowCustomHomeservers?: boolean;
+  elementCallUrl?: string;
 
   featuredCommunities?: {
     openAsDefault?: boolean;

From 232fbc5c62e1411c2ca2165a68dbba9589433451 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 16 Apr 2025 21:06:03 -0500
Subject: [PATCH 039/242] Add active call name into bottom panel

---
 src/app/pages/client/space/Space.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 17b004b5..59ec557b 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -386,7 +386,7 @@ function FixedBottomNavArea() {
         direction="Column"
         gap="200"
         padding="300"
-        style={{ flexShrink: 0, borderTop: `1px solid ${config?.color?.LineStrong ?? '#ccc'}` }}
+        style={{ flexShrink: 0, borderTop: `1px solid` }}
       >
         <Text size="T200" color="Muted" align="Center">
           No active call
@@ -397,7 +397,7 @@ function FixedBottomNavArea() {
 
   return (
     <Text size="T200" color="Muted" align="Center">
-      {}
+      {mx.getRoom(activeCallRoomId)?.normalizedName}
     </Text>
   );
 } /*

From 8d285d45f7fb62bd937129b1457ab4d838527428 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 17 Apr 2025 02:22:40 -0500
Subject: [PATCH 040/242] revert changes on this to b4f67ce

---
 src/app/features/room/RoomViewHeader.tsx | 159 ++++++++++-------------
 1 file changed, 69 insertions(+), 90 deletions(-)

diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 8dc27581..9e102f30 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -21,12 +21,11 @@ import {
   RectCords,
   Badge,
   Spinner,
-} from 'folds'; // Assuming 'folds' is your UI library
+} from 'folds';
 import { useNavigate } from 'react-router-dom';
 import { JoinRule, Room } from 'matrix-js-sdk';
 import { useAtomValue } from 'jotai';
 
-// --- Required Imports (Adjust paths as needed) ---
 import { useStateEvent } from '../../hooks/useStateEvent';
 import { PageHeader } from '../../components/page';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
@@ -41,7 +40,7 @@ import { useSpaceOptionally } from '../../hooks/useSpace';
 import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils';
 import { getCanonicalAliasOrRoomId, isRoomAlias, mxcUrlToHttp } from '../../utils/matrix';
 import { _SearchPathSearchParams } from '../../pages/paths';
-import * as css from './RoomViewHeader.css'; // Assuming CSS Modules
+import * as css from './RoomViewHeader.css';
 import { useRoomUnread } from '../../state/hooks/unread';
 import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { markAsRead } from '../../../client/action/notifications';
@@ -67,14 +66,11 @@ import {
   useRoomsNotificationPreferencesContext,
 } from '../../hooks/useRoomsNotificationPreferences';
 
-// --- RoomMenu Component (Assuming it's defined elsewhere or here) ---
-// (Include the RoomMenu component code from the previous snippet here if needed)
 type RoomMenuProps = {
   room: Room;
   requestClose: () => void;
 };
 const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose }, ref) => {
-  // ... (RoomMenu implementation from previous snippet) ...
   const mx = useMatrixClient();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
@@ -213,9 +209,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
   );
 });
 
-// --- RoomViewHeader Component ---
 export function RoomViewHeader() {
-  // --- Hooks ---
   const navigate = useNavigate();
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
@@ -238,22 +232,19 @@ export function RoomViewHeader() {
 
   const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
 
-  // --- Event Handlers ---
+  // I assume there is a global state so I don't have to run this check every time but for now we'll stub this in
   const isDirectMessage = () => {
-    // Simplified check - consider optimizing if performance is an issue
     const mDirectsEvent = mx.getAccountData('m.direct');
     const { roomId } = room;
     return (
-      !!mDirectsEvent?.event.content &&
-      Object.values(mDirectsEvent.event.content).flat().includes(roomId)
+      Object.values(mDirectsEvent?.event.content).filter((e) => {
+        if (e.indexOf(roomId) === 0) return true;
+      }).length !== 0
     );
   };
 
   const handleCall: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    // Placeholder for call initiation logic
-    console.log('Initiate call');
-    // Potentially set anchor for a call menu if needed, similar to other menus
-    // setMenuAnchor(evt.currentTarget.getBoundingClientRect());
+    setMenuAnchor(evt.currentTarget.getBoundingClientRect());
   };
 
   const handleSearchClick = () => {
@@ -274,29 +265,21 @@ export function RoomViewHeader() {
     setPinMenuAnchor(evt.currentTarget.getBoundingClientRect());
   };
 
-  // --- Render ---
   return (
-    // Use PageHeader component for consistent header styling
     <PageHeader balance={screenSize === ScreenSize.Mobile}>
-      {/* Main container Box: Uses Flexbox (row), aligns items vertically centered */}
-      <Box grow="Yes" alignItems="Center" gap="300">
-        {' '}
-        {/* Adjust gap as needed */}
-        {/* --- LEFT GROUP --- */}
-        {/* This Box groups elements intended for the left side */}
-        {/* It takes only the width required by its content */}
-        <Box alignItems="Center" gap="300">
-          {/* Back button shown only on mobile */}
-          {screenSize === ScreenSize.Mobile && (
-            <BackRouteHandler>
-              {(onBack) => (
+      <Box grow="Yes" gap="300">
+        {screenSize === ScreenSize.Mobile && (
+          <BackRouteHandler>
+            {(onBack) => (
+              <Box shrink="No" alignItems="Center">
                 <IconButton onClick={onBack}>
                   <Icon src={Icons.ArrowLeft} />
                 </IconButton>
-              )}
-            </BackRouteHandler>
-          )}
-          {/* Avatar shown only on desktop */}
+              </Box>
+            )}
+          </BackRouteHandler>
+        )}
+        <Box grow="Yes" alignItems="Center" gap="300">
           {screenSize !== ScreenSize.Mobile && (
             <Avatar size="300">
               <RoomAvatar
@@ -313,17 +296,14 @@ export function RoomViewHeader() {
               />
             </Avatar>
           )}
-          {/* Room name and topic */}
           <Box direction="Column">
             <Text size={topic ? 'H5' : 'H3'} truncate>
               {name}
             </Text>
-            {/* Topic is conditionally rendered and includes logic for an overlay */}
             {topic && (
               <UseStateProvider initial={false}>
                 {(viewTopic, setViewTopic) => (
                   <>
-                    {/* Overlay for viewing full topic */}
                     <Overlay open={viewTopic} backdrop={<OverlayBackdrop />}>
                       <OverlayCenter>
                         <FocusTrap
@@ -342,12 +322,11 @@ export function RoomViewHeader() {
                         </FocusTrap>
                       </OverlayCenter>
                     </Overlay>
-                    {/* Clickable truncated topic text */}
                     <Text
                       as="button"
                       type="button"
                       onClick={() => setViewTopic(true)}
-                      className={css.HeaderTopic} // Apply specific styles if needed
+                      className={css.HeaderTopic}
                       size="T200"
                       priority="300"
                       truncate
@@ -359,18 +338,8 @@ export function RoomViewHeader() {
               </UseStateProvider>
             )}
           </Box>
-        </Box>{' '}
-        {/* --- END OF LEFT GROUP --- */}
-        {/* --- SPACER --- */}
-        {/* This empty Box has 'grow="Yes"', making it expand */}
-        {/* It pushes the Left Group and Right Group to opposite ends */}
-        <Box grow="Yes" />
-        {/* --- RIGHT GROUP --- */}
-        {/* This Box groups elements intended for the right side */}
-        {/* 'shrink="No"' prevents it from collapsing if space is tight */}
-        {/* Items are vertically centered, gap adjusted for icons */}
-        <Box shrink="No" alignItems="Center" gap="100">
-          {/* Call button, shown only for Direct Messages */}
+        </Box>
+        <Box shrink="No">
           {isDirectMessage() && (
             <TooltipProvider
               position="Bottom"
@@ -389,7 +358,6 @@ export function RoomViewHeader() {
               )}
             </TooltipProvider>
           )}
-          {/* Search button, hidden for encrypted rooms */}
           {!ecryptedRoom && (
             <TooltipProvider
               position="Bottom"
@@ -407,7 +375,6 @@ export function RoomViewHeader() {
               )}
             </TooltipProvider>
           )}
-          {/* Pinned Messages button */}
           <TooltipProvider
             position="Bottom"
             offset={4}
@@ -419,15 +386,18 @@ export function RoomViewHeader() {
           >
             {(triggerRef) => (
               <IconButton
-                style={{ position: 'relative' }} // Needed for Badge positioning
+                style={{ position: 'relative' }}
                 onClick={handleOpenPinMenu}
                 ref={triggerRef}
-                aria-pressed={!!pinMenuAnchor} // Indicate state when menu is open
+                aria-pressed={!!pinMenuAnchor}
               >
-                {/* Badge showing pin count */}
                 {pinnedEvents.length > 0 && (
                   <Badge
-                    style={{ position: 'absolute', left: toRem(3), top: toRem(3) }}
+                    style={{
+                      position: 'absolute',
+                      left: toRem(3),
+                      top: toRem(3),
+                    }}
                     variant="Secondary"
                     size="400"
                     fill="Solid"
@@ -442,7 +412,26 @@ export function RoomViewHeader() {
               </IconButton>
             )}
           </TooltipProvider>
-          {/* Members button, shown only on desktop */}
+          <PopOut
+            anchor={pinMenuAnchor}
+            position="Bottom"
+            content={
+              <FocusTrap
+                focusTrapOptions={{
+                  initialFocus: false,
+                  returnFocusOnDeactivate: false,
+                  onDeactivate: () => setPinMenuAnchor(undefined),
+                  clickOutsideDeactivates: true,
+                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                  escapeDeactivates: stopPropagation,
+                }}
+              >
+                <RoomPinMenu room={room} requestClose={() => setPinMenuAnchor(undefined)} />
+              </FocusTrap>
+            }
+          />
+
           {screenSize === ScreenSize.Desktop && (
             <TooltipProvider
               position="Bottom"
@@ -460,7 +449,6 @@ export function RoomViewHeader() {
               )}
             </TooltipProvider>
           )}
-          {/* More Options button */}
           <TooltipProvider
             position="Bottom"
             align="End"
@@ -477,37 +465,28 @@ export function RoomViewHeader() {
               </IconButton>
             )}
           </TooltipProvider>
-        </Box>{' '}
-        {/* --- END OF RIGHT GROUP --- */}
-        {/* PopOuts render their content outside the normal flow (usually via React Portals) */}
-        {/* They are placed here logically near their trigger buttons */}
-        <PopOut
-          anchor={pinMenuAnchor} // Anchored to the pin button's position
-          position="Bottom"
-          content={
-            // FocusTrap manages keyboard focus within the menu
-            <FocusTrap
-              focusTrapOptions={{ /* ... focus options ... */ escapeDeactivates: stopPropagation }}
-            >
-              <RoomPinMenu room={room} requestClose={() => setPinMenuAnchor(undefined)} />
-            </FocusTrap>
-          }
-        />
-        <PopOut
-          anchor={menuAnchor} // Anchored to the 'more options' button's position
-          position="Bottom"
-          align="End"
-          content={
-            // FocusTrap manages keyboard focus within the menu
-            <FocusTrap
-              focusTrapOptions={{ /* ... focus options ... */ escapeDeactivates: stopPropagation }}
-            >
-              <RoomMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
-            </FocusTrap>
-          }
-        />
-      </Box>{' '}
-      {/* --- END OF MAIN CONTAINER BOX --- */}
+          <PopOut
+            anchor={menuAnchor}
+            position="Bottom"
+            align="End"
+            content={
+              <FocusTrap
+                focusTrapOptions={{
+                  initialFocus: false,
+                  returnFocusOnDeactivate: false,
+                  onDeactivate: () => setMenuAnchor(undefined),
+                  clickOutsideDeactivates: true,
+                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                  escapeDeactivates: stopPropagation,
+                }}
+              >
+                <RoomMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
+              </FocusTrap>
+            }
+          />
+        </Box>
+      </Box>
     </PageHeader>
   );
 }

From cb9e4ffe869c2f5962c5cfc3d2a38fadf2e3ba95 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 17 Apr 2025 02:26:09 -0500
Subject: [PATCH 041/242] remove unneeded comments

---
 src/app/features/room/RoomView.tsx | 46 ++++++------------------------
 1 file changed, 8 insertions(+), 38 deletions(-)

diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx
index f6ce2f20..9b1372af 100644
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -1,10 +1,8 @@
-import React, { useCallback, useRef, useEffect } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { Box, Text, config } from 'folds'; // Assuming 'folds' is a UI library
 import { EventType, Room } from 'matrix-js-sdk';
 import { ReactEditor } from 'slate-react';
 import { isKeyHotkey } from 'is-hotkey';
-import { ClientWidgetApi } from 'matrix-widget-api';
-import { logger } from 'matrix-js-sdk/lib/logger';
 import { useStateEvent } from '../../hooks/useStateEvent';
 import { StateEvent } from '../../../types/matrix/room';
 import { usePowerLevelsAPI, usePowerLevelsContext } from '../../hooks/usePowerLevels';
@@ -25,15 +23,10 @@ import { settingsAtom } from '../../state/settings';
 import { useSetting } from '../../state/hooks/settings';
 import { useAccessibleTagColors, usePowerLevelTags } from '../../hooks/usePowerLevelTags';
 import { useTheme } from '../../hooks/useTheme';
-import { createVirtualWidget, Edget, getWidgetData, getWidgetUrl } from './SmallWidget';
-import { PersistentCallContainer } from '../../pages/call/PersistentCallContainer';
 import { CallActivationEffect } from '../../pages/call/CallActivation';
 
-// --- Constants ---
 const FN_KEYS_REGEX = /^F\d+$/;
 
-// --- Helper Functions ---
-
 /**
  * Determines if a keyboard event should trigger focusing the message input field.
  * @param evt - The KeyboardEvent.
@@ -41,15 +34,12 @@ const FN_KEYS_REGEX = /^F\d+$/;
  */
 const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
   const { code } = evt;
-  // Ignore if modifier keys are pressed
   if (evt.metaKey || evt.altKey || evt.ctrlKey) {
     return false;
   }
 
-  // Ignore function keys (F1, F2, etc.)
   if (FN_KEYS_REGEX.test(code)) return false;
 
-  // Ignore specific control/navigation keys
   if (
     code.startsWith('OS') ||
     code.startsWith('Meta') ||
@@ -61,26 +51,19 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
     code.startsWith('End') ||
     code.startsWith('Home') ||
     code === 'Tab' ||
-    code === 'Space' || // Allow space if needed elsewhere, but not for focusing input
-    code === 'Enter' || // Allow enter if needed elsewhere
+    code === 'Space' ||
+    code === 'Enter' ||
     code === 'NumLock' ||
     code === 'ScrollLock'
   ) {
     return false;
   }
-
-  // If none of the above conditions met, it's likely a character key
   return true;
 };
 
-// --- RoomView Component ---
-
 export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
-  // Refs
   const roomInputRef = useRef<HTMLDivElement>(null);
-  const roomViewRef = useRef<HTMLDivElement>(null); // Ref for the main Page container
-
-  // State & Hooks
+  const roomViewRef = useRef<HTMLDivElement>(null);
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const { roomId } = room;
   const editor = useEditor();
@@ -95,36 +78,27 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
   const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
   const theme = useTheme();
   const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
-  const isCall = room.isCallRoom(); // Determine if it's a call room
-
-  // Effect for focusing input on key press (for non-call rooms)
+  const isCall = room.isCallRoom();
   useKeyDown(
     window,
     useCallback(
       (evt) => {
-        // Don't focus if an editable element already has focus
         if (editableActiveElement()) return;
-        // Don't focus if a modal is likely open
         if (document.querySelector('.ReactModalPortal > *') || navigation.isRawModalVisible) {
           return;
         }
-        // Don't focus if in a call view (no text editor)
         if (isCall) return;
 
-        // Check if the key pressed should trigger focus or is paste hotkey
         if (shouldFocusMessageField(evt) || isKeyHotkey('mod+v', evt)) {
           if (editor) {
             ReactEditor.focus(editor);
           }
         }
       },
-      [editor, isCall] // Dependencies
+      [editor, isCall]
     )
   );
 
-  // --- Render Logic ---
-
-  // Render Call View
   if (isCall) {
     return (
       <Page
@@ -143,14 +117,13 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
     );
   }
 
-  // Render Standard Text/Timeline Room View
   return (
     <Page ref={roomViewRef}>
       <RoomViewHeader />
       {/* Main timeline area */}
       <Box grow="Yes" direction="Column" style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
         <RoomTimeline
-          key={roomId} // Key helps React reset state when room changes
+          key={roomId}
           room={room}
           eventId={eventId}
           roomInputRef={roomInputRef}
@@ -160,11 +133,9 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
         />
         <RoomViewTyping room={room} />
       </Box>
-      {/* Input area and potentially other footer elements */}
       <Box shrink="No" direction="Column">
         <div style={{ padding: `0 ${config.space.S400}` }}>
           {' '}
-          {/* Use theme spacing */}
           {tombstoneEvent ? (
             <RoomTombstone
               roomId={roomId}
@@ -178,7 +149,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
                   room={room}
                   editor={editor}
                   roomId={roomId}
-                  fileDropContainerRef={roomViewRef} // Pass the Page ref for file drops
+                  fileDropContainerRef={roomViewRef}
                   ref={roomInputRef}
                   getPowerLevelTag={getPowerLevelTag}
                   accessibleTagColors={accessibleTagColors}
@@ -195,7 +166,6 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
             </>
           )}
         </div>
-        {/* Following/Activity Feed */}
         {hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
       </Box>
     </Page>

From 14206dbb9643d4e06d2fe18a3f6b13a6210cf71b Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 17 Apr 2025 02:26:50 -0500
Subject: [PATCH 042/242] handle call room swapping better

---
 .../pages/call/PersistentCallContainer.tsx    | 145 +++++++++---------
 1 file changed, 69 insertions(+), 76 deletions(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index e750801b..32a25d80 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -24,7 +24,7 @@ interface PersistentCallContainerProps {
 }
 
 export function PersistentCallContainer({ isVisible }: PersistentCallContainerProps) {
-  const { activeCallRoomId, setActiveCallRoomId } = useCallState();
+  const { activeCallRoomId, setActiveCallRoomId, registerActiveTransport } = useCallState();
   const mx = useMatrixClient();
   const room = useSelectedRoom();
   const clientConfig = useClientConfig();
@@ -39,10 +39,19 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
     const cleanupRoomId = smallWidgetRef.current?.roomId;
     logger.debug(`PersistentCallContainer effect running. activeCallRoomId: ${activeCallRoomId}`);
 
+    /**
+     * TODO:
+     * Need proper shutdown handling. Events from the previous widget can still come through it seems. Might need
+     * to queue the events and then allow the join to actually occur. This will *work* for now as it does handle switching technically.
+     * Need to look closer at it.
+     *
+     * Might also be able to keep the iframe alive and instead navigate to a new "room" to make the transition smoother
+     */
     const cleanup = () => {
       logger.error(`PersistentCallContainer: Cleaning up for previous room: ${cleanupRoomId}`);
+
       if (smallWidgetRef.current) {
-        smallWidgetRef.current.stopMessaging();
+        // smallWidgetRef.current.stopMessaging();
       }
       // Potentially call widgetApi.stop() or similar if the API instance has it
       if (widgetApiRef.current) {
@@ -50,94 +59,80 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
       }
       widgetApiRef.current = null;
       smallWidgetRef.current = null;
+      iframeRef.current.src = 'about:blank';
     };
 
     if (activeCallRoomId && mx?.getUserId()) {
-      const newUrl = getWidgetUrl(mx, activeCallRoomId, clientConfig.elementCallUrl ?? '');
-      const userId = mx.getUserId() ?? '';
-      const app = createVirtualWidget(
-        mx,
-        `element-call-${activeCallRoomId}`,
-        userId,
-        'Element Call',
-        'm.call',
-        newUrl,
-        false,
-        getWidgetData(mx, activeCallRoomId, {}, { skipLobby: true }),
-        activeCallRoomId
-      );
+      if (cleanupRoomId !== activeCallRoomId) {
+        const newUrl = getWidgetUrl(mx, room, clientConfig.elementCallUrl ?? '');
 
-      if (iframeRef.current && iframeRef.current.src !== newUrl.toString()) {
-        logger.info(
-          `PersistentCallContainer: Updating iframe src for ${activeCallRoomId} to ${newUrl.toString()}`
-        );
-        iframeRef.current.src = newUrl.toString();
-      } else if (iframeRef.current && !iframeRef.current.src) {
-        logger.info(
-          `PersistentCallContainer: Setting initial iframe src for ${activeCallRoomId} to ${newUrl.toString()}`
-        );
-        iframeRef.current.src = newUrl.toString();
-      }
-
-      const iframeElement = iframeRef.current;
-      if (!iframeElement) {
-        logger.error('PersistentCallContainer: iframeRef is null, cannot setup API.');
-        return cleanup;
-      }
-
-      logger.debug(`PersistentCallContainer: Creating new SmallWidget/API for ${activeCallRoomId}`);
-      const smallWidget = new SmallWidget(app);
-      smallWidgetRef.current = smallWidget;
-
-      try {
-        const widgetApiInstance = smallWidget.startMessaging(iframeElement);
-        widgetApiRef.current = widgetApiInstance;
-        widgetApiInstance.once('ready', () => {
-          logger.info(`PersistentCallContainer: Widget for ${activeCallRoomId} is ready.`);
-        });
-
-        /* Default handling seems bugged on this. Element does not need this in their driver or codebase, but
-           we do. I believe down the road update_state will be used by element-call and this can be removed.
-        */
-        widgetApiInstance.on(
-          'action:org.matrix.msc2876.read_events',
-          (ev: CustomEvent<IWidgetApiRequest>) => {
-            logger.info(`PersistentCallContainer: Widget requested 'read_events':`, ev.detail.data);
-            ev.preventDefault();
-            widgetApiRef.current?.transport?.reply(ev.detail, { approved: true });
-          }
-        );
-
-        widgetApiInstance.on('action:im.vector.hangup', () => {
+        if (iframeRef.current && iframeRef.current.src !== newUrl.toString()) {
           logger.info(
-            `PersistentCallContainer: Received hangup action from widget in room ${activeCallRoomId}.`
+            `PersistentCallContainer: Updating iframe src for ${activeCallRoomId} to ${newUrl.toString()}`
           );
-          if (smallWidgetRef.current?.roomId === activeCallRoomId) {
-            setActiveCallRoomId(null);
-          }
-        });
-      } catch (error) {
-        logger.error(
-          `PersistentCallContainer: Error initializing widget messaging for ${activeCallRoomId}:`,
-          error
+          cleanup();
+          iframeRef.current.src = newUrl.toString();
+        } else if (iframeRef.current && !iframeRef.current.src) {
+          logger.info(
+            `PersistentCallContainer: Setting initial iframe src for ${activeCallRoomId} to ${newUrl.toString()}`
+          );
+          iframeRef.current.src = newUrl.toString();
+        }
+
+        const iframeElement = iframeRef.current;
+        if (!iframeElement) {
+          logger.error('PersistentCallContainer: iframeRef is null, cannot setup API.');
+          return cleanup;
+        }
+
+        const userId = mx.getUserId() ?? '';
+        const app = createVirtualWidget(
+          mx,
+          `element-call-${activeCallRoomId}`,
+          userId,
+          'Element Call',
+          'm.call',
+          newUrl,
+          false,
+          getWidgetData(mx, activeCallRoomId, {}, { skipLobby: true }),
+          activeCallRoomId
         );
+
+        logger.debug(
+          `PersistentCallContainer: Creating new SmallWidget/API for ${activeCallRoomId}`
+        );
+        const smallWidget = new SmallWidget(app);
+        smallWidgetRef.current = smallWidget;
+
+        try {
+          const widgetApiInstance = smallWidget.startMessaging(iframeElement);
+          widgetApiRef.current = widgetApiInstance;
+          registerActiveTransport(activeCallRoomId, widgetApiRef.current.transport);
+          widgetApiInstance.once('ready', () => {
+            logger.info(`PersistentCallContainer: Widget for ${activeCallRoomId} is ready.`);
+          });
+        } catch (error) {
+          logger.error(
+            `PersistentCallContainer: Error initializing widget messaging for ${activeCallRoomId}:`,
+            error
+          );
+          cleanup();
+        }
+      } else {
+        if (iframeRef.current && iframeRef.current.src !== 'about:blank') {
+          logger.info('PersistentCallContainer: No active call, setting src to about:blank');
+          iframeRef.current.src = 'about:blank';
+        }
         cleanup();
       }
-    } else {
-      if (iframeRef.current && iframeRef.current.src !== 'about:blank') {
-        logger.info('PersistentCallContainer: No active call, setting src to about:blank');
-        iframeRef.current.src = 'about:blank';
-      }
-      cleanup();
     }
+
     return cleanup;
   }, [activeCallRoomId, mx, setActiveCallRoomId]);
 
   const containerStyle: React.CSSProperties = {
     width: '100%',
     height: '100%',
-    top: '1',
-    left: '1',
     display: isVisible ? 'flex' : 'none',
     flexDirection: 'row',
   };
@@ -149,10 +144,8 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
           <Box
             shrink="No"
             style={{
-              width: '250px',
               height: '100%',
               overflowY: 'auto',
-              borderRight: '1px solid #ccc',
             }}
           >
             <RouteSpaceProvider>

From f76641b5386b135f4e906d15077e6aebd3aacab5 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 17 Apr 2025 02:31:34 -0500
Subject: [PATCH 043/242] add in call state (mute/video/hangup) context and
 transport handling for said contexts

---
 src/app/pages/client/CallProvider.tsx | 180 +++++++++++++++++++++++---
 1 file changed, 164 insertions(+), 16 deletions(-)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
index f3ec3eb5..086fa5a8 100644
--- a/src/app/pages/client/CallProvider.tsx
+++ b/src/app/pages/client/CallProvider.tsx
@@ -1,6 +1,28 @@
-import React, { createContext, useState, useContext, useMemo, useCallback, ReactNode } from 'react';
+import React, {
+  createContext,
+  useState,
+  useContext,
+  useMemo,
+  useCallback,
+  ReactNode,
+  useEffect,
+} from 'react';
 import { logger } from 'matrix-js-sdk/lib/logger';
-import { WidgetApiToWidgetAction, ITransport, WidgetApiAction } from 'matrix-widget-api';
+import {
+  WidgetApiToWidgetAction,
+  ITransport,
+  WidgetApiAction,
+  WidgetApiFromWidgetAction,
+} from 'matrix-widget-api';
+
+interface MediaStatePayload {
+  audioEnabled?: boolean;
+  videoEnabled?: boolean;
+}
+
+const WIDGET_MEDIA_STATE_UPDATE_ACTION = 'io.element.device_mute';
+
+const SET_MEDIA_STATE_ACTION = 'io.element.device_mute';
 
 interface CallContextState {
   activeCallRoomId: string | null;
@@ -12,6 +34,10 @@ interface CallContextState {
     action: WidgetApiToWidgetAction | string,
     data: T
   ) => Promise<void>;
+  isAudioEnabled: boolean;
+  isVideoEnabled: boolean;
+  toggleAudio: () => Promise<void>;
+  toggleVideo: () => Promise<void>;
 }
 
 const CallContext = createContext<CallContextState | undefined>(undefined);
@@ -20,53 +46,133 @@ interface CallProviderProps {
   children: ReactNode;
 }
 
+const DEFAULT_AUDIO_ENABLED = false;
+const DEFAULT_VIDEO_ENABLED = false;
+
 export function CallProvider({ children }: CallProviderProps) {
   const [activeCallRoomId, setActiveCallRoomIdState] = useState<string | null>(null);
-  const [activeApiTransport, setActiveApiTransport] = useState<ITransport | null>(null);
+  const [activeApiTransport, setActiveApiTransportState] = useState<ITransport | null>(null);
   const [transportRoomId, setTransportRoomId] = useState<string | null>(null);
 
+  const [isAudioEnabled, setIsAudioEnabledState] = useState<boolean>(DEFAULT_AUDIO_ENABLED);
+  const [isVideoEnabled, setIsVideoEnabledState] = useState<boolean>(DEFAULT_VIDEO_ENABLED);
+
+  const resetMediaState = useCallback(() => {
+    logger.debug('CallContext: Resetting media state to defaults.');
+    setIsAudioEnabledState(DEFAULT_AUDIO_ENABLED);
+    setIsVideoEnabledState(DEFAULT_VIDEO_ENABLED);
+  }, []);
+
   const setActiveCallRoomId = useCallback(
     (roomId: string | null) => {
-      logger.debug(`CallContext: Setting activeCallRoomId to ${roomId}`);
+      logger.warn(`CallContext: Setting activeCallRoomId to ${roomId}`);
+      const previousRoomId = activeCallRoomId;
       setActiveCallRoomIdState(roomId);
+
+      if (roomId !== previousRoomId) {
+        logger.debug(`CallContext: Active call room changed, resetting media state.`);
+        resetMediaState();
+      }
+
       if (roomId === null || roomId !== transportRoomId) {
-        logger.debug(
-          `CallContext: Clearing active transport because active room changed or was cleared.`
+        logger.warn(
+          `CallContext: Clearing active transport because active room changed to ${roomId} or was cleared.`
         );
-        setActiveApiTransport(null);
+        setActiveApiTransportState(null);
         setTransportRoomId(null);
       }
     },
-    [transportRoomId]
+    [transportRoomId, resetMediaState, activeCallRoomId]
   );
 
   const hangUp = useCallback(() => {
     logger.debug(`CallContext: Hang up called.`);
     setActiveCallRoomIdState(null);
     logger.debug(`CallContext: Clearing active transport due to hangup.`);
-    setActiveApiTransport(null);
+    setActiveApiTransportState(null);
     setTransportRoomId(null);
+    resetMediaState();
+  }, [resetMediaState]);
+
+  const setActiveTransport = useCallback((transport: ITransport | null, roomId: string | null) => {
+    setActiveApiTransportState(transport);
+    setTransportRoomId(roomId);
   }, []);
 
   const registerActiveTransport = useCallback(
     (roomId: string | null, transport: ITransport | null) => {
+      if (activeApiTransport && activeApiTransport !== transport) {
+        logger.debug(`CallContext: Cleaning up listeners for previous transport instance.`);
+      }
+
       if (roomId && transport) {
         logger.debug(`CallContext: Registering active transport for room ${roomId}.`);
-        setActiveApiTransport(transport);
-        setTransportRoomId(roomId);
+        setActiveTransport(transport, roomId);
       } else if (roomId === transportRoomId || roomId === null) {
         logger.debug(`CallContext: Clearing active transport for room ${transportRoomId}.`);
-        setActiveApiTransport(null);
-        setTransportRoomId(null);
+        setActiveTransport(null, null);
+        resetMediaState();
       } else {
         logger.debug(
-          `CallContext: Ignoring transport clear request for room ${roomId}, as current transport belongs to ${transportRoomId}.`
+          `CallContext: Ignoring transport registration/clear request for room ${roomId}, as current transport belongs to ${transportRoomId}.`
         );
       }
     },
-    [transportRoomId]
+    [activeApiTransport, transportRoomId, setActiveTransport, resetMediaState]
   );
 
+  useEffect(() => {
+    if (!activeApiTransport || !activeCallRoomId || transportRoomId !== activeCallRoomId) {
+      return;
+    }
+
+    const transport = activeApiTransport;
+
+    const handleHangup = (ev: CustomEvent) => {
+      logger.warn(
+        `CallContext: Received hangup action from widget in room ${activeCallRoomId}.`,
+        ev
+      );
+      hangUp();
+    };
+
+    const handleMediaStateUpdate = (ev: CustomEvent<MediaStatePayload>) => {
+      ev.preventDefault();
+      logger.debug(
+        `CallContext: Received media state update from widget in room ${activeCallRoomId}:`,
+        ev.detail
+      );
+      const { audioEnabled, videoEnabled } = ev.detail;
+      if (typeof audioEnabled === 'boolean' && audioEnabled !== isAudioEnabled) {
+        logger.debug(`CallContext: Updating audio enabled state from widget: ${audioEnabled}`);
+        setIsAudioEnabledState(audioEnabled);
+      }
+      if (typeof videoEnabled === 'boolean' && videoEnabled !== isVideoEnabled) {
+        logger.debug(`CallContext: Updating video enabled state from widget: ${videoEnabled}`);
+        setIsVideoEnabledState(videoEnabled);
+      }
+    };
+
+    logger.debug(`CallContext: Setting up listeners for transport in room ${activeCallRoomId}`);
+    transport.on(`action:${WidgetApiFromWidgetAction.HangupCall}`, handleHangup); // Use standard hangup action name
+    transport.on(`action:${WIDGET_MEDIA_STATE_UPDATE_ACTION}`, handleMediaStateUpdate);
+
+    return () => {
+      logger.debug(`CallContext: Cleaning up listeners for transport in room ${activeCallRoomId}`);
+      if (transport) {
+        transport.off(`action:${WidgetApiFromWidgetAction.HangupCall}`, handleHangup);
+        transport.off(`action:${WIDGET_MEDIA_STATE_UPDATE_ACTION}`, handleMediaStateUpdate);
+      }
+    };
+  }, [
+    activeApiTransport,
+    activeCallRoomId,
+    transportRoomId,
+    hangUp,
+    isAudioEnabled,
+    isVideoEnabled,
+  ]);
+
   const sendWidgetAction = useCallback(
     async <T = unknown,>(action: WidgetApiToWidgetAction | string, data: T): Promise<void> => {
       if (!activeApiTransport) {
@@ -89,12 +195,46 @@ export function CallProvider({ children }: CallProviderProps) {
         await activeApiTransport.send<T>(action as WidgetApiAction, data);
       } catch (error) {
         logger.error(`CallContext: Error sending action '${action}':`, error);
-        return Promise.reject(error);
+        throw error;
       }
     },
     [activeApiTransport, activeCallRoomId, transportRoomId]
   );
 
+  const toggleAudio = useCallback(async () => {
+    const newState = !isAudioEnabled;
+    logger.debug(`CallContext: Toggling audio. New state: enabled=${newState}`);
+    setIsAudioEnabledState(newState);
+    try {
+      await sendWidgetAction(SET_MEDIA_STATE_ACTION, {
+        audioEnabled: newState,
+        videoEnabled: isVideoEnabled,
+      });
+      logger.debug(`CallContext: Successfully sent audio toggle action.`);
+    } catch (error) {
+      logger.error(`CallContext: Failed to send audio toggle action. Reverting state.`, error);
+      setIsAudioEnabledState(!newState);
+      throw error;
+    }
+  }, [isAudioEnabled, isVideoEnabled, sendWidgetAction]);
+
+  const toggleVideo = useCallback(async () => {
+    const newState = !isVideoEnabled;
+    logger.debug(`CallContext: Toggling video. New state: enabled=${newState}`);
+    setIsVideoEnabledState(newState);
+    try {
+      await sendWidgetAction(SET_MEDIA_STATE_ACTION, {
+        audioEnabled: isAudioEnabled,
+        videoEnabled: newState,
+      });
+      logger.debug(`CallContext: Successfully sent video toggle action.`);
+    } catch (error) {
+      logger.error(`CallContext: Failed to send video toggle action. Reverting state.`, error);
+      setIsVideoEnabledState(!newState);
+      throw error;
+    }
+  }, [isVideoEnabled, isAudioEnabled, sendWidgetAction]);
+
   const contextValue = useMemo<CallContextState>(
     () => ({
       activeCallRoomId,
@@ -103,6 +243,10 @@ export function CallProvider({ children }: CallProviderProps) {
       activeApiTransport,
       registerActiveTransport,
       sendWidgetAction,
+      isAudioEnabled,
+      isVideoEnabled,
+      toggleAudio,
+      toggleVideo,
     }),
     [
       activeCallRoomId,
@@ -111,6 +255,10 @@ export function CallProvider({ children }: CallProviderProps) {
       activeApiTransport,
       registerActiveTransport,
       sendWidgetAction,
+      isAudioEnabled,
+      isVideoEnabled,
+      toggleAudio,
+      toggleVideo,
     ]
   );
 

From fd1ccc7281fc0fd51586a8e60f9831bf93b5fb01 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 17 Apr 2025 02:35:19 -0500
Subject: [PATCH 044/242] add mute video and hangup buttons and implemented
 their functionality

---
 src/app/pages/client/space/Space.tsx | 79 ++++++++++++++--------------
 1 file changed, 39 insertions(+), 40 deletions(-)

diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 59ec557b..9dcd730a 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -82,7 +82,7 @@ import { useCallState } from '../CallProvider';
 
 /**
  * Processes the raw hierarchy from useSpaceJoinedHierarchy into a flat list
- * suitable for the virtualizer, including collapsible headers for text/voice channels.
+ * suitable for the virtualizer, including collapsible headers for text/voice rooms.
  * Removes the top-level "Rooms" category header.
  *
  * @param hierarchy - The raw hierarchy data (array of { roomId: string }).
@@ -109,7 +109,7 @@ const processHierarchyForVirtualizer = (
 
     if (currentCategoryRooms.text.length > 0) {
       processed.push({
-        type: 'channel_header',
+        type: 'room_header',
         title: 'Text Rooms',
         categoryId: textCategoryId,
         key: `${parentId}-text-header`,
@@ -123,7 +123,7 @@ const processHierarchyForVirtualizer = (
 
     if (currentCategoryRooms.voice.length > 0) {
       processed.push({
-        type: 'channel_header',
+        type: 'room_header',
         title: 'Call Rooms',
         categoryId: voiceCategoryId,
         key: `${parentId}-voice-header`,
@@ -358,7 +358,15 @@ function SpaceHeader() {
 }
 
 function FixedBottomNavArea() {
-  const { sendWidgetAction, activeCallRoomId } = useCallState();
+  const {
+    sendWidgetAction,
+    activeCallRoomId,
+    isAudioEnabled,
+    isVideoEnabled,
+    toggleAudio,
+    toggleVideo,
+    hangUp,
+  } = useCallState();
   const mx = useMatrixClient();
   const userName = mx.getUser(mx.getUserId() ?? '')?.displayName ?? mx.getUserId() ?? 'User';
 
@@ -371,22 +379,15 @@ function FixedBottomNavArea() {
       .catch((err) => logger.error(`FixedBottomNavArea: Failed action '${action}':`, err));
   };
 
-  const handleToggleMuteClick = () => {
-    const action = WidgetApiToWidgetAction.SetAudioInputMuted;
-    const data = {};
-    logger.debug(`FixedBottomNavArea: Sending action '${action}'`);
-    sendWidgetAction(action, data)
-      .then(() => logger.info(`FixedBottomNavArea: Action '${action}' sent.`))
-      .catch((err) => logger.error(`FixedBottomNavArea: Failed action '${action}':`, err));
-  };
-
   if (!activeCallRoomId) {
     return (
       <Box
         direction="Column"
-        gap="200"
-        padding="300"
-        style={{ flexShrink: 0, borderTop: `1px solid` }}
+        gap="500"
+        style={{
+          flexShrink: 0,
+          borderTop: `1px solid #e0e0e0`,
+        }}
       >
         <Text size="T200" color="Muted" align="Center">
           No active call
@@ -396,27 +397,26 @@ function FixedBottomNavArea() {
   }
 
   return (
-    <Text size="T200" color="Muted" align="Center">
-      {mx.getRoom(activeCallRoomId)?.normalizedName}
-    </Text>
-  );
-} /*
-<Box
-      direction="Column"
-      gap="200"
-      padding="300"
-      style={{ flexShrink: 0, borderTop: `1px solid ${config?.color?.LineStrong ?? '#ccc'}` }}
-    >
-      <Box direction="Row" gap="200" justifyContent="Center">
-        <Button onClick={handleSendMessageClick} size="200" variant="Primary" fill="Outline">
-          <Icon src={Icons.Alphabet} size="100" />
-        </Button>
-        <Button onClick={handleToggleMuteClick} size="200" variant="Surface">
-          <Icon src={Icons.VolumeMute} size="100" />
-        </Button>
+    <Box direction="Column">
+      <Box
+        direction="Row"
+        gap="500"
+        style={{
+          flexShrink: 0,
+          borderTop: `1px solid #e0e0e0`,
+        }}
+      >
+        {/* Going to need better icons for this */}
+        <button onClick={toggleAudio}> Muted:{(!isAudioEnabled).toString()} </button>
+        <button onClick={toggleVideo}> Videosn't:{(!isVideoEnabled).toString()} </button>
       </Box>
+      <Box>
+        <button onClick={hangUp}> Hangup </button>
+      </Box>
+      <Box>{mx.getRoom(activeCallRoomId)?.normalizedName}</Box>
     </Box>
-    */
+  );
+}
 
 export function Space() {
   const mx = useMatrixClient();
@@ -493,7 +493,7 @@ export function Space() {
         scrollRef={scrollRef}
         style={{ flexGrow: 1, overflowY: 'auto', overflowX: 'hidden' }}
       >
-        <Box direction="Column" gap="300" paddingBottom="400">
+        <Box direction="Column" gap="300">
           <NavCategory>
             <NavItem variant="Background" radii="400" aria-selected={lobbySelected}>
               <NavLink to={getSpaceLobbyPath(getCanonicalAliasOrRoomId(mx, space.roomId))}>
@@ -559,16 +559,15 @@ export function Space() {
                     </div>
                   );
                 }
-                case 'channel_header': {
+                case 'room_header': {
                   const { title, categoryId } = item;
                   return (
-                    <Box paddingLeft="400" paddingTop="200" paddingBottom="100">
+                    <Box>
                       <NavCategoryHeader variant="Subtle">
                         <RoomNavCategoryButton
                           data-category-id={categoryId}
                           onClick={handleCategoryClick}
                           closed={closedCategories.has(categoryId)}
-                          isSubCategory
                         >
                           {title}
                         </RoomNavCategoryButton>
@@ -579,7 +578,7 @@ export function Space() {
                 case 'room': {
                   const { room } = item;
                   return (
-                    <Box paddingLeft="500">
+                    <Box>
                       <RoomNavItem
                         room={room}
                         selected={selectedRoomId === room.roomId}

From 5a5f144e2089154ffc00bb706d86e8691652dc2d Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 17 Apr 2025 02:36:29 -0500
Subject: [PATCH 045/242] remove unneeded for standalone? Not even sure
 element-web uses the embedded atp

---
 src/app/features/room/SmallWidget.ts | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/app/features/room/SmallWidget.ts b/src/app/features/room/SmallWidget.ts
index a7f059c6..aa379560 100644
--- a/src/app/features/room/SmallWidget.ts
+++ b/src/app/features/room/SmallWidget.ts
@@ -30,16 +30,19 @@ import { SmallWidgetDriver } from './SmallWidgetDriver';
  */
 export const getWidgetUrl = (mx: MatrixClient, roomId: string, elementCallUrl: string): URL => {
   const baseUrl = window.location.origin;
-  const url = new URL(elementCallUrl) ?? new URL('./dist/element-call/dist/index.html', baseUrl);
+  const url =
+    new URL(`${elementCallUrl}/room`) ?? new URL('./dist/element-call/dist/index.html', baseUrl);
+
+  logger.error(url);
 
   const params = new URLSearchParams({
-    embed: 'true',
+    //embed: 'true',
     widgetId: `element-call-${roomId}`,
     appPrompt: 'false',
-    preload: 'true',
+    preload: 'false',
     skipLobby: 'true',
-    intent: 'join_existing',
-    returnToLobby: 'true',
+    //intent: 'join_existing',
+    //returnToLobby: 'true',
     perParticipantE2EE: 'true',
     hideHeader: 'true',
     userId: mx.getUserId()!,
@@ -149,6 +152,15 @@ export class SmallWidget extends EventEmitter {
       return this.messaging?.transport.reply(ev.detail, { events });
     });
 
+    /*
+    this.messaging?.on('action:content_loaded', () => {
+      this.messaging?.transport?.send('io.element.join', {
+        audioInput: 'true',
+        videoInput: 'true',
+      });
+    });
+    */
+
     this.client.on(ClientEvent.Event, this.onEvent);
     this.client.on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
     //this.client.on(RoomStateEvent.Events, this.onStateUpdate);
@@ -313,14 +325,11 @@ export class SmallWidget extends EventEmitter {
    */
   stopMessaging() {
     if (this.messaging) {
-      // Potentially call stop() or remove listeners if the API provides such methods
-      // this.messaging.stop(); // Example if a stop method exists
+      this.messaging.stop(); // Example if a stop method exists
       this.messaging.removeAllListeners(); // Remove listeners attached by SmallWidget
       logger.info(`Widget messaging stopped for widgetId: ${this.mockWidget.id}`);
       this.messaging = null;
     }
-    // Clean up driver resources if necessary
-    // driver.stop(); // Example
   }
 }
 

From d6026319864fbdcac58198d1a5b1a78bddf28c4f Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 17 Apr 2025 10:22:02 -0500
Subject: [PATCH 046/242] Fixes roomheader layout in calls

---
 src/app/pages/call/PersistentCallContainer.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index 32a25d80..55cddbf1 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -163,12 +163,11 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
         )}
 
         <Box
-          grow="Yes"
           direction="Column"
-          style={{ height: '100%', width: '100%', overflow: 'hidden' }}
+          style={{ position: 'relative', height: '100%', width: '100%', overflow: 'hidden' }}
         >
           {activeCallRoomId && room && (
-            <Box grow="No">
+            <Box direction="Column" style={{ width: '100%' }}>
               <PowerLevelsContextProvider value={null}>
                 <RouteSpaceProvider>
                   <SpaceRouteRoomProvider>

From fd0fa3c9214c9193ea8ad0c4b759ebddc0ed734c Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 18 Apr 2025 03:00:31 -0500
Subject: [PATCH 047/242] clean up call references

---
 src/app/features/room/RoomView.tsx | 25 ++-----------------------
 1 file changed, 2 insertions(+), 23 deletions(-)

diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx
index 9b1372af..f98729ce 100644
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -23,7 +23,6 @@ import { settingsAtom } from '../../state/settings';
 import { useSetting } from '../../state/hooks/settings';
 import { useAccessibleTagColors, usePowerLevelTags } from '../../hooks/usePowerLevelTags';
 import { useTheme } from '../../hooks/useTheme';
-import { CallActivationEffect } from '../../pages/call/CallActivation';
 
 const FN_KEYS_REGEX = /^F\d+$/;
 
@@ -78,7 +77,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
   const [powerLevelTags, getPowerLevelTag] = usePowerLevelTags(room, powerLevels);
   const theme = useTheme();
   const accessibleTagColors = useAccessibleTagColors(theme.kind, powerLevelTags);
-  const isCall = room.isCallRoom();
+
   useKeyDown(
     window,
     useCallback(
@@ -87,7 +86,6 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
         if (document.querySelector('.ReactModalPortal > *') || navigation.isRawModalVisible) {
           return;
         }
-        if (isCall) return;
 
         if (shouldFocusMessageField(evt) || isKeyHotkey('mod+v', evt)) {
           if (editor) {
@@ -95,32 +93,13 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
           }
         }
       },
-      [editor, isCall]
+      [editor]
     )
   );
 
-  if (isCall) {
-    return (
-      <Page
-        ref={roomViewRef}
-        style={{
-          display: 'flex',
-          flexDirection: 'column',
-          height: '100%',
-          width: '0%',
-          overflow: 'hidden',
-        }}
-      >
-        <RoomViewHeader />
-        <CallActivationEffect />
-      </Page>
-    );
-  }
-
   return (
     <Page ref={roomViewRef}>
       <RoomViewHeader />
-      {/* Main timeline area */}
       <Box grow="Yes" direction="Column" style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
         <RoomTimeline
           key={roomId}

From 589b318b08f1b4083e942a5836d66c10317fc215 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 18 Apr 2025 03:00:52 -0500
Subject: [PATCH 048/242] Start laying out a toggle for roomtimeline in a call

---
 src/app/features/room/RoomViewHeader.tsx | 267 ++++++++++++-----------
 1 file changed, 145 insertions(+), 122 deletions(-)

diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 9e102f30..e839f50e 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -65,6 +65,7 @@ import {
   getRoomNotificationModeIcon,
   useRoomsNotificationPreferencesContext,
 } from '../../hooks/useRoomsNotificationPreferences';
+import { useCallState } from '../../pages/client/CallProvider';
 
 type RoomMenuProps = {
   room: Room;
@@ -220,6 +221,7 @@ export function RoomViewHeader() {
   const [pinMenuAnchor, setPinMenuAnchor] = useState<RectCords>();
   const mDirects = useAtomValue(mDirectAtom);
 
+  const { isChatOpen, toggleChat } = useCallState();
   const pinnedEvents = useRoomPinnedEvents(room);
   const encryptionEvent = useStateEvent(room, StateEvent.RoomEncryption);
   const ecryptedRoom = !!encryptionEvent;
@@ -339,153 +341,174 @@ export function RoomViewHeader() {
             )}
           </Box>
         </Box>
-        <Box shrink="No">
-          {isDirectMessage() && (
+        {!room.isCallRoom && (
+          <Box shrink="No">
+            {isDirectMessage() && (
+              <TooltipProvider
+                position="Bottom"
+                align="End"
+                offset={4}
+                tooltip={
+                  <Tooltip>
+                    <Text>Start a call</Text>
+                  </Tooltip>
+                }
+              >
+                {(triggerRef) => (
+                  <IconButton onClick={handleCall} ref={triggerRef}>
+                    <Icon size="400" src={Icons.Phone} />
+                  </IconButton>
+                )}
+              </TooltipProvider>
+            )}
+            {!ecryptedRoom && (
+              <TooltipProvider
+                position="Bottom"
+                offset={4}
+                tooltip={
+                  <Tooltip>
+                    <Text>Search</Text>
+                  </Tooltip>
+                }
+              >
+                {(triggerRef) => (
+                  <IconButton ref={triggerRef} onClick={handleSearchClick}>
+                    <Icon size="400" src={Icons.Search} />
+                  </IconButton>
+                )}
+              </TooltipProvider>
+            )}
+            <TooltipProvider
+              position="Bottom"
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  <Text>Pinned Messages</Text>
+                </Tooltip>
+              }
+            >
+              {(triggerRef) => (
+                <IconButton
+                  style={{ position: 'relative' }}
+                  onClick={handleOpenPinMenu}
+                  ref={triggerRef}
+                  aria-pressed={!!pinMenuAnchor}
+                >
+                  {pinnedEvents.length > 0 && (
+                    <Badge
+                      style={{
+                        position: 'absolute',
+                        left: toRem(3),
+                        top: toRem(3),
+                      }}
+                      variant="Secondary"
+                      size="400"
+                      fill="Solid"
+                      radii="Pill"
+                    >
+                      <Text as="span" size="L400">
+                        {pinnedEvents.length}
+                      </Text>
+                    </Badge>
+                  )}
+                  <Icon size="400" src={Icons.Pin} filled={!!pinMenuAnchor} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+            <PopOut
+              anchor={pinMenuAnchor}
+              position="Bottom"
+              content={
+                <FocusTrap
+                  focusTrapOptions={{
+                    initialFocus: false,
+                    returnFocusOnDeactivate: false,
+                    onDeactivate: () => setPinMenuAnchor(undefined),
+                    clickOutsideDeactivates: true,
+                    isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                    isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                    escapeDeactivates: stopPropagation,
+                  }}
+                >
+                  <RoomPinMenu room={room} requestClose={() => setPinMenuAnchor(undefined)} />
+                </FocusTrap>
+              }
+            />
+
+            {screenSize === ScreenSize.Desktop && (
+              <TooltipProvider
+                position="Bottom"
+                offset={4}
+                tooltip={
+                  <Tooltip>
+                    <Text>Members</Text>
+                  </Tooltip>
+                }
+              >
+                {(triggerRef) => (
+                  <IconButton ref={triggerRef} onClick={() => setPeopleDrawer((drawer) => !drawer)}>
+                    <Icon size="400" src={Icons.User} />
+                  </IconButton>
+                )}
+              </TooltipProvider>
+            )}
             <TooltipProvider
               position="Bottom"
               align="End"
               offset={4}
               tooltip={
                 <Tooltip>
-                  <Text>Start a call</Text>
+                  <Text>More Options</Text>
                 </Tooltip>
               }
             >
               {(triggerRef) => (
-                <IconButton onClick={handleCall} ref={triggerRef}>
-                  <Icon size="400" src={Icons.Phone} />
+                <IconButton onClick={handleOpenMenu} ref={triggerRef} aria-pressed={!!menuAnchor}>
+                  <Icon size="400" src={Icons.VerticalDots} filled={!!menuAnchor} />
                 </IconButton>
               )}
             </TooltipProvider>
-          )}
-          {!ecryptedRoom && (
+            <PopOut
+              anchor={menuAnchor}
+              position="Bottom"
+              align="End"
+              content={
+                <FocusTrap
+                  focusTrapOptions={{
+                    initialFocus: false,
+                    returnFocusOnDeactivate: false,
+                    onDeactivate: () => setMenuAnchor(undefined),
+                    clickOutsideDeactivates: true,
+                    isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                    isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                    escapeDeactivates: stopPropagation,
+                  }}
+                >
+                  <RoomMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
+                </FocusTrap>
+              }
+            />
+          </Box>
+        )}
+        {room.isCallRoom() && (
+          <Box>
             <TooltipProvider
               position="Bottom"
               offset={4}
               tooltip={
                 <Tooltip>
-                  <Text>Search</Text>
+                  <Text>Chat</Text>
                 </Tooltip>
               }
             >
               {(triggerRef) => (
-                <IconButton ref={triggerRef} onClick={handleSearchClick}>
-                  <Icon size="400" src={Icons.Search} />
+                <IconButton ref={triggerRef} onClick={toggleChat}>
+                  <Icon size="400" src={Icons.Message} />
                 </IconButton>
               )}
             </TooltipProvider>
-          )}
-          <TooltipProvider
-            position="Bottom"
-            offset={4}
-            tooltip={
-              <Tooltip>
-                <Text>Pinned Messages</Text>
-              </Tooltip>
-            }
-          >
-            {(triggerRef) => (
-              <IconButton
-                style={{ position: 'relative' }}
-                onClick={handleOpenPinMenu}
-                ref={triggerRef}
-                aria-pressed={!!pinMenuAnchor}
-              >
-                {pinnedEvents.length > 0 && (
-                  <Badge
-                    style={{
-                      position: 'absolute',
-                      left: toRem(3),
-                      top: toRem(3),
-                    }}
-                    variant="Secondary"
-                    size="400"
-                    fill="Solid"
-                    radii="Pill"
-                  >
-                    <Text as="span" size="L400">
-                      {pinnedEvents.length}
-                    </Text>
-                  </Badge>
-                )}
-                <Icon size="400" src={Icons.Pin} filled={!!pinMenuAnchor} />
-              </IconButton>
-            )}
-          </TooltipProvider>
-          <PopOut
-            anchor={pinMenuAnchor}
-            position="Bottom"
-            content={
-              <FocusTrap
-                focusTrapOptions={{
-                  initialFocus: false,
-                  returnFocusOnDeactivate: false,
-                  onDeactivate: () => setPinMenuAnchor(undefined),
-                  clickOutsideDeactivates: true,
-                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-                  escapeDeactivates: stopPropagation,
-                }}
-              >
-                <RoomPinMenu room={room} requestClose={() => setPinMenuAnchor(undefined)} />
-              </FocusTrap>
-            }
-          />
-
-          {screenSize === ScreenSize.Desktop && (
-            <TooltipProvider
-              position="Bottom"
-              offset={4}
-              tooltip={
-                <Tooltip>
-                  <Text>Members</Text>
-                </Tooltip>
-              }
-            >
-              {(triggerRef) => (
-                <IconButton ref={triggerRef} onClick={() => setPeopleDrawer((drawer) => !drawer)}>
-                  <Icon size="400" src={Icons.User} />
-                </IconButton>
-              )}
-            </TooltipProvider>
-          )}
-          <TooltipProvider
-            position="Bottom"
-            align="End"
-            offset={4}
-            tooltip={
-              <Tooltip>
-                <Text>More Options</Text>
-              </Tooltip>
-            }
-          >
-            {(triggerRef) => (
-              <IconButton onClick={handleOpenMenu} ref={triggerRef} aria-pressed={!!menuAnchor}>
-                <Icon size="400" src={Icons.VerticalDots} filled={!!menuAnchor} />
-              </IconButton>
-            )}
-          </TooltipProvider>
-          <PopOut
-            anchor={menuAnchor}
-            position="Bottom"
-            align="End"
-            content={
-              <FocusTrap
-                focusTrapOptions={{
-                  initialFocus: false,
-                  returnFocusOnDeactivate: false,
-                  onDeactivate: () => setMenuAnchor(undefined),
-                  clickOutsideDeactivates: true,
-                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-                  escapeDeactivates: stopPropagation,
-                }}
-              >
-                <RoomMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
-              </FocusTrap>
-            }
-          />
-        </Box>
+          </Box>
+        )}
       </Box>
     </PageHeader>
   );

From 8f87690b00ead91de8ecda9c0f6a1862e5643de0 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 18 Apr 2025 03:01:17 -0500
Subject: [PATCH 049/242] Return to lobby is very useful

---
 src/app/features/room/SmallWidget.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room/SmallWidget.ts b/src/app/features/room/SmallWidget.ts
index aa379560..20449519 100644
--- a/src/app/features/room/SmallWidget.ts
+++ b/src/app/features/room/SmallWidget.ts
@@ -42,7 +42,7 @@ export const getWidgetUrl = (mx: MatrixClient, roomId: string, elementCallUrl: s
     preload: 'false',
     skipLobby: 'true',
     //intent: 'join_existing',
-    //returnToLobby: 'true',
+    returnToLobby: 'true',
     perParticipantE2EE: 'true',
     hideHeader: 'true',
     userId: mx.getUserId()!,

From 1ac5b3d8fd93f525eb1b6a896d5bdf4ac124e07b Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 18 Apr 2025 03:01:44 -0500
Subject: [PATCH 050/242] add groundwork for call roomtimeline toggle

---
 src/app/pages/client/CallProvider.tsx | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
index 086fa5a8..c1ccd82d 100644
--- a/src/app/pages/client/CallProvider.tsx
+++ b/src/app/pages/client/CallProvider.tsx
@@ -8,12 +8,7 @@ import React, {
   useEffect,
 } from 'react';
 import { logger } from 'matrix-js-sdk/lib/logger';
-import {
-  WidgetApiToWidgetAction,
-  ITransport,
-  WidgetApiAction,
-  WidgetApiFromWidgetAction,
-} from 'matrix-widget-api';
+import { WidgetApiToWidgetAction, ITransport, WidgetApiAction } from 'matrix-widget-api';
 
 interface MediaStatePayload {
   audioEnabled?: boolean;
@@ -21,6 +16,7 @@ interface MediaStatePayload {
 }
 
 const WIDGET_MEDIA_STATE_UPDATE_ACTION = 'io.element.device_mute';
+const WIDGET_HANGUP_ACTION = 'io.element.hangup';
 
 const SET_MEDIA_STATE_ACTION = 'io.element.device_mute';
 
@@ -36,8 +32,10 @@ interface CallContextState {
   ) => Promise<void>;
   isAudioEnabled: boolean;
   isVideoEnabled: boolean;
+  isChatOpen: boolean;
   toggleAudio: () => Promise<void>;
   toggleVideo: () => Promise<void>;
+  toggleChat: () => Promise<void>;
 }
 
 const CallContext = createContext<CallContextState | undefined>(undefined);
@@ -48,6 +46,7 @@ interface CallProviderProps {
 
 const DEFAULT_AUDIO_ENABLED = false;
 const DEFAULT_VIDEO_ENABLED = false;
+const DEFAULT_CHAT_OPENED = false;
 
 export function CallProvider({ children }: CallProviderProps) {
   const [activeCallRoomId, setActiveCallRoomIdState] = useState<string | null>(null);
@@ -56,11 +55,13 @@ export function CallProvider({ children }: CallProviderProps) {
 
   const [isAudioEnabled, setIsAudioEnabledState] = useState<boolean>(DEFAULT_AUDIO_ENABLED);
   const [isVideoEnabled, setIsVideoEnabledState] = useState<boolean>(DEFAULT_VIDEO_ENABLED);
+  const [isChatOpen, setIsChatOpenState] = useState<boolean>(DEFAULT_CHAT_OPENED);
 
   const resetMediaState = useCallback(() => {
     logger.debug('CallContext: Resetting media state to defaults.');
     setIsAudioEnabledState(DEFAULT_AUDIO_ENABLED);
     setIsVideoEnabledState(DEFAULT_VIDEO_ENABLED);
+    setIsChatOpenState(DEFAULT_CHAT_OPENED);
   }, []);
 
   const setActiveCallRoomId = useCallback(
@@ -154,13 +155,13 @@ export function CallProvider({ children }: CallProviderProps) {
     };
 
     logger.debug(`CallContext: Setting up listeners for transport in room ${activeCallRoomId}`);
-    transport.on(`action:${WidgetApiFromWidgetAction.HangupCall}`, handleHangup); // Use standard hangup action name
+    transport.on(`action:${WIDGET_HANGUP_ACTION}`, handleHangup); // Use standard hangup action name
     transport.on(`action:${WIDGET_MEDIA_STATE_UPDATE_ACTION}`, handleMediaStateUpdate);
 
     return () => {
       logger.debug(`CallContext: Cleaning up listeners for transport in room ${activeCallRoomId}`);
       if (transport) {
-        transport.off(`action:${WidgetApiFromWidgetAction.HangupCall}`, handleHangup);
+        transport.off(`action:${WIDGET_HANGUP_ACTION}`, handleHangup);
         transport.off(`action:${WIDGET_MEDIA_STATE_UPDATE_ACTION}`, handleMediaStateUpdate);
       }
     };
@@ -169,6 +170,7 @@ export function CallProvider({ children }: CallProviderProps) {
     activeCallRoomId,
     transportRoomId,
     hangUp,
+    isChatOpen,
     isAudioEnabled,
     isVideoEnabled,
   ]);
@@ -235,6 +237,11 @@ export function CallProvider({ children }: CallProviderProps) {
     }
   }, [isVideoEnabled, isAudioEnabled, sendWidgetAction]);
 
+  const toggleChat = useCallback(async () => {
+    const newState = !isChatOpen;
+    setIsChatOpenState(!newState);
+  }, [isChatOpen]);
+
   const contextValue = useMemo<CallContextState>(
     () => ({
       activeCallRoomId,
@@ -243,10 +250,12 @@ export function CallProvider({ children }: CallProviderProps) {
       activeApiTransport,
       registerActiveTransport,
       sendWidgetAction,
+      isChatOpen,
       isAudioEnabled,
       isVideoEnabled,
       toggleAudio,
       toggleVideo,
+      toggleChat,
     }),
     [
       activeCallRoomId,

From 1a3b10e32d5b3dd37be832d53728c46cf025e418 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 18 Apr 2025 03:03:13 -0500
Subject: [PATCH 051/242] add a roomview window for calls and rename room to
 roomId for accuracy

---
 .../pages/call/PersistentCallContainer.tsx    | 30 ++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index 55cddbf1..c958cb12 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -15,9 +15,11 @@ import { Page, PageRoot } from '../../components/page';
 import { RouteSpaceProvider, Space, SpaceRouteRoomProvider } from '../client/space';
 import { MobileFriendlyPageNav } from '../MobileFriendly';
 import { SPACE_PATH } from '../paths';
-import { PowerLevelsContextProvider } from '../../hooks/usePowerLevels';
+import { PowerLevelsContextProvider, usePowerLevels } from '../../hooks/usePowerLevels';
 import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
 import { useClientConfig } from '../../hooks/useClientConfig';
+import { RoomView } from '../../features/room/RoomView';
+import { useParams } from 'react-router-dom';
 
 interface PersistentCallContainerProps {
   isVisible: boolean;
@@ -25,9 +27,12 @@ interface PersistentCallContainerProps {
 
 export function PersistentCallContainer({ isVisible }: PersistentCallContainerProps) {
   const { activeCallRoomId, setActiveCallRoomId, registerActiveTransport } = useCallState();
+  const { eventId } = useParams();
   const mx = useMatrixClient();
-  const room = useSelectedRoom();
+  const roomId = useSelectedRoom();
   const clientConfig = useClientConfig();
+  const room = mx.getRoom(roomId);
+  const powerLevels = usePowerLevels(room ?? null);
 
   logger.info(room);
 
@@ -59,12 +64,12 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
       }
       widgetApiRef.current = null;
       smallWidgetRef.current = null;
-      iframeRef.current.src = 'about:blank';
+      if (iframeRef.current) iframeRef.current.src = 'about:blank';
     };
 
     if (activeCallRoomId && mx?.getUserId()) {
       if (cleanupRoomId !== activeCallRoomId) {
-        const newUrl = getWidgetUrl(mx, room, clientConfig.elementCallUrl ?? '');
+        const newUrl = getWidgetUrl(mx, roomId, clientConfig.elementCallUrl ?? '');
 
         if (iframeRef.current && iframeRef.current.src !== newUrl.toString()) {
           logger.info(
@@ -140,7 +145,7 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
   return (
     <Page style={containerStyle}>
       <Box direction="Row" grow="Yes" style={{ height: '100%', width: '100%' }}>
-        {activeCallRoomId && room && (
+        {activeCallRoomId && roomId && (
           <Box
             shrink="No"
             style={{
@@ -166,9 +171,9 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
           direction="Column"
           style={{ position: 'relative', height: '100%', width: '100%', overflow: 'hidden' }}
         >
-          {activeCallRoomId && room && (
+          {activeCallRoomId && roomId && (
             <Box direction="Column" style={{ width: '100%' }}>
-              <PowerLevelsContextProvider value={null}>
+              <PowerLevelsContextProvider value={powerLevels}>
                 <RouteSpaceProvider>
                   <SpaceRouteRoomProvider>
                     <RoomViewHeader />
@@ -195,6 +200,17 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
             />
           </Box>
         </Box>
+        <Box direction="Column" style={{ position: 'relative' }}>
+          {activeCallRoomId && roomId !== null && (
+            <PowerLevelsContextProvider value={powerLevels}>
+              <RouteSpaceProvider>
+                <SpaceRouteRoomProvider>
+                  <RoomView room={room} eventId={eventId} />
+                </SpaceRouteRoomProvider>
+              </RouteSpaceProvider>
+            </PowerLevelsContextProvider>
+          )}
+        </Box>
       </Box>
     </Page>
   );

From 9a3fc59ef0c493c2755ca0227cc04382e3288b6b Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Sun, 20 Apr 2025 14:39:11 -0400
Subject: [PATCH 052/242] Adjust to using a provider so we don't load
 powerlevels in our callcontainer

---
 .../pages/call/PersistentCallContainer.tsx    | 29 ++++++++-----------
 src/app/pages/call/PowerLevelsContainer.tsx   | 29 +++++++++++++++++++
 2 files changed, 41 insertions(+), 17 deletions(-)
 create mode 100644 src/app/pages/call/PowerLevelsContainer.tsx

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index c958cb12..cf391a0a 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -20,6 +20,7 @@ import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
 import { useClientConfig } from '../../hooks/useClientConfig';
 import { RoomView } from '../../features/room/RoomView';
 import { useParams } from 'react-router-dom';
+import { PowerLevelsContainer } from './PowerLevelsContainer';
 
 interface PersistentCallContainerProps {
   isVisible: boolean;
@@ -31,8 +32,12 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
   const mx = useMatrixClient();
   const roomId = useSelectedRoom();
   const clientConfig = useClientConfig();
+  // Make a new TSX element for usePowerLevels that falls in line with how they are using it for RoomView
+  // That way we avoid this lobby issue. We should still be able to plant that new element
+  // In the same blocks we have?
+  // If not we need to find some dummy ID to place as the default behavior.
+  // But the ideal is to avoid this check unless it CAN be applicable
   const room = mx.getRoom(roomId);
-  const powerLevels = usePowerLevels(room ?? null);
 
   logger.info(room);
 
@@ -153,8 +158,7 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
               overflowY: 'auto',
             }}
           >
-            <RouteSpaceProvider>
-              <SpaceRouteRoomProvider>
+                <PowerLevelsContainer>
                 <PageRoot
                   nav={
                     <MobileFriendlyPageNav path={SPACE_PATH}>
@@ -162,8 +166,7 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
                     </MobileFriendlyPageNav>
                   }
                 />
-              </SpaceRouteRoomProvider>
-            </RouteSpaceProvider>
+                </PowerLevelsContainer>
           </Box>
         )}
 
@@ -173,13 +176,9 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
         >
           {activeCallRoomId && roomId && (
             <Box direction="Column" style={{ width: '100%' }}>
-              <PowerLevelsContextProvider value={powerLevels}>
-                <RouteSpaceProvider>
-                  <SpaceRouteRoomProvider>
+              <PowerLevelsContainer>
                     <RoomViewHeader />
-                  </SpaceRouteRoomProvider>
-                </RouteSpaceProvider>
-              </PowerLevelsContextProvider>
+                    </PowerLevelsContainer>
             </Box>
           )}
           <Box grow="Yes" style={{ position: 'relative' }}>
@@ -202,13 +201,9 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
         </Box>
         <Box direction="Column" style={{ position: 'relative' }}>
           {activeCallRoomId && roomId !== null && (
-            <PowerLevelsContextProvider value={powerLevels}>
-              <RouteSpaceProvider>
-                <SpaceRouteRoomProvider>
+            <PowerLevelsContainer>
                   <RoomView room={room} eventId={eventId} />
-                </SpaceRouteRoomProvider>
-              </RouteSpaceProvider>
-            </PowerLevelsContextProvider>
+                  </PowerLevelsContainer>
           )}
         </Box>
       </Box>
diff --git a/src/app/pages/call/PowerLevelsContainer.tsx b/src/app/pages/call/PowerLevelsContainer.tsx
new file mode 100644
index 00000000..b7216e60
--- /dev/null
+++ b/src/app/pages/call/PowerLevelsContainer.tsx
@@ -0,0 +1,29 @@
+import React, { ReactNode } from "react";
+import { useSelectedRoom } from "../../hooks/router/useSelectedRoom";
+import { useMatrixClient } from "../../hooks/useMatrixClient";
+import { PowerLevelsContextProvider, usePowerLevels } from "../../hooks/usePowerLevels";
+import { RouteSpaceProvider, SpaceRouteRoomProvider } from "../client/space";
+
+
+
+type PowerLevelsContainerProps = {
+  children: ReactNode;
+};
+export function PowerLevelsContainer({ children }: PowerLevelsContainerProps) {
+
+  const mx = useMatrixClient();
+  const roomId = useSelectedRoom();
+  const room = mx.getRoom(roomId);
+  const powerLevels = usePowerLevels(room ?? null);
+
+
+    return (
+                    <PowerLevelsContextProvider value={powerLevels}>
+            <RouteSpaceProvider>
+              <SpaceRouteRoomProvider>
+              { children }
+              </SpaceRouteRoomProvider>
+            </RouteSpaceProvider>
+                        </PowerLevelsContextProvider>
+    );
+}
\ No newline at end of file

From 0fe90e5e6d10bdcc8b0d25c5483863d02fee8dc0 Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Sun, 20 Apr 2025 14:39:30 -0400
Subject: [PATCH 053/242] Remove comment

---
 src/app/pages/call/PersistentCallContainer.tsx | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index cf391a0a..12f7beba 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -32,11 +32,6 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
   const mx = useMatrixClient();
   const roomId = useSelectedRoom();
   const clientConfig = useClientConfig();
-  // Make a new TSX element for usePowerLevels that falls in line with how they are using it for RoomView
-  // That way we avoid this lobby issue. We should still be able to plant that new element
-  // In the same blocks we have?
-  // If not we need to find some dummy ID to place as the default behavior.
-  // But the ideal is to avoid this check unless it CAN be applicable
   const room = mx.getRoom(roomId);
 
   logger.info(room);

From 7a03b91c9348764c5ea00861be632ed797035ff2 Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Mon, 21 Apr 2025 01:38:08 -0400
Subject: [PATCH 054/242] Create NavBottom for call status

---
 src/app/pages/call/CallNavBottom.tsx | 65 ++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 src/app/pages/call/CallNavBottom.tsx

diff --git a/src/app/pages/call/CallNavBottom.tsx b/src/app/pages/call/CallNavBottom.tsx
new file mode 100644
index 00000000..d4ff7a43
--- /dev/null
+++ b/src/app/pages/call/CallNavBottom.tsx
@@ -0,0 +1,65 @@
+import { logger } from 'matrix-js-sdk/lib/logger';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useCallState } from '../client/CallProvider';
+import { Box, Text } from 'folds';
+
+export function CallNavBottom() {
+  const {
+    sendWidgetAction,
+    activeCallRoomId,
+    isAudioEnabled,
+    isVideoEnabled,
+    toggleAudio,
+    toggleVideo,
+    hangUp,
+  } = useCallState();
+  const mx = useMatrixClient();
+  const userName = mx.getUser(mx.getUserId() ?? '')?.displayName ?? mx.getUserId() ?? 'User';
+
+  const handleSendMessageClick = () => {
+    const action = 'my.custom.action';
+    const data = { message: `Hello from ${userName}!` };
+    logger.debug(`FixedBottomNavArea: Sending action '${action}'`);
+    sendWidgetAction(action, data)
+      .then(() => logger.info(`FixedBottomNavArea: Action '${action}' sent.`))
+      .catch((err) => logger.error(`FixedBottomNavArea: Failed action '${action}':`, err));
+  };
+
+  if (!activeCallRoomId) {
+    return (
+      <Box
+        direction="Column"
+        gap="500"
+        style={{
+          flexShrink: 0,
+          borderTop: `1px solid #e0e0e0`,
+        }}
+      >
+        <Text size="T200" color="Muted" align="Center">
+          No active call
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Box direction="Column">
+      <Box
+        direction="Row"
+        gap="500"
+        style={{
+          flexShrink: 0,
+          borderTop: `1px solid #e0e0e0`,
+        }}
+      >
+        {/* Going to need better icons for this */}
+        <button onClick={toggleAudio}> Muted:{(!isAudioEnabled).toString()} </button>
+        <button onClick={toggleVideo}> Videosn't:{(!isVideoEnabled).toString()} </button>
+      </Box>
+      <Box>
+        <button onClick={hangUp}> Hangup </button>
+      </Box>
+      <Box>{mx.getRoom(activeCallRoomId)?.normalizedName}</Box>
+    </Box>
+  );
+}

From 6ad8b477d143883530a4459df7abe8251d15b41a Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Mon, 21 Apr 2025 01:38:33 -0400
Subject: [PATCH 055/242] fix bug with calls disabling dm and lobby

---
 .../pages/call/PersistentCallContainer.tsx    | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index 12f7beba..2e119020 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -32,7 +32,7 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
   const mx = useMatrixClient();
   const roomId = useSelectedRoom();
   const clientConfig = useClientConfig();
-  const room = mx.getRoom(roomId);
+  const room = mx.getRoom(roomId) ?? null;
 
   logger.info(room);
 
@@ -145,7 +145,7 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
   return (
     <Page style={containerStyle}>
       <Box direction="Row" grow="Yes" style={{ height: '100%', width: '100%' }}>
-        {activeCallRoomId && roomId && (
+        {activeCallRoomId && roomId && room !== null && (
           <Box
             shrink="No"
             style={{
@@ -153,15 +153,15 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
               overflowY: 'auto',
             }}
           >
-                <PowerLevelsContainer>
-                <PageRoot
-                  nav={
-                    <MobileFriendlyPageNav path={SPACE_PATH}>
-                      <Space />
-                    </MobileFriendlyPageNav>
-                  }
-                />
-                </PowerLevelsContainer>
+            <PowerLevelsContainer>
+              <PageRoot
+                nav={
+                  <MobileFriendlyPageNav path={SPACE_PATH}>
+                    <Space />
+                  </MobileFriendlyPageNav>
+                }
+              />
+            </PowerLevelsContainer>
           </Box>
         )}
 
@@ -169,11 +169,11 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
           direction="Column"
           style={{ position: 'relative', height: '100%', width: '100%', overflow: 'hidden' }}
         >
-          {activeCallRoomId && roomId && (
+          {activeCallRoomId && roomId && room !== null && (
             <Box direction="Column" style={{ width: '100%' }}>
               <PowerLevelsContainer>
-                    <RoomViewHeader />
-                    </PowerLevelsContainer>
+                <RoomViewHeader />
+              </PowerLevelsContainer>
             </Box>
           )}
           <Box grow="Yes" style={{ position: 'relative' }}>
@@ -195,10 +195,10 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
           </Box>
         </Box>
         <Box direction="Column" style={{ position: 'relative' }}>
-          {activeCallRoomId && roomId !== null && (
+          {activeCallRoomId && roomId && room !== null && (
             <PowerLevelsContainer>
-                  <RoomView room={room} eventId={eventId} />
-                  </PowerLevelsContainer>
+              <RoomView room={room} eventId={eventId} />
+            </PowerLevelsContainer>
           )}
         </Box>
       </Box>

From 7ebf26e34b8b50761c0b7459d7ecdce6c88cd5db Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Mon, 21 Apr 2025 01:38:52 -0400
Subject: [PATCH 056/242] Add call status to bottom of DMs

---
 src/app/pages/client/direct/Direct.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index b6a8de1a..66c9ab05 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -50,6 +50,7 @@ import {
   getRoomNotificationMode,
   useRoomsNotificationPreferencesContext,
 } from '../../../hooks/useRoomsNotificationPreferences';
+import { CallNavBottom } from '../../call/CallNavBottom';
 
 type DirectMenuProps = {
   requestClose: () => void;
@@ -269,6 +270,7 @@ export function Direct() {
           </Box>
         </PageNavContent>
       )}
+      <CallNavBottom />
     </PageNav>
   );
 }

From 79b43031549da03abcdac19197a136667662b34b Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Mon, 21 Apr 2025 01:39:12 -0400
Subject: [PATCH 057/242] Add call status to bottom of home nav

---
 src/app/pages/client/home/Home.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index af4164fd..f7f358b3 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -53,6 +53,7 @@ import {
   getRoomNotificationMode,
   useRoomsNotificationPreferencesContext,
 } from '../../../hooks/useRoomsNotificationPreferences';
+import { CallNavBottom } from '../../call/CallNavBottom';
 
 type HomeMenuProps = {
   requestClose: () => void;
@@ -336,6 +337,7 @@ export function Home() {
           </Box>
         </PageNavContent>
       )}
+      <CallNavBottom />
     </PageNav>
   );
 }

From 40a25aa03e52942d06b52f1fd7d3df93cd50920c Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Mon, 21 Apr 2025 01:39:36 -0400
Subject: [PATCH 058/242] Move out bottom nav into own file

---
 src/app/pages/client/space/Space.tsx | 64 +---------------------------
 1 file changed, 2 insertions(+), 62 deletions(-)

diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 9dcd730a..8f2d0fdb 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -79,6 +79,7 @@ import {
 } from '../../../hooks/useRoomsNotificationPreferences';
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
 import { useCallState } from '../CallProvider';
+import { CallNavBottom } from '../../call/CallNavBottom';
 
 /**
  * Processes the raw hierarchy from useSpaceJoinedHierarchy into a flat list
@@ -357,67 +358,6 @@ function SpaceHeader() {
   );
 }
 
-function FixedBottomNavArea() {
-  const {
-    sendWidgetAction,
-    activeCallRoomId,
-    isAudioEnabled,
-    isVideoEnabled,
-    toggleAudio,
-    toggleVideo,
-    hangUp,
-  } = useCallState();
-  const mx = useMatrixClient();
-  const userName = mx.getUser(mx.getUserId() ?? '')?.displayName ?? mx.getUserId() ?? 'User';
-
-  const handleSendMessageClick = () => {
-    const action = 'my.custom.action';
-    const data = { message: `Hello from ${userName}!` };
-    logger.debug(`FixedBottomNavArea: Sending action '${action}'`);
-    sendWidgetAction(action, data)
-      .then(() => logger.info(`FixedBottomNavArea: Action '${action}' sent.`))
-      .catch((err) => logger.error(`FixedBottomNavArea: Failed action '${action}':`, err));
-  };
-
-  if (!activeCallRoomId) {
-    return (
-      <Box
-        direction="Column"
-        gap="500"
-        style={{
-          flexShrink: 0,
-          borderTop: `1px solid #e0e0e0`,
-        }}
-      >
-        <Text size="T200" color="Muted" align="Center">
-          No active call
-        </Text>
-      </Box>
-    );
-  }
-
-  return (
-    <Box direction="Column">
-      <Box
-        direction="Row"
-        gap="500"
-        style={{
-          flexShrink: 0,
-          borderTop: `1px solid #e0e0e0`,
-        }}
-      >
-        {/* Going to need better icons for this */}
-        <button onClick={toggleAudio}> Muted:{(!isAudioEnabled).toString()} </button>
-        <button onClick={toggleVideo}> Videosn't:{(!isVideoEnabled).toString()} </button>
-      </Box>
-      <Box>
-        <button onClick={hangUp}> Hangup </button>
-      </Box>
-      <Box>{mx.getRoom(activeCallRoomId)?.normalizedName}</Box>
-    </Box>
-  );
-}
-
 export function Space() {
   const mx = useMatrixClient();
   const space = useSpace();
@@ -607,7 +547,7 @@ export function Space() {
           })}
         </NavCategory>
       </PageNavContent>
-      <FixedBottomNavArea />
+      <CallNavBottom />
     </PageNav>
   );
 }

From 0fb5ffc68ab499e9a5085fdb948b763c3a9565e8 Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Mon, 21 Apr 2025 21:04:15 -0400
Subject: [PATCH 059/242] add creation handling for calls by setting creation
 content type

---
 src/client/action/room.js | 111 ++++++++++++++++++++++++++------------
 1 file changed, 78 insertions(+), 33 deletions(-)

diff --git a/src/client/action/room.js b/src/client/action/room.js
index 90b74810..01c53b63 100644
--- a/src/client/action/room.js
+++ b/src/client/action/room.js
@@ -56,7 +56,10 @@ function guessDMRoomTargetId(room, myUserId) {
   room.getJoinedMembers().forEach((member) => {
     if (member.userId === myUserId) return;
 
-    if (typeof oldestMemberTs === 'undefined' || (member.events.member && member.events.member.getTs() < oldestMemberTs)) {
+    if (
+      typeof oldestMemberTs === 'undefined' ||
+      (member.events.member && member.events.member.getTs() < oldestMemberTs)
+    ) {
       oldestMember = member;
       oldestMemberTs = member.events.member.getTs();
     }
@@ -64,14 +67,21 @@ function guessDMRoomTargetId(room, myUserId) {
   if (oldestMember) return oldestMember.userId;
 
   // if there are no joined members other than us, use the oldest member
-  room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.getMembers().forEach((member) => {
-    if (member.userId === myUserId) return;
+  room
+    .getLiveTimeline()
+    .getState(EventTimeline.FORWARDS)
+    ?.getMembers()
+    .forEach((member) => {
+      if (member.userId === myUserId) return;
 
-    if (typeof oldestMemberTs === 'undefined' || (member.events.member && member.events.member.getTs() < oldestMemberTs)) {
-      oldestMember = member;
-      oldestMemberTs = member.events.member.getTs();
-    }
-  });
+      if (
+        typeof oldestMemberTs === 'undefined' ||
+        (member.events.member && member.events.member.getTs() < oldestMemberTs)
+      ) {
+        oldestMember = member;
+        oldestMemberTs = member.events.member.getTs();
+      }
+    });
 
   if (typeof oldestMember === 'undefined') return myUserId;
   return oldestMember.userId;
@@ -117,7 +127,13 @@ async function create(mx, options, isDM = false) {
     }
     return result;
   } catch (e) {
-    const errcodes = ['M_UNKNOWN', 'M_BAD_JSON', 'M_ROOM_IN_USE', 'M_INVALID_ROOM_STATE', 'M_UNSUPPORTED_ROOM_VERSION'];
+    const errcodes = [
+      'M_UNKNOWN',
+      'M_BAD_JSON',
+      'M_ROOM_IN_USE',
+      'M_INVALID_ROOM_STATE',
+      'M_UNSUPPORTED_ROOM_VERSION',
+    ];
     if (errcodes.includes(e.errcode)) {
       throw new Error(e);
     }
@@ -149,7 +165,7 @@ async function createDM(mx, userIdOrIds, isEncrypted = true) {
 
 async function createRoom(mx, opts) {
   // joinRule: 'public' | 'invite' | 'restricted'
-  const { name, topic, joinRule } = opts;
+  const { name, roomType, topic, joinRule } = opts;
   const alias = opts.alias ?? undefined;
   const parentId = opts.parentId ?? undefined;
   const isSpace = opts.isSpace ?? false;
@@ -161,12 +177,16 @@ async function createRoom(mx, opts) {
   const options = {
     creation_content: undefined,
     name,
+    roomType,
     topic,
     visibility,
     room_alias_name: alias,
     initial_state: [],
     power_level_content_override: undefined,
   };
+  if (roomType) {
+    options.creation_content = { type: 'org.matrix.msc3417.call' };
+  }
   if (isSpace) {
     options.creation_content = { type: 'm.space' };
   }
@@ -211,10 +231,12 @@ async function createRoom(mx, opts) {
       type: 'm.room.join_rules',
       content: {
         join_rule: 'restricted',
-        allow: [{
-          type: 'm.room_membership',
-          room_id: parentId,
-        }],
+        allow: [
+          {
+            type: 'm.room_membership',
+            room_id: parentId,
+          },
+        ],
       },
     });
   }
@@ -222,18 +244,22 @@ async function createRoom(mx, opts) {
   const result = await create(mx, options);
 
   if (parentId) {
-    await mx.sendStateEvent(parentId, 'm.space.child', {
-      auto_join: false,
-      suggested: false,
-      via: [getIdServer(mx.getUserId())],
-    }, result.room_id);
+    await mx.sendStateEvent(
+      parentId,
+      'm.space.child',
+      {
+        auto_join: false,
+        suggested: false,
+        via: [getIdServer(mx.getUserId())],
+      },
+      result.room_id
+    );
   }
 
   return result;
 }
 
 async function ignore(mx, userIds) {
-
   let ignoredUsers = mx.getIgnoredUsers().concat(userIds);
   ignoredUsers = [...new Set(ignoredUsers)];
   await mx.setIgnoredUsers(ignoredUsers);
@@ -251,32 +277,51 @@ async function setPowerLevel(mx, roomId, userId, powerLevel) {
 
 async function setMyRoomNick(mx, roomId, nick) {
   const room = mx.getRoom(roomId);
-  const mEvent = room.getLiveTimeline().getState(EventTimeline.FORWARDS).getStateEvents('m.room.member', mx.getUserId());
+  const mEvent = room
+    .getLiveTimeline()
+    .getState(EventTimeline.FORWARDS)
+    .getStateEvents('m.room.member', mx.getUserId());
   const content = mEvent?.getContent();
   if (!content) return;
-  await mx.sendStateEvent(roomId, 'm.room.member', {
-    ...content,
-    displayname: nick,
-  }, mx.getUserId());
+  await mx.sendStateEvent(
+    roomId,
+    'm.room.member',
+    {
+      ...content,
+      displayname: nick,
+    },
+    mx.getUserId()
+  );
 }
 
 async function setMyRoomAvatar(mx, roomId, mxc) {
   const room = mx.getRoom(roomId);
-  const mEvent = room.getLiveTimeline().getState(EventTimeline.FORWARDS).getStateEvents('m.room.member', mx.getUserId());
+  const mEvent = room
+    .getLiveTimeline()
+    .getState(EventTimeline.FORWARDS)
+    .getStateEvents('m.room.member', mx.getUserId());
   const content = mEvent?.getContent();
   if (!content) return;
-  await mx.sendStateEvent(roomId, 'm.room.member', {
-    ...content,
-    avatar_url: mxc,
-  }, mx.getUserId());
+  await mx.sendStateEvent(
+    roomId,
+    'm.room.member',
+    {
+      ...content,
+      avatar_url: mxc,
+    },
+    mx.getUserId()
+  );
 }
 
 export {
   convertToDm,
   convertToRoom,
   join,
-  createDM, createRoom,
-  ignore, unignore,
+  createDM,
+  createRoom,
+  ignore,
+  unignore,
   setPowerLevel,
-  setMyRoomNick, setMyRoomAvatar,
+  setMyRoomNick,
+  setMyRoomAvatar,
 };

From 39e7de3d21c0d7d4354a0e436f9cbecf39a07b07 Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Mon, 21 Apr 2025 21:04:47 -0400
Subject: [PATCH 060/242] Add room type option

---
 src/app/organisms/create-room/CreateRoom.jsx | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/app/organisms/create-room/CreateRoom.jsx b/src/app/organisms/create-room/CreateRoom.jsx
index 04b2faeb..611adb5a 100644
--- a/src/app/organisms/create-room/CreateRoom.jsx
+++ b/src/app/organisms/create-room/CreateRoom.jsx
@@ -43,6 +43,7 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
   const [isValidAddress, setIsValidAddress] = useState(null);
   const [addressValue, setAddressValue] = useState(undefined);
   const [roleIndex, setRoleIndex] = useState(0);
+  const [roomType, setRoomType] = useState(0);
 
   const addressRef = useRef(null);
 
@@ -75,6 +76,7 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
         joinRule,
         alias: roomAlias,
         isEncrypted: isSpace || joinRule === 'public' ? false : isEncrypted,
+        roomType,
         powerLevel,
         isSpace,
         parentId,
@@ -218,6 +220,17 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
             <Text variant="b3">Selecting Admin sets 100 power level whereas Founder sets 101.</Text>
           }
         />
+        <SettingTile
+          title="Room type"
+          options={
+            <SegmentControl
+              selected={roomType}
+              segments={[{ text: 'Text' }, { text: 'Call' }]}
+              onSelect={setRoomType}
+            />
+          }
+          content={<Text variant="b3">Select the type of room.</Text>}
+        />
         <Input name="topic" minHeight={174} resizable label="Topic (optional)" />
         <div className="create-room__name-wrapper">
           <Input name="name" label={`${isSpace ? 'Space' : 'Room'} name`} required />

From 5ae806444e6a6def927b5b869d6dfc424d6d77c5 Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Mon, 21 Apr 2025 21:05:14 -0400
Subject: [PATCH 061/242] Remove text chat for now

---
 src/app/pages/call/PersistentCallContainer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index 2e119020..116a9176 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -195,7 +195,7 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
           </Box>
         </Box>
         <Box direction="Column" style={{ position: 'relative' }}>
-          {activeCallRoomId && roomId && room !== null && (
+          {false && activeCallRoomId && roomId && room !== null && (
             <PowerLevelsContainer>
               <RoomView room={room} eventId={eventId} />
             </PowerLevelsContainer>

From 02cb7ea9a73181df40eb80f5c06cef89f5ab2fb9 Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Mon, 21 Apr 2025 21:10:27 -0400
Subject: [PATCH 062/242] Add a check for space to hide option in space
 creation

---
 src/app/organisms/create-room/CreateRoom.jsx | 24 +++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/app/organisms/create-room/CreateRoom.jsx b/src/app/organisms/create-room/CreateRoom.jsx
index 611adb5a..ce204d08 100644
--- a/src/app/organisms/create-room/CreateRoom.jsx
+++ b/src/app/organisms/create-room/CreateRoom.jsx
@@ -220,17 +220,19 @@ function CreateRoomContent({ isSpace, parentId, onRequestClose }) {
             <Text variant="b3">Selecting Admin sets 100 power level whereas Founder sets 101.</Text>
           }
         />
-        <SettingTile
-          title="Room type"
-          options={
-            <SegmentControl
-              selected={roomType}
-              segments={[{ text: 'Text' }, { text: 'Call' }]}
-              onSelect={setRoomType}
-            />
-          }
-          content={<Text variant="b3">Select the type of room.</Text>}
-        />
+        {!isSpace && (
+          <SettingTile
+            title="Room type"
+            options={
+              <SegmentControl
+                selected={roomType}
+                segments={[{ text: 'Text' }, { text: 'Call' }]}
+                onSelect={setRoomType}
+              />
+            }
+            content={<Text variant="b3">Select the type of room.</Text>}
+          />
+        )}
         <Input name="topic" minHeight={174} resizable label="Topic (optional)" />
         <div className="create-room__name-wrapper">
           <Input name="name" label={`${isSpace ? 'Space' : 'Room'} name`} required />

From 7beb8411a99cd1dc9388a24324ce6dfed3700f19 Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Tue, 22 Apr 2025 00:27:31 -0400
Subject: [PATCH 063/242] Revert casing to fix bottom nav status buttons
 (should swap back when as an in place option on send)

---
 src/app/pages/client/CallProvider.tsx | 29 ++++++++++++++-------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
index c1ccd82d..960a3a1c 100644
--- a/src/app/pages/client/CallProvider.tsx
+++ b/src/app/pages/client/CallProvider.tsx
@@ -11,13 +11,12 @@ import { logger } from 'matrix-js-sdk/lib/logger';
 import { WidgetApiToWidgetAction, ITransport, WidgetApiAction } from 'matrix-widget-api';
 
 interface MediaStatePayload {
-  audioEnabled?: boolean;
-  videoEnabled?: boolean;
+  audio_enabled?: boolean;
+  video_enabled?: boolean;
 }
 
 const WIDGET_MEDIA_STATE_UPDATE_ACTION = 'io.element.device_mute';
 const WIDGET_HANGUP_ACTION = 'io.element.hangup';
-
 const SET_MEDIA_STATE_ACTION = 'io.element.device_mute';
 
 interface CallContextState {
@@ -143,14 +142,14 @@ export function CallProvider({ children }: CallProviderProps) {
         `CallContext: Received media state update from widget in room ${activeCallRoomId}:`,
         ev.detail
       );
-      const { audioEnabled, videoEnabled } = ev.detail;
-      if (typeof audioEnabled === 'boolean' && audioEnabled !== isAudioEnabled) {
-        logger.debug(`CallContext: Updating audio enabled state from widget: ${audioEnabled}`);
-        setIsAudioEnabledState(audioEnabled);
+      const { audio_enabled, video_enabled } = ev.detail;
+      if (typeof audio_enabled === 'boolean' && audio_enabled !== isAudioEnabled) {
+        logger.debug(`CallContext: Updating audio enabled state from widget: ${audio_enabled}`);
+        setIsAudioEnabledState(audio_enabled);
       }
-      if (typeof videoEnabled === 'boolean' && videoEnabled !== isVideoEnabled) {
-        logger.debug(`CallContext: Updating video enabled state from widget: ${videoEnabled}`);
-        setIsVideoEnabledState(videoEnabled);
+      if (typeof video_enabled === 'boolean' && video_enabled !== isVideoEnabled) {
+        logger.debug(`CallContext: Updating video enabled state from widget: ${video_enabled}`);
+        setIsVideoEnabledState(video_enabled);
       }
     };
 
@@ -209,8 +208,8 @@ export function CallProvider({ children }: CallProviderProps) {
     setIsAudioEnabledState(newState);
     try {
       await sendWidgetAction(SET_MEDIA_STATE_ACTION, {
-        audioEnabled: newState,
-        videoEnabled: isVideoEnabled,
+        audio_enabled: newState,
+        video_enabled: isVideoEnabled,
       });
       logger.debug(`CallContext: Successfully sent audio toggle action.`);
     } catch (error) {
@@ -226,8 +225,8 @@ export function CallProvider({ children }: CallProviderProps) {
     setIsVideoEnabledState(newState);
     try {
       await sendWidgetAction(SET_MEDIA_STATE_ACTION, {
-        audioEnabled: isAudioEnabled,
-        videoEnabled: newState,
+        audio_enabled: isAudioEnabled,
+        video_enabled: newState,
       });
       logger.debug(`CallContext: Successfully sent video toggle action.`);
     } catch (error) {
@@ -264,10 +263,12 @@ export function CallProvider({ children }: CallProviderProps) {
       activeApiTransport,
       registerActiveTransport,
       sendWidgetAction,
+      isChatOpen,
       isAudioEnabled,
       isVideoEnabled,
       toggleAudio,
       toggleVideo,
+      toggleChat,
     ]
   );
 

From 5677042157ba83d43d1231adf3c3b190412b039b Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Tue, 22 Apr 2025 00:27:55 -0400
Subject: [PATCH 064/242] Place holder buttons

---
 src/app/pages/call/CallNavBottom.tsx | 44 ++++++++++++++++++----------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/app/pages/call/CallNavBottom.tsx b/src/app/pages/call/CallNavBottom.tsx
index d4ff7a43..234649ea 100644
--- a/src/app/pages/call/CallNavBottom.tsx
+++ b/src/app/pages/call/CallNavBottom.tsx
@@ -1,7 +1,7 @@
 import { logger } from 'matrix-js-sdk/lib/logger';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useCallState } from '../client/CallProvider';
-import { Box, Text } from 'folds';
+import { Box, Icon, IconButton, Icons, Text } from 'folds';
 
 export function CallNavBottom() {
   const {
@@ -42,24 +42,36 @@ export function CallNavBottom() {
     );
   }
 
+  //Muted:{(!isAudioEnabled).toString()}
+  //Videosn't:{(!isVideoEnabled).toString()}
+  /*
+
+
+
+*/
+
   return (
-    <Box direction="Column">
-      <Box
-        direction="Row"
-        gap="500"
-        style={{
-          flexShrink: 0,
-          borderTop: `1px solid #e0e0e0`,
-        }}
-      >
+    <Box
+      direction="Column"
+      style={{
+        flexShrink: 0,
+        borderTop: `1px solid #e0e0e0`,
+        justifyContent: 'center',
+      }}
+    >
+      <Box direction="Row" style={{ justifyContent: 'center' }}>
         {/* Going to need better icons for this */}
-        <button onClick={toggleAudio}> Muted:{(!isAudioEnabled).toString()} </button>
-        <button onClick={toggleVideo}> Videosn't:{(!isVideoEnabled).toString()} </button>
+        <IconButton onClick={toggleAudio}>
+          <Icon src={!isAudioEnabled ? Icons.VolumeHigh : Icons.VolumeMute} />
+        </IconButton>
+        <IconButton onClick={toggleVideo}>
+          <Icon src={!isVideoEnabled ? Icons.Vlc : Icons.Lock}></Icon>
+        </IconButton>
+        <IconButton onClick={hangUp}>
+          <Icon src={Icons.Phone}></Icon>
+        </IconButton>
       </Box>
-      <Box>
-        <button onClick={hangUp}> Hangup </button>
-      </Box>
-      <Box>{mx.getRoom(activeCallRoomId)?.normalizedName}</Box>
+      <Box style={{ justifyContent: 'center' }}>{mx.getRoom(activeCallRoomId)?.normalizedName}</Box>
     </Box>
   );
 }

From 6d4b37f96d9524a9e93a5746eb305c4db3e40936 Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Tue, 22 Apr 2025 05:35:13 -0400
Subject: [PATCH 065/242] add call status bar call room link

---
 src/app/pages/call/CallNavBottom.tsx | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/app/pages/call/CallNavBottom.tsx b/src/app/pages/call/CallNavBottom.tsx
index 234649ea..79e7e7a0 100644
--- a/src/app/pages/call/CallNavBottom.tsx
+++ b/src/app/pages/call/CallNavBottom.tsx
@@ -1,7 +1,12 @@
 import { logger } from 'matrix-js-sdk/lib/logger';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useCallState } from '../client/CallProvider';
-import { Box, Icon, IconButton, Icons, Text } from 'folds';
+import { Box, Chip, Icon, IconButton, Icons, Text } from 'folds';
+import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
+import {
+  makeMentionCustomProps,
+  renderMatrixMention,
+} from '../../plugins/react-custom-html-parser';
 
 export function CallNavBottom() {
   const {
@@ -25,6 +30,8 @@ export function CallNavBottom() {
       .catch((err) => logger.error(`FixedBottomNavArea: Failed action '${action}':`, err));
   };
 
+  const mentionClickHandler = useMentionClickHandler(activeCallRoomId ?? mx.getUserId());
+
   if (!activeCallRoomId) {
     return (
       <Box
@@ -49,7 +56,7 @@ export function CallNavBottom() {
 
 
 */
-
+  const test = `https://matrix.to/#/${activeCallRoomId}`;
   return (
     <Box
       direction="Column"
@@ -70,8 +77,20 @@ export function CallNavBottom() {
         <IconButton onClick={hangUp}>
           <Icon src={Icons.Phone}></Icon>
         </IconButton>
+        <Box grow="Yes">
+          <Chip size="600">
+            {renderMatrixMention(
+              mx,
+              undefined,
+              test,
+              makeMentionCustomProps(
+                mentionClickHandler,
+                mx.getRoom(activeCallRoomId)?.normalizedName
+              )
+            )}
+          </Chip>
+        </Box>
       </Box>
-      <Box style={{ justifyContent: 'center' }}>{mx.getRoom(activeCallRoomId)?.normalizedName}</Box>
     </Box>
   );
 }

From 157335355071c1dd1969a88e7db5636969cf8c39 Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Tue, 22 Apr 2025 05:35:35 -0400
Subject: [PATCH 066/242] re-enable header buttons globally for now

---
 src/app/features/room/RoomViewHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index e839f50e..e6b72a29 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -341,7 +341,7 @@ export function RoomViewHeader() {
             )}
           </Box>
         </Box>
-        {!room.isCallRoom && (
+        {room.isCallRoom && (
           <Box shrink="No">
             {isDirectMessage() && (
               <TooltipProvider

From 2f980a727a9ffe93942ebdb5ded4edc35dffa1a4 Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Tue, 22 Apr 2025 21:16:36 -0400
Subject: [PATCH 067/242] The reuse is substantial enough to justify including
 the license

---
 src/app/features/room/SmallWidgetDriver.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/app/features/room/SmallWidgetDriver.ts b/src/app/features/room/SmallWidgetDriver.ts
index ded485b8..163787a0 100644
--- a/src/app/features/room/SmallWidgetDriver.ts
+++ b/src/app/features/room/SmallWidgetDriver.ts
@@ -1,3 +1,10 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ * Copyright 2020-2023 The Matrix.org Foundation C.I.C.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
 import {
   type Capability,
   EventDirection,

From c7ea3f7e572e92dae026a1c3d879f847794efcce Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Tue, 22 Apr 2025 21:17:19 -0400
Subject: [PATCH 068/242] The code reuse is substantial enough to justify
 including the license

---
 src/app/features/room/SmallWidget.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/app/features/room/SmallWidget.ts b/src/app/features/room/SmallWidget.ts
index 20449519..475de959 100644
--- a/src/app/features/room/SmallWidget.ts
+++ b/src/app/features/room/SmallWidget.ts
@@ -1,3 +1,11 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ * Copyright 2020-2023 The Matrix.org Foundation C.I.C.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
 import EventEmitter from 'events';
 import {
   ClientEvent,

From a4af96b5301ba235899f7e9eb97c09cc85ecdbba Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Tue, 22 Apr 2025 21:33:17 -0400
Subject: [PATCH 069/242] Fix DM header since it *can* be a call room

---
 src/app/features/room/RoomViewHeader.tsx | 41 ++++++++++++------------
 1 file changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index e6b72a29..8df29312 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -239,7 +239,7 @@ export function RoomViewHeader() {
     const mDirectsEvent = mx.getAccountData('m.direct');
     const { roomId } = room;
     return (
-      Object.values(mDirectsEvent?.event.content).filter((e) => {
+      Object.values(mDirectsEvent?.event?.content).filter((e) => {
         if (e.indexOf(roomId) === 0) return true;
       }).length !== 0
     );
@@ -341,7 +341,25 @@ export function RoomViewHeader() {
             )}
           </Box>
         </Box>
-        {room.isCallRoom && (
+        {(room.isCallRoom() && (
+          <Box>
+            <TooltipProvider
+              position="Bottom"
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  <Text>Chat</Text>
+                </Tooltip>
+              }
+            >
+              {(triggerRef) => (
+                <IconButton ref={triggerRef} onClick={toggleChat}>
+                  <Icon size="400" src={Icons.Message} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          </Box>
+        )) || (
           <Box shrink="No">
             {isDirectMessage() && (
               <TooltipProvider
@@ -490,25 +508,6 @@ export function RoomViewHeader() {
             />
           </Box>
         )}
-        {room.isCallRoom() && (
-          <Box>
-            <TooltipProvider
-              position="Bottom"
-              offset={4}
-              tooltip={
-                <Tooltip>
-                  <Text>Chat</Text>
-                </Tooltip>
-              }
-            >
-              {(triggerRef) => (
-                <IconButton ref={triggerRef} onClick={toggleChat}>
-                  <Icon size="400" src={Icons.Message} />
-                </IconButton>
-              )}
-            </TooltipProvider>
-          </Box>
-        )}
       </Box>
     </PageHeader>
   );

From f7fb4bcc110dc4de1327101b6e65d53444c9b340 Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Tue, 22 Apr 2025 21:35:04 -0400
Subject: [PATCH 070/242] Remove chat open icon from DMs

---
 src/app/features/room/RoomViewHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 8df29312..fc9a876d 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -341,7 +341,7 @@ export function RoomViewHeader() {
             )}
           </Box>
         </Box>
-        {(room.isCallRoom() && (
+        {(room.isCallRoom() && !isDirectMessage() && (
           <Box>
             <TooltipProvider
               position="Bottom"

From c8790a5284ef6b3442b3be8760366d09599e1201 Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Tue, 22 Apr 2025 22:29:07 -0400
Subject: [PATCH 071/242] Fix syntaxical mistake causing chat open state to
 never update

---
 src/app/pages/client/CallProvider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
index 960a3a1c..aa5a3316 100644
--- a/src/app/pages/client/CallProvider.tsx
+++ b/src/app/pages/client/CallProvider.tsx
@@ -238,7 +238,7 @@ export function CallProvider({ children }: CallProviderProps) {
 
   const toggleChat = useCallback(async () => {
     const newState = !isChatOpen;
-    setIsChatOpenState(!newState);
+    setIsChatOpenState(newState);
   }, [isChatOpen]);
 
   const contextValue = useMemo<CallContextState>(

From 669146754552e2a06f2f1f8b74edc39e8c2b461f Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Tue, 22 Apr 2025 22:29:43 -0400
Subject: [PATCH 072/242] Enable chat toggle for call rooms (still needs
 cleaner UI, but works as intended)

---
 .../pages/call/PersistentCallContainer.tsx    | 28 +++++++++++++++----
 1 file changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index 116a9176..66986f08 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -21,18 +21,22 @@ import { useClientConfig } from '../../hooks/useClientConfig';
 import { RoomView } from '../../features/room/RoomView';
 import { useParams } from 'react-router-dom';
 import { PowerLevelsContainer } from './PowerLevelsContainer';
+import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 
 interface PersistentCallContainerProps {
   isVisible: boolean;
 }
 
 export function PersistentCallContainer({ isVisible }: PersistentCallContainerProps) {
-  const { activeCallRoomId, setActiveCallRoomId, registerActiveTransport } = useCallState();
+  const { activeCallRoomId, isChatOpen, setActiveCallRoomId, registerActiveTransport } =
+    useCallState();
   const { eventId } = useParams();
   const mx = useMatrixClient();
   const roomId = useSelectedRoom();
   const clientConfig = useClientConfig();
   const room = mx.getRoom(roomId) ?? null;
+  const screenSize = useScreenSizeContext();
+  const isMobile = screenSize === ScreenSize.Mobile;
 
   logger.info(room);
 
@@ -167,7 +171,14 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
 
         <Box
           direction="Column"
-          style={{ position: 'relative', height: '100%', width: '100%', overflow: 'hidden' }}
+          style={{
+            position: 'relative',
+            overflow: 'hidden',
+            zIndex: 0,
+            display: isMobile && isChatOpen ? 'none' : 'flex',
+            width: isMobile && isChatOpen ? '0%' : '100%',
+            height: isMobile && isChatOpen ? '0%' : '100%',
+          }}
         >
           {activeCallRoomId && roomId && room !== null && (
             <Box direction="Column" style={{ width: '100%' }}>
@@ -176,13 +187,19 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
               </PowerLevelsContainer>
             </Box>
           )}
-          <Box grow="Yes" style={{ position: 'relative' }}>
+          <Box
+            grow="Yes"
+            style={{
+              position: 'relative',
+            }}
+          >
             <iframe
               ref={iframeRef}
               style={{
                 position: 'absolute',
                 top: 0,
                 left: 0,
+                //               display: isMobile && isChatOpen ? 'none' : 'flex',
                 width: '100%',
                 height: '100%',
                 border: 'none',
@@ -194,8 +211,9 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
             />
           </Box>
         </Box>
-        <Box direction="Column" style={{ position: 'relative' }}>
-          {false && activeCallRoomId && roomId && room !== null && (
+        <Box grow="Yes" direction="Column" style={{ position: 'relative' }}>
+          {/* Mobile should remove the iframe visibility when chat is toggled */}
+          {isChatOpen && activeCallRoomId && roomId && room !== null && (
             <PowerLevelsContainer>
               <RoomView room={room} eventId={eventId} />
             </PowerLevelsContainer>

From 39d4eedb759e0893a099a98e698ceea1c430f4ac Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Tue, 22 Apr 2025 22:30:48 -0400
Subject: [PATCH 073/242] Disable DM calling button for now (not implemented
 properly yet)

---
 src/app/features/room/RoomViewHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index fc9a876d..df8ca4ab 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -361,7 +361,7 @@ export function RoomViewHeader() {
           </Box>
         )) || (
           <Box shrink="No">
-            {isDirectMessage() && (
+            {false && isDirectMessage() && (
               <TooltipProvider
                 position="Bottom"
                 align="End"

From d6ffac74a78f79628a4b66290028235451276c45 Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Tue, 22 Apr 2025 22:34:25 -0400
Subject: [PATCH 074/242] Set mic default state to be generally accurate (need
 to set state from widget info at start instead)

---
 src/app/pages/client/CallProvider.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
index aa5a3316..f7962618 100644
--- a/src/app/pages/client/CallProvider.tsx
+++ b/src/app/pages/client/CallProvider.tsx
@@ -43,7 +43,7 @@ interface CallProviderProps {
   children: ReactNode;
 }
 
-const DEFAULT_AUDIO_ENABLED = false;
+const DEFAULT_AUDIO_ENABLED = true;
 const DEFAULT_VIDEO_ENABLED = false;
 const DEFAULT_CHAT_OPENED = false;
 

From b5ca54d6fd8eff03de81313f36b1b12e19d01cbb Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Sun, 27 Apr 2025 16:48:35 -0500
Subject: [PATCH 075/242] Prevents undefined object from being checked for
 values and filtered against

---
 src/app/features/room/RoomViewHeader.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index df8ca4ab..ea57f2ba 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -237,6 +237,9 @@ export function RoomViewHeader() {
   // I assume there is a global state so I don't have to run this check every time but for now we'll stub this in
   const isDirectMessage = () => {
     const mDirectsEvent = mx.getAccountData('m.direct');
+    if (mDirectsEvent?.event?.content === undefined) {
+      return false;
+    }
     const { roomId } = room;
     return (
       Object.values(mDirectsEvent?.event?.content).filter((e) => {

From 1e8a69ff235807f109b55099b873b83ee5819e2e Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Tue, 29 Apr 2025 15:26:48 -0500
Subject: [PATCH 076/242] update references to transport to clientwidgetapi (as
 transport is a child object of)

---
 src/app/pages/call/PersistentCallContainer.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index 66986f08..a15629e1 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -28,7 +28,7 @@ interface PersistentCallContainerProps {
 }
 
 export function PersistentCallContainer({ isVisible }: PersistentCallContainerProps) {
-  const { activeCallRoomId, isChatOpen, setActiveCallRoomId, registerActiveTransport } =
+  const { activeCallRoomId, isChatOpen, setActiveCallRoomId, registerActiveClientWidgetApi } =
     useCallState();
   const { eventId } = useParams();
   const mx = useMatrixClient();
@@ -57,7 +57,7 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
      * Might also be able to keep the iframe alive and instead navigate to a new "room" to make the transition smoother
      */
     const cleanup = () => {
-      logger.error(`PersistentCallContainer: Cleaning up for previous room: ${cleanupRoomId}`);
+      logger.error(`CallContext: Cleaning up for previous room: ${cleanupRoomId}`);
 
       if (smallWidgetRef.current) {
         // smallWidgetRef.current.stopMessaging();
@@ -68,12 +68,17 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
       }
       widgetApiRef.current = null;
       smallWidgetRef.current = null;
+      //hangUp();
       if (iframeRef.current) iframeRef.current.src = 'about:blank';
     };
 
     if (activeCallRoomId && mx?.getUserId()) {
       if (cleanupRoomId !== activeCallRoomId) {
-        const newUrl = getWidgetUrl(mx, roomId, clientConfig.elementCallUrl ?? '');
+        const newUrl = getWidgetUrl(mx, roomId, clientConfig.elementCallUrl ?? '', {
+          skipLobby: 'true',
+          returnToLobby: 'true',
+          perParticipentE2EE: 'true',
+        });
 
         if (iframeRef.current && iframeRef.current.src !== newUrl.toString()) {
           logger.info(
@@ -116,7 +121,7 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
         try {
           const widgetApiInstance = smallWidget.startMessaging(iframeElement);
           widgetApiRef.current = widgetApiInstance;
-          registerActiveTransport(activeCallRoomId, widgetApiRef.current.transport);
+          registerActiveClientWidgetApi(activeCallRoomId, widgetApiRef.current);
           widgetApiInstance.once('ready', () => {
             logger.info(`PersistentCallContainer: Widget for ${activeCallRoomId} is ready.`);
           });
@@ -135,7 +140,6 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
         cleanup();
       }
     }
-
     return cleanup;
   }, [activeCallRoomId, mx, setActiveCallRoomId]);
 
@@ -212,7 +216,6 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
           </Box>
         </Box>
         <Box grow="Yes" direction="Column" style={{ position: 'relative' }}>
-          {/* Mobile should remove the iframe visibility when chat is toggled */}
           {isChatOpen && activeCallRoomId && roomId && room !== null && (
             <PowerLevelsContainer>
               <RoomView room={room} eventId={eventId} />

From e76664083dfc19df2ea9e96856e817afda46f20f Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Tue, 29 Apr 2025 15:28:13 -0500
Subject: [PATCH 077/242] Update transport refs to allow us to properly bind
 listeners for media state and hangup

---
 src/app/pages/client/CallProvider.tsx | 136 +++++++++++++++-----------
 1 file changed, 78 insertions(+), 58 deletions(-)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
index f7962618..f6f8fd16 100644
--- a/src/app/pages/client/CallProvider.tsx
+++ b/src/app/pages/client/CallProvider.tsx
@@ -8,23 +8,28 @@ import React, {
   useEffect,
 } from 'react';
 import { logger } from 'matrix-js-sdk/lib/logger';
-import { WidgetApiToWidgetAction, ITransport, WidgetApiAction } from 'matrix-widget-api';
+import { WidgetApiToWidgetAction, WidgetApiAction, ClientWidgetApi } from 'matrix-widget-api';
 
 interface MediaStatePayload {
-  audio_enabled?: boolean;
-  video_enabled?: boolean;
+  data?: {
+    audio_enabled?: boolean;
+    video_enabled?: boolean;
+  };
 }
 
 const WIDGET_MEDIA_STATE_UPDATE_ACTION = 'io.element.device_mute';
-const WIDGET_HANGUP_ACTION = 'io.element.hangup';
+const WIDGET_HANGUP_ACTION = 'im.vector.hangup';
 const SET_MEDIA_STATE_ACTION = 'io.element.device_mute';
 
 interface CallContextState {
   activeCallRoomId: string | null;
   setActiveCallRoomId: (roomId: string | null) => void;
   hangUp: () => void;
-  activeApiTransport: ITransport | null;
-  registerActiveTransport: (roomId: string | null, transport: ITransport | null) => void;
+  activeClientWidgetApi: ClientWidgetApi | null;
+  registerActiveClientWidgetApi: (
+    roomId: string | null,
+    clientWidgetApi: ClientWidgetApi | null
+  ) => void;
   sendWidgetAction: <T = unknown>(
     action: WidgetApiToWidgetAction | string,
     data: T
@@ -49,8 +54,10 @@ const DEFAULT_CHAT_OPENED = false;
 
 export function CallProvider({ children }: CallProviderProps) {
   const [activeCallRoomId, setActiveCallRoomIdState] = useState<string | null>(null);
-  const [activeApiTransport, setActiveApiTransportState] = useState<ITransport | null>(null);
-  const [transportRoomId, setTransportRoomId] = useState<string | null>(null);
+  const [activeClientWidgetApi, setActiveClientWidgetApiState] = useState<ClientWidgetApi | null>(
+    null
+  );
+  const [clientWidgetApiRoomId, setClientWidgetApiRoomId] = useState<string | null>(null);
 
   const [isAudioEnabled, setIsAudioEnabledState] = useState<boolean>(DEFAULT_AUDIO_ENABLED);
   const [isVideoEnabled, setIsVideoEnabledState] = useState<boolean>(DEFAULT_VIDEO_ENABLED);
@@ -74,61 +81,70 @@ export function CallProvider({ children }: CallProviderProps) {
         resetMediaState();
       }
 
-      if (roomId === null || roomId !== transportRoomId) {
+      if (roomId === null || roomId !== clientWidgetApiRoomId) {
         logger.warn(
-          `CallContext: Clearing active transport because active room changed to ${roomId} or was cleared.`
+          `CallContext: Clearing active clientWidgetApi because active room changed to ${roomId} or was cleared.`
         );
-        setActiveApiTransportState(null);
-        setTransportRoomId(null);
+        setActiveClientWidgetApiState(null);
+        setClientWidgetApiRoomId(null);
       }
     },
-    [transportRoomId, resetMediaState, activeCallRoomId]
+    [clientWidgetApiRoomId, resetMediaState, activeCallRoomId]
   );
 
   const hangUp = useCallback(() => {
     logger.debug(`CallContext: Hang up called.`);
+    activeClientWidgetApi?.transport.send(`action:${WIDGET_HANGUP_ACTION}`, {});
     setActiveCallRoomIdState(null);
-    logger.debug(`CallContext: Clearing active transport due to hangup.`);
-    setActiveApiTransportState(null);
-    setTransportRoomId(null);
+    logger.debug(`CallContext: Clearing active clientWidgetApi due to hangup.`);
+    setActiveClientWidgetApiState(null);
+    setClientWidgetApiRoomId(null);
     resetMediaState();
   }, [resetMediaState]);
 
-  const setActiveTransport = useCallback((transport: ITransport | null, roomId: string | null) => {
-    setActiveApiTransportState(transport);
-    setTransportRoomId(roomId);
-  }, []);
+  const setActiveClientWidgetApi = useCallback(
+    (clientWidgetApi: ClientWidgetApi | null, roomId: string | null) => {
+      setActiveClientWidgetApiState(clientWidgetApi);
+      setClientWidgetApiRoomId(roomId);
+    },
+    []
+  );
 
-  const registerActiveTransport = useCallback(
-    (roomId: string | null, transport: ITransport | null) => {
-      if (activeApiTransport && activeApiTransport !== transport) {
-        logger.debug(`CallContext: Cleaning up listeners for previous transport instance.`);
+  const registerActiveClientWidgetApi = useCallback(
+    (roomId: string | null, clientWidgetApi: ClientWidgetApi | null) => {
+      if (activeClientWidgetApi && activeClientWidgetApi !== clientWidgetApi) {
+        logger.debug(`CallContext: Cleaning up listeners for previous clientWidgetApi instance.`);
       }
 
-      if (roomId && transport) {
-        logger.debug(`CallContext: Registering active transport for room ${roomId}.`);
-        setActiveTransport(transport, roomId);
-      } else if (roomId === transportRoomId || roomId === null) {
-        logger.debug(`CallContext: Clearing active transport for room ${transportRoomId}.`);
-        setActiveTransport(null, null);
+      if (roomId && clientWidgetApi) {
+        logger.debug(`CallContext: Registering active clientWidgetApi for room ${roomId}.`);
+        setActiveClientWidgetApi(clientWidgetApi, roomId);
+      } else if (roomId === clientWidgetApiRoomId || roomId === null) {
+        logger.debug(
+          `CallContext: Clearing active clientWidgetApi for room ${clientWidgetApiRoomId}.`
+        );
+        setActiveClientWidgetApi(null, null);
         resetMediaState();
       } else {
         logger.debug(
-          `CallContext: Ignoring transport registration/clear request for room ${roomId}, as current transport belongs to ${transportRoomId}.`
+          `CallContext: Ignoring clientWidgetApi registration/clear request for room ${roomId}, as current clientWidgetApi belongs to ${clientWidgetApiRoomId}.`
         );
       }
     },
-    [activeApiTransport, transportRoomId, setActiveTransport, resetMediaState]
+    [activeClientWidgetApi, clientWidgetApiRoomId, setActiveClientWidgetApi, resetMediaState]
   );
 
   useEffect(() => {
-    if (!activeApiTransport || !activeCallRoomId || transportRoomId !== activeCallRoomId) {
+    if (!activeClientWidgetApi || !activeCallRoomId || clientWidgetApiRoomId !== activeCallRoomId) {
       return;
     }
 
-    const transport = activeApiTransport;
+    const clientWidgetApi = activeClientWidgetApi;
 
     const handleHangup = (ev: CustomEvent) => {
+      ev.preventDefault();
+
+      clientWidgetApi.transport.reply(ev.detail, {});
       logger.warn(
         `CallContext: Received hangup action from widget in room ${activeCallRoomId}.`,
         ev
@@ -142,7 +158,7 @@ export function CallProvider({ children }: CallProviderProps) {
         `CallContext: Received media state update from widget in room ${activeCallRoomId}:`,
         ev.detail
       );
-      const { audio_enabled, video_enabled } = ev.detail;
+      const { audio_enabled, video_enabled } = ev.detail.data;
       if (typeof audio_enabled === 'boolean' && audio_enabled !== isAudioEnabled) {
         logger.debug(`CallContext: Updating audio enabled state from widget: ${audio_enabled}`);
         setIsAudioEnabledState(audio_enabled);
@@ -153,21 +169,25 @@ export function CallProvider({ children }: CallProviderProps) {
       }
     };
 
-    logger.debug(`CallContext: Setting up listeners for transport in room ${activeCallRoomId}`);
-    transport.on(`action:${WIDGET_HANGUP_ACTION}`, handleHangup); // Use standard hangup action name
-    transport.on(`action:${WIDGET_MEDIA_STATE_UPDATE_ACTION}`, handleMediaStateUpdate);
+    logger.debug(
+      `CallContext: Setting up listeners for clientWidgetApi in room ${activeCallRoomId}`
+    );
+    clientWidgetApi.on(`action:${WIDGET_HANGUP_ACTION}`, handleHangup); // Use standard hangup action name
+    clientWidgetApi.on(`action:${WIDGET_MEDIA_STATE_UPDATE_ACTION}`, handleMediaStateUpdate);
 
     return () => {
-      logger.debug(`CallContext: Cleaning up listeners for transport in room ${activeCallRoomId}`);
-      if (transport) {
-        transport.off(`action:${WIDGET_HANGUP_ACTION}`, handleHangup);
-        transport.off(`action:${WIDGET_MEDIA_STATE_UPDATE_ACTION}`, handleMediaStateUpdate);
+      logger.debug(
+        `CallContext: Cleaning up listeners for clientWidgetApi in room ${activeCallRoomId}`
+      );
+      if (clientWidgetApi) {
+        clientWidgetApi.off(`action:${WIDGET_HANGUP_ACTION}`, handleHangup);
+        clientWidgetApi.off(`action:${WIDGET_MEDIA_STATE_UPDATE_ACTION}`, handleMediaStateUpdate);
       }
     };
   }, [
-    activeApiTransport,
+    activeClientWidgetApi,
     activeCallRoomId,
-    transportRoomId,
+    clientWidgetApiRoomId,
     hangUp,
     isChatOpen,
     isAudioEnabled,
@@ -176,30 +196,30 @@ export function CallProvider({ children }: CallProviderProps) {
 
   const sendWidgetAction = useCallback(
     async <T = unknown,>(action: WidgetApiToWidgetAction | string, data: T): Promise<void> => {
-      if (!activeApiTransport) {
+      if (!activeClientWidgetApi) {
         logger.warn(
-          `CallContext: Cannot send action '${action}', no active API transport registered.`
+          `CallContext: Cannot send action '${action}', no active API clientWidgetApi registered.`
         );
-        return Promise.reject(new Error('No active call transport'));
+        return Promise.reject(new Error('No active call clientWidgetApi'));
       }
-      if (!transportRoomId || transportRoomId !== activeCallRoomId) {
-        logger.warn(
-          `CallContext: Cannot send action '${action}', transport room (${transportRoomId}) does not match active call room (${activeCallRoomId}). Stale transport?`
+      if (!clientWidgetApiRoomId || clientWidgetApiRoomId !== activeCallRoomId) {
+        logger.debug(
+          `CallContext: Cannot send action '${action}', clientWidgetApi room (${clientWidgetApiRoomId}) does not match active call room (${activeCallRoomId}). Stale clientWidgetApi?`
         );
-        return Promise.reject(new Error('Mismatched active call transport'));
+        return Promise.reject(new Error('Mismatched active call clientWidgetApi'));
       }
       try {
         logger.debug(
-          `CallContext: Sending action '${action}' via active transport (room: ${transportRoomId}) with data:`,
+          `CallContext: Sending action '${action}' via active clientWidgetApi (room: ${clientWidgetApiRoomId}) with data:`,
           data
         );
-        await activeApiTransport.send<T>(action as WidgetApiAction, data);
+        await activeClientWidgetApi.transport.send(action as WidgetApiAction, data);
       } catch (error) {
         logger.error(`CallContext: Error sending action '${action}':`, error);
         throw error;
       }
     },
-    [activeApiTransport, activeCallRoomId, transportRoomId]
+    [activeClientWidgetApi, activeCallRoomId, clientWidgetApiRoomId]
   );
 
   const toggleAudio = useCallback(async () => {
@@ -246,8 +266,8 @@ export function CallProvider({ children }: CallProviderProps) {
       activeCallRoomId,
       setActiveCallRoomId,
       hangUp,
-      activeApiTransport,
-      registerActiveTransport,
+      activeClientWidgetApi,
+      registerActiveClientWidgetApi,
       sendWidgetAction,
       isChatOpen,
       isAudioEnabled,
@@ -260,8 +280,8 @@ export function CallProvider({ children }: CallProviderProps) {
       activeCallRoomId,
       setActiveCallRoomId,
       hangUp,
-      activeApiTransport,
-      registerActiveTransport,
+      activeClientWidgetApi,
+      registerActiveClientWidgetApi,
       sendWidgetAction,
       isChatOpen,
       isAudioEnabled,

From 8700fe84ab8944f090c9b49fe69db9aba9ea0824 Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Tue, 29 Apr 2025 15:29:02 -0500
Subject: [PATCH 078/242] Add some parameters to be settable (need to create an
 param object type instead of using any) in widgetUrl

---
 src/app/features/room/SmallWidget.ts | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/app/features/room/SmallWidget.ts b/src/app/features/room/SmallWidget.ts
index 475de959..976f67dd 100644
--- a/src/app/features/room/SmallWidget.ts
+++ b/src/app/features/room/SmallWidget.ts
@@ -36,7 +36,12 @@ import { SmallWidgetDriver } from './SmallWidgetDriver';
  * @param roomId - The ID of the room.
  * @returns The generated URL object.
  */
-export const getWidgetUrl = (mx: MatrixClient, roomId: string, elementCallUrl: string): URL => {
+export const getWidgetUrl = (
+  mx: MatrixClient,
+  roomId: string,
+  elementCallUrl: string,
+  setParams: any
+): URL => {
   const baseUrl = window.location.origin;
   const url =
     new URL(`${elementCallUrl}/room`) ?? new URL('./dist/element-call/dist/index.html', baseUrl);
@@ -48,10 +53,10 @@ export const getWidgetUrl = (mx: MatrixClient, roomId: string, elementCallUrl: s
     widgetId: `element-call-${roomId}`,
     appPrompt: 'false',
     preload: 'false',
-    skipLobby: 'true',
+    skipLobby: setParams.skipLobby ?? 'true',
     //intent: 'join_existing',
-    returnToLobby: 'true',
-    perParticipantE2EE: 'true',
+    returnToLobby: setParams.returnToLobby ?? 'true',
+    perParticipantE2EE: setParams.perParticipantE2EE ?? 'true',
     hideHeader: 'true',
     userId: mx.getUserId()!,
     deviceId: mx.getDeviceId()!,

From 4779b0987909fc3cc2c691c867b2caccedb89e0e Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Thu, 1 May 2025 12:48:35 -0500
Subject: [PATCH 079/242] Always embed to give a proper call room lobby
 experience

---
 src/app/features/room/SmallWidget.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room/SmallWidget.ts b/src/app/features/room/SmallWidget.ts
index 976f67dd..0b8a8acd 100644
--- a/src/app/features/room/SmallWidget.ts
+++ b/src/app/features/room/SmallWidget.ts
@@ -49,7 +49,7 @@ export const getWidgetUrl = (
   logger.error(url);
 
   const params = new URLSearchParams({
-    //embed: 'true',
+    embed: 'true',
     widgetId: `element-call-${roomId}`,
     appPrompt: 'false',
     preload: 'false',

From b4d9828017de82caa5631980d5a9c06122722f7e Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Thu, 1 May 2025 16:19:04 -0500
Subject: [PATCH 080/242] Add tooltips and properly implement the navlink

---
 src/app/pages/call/CallNavBottom.tsx | 129 ++++++++++++++++-----------
 1 file changed, 75 insertions(+), 54 deletions(-)

diff --git a/src/app/pages/call/CallNavBottom.tsx b/src/app/pages/call/CallNavBottom.tsx
index 79e7e7a0..d4fa8148 100644
--- a/src/app/pages/call/CallNavBottom.tsx
+++ b/src/app/pages/call/CallNavBottom.tsx
@@ -1,36 +1,15 @@
 import { logger } from 'matrix-js-sdk/lib/logger';
+import { NavLink, useParams } from 'react-router-dom';
+import { Box, Chip, Icon, IconButton, Icons, Text, Tooltip, TooltipProvider } from 'folds';
+import React from 'react';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useCallState } from '../client/CallProvider';
-import { Box, Chip, Icon, IconButton, Icons, Text } from 'folds';
-import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
-import {
-  makeMentionCustomProps,
-  renderMatrixMention,
-} from '../../plugins/react-custom-html-parser';
 
 export function CallNavBottom() {
-  const {
-    sendWidgetAction,
-    activeCallRoomId,
-    isAudioEnabled,
-    isVideoEnabled,
-    toggleAudio,
-    toggleVideo,
-    hangUp,
-  } = useCallState();
+  const { activeCallRoomId, isAudioEnabled, isVideoEnabled, toggleAudio, toggleVideo, hangUp } =
+    useCallState();
   const mx = useMatrixClient();
-  const userName = mx.getUser(mx.getUserId() ?? '')?.displayName ?? mx.getUserId() ?? 'User';
-
-  const handleSendMessageClick = () => {
-    const action = 'my.custom.action';
-    const data = { message: `Hello from ${userName}!` };
-    logger.debug(`FixedBottomNavArea: Sending action '${action}'`);
-    sendWidgetAction(action, data)
-      .then(() => logger.info(`FixedBottomNavArea: Action '${action}' sent.`))
-      .catch((err) => logger.error(`FixedBottomNavArea: Failed action '${action}':`, err));
-  };
-
-  const mentionClickHandler = useMentionClickHandler(activeCallRoomId ?? mx.getUserId());
+  const { roomIdOrAlias: viewedRoomId } = useParams<{ roomIdOrAlias: string }>();
 
   if (!activeCallRoomId) {
     return (
@@ -49,14 +28,6 @@ export function CallNavBottom() {
     );
   }
 
-  //Muted:{(!isAudioEnabled).toString()}
-  //Videosn't:{(!isVideoEnabled).toString()}
-  /*
-
-
-
-*/
-  const test = `https://matrix.to/#/${activeCallRoomId}`;
   return (
     <Box
       direction="Column"
@@ -68,27 +39,77 @@ export function CallNavBottom() {
     >
       <Box direction="Row" style={{ justifyContent: 'center' }}>
         {/* Going to need better icons for this */}
-        <IconButton onClick={toggleAudio}>
-          <Icon src={!isAudioEnabled ? Icons.VolumeHigh : Icons.VolumeMute} />
-        </IconButton>
-        <IconButton onClick={toggleVideo}>
-          <Icon src={!isVideoEnabled ? Icons.Vlc : Icons.Lock}></Icon>
-        </IconButton>
-        <IconButton onClick={hangUp}>
-          <Icon src={Icons.Phone}></Icon>
-        </IconButton>
+        <TooltipProvider
+          position="Top"
+          offset={4}
+          tooltip={
+            <Tooltip>
+              <Text>{!isAudioEnabled ? 'Unmute' : 'Mute'}</Text>
+            </Tooltip>
+          }
+        >
+          {(triggerRef) => (
+            <IconButton ref={triggerRef} onClick={toggleAudio}>
+              <Icon src={!isAudioEnabled ? Icons.VolumeHigh : Icons.VolumeMute} />
+            </IconButton>
+          )}
+        </TooltipProvider>
+        <TooltipProvider
+          position="Top"
+          offset={4}
+          tooltip={
+            <Tooltip>
+              <Text>{!isVideoEnabled ? 'Video on' : 'Video off'}</Text>
+            </Tooltip>
+          }
+        >
+          {(triggerRef) => (
+            <IconButton ref={triggerRef} onClick={toggleVideo}>
+              <Icon src={!isVideoEnabled ? Icons.Vlc : Icons.Lock} />
+            </IconButton>
+          )}
+        </TooltipProvider>
+
+        <TooltipProvider
+          position="Top"
+          offset={4}
+          tooltip={
+            <Tooltip>
+              <Text>Hang up</Text>
+            </Tooltip>
+          }
+        >
+          {(triggerRef) => (
+            <IconButton ref={triggerRef} onClick={hangUp}>
+              <Icon src={Icons.Phone} />
+            </IconButton>
+          )}
+        </TooltipProvider>
+
         <Box grow="Yes">
-          <Chip size="600">
-            {renderMatrixMention(
-              mx,
-              undefined,
-              test,
-              makeMentionCustomProps(
-                mentionClickHandler,
-                mx.getRoom(activeCallRoomId)?.normalizedName
+          <TooltipProvider
+            position="Top"
+            offset={4}
+            tooltip={
+              <Tooltip>
+                <Text>Go to room</Text>
+              </Tooltip>
+            }
+          >
+            {(triggerRef) =>
+              viewedRoomId !== (activeCallRoomId ?? '') ? (
+                <NavLink ref={triggerRef} to={activeCallRoomId}>
+                  <Chip radii="Inherit" size="500" fill="Soft">
+                    {mx.getRoom(activeCallRoomId)?.normalizedName}
+                  </Chip>
+                </NavLink>
+              ) : (
+                <Chip ref={triggerRef} radii="Inherit" size="500" fill="Soft">
+                  {mx.getRoom(activeCallRoomId)?.normalizedName}
+                </Chip>
               )
-            )}
-          </Chip>
+            }
+          </TooltipProvider>
         </Box>
       </Box>
     </Box>

From ec741423c7b8b8efe07e4984ea2b2a00da10426c Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Thu, 1 May 2025 16:24:36 -0500
Subject: [PATCH 081/242] add join, screen_state, and hang up handling as well
 as logging state based on join + hang up actions

---
 src/app/pages/client/CallProvider.tsx | 36 ++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
index f6f8fd16..ca955d73 100644
--- a/src/app/pages/client/CallProvider.tsx
+++ b/src/app/pages/client/CallProvider.tsx
@@ -9,6 +9,8 @@ import React, {
 } from 'react';
 import { logger } from 'matrix-js-sdk/lib/logger';
 import { WidgetApiToWidgetAction, WidgetApiAction, ClientWidgetApi } from 'matrix-widget-api';
+import { useParams } from 'react-router-dom';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 interface MediaStatePayload {
   data?: {
@@ -19,7 +21,8 @@ interface MediaStatePayload {
 
 const WIDGET_MEDIA_STATE_UPDATE_ACTION = 'io.element.device_mute';
 const WIDGET_HANGUP_ACTION = 'im.vector.hangup';
-const SET_MEDIA_STATE_ACTION = 'io.element.device_mute';
+const WIDGET_ON_SCREEN_ACTION = 'set_always_on_screen';
+const WIDGET_JOIN_ACTION = 'io.element.join';
 
 interface CallContextState {
   activeCallRoomId: string | null;
@@ -37,6 +40,7 @@ interface CallContextState {
   isAudioEnabled: boolean;
   isVideoEnabled: boolean;
   isChatOpen: boolean;
+  isCallActive: boolean;
   toggleAudio: () => Promise<void>;
   toggleVideo: () => Promise<void>;
   toggleChat: () => Promise<void>;
@@ -51,6 +55,7 @@ interface CallProviderProps {
 const DEFAULT_AUDIO_ENABLED = true;
 const DEFAULT_VIDEO_ENABLED = false;
 const DEFAULT_CHAT_OPENED = false;
+const DEFAULT_CALL_ACTIVE = false;
 
 export function CallProvider({ children }: CallProviderProps) {
   const [activeCallRoomId, setActiveCallRoomIdState] = useState<string | null>(null);
@@ -62,6 +67,11 @@ export function CallProvider({ children }: CallProviderProps) {
   const [isAudioEnabled, setIsAudioEnabledState] = useState<boolean>(DEFAULT_AUDIO_ENABLED);
   const [isVideoEnabled, setIsVideoEnabledState] = useState<boolean>(DEFAULT_VIDEO_ENABLED);
   const [isChatOpen, setIsChatOpenState] = useState<boolean>(DEFAULT_CHAT_OPENED);
+  const [isCallActive, setIsCallActive] = useState<boolean>(DEFAULT_CALL_ACTIVE);
+
+  const { roomIdOrAlias: viewedRoomId } = useParams<{ roomIdOrAlias: string }>();
+  const mx = useMatrixClient();
+  const room = mx.getRoom(viewedRoomId);
 
   const resetMediaState = useCallback(() => {
     logger.debug('CallContext: Resetting media state to defaults.');
@@ -94,7 +104,7 @@ export function CallProvider({ children }: CallProviderProps) {
 
   const hangUp = useCallback(() => {
     logger.debug(`CallContext: Hang up called.`);
-    activeClientWidgetApi?.transport.send(`action:${WIDGET_HANGUP_ACTION}`, {});
+    // activeClientWidgetApi?.transport.send(`action:${WIDGET_HANGUP_ACTION}`, {});
     setActiveCallRoomIdState(null);
     logger.debug(`CallContext: Clearing active clientWidgetApi due to hangup.`);
     setActiveClientWidgetApiState(null);
@@ -149,7 +159,8 @@ export function CallProvider({ children }: CallProviderProps) {
         `CallContext: Received hangup action from widget in room ${activeCallRoomId}.`,
         ev
       );
-      hangUp();
+      setIsCallActive(false);
+      // hangUp();
     };
 
     const handleMediaStateUpdate = (ev: CustomEvent<MediaStatePayload>) => {
@@ -169,11 +180,23 @@ export function CallProvider({ children }: CallProviderProps) {
       }
     };
 
+    const handleOnScreenStateUpdate = (ev: CustomEvent) => {
+      ev.preventDefault();
+      activeClientWidgetApi.transport.reply(ev.detail, {});
+    };
+
+    const handleJoin = (ev: CustomEvent) => {
+      ev.preventDefault();
+      setIsCallActive(true);
+    };
+
     logger.debug(
       `CallContext: Setting up listeners for clientWidgetApi in room ${activeCallRoomId}`
     );
-    clientWidgetApi.on(`action:${WIDGET_HANGUP_ACTION}`, handleHangup); // Use standard hangup action name
+    clientWidgetApi.on(`action:${WIDGET_HANGUP_ACTION}`, handleHangup);
     clientWidgetApi.on(`action:${WIDGET_MEDIA_STATE_UPDATE_ACTION}`, handleMediaStateUpdate);
+    clientWidgetApi.on(`action:${WIDGET_ON_SCREEN_ACTION}`, handleOnScreenStateUpdate);
+    clientWidgetApi.on(`action:${WIDGET_JOIN_ACTION}`, handleJoin);
 
     return () => {
       logger.debug(
@@ -192,6 +215,7 @@ export function CallProvider({ children }: CallProviderProps) {
     isChatOpen,
     isAudioEnabled,
     isVideoEnabled,
+    isCallActive,
   ]);
 
   const sendWidgetAction = useCallback(
@@ -227,7 +251,7 @@ export function CallProvider({ children }: CallProviderProps) {
     logger.debug(`CallContext: Toggling audio. New state: enabled=${newState}`);
     setIsAudioEnabledState(newState);
     try {
-      await sendWidgetAction(SET_MEDIA_STATE_ACTION, {
+      await sendWidgetAction(WIDGET_MEDIA_STATE_UPDATE_ACTION, {
         audio_enabled: newState,
         video_enabled: isVideoEnabled,
       });
@@ -244,7 +268,7 @@ export function CallProvider({ children }: CallProviderProps) {
     logger.debug(`CallContext: Toggling video. New state: enabled=${newState}`);
     setIsVideoEnabledState(newState);
     try {
-      await sendWidgetAction(SET_MEDIA_STATE_ACTION, {
+      await sendWidgetAction(WIDGET_MEDIA_STATE_UPDATE_ACTION, {
         audio_enabled: isAudioEnabled,
         video_enabled: newState,
       });

From a5551909c1f1c87f8ea8a4569cf8d97f7bc30dd7 Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Thu, 1 May 2025 16:33:39 -0500
Subject: [PATCH 082/242] Activate when active call state is false

---
 src/app/pages/call/CallActivation.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/pages/call/CallActivation.tsx b/src/app/pages/call/CallActivation.tsx
index 7e8f4580..04461824 100644
--- a/src/app/pages/call/CallActivation.tsx
+++ b/src/app/pages/call/CallActivation.tsx
@@ -7,7 +7,7 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 export function CallActivationEffect() {
   const { roomIdOrAlias: viewedRoomId } = useParams<{ roomIdOrAlias: string }>();
-  const { activeCallRoomId, setActiveCallRoomId } = useCallState();
+  const { activeCallRoomId, isCallActive, setActiveCallRoomId } = useCallState();
   const mx = useMatrixClient();
   const room = mx.getRoom(viewedRoomId);
 
@@ -20,7 +20,7 @@ export function CallActivationEffect() {
     const isViewingCallRoom = room?.isCallRoom?.() ?? false;
 
     if (isViewingCallRoom) {
-      if (viewedRoomId !== activeCallRoomId) {
+      if (viewedRoomId !== activeCallRoomId && !isCallActive) {
         logger.info(`CallActivationEffect: Auto-activating call for viewed room: ${viewedRoomId}`);
         setActiveCallRoomId(viewedRoomId);
       } else {
@@ -29,7 +29,7 @@ export function CallActivationEffect() {
         );
       }
     }
-  }, [viewedRoomId, activeCallRoomId, setActiveCallRoomId, mx, room]);
+  }, [viewedRoomId, activeCallRoomId, setActiveCallRoomId, isCallActive, mx, room]);
 
   return null;
 }

From 7ce3b40037a14e8669deb8b04313be433eae9e8c Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Thu, 1 May 2025 16:56:47 -0500
Subject: [PATCH 083/242] Add call room icon (needs variations based on join
 rules)

---
 src/app/utils/room.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/app/utils/room.ts b/src/app/utils/room.ts
index 3bf8cd5a..f603b39c 100644
--- a/src/app/utils/room.ts
+++ b/src/app/utils/room.ts
@@ -256,19 +256,20 @@ export const getUnreadInfos = (mx: MatrixClient): UnreadInfo[] => {
 export const joinRuleToIconSrc = (
   icons: Record<IconName, IconSrc>,
   joinRule: JoinRule,
-  space: boolean
+  space: boolean,
+  call: boolean
 ): IconSrc | undefined => {
   if (joinRule === JoinRule.Restricted) {
-    return space ? icons.Space : icons.Hash;
+    return space ? icons.Space : call ? icons.VolumeHigh : icons.Hash;
   }
   if (joinRule === JoinRule.Knock) {
-    return space ? icons.SpaceLock : icons.HashLock;
+    return space ? icons.SpaceLock : call ? icons.VolumeHigh : icons.HashLock;
   }
   if (joinRule === JoinRule.Invite) {
-    return space ? icons.SpaceLock : icons.HashLock;
+    return space ? icons.SpaceLock : call ? icons.VolumeHigh : icons.HashLock;
   }
   if (joinRule === JoinRule.Public) {
-    return space ? icons.SpaceGlobe : icons.HashGlobe;
+    return space ? icons.SpaceGlobe : call ? icons.VolumeHigh : icons.HashGlobe;
   }
   return undefined;
 };

From 8c6a6265eb4809b882b72f6b015ad72504969d2e Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Thu, 1 May 2025 16:56:58 -0500
Subject: [PATCH 084/242] add call as a param to pass

---
 src/app/components/room-avatar/RoomAvatar.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/components/room-avatar/RoomAvatar.tsx b/src/app/components/room-avatar/RoomAvatar.tsx
index 23f3998d..60de8346 100644
--- a/src/app/components/room-avatar/RoomAvatar.tsx
+++ b/src/app/components/room-avatar/RoomAvatar.tsx
@@ -46,10 +46,11 @@ export const RoomIcon = forwardRef<
   Omit<ComponentProps<typeof Icon>, 'src'> & {
     joinRule: JoinRule;
     space?: boolean;
+    call?: boolean;
   }
->(({ joinRule, space, ...props }, ref) => (
+>(({ joinRule, space, call, ...props }, ref) => (
   <Icon
-    src={joinRuleToIconSrc(Icons, joinRule, space || false) ?? Icons.Hash}
+    src={joinRuleToIconSrc(Icons, joinRule, space || false, call || false) ?? Icons.Hash}
     {...props}
     ref={ref}
   />

From 96be8e1b8a826718c8ff25bdd2ef40e1ba5ae8a4 Mon Sep 17 00:00:00 2001
From: GigiaJ <gigiaboone@yahoo.com>
Date: Thu, 1 May 2025 16:57:28 -0500
Subject: [PATCH 085/242] add chat button handling for call rooms and impl call
 room icon

---
 src/app/features/room-nav/RoomNavItem.tsx | 34 ++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index bdb81418..17badd2e 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -16,13 +16,15 @@ import {
   RectCords,
   Badge,
   Spinner,
+  Tooltip,
+  TooltipProvider,
 } from 'folds';
 import { useFocusWithin, useHover } from 'react-aria';
 import FocusTrap from 'focus-trap-react';
 import { NavItem, NavItemContent, NavItemOptions, NavLink } from '../../components/nav';
 import { UnreadBadge, UnreadBadgeCenter } from '../../components/unread-badge';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
-import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
+import { getDirectRoomAvatarUrl, getRoomAvatarUrl, isSpace } from '../../utils/room';
 import { nameInitials } from '../../utils/common';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomUnread } from '../../state/hooks/unread';
@@ -49,6 +51,7 @@ import {
   RoomNotificationMode,
 } from '../../hooks/useRoomsNotificationPreferences';
 import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
+import { useCallState } from '../../pages/client/CallProvider';
 
 type RoomNavItemMenuProps = {
   room: Room;
@@ -217,6 +220,7 @@ export function RoomNavItem({
   const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
+  const { isChatOpen, toggleChat } = useCallState();
   const typingMember = useRoomTypingMember(room.roomId).filter(
     (receipt) => receipt.userId !== mx.getUserId()
   );
@@ -273,6 +277,7 @@ export function RoomNavItem({
                   filled={selected}
                   size="100"
                   joinRule={room.getJoinRule()}
+                  call={room.isCallRoom()}
                 />
               )}
             </Avatar>
@@ -325,6 +330,33 @@ export function RoomNavItem({
               </FocusTrap>
             }
           >
+            {room.isCallRoom() && (
+              <TooltipProvider
+                position="Bottom"
+                offset={4}
+                tooltip={
+                  <Tooltip>
+                    <Text>Open chat</Text>
+                  </Tooltip>
+                }
+              >
+                {(triggerRef) => (
+                  <IconButton
+                    ref={triggerRef}
+                    onClick={isChatOpen !== true ? toggleChat : undefined}
+                    aria-pressed={!!menuAnchor}
+                    variant="Background"
+                    fill="None"
+                    size="300"
+                    radii="300"
+                  >
+                    <NavLink to={linkPath}>
+                      <Icon size="50" src={Icons.Message} />
+                    </NavLink>
+                  </IconButton>
+                )}
+              </TooltipProvider>
+            )}
             <IconButton
               onClick={handleOpenMenu}
               aria-pressed={!!menuAnchor}

From 8038c2ac8b9a5e79ba8593c643f3b52b924acf66 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 2 May 2025 02:35:51 -0500
Subject: [PATCH 086/242] add isCallActive to memo

---
 src/app/pages/client/CallProvider.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
index ca955d73..d178774d 100644
--- a/src/app/pages/client/CallProvider.tsx
+++ b/src/app/pages/client/CallProvider.tsx
@@ -296,6 +296,7 @@ export function CallProvider({ children }: CallProviderProps) {
       isChatOpen,
       isAudioEnabled,
       isVideoEnabled,
+      isCallActive,
       toggleAudio,
       toggleVideo,
       toggleChat,
@@ -310,6 +311,7 @@ export function CallProvider({ children }: CallProviderProps) {
       isChatOpen,
       isAudioEnabled,
       isVideoEnabled,
+      isCallActive,
       toggleAudio,
       toggleVideo,
       toggleChat,

From 7c6c1f53c010b357864d9cc670fa1c70edd6ff0b Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 2 May 2025 17:04:11 -0500
Subject: [PATCH 087/242] prep visibility for multi-iframes

---
 src/app/pages/client/ClientLayout.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/pages/client/ClientLayout.tsx b/src/app/pages/client/ClientLayout.tsx
index 35854deb..9aa431a8 100644
--- a/src/app/pages/client/ClientLayout.tsx
+++ b/src/app/pages/client/ClientLayout.tsx
@@ -3,6 +3,7 @@ import { Box } from 'folds';
 import { useParams } from 'react-router-dom';
 import { useCallState } from './CallProvider';
 import { PersistentCallContainer } from '../call/PersistentCallContainer';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 type ClientLayoutProps = {
   nav: ReactNode;
@@ -11,10 +12,9 @@ type ClientLayoutProps = {
 export function ClientLayout({ nav, children }: ClientLayoutProps) {
   const { activeCallRoomId } = useCallState();
   const { roomIdOrAlias: viewedRoomId } = useParams();
-  const isViewingActiveCall = useMemo(
-    () => activeCallRoomId !== null && activeCallRoomId === viewedRoomId,
-    [activeCallRoomId, viewedRoomId]
-  );
+  const mx = useMatrixClient();
+  const isCall = mx.getRoom(viewedRoomId)?.isCallRoom();
+
   return (
     <Box grow="Yes" direction="Row" style={{ height: '100vh', width: '100vw', overflow: 'hidden' }}>
       <Box shrink="No" className="nav-container-styles">
@@ -25,7 +25,7 @@ export function ClientLayout({ nav, children }: ClientLayoutProps) {
           <Box
             grow="Yes"
             style={{
-              display: isViewingActiveCall ? 'none' : 'flex',
+              display: isCall ? 'none' : 'flex',
               flexDirection: 'column',
               width: '100%',
               height: '100%',
@@ -34,7 +34,7 @@ export function ClientLayout({ nav, children }: ClientLayoutProps) {
           >
             {children}
           </Box>
-          <PersistentCallContainer isVisible={isViewingActiveCall} />
+          <PersistentCallContainer isVisible={isCall} viewedRoomId={viewedRoomId} />
         </Box>
       </Box>{' '}
     </Box>

From 93fbbecfdda99a0749d405b7402194eb47af76bf Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 2 May 2025 17:04:50 -0500
Subject: [PATCH 088/242] update to support two iframes - still needs to
 leverage balancing the two properly but as a PoC it works

---
 .../pages/call/PersistentCallContainer.tsx    | 70 ++++++++++++++-----
 1 file changed, 53 insertions(+), 17 deletions(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index a15629e1..679b722d 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { logger } from 'matrix-js-sdk/lib/logger';
 import { ClientWidgetApi, IWidgetApiRequest } from 'matrix-widget-api';
 import { Box } from 'folds';
@@ -25,11 +25,17 @@ import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 
 interface PersistentCallContainerProps {
   isVisible: boolean;
+  viewedRoomId: string;
 }
 
-export function PersistentCallContainer({ isVisible }: PersistentCallContainerProps) {
-  const { activeCallRoomId, isChatOpen, setActiveCallRoomId, registerActiveClientWidgetApi } =
-    useCallState();
+export function PersistentCallContainer({ isVisible, viewedRoomId }: PersistentCallContainerProps) {
+  const {
+    activeCallRoomId,
+    isChatOpen,
+    isCallActive,
+    setActiveCallRoomId,
+    registerActiveClientWidgetApi,
+  } = useCallState();
   const { eventId } = useParams();
   const mx = useMatrixClient();
   const roomId = useSelectedRoom();
@@ -37,6 +43,10 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
   const room = mx.getRoom(roomId) ?? null;
   const screenSize = useScreenSizeContext();
   const isMobile = screenSize === ScreenSize.Mobile;
+  const isViewingActiveCall = useMemo(
+    () => activeCallRoomId !== null && activeCallRoomId === viewedRoomId,
+    [activeCallRoomId, viewedRoomId]
+  );
 
   logger.info(room);
 
@@ -44,7 +54,11 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
   const widgetApiRef = useRef<ClientWidgetApi | null>(null);
   const smallWidgetRef = useRef<SmallWidget | null>(null);
 
-  useEffect(() => {
+  const backupIframeRef = useRef<HTMLIFrameElement | null>(null);
+  const backupWidgetApiRef = useRef<ClientWidgetApi | null>(null);
+  const backupSmallWidgetRef = useRef<SmallWidget | null>(null);
+
+  const setupWidget = (widgetApiRef, smallWidgetRef, iframeRef, skipLobby) => {
     const cleanupRoomId = smallWidgetRef.current?.roomId;
     logger.debug(`PersistentCallContainer effect running. activeCallRoomId: ${activeCallRoomId}`);
 
@@ -57,7 +71,7 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
      * Might also be able to keep the iframe alive and instead navigate to a new "room" to make the transition smoother
      */
     const cleanup = () => {
-      logger.error(`CallContext: Cleaning up for previous room: ${cleanupRoomId}`);
+      //logger.error(`CallContext: Cleaning up for previous room: ${cleanupRoomId}`);
 
       if (smallWidgetRef.current) {
         // smallWidgetRef.current.stopMessaging();
@@ -66,20 +80,18 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
       if (widgetApiRef.current) {
         // widgetApiRef.current.stop?.();
       }
-      widgetApiRef.current = null;
-      smallWidgetRef.current = null;
-      //hangUp();
-      if (iframeRef.current) iframeRef.current.src = 'about:blank';
+      //widgetApiRef.current = null;
+      //smallWidgetRef.current = null;
+      //if (iframeRef.current) iframeRef.current.src = 'about:blank';
     };
 
     if (activeCallRoomId && mx?.getUserId()) {
-      if (cleanupRoomId !== activeCallRoomId) {
+      if (cleanupRoomId !== activeCallRoomId && !isCallActive) {
         const newUrl = getWidgetUrl(mx, roomId, clientConfig.elementCallUrl ?? '', {
-          skipLobby: 'true',
+          skipLobby,
           returnToLobby: 'true',
           perParticipentE2EE: 'true',
         });
-
         if (iframeRef.current && iframeRef.current.src !== newUrl.toString()) {
           logger.info(
             `PersistentCallContainer: Updating iframe src for ${activeCallRoomId} to ${newUrl.toString()}`
@@ -102,7 +114,7 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
         const userId = mx.getUserId() ?? '';
         const app = createVirtualWidget(
           mx,
-          `element-call-${activeCallRoomId}`,
+          `element-call-${activeCallRoomId}-${Date.now()}`,
           userId,
           'Element Call',
           'm.call',
@@ -121,7 +133,7 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
         try {
           const widgetApiInstance = smallWidget.startMessaging(iframeElement);
           widgetApiRef.current = widgetApiInstance;
-          registerActiveClientWidgetApi(activeCallRoomId, widgetApiRef.current);
+          if (skipLobby) registerActiveClientWidgetApi(activeCallRoomId, widgetApiRef.current);
           widgetApiInstance.once('ready', () => {
             logger.info(`PersistentCallContainer: Widget for ${activeCallRoomId} is ready.`);
           });
@@ -133,15 +145,22 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
           cleanup();
         }
       } else {
+        /*
         if (iframeRef.current && iframeRef.current.src !== 'about:blank') {
           logger.info('PersistentCallContainer: No active call, setting src to about:blank');
           iframeRef.current.src = 'about:blank';
         }
+          */
         cleanup();
       }
     }
     return cleanup;
-  }, [activeCallRoomId, mx, setActiveCallRoomId]);
+  };
+
+  useEffect(() => {
+    setupWidget(widgetApiRef, smallWidgetRef, iframeRef, true);
+    setupWidget(backupWidgetApiRef, backupSmallWidgetRef, backupIframeRef, false);
+  });
 
   const containerStyle: React.CSSProperties = {
     width: '100%',
@@ -203,7 +222,7 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
                 position: 'absolute',
                 top: 0,
                 left: 0,
-                //               display: isMobile && isChatOpen ? 'none' : 'flex',
+                display: isViewingActiveCall ? 'flex' : 'none',
                 width: '100%',
                 height: '100%',
                 border: 'none',
@@ -213,6 +232,23 @@ export function PersistentCallContainer({ isVisible }: PersistentCallContainerPr
               allow="microphone; camera; display-capture; autoplay; clipboard-write;"
               src="about:blank"
             />
+            <iframe
+              ref={backupIframeRef}
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                border: 'none',
+
+                display: isViewingActiveCall ? 'none' : 'flex',
+              }}
+              title={`Persistent Element Call`}
+              sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
+              allow="microphone; camera; display-capture; autoplay; clipboard-write;"
+              src="about:blank"
+            />
           </Box>
         </Box>
         <Box grow="Yes" direction="Column" style={{ position: 'relative' }}>

From de1a629b79a6da5247a1ea530a1627c309caa154 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 2 May 2025 17:06:54 -0500
Subject: [PATCH 089/242] prepare for juggling iframes and handling hang up
 appropriately

---
 src/app/pages/client/CallProvider.tsx | 30 ++++++++++++++++-----------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
index d178774d..f50a007a 100644
--- a/src/app/pages/client/CallProvider.tsx
+++ b/src/app/pages/client/CallProvider.tsx
@@ -77,7 +77,7 @@ export function CallProvider({ children }: CallProviderProps) {
     logger.debug('CallContext: Resetting media state to defaults.');
     setIsAudioEnabledState(DEFAULT_AUDIO_ENABLED);
     setIsVideoEnabledState(DEFAULT_VIDEO_ENABLED);
-    setIsChatOpenState(DEFAULT_CHAT_OPENED);
+    //setIsChatOpenState(DEFAULT_CHAT_OPENED);
   }, []);
 
   const setActiveCallRoomId = useCallback(
@@ -104,13 +104,14 @@ export function CallProvider({ children }: CallProviderProps) {
 
   const hangUp = useCallback(() => {
     logger.debug(`CallContext: Hang up called.`);
-    // activeClientWidgetApi?.transport.send(`action:${WIDGET_HANGUP_ACTION}`, {});
-    setActiveCallRoomIdState(null);
-    logger.debug(`CallContext: Clearing active clientWidgetApi due to hangup.`);
-    setActiveClientWidgetApiState(null);
-    setClientWidgetApiRoomId(null);
-    resetMediaState();
-  }, [resetMediaState]);
+    activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
+    setIsCallActive(false);
+    //setActiveCallRoomId(null);
+    //setActiveCallRoomIdState(null);
+    //logger.debug(`CallContext: Clearing active clientWidgetApi due to hangup.`);
+    //setActiveClientWidgetApiState(null);
+    //setClientWidgetApiRoomId(null);
+  }, [activeClientWidgetApi?.transport]);
 
   const setActiveClientWidgetApi = useCallback(
     (clientWidgetApi: ClientWidgetApi | null, roomId: string | null) => {
@@ -145,7 +146,12 @@ export function CallProvider({ children }: CallProviderProps) {
   );
 
   useEffect(() => {
-    if (!activeClientWidgetApi || !activeCallRoomId || clientWidgetApiRoomId !== activeCallRoomId) {
+    if (
+      !activeClientWidgetApi ||
+      !activeCallRoomId ||
+      clientWidgetApiRoomId !== activeCallRoomId ||
+      isCallActive
+    ) {
       return;
     }
 
@@ -160,7 +166,7 @@ export function CallProvider({ children }: CallProviderProps) {
         ev
       );
       setIsCallActive(false);
-      // hangUp();
+      //hangUp();
     };
 
     const handleMediaStateUpdate = (ev: CustomEvent<MediaStatePayload>) => {
@@ -203,8 +209,8 @@ export function CallProvider({ children }: CallProviderProps) {
         `CallContext: Cleaning up listeners for clientWidgetApi in room ${activeCallRoomId}`
       );
       if (clientWidgetApi) {
-        clientWidgetApi.off(`action:${WIDGET_HANGUP_ACTION}`, handleHangup);
-        clientWidgetApi.off(`action:${WIDGET_MEDIA_STATE_UPDATE_ACTION}`, handleMediaStateUpdate);
+        //clientWidgetApi.off(`action:${WIDGET_HANGUP_ACTION}`, handleHangup);
+        //clientWidgetApi.off(`action:${WIDGET_MEDIA_STATE_UPDATE_ACTION}`, handleMediaStateUpdate);
       }
     };
   }, [

From a2a83fc316d85d3b58995f2b8c573a6c2a79f82b Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 2 May 2025 17:11:03 -0500
Subject: [PATCH 090/242] update to enable chat icon to be able to open call
 room WITHOUT joining by making sure the navitems into a diff call room
 performs a hangup on click

---
 src/app/features/room-nav/RoomNavItem.tsx | 32 +++++++++++++++++++----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 17badd2e..5eb2f1ba 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, forwardRef, useState } from 'react';
+import React, { MouseEventHandler, forwardRef, useState, MouseEvent } from 'react';
 import { Room } from 'matrix-js-sdk';
 import {
   Avatar,
@@ -196,6 +196,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
     );
   }
 );
+RoomNavItemMenu.displayName = 'RoomNavItemMenu';
 
 type RoomNavItemProps = {
   room: Room;
@@ -220,7 +221,7 @@ export function RoomNavItem({
   const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
-  const { isChatOpen, toggleChat } = useCallState();
+  const { isChatOpen, toggleChat, hangUp } = useCallState();
   const typingMember = useRoomTypingMember(room.roomId).filter(
     (receipt) => receipt.userId !== mx.getUserId()
   );
@@ -239,6 +240,25 @@ export function RoomNavItem({
     setMenuAnchor(evt.currentTarget.getBoundingClientRect());
   };
 
+  const handleNavItemClick: MouseEventHandler<HTMLElement> = (evt) => {
+    const target = evt.target as HTMLElement;
+    const chatButton = (evt.currentTarget as HTMLElement).querySelector(
+      '[data-testid="chat-button"]'
+    );
+    if (chatButton && chatButton.contains(target)) {
+      return;
+    }
+
+    if (room.isCallRoom()) {
+      hangUp();
+    }
+  };
+
+  const handleChatButtonClick = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    if (!isChatOpen) toggleChat();
+  };
+
   const optionsVisible = hover || !!menuAnchor;
 
   return (
@@ -252,7 +272,8 @@ export function RoomNavItem({
       {...hoverProps}
       {...focusWithinProps}
     >
-      <NavLink to={linkPath}>
+      <NavLink to={linkPath} onClick={handleNavItemClick}>
+        {' '}
         <NavItemContent>
           <Box as="span" grow="Yes" alignItems="Center" gap="200">
             <Avatar size="200" radii="400">
@@ -343,8 +364,9 @@ export function RoomNavItem({
                 {(triggerRef) => (
                   <IconButton
                     ref={triggerRef}
-                    onClick={isChatOpen !== true ? toggleChat : undefined}
-                    aria-pressed={!!menuAnchor}
+                    data-testid="chat-button"
+                    onClick={handleChatButtonClick}
+                    aria-pressed={isChatOpen}
                     variant="Background"
                     fill="None"
                     size="300"

From 7f8aeb335fdda0a2862e136d58daa1d066c941e0 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 2 May 2025 17:11:33 -0500
Subject: [PATCH 091/242] remove logger statement and swap hash to search

---
 src/app/features/room/SmallWidget.ts | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/app/features/room/SmallWidget.ts b/src/app/features/room/SmallWidget.ts
index 0b8a8acd..7d8332a9 100644
--- a/src/app/features/room/SmallWidget.ts
+++ b/src/app/features/room/SmallWidget.ts
@@ -46,15 +46,12 @@ export const getWidgetUrl = (
   const url =
     new URL(`${elementCallUrl}/room`) ?? new URL('./dist/element-call/dist/index.html', baseUrl);
 
-  logger.error(url);
-
   const params = new URLSearchParams({
     embed: 'true',
-    widgetId: `element-call-${roomId}`,
+    widgetId: `element-call-${roomId}-${Date.now()}`,
     appPrompt: 'false',
     preload: 'false',
     skipLobby: setParams.skipLobby ?? 'true',
-    //intent: 'join_existing',
     returnToLobby: setParams.returnToLobby ?? 'true',
     perParticipantE2EE: setParams.perParticipantE2EE ?? 'true',
     hideHeader: 'true',
@@ -66,7 +63,7 @@ export const getWidgetUrl = (
   });
 
   const replacedParams = params.toString().replace(/%24/g, '$');
-  url.hash = `#?${replacedParams}`;
+  url.search = `?${replacedParams}`;
 
   logger.info('Generated Element Call Widget URL:', url.toString());
   return url;

From c64dbb05631cf26816b5b4ca82a9514da84035ee Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 3 May 2025 00:06:36 -0500
Subject: [PATCH 092/242] add a state store for which iFrame is active

---
 src/app/pages/client/CallProvider.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
index f50a007a..6edff627 100644
--- a/src/app/pages/client/CallProvider.tsx
+++ b/src/app/pages/client/CallProvider.tsx
@@ -41,9 +41,11 @@ interface CallContextState {
   isVideoEnabled: boolean;
   isChatOpen: boolean;
   isCallActive: boolean;
+  isPrimaryIframe: boolean;
   toggleAudio: () => Promise<void>;
   toggleVideo: () => Promise<void>;
   toggleChat: () => Promise<void>;
+  toggleIframe: () => Promise<void>;
 }
 
 const CallContext = createContext<CallContextState | undefined>(undefined);
@@ -56,6 +58,7 @@ const DEFAULT_AUDIO_ENABLED = true;
 const DEFAULT_VIDEO_ENABLED = false;
 const DEFAULT_CHAT_OPENED = false;
 const DEFAULT_CALL_ACTIVE = false;
+const DEFAULT_PRIMARY_IFRAME = false;
 
 export function CallProvider({ children }: CallProviderProps) {
   const [activeCallRoomId, setActiveCallRoomIdState] = useState<string | null>(null);
@@ -68,6 +71,7 @@ export function CallProvider({ children }: CallProviderProps) {
   const [isVideoEnabled, setIsVideoEnabledState] = useState<boolean>(DEFAULT_VIDEO_ENABLED);
   const [isChatOpen, setIsChatOpenState] = useState<boolean>(DEFAULT_CHAT_OPENED);
   const [isCallActive, setIsCallActive] = useState<boolean>(DEFAULT_CALL_ACTIVE);
+  const [isPrimaryIframe, setIsPrimaryIframe] = useState<boolean>(DEFAULT_PRIMARY_IFRAME);
 
   const { roomIdOrAlias: viewedRoomId } = useParams<{ roomIdOrAlias: string }>();
   const mx = useMatrixClient();
@@ -165,6 +169,7 @@ export function CallProvider({ children }: CallProviderProps) {
         `CallContext: Received hangup action from widget in room ${activeCallRoomId}.`,
         ev
       );
+      setIsPrimaryIframe(true);
       setIsCallActive(false);
       //hangUp();
     };
@@ -193,6 +198,11 @@ export function CallProvider({ children }: CallProviderProps) {
 
     const handleJoin = (ev: CustomEvent) => {
       ev.preventDefault();
+      if (isCallActive) {
+        setIsPrimaryIframe(false);
+      } else {
+        setIsPrimaryIframe(true);
+      }
       setIsCallActive(true);
     };
 
@@ -291,6 +301,11 @@ export function CallProvider({ children }: CallProviderProps) {
     setIsChatOpenState(newState);
   }, [isChatOpen]);
 
+  const toggleIframe = useCallback(async () => {
+    const newState = !isPrimaryIframe;
+    setIsPrimaryIframe(newState);
+  }, [isPrimaryIframe]);
+
   const contextValue = useMemo<CallContextState>(
     () => ({
       activeCallRoomId,
@@ -303,9 +318,11 @@ export function CallProvider({ children }: CallProviderProps) {
       isAudioEnabled,
       isVideoEnabled,
       isCallActive,
+      isPrimaryIframe,
       toggleAudio,
       toggleVideo,
       toggleChat,
+      toggleIframe,
     }),
     [
       activeCallRoomId,
@@ -318,9 +335,11 @@ export function CallProvider({ children }: CallProviderProps) {
       isAudioEnabled,
       isVideoEnabled,
       isCallActive,
+      isPrimaryIframe,
       toggleAudio,
       toggleVideo,
       toggleChat,
+      toggleIframe,
     ]
   );
 

From 7808adbbe11820c1d54d294ade60633c8553dff9 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 3 May 2025 00:07:00 -0500
Subject: [PATCH 093/242] add (really badly) state logic for the active iframe

---
 src/app/pages/call/PersistentCallContainer.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index 679b722d..f244150e 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -33,6 +33,7 @@ export function PersistentCallContainer({ isVisible, viewedRoomId }: PersistentC
     activeCallRoomId,
     isChatOpen,
     isCallActive,
+    isPrimaryIframe,
     setActiveCallRoomId,
     registerActiveClientWidgetApi,
   } = useCallState();
@@ -222,7 +223,7 @@ export function PersistentCallContainer({ isVisible, viewedRoomId }: PersistentC
                 position: 'absolute',
                 top: 0,
                 left: 0,
-                display: isViewingActiveCall ? 'flex' : 'none',
+                display: isPrimaryIframe || isViewingActiveCall ? 'flex' : 'none',
                 width: '100%',
                 height: '100%',
                 border: 'none',
@@ -242,7 +243,7 @@ export function PersistentCallContainer({ isVisible, viewedRoomId }: PersistentC
                 height: '100%',
                 border: 'none',
 
-                display: isViewingActiveCall ? 'none' : 'flex',
+                display: !isPrimaryIframe || isViewingActiveCall ? 'none' : 'flex',
               }}
               title={`Persistent Element Call`}
               sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"

From 79647c5b501dc778e4d8162fdcdaf772dede87f1 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 3 May 2025 21:50:39 -0500
Subject: [PATCH 094/242] Add users on the nav to showcase call activity and
 who is in the call

---
 src/app/pages/client/space/Space.tsx | 39 +++++++++++++++++++++++-----
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 8f2d0fdb..0c504ae2 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -80,6 +80,7 @@ import {
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
 import { useCallState } from '../CallProvider';
 import { CallNavBottom } from '../../call/CallNavBottom';
+import { getStateEvents } from '../../../utils/room';
 
 /**
  * Processes the raw hierarchy from useSpaceJoinedHierarchy into a flat list
@@ -99,7 +100,7 @@ const processHierarchyForVirtualizer = (
   closedCategories: Set<string>
 ): Array<{ type: string; key: string; [key: string]: any }> => {
   const processed: Array<{ type: string; key: string; [key: string]: any }> = [];
-  let currentCategoryRooms = { text: [], voice: [] };
+  let currentCategoryRooms = { text: [], voice: [], users: [] };
   let currentParentId: string = spaceRoomId;
 
   const addCollectedRoomsToProcessed = (parentId: string) => {
@@ -130,12 +131,19 @@ const processHierarchyForVirtualizer = (
         key: `${parentId}-voice-header`,
       });
       if (!isCallClosed) {
-        currentCategoryRooms.voice.forEach((room) =>
-          processed.push({ type: 'room', room, key: room.roomId })
-        );
+        currentCategoryRooms.voice.forEach((room) => {
+          processed.push({ type: 'room', room, key: room.roomId });
+
+          currentCategoryRooms.users.forEach((entry) => {
+            if (entry.room.roomId === room.roomId) {
+              processed.push(entry);
+            }
+          });
+        });
       }
     }
-    currentCategoryRooms = { text: [], voice: [] };
+
+    currentCategoryRooms = { text: [], voice: [], users: [] };
   };
 
   hierarchy.forEach((item) => {
@@ -158,6 +166,19 @@ const processHierarchyForVirtualizer = (
       }
     } else if (room.isCallRoom()) {
       currentCategoryRooms.voice.push(room);
+      getStateEvents(room, 'org.matrix.msc3401.call.member').forEach(({ event }) => {
+        if (Object.entries(event?.content).length !== 0) {
+          if (event.origin_server_ts + event.content.expires > Date.now()) {
+            currentCategoryRooms.users.push({
+              type: 'user',
+              sender: event.sender,
+              key: event.event_id,
+              room,
+            });
+            logger.warn(event);
+          }
+        }
+      });
     } else if (!room.isCallRoom()) {
       currentCategoryRooms.text.push(room);
     } else {
@@ -483,10 +504,10 @@ export function Space() {
               switch (item.type) {
                 case 'category': {
                   const { room, categoryId } = item;
-                  const name = room.name;
+                  const { name } = room;
                   const paddingTop = config?.space?.S400 ?? '1rem';
                   return (
-                    <div style={{ paddingTop: paddingTop }}>
+                    <div style={{ paddingTop }}>
                       <NavCategoryHeader>
                         <RoomNavCategoryButton
                           data-category-id={categoryId}
@@ -533,6 +554,10 @@ export function Space() {
                     </Box>
                   );
                 }
+                case 'user': {
+                  const { sender } = item;
+                  return <NavItem>{sender}</NavItem>;
+                }
                 default:
                   logger.error('Unknown item type in virtualized list:', item);
                   return null;

From 3dcfde44614b997e64aac67b98a41756db9cab94 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 3 May 2025 22:09:21 -0500
Subject: [PATCH 095/242] add check to prevent DCing from the call you're
 currently in...

---
 src/app/features/room-nav/RoomNavItem.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 5eb2f1ba..e31872ed 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -221,7 +221,7 @@ export function RoomNavItem({
   const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
-  const { isChatOpen, toggleChat, hangUp } = useCallState();
+  const { activeCallRoomId, isChatOpen, toggleChat, hangUp } = useCallState();
   const typingMember = useRoomTypingMember(room.roomId).filter(
     (receipt) => receipt.userId !== mx.getUserId()
   );
@@ -249,7 +249,7 @@ export function RoomNavItem({
       return;
     }
 
-    if (room.isCallRoom()) {
+    if (room.isCallRoom() && activeCallRoomId !== room.roomId) {
       hangUp();
     }
   };

From 2e0218c456908405ad43b33d94996536798b5ee4 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 4 May 2025 07:11:40 -0500
Subject: [PATCH 096/242] Add avatar and username for the space (needs to be
 moved into RoomNavItem proper)

---
 src/app/pages/client/space/Space.tsx | 56 ++++++++++++++++++++++++----
 1 file changed, 49 insertions(+), 7 deletions(-)

diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 0c504ae2..0424ac30 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -23,7 +23,7 @@ import {
   toRem,
 } from 'folds';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { JoinRule, Room } from 'matrix-js-sdk';
+import { JoinRule, Room, RoomMember } from 'matrix-js-sdk';
 import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
 import FocusTrap from 'focus-trap-react';
 import { logger } from 'matrix-js-sdk/lib/logger';
@@ -38,7 +38,7 @@ import {
   NavLink,
 } from '../../../components/nav';
 import { getSpaceLobbyPath, getSpaceRoomPath, getSpaceSearchPath } from '../../pathUtils';
-import { getCanonicalAliasOrRoomId, isRoomAlias } from '../../../utils/matrix';
+import { getCanonicalAliasOrRoomId, getMxIdLocalPart, isRoomAlias } from '../../../utils/matrix';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import {
   useSpaceLobbySelected,
@@ -80,7 +80,10 @@ import {
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
 import { useCallState } from '../CallProvider';
 import { CallNavBottom } from '../../call/CallNavBottom';
-import { getStateEvents } from '../../../utils/room';
+import { getMemberDisplayName, getStateEvents } from '../../../utils/room';
+import { useRoomMembers } from '../../../hooks/useRoomMembers';
+import { UserAvatar } from '../../../components/user-avatar';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 
 /**
  * Processes the raw hierarchy from useSpaceJoinedHierarchy into a flat list
@@ -175,7 +178,6 @@ const processHierarchyForVirtualizer = (
               key: event.event_id,
               room,
             });
-            logger.warn(event);
           }
         }
       });
@@ -390,13 +392,14 @@ export function Space() {
   const allRooms = useAtomValue(allRoomsAtom);
   const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]);
   const notificationPreferences = useRoomsNotificationPreferencesContext();
-
   const selectedRoomId = useSelectedRoom();
   const lobbySelected = useSpaceLobbySelected(spaceIdOrAlias);
   const searchSelected = useSpaceSearchSelected(spaceIdOrAlias);
 
   const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
 
+  const useAuthentication = useMediaAuthentication();
+
   const getRoom = useCallback(
     (rId: string): Room | undefined => {
       if (allJoinedRooms.has(rId)) {
@@ -428,6 +431,9 @@ export function Space() {
     )
   );
 
+  const members = useRoomMembers(mx, space.roomId);
+
+  //.getMxcAvatarUrl()
   const processedHierarchy = useMemo(
     () => processHierarchyForVirtualizer(hierarchy, mx, space.roomId, closedCategories),
     [hierarchy, mx, space.roomId, closedCategories]
@@ -555,8 +561,44 @@ export function Space() {
                   );
                 }
                 case 'user': {
-                  const { sender } = item;
-                  return <NavItem>{sender}</NavItem>;
+                  const { sender, room } = item;
+                  const member = members.find((roomMember) => roomMember.userId === sender);
+                  const avatarMxcUrl = member?.getMxcAvatarUrl();
+                  const avatarUrl = avatarMxcUrl
+                    ? mx.mxcUrlToHttp(
+                        avatarMxcUrl,
+                        32,
+                        32,
+                        'crop',
+                        undefined,
+                        false,
+                        useAuthentication
+                      )
+                    : undefined;
+                  const getName =
+                    getMemberDisplayName(room, member?.userId ?? '') ??
+                    getMxIdLocalPart(member?.userId ?? '') ??
+                    member?.userId;
+
+                  return (
+                    <Box>
+                      <NavItem variant="Background" radii="400">
+                        <NavItemContent>
+                          <Box as="span" grow="Yes" alignItems="Center" gap="200">
+                            <Avatar size="200">
+                              <UserAvatar
+                                userId={member?.userId ?? ''}
+                                src={avatarUrl ?? undefined}
+                                alt={getName}
+                                renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+                              />
+                            </Avatar>
+                            {getName}
+                          </Box>
+                        </NavItemContent>
+                      </NavItem>
+                    </Box>
+                  );
                 }
                 default:
                   logger.error('Unknown item type in virtualized list:', item);

From 2841386972c5234018af4e0fd685f6acabb198ec Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 4 May 2025 07:21:50 -0500
Subject: [PATCH 097/242] Add background variant to buttons

---
 src/app/pages/call/CallNavBottom.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/pages/call/CallNavBottom.tsx b/src/app/pages/call/CallNavBottom.tsx
index d4fa8148..5a12405d 100644
--- a/src/app/pages/call/CallNavBottom.tsx
+++ b/src/app/pages/call/CallNavBottom.tsx
@@ -49,7 +49,7 @@ export function CallNavBottom() {
           }
         >
           {(triggerRef) => (
-            <IconButton ref={triggerRef} onClick={toggleAudio}>
+            <IconButton variant="Background" ref={triggerRef} onClick={toggleAudio}>
               <Icon src={!isAudioEnabled ? Icons.VolumeHigh : Icons.VolumeMute} />
             </IconButton>
           )}
@@ -64,7 +64,7 @@ export function CallNavBottom() {
           }
         >
           {(triggerRef) => (
-            <IconButton ref={triggerRef} onClick={toggleVideo}>
+            <IconButton variant="Background" ref={triggerRef} onClick={toggleVideo}>
               <Icon src={!isVideoEnabled ? Icons.Vlc : Icons.Lock} />
             </IconButton>
           )}
@@ -80,7 +80,7 @@ export function CallNavBottom() {
           }
         >
           {(triggerRef) => (
-            <IconButton ref={triggerRef} onClick={hangUp}>
+            <IconButton variant="Background" ref={triggerRef} onClick={hangUp}>
               <Icon src={Icons.Phone} />
             </IconButton>
           )}
@@ -99,13 +99,13 @@ export function CallNavBottom() {
             {(triggerRef) =>
               viewedRoomId !== (activeCallRoomId ?? '') ? (
                 <NavLink ref={triggerRef} to={activeCallRoomId}>
-                  <Chip radii="Inherit" size="500" fill="Soft">
-                    {mx.getRoom(activeCallRoomId)?.normalizedName}
+                  <Chip variant="Background" radii="Inherit" size="500" fill="Soft">
+                    Active Call: {mx.getRoom(activeCallRoomId)?.normalizedName}
                   </Chip>
                 </NavLink>
               ) : (
-                <Chip ref={triggerRef} radii="Inherit" size="500" fill="Soft">
-                  {mx.getRoom(activeCallRoomId)?.normalizedName}
+                <Chip variant="Background" ref={triggerRef} radii="Inherit" size="500" fill="Soft">
+                  Active Call: {mx.getRoom(activeCallRoomId)?.normalizedName}
                 </Chip>
               )
             }

From b40ddf0c61edd870d49c82a480fe36ce785f1fb2 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 4 May 2025 12:14:46 -0500
Subject: [PATCH 098/242] Update hook to keep method signature (accepting an
 array of Rooms instead) to support multiple room event tracking of the same
 event

---
 src/app/hooks/useStateEvents.ts | 43 +++++++++++++++++++--------------
 1 file changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/app/hooks/useStateEvents.ts b/src/app/hooks/useStateEvents.ts
index dd085693..6d1c80bc 100644
--- a/src/app/hooks/useStateEvents.ts
+++ b/src/app/hooks/useStateEvents.ts
@@ -1,28 +1,35 @@
 import { useCallback, useMemo } from 'react';
-import { Room } from 'matrix-js-sdk';
+import { MatrixEvent, Room } from 'matrix-js-sdk';
 import { StateEvent } from '../../types/matrix/room';
+import { useMatrixClient } from './useMatrixClient';
 import { useForceUpdate } from './useForceUpdate';
 import { useStateEventCallback } from './useStateEventCallback';
-import { getStateEvents } from '../utils/room';
 
-export const useStateEvents = (room: Room, eventType: StateEvent) => {
+export const useStateEvents = (rooms: Room[], eventType: StateEvent): number => {
+  const mx = useMatrixClient();
+
   const [updateCount, forceUpdate] = useForceUpdate();
 
-  useStateEventCallback(
-    room.client,
-    useCallback(
-      (event) => {
-        if (event.getRoomId() === room.roomId && event.getType() === eventType) {
-          forceUpdate();
+  const relevantRoomIds = useMemo(() => {
+    const ids = new Set<string>();
+    if (rooms && Array.isArray(rooms)) {
+      rooms.forEach((room) => {
+        if (room?.roomId) {
+          ids.add(room.roomId);
         }
-      },
-      [room, eventType, forceUpdate]
-    )
-  );
-
-  return useMemo(
-    () => getStateEvents(room, eventType),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [room, eventType, updateCount]
+      });
+    }
+    return ids;
+  }, [rooms]);
+  const handleEventCallback = useCallback(
+    (event: MatrixEvent) => {
+      const eventRoomId = event.getRoomId();
+      if (eventRoomId && event.getType() === eventType && relevantRoomIds.has(eventRoomId)) {
+        forceUpdate();
+      }
+    },
+    [eventType, relevantRoomIds, forceUpdate]
   );
+  useStateEventCallback(mx, handleEventCallback);
+  return updateCount;
 };

From 9cb705149aee68f9d373182c21a7a94458954298 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 4 May 2025 12:15:31 -0500
Subject: [PATCH 099/242] Add state listener so the call activity is real time
 updated on joins/leaves within the space

---
 src/app/pages/client/space/Space.tsx | 63 ++++++++--------------------
 1 file changed, 17 insertions(+), 46 deletions(-)

diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 0424ac30..f829222a 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -23,11 +23,10 @@ import {
   toRem,
 } from 'folds';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { JoinRule, Room, RoomMember } from 'matrix-js-sdk';
+import { JoinRule, Room } from 'matrix-js-sdk';
 import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
 import FocusTrap from 'focus-trap-react';
 import { logger } from 'matrix-js-sdk/lib/logger';
-import { WidgetApiToWidgetAction } from 'matrix-widget-api';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { mDirectAtom } from '../../../state/mDirectList';
 import {
@@ -38,7 +37,7 @@ import {
   NavLink,
 } from '../../../components/nav';
 import { getSpaceLobbyPath, getSpaceRoomPath, getSpaceSearchPath } from '../../pathUtils';
-import { getCanonicalAliasOrRoomId, getMxIdLocalPart, isRoomAlias } from '../../../utils/matrix';
+import { getCanonicalAliasOrRoomId, isRoomAlias } from '../../../utils/matrix';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import {
   useSpaceLobbySelected,
@@ -78,12 +77,10 @@ import {
   useRoomsNotificationPreferencesContext,
 } from '../../../hooks/useRoomsNotificationPreferences';
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
-import { useCallState } from '../CallProvider';
 import { CallNavBottom } from '../../call/CallNavBottom';
-import { getMemberDisplayName, getStateEvents } from '../../../utils/room';
-import { useRoomMembers } from '../../../hooks/useRoomMembers';
-import { UserAvatar } from '../../../components/user-avatar';
-import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { getStateEvents } from '../../../utils/room';
+import { RoomNavUser } from '../../../features/room-nav/RoomNavUser';
+import { useStateEvents } from '../../../hooks/useStateEvents';
 
 /**
  * Processes the raw hierarchy from useSpaceJoinedHierarchy into a flat list
@@ -398,8 +395,6 @@ export function Space() {
 
   const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
 
-  const useAuthentication = useMediaAuthentication();
-
   const getRoom = useCallback(
     (rId: string): Room | undefined => {
       if (allJoinedRooms.has(rId)) {
@@ -431,12 +426,20 @@ export function Space() {
     )
   );
 
-  const members = useRoomMembers(mx, space.roomId);
+  const callRooms = useMemo(
+    () =>
+      hierarchy
+        .map((item) => mx.getRoom(item.roomId))
+        .filter((room): room is Room => !!room && room.isCallRoom()),
+    [hierarchy, mx]
+  );
+
+  const updateTrigger = useStateEvents(callRooms, StateEvent.GroupCallMemberPrefix);
 
-  //.getMxcAvatarUrl()
   const processedHierarchy = useMemo(
     () => processHierarchyForVirtualizer(hierarchy, mx, space.roomId, closedCategories),
-    [hierarchy, mx, space.roomId, closedCategories]
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [hierarchy, mx, space.roomId, closedCategories, updateTrigger]
   );
 
   const virtualizer = useVirtualizer({
@@ -562,41 +565,9 @@ export function Space() {
                 }
                 case 'user': {
                   const { sender, room } = item;
-                  const member = members.find((roomMember) => roomMember.userId === sender);
-                  const avatarMxcUrl = member?.getMxcAvatarUrl();
-                  const avatarUrl = avatarMxcUrl
-                    ? mx.mxcUrlToHttp(
-                        avatarMxcUrl,
-                        32,
-                        32,
-                        'crop',
-                        undefined,
-                        false,
-                        useAuthentication
-                      )
-                    : undefined;
-                  const getName =
-                    getMemberDisplayName(room, member?.userId ?? '') ??
-                    getMxIdLocalPart(member?.userId ?? '') ??
-                    member?.userId;
-
                   return (
                     <Box>
-                      <NavItem variant="Background" radii="400">
-                        <NavItemContent>
-                          <Box as="span" grow="Yes" alignItems="Center" gap="200">
-                            <Avatar size="200">
-                              <UserAvatar
-                                userId={member?.userId ?? ''}
-                                src={avatarUrl ?? undefined}
-                                alt={getName}
-                                renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-                              />
-                            </Avatar>
-                            {getName}
-                          </Box>
-                        </NavItemContent>
-                      </NavItem>
+                      <RoomNavUser room={room} space={space} sender={sender} />
                     </Box>
                   );
                 }

From 5ee3897fdee786be5017f76a6bb2ffb20af66c66 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 4 May 2025 12:16:15 -0500
Subject: [PATCH 100/242] Add RoomNavUser for displaying the user avatar + name
 in the nav for a visual of call activity and participants

---
 src/app/features/room-nav/RoomNavUser.tsx | 49 +++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/app/features/room-nav/RoomNavUser.tsx

diff --git a/src/app/features/room-nav/RoomNavUser.tsx b/src/app/features/room-nav/RoomNavUser.tsx
new file mode 100644
index 00000000..6a533a0e
--- /dev/null
+++ b/src/app/features/room-nav/RoomNavUser.tsx
@@ -0,0 +1,49 @@
+import { Avatar, Box, Icon, Icons } from 'folds';
+import React from 'react';
+import { Room, RoomMember } from 'matrix-js-sdk';
+import { NavItem, NavItemContent } from '../../components/nav';
+import { UserAvatar } from '../../components/user-avatar';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useRoomMembers } from '../../hooks/useRoomMembers';
+import { getMxIdLocalPart } from '../../utils/matrix';
+import { getMemberDisplayName } from '../../utils/room';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+
+type RoomNavUserProps = {
+  room: Room;
+  space: Room;
+  sender: string;
+};
+export function RoomNavUser({ room, space, sender }: RoomNavUserProps) {
+  const mx = useMatrixClient();
+  const members = useRoomMembers(mx, space.roomId);
+  const useAuthentication = useMediaAuthentication();
+
+  const member = members.find((roomMember) => roomMember.userId === sender);
+  const avatarMxcUrl = member?.getMxcAvatarUrl();
+  const avatarUrl = avatarMxcUrl
+    ? mx.mxcUrlToHttp(avatarMxcUrl, 32, 32, 'crop', undefined, false, useAuthentication)
+    : undefined;
+  const getName =
+    getMemberDisplayName(room, member?.userId ?? '') ??
+    getMxIdLocalPart(member?.userId ?? '') ??
+    member?.userId;
+
+  return (
+    <NavItem variant="Background" radii="400">
+      <NavItemContent>
+        <Box as="span" grow="Yes" alignItems="Center" gap="200">
+          <Avatar size="200">
+            <UserAvatar
+              userId={member?.userId ?? ''}
+              src={avatarUrl ?? undefined}
+              alt={getName}
+              renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+            />
+          </Avatar>
+          {getName}
+        </Box>
+      </NavItemContent>
+    </NavItem>
+  );
+}

From 4083bbb31e3a06e893350b459ab188662b1b1ea6 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 4 May 2025 15:03:23 -0500
Subject: [PATCH 101/242] rename CallNavBottom to CallNavStatus

---
 src/app/pages/client/direct/Direct.tsx | 4 ++--
 src/app/pages/client/home/Home.tsx     | 4 ++--
 src/app/pages/client/space/Space.tsx   | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index 66c9ab05..2843a2c6 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -50,7 +50,7 @@ import {
   getRoomNotificationMode,
   useRoomsNotificationPreferencesContext,
 } from '../../../hooks/useRoomsNotificationPreferences';
-import { CallNavBottom } from '../../call/CallNavBottom';
+import { CallNavStatus } from '../../call/CallNavStatus';
 
 type DirectMenuProps = {
   requestClose: () => void;
@@ -270,7 +270,7 @@ export function Direct() {
           </Box>
         </PageNavContent>
       )}
-      <CallNavBottom />
+      <CallNavStatus />
     </PageNav>
   );
 }
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index f7f358b3..1820a77f 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -53,7 +53,7 @@ import {
   getRoomNotificationMode,
   useRoomsNotificationPreferencesContext,
 } from '../../../hooks/useRoomsNotificationPreferences';
-import { CallNavBottom } from '../../call/CallNavBottom';
+import { CallNavStatus } from '../../call/CallNavStatus';
 
 type HomeMenuProps = {
   requestClose: () => void;
@@ -337,7 +337,7 @@ export function Home() {
           </Box>
         </PageNavContent>
       )}
-      <CallNavBottom />
+      <CallNavStatus />
     </PageNav>
   );
 }
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index f829222a..3af997ef 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -77,7 +77,7 @@ import {
   useRoomsNotificationPreferencesContext,
 } from '../../../hooks/useRoomsNotificationPreferences';
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
-import { CallNavBottom } from '../../call/CallNavBottom';
+import { CallNavStatus } from '../../call/CallNavStatus';
 import { getStateEvents } from '../../../utils/room';
 import { RoomNavUser } from '../../../features/room-nav/RoomNavUser';
 import { useStateEvents } from '../../../hooks/useStateEvents';
@@ -585,7 +585,7 @@ export function Space() {
           })}
         </NavCategory>
       </PageNavContent>
-      <CallNavBottom />
+      <CallNavStatus space={space} />
     </PageNav>
   );
 }

From d11bdb2f8502d62b9263fea254414daa0e5bdd95 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 4 May 2025 15:03:46 -0500
Subject: [PATCH 102/242] Rename callnavbottom and fix linking implementation
 to actually be correct

---
 .../{CallNavBottom.tsx => CallNavStatus.tsx}  | 48 +++++++++++++------
 1 file changed, 33 insertions(+), 15 deletions(-)
 rename src/app/pages/call/{CallNavBottom.tsx => CallNavStatus.tsx} (71%)

diff --git a/src/app/pages/call/CallNavBottom.tsx b/src/app/pages/call/CallNavStatus.tsx
similarity index 71%
rename from src/app/pages/call/CallNavBottom.tsx
rename to src/app/pages/call/CallNavStatus.tsx
index 5a12405d..35b48e62 100644
--- a/src/app/pages/call/CallNavBottom.tsx
+++ b/src/app/pages/call/CallNavStatus.tsx
@@ -4,13 +4,32 @@ import { Box, Chip, Icon, IconButton, Icons, Text, Tooltip, TooltipProvider } fr
 import React from 'react';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useCallState } from '../client/CallProvider';
+import { getSpaceRoomPath } from '../pathUtils';
+import { getCanonicalAliasOrRoomId } from '../../utils/matrix';
+import { useNavToActivePathMapper } from '../../hooks/useNavToActivePathMapper';
+import { useSpace } from '../../hooks/useSpace';
+import { Room } from 'matrix-js-sdk';
+import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
+import {
+  makeMentionCustomProps,
+  renderMatrixMention,
+} from '../../plugins/react-custom-html-parser';
+import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 
-export function CallNavBottom() {
+type CallNavStatusProps = {
+  space: Room | null;
+};
+export function CallNavStatus({ space }: CallNavStatusProps) {
   const { activeCallRoomId, isAudioEnabled, isVideoEnabled, toggleAudio, toggleVideo, hangUp } =
     useCallState();
   const mx = useMatrixClient();
+  const { navigateRoom } = useRoomNavigate();
   const { roomIdOrAlias: viewedRoomId } = useParams<{ roomIdOrAlias: string }>();
-
+  const handleGoToCallRoom = () => {
+    if (activeCallRoomId) {
+      navigateRoom(activeCallRoomId);
+    }
+  };
   if (!activeCallRoomId) {
     return (
       <Box
@@ -96,19 +115,18 @@ export function CallNavBottom() {
               </Tooltip>
             }
           >
-            {(triggerRef) =>
-              viewedRoomId !== (activeCallRoomId ?? '') ? (
-                <NavLink ref={triggerRef} to={activeCallRoomId}>
-                  <Chip variant="Background" radii="Inherit" size="500" fill="Soft">
-                    Active Call: {mx.getRoom(activeCallRoomId)?.normalizedName}
-                  </Chip>
-                </NavLink>
-              ) : (
-                <Chip variant="Background" ref={triggerRef} radii="Inherit" size="500" fill="Soft">
-                  Active Call: {mx.getRoom(activeCallRoomId)?.normalizedName}
-                </Chip>
-              )
-            }
+            {(triggerRef) => (
+              <Chip
+                radii="Inherit"
+                size="500"
+                fill="Soft"
+                as="button"
+                onClick={handleGoToCallRoom}
+                ref={triggerRef}
+              >
+                {mx.getRoom(activeCallRoomId)?.normalizedName}
+              </Chip>
+            )}
           </TooltipProvider>
         </Box>
       </Box>

From a5a8f2814e51c344f259024b3e641387d0a9723a Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 4 May 2025 15:04:07 -0500
Subject: [PATCH 103/242] temp fix to allow the status to be cleared in some
 way

---
 src/app/pages/client/CallProvider.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
index 6edff627..872b1d39 100644
--- a/src/app/pages/client/CallProvider.tsx
+++ b/src/app/pages/client/CallProvider.tsx
@@ -111,7 +111,7 @@ export function CallProvider({ children }: CallProviderProps) {
     activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
     setIsCallActive(false);
     //setActiveCallRoomId(null);
-    //setActiveCallRoomIdState(null);
+    setActiveCallRoomIdState(null);
     //logger.debug(`CallContext: Clearing active clientWidgetApi due to hangup.`);
     //setActiveClientWidgetApiState(null);
     //setClientWidgetApiRoomId(null);
@@ -171,6 +171,7 @@ export function CallProvider({ children }: CallProviderProps) {
       );
       setIsPrimaryIframe(true);
       setIsCallActive(false);
+      setActiveCallRoomIdState(null);
       //hangUp();
     };
 
@@ -200,6 +201,7 @@ export function CallProvider({ children }: CallProviderProps) {
       ev.preventDefault();
       if (isCallActive) {
         setIsPrimaryIframe(false);
+        setActiveCallRoomIdState(viewedRoomId);
       } else {
         setIsPrimaryIframe(true);
       }

From 824be5bdc2f674110e45062352a6180f561b7d0a Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 4 May 2025 15:06:21 -0500
Subject: [PATCH 104/242] re-add background to active call link button

---
 src/app/pages/call/CallNavStatus.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/pages/call/CallNavStatus.tsx b/src/app/pages/call/CallNavStatus.tsx
index 35b48e62..297c7f66 100644
--- a/src/app/pages/call/CallNavStatus.tsx
+++ b/src/app/pages/call/CallNavStatus.tsx
@@ -117,6 +117,7 @@ export function CallNavStatus({ space }: CallNavStatusProps) {
           >
             {(triggerRef) => (
               <Chip
+                variant="Background"
                 radii="Inherit"
                 size="500"
                 fill="Soft"

From 9e919ea761f0d947247025b563e7682c2a241680 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 8 May 2025 17:56:49 -0500
Subject: [PATCH 105/242] prepare to feed this to child elements for visibility
 handling

---
 .../pages/call/PersistentCallContainer.tsx    | 142 +++++++-----------
 1 file changed, 53 insertions(+), 89 deletions(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index f244150e..567a72ea 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -28,7 +28,16 @@ interface PersistentCallContainerProps {
   viewedRoomId: string;
 }
 
-export function PersistentCallContainer({ isVisible, viewedRoomId }: PersistentCallContainerProps) {
+export function PersistentCallContainer({
+  isVisible,
+  viewedRoomId,
+  iframeRef,
+  widgetApiRef,
+  smallWidgetRef,
+  backupIframeRef,
+  backupWidgetApiRef,
+  backupSmallWidgetRef,
+}: PersistentCallContainerProps) {
   const {
     activeCallRoomId,
     isChatOpen,
@@ -51,14 +60,6 @@ export function PersistentCallContainer({ isVisible, viewedRoomId }: PersistentC
 
   logger.info(room);
 
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
-  const widgetApiRef = useRef<ClientWidgetApi | null>(null);
-  const smallWidgetRef = useRef<SmallWidget | null>(null);
-
-  const backupIframeRef = useRef<HTMLIFrameElement | null>(null);
-  const backupWidgetApiRef = useRef<ClientWidgetApi | null>(null);
-  const backupSmallWidgetRef = useRef<SmallWidget | null>(null);
-
   const setupWidget = (widgetApiRef, smallWidgetRef, iframeRef, skipLobby) => {
     const cleanupRoomId = smallWidgetRef.current?.roomId;
     logger.debug(`PersistentCallContainer effect running. activeCallRoomId: ${activeCallRoomId}`);
@@ -171,95 +172,58 @@ export function PersistentCallContainer({ isVisible, viewedRoomId }: PersistentC
   };
 
   return (
-    <Page style={containerStyle}>
-      <Box direction="Row" grow="Yes" style={{ height: '100%', width: '100%' }}>
-        {activeCallRoomId && roomId && room !== null && (
-          <Box
-            shrink="No"
-            style={{
-              height: '100%',
-              overflowY: 'auto',
-            }}
-          >
-            <PowerLevelsContainer>
-              <PageRoot
-                nav={
-                  <MobileFriendlyPageNav path={SPACE_PATH}>
-                    <Space />
-                  </MobileFriendlyPageNav>
-                }
-              />
-            </PowerLevelsContainer>
-          </Box>
-        )}
-
+    <Box direction="Row" grow="Yes" style={{ height: '0%', width: '0%' }}>
+      <Box
+        direction="Column"
+        style={{
+          position: 'relative',
+          zIndex: 0,
+          display: isMobile && isChatOpen ? 'none' : 'flex',
+          width: isMobile && isChatOpen ? '0%' : '100%',
+          height: isMobile && isChatOpen ? '0%' : '100%',
+        }}
+      >
         <Box
-          direction="Column"
+          grow="Yes"
           style={{
             position: 'relative',
-            overflow: 'hidden',
-            zIndex: 0,
-            display: isMobile && isChatOpen ? 'none' : 'flex',
-            width: isMobile && isChatOpen ? '0%' : '100%',
-            height: isMobile && isChatOpen ? '0%' : '100%',
           }}
         >
-          {activeCallRoomId && roomId && room !== null && (
-            <Box direction="Column" style={{ width: '100%' }}>
-              <PowerLevelsContainer>
-                <RoomViewHeader />
-              </PowerLevelsContainer>
-            </Box>
-          )}
-          <Box
-            grow="Yes"
+          <iframe
+            ref={iframeRef}
             style={{
-              position: 'relative',
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              display: isPrimaryIframe || isViewingActiveCall ? 'flex' : 'none',
+              width: '100%',
+              height: '100%',
+              border: 'none',
             }}
-          >
-            <iframe
-              ref={iframeRef}
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                display: isPrimaryIframe || isViewingActiveCall ? 'flex' : 'none',
-                width: '100%',
-                height: '100%',
-                border: 'none',
-              }}
-              title={`Persistent Element Call`}
-              sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
-              allow="microphone; camera; display-capture; autoplay; clipboard-write;"
-              src="about:blank"
-            />
-            <iframe
-              ref={backupIframeRef}
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-                border: 'none',
+            title={`Persistent Element Call`}
+            sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
+            allow="microphone; camera; display-capture; autoplay; clipboard-write;"
+            src="about:blank"
+          />
+          <iframe
+            ref={backupIframeRef}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              border: 'none',
 
-                display: !isPrimaryIframe || isViewingActiveCall ? 'none' : 'flex',
-              }}
-              title={`Persistent Element Call`}
-              sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
-              allow="microphone; camera; display-capture; autoplay; clipboard-write;"
-              src="about:blank"
-            />
-          </Box>
-        </Box>
-        <Box grow="Yes" direction="Column" style={{ position: 'relative' }}>
-          {isChatOpen && activeCallRoomId && roomId && room !== null && (
-            <PowerLevelsContainer>
-              <RoomView room={room} eventId={eventId} />
-            </PowerLevelsContainer>
-          )}
+              display: !isPrimaryIframe || isViewingActiveCall ? 'none' : 'flex',
+            }}
+            title={`Persistent Element Call`}
+            sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
+            allow="microphone; camera; display-capture; autoplay; clipboard-write;"
+            src="about:blank"
+          />
         </Box>
       </Box>
-    </Page>
+    </Box>
   );
 }

From 3fcf2fef59e3c356a3688428c5981042cbda3665 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 8 May 2025 17:57:45 -0500
Subject: [PATCH 106/242] loosely provide nav handling for testing refactoring

---
 src/app/features/room-nav/RoomNavItem.tsx | 102 +++++++++++-----------
 1 file changed, 52 insertions(+), 50 deletions(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index e31872ed..6bfaac13 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -52,6 +52,7 @@ import {
 } from '../../hooks/useRoomsNotificationPreferences';
 import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
 import { useCallState } from '../../pages/client/CallProvider';
+import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 
 type RoomNavItemMenuProps = {
   room: Room;
@@ -221,10 +222,11 @@ export function RoomNavItem({
   const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
-  const { activeCallRoomId, isChatOpen, toggleChat, hangUp } = useCallState();
+  const { activeCallRoomId, setActiveCallRoomId, isChatOpen, toggleChat, hangUp } = useCallState();
   const typingMember = useRoomTypingMember(room.roomId).filter(
     (receipt) => receipt.userId !== mx.getUserId()
   );
+  const { navigateRoom } = useRoomNavigate();
 
   const handleContextMenu: MouseEventHandler<HTMLElement> = (evt) => {
     evt.preventDefault();
@@ -251,6 +253,9 @@ export function RoomNavItem({
 
     if (room.isCallRoom() && activeCallRoomId !== room.roomId) {
       hangUp();
+      setActiveCallRoomId(room.roomId);
+    } else {
+      navigateRoom(room.roomId);
     }
   };
 
@@ -272,57 +277,54 @@ export function RoomNavItem({
       {...hoverProps}
       {...focusWithinProps}
     >
-      <NavLink to={linkPath} onClick={handleNavItemClick}>
-        {' '}
-        <NavItemContent>
-          <Box as="span" grow="Yes" alignItems="Center" gap="200">
-            <Avatar size="200" radii="400">
-              {showAvatar ? (
-                <RoomAvatar
-                  roomId={room.roomId}
-                  src={
-                    direct
-                      ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
-                      : getRoomAvatarUrl(mx, room, 96, useAuthentication)
-                  }
-                  alt={room.name}
-                  renderFallback={() => (
-                    <Text as="span" size="H6">
-                      {nameInitials(room.name)}
-                    </Text>
-                  )}
-                />
-              ) : (
-                <RoomIcon
-                  style={{ opacity: unread ? config.opacity.P500 : config.opacity.P300 }}
-                  filled={selected}
-                  size="100"
-                  joinRule={room.getJoinRule()}
-                  call={room.isCallRoom()}
-                />
-              )}
-            </Avatar>
-            <Box as="span" grow="Yes">
-              <Text priority={unread ? '500' : '300'} as="span" size="Inherit" truncate>
-                {room.name}
-              </Text>
-            </Box>
-            {!optionsVisible && !unread && !selected && typingMember.length > 0 && (
-              <Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>
-                <TypingIndicator size="300" disableAnimation />
-              </Badge>
-            )}
-            {!optionsVisible && unread && (
-              <UnreadBadgeCenter>
-                <UnreadBadge highlight={unread.highlight > 0} count={unread.total} />
-              </UnreadBadgeCenter>
-            )}
-            {!optionsVisible && notificationMode !== RoomNotificationMode.Unset && (
-              <Icon size="50" src={getRoomNotificationModeIcon(notificationMode)} />
+      <NavItemContent onClick={handleNavItemClick}>
+        <Box as="span" grow="Yes" alignItems="Center" gap="200">
+          <Avatar size="200" radii="400">
+            {showAvatar ? (
+              <RoomAvatar
+                roomId={room.roomId}
+                src={
+                  direct
+                    ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
+                    : getRoomAvatarUrl(mx, room, 96, useAuthentication)
+                }
+                alt={room.name}
+                renderFallback={() => (
+                  <Text as="span" size="H6">
+                    {nameInitials(room.name)}
+                  </Text>
+                )}
+              />
+            ) : (
+              <RoomIcon
+                style={{ opacity: unread ? config.opacity.P500 : config.opacity.P300 }}
+                filled={selected}
+                size="100"
+                joinRule={room.getJoinRule()}
+                call={room.isCallRoom()}
+              />
             )}
+          </Avatar>
+          <Box as="span" grow="Yes">
+            <Text priority={unread ? '500' : '300'} as="span" size="Inherit" truncate>
+              {room.name}
+            </Text>
           </Box>
-        </NavItemContent>
-      </NavLink>
+          {!optionsVisible && !unread && !selected && typingMember.length > 0 && (
+            <Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>
+              <TypingIndicator size="300" disableAnimation />
+            </Badge>
+          )}
+          {!optionsVisible && unread && (
+            <UnreadBadgeCenter>
+              <UnreadBadge highlight={unread.highlight > 0} count={unread.total} />
+            </UnreadBadgeCenter>
+          )}
+          {!optionsVisible && notificationMode !== RoomNotificationMode.Unset && (
+            <Icon size="50" src={getRoomNotificationModeIcon(notificationMode)} />
+          )}
+        </Box>
+      </NavItemContent>
       {optionsVisible && (
         <NavItemOptions>
           <PopOut

From abe79ceb6638af52286cfb1c4758af866f9a5f41 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 8 May 2025 17:57:57 -0500
Subject: [PATCH 107/242] Add CallView

---
 src/app/features/room/CallView.tsx | 142 +++++++++++++++++++++++++++++
 1 file changed, 142 insertions(+)
 create mode 100644 src/app/features/room/CallView.tsx

diff --git a/src/app/features/room/CallView.tsx b/src/app/features/room/CallView.tsx
new file mode 100644
index 00000000..250de98c
--- /dev/null
+++ b/src/app/features/room/CallView.tsx
@@ -0,0 +1,142 @@
+import { Room } from 'matrix-js-sdk';
+import React from 'react';
+import { useCallback, useEffect, useRef } from 'react';
+import { useOutletContext } from 'react-router-dom';
+import { Box } from 'folds';
+import { RoomViewHeader } from './RoomViewHeader';
+
+function debounce<F extends (...args: any[]) => any>(func: F, waitFor: number) {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+  return (...args: Parameters<F>): void => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => func(...args), waitFor);
+  };
+}
+
+type OriginalStyles = {
+  position?: string;
+  top?: string;
+  left?: string;
+  width?: string;
+  height?: string;
+  zIndex?: string;
+  display?: string;
+  visibility?: string;
+  pointerEvents?: string;
+  border?: string;
+};
+
+export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
+  const { iframeRef } = useOutletContext<{
+    iframeRef: React.RefObject<HTMLIFrameElement | null>;
+  }>();
+  const iframeHostRef = useRef<HTMLDivElement>(null);
+
+  const originalIframeStylesRef = useRef<OriginalStyles | null>(null);
+
+  const shouldDisplayCallIFrame =
+    room && typeof room.isCallRoom === 'function' && room.isCallRoom();
+
+  const applyFixedPositioningToIframe = useCallback(() => {
+    const iframeElement = iframeRef?.current;
+    const hostElement = iframeHostRef?.current;
+
+    if (iframeElement && hostElement) {
+      // Save original styles only ONCE per "portaling" session
+      if (!originalIframeStylesRef.current) {
+        const computed = window.getComputedStyle(iframeElement);
+        originalIframeStylesRef.current = {
+          position: iframeElement.style.position || computed.position,
+          top: iframeElement.style.top || computed.top,
+          left: iframeElement.style.left || computed.left,
+          width: iframeElement.style.width || computed.width,
+          height: iframeElement.style.height || computed.height,
+          zIndex: iframeElement.style.zIndex || computed.zIndex,
+          display: iframeElement.style.display || computed.display,
+          visibility: iframeElement.style.visibility || computed.visibility,
+          pointerEvents: iframeElement.style.pointerEvents || computed.pointerEvents,
+          border: iframeElement.style.border || computed.border,
+        };
+      }
+
+      const hostRect = hostElement.getBoundingClientRect();
+
+      // Apply fixed positioning relative to the viewport, but aligned with the host
+      iframeElement.style.position = 'fixed';
+      iframeElement.style.top = `${hostRect.top}px`;
+      iframeElement.style.left = `${hostRect.left}px`;
+      iframeElement.style.width = `${hostRect.width}px`;
+      iframeElement.style.height = `${hostRect.height}px`;
+      iframeElement.style.border = 'none';
+      iframeElement.style.zIndex = '1000'; // Ensure it's on top
+      iframeElement.style.display = 'block';
+      iframeElement.style.visibility = 'visible';
+      iframeElement.style.pointerEvents = 'auto';
+    }
+  }, [iframeRef, iframeHostRef]);
+
+  const debouncedApplyFixedPositioning = useCallback(debounce(applyFixedPositioningToIframe, 50), [
+    applyFixedPositioningToIframe,
+  ]);
+
+  useEffect(() => {
+    const iframeElement = iframeRef?.current;
+    const hostElement = iframeHostRef?.current;
+
+    if (shouldDisplayCallIFrame && iframeElement && hostElement) {
+      applyFixedPositioningToIframe();
+
+      const resizeObserver = new ResizeObserver(debouncedApplyFixedPositioning);
+      resizeObserver.observe(hostElement);
+      window.addEventListener('scroll', debouncedApplyFixedPositioning, true);
+
+      return () => {
+        resizeObserver.disconnect();
+        window.removeEventListener('scroll', debouncedApplyFixedPositioning, true);
+
+        if (iframeElement && originalIframeStylesRef.current) {
+          const originalStyles = originalIframeStylesRef.current;
+          (Object.keys(originalStyles) as Array<keyof OriginalStyles>).forEach((key) => {
+            iframeElement.style[key] = originalStyles[key] || '';
+          });
+        }
+        originalIframeStylesRef.current = null;
+      };
+    }
+    if (iframeElement && originalIframeStylesRef.current) {
+      const originalStyles = originalIframeStylesRef.current;
+      (Object.keys(originalStyles) as Array<keyof OriginalStyles>).forEach((key) => {
+        iframeElement.style[key] = originalStyles[key] || '';
+      });
+      originalIframeStylesRef.current = null;
+    }
+  }, [
+    shouldDisplayCallIFrame,
+    iframeRef,
+    applyFixedPositioningToIframe,
+    debouncedApplyFixedPositioning,
+  ]);
+
+  return (
+    <Box
+      direction="Column"
+      style={{
+        width: '60%',
+        display: room.isCallRoom() ? 'flex' : 'none',
+      }}
+    >
+      <RoomViewHeader />
+      <div
+        ref={iframeHostRef}
+        style={{
+          width: '100%',
+          height: '100%',
+          position: 'relative',
+          pointerEvents: 'none',
+        }}
+      />
+    </Box>
+  );
+}

From c05421efb752b8c961341fa74c4ebac370b4e885 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 8 May 2025 17:59:01 -0500
Subject: [PATCH 108/242] Update to funnel Outlet context through for Call
 handling (might not be the best approach, but removes code replication in
 PersistentCallContainer where we were remaking the roomview entirely)

---
 src/app/pages/Router.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index da88354c..53cfd0f2 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -125,9 +125,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                               <SidebarNav />
                             </MobileFriendlyClientNav>
                           }
-                        >
-                          <Outlet />
-                        </ClientLayout>
+                        />
                         <CallActivationEffect />
                       </CallProvider>
                       <RoomSettingsRenderer />
@@ -204,9 +202,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                     <Space />
                   </MobileFriendlyPageNav>
                 }
-              >
-                <Outlet />
-              </PageRoot>
+              ></PageRoot>
             </RouteSpaceProvider>
           }
         >

From 1bd593b530cdaac6c0c1b4e44dc91e03a56f14cf Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 8 May 2025 17:59:51 -0500
Subject: [PATCH 109/242] update client layout to funnel outlet the iframes for
 the call container

---
 src/app/pages/client/ClientLayout.tsx | 38 ++++++++++++++++++++++-----
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/app/pages/client/ClientLayout.tsx b/src/app/pages/client/ClientLayout.tsx
index 9aa431a8..62ba0e05 100644
--- a/src/app/pages/client/ClientLayout.tsx
+++ b/src/app/pages/client/ClientLayout.tsx
@@ -1,9 +1,11 @@
-import React, { ReactNode, useMemo } from 'react';
+import React, { ReactNode, useMemo, useRef } from 'react';
 import { Box } from 'folds';
-import { useParams } from 'react-router-dom';
+import { Outlet, useParams } from 'react-router-dom';
 import { useCallState } from './CallProvider';
 import { PersistentCallContainer } from '../call/PersistentCallContainer';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { ClientWidgetApi } from 'matrix-widget-api';
+import { SmallWidget } from '../../features/room/SmallWidget';
 
 type ClientLayoutProps = {
   nav: ReactNode;
@@ -11,6 +13,13 @@ type ClientLayoutProps = {
 };
 export function ClientLayout({ nav, children }: ClientLayoutProps) {
   const { activeCallRoomId } = useCallState();
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const widgetApiRef = useRef<ClientWidgetApi | null>(null);
+  const smallWidgetRef = useRef<SmallWidget | null>(null);
+
+  const backupIframeRef = useRef<HTMLIFrameElement | null>(null);
+  const backupWidgetApiRef = useRef<ClientWidgetApi | null>(null);
+  const backupSmallWidgetRef = useRef<SmallWidget | null>(null);
   const { roomIdOrAlias: viewedRoomId } = useParams();
   const mx = useMatrixClient();
   const isCall = mx.getRoom(viewedRoomId)?.isCallRoom();
@@ -22,21 +31,38 @@ export function ClientLayout({ nav, children }: ClientLayoutProps) {
       </Box>
       <Box grow="Yes" direction="Column" style={{ position: 'relative', overflowY: 'auto' }}>
         <Box grow="Yes" style={{ position: 'relative' }}>
+          <PersistentCallContainer
+            isVisible={false}
+            viewedRoomId={viewedRoomId}
+            iframeRef={iframeRef}
+            widgetApiRef={widgetApiRef}
+            smallWidgetRef={smallWidgetRef}
+            backupIframeRef={backupIframeRef}
+            backupWidgetApiRef={backupWidgetApiRef}
+            backupSmallWidgetRef={backupSmallWidgetRef}
+          />
           <Box
             grow="Yes"
             style={{
-              display: isCall ? 'none' : 'flex',
               flexDirection: 'column',
               width: '100%',
               height: '100%',
             }}
             className="outlet-wrapper"
           >
-            {children}
+            <Outlet
+              context={{
+                iframeRef,
+                widgetApiRef,
+                smallWidgetRef,
+                backupIframeRef,
+                backupWidgetApiRef,
+                backupSmallWidgetRef,
+              }}
+            />
           </Box>
-          <PersistentCallContainer isVisible={isCall} viewedRoomId={viewedRoomId} />
         </Box>
-      </Box>{' '}
+      </Box>
     </Box>
   );
 }

From 8b50ac150b80ba534ce8d33052060d482839de00 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 8 May 2025 18:00:16 -0500
Subject: [PATCH 110/242] funnel through just iframe for now for testing sake

---
 src/app/components/page/Page.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/components/page/Page.tsx b/src/app/components/page/Page.tsx
index 55ccecee..46abf313 100644
--- a/src/app/components/page/Page.tsx
+++ b/src/app/components/page/Page.tsx
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import { ContainerColor } from '../../styles/ContainerColor.css';
 import * as css from './style.css';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+import { Outlet, useOutletContext } from 'react-router-dom';
 
 type PageRootProps = {
   nav: ReactNode;
@@ -12,6 +13,7 @@ type PageRootProps = {
 
 export function PageRoot({ nav, children }: PageRootProps) {
   const screenSize = useScreenSizeContext();
+  const { iframeRef } = useOutletContext();
 
   return (
     <Box grow="Yes" className={ContainerColor({ variant: 'Background' })}>
@@ -19,7 +21,7 @@ export function PageRoot({ nav, children }: PageRootProps) {
       {screenSize !== ScreenSize.Mobile && (
         <Line variant="Background" size="300" direction="Vertical" />
       )}
-      {children}
+      <Outlet context={{ iframeRef }} />
     </Box>
   );
 }

From 43ce6f0210c2b76a0418127644a23bc51c9e05fc Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 8 May 2025 18:01:27 -0500
Subject: [PATCH 111/242] Update room to use CallView

---
 src/app/features/room/Room.tsx | 41 ++++++++++++++++++++++++++--------
 1 file changed, 32 insertions(+), 9 deletions(-)

diff --git a/src/app/features/room/Room.tsx b/src/app/features/room/Room.tsx
index ffc21857..d2fea381 100644
--- a/src/app/features/room/Room.tsx
+++ b/src/app/features/room/Room.tsx
@@ -13,6 +13,7 @@ import { useKeyDown } from '../../hooks/useKeyDown';
 import { markAsRead } from '../../../client/action/notifications';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomMembers } from '../../hooks/useRoomMembers';
+import { CallView } from './CallView';
 
 export function Room() {
   const { eventId } = useParams();
@@ -23,7 +24,7 @@ export function Room() {
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const screenSize = useScreenSizeContext();
   const powerLevels = usePowerLevels(room);
-  const members = useRoomMembers(mx, room.roomId);
+  const members = useRoomMembers(mx, room?.roomId);
 
   useKeyDown(
     window,
@@ -39,14 +40,36 @@ export function Room() {
 
   return (
     <PowerLevelsContextProvider value={powerLevels}>
-      <Box grow="Yes">
-        <RoomView room={room} eventId={eventId} />
-        {screenSize === ScreenSize.Desktop && isDrawer && (
-          <>
-            <Line variant="Background" direction="Vertical" size="300" />
-            <MembersDrawer key={room.roomId} room={room} members={members} />
-          </>
-        )}
+      <Box
+        grow="Yes"
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'row',
+        }}
+      >
+        <CallView room={room} eventId={eventId} />
+
+        <Box
+          grow="Yes"
+          style={{
+            width: room.isCallRoom() ? '50%' : '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+          }}
+        >
+          <Box style={{ flex: 1, minHeight: 0, overflowY: 'auto', background: '#fff' }}>
+            <RoomView room={room} eventId={eventId} />
+          </Box>
+          {screenSize === ScreenSize.Desktop && isDrawer && (
+            <>
+              <Line variant="Background" direction="Vertical" size="300" />
+              <MembersDrawer key={room.roomId} room={room} members={members} />
+            </>
+          )}
+        </Box>
       </Box>
     </PowerLevelsContextProvider>
   );

From 8b2fa10679d3bd35f3f5ed3443847f5a840c2bd7 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 8 May 2025 18:41:26 -0500
Subject: [PATCH 112/242] Pass forward the backupIframeRef now

---
 src/app/components/page/Page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/page/Page.tsx b/src/app/components/page/Page.tsx
index 46abf313..c243e4b2 100644
--- a/src/app/components/page/Page.tsx
+++ b/src/app/components/page/Page.tsx
@@ -1,10 +1,10 @@
 import React, { ComponentProps, MutableRefObject, ReactNode } from 'react';
 import { Box, Header, Line, Scroll, Text, as } from 'folds';
 import classNames from 'classnames';
+import { Outlet, useOutletContext } from 'react-router-dom';
 import { ContainerColor } from '../../styles/ContainerColor.css';
 import * as css from './style.css';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
-import { Outlet, useOutletContext } from 'react-router-dom';
 
 type PageRootProps = {
   nav: ReactNode;
@@ -13,7 +13,7 @@ type PageRootProps = {
 
 export function PageRoot({ nav, children }: PageRootProps) {
   const screenSize = useScreenSizeContext();
-  const { iframeRef } = useOutletContext();
+  const { iframeRef, backupIframeRef } = useOutletContext();
 
   return (
     <Box grow="Yes" className={ContainerColor({ variant: 'Background' })}>
@@ -21,7 +21,7 @@ export function PageRoot({ nav, children }: PageRootProps) {
       {screenSize !== ScreenSize.Mobile && (
         <Line variant="Background" size="300" direction="Vertical" />
       )}
-      <Outlet context={{ iframeRef }} />
+      <Outlet context={{ iframeRef, backupIframeRef }} />
     </Box>
   );
 }

From 0be5fb97328e339bb681e0cce990c7ad5a015239 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 9 May 2025 09:35:13 -0500
Subject: [PATCH 113/242] remove unused params

---
 src/app/pages/client/ClientLayout.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/app/pages/client/ClientLayout.tsx b/src/app/pages/client/ClientLayout.tsx
index 62ba0e05..6eb038d8 100644
--- a/src/app/pages/client/ClientLayout.tsx
+++ b/src/app/pages/client/ClientLayout.tsx
@@ -9,9 +9,8 @@ import { SmallWidget } from '../../features/room/SmallWidget';
 
 type ClientLayoutProps = {
   nav: ReactNode;
-  children: ReactNode;
 };
-export function ClientLayout({ nav, children }: ClientLayoutProps) {
+export function ClientLayout({ nav }: ClientLayoutProps) {
   const { activeCallRoomId } = useCallState();
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
   const widgetApiRef = useRef<ClientWidgetApi | null>(null);
@@ -53,11 +52,7 @@ export function ClientLayout({ nav, children }: ClientLayoutProps) {
             <Outlet
               context={{
                 iframeRef,
-                widgetApiRef,
-                smallWidgetRef,
                 backupIframeRef,
-                backupWidgetApiRef,
-                backupSmallWidgetRef,
               }}
             />
           </Box>

From a690dbd2caf475c13a9c3e04318be17d49c19c1d Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 9 May 2025 09:38:43 -0500
Subject: [PATCH 114/242] Add backupIframeRef so we can re-add the lobby screen
 for non-joined calls (for viewing their text channels)

---
 src/app/features/room/CallView.tsx | 54 ++++++++++++++++--------------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/app/features/room/CallView.tsx b/src/app/features/room/CallView.tsx
index 250de98c..01c24940 100644
--- a/src/app/features/room/CallView.tsx
+++ b/src/app/features/room/CallView.tsx
@@ -1,9 +1,10 @@
 import { Room } from 'matrix-js-sdk';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useCallback, useEffect, useRef } from 'react';
 import { useOutletContext } from 'react-router-dom';
 import { Box } from 'folds';
 import { RoomViewHeader } from './RoomViewHeader';
+import { useCallState } from '../../pages/client/CallProvider';
 
 function debounce<F extends (...args: any[]) => any>(func: F, waitFor: number) {
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
@@ -28,23 +29,30 @@ type OriginalStyles = {
   border?: string;
 };
 
+interface CallViewOutletContext {
+  iframeRef: React.RefObject<HTMLIFrameElement | null>;
+  backupIframeRef: React.RefObject<HTMLIFrameElement | null>;
+}
+
 export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
-  const { iframeRef } = useOutletContext<{
-    iframeRef: React.RefObject<HTMLIFrameElement | null>;
-  }>();
+  const { iframeRef, backupIframeRef } = useOutletContext<CallViewOutletContext>();
   const iframeHostRef = useRef<HTMLDivElement>(null);
 
   const originalIframeStylesRef = useRef<OriginalStyles | null>(null);
+  const { activeCallRoomId, isPrimaryIframe } = useCallState();
+  const isViewingActiveCall = useMemo(
+    () => activeCallRoomId !== null && activeCallRoomId === room.roomId,
+    [activeCallRoomId]
+  );
 
-  const shouldDisplayCallIFrame =
-    room && typeof room.isCallRoom === 'function' && room.isCallRoom();
+  const activeIframeDisplayRef =
+    !isPrimaryIframe || isViewingActiveCall ? iframeRef : backupIframeRef;
 
   const applyFixedPositioningToIframe = useCallback(() => {
-    const iframeElement = iframeRef?.current;
+    const iframeElement = activeIframeDisplayRef?.current;
     const hostElement = iframeHostRef?.current;
 
     if (iframeElement && hostElement) {
-      // Save original styles only ONCE per "portaling" session
       if (!originalIframeStylesRef.current) {
         const computed = window.getComputedStyle(iframeElement);
         originalIframeStylesRef.current = {
@@ -63,29 +71,27 @@ export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
 
       const hostRect = hostElement.getBoundingClientRect();
 
-      // Apply fixed positioning relative to the viewport, but aligned with the host
       iframeElement.style.position = 'fixed';
       iframeElement.style.top = `${hostRect.top}px`;
       iframeElement.style.left = `${hostRect.left}px`;
       iframeElement.style.width = `${hostRect.width}px`;
       iframeElement.style.height = `${hostRect.height}px`;
       iframeElement.style.border = 'none';
-      iframeElement.style.zIndex = '1000'; // Ensure it's on top
+      iframeElement.style.zIndex = '1000';
       iframeElement.style.display = 'block';
       iframeElement.style.visibility = 'visible';
       iframeElement.style.pointerEvents = 'auto';
     }
-  }, [iframeRef, iframeHostRef]);
+  }, [activeIframeDisplayRef, iframeHostRef]);
 
   const debouncedApplyFixedPositioning = useCallback(debounce(applyFixedPositioningToIframe, 50), [
     applyFixedPositioningToIframe,
   ]);
-
   useEffect(() => {
-    const iframeElement = iframeRef?.current;
+    const iframeElement = activeIframeDisplayRef?.current;
     const hostElement = iframeHostRef?.current;
 
-    if (shouldDisplayCallIFrame && iframeElement && hostElement) {
+    if (isPrimaryIframe || (isViewingActiveCall && iframeElement && hostElement)) {
       applyFixedPositioningToIframe();
 
       const resizeObserver = new ResizeObserver(debouncedApplyFixedPositioning);
@@ -99,32 +105,30 @@ export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
         if (iframeElement && originalIframeStylesRef.current) {
           const originalStyles = originalIframeStylesRef.current;
           (Object.keys(originalStyles) as Array<keyof OriginalStyles>).forEach((key) => {
-            iframeElement.style[key] = originalStyles[key] || '';
+            if (key in iframeElement.style) {
+              iframeElement.style[key as any] = originalStyles[key] || '';
+            }
           });
         }
         originalIframeStylesRef.current = null;
       };
     }
-    if (iframeElement && originalIframeStylesRef.current) {
-      const originalStyles = originalIframeStylesRef.current;
-      (Object.keys(originalStyles) as Array<keyof OriginalStyles>).forEach((key) => {
-        iframeElement.style[key] = originalStyles[key] || '';
-      });
-      originalIframeStylesRef.current = null;
-    }
   }, [
-    shouldDisplayCallIFrame,
-    iframeRef,
+    activeIframeDisplayRef,
     applyFixedPositioningToIframe,
     debouncedApplyFixedPositioning,
+    isPrimaryIframe,
+    isViewingActiveCall,
   ]);
 
+  const isCallViewVisible = room.isCallRoom();
+
   return (
     <Box
       direction="Column"
       style={{
         width: '60%',
-        display: room.isCallRoom() ? 'flex' : 'none',
+        display: isCallViewVisible ? 'flex' : 'none',
       }}
     >
       <RoomViewHeader />

From 671430077915b51d30847ed9812c9a9784f5c2b5 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 9 May 2025 11:12:48 -0500
Subject: [PATCH 115/242] Remove unused imports and restructure to support
 being parent to clientlayout

---
 .../pages/call/PersistentCallContainer.tsx    | 136 ++++++++----------
 1 file changed, 61 insertions(+), 75 deletions(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index 567a72ea..61849416 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -1,7 +1,8 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { createContext, ReactNode, useEffect, useMemo, useRef } from 'react';
 import { logger } from 'matrix-js-sdk/lib/logger';
-import { ClientWidgetApi, IWidgetApiRequest } from 'matrix-widget-api';
+import { ClientWidgetApi } from 'matrix-widget-api';
 import { Box } from 'folds';
+import { Outlet, useParams } from 'react-router-dom';
 import { useCallState } from '../client/CallProvider';
 import {
   createVirtualWidget,
@@ -10,49 +11,38 @@ import {
   getWidgetUrl,
 } from '../../features/room/SmallWidget';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { RoomViewHeader } from '../../features/room/RoomViewHeader';
-import { Page, PageRoot } from '../../components/page';
-import { RouteSpaceProvider, Space, SpaceRouteRoomProvider } from '../client/space';
-import { MobileFriendlyPageNav } from '../MobileFriendly';
-import { SPACE_PATH } from '../paths';
-import { PowerLevelsContextProvider, usePowerLevels } from '../../hooks/usePowerLevels';
 import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
 import { useClientConfig } from '../../hooks/useClientConfig';
-import { RoomView } from '../../features/room/RoomView';
-import { useParams } from 'react-router-dom';
-import { PowerLevelsContainer } from './PowerLevelsContainer';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 
 interface PersistentCallContainerProps {
-  isVisible: boolean;
-  viewedRoomId: string;
+  children: ReactNode;
 }
 
-export function PersistentCallContainer({
-  isVisible,
-  viewedRoomId,
-  iframeRef,
-  widgetApiRef,
-  smallWidgetRef,
-  backupIframeRef,
-  backupWidgetApiRef,
-  backupSmallWidgetRef,
-}: PersistentCallContainerProps) {
+export const RefContext = createContext(null);
+
+export function PersistentCallContainer({ children }: PersistentCallContainerProps) {
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const widgetApiRef = useRef<ClientWidgetApi | null>(null);
+  const smallWidgetRef = useRef<SmallWidget | null>(null);
+
+  const backupIframeRef = useRef<HTMLIFrameElement | null>(null);
+  const backupWidgetApiRef = useRef<ClientWidgetApi | null>(null);
+  const backupSmallWidgetRef = useRef<SmallWidget | null>(null);
   const {
     activeCallRoomId,
     isChatOpen,
     isCallActive,
     isPrimaryIframe,
-    setActiveCallRoomId,
     registerActiveClientWidgetApi,
   } = useCallState();
-  const { eventId } = useParams();
   const mx = useMatrixClient();
   const roomId = useSelectedRoom();
   const clientConfig = useClientConfig();
   const room = mx.getRoom(roomId) ?? null;
   const screenSize = useScreenSizeContext();
   const isMobile = screenSize === ScreenSize.Mobile;
+  const { roomIdOrAlias: viewedRoomId } = useParams();
   const isViewingActiveCall = useMemo(
     () => activeCallRoomId !== null && activeCallRoomId === viewedRoomId,
     [activeCallRoomId, viewedRoomId]
@@ -164,66 +154,62 @@ export function PersistentCallContainer({
     setupWidget(backupWidgetApiRef, backupSmallWidgetRef, backupIframeRef, false);
   });
 
-  const containerStyle: React.CSSProperties = {
-    width: '100%',
-    height: '100%',
-    display: isVisible ? 'flex' : 'none',
-    flexDirection: 'row',
-  };
-
   return (
-    <Box direction="Row" grow="Yes" style={{ height: '0%', width: '0%' }}>
-      <Box
-        direction="Column"
-        style={{
-          position: 'relative',
-          zIndex: 0,
-          display: isMobile && isChatOpen ? 'none' : 'flex',
-          width: isMobile && isChatOpen ? '0%' : '100%',
-          height: isMobile && isChatOpen ? '0%' : '100%',
-        }}
-      >
+    <RefContext.Provider value={{ iframeRef, backupIframeRef }}>
+      <Box grow="No">
         <Box
-          grow="Yes"
+          direction="Column"
           style={{
             position: 'relative',
+            zIndex: 0,
+            display: isMobile && isChatOpen ? 'none' : 'flex',
+            width: isMobile && isChatOpen ? '0%' : '100%',
+            height: isMobile && isChatOpen ? '0%' : '100%',
           }}
         >
-          <iframe
-            ref={iframeRef}
+          <Box
+            grow="Yes"
             style={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              display: isPrimaryIframe || isViewingActiveCall ? 'flex' : 'none',
-              width: '100%',
-              height: '100%',
-              border: 'none',
+              position: 'relative',
             }}
-            title={`Persistent Element Call`}
-            sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
-            allow="microphone; camera; display-capture; autoplay; clipboard-write;"
-            src="about:blank"
-          />
-          <iframe
-            ref={backupIframeRef}
-            style={{
-              position: 'absolute',
-              top: 0,
-              left: 0,
-              width: '100%',
-              height: '100%',
-              border: 'none',
+          >
+            <iframe
+              ref={iframeRef}
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                display: isPrimaryIframe || isViewingActiveCall ? 'none' : 'none',
+                width: '100%',
+                height: '100%',
+                border: 'none',
+              }}
+              title={`Persistent Element Call`}
+              sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
+              allow="microphone; camera; display-capture; autoplay; clipboard-write;"
+              src="about:blank"
+            />
+            <iframe
+              ref={backupIframeRef}
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                border: 'none',
 
-              display: !isPrimaryIframe || isViewingActiveCall ? 'none' : 'flex',
-            }}
-            title={`Persistent Element Call`}
-            sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
-            allow="microphone; camera; display-capture; autoplay; clipboard-write;"
-            src="about:blank"
-          />
+                display: !isPrimaryIframe || isViewingActiveCall ? 'none' : 'flex',
+              }}
+              title={`Persistent Element Call`}
+              sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
+              allow="microphone; camera; display-capture; autoplay; clipboard-write;"
+              src="about:blank"
+            />
+          </Box>
         </Box>
       </Box>
-    </Box>
+      {children}
+    </RefContext.Provider>
   );
 }

From eea8ffea0505b3a4fa2afe884d9b047929965034 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 9 May 2025 11:13:30 -0500
Subject: [PATCH 116/242] Re-add layout as we're no longer oddly passing outlet
 context

---
 src/app/pages/Router.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index 53cfd0f2..879062e9 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -63,6 +63,7 @@ import { ClientRoomsNotificationPreferences } from './client/ClientRoomsNotifica
 import { SpaceSettingsRenderer } from '../features/space-settings';
 import { CallProvider } from './client/CallProvider';
 import { CallActivationEffect } from './call/CallActivation';
+import { PersistentCallContainer } from './call/PersistentCallContainer';
 
 export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {
   const { hashRouter } = clientConfig;
@@ -125,7 +126,11 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                               <SidebarNav />
                             </MobileFriendlyClientNav>
                           }
-                        />
+                        >
+                          <PersistentCallContainer>
+                            <Outlet />
+                          </PersistentCallContainer>
+                        </ClientLayout>
                         <CallActivationEffect />
                       </CallProvider>
                       <RoomSettingsRenderer />
@@ -202,7 +207,9 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                     <Space />
                   </MobileFriendlyPageNav>
                 }
-              ></PageRoot>
+              >
+                <Outlet />
+              </PageRoot>
             </RouteSpaceProvider>
           }
         >

From 807c90e2f57ac5b54c8720bfb864667673fe5aa4 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 9 May 2025 11:14:08 -0500
Subject: [PATCH 117/242] swap to using ref provider context from to connect to
 persistentcallcontainer more directly

---
 src/app/features/room/CallView.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/features/room/CallView.tsx b/src/app/features/room/CallView.tsx
index 01c24940..a60d7c59 100644
--- a/src/app/features/room/CallView.tsx
+++ b/src/app/features/room/CallView.tsx
@@ -1,10 +1,10 @@
 import { Room } from 'matrix-js-sdk';
-import React, { useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import { useCallback, useEffect, useRef } from 'react';
-import { useOutletContext } from 'react-router-dom';
 import { Box } from 'folds';
 import { RoomViewHeader } from './RoomViewHeader';
 import { useCallState } from '../../pages/client/CallProvider';
+import { RefContext } from '../../pages/call/PersistentCallContainer';
 
 function debounce<F extends (...args: any[]) => any>(func: F, waitFor: number) {
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
@@ -35,7 +35,7 @@ interface CallViewOutletContext {
 }
 
 export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
-  const { iframeRef, backupIframeRef } = useOutletContext<CallViewOutletContext>();
+  const { iframeRef, backupIframeRef } = useContext(RefContext);
   const iframeHostRef = useRef<HTMLDivElement>(null);
 
   const originalIframeStylesRef = useRef<OriginalStyles | null>(null);

From 4293538dc3603e190da1f2ce10a40cf4a5c8c52c Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 9 May 2025 11:16:13 -0500
Subject: [PATCH 118/242] Revert to original code as we've moved calling to be
 more inline with design

---
 src/app/pages/client/ClientLayout.tsx | 60 +++------------------------
 1 file changed, 6 insertions(+), 54 deletions(-)

diff --git a/src/app/pages/client/ClientLayout.tsx b/src/app/pages/client/ClientLayout.tsx
index 6eb038d8..4a077ba6 100644
--- a/src/app/pages/client/ClientLayout.tsx
+++ b/src/app/pages/client/ClientLayout.tsx
@@ -1,63 +1,15 @@
-import React, { ReactNode, useMemo, useRef } from 'react';
+import React, { ReactNode } from 'react';
 import { Box } from 'folds';
-import { Outlet, useParams } from 'react-router-dom';
-import { useCallState } from './CallProvider';
-import { PersistentCallContainer } from '../call/PersistentCallContainer';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { ClientWidgetApi } from 'matrix-widget-api';
-import { SmallWidget } from '../../features/room/SmallWidget';
 
 type ClientLayoutProps = {
   nav: ReactNode;
+  children: ReactNode;
 };
-export function ClientLayout({ nav }: ClientLayoutProps) {
-  const { activeCallRoomId } = useCallState();
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
-  const widgetApiRef = useRef<ClientWidgetApi | null>(null);
-  const smallWidgetRef = useRef<SmallWidget | null>(null);
-
-  const backupIframeRef = useRef<HTMLIFrameElement | null>(null);
-  const backupWidgetApiRef = useRef<ClientWidgetApi | null>(null);
-  const backupSmallWidgetRef = useRef<SmallWidget | null>(null);
-  const { roomIdOrAlias: viewedRoomId } = useParams();
-  const mx = useMatrixClient();
-  const isCall = mx.getRoom(viewedRoomId)?.isCallRoom();
-
+export function ClientLayout({ nav, children }: ClientLayoutProps) {
   return (
-    <Box grow="Yes" direction="Row" style={{ height: '100vh', width: '100vw', overflow: 'hidden' }}>
-      <Box shrink="No" className="nav-container-styles">
-        {nav}
-      </Box>
-      <Box grow="Yes" direction="Column" style={{ position: 'relative', overflowY: 'auto' }}>
-        <Box grow="Yes" style={{ position: 'relative' }}>
-          <PersistentCallContainer
-            isVisible={false}
-            viewedRoomId={viewedRoomId}
-            iframeRef={iframeRef}
-            widgetApiRef={widgetApiRef}
-            smallWidgetRef={smallWidgetRef}
-            backupIframeRef={backupIframeRef}
-            backupWidgetApiRef={backupWidgetApiRef}
-            backupSmallWidgetRef={backupSmallWidgetRef}
-          />
-          <Box
-            grow="Yes"
-            style={{
-              flexDirection: 'column',
-              width: '100%',
-              height: '100%',
-            }}
-            className="outlet-wrapper"
-          >
-            <Outlet
-              context={{
-                iframeRef,
-                backupIframeRef,
-              }}
-            />
-          </Box>
-        </Box>
-      </Box>
+    <Box grow="Yes">
+      <Box shrink="No">{nav}</Box>
+      <Box grow="Yes">{children}</Box>
     </Box>
   );
 }

From 00ac8f654a985ec73c8bf176c446528f1bfc5a00 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 9 May 2025 11:17:46 -0500
Subject: [PATCH 119/242] Revert to original code as we've moved the outlet
 context passing out and made more direct use of the ref

---
 src/app/components/page/Page.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/app/components/page/Page.tsx b/src/app/components/page/Page.tsx
index c243e4b2..55ccecee 100644
--- a/src/app/components/page/Page.tsx
+++ b/src/app/components/page/Page.tsx
@@ -1,7 +1,6 @@
 import React, { ComponentProps, MutableRefObject, ReactNode } from 'react';
 import { Box, Header, Line, Scroll, Text, as } from 'folds';
 import classNames from 'classnames';
-import { Outlet, useOutletContext } from 'react-router-dom';
 import { ContainerColor } from '../../styles/ContainerColor.css';
 import * as css from './style.css';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
@@ -13,7 +12,6 @@ type PageRootProps = {
 
 export function PageRoot({ nav, children }: PageRootProps) {
   const screenSize = useScreenSizeContext();
-  const { iframeRef, backupIframeRef } = useOutletContext();
 
   return (
     <Box grow="Yes" className={ContainerColor({ variant: 'Background' })}>
@@ -21,7 +19,7 @@ export function PageRoot({ nav, children }: PageRootProps) {
       {screenSize !== ScreenSize.Mobile && (
         <Line variant="Background" size="300" direction="Vertical" />
       )}
-      <Outlet context={{ iframeRef, backupIframeRef }} />
+      {children}
     </Box>
   );
 }

From ae9cc7a5486bb5595d634ff5c9f69e5aeee9433f Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 9 May 2025 14:17:25 -0500
Subject: [PATCH 120/242] Fix unexpected visibility in non-room areas

---
 src/app/features/room/CallView.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/features/room/CallView.tsx b/src/app/features/room/CallView.tsx
index a60d7c59..cbd304c6 100644
--- a/src/app/features/room/CallView.tsx
+++ b/src/app/features/room/CallView.tsx
@@ -78,7 +78,7 @@ export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
       iframeElement.style.height = `${hostRect.height}px`;
       iframeElement.style.border = 'none';
       iframeElement.style.zIndex = '1000';
-      iframeElement.style.display = 'block';
+      iframeElement.style.display = room.isCallRoom() ? 'block' : 'none';
       iframeElement.style.visibility = 'visible';
       iframeElement.style.pointerEvents = 'auto';
     }
@@ -139,6 +139,7 @@ export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
           height: '100%',
           position: 'relative',
           pointerEvents: 'none',
+          display: isCallViewVisible ? 'flex' : 'none',
         }}
       />
     </Box>

From 1cdc0680e8a9dcab2c1258a7565b78f1cf489de5 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 9 May 2025 14:17:39 -0500
Subject: [PATCH 121/242] correctly provide visibility

---
 src/app/pages/call/PersistentCallContainer.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index 61849416..593446ad 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -179,7 +179,7 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
                 position: 'absolute',
                 top: 0,
                 left: 0,
-                display: isPrimaryIframe || isViewingActiveCall ? 'none' : 'none',
+                display: isPrimaryIframe || isViewingActiveCall ? 'flex' : 'none',
                 width: '100%',
                 height: '100%',
                 border: 'none',
@@ -198,8 +198,7 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
                 width: '100%',
                 height: '100%',
                 border: 'none',
-
-                display: !isPrimaryIframe || isViewingActiveCall ? 'none' : 'flex',
+                display: !isPrimaryIframe || isViewingActiveCall ? 'flex' : 'none',
               }}
               title={`Persistent Element Call`}
               sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"

From 9ae7c318ab1604b891091ea17a5da3b9d4601e21 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 10 May 2025 08:58:03 -0500
Subject: [PATCH 122/242] re-add mobile chat handling

---
 src/app/features/room/CallView.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app/features/room/CallView.tsx b/src/app/features/room/CallView.tsx
index cbd304c6..d6539369 100644
--- a/src/app/features/room/CallView.tsx
+++ b/src/app/features/room/CallView.tsx
@@ -5,6 +5,7 @@ import { Box } from 'folds';
 import { RoomViewHeader } from './RoomViewHeader';
 import { useCallState } from '../../pages/client/CallProvider';
 import { RefContext } from '../../pages/call/PersistentCallContainer';
+import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 
 function debounce<F extends (...args: any[]) => any>(func: F, waitFor: number) {
   let timeoutId: ReturnType<typeof setTimeout> | null = null;
@@ -39,12 +40,15 @@ export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
   const iframeHostRef = useRef<HTMLDivElement>(null);
 
   const originalIframeStylesRef = useRef<OriginalStyles | null>(null);
-  const { activeCallRoomId, isPrimaryIframe } = useCallState();
+  const { activeCallRoomId, isPrimaryIframe, isChatOpen } = useCallState();
   const isViewingActiveCall = useMemo(
     () => activeCallRoomId !== null && activeCallRoomId === room.roomId,
     [activeCallRoomId]
   );
 
+  const screenSize = useScreenSizeContext();
+  const isMobile = screenSize === ScreenSize.Mobile;
+
   const activeIframeDisplayRef =
     !isPrimaryIframe || isViewingActiveCall ? iframeRef : backupIframeRef;
 
@@ -127,8 +131,8 @@ export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
     <Box
       direction="Column"
       style={{
-        width: '60%',
-        display: isCallViewVisible ? 'flex' : 'none',
+        width: isChatOpen ? (isMobile ? '50%' : '100%') : '100%',
+        display: isCallViewVisible ? (isMobile && isChatOpen ? 'none' : 'flex') : 'none',
       }}
     >
       <RoomViewHeader />

From cd233053bc985900329a6574c3caeb903c52a2f7 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 10 May 2025 08:58:32 -0500
Subject: [PATCH 123/242] Improve call room view stability

---
 src/app/features/room/Room.tsx | 41 ++++++++++++++++++----------------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/app/features/room/Room.tsx b/src/app/features/room/Room.tsx
index d2fea381..7c755c54 100644
--- a/src/app/features/room/Room.tsx
+++ b/src/app/features/room/Room.tsx
@@ -14,6 +14,7 @@ import { markAsRead } from '../../../client/action/notifications';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomMembers } from '../../hooks/useRoomMembers';
 import { CallView } from './CallView';
+import { useCallState } from '../../pages/client/CallProvider';
 
 export function Room() {
   const { eventId } = useParams();
@@ -22,6 +23,7 @@ export function Room() {
 
   const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+  const { isChatOpen } = useCallState();
   const screenSize = useScreenSizeContext();
   const powerLevels = usePowerLevels(room);
   const members = useRoomMembers(mx, room?.roomId);
@@ -50,26 +52,27 @@ export function Room() {
         }}
       >
         <CallView room={room} eventId={eventId} />
-
-        <Box
-          grow="Yes"
-          style={{
-            width: room.isCallRoom() ? '50%' : '100%',
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-          }}
-        >
-          <Box style={{ flex: 1, minHeight: 0, overflowY: 'auto', background: '#fff' }}>
-            <RoomView room={room} eventId={eventId} />
+        {(!room.isCallRoom() || isChatOpen) && (
+          <Box
+            grow="Yes"
+            style={{
+              width: room.isCallRoom() ? (isChatOpen ? '40%' : '0%') : '100%',
+              height: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+            }}
+          >
+            <Box style={{ flex: 1, minHeight: 0, overflowY: 'auto', background: '#fff' }}>
+              <RoomView room={room} eventId={eventId} />
+            </Box>
+            {screenSize === ScreenSize.Desktop && isDrawer && (
+              <>
+                <Line variant="Background" direction="Vertical" size="300" />
+                <MembersDrawer key={room.roomId} room={room} members={members} />
+              </>
+            )}
           </Box>
-          {screenSize === ScreenSize.Desktop && isDrawer && (
-            <>
-              <Line variant="Background" direction="Vertical" size="300" />
-              <MembersDrawer key={room.roomId} room={room} members={members} />
-            </>
-          )}
-        </Box>
+        )}
       </Box>
     </PowerLevelsContextProvider>
   );

From a1c0b79cbddc2c1601c2d2b52b4137d8098fbcc8 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 10 May 2025 20:41:06 -0500
Subject: [PATCH 124/242] split into two refs

---
 src/app/features/room/CallView.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/app/features/room/CallView.tsx b/src/app/features/room/CallView.tsx
index d6539369..7cf6735c 100644
--- a/src/app/features/room/CallView.tsx
+++ b/src/app/features/room/CallView.tsx
@@ -4,7 +4,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import { Box } from 'folds';
 import { RoomViewHeader } from './RoomViewHeader';
 import { useCallState } from '../../pages/client/CallProvider';
-import { RefContext } from '../../pages/call/PersistentCallContainer';
+import { PrimaryRefContext, BackupRefContext } from '../../pages/call/PersistentCallContainer';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 
 function debounce<F extends (...args: any[]) => any>(func: F, waitFor: number) {
@@ -31,26 +31,26 @@ type OriginalStyles = {
 };
 
 interface CallViewOutletContext {
-  iframeRef: React.RefObject<HTMLIFrameElement | null>;
+  primaryIframeRef: React.RefObject<HTMLIFrameElement | null>;
   backupIframeRef: React.RefObject<HTMLIFrameElement | null>;
 }
 
 export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
-  const { iframeRef, backupIframeRef } = useContext(RefContext);
+  const primaryIframeRef = useContext(PrimaryRefContext);
+  const backupIframeRef = useContext(BackupRefContext);
   const iframeHostRef = useRef<HTMLDivElement>(null);
 
   const originalIframeStylesRef = useRef<OriginalStyles | null>(null);
   const { activeCallRoomId, isPrimaryIframe, isChatOpen } = useCallState();
   const isViewingActiveCall = useMemo(
     () => activeCallRoomId !== null && activeCallRoomId === room.roomId,
-    [activeCallRoomId]
+    [activeCallRoomId, room.roomId]
   );
 
   const screenSize = useScreenSizeContext();
   const isMobile = screenSize === ScreenSize.Mobile;
 
-  const activeIframeDisplayRef =
-    !isPrimaryIframe || isViewingActiveCall ? iframeRef : backupIframeRef;
+  const activeIframeDisplayRef = isPrimaryIframe ? primaryIframeRef : backupIframeRef;
 
   const applyFixedPositioningToIframe = useCallback(() => {
     const iframeElement = activeIframeDisplayRef?.current;
@@ -86,16 +86,18 @@ export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
       iframeElement.style.visibility = 'visible';
       iframeElement.style.pointerEvents = 'auto';
     }
-  }, [activeIframeDisplayRef, iframeHostRef]);
+  }, [activeIframeDisplayRef, room]);
 
   const debouncedApplyFixedPositioning = useCallback(debounce(applyFixedPositioningToIframe, 50), [
     applyFixedPositioningToIframe,
+    primaryIframeRef,
+    backupIframeRef,
   ]);
   useEffect(() => {
     const iframeElement = activeIframeDisplayRef?.current;
     const hostElement = iframeHostRef?.current;
 
-    if (isPrimaryIframe || (isViewingActiveCall && iframeElement && hostElement)) {
+    if (!isPrimaryIframe || (isViewingActiveCall && iframeElement && hostElement)) {
       applyFixedPositioningToIframe();
 
       const resizeObserver = new ResizeObserver(debouncedApplyFixedPositioning);

From da3d20d0fe683e6e895e6406fcdde57205d3e243 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 10 May 2025 20:41:35 -0500
Subject: [PATCH 125/242] add ViewedRoom usage

---
 src/app/features/room-nav/RoomNavItem.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 6bfaac13..cd51a1ad 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -53,6 +53,7 @@ import {
 import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
 import { useCallState } from '../../pages/client/CallProvider';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { logger } from 'matrix-js-sdk/lib/logger';
 
 type RoomNavItemMenuProps = {
   room: Room;
@@ -222,7 +223,14 @@ export function RoomNavItem({
   const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
-  const { activeCallRoomId, setActiveCallRoomId, isChatOpen, toggleChat, hangUp } = useCallState();
+  const {
+    activeCallRoomId,
+    setActiveCallRoomId,
+    setViewedCallRoomId,
+    isChatOpen,
+    toggleChat,
+    hangUp,
+  } = useCallState();
   const typingMember = useRoomTypingMember(room.roomId).filter(
     (receipt) => receipt.userId !== mx.getUserId()
   );
@@ -253,7 +261,9 @@ export function RoomNavItem({
 
     if (room.isCallRoom() && activeCallRoomId !== room.roomId) {
       hangUp();
+      logger.error(room?.normalizedName);
       setActiveCallRoomId(room.roomId);
+      setViewedCallRoomId(room.roomId);
     } else {
       navigateRoom(room.roomId);
     }
@@ -262,6 +272,7 @@ export function RoomNavItem({
   const handleChatButtonClick = (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     if (!isChatOpen) toggleChat();
+    setViewedCallRoomId(room.roomId);
   };
 
   const optionsVisible = hover || !!menuAnchor;

From cde0d5fa64214c5bf0ef81c40bf99366d5ae773f Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 10 May 2025 20:41:44 -0500
Subject: [PATCH 126/242] Disable

---
 src/app/pages/call/CallActivation.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/pages/call/CallActivation.tsx b/src/app/pages/call/CallActivation.tsx
index 04461824..f42a87df 100644
--- a/src/app/pages/call/CallActivation.tsx
+++ b/src/app/pages/call/CallActivation.tsx
@@ -22,7 +22,7 @@ export function CallActivationEffect() {
     if (isViewingCallRoom) {
       if (viewedRoomId !== activeCallRoomId && !isCallActive) {
         logger.info(`CallActivationEffect: Auto-activating call for viewed room: ${viewedRoomId}`);
-        setActiveCallRoomId(viewedRoomId);
+        //setActiveCallRoomId(viewedRoomId);
       } else {
         logger.debug(
           `CallActivationEffect: Viewed room ${viewedRoomId} is already the active call.`

From 1b89831c10e6b99ea98af740cd1eb5055c84974a Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 10 May 2025 20:41:57 -0500
Subject: [PATCH 127/242] add roomViewId and related

---
 src/app/pages/client/CallProvider.tsx | 168 ++++++++++++++++++--------
 1 file changed, 117 insertions(+), 51 deletions(-)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
index 872b1d39..ba2881eb 100644
--- a/src/app/pages/client/CallProvider.tsx
+++ b/src/app/pages/client/CallProvider.tsx
@@ -27,12 +27,18 @@ const WIDGET_JOIN_ACTION = 'io.element.join';
 interface CallContextState {
   activeCallRoomId: string | null;
   setActiveCallRoomId: (roomId: string | null) => void;
+  viewedCallRoomId: string | null;
+  setViewedCallRoomId: (roomId: string | null) => void;
   hangUp: () => void;
   activeClientWidgetApi: ClientWidgetApi | null;
   registerActiveClientWidgetApi: (
     roomId: string | null,
     clientWidgetApi: ClientWidgetApi | null
   ) => void;
+  registerViewedClientWidgetApi: (
+    roomId: string | null,
+    clientWidgetApi: ClientWidgetApi | null
+  ) => void;
   sendWidgetAction: <T = unknown>(
     action: WidgetApiToWidgetAction | string,
     data: T
@@ -58,14 +64,23 @@ const DEFAULT_AUDIO_ENABLED = true;
 const DEFAULT_VIDEO_ENABLED = false;
 const DEFAULT_CHAT_OPENED = false;
 const DEFAULT_CALL_ACTIVE = false;
-const DEFAULT_PRIMARY_IFRAME = false;
+const DEFAULT_PRIMARY_IFRAME = true;
 
 export function CallProvider({ children }: CallProviderProps) {
   const [activeCallRoomId, setActiveCallRoomIdState] = useState<string | null>(null);
+  const [viewedCallRoomId, setViewedCallRoomIdState] = useState<string | null>(null);
   const [activeClientWidgetApi, setActiveClientWidgetApiState] = useState<ClientWidgetApi | null>(
     null
   );
-  const [clientWidgetApiRoomId, setClientWidgetApiRoomId] = useState<string | null>(null);
+  const [activeClientWidgetApiRoomId, setActiveClientWidgetApiRoomId] = useState<string | null>(
+    null
+  );
+  const [viewedClientWidgetApi, setViewedClientWidgetApiState] = useState<ClientWidgetApi | null>(
+    null
+  );
+  const [viewedClientWidgetApiRoomId, setViewedClientWidgetApiRoomId] = useState<string | null>(
+    null
+  );
 
   const [isAudioEnabled, setIsAudioEnabledState] = useState<boolean>(DEFAULT_AUDIO_ENABLED);
   const [isVideoEnabled, setIsVideoEnabledState] = useState<boolean>(DEFAULT_VIDEO_ENABLED);
@@ -95,32 +110,35 @@ export function CallProvider({ children }: CallProviderProps) {
         resetMediaState();
       }
 
-      if (roomId === null || roomId !== clientWidgetApiRoomId) {
+      if (roomId === null || roomId !== activeClientWidgetApiRoomId) {
         logger.warn(
           `CallContext: Clearing active clientWidgetApi because active room changed to ${roomId} or was cleared.`
         );
-        setActiveClientWidgetApiState(null);
-        setClientWidgetApiRoomId(null);
+        //setActiveClientWidgetApiState(null);
+        //setActiveClientWidgetApiRoomId(null);
       }
     },
-    [clientWidgetApiRoomId, resetMediaState, activeCallRoomId]
+    [activeClientWidgetApiRoomId, resetMediaState, activeCallRoomId]
+  );
+
+  const setViewedCallRoomId = useCallback(
+    (roomId: string | null) => {
+      logger.warn(`CallContext: Setting activeCallRoomId to ${roomId}`);
+      setViewedCallRoomIdState(roomId);
+    },
+    [setViewedCallRoomIdState]
   );
 
   const hangUp = useCallback(() => {
     logger.debug(`CallContext: Hang up called.`);
     activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
     setIsCallActive(false);
-    //setActiveCallRoomId(null);
-    setActiveCallRoomIdState(null);
-    //logger.debug(`CallContext: Clearing active clientWidgetApi due to hangup.`);
-    //setActiveClientWidgetApiState(null);
-    //setClientWidgetApiRoomId(null);
-  }, [activeClientWidgetApi?.transport]);
+  }, [activeClientWidgetApi]);
 
   const setActiveClientWidgetApi = useCallback(
     (clientWidgetApi: ClientWidgetApi | null, roomId: string | null) => {
       setActiveClientWidgetApiState(clientWidgetApi);
-      setClientWidgetApiRoomId(roomId);
+      setActiveClientWidgetApiRoomId(roomId);
     },
     []
   );
@@ -134,45 +152,79 @@ export function CallProvider({ children }: CallProviderProps) {
       if (roomId && clientWidgetApi) {
         logger.debug(`CallContext: Registering active clientWidgetApi for room ${roomId}.`);
         setActiveClientWidgetApi(clientWidgetApi, roomId);
-      } else if (roomId === clientWidgetApiRoomId || roomId === null) {
+      } else if (roomId === activeClientWidgetApiRoomId || roomId === null) {
         logger.debug(
-          `CallContext: Clearing active clientWidgetApi for room ${clientWidgetApiRoomId}.`
+          `CallContext: Clearing active clientWidgetApi for room ${activeClientWidgetApiRoomId}.`
         );
         setActiveClientWidgetApi(null, null);
         resetMediaState();
       } else {
         logger.debug(
-          `CallContext: Ignoring clientWidgetApi registration/clear request for room ${roomId}, as current clientWidgetApi belongs to ${clientWidgetApiRoomId}.`
+          `CallContext: Ignoring clientWidgetApi registration/clear request for room ${roomId}, as current clientWidgetApi belongs to ${activeClientWidgetApiRoomId}.`
         );
       }
     },
-    [activeClientWidgetApi, clientWidgetApiRoomId, setActiveClientWidgetApi, resetMediaState]
+    [activeClientWidgetApi, activeClientWidgetApiRoomId, setActiveClientWidgetApi, resetMediaState]
+  );
+
+  const setViewedClientWidgetApi = useCallback(
+    (clientWidgetApi: ClientWidgetApi | null, roomId: string | null) => {
+      setViewedClientWidgetApiState(clientWidgetApi);
+      //setViewedClientWidgetApiRoomId(roomId);
+    },
+    []
+  );
+
+  const registerViewedClientWidgetApi = useCallback(
+    (roomId: string | null, clientWidgetApi: ClientWidgetApi | null) => {
+      if (viewedClientWidgetApi && viewedClientWidgetApi !== clientWidgetApi) {
+        logger.error(`CallContext: Cleaning up listeners for previous clientWidgetApi instance.`);
+      }
+
+      if (roomId && clientWidgetApi) {
+        logger.error(`CallContext: Registering active clientWidgetApi for room ${roomId}.`);
+        setViewedClientWidgetApi(clientWidgetApi, roomId);
+      } else if (roomId === viewedClientWidgetApiRoomId || roomId === null) {
+        logger.error(
+          `CallContext: Clearing active clientWidgetApi for room ${viewedClientWidgetApiRoomId}.`
+        );
+        setViewedClientWidgetApi(null, null);
+        //resetMediaState();
+      } else {
+        logger.debug(
+          `CallContext: Ignoring clientWidgetApi registration/clear request for room ${roomId}, as current clientWidgetApi belongs to ${viewedClientWidgetApiRoomId}.`
+        );
+      }
+    },
+    [viewedClientWidgetApi, viewedClientWidgetApiRoomId, setViewedClientWidgetApi]
   );
 
   useEffect(() => {
     if (
       !activeClientWidgetApi ||
+      !viewedClientWidgetApi ||
       !activeCallRoomId ||
-      clientWidgetApiRoomId !== activeCallRoomId ||
+      !viewedCallRoomId ||
       isCallActive
     ) {
       return;
     }
-
-    const clientWidgetApi = activeClientWidgetApi;
-
+    //logger.error(viewedClientWidgetApi);
     const handleHangup = (ev: CustomEvent) => {
       ev.preventDefault();
-
-      clientWidgetApi.transport.reply(ev.detail, {});
+      hangUp();
+      // if (!isPrimaryIframe) {
+      activeClientWidgetApi?.transport.reply(ev.detail, {});
+      // } else {
+      viewedClientWidgetApi?.transport.reply(ev.detail, {});
+      // }
       logger.warn(
         `CallContext: Received hangup action from widget in room ${activeCallRoomId}.`,
         ev
       );
-      setIsPrimaryIframe(true);
+      //setIsPrimaryIframe(!isPrimaryIframe);
       setIsCallActive(false);
-      setActiveCallRoomIdState(null);
-      //hangUp();
+      //setActiveCallRoomIdState(null);
     };
 
     const handleMediaStateUpdate = (ev: CustomEvent<MediaStatePayload>) => {
@@ -194,46 +246,54 @@ export function CallProvider({ children }: CallProviderProps) {
 
     const handleOnScreenStateUpdate = (ev: CustomEvent) => {
       ev.preventDefault();
-      activeClientWidgetApi.transport.reply(ev.detail, {});
+      if (isPrimaryIframe) {
+        activeClientWidgetApi?.transport.reply(ev.detail, {});
+      } else {
+        viewedClientWidgetApi?.transport.reply(ev.detail, {});
+      }
     };
 
     const handleJoin = (ev: CustomEvent) => {
       ev.preventDefault();
-      if (isCallActive) {
-        setIsPrimaryIframe(false);
-        setActiveCallRoomIdState(viewedRoomId);
-      } else {
-        setIsPrimaryIframe(true);
+      if (isCallActive && activeClientWidgetApi) {
+        activeClientWidgetApi?.transport.send(WIDGET_HANGUP_ACTION, {}).then(() => {
+          setActiveCallRoomIdState(viewedCallRoomId);
+          setActiveClientWidgetApi(viewedClientWidgetApi, viewedCallRoomId);
+          //setIsPrimaryIframe(!isPrimaryIframe);
+          //setViewedClientWidgetApi(null, null);
+          setIsCallActive(true);
+          activeClientWidgetApi?.transport.reply(ev.detail, {});
+        });
       }
-      setIsCallActive(true);
     };
 
     logger.debug(
       `CallContext: Setting up listeners for clientWidgetApi in room ${activeCallRoomId}`
     );
-    clientWidgetApi.on(`action:${WIDGET_HANGUP_ACTION}`, handleHangup);
-    clientWidgetApi.on(`action:${WIDGET_MEDIA_STATE_UPDATE_ACTION}`, handleMediaStateUpdate);
-    clientWidgetApi.on(`action:${WIDGET_ON_SCREEN_ACTION}`, handleOnScreenStateUpdate);
-    clientWidgetApi.on(`action:${WIDGET_JOIN_ACTION}`, handleJoin);
+    activeClientWidgetApi?.on(`action:${WIDGET_HANGUP_ACTION}`, handleHangup);
+    activeClientWidgetApi?.on(`action:${WIDGET_MEDIA_STATE_UPDATE_ACTION}`, handleMediaStateUpdate);
+    activeClientWidgetApi?.on(`action:${WIDGET_ON_SCREEN_ACTION}`, handleOnScreenStateUpdate);
+    activeClientWidgetApi?.on(`action:${WIDGET_JOIN_ACTION}`, handleJoin);
 
-    return () => {
-      logger.debug(
-        `CallContext: Cleaning up listeners for clientWidgetApi in room ${activeCallRoomId}`
-      );
-      if (clientWidgetApi) {
-        //clientWidgetApi.off(`action:${WIDGET_HANGUP_ACTION}`, handleHangup);
-        //clientWidgetApi.off(`action:${WIDGET_MEDIA_STATE_UPDATE_ACTION}`, handleMediaStateUpdate);
-      }
-    };
+    viewedClientWidgetApi?.on(`action:${WIDGET_JOIN_ACTION}`, handleJoin);
+    viewedClientWidgetApi?.on(`action:${WIDGET_MEDIA_STATE_UPDATE_ACTION}`, handleMediaStateUpdate);
+    viewedClientWidgetApi?.on(`action:${WIDGET_ON_SCREEN_ACTION}`, handleOnScreenStateUpdate);
+    viewedClientWidgetApi?.on(`action:${WIDGET_HANGUP_ACTION}`, handleHangup);
   }, [
     activeClientWidgetApi,
     activeCallRoomId,
-    clientWidgetApiRoomId,
+    activeClientWidgetApiRoomId,
     hangUp,
     isChatOpen,
     isAudioEnabled,
     isVideoEnabled,
     isCallActive,
+    viewedRoomId,
+    viewedClientWidgetApi,
+    isPrimaryIframe,
+    viewedCallRoomId,
+    setViewedClientWidgetApi,
+    setActiveClientWidgetApi,
   ]);
 
   const sendWidgetAction = useCallback(
@@ -244,15 +304,15 @@ export function CallProvider({ children }: CallProviderProps) {
         );
         return Promise.reject(new Error('No active call clientWidgetApi'));
       }
-      if (!clientWidgetApiRoomId || clientWidgetApiRoomId !== activeCallRoomId) {
+      if (!activeClientWidgetApiRoomId || activeClientWidgetApiRoomId !== activeCallRoomId) {
         logger.debug(
-          `CallContext: Cannot send action '${action}', clientWidgetApi room (${clientWidgetApiRoomId}) does not match active call room (${activeCallRoomId}). Stale clientWidgetApi?`
+          `CallContext: Cannot send action '${action}', clientWidgetApi room (${activeClientWidgetApiRoomId}) does not match active call room (${activeCallRoomId}). Stale clientWidgetApi?`
         );
         return Promise.reject(new Error('Mismatched active call clientWidgetApi'));
       }
       try {
         logger.debug(
-          `CallContext: Sending action '${action}' via active clientWidgetApi (room: ${clientWidgetApiRoomId}) with data:`,
+          `CallContext: Sending action '${action}' via active clientWidgetApi (room: ${activeClientWidgetApiRoomId}) with data:`,
           data
         );
         await activeClientWidgetApi.transport.send(action as WidgetApiAction, data);
@@ -261,7 +321,7 @@ export function CallProvider({ children }: CallProviderProps) {
         throw error;
       }
     },
-    [activeClientWidgetApi, activeCallRoomId, clientWidgetApiRoomId]
+    [activeClientWidgetApi, activeCallRoomId, activeClientWidgetApiRoomId]
   );
 
   const toggleAudio = useCallback(async () => {
@@ -312,9 +372,12 @@ export function CallProvider({ children }: CallProviderProps) {
     () => ({
       activeCallRoomId,
       setActiveCallRoomId,
+      viewedCallRoomId,
+      setViewedCallRoomId,
       hangUp,
       activeClientWidgetApi,
       registerActiveClientWidgetApi,
+      registerViewedClientWidgetApi,
       sendWidgetAction,
       isChatOpen,
       isAudioEnabled,
@@ -329,9 +392,12 @@ export function CallProvider({ children }: CallProviderProps) {
     [
       activeCallRoomId,
       setActiveCallRoomId,
+      viewedCallRoomId,
+      setViewedCallRoomId,
       hangUp,
       activeClientWidgetApi,
       registerActiveClientWidgetApi,
+      registerViewedClientWidgetApi,
       sendWidgetAction,
       isChatOpen,
       isAudioEnabled,

From 6601c47abc3dcc666ba30c1c50c44889703c556e Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 10 May 2025 20:42:21 -0500
Subject: [PATCH 128/242] (broken) juggle the iframe states proper... still
 needs fixing

---
 .../pages/call/PersistentCallContainer.tsx    | 332 ++++++++++--------
 1 file changed, 189 insertions(+), 143 deletions(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index 593446ad..6ee0a917 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -1,8 +1,8 @@
-import React, { createContext, ReactNode, useEffect, useMemo, useRef } from 'react';
+import React, { createContext, ReactNode, useCallback, useEffect, useMemo, useRef } from 'react';
 import { logger } from 'matrix-js-sdk/lib/logger';
 import { ClientWidgetApi } from 'matrix-widget-api';
 import { Box } from 'folds';
-import { Outlet, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { useCallState } from '../client/CallProvider';
 import {
   createVirtualWidget,
@@ -19,27 +19,28 @@ interface PersistentCallContainerProps {
   children: ReactNode;
 }
 
-export const RefContext = createContext(null);
+export const PrimaryRefContext = createContext(null);
+export const BackupRefContext = createContext(null);
 
 export function PersistentCallContainer({ children }: PersistentCallContainerProps) {
-  const iframeRef = useRef<HTMLIFrameElement | null>(null);
-  const widgetApiRef = useRef<ClientWidgetApi | null>(null);
-  const smallWidgetRef = useRef<SmallWidget | null>(null);
+  const primaryIframeRef = useRef<HTMLIFrameElement | null>(null);
+  const primaryWidgetApiRef = useRef<ClientWidgetApi | null>(null);
+  const primarySmallWidgetRef = useRef<SmallWidget | null>(null);
 
   const backupIframeRef = useRef<HTMLIFrameElement | null>(null);
   const backupWidgetApiRef = useRef<ClientWidgetApi | null>(null);
   const backupSmallWidgetRef = useRef<SmallWidget | null>(null);
   const {
     activeCallRoomId,
+    viewedCallRoomId,
     isChatOpen,
     isCallActive,
     isPrimaryIframe,
     registerActiveClientWidgetApi,
+    registerViewedClientWidgetApi,
   } = useCallState();
   const mx = useMatrixClient();
-  const roomId = useSelectedRoom();
   const clientConfig = useClientConfig();
-  const room = mx.getRoom(roomId) ?? null;
   const screenSize = useScreenSizeContext();
   const isMobile = screenSize === ScreenSize.Mobile;
   const { roomIdOrAlias: viewedRoomId } = useParams();
@@ -48,167 +49,212 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
     [activeCallRoomId, viewedRoomId]
   );
 
-  logger.info(room);
+  //  logger.error('RANDOM LOG RANDOM LOG RANDOM LOG\n\n\n\n\n\n');
+  //  logger.error(room?.normalizedName);
 
-  const setupWidget = (widgetApiRef, smallWidgetRef, iframeRef, skipLobby) => {
-    const cleanupRoomId = smallWidgetRef.current?.roomId;
-    logger.debug(`PersistentCallContainer effect running. activeCallRoomId: ${activeCallRoomId}`);
+  const setupWidget = useCallback(
+    (widgetApiRef, smallWidgetRef, iframeRef, skipLobby) => {
+      const cleanupRoomId = smallWidgetRef.current?.roomId;
+      logger.debug(`PersistentCallContainer effect running. activeCallRoomId: ${activeCallRoomId}`);
 
-    /**
-     * TODO:
-     * Need proper shutdown handling. Events from the previous widget can still come through it seems. Might need
-     * to queue the events and then allow the join to actually occur. This will *work* for now as it does handle switching technically.
-     * Need to look closer at it.
-     *
-     * Might also be able to keep the iframe alive and instead navigate to a new "room" to make the transition smoother
-     */
-    const cleanup = () => {
-      //logger.error(`CallContext: Cleaning up for previous room: ${cleanupRoomId}`);
+      /**
+       * TODO:
+       * Need proper shutdown handling. Events from the previous widget can still come through it seems. Might need
+       * to queue the events and then allow the join to actually occur. This will *work* for now as it does handle switching technically.
+       * Need to look closer at it.
+       *
+       * Might also be able to keep the iframe alive and instead navigate to a new "room" to make the transition smoother
+       */
+      const cleanup = () => {
+        // logger.error(`CallContext: Cleaning up for previous room: ${cleanupRoomId}`);
 
-      if (smallWidgetRef.current) {
-        // smallWidgetRef.current.stopMessaging();
-      }
-      // Potentially call widgetApi.stop() or similar if the API instance has it
-      if (widgetApiRef.current) {
-        // widgetApiRef.current.stop?.();
-      }
-      //widgetApiRef.current = null;
-      //smallWidgetRef.current = null;
-      //if (iframeRef.current) iframeRef.current.src = 'about:blank';
-    };
-
-    if (activeCallRoomId && mx?.getUserId()) {
-      if (cleanupRoomId !== activeCallRoomId && !isCallActive) {
-        const newUrl = getWidgetUrl(mx, roomId, clientConfig.elementCallUrl ?? '', {
-          skipLobby,
-          returnToLobby: 'true',
-          perParticipentE2EE: 'true',
-        });
-        if (iframeRef.current && iframeRef.current.src !== newUrl.toString()) {
-          logger.info(
-            `PersistentCallContainer: Updating iframe src for ${activeCallRoomId} to ${newUrl.toString()}`
-          );
-          cleanup();
-          iframeRef.current.src = newUrl.toString();
-        } else if (iframeRef.current && !iframeRef.current.src) {
-          logger.info(
-            `PersistentCallContainer: Setting initial iframe src for ${activeCallRoomId} to ${newUrl.toString()}`
-          );
-          iframeRef.current.src = newUrl.toString();
+        if (smallWidgetRef.current) {
+          // smallWidgetRef.current.stopMessaging();
         }
-
-        const iframeElement = iframeRef.current;
-        if (!iframeElement) {
-          logger.error('PersistentCallContainer: iframeRef is null, cannot setup API.');
-          return cleanup;
+        // Potentially call widgetApi.stop() or similar if the API instance has it
+        if (widgetApiRef.current) {
+          // widgetApiRef.current.stop?.();
         }
+        // widgetApiRef.current = null;
+        // smallWidgetRef.current = null;
+        // if (iframeRef.current) iframeRef.current.src = 'about:blank';
+      };
 
-        const userId = mx.getUserId() ?? '';
-        const app = createVirtualWidget(
-          mx,
-          `element-call-${activeCallRoomId}-${Date.now()}`,
-          userId,
-          'Element Call',
-          'm.call',
-          newUrl,
-          false,
-          getWidgetData(mx, activeCallRoomId, {}, { skipLobby: true }),
-          activeCallRoomId
-        );
-
-        logger.debug(
-          `PersistentCallContainer: Creating new SmallWidget/API for ${activeCallRoomId}`
-        );
-        const smallWidget = new SmallWidget(app);
-        smallWidgetRef.current = smallWidget;
-
-        try {
-          const widgetApiInstance = smallWidget.startMessaging(iframeElement);
-          widgetApiRef.current = widgetApiInstance;
-          if (skipLobby) registerActiveClientWidgetApi(activeCallRoomId, widgetApiRef.current);
-          widgetApiInstance.once('ready', () => {
-            logger.info(`PersistentCallContainer: Widget for ${activeCallRoomId} is ready.`);
+      if (mx?.getUserId()) {
+        if (
+          (isCallActive && activeCallRoomId !== viewedCallRoomId) ||
+          //          &&  backupIframeRef.current && primaryIframeRef.current.src
+          (cleanupRoomId !== activeCallRoomId && !isCallActive)
+        ) {
+          //logger.error('PersistentCallContainer Re-render');
+          const roomIdToSet = skipLobby ? activeCallRoomId : viewedCallRoomId;
+          const newUrl = getWidgetUrl(mx, roomIdToSet, clientConfig.elementCallUrl ?? '', {
+            skipLobby: skipLobby.toString(),
+            returnToLobby: 'true',
+            perParticipentE2EE: 'true',
           });
-        } catch (error) {
-          logger.error(
-            `PersistentCallContainer: Error initializing widget messaging for ${activeCallRoomId}:`,
-            error
+          if (iframeRef.current && iframeRef.current.src !== newUrl.toString()) {
+            logger.info(
+              `PersistentCallContainer: Updating iframe src for ${roomIdToSet} to ${newUrl.toString()}`
+            );
+            cleanup();
+            iframeRef.current.src = newUrl.toString();
+          } else if (iframeRef.current && !iframeRef.current.src) {
+            logger.info(
+              `PersistentCallContainer: Setting initial iframe src for ${roomIdToSet} to ${newUrl.toString()}`
+            );
+            iframeRef.current.src = newUrl.toString();
+          }
+
+          const iframeElement = iframeRef.current;
+          if (!iframeElement) {
+            logger.error('PersistentCallContainer: iframeRef is null, cannot setup API.');
+            return cleanup;
+          }
+
+          const userId = mx.getUserId() ?? '';
+          const app = createVirtualWidget(
+            mx,
+            `element-call-${roomIdToSet}-${Date.now()}`,
+            userId,
+            'Element Call',
+            'm.call',
+            newUrl,
+            true,
+            getWidgetData(mx, roomIdToSet, {}, { skipLobby: true }),
+            roomIdToSet
           );
-          cleanup();
-        }
-      } else {
-        /*
+
+          logger.error(`PersistentCallContainer: Creating new SmallWidget/API for ${roomIdToSet}`);
+          const smallWidget = new SmallWidget(app);
+          smallWidgetRef.current = smallWidget;
+
+          try {
+            const widgetApiInstance = smallWidget.startMessaging(iframeElement);
+            widgetApiRef.current = widgetApiInstance;
+            logger.error('Pre-register');
+
+            logger.error(`This is our check: ${skipLobby}`);
+            if (skipLobby) {
+              registerActiveClientWidgetApi(activeCallRoomId, widgetApiRef.current);
+            } else {
+              registerViewedClientWidgetApi(viewedCallRoomId, widgetApiRef.current);
+              logger.error('Post view register');
+            }
+
+            widgetApiInstance.once('ready', () => {
+              logger.info(`PersistentCallContainer: Widget for ${roomIdToSet} is ready.`);
+            });
+          } catch (error) {
+            logger.error(
+              `PersistentCallContainer: Error initializing widget messaging for ${roomIdToSet}:`,
+              error
+            );
+            cleanup();
+          }
+        } else {
+          /*
         if (iframeRef.current && iframeRef.current.src !== 'about:blank') {
           logger.info('PersistentCallContainer: No active call, setting src to about:blank');
           iframeRef.current.src = 'about:blank';
         }
           */
-        cleanup();
+          cleanup();
+        }
       }
-    }
-    return cleanup;
-  };
+      return cleanup;
+    },
+    [
+      activeCallRoomId,
+      mx,
+      viewedCallRoomId,
+      isCallActive,
+      clientConfig.elementCallUrl,
+      registerActiveClientWidgetApi,
+      registerViewedClientWidgetApi,
+    ]
+  );
 
   useEffect(() => {
-    setupWidget(widgetApiRef, smallWidgetRef, iframeRef, true);
-    setupWidget(backupWidgetApiRef, backupSmallWidgetRef, backupIframeRef, false);
-  });
+    logger.error(`This is our param: ${isPrimaryIframe}`);
+    setupWidget(primaryWidgetApiRef, primarySmallWidgetRef, primaryIframeRef, isPrimaryIframe);
+    setupWidget(backupWidgetApiRef, backupSmallWidgetRef, backupIframeRef, !isPrimaryIframe);
+  }, [
+    setupWidget,
+    primaryWidgetApiRef,
+    primarySmallWidgetRef,
+    primaryIframeRef,
+    backupWidgetApiRef,
+    backupSmallWidgetRef,
+    backupIframeRef,
+    registerActiveClientWidgetApi,
+    registerViewedClientWidgetApi,
+    activeCallRoomId,
+    viewedCallRoomId,
+    isCallActive,
+    isPrimaryIframe,
+  ]);
+
+  const memoizedIframeRef = useMemo(() => primaryIframeRef, [primaryIframeRef]);
+  const memoizedBackupIframeRef = useMemo(() => backupIframeRef, [backupIframeRef]);
 
   return (
-    <RefContext.Provider value={{ iframeRef, backupIframeRef }}>
-      <Box grow="No">
-        <Box
-          direction="Column"
-          style={{
-            position: 'relative',
-            zIndex: 0,
-            display: isMobile && isChatOpen ? 'none' : 'flex',
-            width: isMobile && isChatOpen ? '0%' : '100%',
-            height: isMobile && isChatOpen ? '0%' : '100%',
-          }}
-        >
+    <PrimaryRefContext.Provider value={memoizedIframeRef}>
+      <BackupRefContext.Provider value={memoizedBackupIframeRef}>
+        <Box grow="No">
           <Box
-            grow="Yes"
+            direction="Column"
             style={{
               position: 'relative',
+              zIndex: 0,
+              display: isMobile && isChatOpen ? 'none' : 'flex',
+              width: isMobile && isChatOpen ? '0%' : '100%',
+              height: isMobile && isChatOpen ? '0%' : '100%',
             }}
           >
-            <iframe
-              ref={iframeRef}
+            <Box
+              grow="Yes"
               style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                display: isPrimaryIframe || isViewingActiveCall ? 'flex' : 'none',
-                width: '100%',
-                height: '100%',
-                border: 'none',
+                position: 'relative',
               }}
-              title={`Persistent Element Call`}
-              sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
-              allow="microphone; camera; display-capture; autoplay; clipboard-write;"
-              src="about:blank"
-            />
-            <iframe
-              ref={backupIframeRef}
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-                border: 'none',
-                display: !isPrimaryIframe || isViewingActiveCall ? 'flex' : 'none',
-              }}
-              title={`Persistent Element Call`}
-              sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
-              allow="microphone; camera; display-capture; autoplay; clipboard-write;"
-              src="about:blank"
-            />
+            >
+              <iframe
+                ref={primaryIframeRef}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  display: isPrimaryIframe || isViewingActiveCall ? 'flex' : 'none',
+                  width: '100%',
+                  height: '100%',
+                  border: 'none',
+                }}
+                title={`Persistent Element Call`}
+                sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
+                allow="microphone; camera; display-capture; autoplay; clipboard-write;"
+                src="about:blank"
+              />
+              <iframe
+                ref={backupIframeRef}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  width: '100%',
+                  height: '100%',
+                  border: 'none',
+                  display: !isPrimaryIframe && isViewingActiveCall ? 'flex' : 'none',
+                }}
+                title={`Persistent Element Call`}
+                sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
+                allow="microphone; camera; display-capture; autoplay; clipboard-write;"
+                src="about:blank"
+              />
+            </Box>
           </Box>
         </Box>
-      </Box>
-      {children}
-    </RefContext.Provider>
+        {children}
+      </BackupRefContext.Provider>
+    </PrimaryRefContext.Provider>
   );
 }

From f28a3a1c7dd4d50b89b6de1c4a5af70141fac980 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 11 May 2025 17:52:50 -0500
Subject: [PATCH 129/242] Conditionals to manage the active iframe state better

---
 .../pages/call/PersistentCallContainer.tsx    | 33 +++++++++++++++----
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index 6ee0a917..8c6eb346 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -55,8 +55,9 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
   const setupWidget = useCallback(
     (widgetApiRef, smallWidgetRef, iframeRef, skipLobby) => {
       const cleanupRoomId = smallWidgetRef.current?.roomId;
-      logger.debug(`PersistentCallContainer effect running. activeCallRoomId: ${activeCallRoomId}`);
-
+      logger.error(`PersistentCallContainer effect running. activeCallRoomId: ${activeCallRoomId}`);
+      logger.error(`PersistentCallContainer effect running. viewedCallRoomId: ${viewedCallRoomId}`);
+      logger.error(`PersistentCallContainer effect running. isCallActive: ${isCallActive}`);
       /**
        * TODO:
        * Need proper shutdown handling. Events from the previous widget can still come through it seems. Might need
@@ -82,12 +83,20 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
 
       if (mx?.getUserId()) {
         if (
-          (isCallActive && activeCallRoomId !== viewedCallRoomId) ||
-          //          &&  backupIframeRef.current && primaryIframeRef.current.src
-          (cleanupRoomId !== activeCallRoomId && !isCallActive)
+          (activeCallRoomId !== viewedCallRoomId && isCallActive) ||
+          //          &&
+          (activeCallRoomId && cleanupRoomId !== activeCallRoomId && !isCallActive)
         ) {
-          //logger.error('PersistentCallContainer Re-render');
+          logger.error('PersistentCallContainer Re-render');
           const roomIdToSet = skipLobby ? activeCallRoomId : viewedCallRoomId;
+
+          if (
+            roomIdToSet &&
+            (roomIdToSet === primarySmallWidgetRef?.current?.roomId ||
+              roomIdToSet === backupSmallWidgetRef?.current?.roomId)
+          )
+            return;
+
           const newUrl = getWidgetUrl(mx, roomIdToSet, clientConfig.elementCallUrl ?? '', {
             skipLobby: skipLobby.toString(),
             returnToLobby: 'true',
@@ -105,7 +114,17 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
             );
             iframeRef.current.src = newUrl.toString();
           }
+          if (
+            newUrl.toString() === primarySmallWidgetRef?.current?.url ||
+            newUrl.toString() === backupSmallWidgetRef?.current?.url
+          )
+            return;
 
+          logger.error(
+            `New: ${roomIdToSet}
+            \n Primary: ${primarySmallWidgetRef?.current?.roomId}
+            \n Backup: ${backupSmallWidgetRef?.current?.roomId}`
+          );
           const iframeElement = iframeRef.current;
           if (!iframeElement) {
             logger.error('PersistentCallContainer: iframeRef is null, cannot setup API.');
@@ -120,7 +139,7 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
             'Element Call',
             'm.call',
             newUrl,
-            true,
+            false,
             getWidgetData(mx, roomIdToSet, {}, { skipLobby: true }),
             roomIdToSet
           );

From d488c24974dca6e543a868cc074162d62e708f03 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 11 May 2025 17:53:33 -0500
Subject: [PATCH 130/242] add navigateRoom to be in both conditions for the nav
 button

---
 src/app/features/room-nav/RoomNavItem.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index cd51a1ad..4ad99fe5 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -264,6 +264,7 @@ export function RoomNavItem({
       logger.error(room?.normalizedName);
       setActiveCallRoomId(room.roomId);
       setViewedCallRoomId(room.roomId);
+      navigateRoom(room.roomId);
     } else {
       navigateRoom(room.roomId);
     }

From 5ab0b39152a4d03a87163fa90d6b770aed026b0b Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 11 May 2025 17:54:11 -0500
Subject: [PATCH 131/242] Fix the view to correctly display the active iframe
 based on which is currently hosting the active call (juggling views)

---
 src/app/features/room/CallView.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/features/room/CallView.tsx b/src/app/features/room/CallView.tsx
index 7cf6735c..fd3c73bd 100644
--- a/src/app/features/room/CallView.tsx
+++ b/src/app/features/room/CallView.tsx
@@ -50,7 +50,8 @@ export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
   const screenSize = useScreenSizeContext();
   const isMobile = screenSize === ScreenSize.Mobile;
 
-  const activeIframeDisplayRef = isPrimaryIframe ? primaryIframeRef : backupIframeRef;
+  const activeIframeDisplayRef =
+    isViewingActiveCall && isPrimaryIframe ? primaryIframeRef : backupIframeRef;
 
   const applyFixedPositioningToIframe = useCallback(() => {
     const iframeElement = activeIframeDisplayRef?.current;
@@ -97,7 +98,7 @@ export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
     const iframeElement = activeIframeDisplayRef?.current;
     const hostElement = iframeHostRef?.current;
 
-    if (!isPrimaryIframe || (isViewingActiveCall && iframeElement && hostElement)) {
+    if (room.isCallRoom() || (isViewingActiveCall && iframeElement && hostElement)) {
       applyFixedPositioningToIframe();
 
       const resizeObserver = new ResizeObserver(debouncedApplyFixedPositioning);

From f3612e23c648e4a25b76708d37d373c50b691567 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 11 May 2025 17:55:04 -0500
Subject: [PATCH 132/242] Testing the iframe juggling. Seems to work for the
 first and second joins... so likely on the right path with this

---
 src/app/pages/client/CallProvider.tsx | 76 +++++++++++++++++++--------
 1 file changed, 54 insertions(+), 22 deletions(-)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
index ba2881eb..3244e66e 100644
--- a/src/app/pages/client/CallProvider.tsx
+++ b/src/app/pages/client/CallProvider.tsx
@@ -132,8 +132,9 @@ export function CallProvider({ children }: CallProviderProps) {
   const hangUp = useCallback(() => {
     logger.debug(`CallContext: Hang up called.`);
     activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
-    setIsCallActive(false);
-  }, [activeClientWidgetApi]);
+    //setActiveCallRoomIdState(null);
+    //setIsCallActive(false);
+  }, [activeClientWidgetApi?.transport]);
 
   const setActiveClientWidgetApi = useCallback(
     (clientWidgetApi: ClientWidgetApi | null, roomId: string | null) => {
@@ -182,11 +183,11 @@ export function CallProvider({ children }: CallProviderProps) {
       }
 
       if (roomId && clientWidgetApi) {
-        logger.error(`CallContext: Registering active clientWidgetApi for room ${roomId}.`);
+        logger.error(`CallContext: Registering viewed clientWidgetApi for room ${roomId}.`);
         setViewedClientWidgetApi(clientWidgetApi, roomId);
       } else if (roomId === viewedClientWidgetApiRoomId || roomId === null) {
         logger.error(
-          `CallContext: Clearing active clientWidgetApi for room ${viewedClientWidgetApiRoomId}.`
+          `CallContext: Clearing viewed clientWidgetApi for room ${viewedClientWidgetApiRoomId}.`
         );
         setViewedClientWidgetApi(null, null);
         //resetMediaState();
@@ -200,19 +201,13 @@ export function CallProvider({ children }: CallProviderProps) {
   );
 
   useEffect(() => {
-    if (
-      !activeClientWidgetApi ||
-      !viewedClientWidgetApi ||
-      !activeCallRoomId ||
-      !viewedCallRoomId ||
-      isCallActive
-    ) {
+    if (!activeCallRoomId || !viewedCallRoomId) {
       return;
     }
     //logger.error(viewedClientWidgetApi);
     const handleHangup = (ev: CustomEvent) => {
       ev.preventDefault();
-      hangUp();
+      //hangUp();
       // if (!isPrimaryIframe) {
       activeClientWidgetApi?.transport.reply(ev.detail, {});
       // } else {
@@ -223,7 +218,7 @@ export function CallProvider({ children }: CallProviderProps) {
         ev
       );
       //setIsPrimaryIframe(!isPrimaryIframe);
-      setIsCallActive(false);
+      //setIsCallActive(false);
       //setActiveCallRoomIdState(null);
     };
 
@@ -255,16 +250,53 @@ export function CallProvider({ children }: CallProviderProps) {
 
     const handleJoin = (ev: CustomEvent) => {
       ev.preventDefault();
-      if (isCallActive && activeClientWidgetApi) {
-        activeClientWidgetApi?.transport.send(WIDGET_HANGUP_ACTION, {}).then(() => {
-          setActiveCallRoomIdState(viewedCallRoomId);
-          setActiveClientWidgetApi(viewedClientWidgetApi, viewedCallRoomId);
-          //setIsPrimaryIframe(!isPrimaryIframe);
-          //setViewedClientWidgetApi(null, null);
-          setIsCallActive(true);
-          activeClientWidgetApi?.transport.reply(ev.detail, {});
-        });
+
+      logger.error('PRE Swap');
+      logger.error('PRE Swap');
+      logger.error('PRE Swap');
+      logger.error('PRE Swap');
+      logger.error('PRE Swap');
+      logger.error('PRE Swap');
+      logger.error('PRE Swap');
+      logger.error('PRE Swap');
+      logger.error('PRE Swap');
+      logger.error('PRE Swap');
+      logger.error('PRE Swap');
+      logger.error('PRE Swap');
+      logger.error('PRE Swap');
+      logger.error(isCallActive.toString());
+      logger.error(activeClientWidgetApi);
+      logger.error(viewedClientWidgetApi);
+
+      activeClientWidgetApi?.transport.reply(ev.detail, {});
+      if (isCallActive && activeClientWidgetApi && viewedClientWidgetApi) {
+        logger.error('Primary Swap');
+        logger.error('Primary Swap');
+        logger.error('Primary Swap');
+        logger.error('Primary Swap');
+        logger.error('Primary Swap');
+        logger.error('Primary Swap');
+        logger.error('Primary Swap');
+        logger.error('Primary Swap');
+        logger.error('Primary Swap');
+        logger.error('Primary Swap');
+        logger.error('Primary Swap');
+        logger.error('Primary Swap');
+        logger.error('Primary Swap');
+        logger.error('Primary Swap');
+        logger.error('Primary Swap');
+        activeClientWidgetApi?.transport.send(WIDGET_HANGUP_ACTION, {}).then(() => {});
+
+        setActiveCallRoomIdState(viewedCallRoomId);
+        setActiveClientWidgetApi(viewedClientWidgetApi, viewedCallRoomId);
+        setIsPrimaryIframe(!isPrimaryIframe);
+        //setViewedCallRoomId(null);
+        //setViewedClientWidgetApi(null, null);
+        //setViewedClientWidgetApi(null, null);
+      } else {
+        //setActiveCallRoomIdState(viewedCallRoomId);
       }
+      setIsCallActive(true);
     };
 
     logger.debug(

From 4486ef1e72e08e1ddcc8d67cf17a2ceeeed435f2 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 11 May 2025 17:55:19 -0500
Subject: [PATCH 133/242] add url as a param for widget url

---
 src/app/features/room/SmallWidget.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/features/room/SmallWidget.ts b/src/app/features/room/SmallWidget.ts
index 7d8332a9..25bb5bd5 100644
--- a/src/app/features/room/SmallWidget.ts
+++ b/src/app/features/room/SmallWidget.ts
@@ -86,6 +86,8 @@ export class SmallWidget extends EventEmitter {
 
   private roomId?: string;
 
+  public url?: string;
+
   private type: string; // Type of the widget (e.g., 'm.call')
 
   private readUpToMap: { [roomId: string]: string } = {}; // room ID to event ID
@@ -98,6 +100,7 @@ export class SmallWidget extends EventEmitter {
     super();
     this.client = iapp.client;
     this.roomId = iapp.roomId;
+    this.url = iapp.url;
     this.type = iapp.type;
     this.mockWidget = new CinnyWidget(iapp);
   }

From 59a936b094df3c264715a7e59690fcd61be0208e Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 11 May 2025 18:53:05 -0500
Subject: [PATCH 134/242] fix backup iframe visibility

---
 src/app/pages/call/PersistentCallContainer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index 8c6eb346..88c2fa96 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -262,7 +262,7 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
                   width: '100%',
                   height: '100%',
                   border: 'none',
-                  display: !isPrimaryIframe && isViewingActiveCall ? 'flex' : 'none',
+                  display: !isPrimaryIframe || isViewingActiveCall ? 'flex' : 'none',
                 }}
                 title={`Persistent Element Call`}
                 sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"

From 74c883dfa89eeb5ca0675aa7d1c50e39511dcecf Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 11 May 2025 19:01:47 -0500
Subject: [PATCH 135/242] Much closer to the call state handling we want w/
 hangups and joins

---
 src/app/pages/client/CallProvider.tsx | 53 ++-------------------------
 1 file changed, 4 insertions(+), 49 deletions(-)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
index 3244e66e..fa3a2ad0 100644
--- a/src/app/pages/client/CallProvider.tsx
+++ b/src/app/pages/client/CallProvider.tsx
@@ -96,7 +96,6 @@ export function CallProvider({ children }: CallProviderProps) {
     logger.debug('CallContext: Resetting media state to defaults.');
     setIsAudioEnabledState(DEFAULT_AUDIO_ENABLED);
     setIsVideoEnabledState(DEFAULT_VIDEO_ENABLED);
-    //setIsChatOpenState(DEFAULT_CHAT_OPENED);
   }, []);
 
   const setActiveCallRoomId = useCallback(
@@ -114,8 +113,6 @@ export function CallProvider({ children }: CallProviderProps) {
         logger.warn(
           `CallContext: Clearing active clientWidgetApi because active room changed to ${roomId} or was cleared.`
         );
-        //setActiveClientWidgetApiState(null);
-        //setActiveClientWidgetApiRoomId(null);
       }
     },
     [activeClientWidgetApiRoomId, resetMediaState, activeCallRoomId]
@@ -132,8 +129,8 @@ export function CallProvider({ children }: CallProviderProps) {
   const hangUp = useCallback(() => {
     logger.debug(`CallContext: Hang up called.`);
     activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
-    //setActiveCallRoomIdState(null);
-    //setIsCallActive(false);
+    setActiveCallRoomIdState(null);
+    setIsCallActive(false);
   }, [activeClientWidgetApi?.transport]);
 
   const setActiveClientWidgetApi = useCallback(
@@ -171,7 +168,7 @@ export function CallProvider({ children }: CallProviderProps) {
   const setViewedClientWidgetApi = useCallback(
     (clientWidgetApi: ClientWidgetApi | null, roomId: string | null) => {
       setViewedClientWidgetApiState(clientWidgetApi);
-      //setViewedClientWidgetApiRoomId(roomId);
+      setViewedClientWidgetApiRoomId(roomId);
     },
     []
   );
@@ -204,22 +201,15 @@ export function CallProvider({ children }: CallProviderProps) {
     if (!activeCallRoomId || !viewedCallRoomId) {
       return;
     }
-    //logger.error(viewedClientWidgetApi);
     const handleHangup = (ev: CustomEvent) => {
       ev.preventDefault();
-      //hangUp();
-      // if (!isPrimaryIframe) {
       activeClientWidgetApi?.transport.reply(ev.detail, {});
-      // } else {
       viewedClientWidgetApi?.transport.reply(ev.detail, {});
-      // }
       logger.warn(
         `CallContext: Received hangup action from widget in room ${activeCallRoomId}.`,
         ev
       );
-      //setIsPrimaryIframe(!isPrimaryIframe);
-      //setIsCallActive(false);
-      //setActiveCallRoomIdState(null);
+      setIsCallActive(false);
     };
 
     const handleMediaStateUpdate = (ev: CustomEvent<MediaStatePayload>) => {
@@ -250,51 +240,16 @@ export function CallProvider({ children }: CallProviderProps) {
 
     const handleJoin = (ev: CustomEvent) => {
       ev.preventDefault();
-
-      logger.error('PRE Swap');
-      logger.error('PRE Swap');
-      logger.error('PRE Swap');
-      logger.error('PRE Swap');
-      logger.error('PRE Swap');
-      logger.error('PRE Swap');
-      logger.error('PRE Swap');
-      logger.error('PRE Swap');
-      logger.error('PRE Swap');
-      logger.error('PRE Swap');
-      logger.error('PRE Swap');
-      logger.error('PRE Swap');
-      logger.error('PRE Swap');
       logger.error(isCallActive.toString());
       logger.error(activeClientWidgetApi);
       logger.error(viewedClientWidgetApi);
 
       activeClientWidgetApi?.transport.reply(ev.detail, {});
       if (isCallActive && activeClientWidgetApi && viewedClientWidgetApi) {
-        logger.error('Primary Swap');
-        logger.error('Primary Swap');
-        logger.error('Primary Swap');
-        logger.error('Primary Swap');
-        logger.error('Primary Swap');
-        logger.error('Primary Swap');
-        logger.error('Primary Swap');
-        logger.error('Primary Swap');
-        logger.error('Primary Swap');
-        logger.error('Primary Swap');
-        logger.error('Primary Swap');
-        logger.error('Primary Swap');
-        logger.error('Primary Swap');
-        logger.error('Primary Swap');
-        logger.error('Primary Swap');
         activeClientWidgetApi?.transport.send(WIDGET_HANGUP_ACTION, {}).then(() => {});
-
         setActiveCallRoomIdState(viewedCallRoomId);
         setActiveClientWidgetApi(viewedClientWidgetApi, viewedCallRoomId);
         setIsPrimaryIframe(!isPrimaryIframe);
-        //setViewedCallRoomId(null);
-        //setViewedClientWidgetApi(null, null);
-        //setViewedClientWidgetApi(null, null);
-      } else {
-        //setActiveCallRoomIdState(viewedCallRoomId);
       }
       setIsCallActive(true);
     };

From 7043376383bbdf2ca2b7c99537d5a46eed5e726a Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 11 May 2025 19:09:39 -0500
Subject: [PATCH 136/242] Fix the position of the member drawer to its correct
 location

---
 src/app/features/room/Room.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/features/room/Room.tsx b/src/app/features/room/Room.tsx
index 7c755c54..35c5c960 100644
--- a/src/app/features/room/Room.tsx
+++ b/src/app/features/room/Room.tsx
@@ -65,14 +65,14 @@ export function Room() {
             <Box style={{ flex: 1, minHeight: 0, overflowY: 'auto', background: '#fff' }}>
               <RoomView room={room} eventId={eventId} />
             </Box>
-            {screenSize === ScreenSize.Desktop && isDrawer && (
-              <>
-                <Line variant="Background" direction="Vertical" size="300" />
-                <MembersDrawer key={room.roomId} room={room} members={members} />
-              </>
-            )}
           </Box>
         )}
+        {screenSize === ScreenSize.Desktop && isDrawer && (
+          <>
+            <Line variant="Background" direction="Vertical" size="300" />
+            <MembersDrawer key={room.roomId} room={room} members={members} />
+          </>
+        )}
       </Box>
     </PowerLevelsContextProvider>
   );

From af455a5fe3fb515ccc38de8a907fb5cbe2f20995 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 11 May 2025 19:11:21 -0500
Subject: [PATCH 137/242] Ensure drawer doesn't appear in call room

---
 src/app/features/room/Room.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room/Room.tsx b/src/app/features/room/Room.tsx
index 35c5c960..835c750b 100644
--- a/src/app/features/room/Room.tsx
+++ b/src/app/features/room/Room.tsx
@@ -67,7 +67,7 @@ export function Room() {
             </Box>
           </Box>
         )}
-        {screenSize === ScreenSize.Desktop && isDrawer && (
+        {screenSize === ScreenSize.Desktop && !room.isCallRoom() && isDrawer && (
           <>
             <Line variant="Background" direction="Vertical" size="300" />
             <MembersDrawer key={room.roomId} room={room} members={members} />

From 3e3d68602f28d800d4b2cca9e8ea6ab1d14a7959 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 11 May 2025 19:24:13 -0500
Subject: [PATCH 138/242] Better handling of the isCallActive in the join
 handler

---
 src/app/pages/client/CallProvider.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
index fa3a2ad0..0aa27a5a 100644
--- a/src/app/pages/client/CallProvider.tsx
+++ b/src/app/pages/client/CallProvider.tsx
@@ -240,18 +240,21 @@ export function CallProvider({ children }: CallProviderProps) {
 
     const handleJoin = (ev: CustomEvent) => {
       ev.preventDefault();
+
       logger.error(isCallActive.toString());
       logger.error(activeClientWidgetApi);
       logger.error(viewedClientWidgetApi);
 
       activeClientWidgetApi?.transport.reply(ev.detail, {});
       if (isCallActive && activeClientWidgetApi && viewedClientWidgetApi) {
-        activeClientWidgetApi?.transport.send(WIDGET_HANGUP_ACTION, {}).then(() => {});
-        setActiveCallRoomIdState(viewedCallRoomId);
-        setActiveClientWidgetApi(viewedClientWidgetApi, viewedCallRoomId);
-        setIsPrimaryIframe(!isPrimaryIframe);
+        activeClientWidgetApi?.transport.send(WIDGET_HANGUP_ACTION, {}).then(() => {
+          setActiveCallRoomIdState(viewedCallRoomId);
+          setActiveClientWidgetApi(viewedClientWidgetApi, viewedCallRoomId);
+          setIsPrimaryIframe(!isPrimaryIframe);
+        });
+      } else {
+        setIsCallActive(true);
       }
-      setIsCallActive(true);
     };
 
     logger.debug(

From 1e44557406db2aad265453a5de2fc10b4f09ce56 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Tue, 20 May 2025 11:26:54 -0500
Subject: [PATCH 139/242] Add ideal call room join behavior where text rooms to
 call room simply joins, but doesn't swap current view

---
 src/app/features/room-nav/RoomNavItem.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 4ad99fe5..60fb1880 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -21,6 +21,7 @@ import {
 } from 'folds';
 import { useFocusWithin, useHover } from 'react-aria';
 import FocusTrap from 'focus-trap-react';
+import { useParams } from 'react-router-dom';
 import { NavItem, NavItemContent, NavItemOptions, NavLink } from '../../components/nav';
 import { UnreadBadge, UnreadBadgeCenter } from '../../components/unread-badge';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
@@ -53,7 +54,6 @@ import {
 import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
 import { useCallState } from '../../pages/client/CallProvider';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
-import { logger } from 'matrix-js-sdk/lib/logger';
 
 type RoomNavItemMenuProps = {
   room: Room;
@@ -235,6 +235,7 @@ export function RoomNavItem({
     (receipt) => receipt.userId !== mx.getUserId()
   );
   const { navigateRoom } = useRoomNavigate();
+  const { roomIdOrAlias: viewedRoomId } = useParams();
 
   const handleContextMenu: MouseEventHandler<HTMLElement> = (evt) => {
     evt.preventDefault();
@@ -261,10 +262,11 @@ export function RoomNavItem({
 
     if (room.isCallRoom() && activeCallRoomId !== room.roomId) {
       hangUp();
-      logger.error(room?.normalizedName);
       setActiveCallRoomId(room.roomId);
       setViewedCallRoomId(room.roomId);
-      navigateRoom(room.roomId);
+      if (mx.getRoom(viewedRoomId)?.isCallRoom()) {
+        navigateRoom(room.roomId);
+      }
     } else {
       navigateRoom(room.roomId);
     }

From e688c193502120f7f643c00eb33acbf81b74deb6 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 21 May 2025 21:11:25 -0500
Subject: [PATCH 140/242] Fix mobile call room default behavior from auto-join
 to displaying lobby

---
 src/app/features/room-nav/RoomNavItem.tsx | 24 +++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 60fb1880..c11d048f 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -54,6 +54,7 @@ import {
 import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
 import { useCallState } from '../../pages/client/CallProvider';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 
 type RoomNavItemMenuProps = {
   room: Room;
@@ -236,6 +237,8 @@ export function RoomNavItem({
   );
   const { navigateRoom } = useRoomNavigate();
   const { roomIdOrAlias: viewedRoomId } = useParams();
+  const screenSize = useScreenSizeContext();
+  const isMobile = screenSize === ScreenSize.Mobile;
 
   const handleContextMenu: MouseEventHandler<HTMLElement> = (evt) => {
     evt.preventDefault();
@@ -259,21 +262,26 @@ export function RoomNavItem({
     if (chatButton && chatButton.contains(target)) {
       return;
     }
-
-    if (room.isCallRoom() && activeCallRoomId !== room.roomId) {
-      hangUp();
-      setActiveCallRoomId(room.roomId);
-      setViewedCallRoomId(room.roomId);
-      if (mx.getRoom(viewedRoomId)?.isCallRoom()) {
+    if (!isMobile) {
+      if (room.isCallRoom() && activeCallRoomId !== room.roomId) {
+        hangUp();
+        setActiveCallRoomId(room.roomId);
+        if (mx.getRoom(viewedRoomId)?.isCallRoom()) {
+          navigateRoom(room.roomId);
+        }
+      } else {
         navigateRoom(room.roomId);
       }
     } else {
+      evt.stopPropagation();
+      if (isChatOpen) toggleChat();
+      setViewedCallRoomId(room.roomId);
       navigateRoom(room.roomId);
     }
   };
 
-  const handleChatButtonClick = (e: MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
+  const handleChatButtonClick = (evt: MouseEvent<HTMLButtonElement>) => {
+    evt.stopPropagation();
     if (!isChatOpen) toggleChat();
     setViewedCallRoomId(room.roomId);
   };

From dabe7f7849cfc28307452a3da0bfafeb49aedcc8 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 21 May 2025 21:12:03 -0500
Subject: [PATCH 141/242] swap call status to be bound to call state and not
 active call id

---
 src/app/pages/call/CallNavStatus.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/call/CallNavStatus.tsx b/src/app/pages/call/CallNavStatus.tsx
index 297c7f66..8d91fd69 100644
--- a/src/app/pages/call/CallNavStatus.tsx
+++ b/src/app/pages/call/CallNavStatus.tsx
@@ -20,7 +20,7 @@ type CallNavStatusProps = {
   space: Room | null;
 };
 export function CallNavStatus({ space }: CallNavStatusProps) {
-  const { activeCallRoomId, isAudioEnabled, isVideoEnabled, toggleAudio, toggleVideo, hangUp } =
+  const { activeCallRoomId, isAudioEnabled, isVideoEnabled, isCallActive, toggleAudio, toggleVideo, hangUp } =
     useCallState();
   const mx = useMatrixClient();
   const { navigateRoom } = useRoomNavigate();
@@ -30,7 +30,7 @@ export function CallNavStatus({ space }: CallNavStatusProps) {
       navigateRoom(activeCallRoomId);
     }
   };
-  if (!activeCallRoomId) {
+  if (!isCallActive) {
     return (
       <Box
         direction="Column"

From d9c0c85483a3e5932f4ba9984384adc6c084c2b3 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 21 May 2025 21:12:51 -0500
Subject: [PATCH 142/242] Remove clean room ID and add default handler for if
 no active call has existed yet, but user clicks on show chat

---
 src/app/pages/call/PersistentCallContainer.tsx | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index 88c2fa96..6e01dfff 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -54,10 +54,6 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
 
   const setupWidget = useCallback(
     (widgetApiRef, smallWidgetRef, iframeRef, skipLobby) => {
-      const cleanupRoomId = smallWidgetRef.current?.roomId;
-      logger.error(`PersistentCallContainer effect running. activeCallRoomId: ${activeCallRoomId}`);
-      logger.error(`PersistentCallContainer effect running. viewedCallRoomId: ${viewedCallRoomId}`);
-      logger.error(`PersistentCallContainer effect running. isCallActive: ${isCallActive}`);
       /**
        * TODO:
        * Need proper shutdown handling. Events from the previous widget can still come through it seems. Might need
@@ -84,12 +80,10 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
       if (mx?.getUserId()) {
         if (
           (activeCallRoomId !== viewedCallRoomId && isCallActive) ||
-          //          &&
-          (activeCallRoomId && cleanupRoomId !== activeCallRoomId && !isCallActive)
+          (activeCallRoomId && !isCallActive) ||
+          (!activeCallRoomId && viewedCallRoomId && !isCallActive)
         ) {
-          logger.error('PersistentCallContainer Re-render');
           const roomIdToSet = skipLobby ? activeCallRoomId : viewedCallRoomId;
-
           if (
             roomIdToSet &&
             (roomIdToSet === primarySmallWidgetRef?.current?.roomId ||

From 6e33c8e8da911fd605644c6a96dc20f954f922cf Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 21 May 2025 21:14:31 -0500
Subject: [PATCH 143/242] Applies the correct changes to the call state and
 removes listeners of old active widget so we don't trigger hang ups on the
 new one (the element-call widget likes to spam the hang up response back
 several times for some reason long after you tell it to hang up)

---
 src/app/pages/client/CallProvider.tsx | 29 ++++++++++++++++++---------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
index 0aa27a5a..039ddfa1 100644
--- a/src/app/pages/client/CallProvider.tsx
+++ b/src/app/pages/client/CallProvider.tsx
@@ -129,9 +129,10 @@ export function CallProvider({ children }: CallProviderProps) {
   const hangUp = useCallback(() => {
     logger.debug(`CallContext: Hang up called.`);
     activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
+    viewedClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
     setActiveCallRoomIdState(null);
     setIsCallActive(false);
-  }, [activeClientWidgetApi?.transport]);
+  }, [activeClientWidgetApi?.transport, viewedClientWidgetApi?.transport]);
 
   const setActiveClientWidgetApi = useCallback(
     (clientWidgetApi: ClientWidgetApi | null, roomId: string | null) => {
@@ -198,18 +199,22 @@ export function CallProvider({ children }: CallProviderProps) {
   );
 
   useEffect(() => {
-    if (!activeCallRoomId || !viewedCallRoomId) {
+    if (!activeCallRoomId && !viewedCallRoomId) {
       return;
     }
     const handleHangup = (ev: CustomEvent) => {
       ev.preventDefault();
-      activeClientWidgetApi?.transport.reply(ev.detail, {});
-      viewedClientWidgetApi?.transport.reply(ev.detail, {});
+      if (ev.detail.widgetId === activeClientWidgetApi?.widget.id) {
+        activeClientWidgetApi?.transport.reply(ev.detail, {});
+        setIsCallActive(false);
+      } else if (ev.detail.widgetId === viewedClientWidgetApi?.widget.id) {
+        viewedClientWidgetApi?.transport.reply(ev.detail, {});
+        setIsCallActive(false);
+      }
       logger.warn(
         `CallContext: Received hangup action from widget in room ${activeCallRoomId}.`,
         ev
       );
-      setIsCallActive(false);
     };
 
     const handleMediaStateUpdate = (ev: CustomEvent<MediaStatePayload>) => {
@@ -241,16 +246,20 @@ export function CallProvider({ children }: CallProviderProps) {
     const handleJoin = (ev: CustomEvent) => {
       ev.preventDefault();
 
-      logger.error(isCallActive.toString());
-      logger.error(activeClientWidgetApi);
-      logger.error(viewedClientWidgetApi);
-
       activeClientWidgetApi?.transport.reply(ev.detail, {});
+      if (ev.detail.widgetId === activeClientWidgetApi?.widget.id) {
+        setIsCallActive(true);
+        return;
+      }
+
       if (isCallActive && activeClientWidgetApi && viewedClientWidgetApi) {
+        activeClientWidgetApi?.removeAllListeners();
         activeClientWidgetApi?.transport.send(WIDGET_HANGUP_ACTION, {}).then(() => {
-          setActiveCallRoomIdState(viewedCallRoomId);
           setActiveClientWidgetApi(viewedClientWidgetApi, viewedCallRoomId);
+          setActiveCallRoomIdState(viewedCallRoomId);
+          setViewedClientWidgetApi(null, null);
           setIsPrimaryIframe(!isPrimaryIframe);
+          setIsCallActive(true);
         });
       } else {
         setIsCallActive(true);

From 7ef33400c1662c68af634e67b024e0ed99a1d683 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 22 May 2025 17:33:15 -0500
Subject: [PATCH 144/242] Remove superfluous comments and Date.now() that was
 causing loading... bug when widgetId desynced

---
 .../pages/call/PersistentCallContainer.tsx    | 75 +++----------------
 1 file changed, 12 insertions(+), 63 deletions(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index 6e01dfff..af3e3e6b 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -49,34 +49,8 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
     [activeCallRoomId, viewedRoomId]
   );
 
-  //  logger.error('RANDOM LOG RANDOM LOG RANDOM LOG\n\n\n\n\n\n');
-  //  logger.error(room?.normalizedName);
-
   const setupWidget = useCallback(
     (widgetApiRef, smallWidgetRef, iframeRef, skipLobby) => {
-      /**
-       * TODO:
-       * Need proper shutdown handling. Events from the previous widget can still come through it seems. Might need
-       * to queue the events and then allow the join to actually occur. This will *work* for now as it does handle switching technically.
-       * Need to look closer at it.
-       *
-       * Might also be able to keep the iframe alive and instead navigate to a new "room" to make the transition smoother
-       */
-      const cleanup = () => {
-        // logger.error(`CallContext: Cleaning up for previous room: ${cleanupRoomId}`);
-
-        if (smallWidgetRef.current) {
-          // smallWidgetRef.current.stopMessaging();
-        }
-        // Potentially call widgetApi.stop() or similar if the API instance has it
-        if (widgetApiRef.current) {
-          // widgetApiRef.current.stop?.();
-        }
-        // widgetApiRef.current = null;
-        // smallWidgetRef.current = null;
-        // if (iframeRef.current) iframeRef.current.src = 'about:blank';
-      };
-
       if (mx?.getUserId()) {
         if (
           (activeCallRoomId !== viewedCallRoomId && isCallActive) ||
@@ -96,63 +70,48 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
             returnToLobby: 'true',
             perParticipentE2EE: 'true',
           });
-          if (iframeRef.current && iframeRef.current.src !== newUrl.toString()) {
-            logger.info(
-              `PersistentCallContainer: Updating iframe src for ${roomIdToSet} to ${newUrl.toString()}`
-            );
-            cleanup();
-            iframeRef.current.src = newUrl.toString();
-          } else if (iframeRef.current && !iframeRef.current.src) {
-            logger.info(
-              `PersistentCallContainer: Setting initial iframe src for ${roomIdToSet} to ${newUrl.toString()}`
-            );
-            iframeRef.current.src = newUrl.toString();
-          }
+
           if (
             newUrl.toString() === primarySmallWidgetRef?.current?.url ||
             newUrl.toString() === backupSmallWidgetRef?.current?.url
           )
             return;
 
-          logger.error(
-            `New: ${roomIdToSet}
-            \n Primary: ${primarySmallWidgetRef?.current?.roomId}
-            \n Backup: ${backupSmallWidgetRef?.current?.roomId}`
-          );
+          if (iframeRef.current && iframeRef.current.src !== newUrl.toString()) {
+            iframeRef.current.src = newUrl.toString();
+          } else if (iframeRef.current && !iframeRef.current.src) {
+            iframeRef.current.src = newUrl.toString();
+          }
+
           const iframeElement = iframeRef.current;
           if (!iframeElement) {
-            logger.error('PersistentCallContainer: iframeRef is null, cannot setup API.');
-            return cleanup;
+            return;
           }
 
           const userId = mx.getUserId() ?? '';
           const app = createVirtualWidget(
             mx,
-            `element-call-${roomIdToSet}-${Date.now()}`,
+            `element-call-${roomIdToSet}`,
             userId,
             'Element Call',
             'm.call',
             newUrl,
-            false,
+            true,
             getWidgetData(mx, roomIdToSet, {}, { skipLobby: true }),
             roomIdToSet
           );
 
-          logger.error(`PersistentCallContainer: Creating new SmallWidget/API for ${roomIdToSet}`);
+          //  logger.error(`PersistentCallContainer: Creating new SmallWidget/API for ${roomIdToSet}`);
           const smallWidget = new SmallWidget(app);
           smallWidgetRef.current = smallWidget;
 
           try {
             const widgetApiInstance = smallWidget.startMessaging(iframeElement);
             widgetApiRef.current = widgetApiInstance;
-            logger.error('Pre-register');
-
-            logger.error(`This is our check: ${skipLobby}`);
             if (skipLobby) {
               registerActiveClientWidgetApi(activeCallRoomId, widgetApiRef.current);
             } else {
               registerViewedClientWidgetApi(viewedCallRoomId, widgetApiRef.current);
-              logger.error('Post view register');
             }
 
             widgetApiInstance.once('ready', () => {
@@ -163,19 +122,9 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
               `PersistentCallContainer: Error initializing widget messaging for ${roomIdToSet}:`,
               error
             );
-            cleanup();
           }
-        } else {
-          /*
-        if (iframeRef.current && iframeRef.current.src !== 'about:blank') {
-          logger.info('PersistentCallContainer: No active call, setting src to about:blank');
-          iframeRef.current.src = 'about:blank';
-        }
-          */
-          cleanup();
         }
       }
-      return cleanup;
     },
     [
       activeCallRoomId,
@@ -189,7 +138,7 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
   );
 
   useEffect(() => {
-    logger.error(`This is our param: ${isPrimaryIframe}`);
+    //logger.error(`This is our param: ${isPrimaryIframe}`);
     setupWidget(primaryWidgetApiRef, primarySmallWidgetRef, primaryIframeRef, isPrimaryIframe);
     setupWidget(backupWidgetApiRef, backupSmallWidgetRef, backupIframeRef, !isPrimaryIframe);
   }, [

From 0b70ce7591cd25a336df5a116e9b5253e5584abd Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 22 May 2025 17:33:36 -0500
Subject: [PATCH 145/242] Remove Date.now() that was causing widgetId desync

---
 src/app/features/room/SmallWidget.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/app/features/room/SmallWidget.ts b/src/app/features/room/SmallWidget.ts
index 25bb5bd5..d2e0e379 100644
--- a/src/app/features/room/SmallWidget.ts
+++ b/src/app/features/room/SmallWidget.ts
@@ -48,7 +48,7 @@ export const getWidgetUrl = (
 
   const params = new URLSearchParams({
     embed: 'true',
-    widgetId: `element-call-${roomId}-${Date.now()}`,
+    widgetId: `element-call-${roomId}`,
     appPrompt: 'false',
     preload: 'false',
     skipLobby: setParams.skipLobby ?? 'true',
@@ -84,7 +84,7 @@ export class SmallWidget extends EventEmitter {
 
   private mockWidget: CinnyWidget;
 
-  private roomId?: string;
+  public roomId?: string;
 
   public url?: string;
 
@@ -147,7 +147,6 @@ export class SmallWidget extends EventEmitter {
       const { type } = ev.detail.data;
 
       ev.preventDefault();
-
       if (room === null) {
         return this.messaging?.transport.reply(ev.detail, { events });
       }

From 7dcd43c64fc9bb3a9f7d3b2d250b0c6e16343122 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 22 May 2025 17:41:16 -0500
Subject: [PATCH 146/242] add listener clearing, camel case es lint rule
 exception, remove unneeded else statements

---
 src/app/pages/client/CallProvider.tsx | 27 +++++++++++----------------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
index 039ddfa1..847404e6 100644
--- a/src/app/pages/client/CallProvider.tsx
+++ b/src/app/pages/client/CallProvider.tsx
@@ -146,21 +146,15 @@ export function CallProvider({ children }: CallProviderProps) {
     (roomId: string | null, clientWidgetApi: ClientWidgetApi | null) => {
       if (activeClientWidgetApi && activeClientWidgetApi !== clientWidgetApi) {
         logger.debug(`CallContext: Cleaning up listeners for previous clientWidgetApi instance.`);
+        activeClientWidgetApi.removeAllListeners();
       }
 
       if (roomId && clientWidgetApi) {
         logger.debug(`CallContext: Registering active clientWidgetApi for room ${roomId}.`);
         setActiveClientWidgetApi(clientWidgetApi, roomId);
       } else if (roomId === activeClientWidgetApiRoomId || roomId === null) {
-        logger.debug(
-          `CallContext: Clearing active clientWidgetApi for room ${activeClientWidgetApiRoomId}.`
-        );
         setActiveClientWidgetApi(null, null);
         resetMediaState();
-      } else {
-        logger.debug(
-          `CallContext: Ignoring clientWidgetApi registration/clear request for room ${roomId}, as current clientWidgetApi belongs to ${activeClientWidgetApiRoomId}.`
-        );
       }
     },
     [activeClientWidgetApi, activeClientWidgetApiRoomId, setActiveClientWidgetApi, resetMediaState]
@@ -177,22 +171,19 @@ export function CallProvider({ children }: CallProviderProps) {
   const registerViewedClientWidgetApi = useCallback(
     (roomId: string | null, clientWidgetApi: ClientWidgetApi | null) => {
       if (viewedClientWidgetApi && viewedClientWidgetApi !== clientWidgetApi) {
-        logger.error(`CallContext: Cleaning up listeners for previous clientWidgetApi instance.`);
+        logger.debug(`CallContext: Cleaning up listeners for previous clientWidgetApi instance.`);
+        viewedClientWidgetApi.removeAllListeners();
+        viewedClientWidgetApi.stop();
       }
 
       if (roomId && clientWidgetApi) {
-        logger.error(`CallContext: Registering viewed clientWidgetApi for room ${roomId}.`);
+        logger.debug(`CallContext: Registering viewed clientWidgetApi for room ${roomId}.`);
         setViewedClientWidgetApi(clientWidgetApi, roomId);
       } else if (roomId === viewedClientWidgetApiRoomId || roomId === null) {
-        logger.error(
+        logger.debug(
           `CallContext: Clearing viewed clientWidgetApi for room ${viewedClientWidgetApiRoomId}.`
         );
         setViewedClientWidgetApi(null, null);
-        //resetMediaState();
-      } else {
-        logger.debug(
-          `CallContext: Ignoring clientWidgetApi registration/clear request for room ${roomId}, as current clientWidgetApi belongs to ${viewedClientWidgetApiRoomId}.`
-        );
       }
     },
     [viewedClientWidgetApi, viewedClientWidgetApiRoomId, setViewedClientWidgetApi]
@@ -223,7 +214,10 @@ export function CallProvider({ children }: CallProviderProps) {
         `CallContext: Received media state update from widget in room ${activeCallRoomId}:`,
         ev.detail
       );
-      const { audio_enabled, video_enabled } = ev.detail.data;
+
+      /* eslint-disable camelcase */
+      const { audio_enabled, video_enabled } = ev.detail.data ?? {};
+
       if (typeof audio_enabled === 'boolean' && audio_enabled !== isAudioEnabled) {
         logger.debug(`CallContext: Updating audio enabled state from widget: ${audio_enabled}`);
         setIsAudioEnabledState(audio_enabled);
@@ -232,6 +226,7 @@ export function CallProvider({ children }: CallProviderProps) {
         logger.debug(`CallContext: Updating video enabled state from widget: ${video_enabled}`);
         setIsVideoEnabledState(video_enabled);
       }
+      /* eslint-enable camelcase */
     };
 
     const handleOnScreenStateUpdate = (ev: CustomEvent) => {

From e5505cd5c2123dd20f73263cbbe49175f8bb5cdc Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 22 May 2025 17:42:23 -0500
Subject: [PATCH 147/242] Remove unused

---
 src/app/pages/client/CallProvider.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/CallProvider.tsx
index 847404e6..e15ce7e4 100644
--- a/src/app/pages/client/CallProvider.tsx
+++ b/src/app/pages/client/CallProvider.tsx
@@ -10,7 +10,6 @@ import React, {
 import { logger } from 'matrix-js-sdk/lib/logger';
 import { WidgetApiToWidgetAction, WidgetApiAction, ClientWidgetApi } from 'matrix-widget-api';
 import { useParams } from 'react-router-dom';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 
 interface MediaStatePayload {
   data?: {
@@ -89,8 +88,6 @@ export function CallProvider({ children }: CallProviderProps) {
   const [isPrimaryIframe, setIsPrimaryIframe] = useState<boolean>(DEFAULT_PRIMARY_IFRAME);
 
   const { roomIdOrAlias: viewedRoomId } = useParams<{ roomIdOrAlias: string }>();
-  const mx = useMatrixClient();
-  const room = mx.getRoom(viewedRoomId);
 
   const resetMediaState = useCallback(() => {
     logger.debug('CallContext: Resetting media state to defaults.');

From 3bd75884978c144966d6aaab75d950d699f567a4 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 22 May 2025 17:49:40 -0500
Subject: [PATCH 148/242] Add widgetId as a getWidgetUrl param

---
 src/app/features/room/SmallWidget.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/features/room/SmallWidget.ts b/src/app/features/room/SmallWidget.ts
index d2e0e379..1371a901 100644
--- a/src/app/features/room/SmallWidget.ts
+++ b/src/app/features/room/SmallWidget.ts
@@ -40,6 +40,7 @@ export const getWidgetUrl = (
   mx: MatrixClient,
   roomId: string,
   elementCallUrl: string,
+  widgetId: string,
   setParams: any
 ): URL => {
   const baseUrl = window.location.origin;
@@ -48,7 +49,7 @@ export const getWidgetUrl = (
 
   const params = new URLSearchParams({
     embed: 'true',
-    widgetId: `element-call-${roomId}`,
+    widgetId,
     appPrompt: 'false',
     preload: 'false',
     skipLobby: setParams.skipLobby ?? 'true',

From 5481595a67c97d5764df37d6d5bb8238920b4beb Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 22 May 2025 19:42:21 -0500
Subject: [PATCH 149/242] Remove no longer needed files

---
 src/app/pages/call/CallActivation.tsx       | 35 ---------------------
 src/app/pages/call/PowerLevelsContainer.tsx | 29 -----------------
 2 files changed, 64 deletions(-)
 delete mode 100644 src/app/pages/call/CallActivation.tsx
 delete mode 100644 src/app/pages/call/PowerLevelsContainer.tsx

diff --git a/src/app/pages/call/CallActivation.tsx b/src/app/pages/call/CallActivation.tsx
deleted file mode 100644
index f42a87df..00000000
--- a/src/app/pages/call/CallActivation.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { logger } from 'matrix-js-sdk/lib/logger';
-
-import { useCallState } from '../client/CallProvider';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-
-export function CallActivationEffect() {
-  const { roomIdOrAlias: viewedRoomId } = useParams<{ roomIdOrAlias: string }>();
-  const { activeCallRoomId, isCallActive, setActiveCallRoomId } = useCallState();
-  const mx = useMatrixClient();
-  const room = mx.getRoom(viewedRoomId);
-
-  useEffect(() => {
-    if (!viewedRoomId || !mx) {
-      logger.error('CallActivationEffect: Missing viewedRoomId or MatrixClient.');
-      return;
-    }
-
-    const isViewingCallRoom = room?.isCallRoom?.() ?? false;
-
-    if (isViewingCallRoom) {
-      if (viewedRoomId !== activeCallRoomId && !isCallActive) {
-        logger.info(`CallActivationEffect: Auto-activating call for viewed room: ${viewedRoomId}`);
-        //setActiveCallRoomId(viewedRoomId);
-      } else {
-        logger.debug(
-          `CallActivationEffect: Viewed room ${viewedRoomId} is already the active call.`
-        );
-      }
-    }
-  }, [viewedRoomId, activeCallRoomId, setActiveCallRoomId, isCallActive, mx, room]);
-
-  return null;
-}
diff --git a/src/app/pages/call/PowerLevelsContainer.tsx b/src/app/pages/call/PowerLevelsContainer.tsx
deleted file mode 100644
index b7216e60..00000000
--- a/src/app/pages/call/PowerLevelsContainer.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React, { ReactNode } from "react";
-import { useSelectedRoom } from "../../hooks/router/useSelectedRoom";
-import { useMatrixClient } from "../../hooks/useMatrixClient";
-import { PowerLevelsContextProvider, usePowerLevels } from "../../hooks/usePowerLevels";
-import { RouteSpaceProvider, SpaceRouteRoomProvider } from "../client/space";
-
-
-
-type PowerLevelsContainerProps = {
-  children: ReactNode;
-};
-export function PowerLevelsContainer({ children }: PowerLevelsContainerProps) {
-
-  const mx = useMatrixClient();
-  const roomId = useSelectedRoom();
-  const room = mx.getRoom(roomId);
-  const powerLevels = usePowerLevels(room ?? null);
-
-
-    return (
-                    <PowerLevelsContextProvider value={powerLevels}>
-            <RouteSpaceProvider>
-              <SpaceRouteRoomProvider>
-              { children }
-              </SpaceRouteRoomProvider>
-            </RouteSpaceProvider>
-                        </PowerLevelsContextProvider>
-    );
-}
\ No newline at end of file

From c6ceb3f977f7e0f95eabad37c887c7434010dc5f Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 22 May 2025 19:42:46 -0500
Subject: [PATCH 150/242] revert ternary expression change and add to
 dependency array

---
 src/app/features/room/CallView.tsx | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/app/features/room/CallView.tsx b/src/app/features/room/CallView.tsx
index fd3c73bd..ecd28957 100644
--- a/src/app/features/room/CallView.tsx
+++ b/src/app/features/room/CallView.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import { Room } from 'matrix-js-sdk';
 import React, { useContext, useMemo } from 'react';
 import { useCallback, useEffect, useRef } from 'react';
@@ -49,9 +50,13 @@ export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
 
   const screenSize = useScreenSizeContext();
   const isMobile = screenSize === ScreenSize.Mobile;
-
-  const activeIframeDisplayRef =
-    isViewingActiveCall && isPrimaryIframe ? primaryIframeRef : backupIframeRef;
+  const activeIframeDisplayRef = isPrimaryIframe
+    ? isViewingActiveCall
+      ? primaryIframeRef
+      : backupIframeRef
+    : isViewingActiveCall
+    ? backupIframeRef
+    : primaryIframeRef;
 
   const applyFixedPositioningToIframe = useCallback(() => {
     const iframeElement = activeIframeDisplayRef?.current;
@@ -120,13 +125,7 @@ export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
         originalIframeStylesRef.current = null;
       };
     }
-  }, [
-    activeIframeDisplayRef,
-    applyFixedPositioningToIframe,
-    debouncedApplyFixedPositioning,
-    isPrimaryIframe,
-    isViewingActiveCall,
-  ]);
+  }, [activeIframeDisplayRef, applyFixedPositioningToIframe, debouncedApplyFixedPositioning, isPrimaryIframe, isViewingActiveCall, room]);
 
   const isCallViewVisible = room.isCallRoom();
 

From 19f1df798f6ac45e6aee1f313ef2a2a992bcf0ae Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 22 May 2025 19:43:11 -0500
Subject: [PATCH 151/242] add widgetId to correct pos in getWidgetUrl usage

---
 .../pages/call/PersistentCallContainer.tsx    | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/call/PersistentCallContainer.tsx
index af3e3e6b..0a8b3c5d 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/call/PersistentCallContainer.tsx
@@ -65,11 +65,18 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
           )
             return;
 
-          const newUrl = getWidgetUrl(mx, roomIdToSet, clientConfig.elementCallUrl ?? '', {
-            skipLobby: skipLobby.toString(),
-            returnToLobby: 'true',
-            perParticipentE2EE: 'true',
-          });
+          const widgetId = `element-call-${roomIdToSet}-${Date.now()}`;
+          const newUrl = getWidgetUrl(
+            mx,
+            roomIdToSet,
+            clientConfig.elementCallUrl ?? '',
+            widgetId,
+            {
+              skipLobby: skipLobby.toString(),
+              returnToLobby: 'true',
+              perParticipentE2EE: 'true',
+            }
+          );
 
           if (
             newUrl.toString() === primarySmallWidgetRef?.current?.url ||
@@ -91,7 +98,7 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
           const userId = mx.getUserId() ?? '';
           const app = createVirtualWidget(
             mx,
-            `element-call-${roomIdToSet}`,
+            widgetId,
             userId,
             'Element Call',
             'm.call',
@@ -138,7 +145,6 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
   );
 
   useEffect(() => {
-    //logger.error(`This is our param: ${isPrimaryIframe}`);
     setupWidget(primaryWidgetApiRef, primarySmallWidgetRef, primaryIframeRef, isPrimaryIframe);
     setupWidget(backupWidgetApiRef, backupSmallWidgetRef, backupIframeRef, !isPrimaryIframe);
   }, [

From 07a980a0c75e87fc3309762cf2d21438a87b012e Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 22 May 2025 19:44:02 -0500
Subject: [PATCH 152/242] Remove CallActivation

---
 src/app/pages/Router.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index 879062e9..a561bf39 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -62,7 +62,6 @@ import { RoomSettingsRenderer } from '../features/room-settings';
 import { ClientRoomsNotificationPreferences } from './client/ClientRoomsNotificationPreferences';
 import { SpaceSettingsRenderer } from '../features/space-settings';
 import { CallProvider } from './client/CallProvider';
-import { CallActivationEffect } from './call/CallActivation';
 import { PersistentCallContainer } from './call/PersistentCallContainer';
 
 export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {
@@ -131,7 +130,6 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                             <Outlet />
                           </PersistentCallContainer>
                         </ClientLayout>
-                        <CallActivationEffect />
                       </CallProvider>
                       <RoomSettingsRenderer />
                       <SpaceSettingsRenderer />

From 67fbf949b0aa980d227c0a2703fc46a961a8253f Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 22 May 2025 19:57:13 -0500
Subject: [PATCH 153/242] Move and rename RoomCallNavStatus

---
 .../room-nav/RoomCallNavStatus.tsx}           | 27 ++++++++-----------
 src/app/pages/client/direct/Direct.tsx        |  2 +-
 src/app/pages/client/home/Home.tsx            |  2 +-
 src/app/pages/client/space/Space.tsx          |  2 +-
 4 files changed, 14 insertions(+), 19 deletions(-)
 rename src/app/{pages/call/CallNavStatus.tsx => features/room-nav/RoomCallNavStatus.tsx} (80%)

diff --git a/src/app/pages/call/CallNavStatus.tsx b/src/app/features/room-nav/RoomCallNavStatus.tsx
similarity index 80%
rename from src/app/pages/call/CallNavStatus.tsx
rename to src/app/features/room-nav/RoomCallNavStatus.tsx
index 8d91fd69..034e5664 100644
--- a/src/app/pages/call/CallNavStatus.tsx
+++ b/src/app/features/room-nav/RoomCallNavStatus.tsx
@@ -1,30 +1,25 @@
-import { logger } from 'matrix-js-sdk/lib/logger';
-import { NavLink, useParams } from 'react-router-dom';
 import { Box, Chip, Icon, IconButton, Icons, Text, Tooltip, TooltipProvider } from 'folds';
 import React from 'react';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useCallState } from '../client/CallProvider';
-import { getSpaceRoomPath } from '../pathUtils';
-import { getCanonicalAliasOrRoomId } from '../../utils/matrix';
-import { useNavToActivePathMapper } from '../../hooks/useNavToActivePathMapper';
-import { useSpace } from '../../hooks/useSpace';
 import { Room } from 'matrix-js-sdk';
-import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
-import {
-  makeMentionCustomProps,
-  renderMatrixMention,
-} from '../../plugins/react-custom-html-parser';
+import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { useCallState } from '../../pages/client/call/CallProvider';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 
 type CallNavStatusProps = {
   space: Room | null;
 };
 export function CallNavStatus({ space }: CallNavStatusProps) {
-  const { activeCallRoomId, isAudioEnabled, isVideoEnabled, isCallActive, toggleAudio, toggleVideo, hangUp } =
-    useCallState();
+  const {
+    activeCallRoomId,
+    isAudioEnabled,
+    isVideoEnabled,
+    isCallActive,
+    toggleAudio,
+    toggleVideo,
+    hangUp,
+  } = useCallState();
   const mx = useMatrixClient();
   const { navigateRoom } = useRoomNavigate();
-  const { roomIdOrAlias: viewedRoomId } = useParams<{ roomIdOrAlias: string }>();
   const handleGoToCallRoom = () => {
     if (activeCallRoomId) {
       navigateRoom(activeCallRoomId);
diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index 2843a2c6..f8c31f21 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -50,7 +50,7 @@ import {
   getRoomNotificationMode,
   useRoomsNotificationPreferencesContext,
 } from '../../../hooks/useRoomsNotificationPreferences';
-import { CallNavStatus } from '../../call/CallNavStatus';
+import { CallNavStatus } from '../../../features/room-nav/RoomCallNavStatus';
 
 type DirectMenuProps = {
   requestClose: () => void;
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index 1820a77f..c3dd40f6 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -53,7 +53,7 @@ import {
   getRoomNotificationMode,
   useRoomsNotificationPreferencesContext,
 } from '../../../hooks/useRoomsNotificationPreferences';
-import { CallNavStatus } from '../../call/CallNavStatus';
+import { CallNavStatus } from '../../../features/room-nav/RoomCallNavStatus';
 
 type HomeMenuProps = {
   requestClose: () => void;
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 3af997ef..fb75e61e 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -77,7 +77,7 @@ import {
   useRoomsNotificationPreferencesContext,
 } from '../../../hooks/useRoomsNotificationPreferences';
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
-import { CallNavStatus } from '../../call/CallNavStatus';
+import { CallNavStatus } from '../../../features/room-nav/RoomCallNavStatus';
 import { getStateEvents } from '../../../utils/room';
 import { RoomNavUser } from '../../../features/room-nav/RoomNavUser';
 import { useStateEvents } from '../../../hooks/useStateEvents';

From a81492c5b2af1386dfa284cd0aa1399253cee42e Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 22 May 2025 19:57:40 -0500
Subject: [PATCH 154/242] update imports and dependency array

---
 src/app/features/room/CallView.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/app/features/room/CallView.tsx b/src/app/features/room/CallView.tsx
index ecd28957..f1e0a4ec 100644
--- a/src/app/features/room/CallView.tsx
+++ b/src/app/features/room/CallView.tsx
@@ -4,8 +4,11 @@ import React, { useContext, useMemo } from 'react';
 import { useCallback, useEffect, useRef } from 'react';
 import { Box } from 'folds';
 import { RoomViewHeader } from './RoomViewHeader';
-import { useCallState } from '../../pages/client/CallProvider';
-import { PrimaryRefContext, BackupRefContext } from '../../pages/call/PersistentCallContainer';
+import { useCallState } from '../../pages/client/call/CallProvider';
+import {
+  PrimaryRefContext,
+  BackupRefContext,
+} from '../../pages/client/call/PersistentCallContainer';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 
 function debounce<F extends (...args: any[]) => any>(func: F, waitFor: number) {
@@ -125,7 +128,14 @@ export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
         originalIframeStylesRef.current = null;
       };
     }
-  }, [activeIframeDisplayRef, applyFixedPositioningToIframe, debouncedApplyFixedPositioning, isPrimaryIframe, isViewingActiveCall, room]);
+  }, [
+    activeIframeDisplayRef,
+    applyFixedPositioningToIframe,
+    debouncedApplyFixedPositioning,
+    isPrimaryIframe,
+    isViewingActiveCall,
+    room,
+  ]);
 
   const isCallViewVisible = room.isCallRoom();
 

From 023a23d87c0bf259b7bf9a67a427536afc438999 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 22 May 2025 20:02:13 -0500
Subject: [PATCH 155/242] Rename and clean up

---
 .../pages/client/{ => call}/CallProvider.tsx  |  0
 .../call/PersistentCallContainer.tsx          | 26 +++++++++++--------
 2 files changed, 15 insertions(+), 11 deletions(-)
 rename src/app/pages/client/{ => call}/CallProvider.tsx (100%)
 rename src/app/pages/{ => client}/call/PersistentCallContainer.tsx (90%)

diff --git a/src/app/pages/client/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
similarity index 100%
rename from src/app/pages/client/CallProvider.tsx
rename to src/app/pages/client/call/CallProvider.tsx
diff --git a/src/app/pages/call/PersistentCallContainer.tsx b/src/app/pages/client/call/PersistentCallContainer.tsx
similarity index 90%
rename from src/app/pages/call/PersistentCallContainer.tsx
rename to src/app/pages/client/call/PersistentCallContainer.tsx
index 0a8b3c5d..e8b840ec 100644
--- a/src/app/pages/call/PersistentCallContainer.tsx
+++ b/src/app/pages/client/call/PersistentCallContainer.tsx
@@ -3,17 +3,16 @@ import { logger } from 'matrix-js-sdk/lib/logger';
 import { ClientWidgetApi } from 'matrix-widget-api';
 import { Box } from 'folds';
 import { useParams } from 'react-router-dom';
-import { useCallState } from '../client/CallProvider';
+import { useCallState } from './CallProvider';
 import {
   createVirtualWidget,
   SmallWidget,
   getWidgetData,
   getWidgetUrl,
-} from '../../features/room/SmallWidget';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
-import { useClientConfig } from '../../hooks/useClientConfig';
-import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+} from '../../../features/room/SmallWidget';
+import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useClientConfig } from '../../../hooks/useClientConfig';
+import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 
 interface PersistentCallContainerProps {
   children: ReactNode;
@@ -48,16 +47,22 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
     () => activeCallRoomId !== null && activeCallRoomId === viewedRoomId,
     [activeCallRoomId, viewedRoomId]
   );
+  /* eslint-disable no-param-reassign */
 
   const setupWidget = useCallback(
-    (widgetApiRef, smallWidgetRef, iframeRef, skipLobby) => {
+    (
+      widgetApiRef: { current: ClientWidgetApi },
+      smallWidgetRef: { current: SmallWidget },
+      iframeRef: { current: { src: string } },
+      skipLobby: { toString: () => any }
+    ) => {
       if (mx?.getUserId()) {
         if (
           (activeCallRoomId !== viewedCallRoomId && isCallActive) ||
           (activeCallRoomId && !isCallActive) ||
           (!activeCallRoomId && viewedCallRoomId && !isCallActive)
         ) {
-          const roomIdToSet = skipLobby ? activeCallRoomId : viewedCallRoomId;
+          const roomIdToSet = (skipLobby ? activeCallRoomId : viewedCallRoomId) ?? '';
           if (
             roomIdToSet &&
             (roomIdToSet === primarySmallWidgetRef?.current?.roomId ||
@@ -108,7 +113,6 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
             roomIdToSet
           );
 
-          //  logger.error(`PersistentCallContainer: Creating new SmallWidget/API for ${roomIdToSet}`);
           const smallWidget = new SmallWidget(app);
           smallWidgetRef.current = smallWidget;
 
@@ -197,7 +201,7 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
                   height: '100%',
                   border: 'none',
                 }}
-                title={`Persistent Element Call`}
+                title="Persistent Element Call"
                 sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
                 allow="microphone; camera; display-capture; autoplay; clipboard-write;"
                 src="about:blank"
@@ -213,7 +217,7 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
                   border: 'none',
                   display: !isPrimaryIframe || isViewingActiveCall ? 'flex' : 'none',
                 }}
-                title={`Persistent Element Call`}
+                title="Persistent Element Call"
                 sandbox="allow-forms allow-scripts allow-same-origin allow-popups allow-modals allow-downloads"
                 allow="microphone; camera; display-capture; autoplay; clipboard-write;"
                 src="about:blank"

From 0db52c2d3759030d1b3532612b4958d2e801ebb6 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 22 May 2025 20:02:35 -0500
Subject: [PATCH 156/242] Moved CallProvider

---
 src/app/features/room-nav/RoomNavItem.tsx | 2 +-
 src/app/features/room/Room.tsx            | 2 +-
 src/app/features/room/RoomViewHeader.tsx  | 2 +-
 src/app/pages/Router.tsx                  | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index c11d048f..89ac9061 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -52,7 +52,7 @@ import {
   RoomNotificationMode,
 } from '../../hooks/useRoomsNotificationPreferences';
 import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
-import { useCallState } from '../../pages/client/CallProvider';
+import { useCallState } from '../../pages/client/call/CallProvider';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 
diff --git a/src/app/features/room/Room.tsx b/src/app/features/room/Room.tsx
index 835c750b..ba989ff3 100644
--- a/src/app/features/room/Room.tsx
+++ b/src/app/features/room/Room.tsx
@@ -14,7 +14,7 @@ import { markAsRead } from '../../../client/action/notifications';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomMembers } from '../../hooks/useRoomMembers';
 import { CallView } from './CallView';
-import { useCallState } from '../../pages/client/CallProvider';
+import { useCallState } from '../../pages/client/call/CallProvider';
 
 export function Room() {
   const { eventId } = useParams();
diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index ea57f2ba..5563a5c8 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -65,7 +65,7 @@ import {
   getRoomNotificationModeIcon,
   useRoomsNotificationPreferencesContext,
 } from '../../hooks/useRoomsNotificationPreferences';
-import { useCallState } from '../../pages/client/CallProvider';
+import { useCallState } from '../../pages/client/call/CallProvider';
 
 type RoomMenuProps = {
   room: Room;
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index a561bf39..1af0648e 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -61,8 +61,8 @@ import { AutoRestoreBackupOnVerification } from '../components/BackupRestore';
 import { RoomSettingsRenderer } from '../features/room-settings';
 import { ClientRoomsNotificationPreferences } from './client/ClientRoomsNotificationPreferences';
 import { SpaceSettingsRenderer } from '../features/space-settings';
-import { CallProvider } from './client/CallProvider';
-import { PersistentCallContainer } from './call/PersistentCallContainer';
+import { CallProvider } from './client/call/CallProvider';
+import { PersistentCallContainer } from './client/call/PersistentCallContainer';
 
 export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {
   const { hashRouter } = clientConfig;

From 395a24f1a76bc8caaa2f44faa90265ae46679a0d Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 22 May 2025 20:30:26 -0500
Subject: [PATCH 157/242] Fix spelling mistake

---
 src/app/pages/client/call/PersistentCallContainer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/pages/client/call/PersistentCallContainer.tsx b/src/app/pages/client/call/PersistentCallContainer.tsx
index e8b840ec..3523ceb4 100644
--- a/src/app/pages/client/call/PersistentCallContainer.tsx
+++ b/src/app/pages/client/call/PersistentCallContainer.tsx
@@ -79,7 +79,7 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
             {
               skipLobby: skipLobby.toString(),
               returnToLobby: 'true',
-              perParticipentE2EE: 'true',
+              perParticipantE2EE: 'true',
             }
           );
 

From f262f5472845b50f42632e97d8b95fa861610a62 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 22 May 2025 20:30:55 -0500
Subject: [PATCH 158/242] Fix to use shorthand prop

---
 src/app/features/room/SmallWidget.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room/SmallWidget.ts b/src/app/features/room/SmallWidget.ts
index 1371a901..73fef394 100644
--- a/src/app/features/room/SmallWidget.ts
+++ b/src/app/features/room/SmallWidget.ts
@@ -58,7 +58,7 @@ export const getWidgetUrl = (
     hideHeader: 'true',
     userId: mx.getUserId()!,
     deviceId: mx.getDeviceId()!,
-    roomId: roomId,
+    roomId,
     baseUrl: mx.baseUrl!,
     parentUrl: window.location.origin,
   });

From e4ce4da8eea47a17621dfe6e253e18e7feffaaae Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 22 May 2025 23:14:24 -0500
Subject: [PATCH 159/242] Remove unneeded logger.errors

---
 src/app/features/room/SmallWidget.ts          | 11 --------
 src/app/pages/client/call/CallProvider.tsx    | 17 ++++-------
 .../client/call/PersistentCallContainer.tsx   | 28 ++++++++-----------
 src/app/pages/client/space/Space.tsx          |  1 -
 4 files changed, 16 insertions(+), 41 deletions(-)

diff --git a/src/app/features/room/SmallWidget.ts b/src/app/features/room/SmallWidget.ts
index 73fef394..0464a9c4 100644
--- a/src/app/features/room/SmallWidget.ts
+++ b/src/app/features/room/SmallWidget.ts
@@ -214,17 +214,6 @@ export class SmallWidget extends EventEmitter {
     this.feedEvent(ev);
   };
 
-  /*
-  private onStateUpdate = (ev: MatrixEvent): void => {
-    if (this.messaging === null) return;
-    const raw = ev.getEffectiveEvent();
-    logger.error(raw);
-    this.messaging.feedEvent(raw as IRoomEvent).catch((e) => {
-      logger.error('Error sending state update to widget: ', e);
-    });
-  };
-  */
-
   private onToDeviceEvent = async (ev: MatrixEvent): Promise<void> => {
     await this.client.decryptEventIfNeeded(ev);
     if (ev.isDecryptionFailure()) return;
diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index e15ce7e4..2573725d 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -301,16 +301,11 @@ export function CallProvider({ children }: CallProviderProps) {
         );
         return Promise.reject(new Error('Mismatched active call clientWidgetApi'));
       }
-      try {
-        logger.debug(
-          `CallContext: Sending action '${action}' via active clientWidgetApi (room: ${activeClientWidgetApiRoomId}) with data:`,
-          data
-        );
-        await activeClientWidgetApi.transport.send(action as WidgetApiAction, data);
-      } catch (error) {
-        logger.error(`CallContext: Error sending action '${action}':`, error);
-        throw error;
-      }
+      logger.debug(
+        `CallContext: Sending action '${action}' via active clientWidgetApi (room: ${activeClientWidgetApiRoomId}) with data:`,
+        data
+      );
+      await activeClientWidgetApi.transport.send(action as WidgetApiAction, data);
     },
     [activeClientWidgetApi, activeCallRoomId, activeClientWidgetApiRoomId]
   );
@@ -326,7 +321,6 @@ export function CallProvider({ children }: CallProviderProps) {
       });
       logger.debug(`CallContext: Successfully sent audio toggle action.`);
     } catch (error) {
-      logger.error(`CallContext: Failed to send audio toggle action. Reverting state.`, error);
       setIsAudioEnabledState(!newState);
       throw error;
     }
@@ -343,7 +337,6 @@ export function CallProvider({ children }: CallProviderProps) {
       });
       logger.debug(`CallContext: Successfully sent video toggle action.`);
     } catch (error) {
-      logger.error(`CallContext: Failed to send video toggle action. Reverting state.`, error);
       setIsVideoEnabledState(!newState);
       throw error;
     }
diff --git a/src/app/pages/client/call/PersistentCallContainer.tsx b/src/app/pages/client/call/PersistentCallContainer.tsx
index 3523ceb4..abe17591 100644
--- a/src/app/pages/client/call/PersistentCallContainer.tsx
+++ b/src/app/pages/client/call/PersistentCallContainer.tsx
@@ -116,24 +116,18 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
           const smallWidget = new SmallWidget(app);
           smallWidgetRef.current = smallWidget;
 
-          try {
-            const widgetApiInstance = smallWidget.startMessaging(iframeElement);
-            widgetApiRef.current = widgetApiInstance;
-            if (skipLobby) {
-              registerActiveClientWidgetApi(activeCallRoomId, widgetApiRef.current);
-            } else {
-              registerViewedClientWidgetApi(viewedCallRoomId, widgetApiRef.current);
-            }
-
-            widgetApiInstance.once('ready', () => {
-              logger.info(`PersistentCallContainer: Widget for ${roomIdToSet} is ready.`);
-            });
-          } catch (error) {
-            logger.error(
-              `PersistentCallContainer: Error initializing widget messaging for ${roomIdToSet}:`,
-              error
-            );
+          const widgetApiInstance = smallWidget.startMessaging(iframeElement);
+          widgetApiRef.current = widgetApiInstance;
+          if (skipLobby) {
+            registerActiveClientWidgetApi(activeCallRoomId, widgetApiRef.current);
+          } else {
+            registerViewedClientWidgetApi(viewedCallRoomId, widgetApiRef.current);
           }
+
+          widgetApiInstance.once('ready', () => {
+            logger.info(`PersistentCallContainer: Widget for ${roomIdToSet} is ready.`);
+          });
+        
         }
       }
     },
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index fb75e61e..0b8083db 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -572,7 +572,6 @@ export function Space() {
                   );
                 }
                 default:
-                  logger.error('Unknown item type in virtualized list:', item);
                   return null;
               }
             };

From ff02c461e70d52f868b7a53db64d04482e7d8386 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 22 May 2025 23:52:19 -0500
Subject: [PATCH 160/242] Fixes element-call embedded support (but it seems to
 run poorly)

---
 src/app/features/room/SmallWidget.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/features/room/SmallWidget.ts b/src/app/features/room/SmallWidget.ts
index 0464a9c4..d057e806 100644
--- a/src/app/features/room/SmallWidget.ts
+++ b/src/app/features/room/SmallWidget.ts
@@ -44,8 +44,9 @@ export const getWidgetUrl = (
   setParams: any
 ): URL => {
   const baseUrl = window.location.origin;
-  const url =
-    new URL(`${elementCallUrl}/room`) ?? new URL('./dist/element-call/dist/index.html', baseUrl);
+  const url = elementCallUrl
+    ? new URL(`${elementCallUrl}/room`)
+    : new URL('/public/element-call/index.html#', baseUrl);
 
   const params = new URLSearchParams({
     embed: 'true',

From 4c8ab4e79d735c8d470d9ee772ce8c5bc58fb4f0 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 22 May 2025 23:52:51 -0500
Subject: [PATCH 161/242] null the default url so that we fallback to the
 embedded version (would recommend hosting it until performance issue is
 determined)

---
 config.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/config.json b/config.json
index bde28067..b307bb1d 100644
--- a/config.json
+++ b/config.json
@@ -9,8 +9,7 @@
     "xmr.se"
   ],
   "allowCustomHomeservers": true,
-
-  "elementCallUrl": "https://elementcall.example.com",
+  "elementCallUrl": null,
 
   "featuredCommunities": {
     "openAsDefault": false,

From d3ec9facf67149d037d4c3c9379037ac10e490c6 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 22 May 2025 23:53:17 -0500
Subject: [PATCH 162/242] Fix vite build to place element-call correctly for
 embedded npm package support

---
 vite.config.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/vite.config.js b/vite.config.js
index 5c1c68a2..a5af94d8 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -14,9 +14,9 @@ import buildConfig from './build.config';
 const copyFiles = {
   targets: [
     {
-      src: 'node_modules/@element-hq/element-call-embedded/dist',
-      dest: 'element-call'
-    },    
+      src: 'node_modules/@element-hq/element-call-embedded/dist/*',
+      dest: 'public/element-call',
+    },
     {
       src: 'node_modules/pdfjs-dist/build/pdf.worker.min.mjs',
       dest: '',
@@ -51,7 +51,10 @@ function serverMatrixSdkCryptoWasm(wasmFilePath) {
     configureServer(server) {
       server.middlewares.use((req, res, next) => {
         if (req.url === wasmFilePath) {
-          const resolvedPath = path.join(path.resolve(), "/node_modules/@matrix-org/matrix-sdk-crypto-wasm/pkg/matrix_sdk_crypto_wasm_bg.wasm");
+          const resolvedPath = path.join(
+            path.resolve(),
+            '/node_modules/@matrix-org/matrix-sdk-crypto-wasm/pkg/matrix_sdk_crypto_wasm_bg.wasm'
+          );
 
           if (fs.existsSync(resolvedPath)) {
             res.setHeader('Content-Type', 'application/wasm');
@@ -106,8 +109,8 @@ export default defineConfig({
       },
       devOptions: {
         enabled: true,
-        type: 'module'
-      }
+        type: 'module',
+      },
     }),
   ],
   optimizeDeps: {

From c108295e5af7f8e0966948748888c1d12badeb36 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 22 May 2025 23:53:30 -0500
Subject: [PATCH 163/242] add vite preview as an npm script

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 4b198147..0483c8d2 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "scripts": {
     "start": "vite",
     "build": "vite build",
+    "preview": "vite preview",
     "lint": "yarn check:eslint && yarn check:prettier",
     "check:eslint": "eslint src/*",
     "check:prettier": "prettier --check .",

From d54bc2c11014bfddf83d4b47c6ddea222041fcaf Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 23 May 2025 00:01:19 -0500
Subject: [PATCH 164/242] Move files to more correct location

---
 src/app/features/{room => call}/CallView.tsx   | 10 ++--------
 src/app/features/{room => call}/CinnyWidget.ts |  0
 src/app/features/{room => call}/SmallWidget.ts |  0
 .../{room => call}/SmallWidgetDriver.ts        | 18 +++++++++++++++---
 .../client/call/PersistentCallContainer.tsx    |  3 +--
 5 files changed, 18 insertions(+), 13 deletions(-)
 rename src/app/features/{room => call}/CallView.tsx (94%)
 rename src/app/features/{room => call}/CinnyWidget.ts (100%)
 rename src/app/features/{room => call}/SmallWidget.ts (100%)
 rename src/app/features/{room => call}/SmallWidgetDriver.ts (97%)

diff --git a/src/app/features/room/CallView.tsx b/src/app/features/call/CallView.tsx
similarity index 94%
rename from src/app/features/room/CallView.tsx
rename to src/app/features/call/CallView.tsx
index f1e0a4ec..eed5bd32 100644
--- a/src/app/features/room/CallView.tsx
+++ b/src/app/features/call/CallView.tsx
@@ -1,9 +1,8 @@
 /* eslint-disable no-nested-ternary */
 import { Room } from 'matrix-js-sdk';
-import React, { useContext, useMemo } from 'react';
-import { useCallback, useEffect, useRef } from 'react';
+import React, { useContext, useMemo, useCallback, useEffect, useRef } from 'react';
 import { Box } from 'folds';
-import { RoomViewHeader } from './RoomViewHeader';
+import { RoomViewHeader } from '../room/RoomViewHeader';
 import { useCallState } from '../../pages/client/call/CallProvider';
 import {
   PrimaryRefContext,
@@ -34,11 +33,6 @@ type OriginalStyles = {
   border?: string;
 };
 
-interface CallViewOutletContext {
-  primaryIframeRef: React.RefObject<HTMLIFrameElement | null>;
-  backupIframeRef: React.RefObject<HTMLIFrameElement | null>;
-}
-
 export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
   const primaryIframeRef = useContext(PrimaryRefContext);
   const backupIframeRef = useContext(BackupRefContext);
diff --git a/src/app/features/room/CinnyWidget.ts b/src/app/features/call/CinnyWidget.ts
similarity index 100%
rename from src/app/features/room/CinnyWidget.ts
rename to src/app/features/call/CinnyWidget.ts
diff --git a/src/app/features/room/SmallWidget.ts b/src/app/features/call/SmallWidget.ts
similarity index 100%
rename from src/app/features/room/SmallWidget.ts
rename to src/app/features/call/SmallWidget.ts
diff --git a/src/app/features/room/SmallWidgetDriver.ts b/src/app/features/call/SmallWidgetDriver.ts
similarity index 97%
rename from src/app/features/room/SmallWidgetDriver.ts
rename to src/app/features/call/SmallWidgetDriver.ts
index 163787a0..6764bb40 100644
--- a/src/app/features/room/SmallWidgetDriver.ts
+++ b/src/app/features/call/SmallWidgetDriver.ts
@@ -1,3 +1,8 @@
+/* eslint-disable no-return-await */
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-continue */
+/* eslint-disable class-methods-use-this */
+/* eslint-disable no-dupe-class-members */
 /*
  * Copyright 2024 New Vector Ltd.
  * Copyright 2020-2023 The Matrix.org Foundation C.I.C.
@@ -22,7 +27,6 @@ import {
   type IGetMediaConfigResult,
   type UpdateDelayedEventAction,
   OpenIDRequestState,
-  IOpenIDCredentials,
   SimpleObservable,
   IOpenIDUpdate,
 } from 'matrix-widget-api';
@@ -123,6 +127,7 @@ export class SmallWidgetDriver extends WidgetDriver {
       EventType.RoomRedaction,
       'io.element.call.reaction',
     ];
+    // eslint-disable-next-line no-restricted-syntax
     for (const eventType of sendRecvRoomEvents) {
       this.allowedCapabilities.add(
         WidgetEventCapability.forRoomEvent(EventDirection.Send, eventType).raw
@@ -145,6 +150,7 @@ export class SmallWidgetDriver extends WidgetDriver {
       EventType.CallReplaces,
       EventType.CallEncryptionKeysPrefix,
     ];
+    // eslint-disable-next-line no-restricted-syntax
     for (const eventType of sendRecvToDevice) {
       this.allowedCapabilities.add(
         WidgetEventCapability.forToDeviceEvent(EventDirection.Send, eventType).raw
@@ -166,12 +172,14 @@ export class SmallWidgetDriver extends WidgetDriver {
     stateKey: string | null,
     targetRoomId: string | null
   ): Promise<ISendEventDetails>;
+
   public async sendEvent<K extends keyof TimelineEvents>(
     eventType: K,
     content: TimelineEvents[K],
     stateKey: null,
     targetRoomId: string | null
   ): Promise<ISendEventDetails>;
+
   public async sendEvent(
     eventType: string,
     content: IContent,
@@ -194,7 +202,7 @@ export class SmallWidgetDriver extends WidgetDriver {
       );
     } else if (eventType === EventType.RoomRedaction) {
       // special case: extract the `redacts` property and call redact
-      r = await client.redactEvent(roomId, content['redacts']);
+      r = await client.redactEvent(roomId, content.redacts);
     } else {
       // message event
       r = await client.sendEvent(
@@ -219,6 +227,7 @@ export class SmallWidgetDriver extends WidgetDriver {
     stateKey: string | null,
     targetRoomId: string | null
   ): Promise<ISendDelayedEventDetails>;
+
   /**
    * @experimental Part of MSC4140 & MSC4157
    */
@@ -230,6 +239,7 @@ export class SmallWidgetDriver extends WidgetDriver {
     stateKey: null,
     targetRoomId: string | null
   ): Promise<ISendDelayedEventDetails>;
+
   public async sendDelayedEvent(
     delay: number | null,
     parentDelayId: string | null,
@@ -315,8 +325,10 @@ export class SmallWidgetDriver extends WidgetDriver {
       // attempt to re-batch these up into a single request
       const invertedContentMap: { [content: string]: { userId: string; deviceId: string }[] } = {};
 
+      // eslint-disable-next-line no-restricted-syntax
       for (const userId of Object.keys(contentMap)) {
         const userContentMap = contentMap[userId];
+        // eslint-disable-next-line no-restricted-syntax
         for (const deviceId of Object.keys(userContentMap)) {
           const content = userContentMap[deviceId];
           const stringifiedContent = JSON.stringify(content);
@@ -386,7 +398,7 @@ export class SmallWidgetDriver extends WidgetDriver {
       if (since !== undefined && ev.getId() === since) break;
 
       if (ev.getType() !== eventType || ev.isState()) continue;
-      if (eventType === EventType.RoomMessage && msgtype && msgtype !== ev.getContent()['msgtype'])
+      if (eventType === EventType.RoomMessage && msgtype && msgtype !== ev.getContent().msgtype)
         continue;
       if (ev.getStateKey() !== undefined && stateKey !== undefined && ev.getStateKey() !== stateKey)
         continue;
diff --git a/src/app/pages/client/call/PersistentCallContainer.tsx b/src/app/pages/client/call/PersistentCallContainer.tsx
index abe17591..a3741673 100644
--- a/src/app/pages/client/call/PersistentCallContainer.tsx
+++ b/src/app/pages/client/call/PersistentCallContainer.tsx
@@ -9,7 +9,7 @@ import {
   SmallWidget,
   getWidgetData,
   getWidgetUrl,
-} from '../../../features/room/SmallWidget';
+} from '../../../features/call/SmallWidget';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useClientConfig } from '../../../hooks/useClientConfig';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
@@ -127,7 +127,6 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
           widgetApiInstance.once('ready', () => {
             logger.info(`PersistentCallContainer: Widget for ${roomIdToSet} is ready.`);
           });
-        
         }
       }
     },

From 9b3c6e7c9295a4d94b01a651908ed4db57cd1293 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 23 May 2025 01:13:23 -0500
Subject: [PATCH 165/242] Add package-lock changes

---
 package-lock.json | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 5fd5b686..96e7bd96 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
         "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
         "@fontsource/inter": "4.5.14",
+        "@matrix-org/react-sdk-module-api": "^2.5.0",
         "@tanstack/react-query": "5.24.1",
         "@tanstack/react-query-devtools": "5.24.1",
         "@tanstack/react-virtual": "3.2.0",
@@ -46,6 +47,7 @@
         "linkify-react": "4.1.3",
         "linkifyjs": "4.1.3",
         "matrix-js-sdk": "37.5.0",
+        "matrix-widget-api": "1.11.0",
         "millify": "6.1.0",
         "pdfjs-dist": "4.2.67",
         "prismjs": "1.30.0",
@@ -71,6 +73,7 @@
         "ua-parser-js": "1.0.35"
       },
       "devDependencies": {
+        "@element-hq/element-call-embedded": "0.9.0",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rollup/plugin-inject": "5.0.3",
         "@rollup/plugin-wasm": "6.1.1",
@@ -1656,6 +1659,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@element-hq/element-call-embedded": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@element-hq/element-call-embedded/-/element-call-embedded-0.9.0.tgz",
+      "integrity": "sha512-W/ocQqfzU1rqwjLBCjCpeIEJTX2iCqn8CR3GRF0kqd5wsehPDhIsGPnUDmFalY/iN15eRDx/hex2rgOOJzFoGg==",
+      "dev": true
+    },
     "node_modules/@emotion/hash": {
       "version": "0.9.2",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
@@ -2277,6 +2286,18 @@
       "integrity": "sha512-S7lOrndAK9/8qOtaTq/WhttJC/o4GAzdfK0MUPpo8ApzsJEC0QjtwrkC3KBXdFP1cD1MXi/mlKR7aaoVMKgs6Q==",
       "license": "Apache-2.0"
     },
+    "node_modules/@matrix-org/react-sdk-module-api": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@matrix-org/react-sdk-module-api/-/react-sdk-module-api-2.5.0.tgz",
+      "integrity": "sha512-l/SmiO47gPIRd6YJJGj+B6qbxyypJF6SEsfYr7j9rSW6E85ZYCqf+TpMM2LmfwZRADyKfCVkaJbbBZYpoD02VA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.17.9"
+      },
+      "peerDependencies": {
+        "react": "^18"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -8818,9 +8839,9 @@
       }
     },
     "node_modules/matrix-widget-api": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.13.1.tgz",
-      "integrity": "sha512-mkOHUVzaN018TCbObfGOSaMW2GoUxOfcxNNlTVx5/HeMk3OSQPQM0C9oEME5Liiv/dBUoSrEB64V8wF7e/gb1w==",
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.11.0.tgz",
+      "integrity": "sha512-ED/9hrJqDWVLeED0g1uJnYRhINh3ZTquwurdM+Hc8wLVJIQ8G/r7A7z74NC+8bBIHQ1Jo7i1Uq5CoJp/TzFYrA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@types/events": "^3.0.0",

From 27196cbad203f330203e01db98547c9c942c11c7 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 23 May 2025 01:17:50 -0500
Subject: [PATCH 166/242] Set dep version to exact

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 96e7bd96..92fc5f05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
         "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
         "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
         "@fontsource/inter": "4.5.14",
-        "@matrix-org/react-sdk-module-api": "^2.5.0",
+        "@matrix-org/react-sdk-module-api": "2.5.0",
         "@tanstack/react-query": "5.24.1",
         "@tanstack/react-query-devtools": "5.24.1",
         "@tanstack/react-virtual": "3.2.0",
diff --git a/package.json b/package.json
index 0483c8d2..24ee4cfc 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
     "@fontsource/inter": "4.5.14",
-    "@matrix-org/react-sdk-module-api": "^2.5.0",
+    "@matrix-org/react-sdk-module-api": "2.5.0",
     "@tanstack/react-query": "5.24.1",
     "@tanstack/react-query-devtools": "5.24.1",
     "@tanstack/react-virtual": "3.2.0",

From 1871f707045efc29badb912d3a28b518f731659c Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 23 May 2025 01:24:32 -0500
Subject: [PATCH 167/242] Fix path issue from moving file locations

---
 src/app/features/room/Room.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room/Room.tsx b/src/app/features/room/Room.tsx
index ba989ff3..5dd67047 100644
--- a/src/app/features/room/Room.tsx
+++ b/src/app/features/room/Room.tsx
@@ -13,7 +13,7 @@ import { useKeyDown } from '../../hooks/useKeyDown';
 import { markAsRead } from '../../../client/action/notifications';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomMembers } from '../../hooks/useRoomMembers';
-import { CallView } from './CallView';
+import { CallView } from '../call/CallView';
 import { useCallState } from '../../pages/client/call/CallProvider';
 
 export function Room() {

From 9302003c3019ed1b0e146bcdcb0bd0af5d0dea60 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 23 May 2025 01:52:38 -0500
Subject: [PATCH 168/242] Sets initial states so the iframes don't cause the
 other to fail with the npm embedded package

---
 src/app/features/room-nav/RoomNavItem.tsx             | 1 +
 src/app/pages/client/call/PersistentCallContainer.tsx | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 89ac9061..00992a32 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -266,6 +266,7 @@ export function RoomNavItem({
       if (room.isCallRoom() && activeCallRoomId !== room.roomId) {
         hangUp();
         setActiveCallRoomId(room.roomId);
+        setViewedCallRoomId(room.roomId);
         if (mx.getRoom(viewedRoomId)?.isCallRoom()) {
           navigateRoom(room.roomId);
         }
diff --git a/src/app/pages/client/call/PersistentCallContainer.tsx b/src/app/pages/client/call/PersistentCallContainer.tsx
index a3741673..7c2319ac 100644
--- a/src/app/pages/client/call/PersistentCallContainer.tsx
+++ b/src/app/pages/client/call/PersistentCallContainer.tsx
@@ -142,7 +142,8 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
   );
 
   useEffect(() => {
-    setupWidget(primaryWidgetApiRef, primarySmallWidgetRef, primaryIframeRef, isPrimaryIframe);
+    if ((activeCallRoomId && !viewedCallRoomId) || activeCallRoomId)
+      setupWidget(primaryWidgetApiRef, primarySmallWidgetRef, primaryIframeRef, isPrimaryIframe);
     setupWidget(backupWidgetApiRef, backupSmallWidgetRef, backupIframeRef, !isPrimaryIframe);
   }, [
     setupWidget,

From b18f6366c7bda91ebcc5e6547add6eaa9a2c75fe Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 23 May 2025 01:55:06 -0500
Subject: [PATCH 169/242] Revert navitem change

---
 src/app/features/room-nav/RoomNavItem.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 00992a32..89ac9061 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -266,7 +266,6 @@ export function RoomNavItem({
       if (room.isCallRoom() && activeCallRoomId !== room.roomId) {
         hangUp();
         setActiveCallRoomId(room.roomId);
-        setViewedCallRoomId(room.roomId);
         if (mx.getRoom(viewedRoomId)?.isCallRoom()) {
           navigateRoom(room.roomId);
         }

From 65ff5e394389d87de39a9684006d56e0aa60607b Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 23 May 2025 01:55:54 -0500
Subject: [PATCH 170/242] Just check for state on both which should only occur
 at initial

---
 src/app/pages/client/call/PersistentCallContainer.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/pages/client/call/PersistentCallContainer.tsx b/src/app/pages/client/call/PersistentCallContainer.tsx
index 7c2319ac..dcef81ae 100644
--- a/src/app/pages/client/call/PersistentCallContainer.tsx
+++ b/src/app/pages/client/call/PersistentCallContainer.tsx
@@ -144,7 +144,8 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
   useEffect(() => {
     if ((activeCallRoomId && !viewedCallRoomId) || activeCallRoomId)
       setupWidget(primaryWidgetApiRef, primarySmallWidgetRef, primaryIframeRef, isPrimaryIframe);
-    setupWidget(backupWidgetApiRef, backupSmallWidgetRef, backupIframeRef, !isPrimaryIframe);
+    if ((!activeCallRoomId && viewedCallRoomId) || viewedCallRoomId)
+      setupWidget(backupWidgetApiRef, backupSmallWidgetRef, backupIframeRef, !isPrimaryIframe);
   }, [
     setupWidget,
     primaryWidgetApiRef,

From b6afe3b968b81bf8f01a358b829764e49e7a5288 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 23 May 2025 12:04:06 -0500
Subject: [PATCH 171/242] Fixes call initializing by default on mobile

---
 src/app/features/room-nav/RoomNavItem.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 89ac9061..ed57833c 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -262,20 +262,22 @@ export function RoomNavItem({
     if (chatButton && chatButton.contains(target)) {
       return;
     }
-    if (!isMobile) {
-      if (room.isCallRoom() && activeCallRoomId !== room.roomId) {
-        hangUp();
-        setActiveCallRoomId(room.roomId);
-        if (mx.getRoom(viewedRoomId)?.isCallRoom()) {
-          navigateRoom(room.roomId);
+    if (room.isCallRoom()) {
+      if (!isMobile) {
+        if (activeCallRoomId !== room.roomId) {
+          hangUp();
+          setActiveCallRoomId(room.roomId);
+          if (mx.getRoom(viewedRoomId)?.isCallRoom()) {
+            navigateRoom(room.roomId);
+          }
         }
       } else {
+        evt.stopPropagation();
+        if (isChatOpen) toggleChat();
+        setViewedCallRoomId(room.roomId);
         navigateRoom(room.roomId);
       }
     } else {
-      evt.stopPropagation();
-      if (isChatOpen) toggleChat();
-      setViewedCallRoomId(room.roomId);
       navigateRoom(room.roomId);
     }
   };

From 03cbecc3f9b9bc5cd4273ec93e3c4e17ddacc819 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 23 May 2025 13:21:40 -0500
Subject: [PATCH 172/242] Provides correct behavior when call isn't active and
 no activeClientWidgetApi exists yet

---
 src/app/pages/client/call/CallProvider.tsx | 25 ++++++++++++++--------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index 2573725d..4df036b0 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -243,17 +243,24 @@ export function CallProvider({ children }: CallProviderProps) {
         setIsCallActive(true);
         return;
       }
-
-      if (isCallActive && activeClientWidgetApi && viewedClientWidgetApi) {
-        activeClientWidgetApi?.removeAllListeners();
-        activeClientWidgetApi?.transport.send(WIDGET_HANGUP_ACTION, {}).then(() => {
-          setActiveClientWidgetApi(viewedClientWidgetApi, viewedCallRoomId);
-          setActiveCallRoomIdState(viewedCallRoomId);
-          setViewedClientWidgetApi(null, null);
-          setIsPrimaryIframe(!isPrimaryIframe);
+      if (activeClientWidgetApi) {
+        if (isCallActive && viewedClientWidgetApi) {
+          activeClientWidgetApi?.removeAllListeners();
+          activeClientWidgetApi?.transport.send(WIDGET_HANGUP_ACTION, {}).then(() => {
+            setActiveClientWidgetApi(viewedClientWidgetApi, viewedCallRoomId);
+            setActiveCallRoomIdState(viewedCallRoomId);
+            setViewedClientWidgetApi(null, null);
+            setIsPrimaryIframe(!isPrimaryIframe);
+            setIsCallActive(true);
+          });
+        } else {
           setIsCallActive(true);
-        });
+        }
       } else {
+        setIsPrimaryIframe(!isPrimaryIframe);
+        setActiveClientWidgetApi(viewedClientWidgetApi, viewedCallRoomId);
+        setActiveCallRoomIdState(viewedCallRoomId);
+        setViewedClientWidgetApi(null, null);
         setIsCallActive(true);
       }
     };

From e220387b3fe2abe2c97bdfd603036b5614247839 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 23 May 2025 13:22:22 -0500
Subject: [PATCH 173/242] Corrects the state for the situations where both
 iframes are "active" (not necessarily visible)

---
 src/app/pages/client/call/PersistentCallContainer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/client/call/PersistentCallContainer.tsx b/src/app/pages/client/call/PersistentCallContainer.tsx
index dcef81ae..e6258464 100644
--- a/src/app/pages/client/call/PersistentCallContainer.tsx
+++ b/src/app/pages/client/call/PersistentCallContainer.tsx
@@ -142,9 +142,9 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
   );
 
   useEffect(() => {
-    if ((activeCallRoomId && !viewedCallRoomId) || activeCallRoomId)
+    if ((activeCallRoomId && !viewedCallRoomId) || (activeCallRoomId && viewedCallRoomId))
       setupWidget(primaryWidgetApiRef, primarySmallWidgetRef, primaryIframeRef, isPrimaryIframe);
-    if ((!activeCallRoomId && viewedCallRoomId) || viewedCallRoomId)
+    if ((!activeCallRoomId && viewedCallRoomId) || (viewedCallRoomId && activeCallRoomId))
       setupWidget(backupWidgetApiRef, backupSmallWidgetRef, backupIframeRef, !isPrimaryIframe);
   }, [
     setupWidget,

From 872e9a257fbafcd3c6837b32a168697f8a8bc3a7 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 23 May 2025 13:57:01 -0500
Subject: [PATCH 174/242] Reduce code reuse in handleJoin

---
 src/app/pages/client/call/CallProvider.tsx | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index 4df036b0..c99b1109 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -237,6 +237,13 @@ export function CallProvider({ children }: CallProviderProps) {
 
     const handleJoin = (ev: CustomEvent) => {
       ev.preventDefault();
+      const setViewedAsActive = () => {
+        setActiveClientWidgetApi(viewedClientWidgetApi, viewedCallRoomId);
+        setActiveCallRoomIdState(viewedCallRoomId);
+        setViewedClientWidgetApi(null, null);
+        setIsPrimaryIframe(!isPrimaryIframe);
+        setIsCallActive(true);
+      };
 
       activeClientWidgetApi?.transport.reply(ev.detail, {});
       if (ev.detail.widgetId === activeClientWidgetApi?.widget.id) {
@@ -247,21 +254,13 @@ export function CallProvider({ children }: CallProviderProps) {
         if (isCallActive && viewedClientWidgetApi) {
           activeClientWidgetApi?.removeAllListeners();
           activeClientWidgetApi?.transport.send(WIDGET_HANGUP_ACTION, {}).then(() => {
-            setActiveClientWidgetApi(viewedClientWidgetApi, viewedCallRoomId);
-            setActiveCallRoomIdState(viewedCallRoomId);
-            setViewedClientWidgetApi(null, null);
-            setIsPrimaryIframe(!isPrimaryIframe);
-            setIsCallActive(true);
+            setViewedAsActive();
           });
         } else {
           setIsCallActive(true);
         }
       } else {
-        setIsPrimaryIframe(!isPrimaryIframe);
-        setActiveClientWidgetApi(viewedClientWidgetApi, viewedCallRoomId);
-        setActiveCallRoomIdState(viewedCallRoomId);
-        setViewedClientWidgetApi(null, null);
-        setIsCallActive(true);
+        setViewedAsActive();
       }
     };
 

From 0b6009aaee8ea384ea7fb358ec13c36041b776fa Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 23 May 2025 16:34:44 -0500
Subject: [PATCH 175/242] Seems to sort out the hangup status button bug the
 occurred after joining a call via lobby

---
 src/app/pages/client/call/CallProvider.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index c99b1109..b32ab727 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -123,14 +123,6 @@ export function CallProvider({ children }: CallProviderProps) {
     [setViewedCallRoomIdState]
   );
 
-  const hangUp = useCallback(() => {
-    logger.debug(`CallContext: Hang up called.`);
-    activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
-    viewedClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
-    setActiveCallRoomIdState(null);
-    setIsCallActive(false);
-  }, [activeClientWidgetApi?.transport, viewedClientWidgetApi?.transport]);
-
   const setActiveClientWidgetApi = useCallback(
     (clientWidgetApi: ClientWidgetApi | null, roomId: string | null) => {
       setActiveClientWidgetApiState(clientWidgetApi);
@@ -186,6 +178,14 @@ export function CallProvider({ children }: CallProviderProps) {
     [viewedClientWidgetApi, viewedClientWidgetApiRoomId, setViewedClientWidgetApi]
   );
 
+  const hangUp = useCallback(() => {
+    logger.debug(`CallContext: Hang up called.`);
+    activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
+    setActiveClientWidgetApi(null, null);
+    setViewedCallRoomId(activeCallRoomId);
+    setIsCallActive(false);
+  }, [activeCallRoomId, activeClientWidgetApi?.transport, setActiveClientWidgetApi, setViewedCallRoomId]);
+
   useEffect(() => {
     if (!activeCallRoomId && !viewedCallRoomId) {
       return;

From 8b22573e43856a17bfa3aa2b592cdbf03b6a603c Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 23 May 2025 16:43:50 -0500
Subject: [PATCH 176/242] Re-add the default view current active room behavior

---
 src/app/features/room-nav/RoomNavItem.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index ed57833c..ec7fcf2c 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -270,6 +270,8 @@ export function RoomNavItem({
           if (mx.getRoom(viewedRoomId)?.isCallRoom()) {
             navigateRoom(room.roomId);
           }
+        } else {
+          navigateRoom(room.roomId);
         }
       } else {
         evt.stopPropagation();

From 38186714466f77c273abc7d2b1d5fd856d10f4c9 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 24 May 2025 19:30:53 -0500
Subject: [PATCH 177/242] Remove repetitive check

---
 src/app/features/room-nav/RoomNavItem.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index ec7fcf2c..6e4833de 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -226,8 +226,11 @@ export function RoomNavItem({
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
   const {
     activeCallRoomId,
+    viewedCallRoomId,
     setActiveCallRoomId,
     setViewedCallRoomId,
+    registerViewedClientWidgetApi,
+    viewedClientWidgetApi,
     isChatOpen,
     toggleChat,
     hangUp,
@@ -266,10 +269,9 @@ export function RoomNavItem({
       if (!isMobile) {
         if (activeCallRoomId !== room.roomId) {
           hangUp();
+          if (viewedCallRoomId === activeCallRoomId) setViewedCallRoomId(room.roomId);
           setActiveCallRoomId(room.roomId);
-          if (mx.getRoom(viewedRoomId)?.isCallRoom()) {
-            navigateRoom(room.roomId);
-          }
+          navigateRoom(room.roomId);
         } else {
           navigateRoom(room.roomId);
         }

From f2f98a6973ebf8955d992ad02fe6d4554cb84066 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 24 May 2025 19:31:43 -0500
Subject: [PATCH 178/242] Add storing widget for comparing with (since we
 already store room id and the clientWidgetApi anyway)

---
 src/app/pages/client/call/CallProvider.tsx | 76 +++++++++++++++-------
 1 file changed, 54 insertions(+), 22 deletions(-)

diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index b32ab727..8d48065f 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -10,6 +10,7 @@ import React, {
 import { logger } from 'matrix-js-sdk/lib/logger';
 import { WidgetApiToWidgetAction, WidgetApiAction, ClientWidgetApi } from 'matrix-widget-api';
 import { useParams } from 'react-router-dom';
+import { SmallWidget } from '../../../features/call/SmallWidget';
 
 interface MediaStatePayload {
   data?: {
@@ -30,13 +31,18 @@ interface CallContextState {
   setViewedCallRoomId: (roomId: string | null) => void;
   hangUp: () => void;
   activeClientWidgetApi: ClientWidgetApi | null;
+  activeClientWidget: SmallWidget | null;
   registerActiveClientWidgetApi: (
     roomId: string | null,
-    clientWidgetApi: ClientWidgetApi | null
+    clientWidgetApi: ClientWidgetApi | null,
+    clientWidget: SmallWidget
   ) => void;
+  viewedClientWidgetApi: ClientWidgetApi | null;
+  viewedClientWidget: SmallWidget | null;
   registerViewedClientWidgetApi: (
     roomId: string | null,
-    clientWidgetApi: ClientWidgetApi | null
+    clientWidgetApi: ClientWidgetApi | null,
+    clientWidget: SmallWidget
   ) => void;
   sendWidgetAction: <T = unknown>(
     action: WidgetApiToWidgetAction | string,
@@ -71,12 +77,14 @@ export function CallProvider({ children }: CallProviderProps) {
   const [activeClientWidgetApi, setActiveClientWidgetApiState] = useState<ClientWidgetApi | null>(
     null
   );
+  const [activeClientWidget, setActiveClientWidget] = useState<SmallWidget | null>(null);
   const [activeClientWidgetApiRoomId, setActiveClientWidgetApiRoomId] = useState<string | null>(
     null
   );
   const [viewedClientWidgetApi, setViewedClientWidgetApiState] = useState<ClientWidgetApi | null>(
     null
   );
+  const [viewedClientWidget, setViewedClientWidget] = useState<SmallWidget | null>(null);
   const [viewedClientWidgetApiRoomId, setViewedClientWidgetApiRoomId] = useState<string | null>(
     null
   );
@@ -124,25 +132,34 @@ export function CallProvider({ children }: CallProviderProps) {
   );
 
   const setActiveClientWidgetApi = useCallback(
-    (clientWidgetApi: ClientWidgetApi | null, roomId: string | null) => {
+    (
+      clientWidgetApi: ClientWidgetApi | null,
+      clientWidget: SmallWidget | null,
+      roomId: string | null
+    ) => {
       setActiveClientWidgetApiState(clientWidgetApi);
+      setActiveClientWidget(clientWidget);
       setActiveClientWidgetApiRoomId(roomId);
     },
     []
   );
 
   const registerActiveClientWidgetApi = useCallback(
-    (roomId: string | null, clientWidgetApi: ClientWidgetApi | null) => {
+    (
+      roomId: string | null,
+      clientWidgetApi: ClientWidgetApi | null,
+      clientWidget: SmallWidget | null
+    ) => {
       if (activeClientWidgetApi && activeClientWidgetApi !== clientWidgetApi) {
         logger.debug(`CallContext: Cleaning up listeners for previous clientWidgetApi instance.`);
-        activeClientWidgetApi.removeAllListeners();
+        //activeClientWidgetApi.removeAllListeners();
       }
 
       if (roomId && clientWidgetApi) {
         logger.debug(`CallContext: Registering active clientWidgetApi for room ${roomId}.`);
-        setActiveClientWidgetApi(clientWidgetApi, roomId);
+        setActiveClientWidgetApi(clientWidgetApi, clientWidget, roomId);
       } else if (roomId === activeClientWidgetApiRoomId || roomId === null) {
-        setActiveClientWidgetApi(null, null);
+        setActiveClientWidgetApi(null, null, null);
         resetMediaState();
       }
     },
@@ -150,29 +167,36 @@ export function CallProvider({ children }: CallProviderProps) {
   );
 
   const setViewedClientWidgetApi = useCallback(
-    (clientWidgetApi: ClientWidgetApi | null, roomId: string | null) => {
+    (
+      clientWidgetApi: ClientWidgetApi | null,
+      clientWidget: SmallWidget | null,
+      roomId: string | null
+    ) => {
       setViewedClientWidgetApiState(clientWidgetApi);
+      setViewedClientWidget(clientWidget);
       setViewedClientWidgetApiRoomId(roomId);
     },
     []
   );
 
   const registerViewedClientWidgetApi = useCallback(
-    (roomId: string | null, clientWidgetApi: ClientWidgetApi | null) => {
+    (
+      roomId: string | null,
+      clientWidgetApi: ClientWidgetApi | null,
+      clientWidget: SmallWidget | null
+    ) => {
       if (viewedClientWidgetApi && viewedClientWidgetApi !== clientWidgetApi) {
         logger.debug(`CallContext: Cleaning up listeners for previous clientWidgetApi instance.`);
-        viewedClientWidgetApi.removeAllListeners();
-        viewedClientWidgetApi.stop();
       }
 
       if (roomId && clientWidgetApi) {
         logger.debug(`CallContext: Registering viewed clientWidgetApi for room ${roomId}.`);
-        setViewedClientWidgetApi(clientWidgetApi, roomId);
+        setViewedClientWidgetApi(clientWidgetApi, clientWidget, roomId);
       } else if (roomId === viewedClientWidgetApiRoomId || roomId === null) {
         logger.debug(
           `CallContext: Clearing viewed clientWidgetApi for room ${viewedClientWidgetApiRoomId}.`
         );
-        setViewedClientWidgetApi(null, null);
+        setViewedClientWidgetApi(null, null, null);
       }
     },
     [viewedClientWidgetApi, viewedClientWidgetApiRoomId, setViewedClientWidgetApi]
@@ -181,10 +205,16 @@ export function CallProvider({ children }: CallProviderProps) {
   const hangUp = useCallback(() => {
     logger.debug(`CallContext: Hang up called.`);
     activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
-    setActiveClientWidgetApi(null, null);
+    setActiveClientWidgetApi(null, null, null);
     setViewedCallRoomId(activeCallRoomId);
+
     setIsCallActive(false);
-  }, [activeCallRoomId, activeClientWidgetApi?.transport, setActiveClientWidgetApi, setViewedCallRoomId]);
+  }, [
+    activeCallRoomId,
+    activeClientWidgetApi?.transport,
+    setActiveClientWidgetApi,
+    setViewedCallRoomId,
+  ]);
 
   useEffect(() => {
     if (!activeCallRoomId && !viewedCallRoomId) {
@@ -195,11 +225,8 @@ export function CallProvider({ children }: CallProviderProps) {
       if (ev.detail.widgetId === activeClientWidgetApi?.widget.id) {
         activeClientWidgetApi?.transport.reply(ev.detail, {});
         setIsCallActive(false);
-      } else if (ev.detail.widgetId === viewedClientWidgetApi?.widget.id) {
-        viewedClientWidgetApi?.transport.reply(ev.detail, {});
-        setIsCallActive(false);
       }
-      logger.warn(
+      logger.debug(
         `CallContext: Received hangup action from widget in room ${activeCallRoomId}.`,
         ev
       );
@@ -238,13 +265,11 @@ export function CallProvider({ children }: CallProviderProps) {
     const handleJoin = (ev: CustomEvent) => {
       ev.preventDefault();
       const setViewedAsActive = () => {
-        setActiveClientWidgetApi(viewedClientWidgetApi, viewedCallRoomId);
+        setActiveClientWidgetApi(viewedClientWidgetApi, viewedClientWidget, viewedCallRoomId);
         setActiveCallRoomIdState(viewedCallRoomId);
-        setViewedClientWidgetApi(null, null);
         setIsPrimaryIframe(!isPrimaryIframe);
         setIsCallActive(true);
       };
-
       activeClientWidgetApi?.transport.reply(ev.detail, {});
       if (ev.detail.widgetId === activeClientWidgetApi?.widget.id) {
         setIsCallActive(true);
@@ -291,6 +316,7 @@ export function CallProvider({ children }: CallProviderProps) {
     viewedCallRoomId,
     setViewedClientWidgetApi,
     setActiveClientWidgetApi,
+    viewedClientWidget,
   ]);
 
   const sendWidgetAction = useCallback(
@@ -367,7 +393,10 @@ export function CallProvider({ children }: CallProviderProps) {
       hangUp,
       activeClientWidgetApi,
       registerActiveClientWidgetApi,
+      activeClientWidget,
+      viewedClientWidgetApi,
       registerViewedClientWidgetApi,
+      viewedClientWidget,
       sendWidgetAction,
       isChatOpen,
       isAudioEnabled,
@@ -387,7 +416,10 @@ export function CallProvider({ children }: CallProviderProps) {
       hangUp,
       activeClientWidgetApi,
       registerActiveClientWidgetApi,
+      activeClientWidget,
+      viewedClientWidgetApi,
       registerViewedClientWidgetApi,
+      viewedClientWidget,
       sendWidgetAction,
       isChatOpen,
       isAudioEnabled,

From 0ef9c56a253ad50ceec97da94d46078c56f2e04d Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sat, 24 May 2025 19:34:26 -0500
Subject: [PATCH 179/242] Update rendering logic to clear up remaining
 rendering bug (straight to call -> lobby of another room and joining call
 from that interface -> lobby of that previous room and joining was leading to
 duplication of the user in lobbies. This was actually from listening to and
 acknowledging hangups from the viewed widget in CallProvider)

---
 .../client/call/PersistentCallContainer.tsx   | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/app/pages/client/call/PersistentCallContainer.tsx b/src/app/pages/client/call/PersistentCallContainer.tsx
index e6258464..3e44df3e 100644
--- a/src/app/pages/client/call/PersistentCallContainer.tsx
+++ b/src/app/pages/client/call/PersistentCallContainer.tsx
@@ -36,7 +36,9 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
     isCallActive,
     isPrimaryIframe,
     registerActiveClientWidgetApi,
+    activeClientWidget,
     registerViewedClientWidgetApi,
+    viewedClientWidget,
   } = useCallState();
   const mx = useMatrixClient();
   const clientConfig = useClientConfig();
@@ -63,12 +65,6 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
           (!activeCallRoomId && viewedCallRoomId && !isCallActive)
         ) {
           const roomIdToSet = (skipLobby ? activeCallRoomId : viewedCallRoomId) ?? '';
-          if (
-            roomIdToSet &&
-            (roomIdToSet === primarySmallWidgetRef?.current?.roomId ||
-              roomIdToSet === backupSmallWidgetRef?.current?.roomId)
-          )
-            return;
 
           const widgetId = `element-call-${roomIdToSet}-${Date.now()}`;
           const newUrl = getWidgetUrl(
@@ -84,10 +80,18 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
           );
 
           if (
-            newUrl.toString() === primarySmallWidgetRef?.current?.url ||
-            newUrl.toString() === backupSmallWidgetRef?.current?.url
-          )
+            (primarySmallWidgetRef.current?.roomId || backupSmallWidgetRef.current?.roomId) &&
+            (skipLobby
+              ? activeClientWidget?.roomId &&
+                (activeClientWidget.roomId === primarySmallWidgetRef.current?.roomId ||
+                  activeClientWidget.roomId === backupSmallWidgetRef.current?.roomId)
+              : viewedClientWidget?.roomId &&
+                viewedRoomId === viewedClientWidget.roomId &&
+                (viewedClientWidget.roomId === primarySmallWidgetRef.current?.roomId ||
+                  viewedClientWidget.roomId === backupSmallWidgetRef.current?.roomId))
+          ) {
             return;
+          }
 
           if (iframeRef.current && iframeRef.current.src !== newUrl.toString()) {
             iframeRef.current.src = newUrl.toString();
@@ -119,9 +123,9 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
           const widgetApiInstance = smallWidget.startMessaging(iframeElement);
           widgetApiRef.current = widgetApiInstance;
           if (skipLobby) {
-            registerActiveClientWidgetApi(activeCallRoomId, widgetApiRef.current);
+            registerActiveClientWidgetApi(activeCallRoomId, widgetApiRef.current, smallWidget);
           } else {
-            registerViewedClientWidgetApi(viewedCallRoomId, widgetApiRef.current);
+            registerViewedClientWidgetApi(viewedCallRoomId, widgetApiRef.current, smallWidget);
           }
 
           widgetApiInstance.once('ready', () => {
@@ -131,11 +135,14 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
       }
     },
     [
-      activeCallRoomId,
       mx,
+      activeCallRoomId,
       viewedCallRoomId,
       isCallActive,
       clientConfig.elementCallUrl,
+      viewedClientWidget,
+      activeClientWidget,
+      viewedRoomId,
       registerActiveClientWidgetApi,
       registerViewedClientWidgetApi,
     ]

From 9499289fb35388c5c972bbbdccff09c744e7e690 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 25 May 2025 16:29:01 -0500
Subject: [PATCH 180/242] Prevent null rooms from ever rendering

---
 src/app/pages/client/call/PersistentCallContainer.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/pages/client/call/PersistentCallContainer.tsx b/src/app/pages/client/call/PersistentCallContainer.tsx
index 3e44df3e..cc597f0e 100644
--- a/src/app/pages/client/call/PersistentCallContainer.tsx
+++ b/src/app/pages/client/call/PersistentCallContainer.tsx
@@ -65,7 +65,9 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
           (!activeCallRoomId && viewedCallRoomId && !isCallActive)
         ) {
           const roomIdToSet = (skipLobby ? activeCallRoomId : viewedCallRoomId) ?? '';
-
+          if (roomIdToSet === '') {
+            return;
+          }
           const widgetId = `element-call-${roomIdToSet}-${Date.now()}`;
           const newUrl = getWidgetUrl(
             mx,

From 7d26601bfc32eb0beea605b22eabc3a46b1f27f6 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 25 May 2025 16:29:55 -0500
Subject: [PATCH 181/242] This seems to manage the hangup state with the status
 bar button well enough that black screens should never be encountered

---
 src/app/pages/client/call/CallProvider.tsx | 73 +++++++++++++++++-----
 1 file changed, 59 insertions(+), 14 deletions(-)

diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index 8d48065f..28fd8f0f 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -23,6 +23,7 @@ const WIDGET_MEDIA_STATE_UPDATE_ACTION = 'io.element.device_mute';
 const WIDGET_HANGUP_ACTION = 'im.vector.hangup';
 const WIDGET_ON_SCREEN_ACTION = 'set_always_on_screen';
 const WIDGET_JOIN_ACTION = 'io.element.join';
+const WIDGET_TILE_UPDATE = 'io.element.tile_layout';
 
 interface CallContextState {
   activeCallRoomId: string | null;
@@ -202,19 +203,35 @@ export function CallProvider({ children }: CallProviderProps) {
     [viewedClientWidgetApi, viewedClientWidgetApiRoomId, setViewedClientWidgetApi]
   );
 
-  const hangUp = useCallback(() => {
-    logger.debug(`CallContext: Hang up called.`);
-    activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
-    setActiveClientWidgetApi(null, null, null);
-    setViewedCallRoomId(activeCallRoomId);
+  const hangUp = useCallback(
+    (nextRoom) => {
+      setIsCallActive(false);
+      if (typeof nextRoom !== 'string') {
+        if (viewedCallRoomId === activeCallRoomId) {
+          setIsPrimaryIframe(!isPrimaryIframe);
+        } else {
+          setViewedCallRoomId(activeCallRoomId);
+        }
+      } else if (viewedCallRoomId !== null) {
+        setIsPrimaryIframe(!isPrimaryIframe);
+        setViewedCallRoomId(null);
+      }
+      setActiveClientWidgetApi(null, null, null);
+      setActiveCallRoomId(null);
 
-    setIsCallActive(false);
-  }, [
-    activeCallRoomId,
-    activeClientWidgetApi?.transport,
-    setActiveClientWidgetApi,
-    setViewedCallRoomId,
-  ]);
+      logger.debug(`CallContext: Hang up called.`);
+      activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
+    },
+    [
+      activeCallRoomId,
+      activeClientWidgetApi?.transport,
+      isPrimaryIframe,
+      setActiveCallRoomId,
+      setActiveClientWidgetApi,
+      setViewedCallRoomId,
+      viewedCallRoomId,
+    ]
+  );
 
   useEffect(() => {
     if (!activeCallRoomId && !viewedCallRoomId) {
@@ -224,7 +241,23 @@ export function CallProvider({ children }: CallProviderProps) {
       ev.preventDefault();
       if (ev.detail.widgetId === activeClientWidgetApi?.widget.id) {
         activeClientWidgetApi?.transport.reply(ev.detail, {});
-        setIsCallActive(false);
+
+        /*
+
+        if (viewedRoomId === activeCallRoomId) {
+          if (viewedCallRoomId !== activeCallRoomId) {
+            setViewedCallRoomId(activeCallRoomId);
+
+            setIsPrimaryIframe(!isPrimaryIframe);
+          } else {
+            setIsPrimaryIframe(!isPrimaryIframe);
+          }
+          setViewedClientWidgetApi(viewedClientWidgetApi, viewedClientWidget, viewedCallRoomId);
+        }
+*/
+        // setActiveClientWidgetApi(null, null, null);
+        // setActiveCallRoomId(null);
+        // setIsCallActive(false);
       }
       logger.debug(
         `CallContext: Received hangup action from widget in room ${activeCallRoomId}.`,
@@ -262,6 +295,15 @@ export function CallProvider({ children }: CallProviderProps) {
       }
     };
 
+    const handleOnTileLayout = (ev: CustomEvent) => {
+      ev.preventDefault();
+      if (isPrimaryIframe) {
+        activeClientWidgetApi?.transport.reply(ev.detail, {});
+      } else {
+        viewedClientWidgetApi?.transport.reply(ev.detail, {});
+      }
+    };
+
     const handleJoin = (ev: CustomEvent) => {
       ev.preventDefault();
       const setViewedAsActive = () => {
@@ -271,12 +313,13 @@ export function CallProvider({ children }: CallProviderProps) {
         setIsCallActive(true);
       };
       activeClientWidgetApi?.transport.reply(ev.detail, {});
+
       if (ev.detail.widgetId === activeClientWidgetApi?.widget.id) {
         setIsCallActive(true);
         return;
       }
       if (activeClientWidgetApi) {
-        if (isCallActive && viewedClientWidgetApi) {
+        if (isCallActive && viewedClientWidgetApi && viewedCallRoomId) {
           activeClientWidgetApi?.removeAllListeners();
           activeClientWidgetApi?.transport.send(WIDGET_HANGUP_ACTION, {}).then(() => {
             setViewedAsActive();
@@ -294,11 +337,13 @@ export function CallProvider({ children }: CallProviderProps) {
     );
     activeClientWidgetApi?.on(`action:${WIDGET_HANGUP_ACTION}`, handleHangup);
     activeClientWidgetApi?.on(`action:${WIDGET_MEDIA_STATE_UPDATE_ACTION}`, handleMediaStateUpdate);
+    viewedClientWidgetApi?.on(`action:${WIDGET_TILE_UPDATE}`, handleOnTileLayout);
     activeClientWidgetApi?.on(`action:${WIDGET_ON_SCREEN_ACTION}`, handleOnScreenStateUpdate);
     activeClientWidgetApi?.on(`action:${WIDGET_JOIN_ACTION}`, handleJoin);
 
     viewedClientWidgetApi?.on(`action:${WIDGET_JOIN_ACTION}`, handleJoin);
     viewedClientWidgetApi?.on(`action:${WIDGET_MEDIA_STATE_UPDATE_ACTION}`, handleMediaStateUpdate);
+    viewedClientWidgetApi?.on(`action:${WIDGET_TILE_UPDATE}`, handleOnTileLayout);
     viewedClientWidgetApi?.on(`action:${WIDGET_ON_SCREEN_ACTION}`, handleOnScreenStateUpdate);
     viewedClientWidgetApi?.on(`action:${WIDGET_HANGUP_ACTION}`, handleHangup);
   }, [

From 99576a24326f669ed63454eec6c3c38c41a4f147 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 25 May 2025 16:30:23 -0500
Subject: [PATCH 182/242] Remove viewed room setting here and pass the room to
 hang up (seems state doesn't update fast enough otherwise)

---
 src/app/features/room-nav/RoomNavItem.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 6e4833de..323209bb 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -268,10 +268,9 @@ export function RoomNavItem({
     if (room.isCallRoom()) {
       if (!isMobile) {
         if (activeCallRoomId !== room.roomId) {
-          hangUp();
-          if (viewedCallRoomId === activeCallRoomId) setViewedCallRoomId(room.roomId);
-          setActiveCallRoomId(room.roomId);
           navigateRoom(room.roomId);
+          hangUp(room.roomId);
+          setActiveCallRoomId(room.roomId);
         } else {
           navigateRoom(room.roomId);
         }

From f3c0aebda24a7d54096bae54bbf509fc0f36b894 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 25 May 2025 16:32:52 -0500
Subject: [PATCH 183/242] Remove unused

---
 src/app/features/room-nav/RoomNavItem.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 323209bb..b450c007 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -226,11 +226,8 @@ export function RoomNavItem({
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
   const {
     activeCallRoomId,
-    viewedCallRoomId,
     setActiveCallRoomId,
     setViewedCallRoomId,
-    registerViewedClientWidgetApi,
-    viewedClientWidgetApi,
     isChatOpen,
     toggleChat,
     hangUp,
@@ -239,7 +236,6 @@ export function RoomNavItem({
     (receipt) => receipt.userId !== mx.getUserId()
   );
   const { navigateRoom } = useRoomNavigate();
-  const { roomIdOrAlias: viewedRoomId } = useParams();
   const screenSize = useScreenSizeContext();
   const isMobile = screenSize === ScreenSize.Mobile;
 

From 22903c93402865d48257409c71952013110af2e6 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 25 May 2025 16:34:55 -0500
Subject: [PATCH 184/242] Properly declare new hangup method sig

---
 src/app/pages/client/call/CallProvider.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index 28fd8f0f..99cf81e3 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -30,7 +30,7 @@ interface CallContextState {
   setActiveCallRoomId: (roomId: string | null) => void;
   viewedCallRoomId: string | null;
   setViewedCallRoomId: (roomId: string | null) => void;
-  hangUp: () => void;
+  hangUp: (room: string) => void;
   activeClientWidgetApi: ClientWidgetApi | null;
   activeClientWidget: SmallWidget | null;
   registerActiveClientWidgetApi: (
@@ -204,7 +204,7 @@ export function CallProvider({ children }: CallProviderProps) {
   );
 
   const hangUp = useCallback(
-    (nextRoom) => {
+    (nextRoom: string) => {
       setIsCallActive(false);
       if (typeof nextRoom !== 'string') {
         if (viewedCallRoomId === activeCallRoomId) {

From 108eb60b4aebb0b6812ba4073c4e76161c0bb132 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 25 May 2025 21:29:53 -0500
Subject: [PATCH 185/242] Seems to avoid almost all invalid states (hang up
 while viewing another lobby and hitting join seems to black screen, sets the
 active call as the previous active room id, but does join the viewed room
 correctly)

---
 src/app/pages/client/call/CallProvider.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index 99cf81e3..19bf71bf 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -207,15 +207,14 @@ export function CallProvider({ children }: CallProviderProps) {
     (nextRoom: string) => {
       setIsCallActive(false);
       if (typeof nextRoom !== 'string') {
-        if (viewedCallRoomId === activeCallRoomId) {
+        if (activeCallRoomId && viewedCallRoomId === activeCallRoomId) {
           setIsPrimaryIframe(!isPrimaryIframe);
-        } else {
-          setViewedCallRoomId(activeCallRoomId);
         }
+        logger.error(`${activeCallRoomId} ${viewedCallRoomId}`);
+        setViewedCallRoomId(activeCallRoomId);
       } else if (viewedCallRoomId !== null) {
         setIsPrimaryIframe(!isPrimaryIframe);
-        setViewedCallRoomId(null);
-      }
+      } else if (activeCallRoomId) setViewedCallRoomId(nextRoom);
       setActiveClientWidgetApi(null, null, null);
       setActiveCallRoomId(null);
 
@@ -323,6 +322,8 @@ export function CallProvider({ children }: CallProviderProps) {
           activeClientWidgetApi?.removeAllListeners();
           activeClientWidgetApi?.transport.send(WIDGET_HANGUP_ACTION, {}).then(() => {
             setViewedAsActive();
+            setViewedCallRoomIdState(null);
+            setViewedClientWidgetApi(null, null, null);
           });
         } else {
           setIsCallActive(true);

From 1a821961f30d58ccf44266e3197bdf5a48054bbe Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 25 May 2025 22:01:57 -0500
Subject: [PATCH 186/242] Fix for cases where you're viewing a lobby and hang
 up your existing call and try to join lobby (was not rendering for the
 correct room id, but was joining the correct call prior)

---
 src/app/pages/client/call/CallProvider.tsx | 26 +++++-----------------
 1 file changed, 5 insertions(+), 21 deletions(-)

diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index 19bf71bf..f2fddc43 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -313,10 +313,6 @@ export function CallProvider({ children }: CallProviderProps) {
       };
       activeClientWidgetApi?.transport.reply(ev.detail, {});
 
-      if (ev.detail.widgetId === activeClientWidgetApi?.widget.id) {
-        setIsCallActive(true);
-        return;
-      }
       if (activeClientWidgetApi) {
         if (isCallActive && viewedClientWidgetApi && viewedCallRoomId) {
           activeClientWidgetApi?.removeAllListeners();
@@ -328,6 +324,10 @@ export function CallProvider({ children }: CallProviderProps) {
         } else {
           setIsCallActive(true);
         }
+      } else if (viewedCallRoomId !== viewedRoomId) {
+        setViewedCallRoomId(viewedRoomId);
+        setActiveCallRoomIdState(viewedCallRoomId);
+        setIsCallActive(true);
       } else {
         setViewedAsActive();
       }
@@ -347,23 +347,7 @@ export function CallProvider({ children }: CallProviderProps) {
     viewedClientWidgetApi?.on(`action:${WIDGET_TILE_UPDATE}`, handleOnTileLayout);
     viewedClientWidgetApi?.on(`action:${WIDGET_ON_SCREEN_ACTION}`, handleOnScreenStateUpdate);
     viewedClientWidgetApi?.on(`action:${WIDGET_HANGUP_ACTION}`, handleHangup);
-  }, [
-    activeClientWidgetApi,
-    activeCallRoomId,
-    activeClientWidgetApiRoomId,
-    hangUp,
-    isChatOpen,
-    isAudioEnabled,
-    isVideoEnabled,
-    isCallActive,
-    viewedRoomId,
-    viewedClientWidgetApi,
-    isPrimaryIframe,
-    viewedCallRoomId,
-    setViewedClientWidgetApi,
-    setActiveClientWidgetApi,
-    viewedClientWidget,
-  ]);
+  }, [activeClientWidgetApi, activeCallRoomId, activeClientWidgetApiRoomId, hangUp, isChatOpen, isAudioEnabled, isVideoEnabled, isCallActive, viewedRoomId, viewedClientWidgetApi, isPrimaryIframe, viewedCallRoomId, setViewedClientWidgetApi, setActiveClientWidgetApi, viewedClientWidget, setViewedCallRoomId]);
 
   const sendWidgetAction = useCallback(
     async <T = unknown,>(action: WidgetApiToWidgetAction | string, data: T): Promise<void> => {

From bf131f76dcdaf313639d6b5f2b353528f2c8533b Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 25 May 2025 22:09:17 -0500
Subject: [PATCH 187/242] Re-add intended switching behavior

---
 src/app/features/room-nav/RoomNavItem.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index b450c007..d77353b7 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -236,6 +236,7 @@ export function RoomNavItem({
     (receipt) => receipt.userId !== mx.getUserId()
   );
   const { navigateRoom } = useRoomNavigate();
+  const { roomIdOrAlias: viewedRoomId } = useParams();
   const screenSize = useScreenSizeContext();
   const isMobile = screenSize === ScreenSize.Mobile;
 
@@ -264,7 +265,9 @@ export function RoomNavItem({
     if (room.isCallRoom()) {
       if (!isMobile) {
         if (activeCallRoomId !== room.roomId) {
-          navigateRoom(room.roomId);
+          if (mx.getRoom(viewedRoomId)?.isCallRoom()) {
+            navigateRoom(room.roomId);
+          }
           hangUp(room.roomId);
           setActiveCallRoomId(room.roomId);
         } else {

From df84eb1d71ab93f73dd1e70e70b5b93a8e85fd91 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 25 May 2025 22:40:03 -0500
Subject: [PATCH 188/242] More correct filter (viewedRoom can return false on
 that compare in some cases)

---
 src/app/pages/client/call/PersistentCallContainer.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/pages/client/call/PersistentCallContainer.tsx b/src/app/pages/client/call/PersistentCallContainer.tsx
index cc597f0e..bf35b45e 100644
--- a/src/app/pages/client/call/PersistentCallContainer.tsx
+++ b/src/app/pages/client/call/PersistentCallContainer.tsx
@@ -85,10 +85,11 @@ export function PersistentCallContainer({ children }: PersistentCallContainerPro
             (primarySmallWidgetRef.current?.roomId || backupSmallWidgetRef.current?.roomId) &&
             (skipLobby
               ? activeClientWidget?.roomId &&
+                //activeCallRoomId === activeClientWidget.roomId &&
                 (activeClientWidget.roomId === primarySmallWidgetRef.current?.roomId ||
                   activeClientWidget.roomId === backupSmallWidgetRef.current?.roomId)
               : viewedClientWidget?.roomId &&
-                viewedRoomId === viewedClientWidget.roomId &&
+                viewedCallRoomId === viewedClientWidget.roomId &&
                 (viewedClientWidget.roomId === primarySmallWidgetRef.current?.roomId ||
                   viewedClientWidget.roomId === backupSmallWidgetRef.current?.roomId))
           ) {

From 335df8d6baaf00d59e033d25ae01c302a1c1886c Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 25 May 2025 23:16:37 -0500
Subject: [PATCH 189/242] Seems to shore up the remaining state issues with the
 status bar hangup

---
 src/app/pages/client/call/CallProvider.tsx | 30 ++++++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index f2fddc43..9b35a05e 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -209,9 +209,10 @@ export function CallProvider({ children }: CallProviderProps) {
       if (typeof nextRoom !== 'string') {
         if (activeCallRoomId && viewedCallRoomId === activeCallRoomId) {
           setIsPrimaryIframe(!isPrimaryIframe);
+        } else {
+          if (viewedCallRoomId !== viewedRoomId) setViewedCallRoomId(activeCallRoomId);
         }
         logger.error(`${activeCallRoomId} ${viewedCallRoomId}`);
-        setViewedCallRoomId(activeCallRoomId);
       } else if (viewedCallRoomId !== null) {
         setIsPrimaryIframe(!isPrimaryIframe);
       } else if (activeCallRoomId) setViewedCallRoomId(nextRoom);
@@ -229,6 +230,7 @@ export function CallProvider({ children }: CallProviderProps) {
       setActiveClientWidgetApi,
       setViewedCallRoomId,
       viewedCallRoomId,
+      viewedRoomId,
     ]
   );
 
@@ -312,7 +314,10 @@ export function CallProvider({ children }: CallProviderProps) {
         setIsCallActive(true);
       };
       activeClientWidgetApi?.transport.reply(ev.detail, {});
-
+      if (ev.detail.widgetId === activeClientWidgetApi?.widget.id) {
+        setIsCallActive(true);
+        return;
+      }
       if (activeClientWidgetApi) {
         if (isCallActive && viewedClientWidgetApi && viewedCallRoomId) {
           activeClientWidgetApi?.removeAllListeners();
@@ -325,8 +330,6 @@ export function CallProvider({ children }: CallProviderProps) {
           setIsCallActive(true);
         }
       } else if (viewedCallRoomId !== viewedRoomId) {
-        setViewedCallRoomId(viewedRoomId);
-        setActiveCallRoomIdState(viewedCallRoomId);
         setIsCallActive(true);
       } else {
         setViewedAsActive();
@@ -347,7 +350,24 @@ export function CallProvider({ children }: CallProviderProps) {
     viewedClientWidgetApi?.on(`action:${WIDGET_TILE_UPDATE}`, handleOnTileLayout);
     viewedClientWidgetApi?.on(`action:${WIDGET_ON_SCREEN_ACTION}`, handleOnScreenStateUpdate);
     viewedClientWidgetApi?.on(`action:${WIDGET_HANGUP_ACTION}`, handleHangup);
-  }, [activeClientWidgetApi, activeCallRoomId, activeClientWidgetApiRoomId, hangUp, isChatOpen, isAudioEnabled, isVideoEnabled, isCallActive, viewedRoomId, viewedClientWidgetApi, isPrimaryIframe, viewedCallRoomId, setViewedClientWidgetApi, setActiveClientWidgetApi, viewedClientWidget, setViewedCallRoomId]);
+  }, [
+    activeClientWidgetApi,
+    activeCallRoomId,
+    activeClientWidgetApiRoomId,
+    hangUp,
+    isChatOpen,
+    isAudioEnabled,
+    isVideoEnabled,
+    isCallActive,
+    viewedRoomId,
+    viewedClientWidgetApi,
+    isPrimaryIframe,
+    viewedCallRoomId,
+    setViewedClientWidgetApi,
+    setActiveClientWidgetApi,
+    viewedClientWidget,
+    setViewedCallRoomId,
+  ]);
 
   const sendWidgetAction = useCallback(
     async <T = unknown,>(action: WidgetApiToWidgetAction | string, data: T): Promise<void> => {

From 18ea2d2063742ca912d3e865f97f7ccdf31d7ad2 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 25 May 2025 23:17:36 -0500
Subject: [PATCH 190/242] Fix formatting

---
 src/app/pages/client/call/CallProvider.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index 9b35a05e..1fd4ea9a 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -153,7 +153,6 @@ export function CallProvider({ children }: CallProviderProps) {
     ) => {
       if (activeClientWidgetApi && activeClientWidgetApi !== clientWidgetApi) {
         logger.debug(`CallContext: Cleaning up listeners for previous clientWidgetApi instance.`);
-        //activeClientWidgetApi.removeAllListeners();
       }
 
       if (roomId && clientWidgetApi) {
@@ -209,10 +208,7 @@ export function CallProvider({ children }: CallProviderProps) {
       if (typeof nextRoom !== 'string') {
         if (activeCallRoomId && viewedCallRoomId === activeCallRoomId) {
           setIsPrimaryIframe(!isPrimaryIframe);
-        } else {
-          if (viewedCallRoomId !== viewedRoomId) setViewedCallRoomId(activeCallRoomId);
-        }
-        logger.error(`${activeCallRoomId} ${viewedCallRoomId}`);
+        } else if (viewedCallRoomId !== viewedRoomId) setViewedCallRoomId(activeCallRoomId);
       } else if (viewedCallRoomId !== null) {
         setIsPrimaryIframe(!isPrimaryIframe);
       } else if (activeCallRoomId) setViewedCallRoomId(nextRoom);

From 9b98083d4ab555d36f765b92825d0b90027ec6db Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Sun, 25 May 2025 23:41:07 -0500
Subject: [PATCH 191/242] In widget hang up button should be handled correct
 now

---
 src/app/pages/client/call/CallProvider.tsx | 21 ++++-----------------
 1 file changed, 4 insertions(+), 17 deletions(-)

diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index 1fd4ea9a..87dd02cf 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -238,23 +238,7 @@ export function CallProvider({ children }: CallProviderProps) {
       ev.preventDefault();
       if (ev.detail.widgetId === activeClientWidgetApi?.widget.id) {
         activeClientWidgetApi?.transport.reply(ev.detail, {});
-
-        /*
-
-        if (viewedRoomId === activeCallRoomId) {
-          if (viewedCallRoomId !== activeCallRoomId) {
-            setViewedCallRoomId(activeCallRoomId);
-
-            setIsPrimaryIframe(!isPrimaryIframe);
-          } else {
-            setIsPrimaryIframe(!isPrimaryIframe);
-          }
-          setViewedClientWidgetApi(viewedClientWidgetApi, viewedClientWidget, viewedCallRoomId);
-        }
-*/
-        // setActiveClientWidgetApi(null, null, null);
-        // setActiveCallRoomId(null);
-        // setIsCallActive(false);
+        setIsCallActive(false);
       }
       logger.debug(
         `CallContext: Received hangup action from widget in room ${activeCallRoomId}.`,
@@ -323,6 +307,9 @@ export function CallProvider({ children }: CallProviderProps) {
             setViewedClientWidgetApi(null, null, null);
           });
         } else {
+          if (viewedClientWidgetApi && viewedCallRoomId) {
+            setViewedAsActive();
+          }
           setIsCallActive(true);
         }
       } else if (viewedCallRoomId !== viewedRoomId) {

From 0bd42a3994a33f10731a52752452dbe2e3e4c0e2 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Mon, 26 May 2025 00:37:48 -0500
Subject: [PATCH 192/242] Solves the CHCH sequence issue, CLJH remains

---
 src/app/pages/client/call/CallProvider.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index 87dd02cf..efcda341 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -209,9 +209,8 @@ export function CallProvider({ children }: CallProviderProps) {
         if (activeCallRoomId && viewedCallRoomId === activeCallRoomId) {
           setIsPrimaryIframe(!isPrimaryIframe);
         } else if (viewedCallRoomId !== viewedRoomId) setViewedCallRoomId(activeCallRoomId);
-      } else if (viewedCallRoomId !== null) {
-        setIsPrimaryIframe(!isPrimaryIframe);
       } else if (activeCallRoomId) setViewedCallRoomId(nextRoom);
+
       setActiveClientWidgetApi(null, null, null);
       setActiveCallRoomId(null);
 

From 923982ef30728949d1a9834e695444f5f77041b5 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Mon, 26 May 2025 00:41:55 -0500
Subject: [PATCH 193/242] Fixes CLJH, found CCH

---
 src/app/pages/client/call/CallProvider.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index efcda341..809836f0 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -302,8 +302,6 @@ export function CallProvider({ children }: CallProviderProps) {
           activeClientWidgetApi?.removeAllListeners();
           activeClientWidgetApi?.transport.send(WIDGET_HANGUP_ACTION, {}).then(() => {
             setViewedAsActive();
-            setViewedCallRoomIdState(null);
-            setViewedClientWidgetApi(null, null, null);
           });
         } else {
           if (viewedClientWidgetApi && viewedCallRoomId) {

From 0e332d661616bfc4fccf11a05babb24ece747948 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Mon, 26 May 2025 01:02:35 -0500
Subject: [PATCH 194/242] Solves CCH. Looks like CLCH left

---
 src/app/pages/client/call/CallProvider.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index 809836f0..85fed392 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -204,27 +204,31 @@ export function CallProvider({ children }: CallProviderProps) {
 
   const hangUp = useCallback(
     (nextRoom: string) => {
-      setIsCallActive(false);
-      if (typeof nextRoom !== 'string') {
-        if (activeCallRoomId && viewedCallRoomId === activeCallRoomId) {
-          setIsPrimaryIframe(!isPrimaryIframe);
-        } else if (viewedCallRoomId !== viewedRoomId) setViewedCallRoomId(activeCallRoomId);
-      } else if (activeCallRoomId) setViewedCallRoomId(nextRoom);
-
+      if (isCallActive) {
+        if (typeof nextRoom !== 'string') {
+          if (activeCallRoomId && viewedCallRoomId === activeCallRoomId) {
+            if (viewedClientWidget !== null) setIsPrimaryIframe(!isPrimaryIframe);
+          } else if (viewedCallRoomId !== viewedRoomId) {
+            setViewedCallRoomId(activeCallRoomId);
+          }
+        } else if (activeCallRoomId) setViewedCallRoomId(nextRoom);
+      }
       setActiveClientWidgetApi(null, null, null);
       setActiveCallRoomId(null);
-
+      setIsCallActive(false);
       logger.debug(`CallContext: Hang up called.`);
       activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
     },
     [
       activeCallRoomId,
       activeClientWidgetApi?.transport,
+      isCallActive,
       isPrimaryIframe,
       setActiveCallRoomId,
       setActiveClientWidgetApi,
       setViewedCallRoomId,
       viewedCallRoomId,
+      viewedClientWidget,
       viewedRoomId,
     ]
   );

From c99112b78ba994c6e85c97264fdf901301b86810 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Mon, 26 May 2025 23:11:47 -0500
Subject: [PATCH 195/242] A bit of an abomination, but adds a state counter to
 iteratively handle the diverse potential states (where a user can join from
 the nav bar or the join button, hang up from either as well, and account for
 the juggling iframes) Black screens shouldn't be occurring now.

---
 src/app/pages/client/call/CallProvider.tsx | 83 ++++++++++++++++++----
 1 file changed, 68 insertions(+), 15 deletions(-)

diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index 85fed392..d02c2719 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -6,6 +6,7 @@ import React, {
   useCallback,
   ReactNode,
   useEffect,
+  useRef,
 } from 'react';
 import { logger } from 'matrix-js-sdk/lib/logger';
 import { WidgetApiToWidgetAction, WidgetApiAction, ClientWidgetApi } from 'matrix-widget-api';
@@ -95,9 +96,15 @@ export function CallProvider({ children }: CallProviderProps) {
   const [isChatOpen, setIsChatOpenState] = useState<boolean>(DEFAULT_CHAT_OPENED);
   const [isCallActive, setIsCallActive] = useState<boolean>(DEFAULT_CALL_ACTIVE);
   const [isPrimaryIframe, setIsPrimaryIframe] = useState<boolean>(DEFAULT_PRIMARY_IFRAME);
+  const [shouldFlipIframe, setShouldFlipIframe] = useState<boolean>(DEFAULT_VIDEO_ENABLED);
 
   const { roomIdOrAlias: viewedRoomId } = useParams<{ roomIdOrAlias: string }>();
 
+  const [hangupCounter, setHangupCounter] = useState(0);
+  const [lastViewedRoomDuringCall, setLastViewedRoomDuringCall] = useState<string | null>(null);
+
+  const currentHangupCounterRef = useRef(hangupCounter);
+
   const resetMediaState = useCallback(() => {
     logger.debug('CallContext: Resetting media state to defaults.');
     setIsAudioEnabledState(DEFAULT_AUDIO_ENABLED);
@@ -204,18 +211,46 @@ export function CallProvider({ children }: CallProviderProps) {
 
   const hangUp = useCallback(
     (nextRoom: string) => {
+      let nextCounter = currentHangupCounterRef.current;
       if (isCallActive) {
         if (typeof nextRoom !== 'string') {
-          if (activeCallRoomId && viewedCallRoomId === activeCallRoomId) {
-            if (viewedClientWidget !== null) setIsPrimaryIframe(!isPrimaryIframe);
-          } else if (viewedCallRoomId !== viewedRoomId) {
-            setViewedCallRoomId(activeCallRoomId);
+          if (nextCounter === 1) {
+            if (shouldFlipIframe) setIsPrimaryIframe(!isPrimaryIframe);
+            setShouldFlipIframe(false);
+            nextCounter++;
+            setHangupCounter(nextCounter);
           }
-        } else if (activeCallRoomId) setViewedCallRoomId(nextRoom);
+
+          if (nextCounter === 0 || nextCounter >= 3) {
+            if (
+              viewedCallRoomId &&
+              (lastViewedRoomDuringCall === activeCallRoomId ||
+                viewedCallRoomId !== lastViewedRoomDuringCall)
+            ) {
+              if (viewedCallRoomId !== lastViewedRoomDuringCall) {
+                setViewedCallRoomId(activeCallRoomId);
+              }
+              nextCounter = nextCounter <= 4 ? 4 : nextCounter++;
+            } else {
+              setViewedCallRoomId(activeCallRoomId);
+              nextCounter++;
+            }
+            setHangupCounter(nextCounter);
+          }
+
+          if (nextCounter === 2 || nextCounter >= 4) {
+            if (shouldFlipIframe) setIsPrimaryIframe(!isPrimaryIframe);
+            setShouldFlipIframe(false);
+            nextCounter++;
+            setHangupCounter(nextCounter);
+          }
+        }
+
+        setActiveClientWidgetApi(null, null, null);
+        setActiveCallRoomIdState(null);
+        setIsCallActive(false);
       }
-      setActiveClientWidgetApi(null, null, null);
-      setActiveCallRoomId(null);
-      setIsCallActive(false);
+
       logger.debug(`CallContext: Hang up called.`);
       activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
     },
@@ -224,11 +259,11 @@ export function CallProvider({ children }: CallProviderProps) {
       activeClientWidgetApi?.transport,
       isCallActive,
       isPrimaryIframe,
-      setActiveCallRoomId,
+      lastViewedRoomDuringCall,
       setActiveClientWidgetApi,
       setViewedCallRoomId,
+      shouldFlipIframe,
       viewedCallRoomId,
-      viewedClientWidget,
       viewedRoomId,
     ]
   );
@@ -237,6 +272,23 @@ export function CallProvider({ children }: CallProviderProps) {
     if (!activeCallRoomId && !viewedCallRoomId) {
       return;
     }
+
+    currentHangupCounterRef.current = hangupCounter;
+
+    if (!lastViewedRoomDuringCall) {
+      if (activeCallRoomId)
+        setLastViewedRoomDuringCall((prevLastRoom) => prevLastRoom || activeCallRoomId);
+    }
+    if (
+      lastViewedRoomDuringCall &&
+      lastViewedRoomDuringCall !== viewedRoomId &&
+      activeCallRoomId &&
+      isCallActive
+    ) {
+      setHangupCounter(0);
+      setLastViewedRoomDuringCall(activeCallRoomId);
+    }
+
     const handleHangup = (ev: CustomEvent) => {
       ev.preventDefault();
       if (ev.detail.widgetId === activeClientWidgetApi?.widget.id) {
@@ -291,9 +343,9 @@ export function CallProvider({ children }: CallProviderProps) {
     const handleJoin = (ev: CustomEvent) => {
       ev.preventDefault();
       const setViewedAsActive = () => {
+        if (viewedCallRoomId !== activeCallRoomId) setIsPrimaryIframe(!isPrimaryIframe);
         setActiveClientWidgetApi(viewedClientWidgetApi, viewedClientWidget, viewedCallRoomId);
         setActiveCallRoomIdState(viewedCallRoomId);
-        setIsPrimaryIframe(!isPrimaryIframe);
         setIsCallActive(true);
       };
       activeClientWidgetApi?.transport.reply(ev.detail, {});
@@ -305,17 +357,16 @@ export function CallProvider({ children }: CallProviderProps) {
         if (isCallActive && viewedClientWidgetApi && viewedCallRoomId) {
           activeClientWidgetApi?.removeAllListeners();
           activeClientWidgetApi?.transport.send(WIDGET_HANGUP_ACTION, {}).then(() => {
-            setViewedAsActive();
+            setShouldFlipIframe(true);
+            return setViewedAsActive();
           });
         } else {
-          if (viewedClientWidgetApi && viewedCallRoomId) {
-            setViewedAsActive();
-          }
           setIsCallActive(true);
         }
       } else if (viewedCallRoomId !== viewedRoomId) {
         setIsCallActive(true);
       } else {
+        setShouldFlipIframe(true);
         setViewedAsActive();
       }
     };
@@ -351,6 +402,8 @@ export function CallProvider({ children }: CallProviderProps) {
     setActiveClientWidgetApi,
     viewedClientWidget,
     setViewedCallRoomId,
+    hangupCounter,
+    lastViewedRoomDuringCall,
   ]);
 
   const sendWidgetAction = useCallback(

From 3e6d55f03b40dbabbf0e09dafd4330c3e6d8dfba Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Mon, 26 May 2025 23:12:14 -0500
Subject: [PATCH 196/242] Fix dependency array

---
 src/app/pages/client/call/CallProvider.tsx | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index d02c2719..a67b1795 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -254,18 +254,7 @@ export function CallProvider({ children }: CallProviderProps) {
       logger.debug(`CallContext: Hang up called.`);
       activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
     },
-    [
-      activeCallRoomId,
-      activeClientWidgetApi?.transport,
-      isCallActive,
-      isPrimaryIframe,
-      lastViewedRoomDuringCall,
-      setActiveClientWidgetApi,
-      setViewedCallRoomId,
-      shouldFlipIframe,
-      viewedCallRoomId,
-      viewedRoomId,
-    ]
+    [activeCallRoomId, activeClientWidgetApi?.transport, isCallActive, isPrimaryIframe, lastViewedRoomDuringCall, setActiveClientWidgetApi, setViewedCallRoomId, shouldFlipIframe, viewedCallRoomId]
   );
 
   useEffect(() => {

From 39b20c7cc76c87f99bc06bfc30b406a22ff73de6 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Tue, 27 May 2025 01:14:42 -0500
Subject: [PATCH 197/242] Technically corrects the hangup button in the widget,
 should be more precise though

---
 src/app/pages/client/call/CallProvider.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index a67b1795..7e8ad0f6 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -254,7 +254,17 @@ export function CallProvider({ children }: CallProviderProps) {
       logger.debug(`CallContext: Hang up called.`);
       activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
     },
-    [activeCallRoomId, activeClientWidgetApi?.transport, isCallActive, isPrimaryIframe, lastViewedRoomDuringCall, setActiveClientWidgetApi, setViewedCallRoomId, shouldFlipIframe, viewedCallRoomId]
+    [
+      activeCallRoomId,
+      activeClientWidgetApi?.transport,
+      isCallActive,
+      isPrimaryIframe,
+      lastViewedRoomDuringCall,
+      setActiveClientWidgetApi,
+      setViewedCallRoomId,
+      shouldFlipIframe,
+      viewedCallRoomId,
+    ]
   );
 
   useEffect(() => {
@@ -282,7 +292,8 @@ export function CallProvider({ children }: CallProviderProps) {
       ev.preventDefault();
       if (ev.detail.widgetId === activeClientWidgetApi?.widget.id) {
         activeClientWidgetApi?.transport.reply(ev.detail, {});
-        setIsCallActive(false);
+        hangUp();
+        //setIsCallActive(false);
       }
       logger.debug(
         `CallContext: Received hangup action from widget in room ${activeCallRoomId}.`,

From 42252829c699667163101f16b98db147af86ab20 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 28 May 2025 16:08:01 -0500
Subject: [PATCH 198/242] Bind the on messaging iframe for easier access in
 hangup/join handling

---
 src/app/features/call/SmallWidget.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/features/call/SmallWidget.ts b/src/app/features/call/SmallWidget.ts
index d057e806..2b24e978 100644
--- a/src/app/features/call/SmallWidget.ts
+++ b/src/app/features/call/SmallWidget.ts
@@ -90,6 +90,8 @@ export class SmallWidget extends EventEmitter {
 
   public url?: string;
 
+  public iframe: HTMLElement | null;
+
   private type: string; // Type of the widget (e.g., 'm.call')
 
   private readUpToMap: { [roomId: string]: string } = {}; // room ID to event ID
@@ -123,7 +125,7 @@ export class SmallWidget extends EventEmitter {
       true,
       this.roomId
     );
-
+    this.iframe = iframe;
     this.messaging = new ClientWidgetApi(this.mockWidget, iframe, driver);
 
     // Emit events during the widget lifecycle

From e3f1697367e40d28e06544d0992df432b87392ea Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 28 May 2025 16:11:25 -0500
Subject: [PATCH 199/242] Far cleaner and more sensible handling of the call
 window... I just really don't like the idea of sending a click event, but
 right now the element-call code treats preload/skipLobby hangups (sent from
 our end) as if they had no lobby at all and thus black screens. Other
 implementation was working around that without just sending a click event on
 the iframe's hangup button.

---
 src/app/pages/client/call/CallProvider.tsx | 129 +++++++++++----------
 1 file changed, 67 insertions(+), 62 deletions(-)

diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index 7e8ad0f6..18671b14 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -6,7 +6,6 @@ import React, {
   useCallback,
   ReactNode,
   useEffect,
-  useRef,
 } from 'react';
 import { logger } from 'matrix-js-sdk/lib/logger';
 import { WidgetApiToWidgetAction, WidgetApiAction, ClientWidgetApi } from 'matrix-widget-api';
@@ -96,15 +95,10 @@ export function CallProvider({ children }: CallProviderProps) {
   const [isChatOpen, setIsChatOpenState] = useState<boolean>(DEFAULT_CHAT_OPENED);
   const [isCallActive, setIsCallActive] = useState<boolean>(DEFAULT_CALL_ACTIVE);
   const [isPrimaryIframe, setIsPrimaryIframe] = useState<boolean>(DEFAULT_PRIMARY_IFRAME);
-  const [shouldFlipIframe, setShouldFlipIframe] = useState<boolean>(DEFAULT_VIDEO_ENABLED);
 
   const { roomIdOrAlias: viewedRoomId } = useParams<{ roomIdOrAlias: string }>();
-
-  const [hangupCounter, setHangupCounter] = useState(0);
   const [lastViewedRoomDuringCall, setLastViewedRoomDuringCall] = useState<string | null>(null);
 
-  const currentHangupCounterRef = useRef(hangupCounter);
-
   const resetMediaState = useCallback(() => {
     logger.debug('CallContext: Resetting media state to defaults.');
     setIsAudioEnabledState(DEFAULT_AUDIO_ENABLED);
@@ -211,59 +205,31 @@ export function CallProvider({ children }: CallProviderProps) {
 
   const hangUp = useCallback(
     (nextRoom: string) => {
-      let nextCounter = currentHangupCounterRef.current;
-      if (isCallActive) {
-        if (typeof nextRoom !== 'string') {
-          if (nextCounter === 1) {
-            if (shouldFlipIframe) setIsPrimaryIframe(!isPrimaryIframe);
-            setShouldFlipIframe(false);
-            nextCounter++;
-            setHangupCounter(nextCounter);
-          }
-
-          if (nextCounter === 0 || nextCounter >= 3) {
-            if (
-              viewedCallRoomId &&
-              (lastViewedRoomDuringCall === activeCallRoomId ||
-                viewedCallRoomId !== lastViewedRoomDuringCall)
-            ) {
-              if (viewedCallRoomId !== lastViewedRoomDuringCall) {
-                setViewedCallRoomId(activeCallRoomId);
-              }
-              nextCounter = nextCounter <= 4 ? 4 : nextCounter++;
-            } else {
-              setViewedCallRoomId(activeCallRoomId);
-              nextCounter++;
-            }
-            setHangupCounter(nextCounter);
-          }
-
-          if (nextCounter === 2 || nextCounter >= 4) {
-            if (shouldFlipIframe) setIsPrimaryIframe(!isPrimaryIframe);
-            setShouldFlipIframe(false);
-            nextCounter++;
-            setHangupCounter(nextCounter);
-          }
-        }
-
+      if (typeof nextRoom === 'string') {
         setActiveClientWidgetApi(null, null, null);
         setActiveCallRoomIdState(null);
-        setIsCallActive(false);
+        activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
+      } else if (viewedRoomId !== activeCallRoomId) {
+        setActiveClientWidgetApi(null, null, null);
+        setActiveCallRoomIdState(null);
+        activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
+      } else if (activeClientWidget) {
+        const iframeDoc =
+          activeClientWidget?.iframe.contentDocument ||
+          activeClientWidget?.iframe.contentWindow.document;
+        const button = iframeDoc.querySelector('[data-testid="incall_leave"]');
+        button.click();
       }
+      setIsCallActive(false);
 
       logger.debug(`CallContext: Hang up called.`);
-      activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
     },
     [
       activeCallRoomId,
+      activeClientWidget,
       activeClientWidgetApi?.transport,
-      isCallActive,
-      isPrimaryIframe,
-      lastViewedRoomDuringCall,
       setActiveClientWidgetApi,
-      setViewedCallRoomId,
-      shouldFlipIframe,
-      viewedCallRoomId,
+      viewedRoomId,
     ]
   );
 
@@ -271,9 +237,6 @@ export function CallProvider({ children }: CallProviderProps) {
     if (!activeCallRoomId && !viewedCallRoomId) {
       return;
     }
-
-    currentHangupCounterRef.current = hangupCounter;
-
     if (!lastViewedRoomDuringCall) {
       if (activeCallRoomId)
         setLastViewedRoomDuringCall((prevLastRoom) => prevLastRoom || activeCallRoomId);
@@ -284,16 +247,13 @@ export function CallProvider({ children }: CallProviderProps) {
       activeCallRoomId &&
       isCallActive
     ) {
-      setHangupCounter(0);
       setLastViewedRoomDuringCall(activeCallRoomId);
     }
 
     const handleHangup = (ev: CustomEvent) => {
       ev.preventDefault();
-      if (ev.detail.widgetId === activeClientWidgetApi?.widget.id) {
+      if (isCallActive && ev.detail.widgetId === activeClientWidgetApi?.widget.id) {
         activeClientWidgetApi?.transport.reply(ev.detail, {});
-        hangUp();
-        //setIsCallActive(false);
       }
       logger.debug(
         `CallContext: Received hangup action from widget in room ${activeCallRoomId}.`,
@@ -342,23 +302,68 @@ export function CallProvider({ children }: CallProviderProps) {
 
     const handleJoin = (ev: CustomEvent) => {
       ev.preventDefault();
+      logger.error(`1
+        activeCall: ${activeCallRoomId}
+        viewedCall: ${viewedCallRoomId}
+        lastActiveCall: ${lastViewedRoomDuringCall}
+        viewed: ${viewedRoomId}
+        isCallActive ${isCallActive}
+        `);
       const setViewedAsActive = () => {
         if (viewedCallRoomId !== activeCallRoomId) setIsPrimaryIframe(!isPrimaryIframe);
         setActiveClientWidgetApi(viewedClientWidgetApi, viewedClientWidget, viewedCallRoomId);
         setActiveCallRoomIdState(viewedCallRoomId);
         setIsCallActive(true);
+        const iframeDoc =
+          viewedClientWidget?.iframe.contentDocument ||
+          viewedClientWidget?.iframe.contentWindow.document;
+        const observer = new MutationObserver(() => {
+          const button = iframeDoc.querySelector('[data-testid="incall_leave"]');
+          if (button) {
+            button.addEventListener('click', () => {
+              setIsCallActive(false);
+            });
+          }
+
+          observer.disconnect();
+        });
+        observer.observe(iframeDoc, { childList: true, subtree: true });
       };
-      activeClientWidgetApi?.transport.reply(ev.detail, {});
-      if (ev.detail.widgetId === activeClientWidgetApi?.widget.id) {
+
+      if (
+        ev.detail.widgetId === activeClientWidgetApi?.widget.id
+      ) {
+        activeClientWidgetApi?.transport.reply(ev.detail, {});
+        const iframeDoc =
+          activeClientWidget?.iframe.contentDocument ||
+          activeClientWidget?.iframe.contentWindow.document;
+        const observer = new MutationObserver(() => {
+          const button = iframeDoc.querySelector('[data-testid="incall_leave"]');
+          if (button) {
+            button.addEventListener('click', () => {
+              setIsCallActive(false);
+            });
+          }
+          observer.disconnect();
+        });
+        observer.observe(iframeDoc, { childList: true, subtree: true });
         setIsCallActive(true);
         return;
       }
+      if (
+        lastViewedRoomDuringCall &&
+        viewedRoomId === activeCallRoomId &&
+        lastViewedRoomDuringCall === activeCallRoomId
+      ) {
+        setIsCallActive(true);
+        logger.error('Active widget joined on? Most likely a new widget after a hangup method.');
+        return;
+      }
       if (activeClientWidgetApi) {
         if (isCallActive && viewedClientWidgetApi && viewedCallRoomId) {
           activeClientWidgetApi?.removeAllListeners();
           activeClientWidgetApi?.transport.send(WIDGET_HANGUP_ACTION, {}).then(() => {
-            setShouldFlipIframe(true);
-            return setViewedAsActive();
+            setViewedAsActive();
           });
         } else {
           setIsCallActive(true);
@@ -366,7 +371,6 @@ export function CallProvider({ children }: CallProviderProps) {
       } else if (viewedCallRoomId !== viewedRoomId) {
         setIsCallActive(true);
       } else {
-        setShouldFlipIframe(true);
         setViewedAsActive();
       }
     };
@@ -402,8 +406,9 @@ export function CallProvider({ children }: CallProviderProps) {
     setActiveClientWidgetApi,
     viewedClientWidget,
     setViewedCallRoomId,
-    hangupCounter,
     lastViewedRoomDuringCall,
+    activeClientWidget?.iframe.contentDocument,
+    activeClientWidget?.iframe.contentWindow.document,
   ]);
 
   const sendWidgetAction = useCallback(

From 6edee72a156833347ce8e471fc9f3b483e82df78 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 28 May 2025 17:05:41 -0500
Subject: [PATCH 200/242] Fixes a bug where if you left a call then went to a
 lobby and joined it didn't update the actual activeCallRoomId

---
 src/app/pages/client/call/CallProvider.tsx | 23 +++++++++++-----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index 18671b14..71f76ce8 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -206,14 +206,17 @@ export function CallProvider({ children }: CallProviderProps) {
   const hangUp = useCallback(
     (nextRoom: string) => {
       if (typeof nextRoom === 'string') {
+        logger.debug('1 Hangup');
         setActiveClientWidgetApi(null, null, null);
         setActiveCallRoomIdState(null);
         activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
       } else if (viewedRoomId !== activeCallRoomId) {
+        logger.debug('2 Hangup');
         setActiveClientWidgetApi(null, null, null);
         setActiveCallRoomIdState(null);
         activeClientWidgetApi?.transport.send(`${WIDGET_HANGUP_ACTION}`, {});
       } else if (activeClientWidget) {
+        logger.debug('3 Hangup');
         const iframeDoc =
           activeClientWidget?.iframe.contentDocument ||
           activeClientWidget?.iframe.contentWindow.document;
@@ -302,13 +305,6 @@ export function CallProvider({ children }: CallProviderProps) {
 
     const handleJoin = (ev: CustomEvent) => {
       ev.preventDefault();
-      logger.error(`1
-        activeCall: ${activeCallRoomId}
-        viewedCall: ${viewedCallRoomId}
-        lastActiveCall: ${lastViewedRoomDuringCall}
-        viewed: ${viewedRoomId}
-        isCallActive ${isCallActive}
-        `);
       const setViewedAsActive = () => {
         if (viewedCallRoomId !== activeCallRoomId) setIsPrimaryIframe(!isPrimaryIframe);
         setActiveClientWidgetApi(viewedClientWidgetApi, viewedClientWidget, viewedCallRoomId);
@@ -324,15 +320,12 @@ export function CallProvider({ children }: CallProviderProps) {
               setIsCallActive(false);
             });
           }
-
           observer.disconnect();
         });
         observer.observe(iframeDoc, { childList: true, subtree: true });
       };
 
-      if (
-        ev.detail.widgetId === activeClientWidgetApi?.widget.id
-      ) {
+      if (ev.detail.widgetId === activeClientWidgetApi?.widget.id) {
         activeClientWidgetApi?.transport.reply(ev.detail, {});
         const iframeDoc =
           activeClientWidget?.iframe.contentDocument ||
@@ -346,6 +339,7 @@ export function CallProvider({ children }: CallProviderProps) {
           }
           observer.disconnect();
         });
+        logger.debug('1 Join');
         observer.observe(iframeDoc, { childList: true, subtree: true });
         setIsCallActive(true);
         return;
@@ -355,22 +349,27 @@ export function CallProvider({ children }: CallProviderProps) {
         viewedRoomId === activeCallRoomId &&
         lastViewedRoomDuringCall === activeCallRoomId
       ) {
+        logger.debug('2 Join');
         setIsCallActive(true);
-        logger.error('Active widget joined on? Most likely a new widget after a hangup method.');
         return;
       }
       if (activeClientWidgetApi) {
         if (isCallActive && viewedClientWidgetApi && viewedCallRoomId) {
           activeClientWidgetApi?.removeAllListeners();
           activeClientWidgetApi?.transport.send(WIDGET_HANGUP_ACTION, {}).then(() => {
+            logger.debug('3 Join');
             setViewedAsActive();
           });
         } else {
+          logger.debug('4 Join');
+          setViewedAsActive();
           setIsCallActive(true);
         }
       } else if (viewedCallRoomId !== viewedRoomId) {
+        logger.debug('5 Join');
         setIsCallActive(true);
       } else {
+        logger.debug('6 Join');
         setViewedAsActive();
       }
     };

From 73c17d35589ee672479628d7f5046896feb5cf49 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 28 May 2025 17:11:46 -0500
Subject: [PATCH 201/242] Fixes complaints of null contentDocument in iframe

---
 src/app/pages/client/call/CallProvider.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/pages/client/call/CallProvider.tsx b/src/app/pages/client/call/CallProvider.tsx
index 71f76ce8..364670eb 100644
--- a/src/app/pages/client/call/CallProvider.tsx
+++ b/src/app/pages/client/call/CallProvider.tsx
@@ -218,8 +218,8 @@ export function CallProvider({ children }: CallProviderProps) {
       } else if (activeClientWidget) {
         logger.debug('3 Hangup');
         const iframeDoc =
-          activeClientWidget?.iframe.contentDocument ||
-          activeClientWidget?.iframe.contentWindow.document;
+          activeClientWidget?.iframe?.contentDocument ||
+          activeClientWidget?.iframe?.contentWindow.document;
         const button = iframeDoc.querySelector('[data-testid="incall_leave"]');
         button.click();
       }
@@ -311,8 +311,8 @@ export function CallProvider({ children }: CallProviderProps) {
         setActiveCallRoomIdState(viewedCallRoomId);
         setIsCallActive(true);
         const iframeDoc =
-          viewedClientWidget?.iframe.contentDocument ||
-          viewedClientWidget?.iframe.contentWindow.document;
+          viewedClientWidget?.iframe?.contentDocument ||
+          viewedClientWidget?.iframe?.contentWindow.document;
         const observer = new MutationObserver(() => {
           const button = iframeDoc.querySelector('[data-testid="incall_leave"]');
           if (button) {
@@ -328,8 +328,8 @@ export function CallProvider({ children }: CallProviderProps) {
       if (ev.detail.widgetId === activeClientWidgetApi?.widget.id) {
         activeClientWidgetApi?.transport.reply(ev.detail, {});
         const iframeDoc =
-          activeClientWidget?.iframe.contentDocument ||
-          activeClientWidget?.iframe.contentWindow.document;
+          activeClientWidget?.iframe?.contentDocument ||
+          activeClientWidget?.iframe?.contentWindow.document;
         const observer = new MutationObserver(() => {
           const button = iframeDoc.querySelector('[data-testid="incall_leave"]');
           if (button) {
@@ -406,8 +406,8 @@ export function CallProvider({ children }: CallProviderProps) {
     viewedClientWidget,
     setViewedCallRoomId,
     lastViewedRoomDuringCall,
-    activeClientWidget?.iframe.contentDocument,
-    activeClientWidget?.iframe.contentWindow.document,
+    activeClientWidget?.iframe?.contentDocument,
+    activeClientWidget?.iframe?.contentWindow?.document,
   ]);
 
   const sendWidgetAction = useCallback(

From e78d1dab141a3edbe8c9a498a63ebba37eaa985d Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Tue, 10 Jun 2025 20:00:07 -0500
Subject: [PATCH 202/242] Update to use new icons (thank you)

---
 src/app/features/room-nav/RoomCallNavStatus.tsx | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/app/features/room-nav/RoomCallNavStatus.tsx b/src/app/features/room-nav/RoomCallNavStatus.tsx
index 034e5664..c9a9476c 100644
--- a/src/app/features/room-nav/RoomCallNavStatus.tsx
+++ b/src/app/features/room-nav/RoomCallNavStatus.tsx
@@ -1,14 +1,10 @@
 import { Box, Chip, Icon, IconButton, Icons, Text, Tooltip, TooltipProvider } from 'folds';
 import React from 'react';
-import { Room } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useCallState } from '../../pages/client/call/CallProvider';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 
-type CallNavStatusProps = {
-  space: Room | null;
-};
-export function CallNavStatus({ space }: CallNavStatusProps) {
+export function CallNavStatus() {
   const {
     activeCallRoomId,
     isAudioEnabled,
@@ -64,7 +60,7 @@ export function CallNavStatus({ space }: CallNavStatusProps) {
         >
           {(triggerRef) => (
             <IconButton variant="Background" ref={triggerRef} onClick={toggleAudio}>
-              <Icon src={!isAudioEnabled ? Icons.VolumeHigh : Icons.VolumeMute} />
+              <Icon src={!isAudioEnabled ? Icons.Mic : Icons.MicMute} />
             </IconButton>
           )}
         </TooltipProvider>
@@ -79,7 +75,7 @@ export function CallNavStatus({ space }: CallNavStatusProps) {
         >
           {(triggerRef) => (
             <IconButton variant="Background" ref={triggerRef} onClick={toggleVideo}>
-              <Icon src={!isVideoEnabled ? Icons.Vlc : Icons.Lock} />
+              <Icon src={!isVideoEnabled ? Icons.VideoCamera : Icons.VideoCameraMute} />
             </IconButton>
           )}
         </TooltipProvider>

From 7228c2e35f1057eca551de5e613e208605360e99 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Tue, 10 Jun 2025 20:00:21 -0500
Subject: [PATCH 203/242] Remove unneeded prop

---
 src/app/pages/client/space/Space.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 029bf722..8b62065e 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -604,7 +604,7 @@ export function Space() {
           })}
         </NavCategory>
       </PageNavContent>
-      <CallNavStatus space={space} />
+      <CallNavStatus />
     </PageNav>
   );
 }

From 02ac70affc4da9c65181c2c9fe43deeddf906143 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Tue, 10 Jun 2025 20:01:15 -0500
Subject: [PATCH 204/242] Re-arrange more options and add checks for each
 option to see if it is a call room (probably should manage a state to see if
 a header is already on screen and provide a slightly modified visual based on
 that for call rooms)

---
 src/app/features/room/RoomViewHeader.tsx | 172 ++++++++++++-----------
 1 file changed, 88 insertions(+), 84 deletions(-)

diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 5563a5c8..086d20d5 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -344,61 +344,45 @@ export function RoomViewHeader() {
             )}
           </Box>
         </Box>
-        {(room.isCallRoom() && !isDirectMessage() && (
-          <Box>
+
+        <Box shrink="No">
+          {false && isDirectMessage() && (
+            <TooltipProvider
+              position="Bottom"
+              align="End"
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  <Text>Start a call</Text>
+                </Tooltip>
+              }
+            >
+              {(triggerRef) => (
+                <IconButton onClick={handleCall} ref={triggerRef}>
+                  <Icon size="400" src={Icons.Phone} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          )}
+
+          {!ecryptedRoom && !room.isCallRoom() && (
             <TooltipProvider
               position="Bottom"
               offset={4}
               tooltip={
                 <Tooltip>
-                  <Text>Chat</Text>
+                  <Text>Search</Text>
                 </Tooltip>
               }
             >
               {(triggerRef) => (
-                <IconButton ref={triggerRef} onClick={toggleChat}>
-                  <Icon size="400" src={Icons.Message} />
+                <IconButton ref={triggerRef} onClick={handleSearchClick}>
+                  <Icon size="400" src={Icons.Search} />
                 </IconButton>
               )}
             </TooltipProvider>
-          </Box>
-        )) || (
-          <Box shrink="No">
-            {false && isDirectMessage() && (
-              <TooltipProvider
-                position="Bottom"
-                align="End"
-                offset={4}
-                tooltip={
-                  <Tooltip>
-                    <Text>Start a call</Text>
-                  </Tooltip>
-                }
-              >
-                {(triggerRef) => (
-                  <IconButton onClick={handleCall} ref={triggerRef}>
-                    <Icon size="400" src={Icons.Phone} />
-                  </IconButton>
-                )}
-              </TooltipProvider>
-            )}
-            {!ecryptedRoom && (
-              <TooltipProvider
-                position="Bottom"
-                offset={4}
-                tooltip={
-                  <Tooltip>
-                    <Text>Search</Text>
-                  </Tooltip>
-                }
-              >
-                {(triggerRef) => (
-                  <IconButton ref={triggerRef} onClick={handleSearchClick}>
-                    <Icon size="400" src={Icons.Search} />
-                  </IconButton>
-                )}
-              </TooltipProvider>
-            )}
+          )}
+          {!room.isCallRoom() && (
             <TooltipProvider
               position="Bottom"
               offset={4}
@@ -436,6 +420,8 @@ export function RoomViewHeader() {
                 </IconButton>
               )}
             </TooltipProvider>
+          )}
+          {!room.isCallRoom() && (
             <PopOut
               anchor={pinMenuAnchor}
               position="Bottom"
@@ -455,62 +441,80 @@ export function RoomViewHeader() {
                 </FocusTrap>
               }
             />
+          )}
 
-            {screenSize === ScreenSize.Desktop && (
-              <TooltipProvider
-                position="Bottom"
-                offset={4}
-                tooltip={
-                  <Tooltip>
-                    <Text>Members</Text>
-                  </Tooltip>
-                }
-              >
-                {(triggerRef) => (
-                  <IconButton ref={triggerRef} onClick={() => setPeopleDrawer((drawer) => !drawer)}>
-                    <Icon size="400" src={Icons.User} />
-                  </IconButton>
-                )}
-              </TooltipProvider>
-            )}
+          {!room.isCallRoom() && screenSize === ScreenSize.Desktop && (
             <TooltipProvider
               position="Bottom"
-              align="End"
               offset={4}
               tooltip={
                 <Tooltip>
-                  <Text>More Options</Text>
+                  <Text>Members</Text>
                 </Tooltip>
               }
             >
               {(triggerRef) => (
-                <IconButton onClick={handleOpenMenu} ref={triggerRef} aria-pressed={!!menuAnchor}>
-                  <Icon size="400" src={Icons.VerticalDots} filled={!!menuAnchor} />
+                <IconButton ref={triggerRef} onClick={() => setPeopleDrawer((drawer) => !drawer)}>
+                  <Icon size="400" src={Icons.User} />
                 </IconButton>
               )}
             </TooltipProvider>
-            <PopOut
-              anchor={menuAnchor}
+          )}
+
+          <TooltipProvider
+            position="Bottom"
+            align="End"
+            offset={4}
+            tooltip={
+              <Tooltip>
+                <Text>More Options</Text>
+              </Tooltip>
+            }
+          >
+            {(triggerRef) => (
+              <IconButton onClick={handleOpenMenu} ref={triggerRef} aria-pressed={!!menuAnchor}>
+                <Icon size="400" src={Icons.VerticalDots} filled={!!menuAnchor} />
+              </IconButton>
+            )}
+          </TooltipProvider>
+          <PopOut
+            anchor={menuAnchor}
+            position="Bottom"
+            align="End"
+            content={
+              <FocusTrap
+                focusTrapOptions={{
+                  initialFocus: false,
+                  returnFocusOnDeactivate: false,
+                  onDeactivate: () => setMenuAnchor(undefined),
+                  clickOutsideDeactivates: true,
+                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                  escapeDeactivates: stopPropagation,
+                }}
+              >
+                <RoomMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
+              </FocusTrap>
+            }
+          />
+          {room.isCallRoom() && !isDirectMessage() && (
+            <TooltipProvider
               position="Bottom"
-              align="End"
-              content={
-                <FocusTrap
-                  focusTrapOptions={{
-                    initialFocus: false,
-                    returnFocusOnDeactivate: false,
-                    onDeactivate: () => setMenuAnchor(undefined),
-                    clickOutsideDeactivates: true,
-                    isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-                    isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-                    escapeDeactivates: stopPropagation,
-                  }}
-                >
-                  <RoomMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
-                </FocusTrap>
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  <Text>Chat</Text>
+                </Tooltip>
               }
-            />
-          </Box>
-        )}
+            >
+              {(triggerRef) => (
+                <IconButton ref={triggerRef} onClick={toggleChat}>
+                  <Icon size="400" src={Icons.Message} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          )}
+        </Box>
       </Box>
     </PageHeader>
   );

From daadbe4358267900637486227ae2570359c84405 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Tue, 10 Jun 2025 20:40:45 -0500
Subject: [PATCH 205/242] Invert icons to show the state instead of the action
 they will perform (more visual clarity)

---
 src/app/features/room-nav/RoomCallNavStatus.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/features/room-nav/RoomCallNavStatus.tsx b/src/app/features/room-nav/RoomCallNavStatus.tsx
index c9a9476c..800fe1f0 100644
--- a/src/app/features/room-nav/RoomCallNavStatus.tsx
+++ b/src/app/features/room-nav/RoomCallNavStatus.tsx
@@ -60,7 +60,7 @@ export function CallNavStatus() {
         >
           {(triggerRef) => (
             <IconButton variant="Background" ref={triggerRef} onClick={toggleAudio}>
-              <Icon src={!isAudioEnabled ? Icons.Mic : Icons.MicMute} />
+              <Icon src={!isAudioEnabled ? Icons.MicMute : Icons.Mic} />
             </IconButton>
           )}
         </TooltipProvider>
@@ -75,7 +75,7 @@ export function CallNavStatus() {
         >
           {(triggerRef) => (
             <IconButton variant="Background" ref={triggerRef} onClick={toggleVideo}>
-              <Icon src={!isVideoEnabled ? Icons.VideoCamera : Icons.VideoCameraMute} />
+              <Icon src={!isVideoEnabled ? Icons.VideoCameraMute : Icons.VideoCamera} />
             </IconButton>
           )}
         </TooltipProvider>

From e1146b1c060179534c113cc314d0c840f58a3878 Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Sun, 15 Jun 2025 23:30:17 -0500
Subject: [PATCH 206/242] Update
 src/app/features/room-nav/RoomCallNavStatus.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room-nav/RoomCallNavStatus.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/features/room-nav/RoomCallNavStatus.tsx b/src/app/features/room-nav/RoomCallNavStatus.tsx
index 800fe1f0..3496abf5 100644
--- a/src/app/features/room-nav/RoomCallNavStatus.tsx
+++ b/src/app/features/room-nav/RoomCallNavStatus.tsx
@@ -116,7 +116,9 @@ export function CallNavStatus() {
                 onClick={handleGoToCallRoom}
                 ref={triggerRef}
               >
-                {mx.getRoom(activeCallRoomId)?.normalizedName}
+                <Text style={{ flexGrow: 1 }} size="B400" truncate>
+                  {mx.getRoom(activeCallRoomId)?.name}
+                </Text>
               </Chip>
             )}
           </TooltipProvider>

From a5a9e72c5fedcfb0e526d4c0a4c4c830875ceeb3 Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Sun, 15 Jun 2025 23:30:47 -0500
Subject: [PATCH 207/242] Update
 src/app/features/room-nav/RoomCallNavStatus.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room-nav/RoomCallNavStatus.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room-nav/RoomCallNavStatus.tsx b/src/app/features/room-nav/RoomCallNavStatus.tsx
index 3496abf5..6969659c 100644
--- a/src/app/features/room-nav/RoomCallNavStatus.tsx
+++ b/src/app/features/room-nav/RoomCallNavStatus.tsx
@@ -96,7 +96,7 @@ export function CallNavStatus() {
           )}
         </TooltipProvider>
 
-        <Box grow="Yes">
+        <Box grow="Yes" justifyContent="Center" alignItems="Center">
           <TooltipProvider
             position="Top"
             offset={4}

From 3b767870c5d4d5c90c74aca69adadd54aff17dde Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Sun, 15 Jun 2025 23:30:59 -0500
Subject: [PATCH 208/242] Update
 src/app/features/room-nav/RoomCallNavStatus.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room-nav/RoomCallNavStatus.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/features/room-nav/RoomCallNavStatus.tsx b/src/app/features/room-nav/RoomCallNavStatus.tsx
index 6969659c..171d07f5 100644
--- a/src/app/features/room-nav/RoomCallNavStatus.tsx
+++ b/src/app/features/room-nav/RoomCallNavStatus.tsx
@@ -109,7 +109,6 @@ export function CallNavStatus() {
             {(triggerRef) => (
               <Chip
                 variant="Background"
-                radii="Inherit"
                 size="500"
                 fill="Soft"
                 as="button"

From 8dfc3aa36fb8c40c292465de87ffd8b3d4855639 Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Sun, 15 Jun 2025 23:31:16 -0500
Subject: [PATCH 209/242] Update
 src/app/features/room-nav/RoomCallNavStatus.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room-nav/RoomCallNavStatus.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room-nav/RoomCallNavStatus.tsx b/src/app/features/room-nav/RoomCallNavStatus.tsx
index 171d07f5..4d78eb5c 100644
--- a/src/app/features/room-nav/RoomCallNavStatus.tsx
+++ b/src/app/features/room-nav/RoomCallNavStatus.tsx
@@ -69,7 +69,7 @@ export function CallNavStatus() {
           offset={4}
           tooltip={
             <Tooltip>
-              <Text>{!isVideoEnabled ? 'Video on' : 'Video off'}</Text>
+              <Text>{!isVideoEnabled ? 'Video On' : 'Video Off'}</Text>
             </Tooltip>
           }
         >

From 0d2f76e11de64cc413f86a157f0eb2d97e2f950f Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Sun, 15 Jun 2025 23:31:24 -0500
Subject: [PATCH 210/242] Update
 src/app/features/room-nav/RoomCallNavStatus.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room-nav/RoomCallNavStatus.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room-nav/RoomCallNavStatus.tsx b/src/app/features/room-nav/RoomCallNavStatus.tsx
index 4d78eb5c..f98b6c55 100644
--- a/src/app/features/room-nav/RoomCallNavStatus.tsx
+++ b/src/app/features/room-nav/RoomCallNavStatus.tsx
@@ -102,7 +102,7 @@ export function CallNavStatus() {
             offset={4}
             tooltip={
               <Tooltip>
-                <Text>Go to room</Text>
+                <Text>Go to Room</Text>
               </Tooltip>
             }
           >

From 2575d77b3700ccc849eda6202dc9edd006315ed1 Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Sun, 15 Jun 2025 23:31:34 -0500
Subject: [PATCH 211/242] Update
 src/app/features/room-nav/RoomCallNavStatus.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room-nav/RoomCallNavStatus.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room-nav/RoomCallNavStatus.tsx b/src/app/features/room-nav/RoomCallNavStatus.tsx
index f98b6c55..2535394e 100644
--- a/src/app/features/room-nav/RoomCallNavStatus.tsx
+++ b/src/app/features/room-nav/RoomCallNavStatus.tsx
@@ -85,7 +85,7 @@ export function CallNavStatus() {
           offset={4}
           tooltip={
             <Tooltip>
-              <Text>Hang up</Text>
+              <Text>Hang Up</Text>
             </Tooltip>
           }
         >

From 5d22b287dbec85c148643a9ea9556734228022b0 Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Sun, 15 Jun 2025 23:31:44 -0500
Subject: [PATCH 212/242] Update src/app/features/room-nav/RoomNavItem.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room-nav/RoomNavItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index d77353b7..31c95b60 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -385,7 +385,7 @@ export function RoomNavItem({
                 offset={4}
                 tooltip={
                   <Tooltip>
-                    <Text>Open chat</Text>
+                    <Text>Open Chat</Text>
                   </Tooltip>
                 }
               >

From 8e4f310aa3dd5e3248c1ef24e5f4064dd4e613fb Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Sun, 15 Jun 2025 23:31:53 -0500
Subject: [PATCH 213/242] Update src/app/features/room/RoomViewHeader.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room/RoomViewHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 086d20d5..6eedfc32 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -353,7 +353,7 @@ export function RoomViewHeader() {
               offset={4}
               tooltip={
                 <Tooltip>
-                  <Text>Start a call</Text>
+                  <Text>Start a Call</Text>
                 </Tooltip>
               }
             >

From 4d14eb9fb754401531142e4b6e73511bae2dd643 Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Tue, 17 Jun 2025 11:36:24 -0500
Subject: [PATCH 214/242] Update src/app/features/room-nav/RoomNavItem.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room-nav/RoomNavItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 31c95b60..fa4f3a90 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -25,7 +25,7 @@ import { useParams } from 'react-router-dom';
 import { NavItem, NavItemContent, NavItemOptions, NavLink } from '../../components/nav';
 import { UnreadBadge, UnreadBadgeCenter } from '../../components/unread-badge';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
-import { getDirectRoomAvatarUrl, getRoomAvatarUrl, isSpace } from '../../utils/room';
+import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
 import { nameInitials } from '../../utils/common';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomUnread } from '../../state/hooks/unread';

From 3f2c2af351e37b7c7584363056301ba31bbd8f47 Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Tue, 17 Jun 2025 11:36:43 -0500
Subject: [PATCH 215/242] Update src/app/features/room-nav/RoomNavItem.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room-nav/RoomNavItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index fa4f3a90..2a947a2f 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -394,7 +394,7 @@ export function RoomNavItem({
                     ref={triggerRef}
                     data-testid="chat-button"
                     onClick={handleChatButtonClick}
-                    aria-pressed={isChatOpen}
+                    aria-pressed={isChatOpen && selected}
                     variant="Background"
                     fill="None"
                     size="300"

From 9f749d1a9dc493a2765f556193448cb3414126e6 Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Tue, 17 Jun 2025 11:37:03 -0500
Subject: [PATCH 216/242] Update src/app/features/room-nav/RoomNavItem.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room-nav/RoomNavItem.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 2a947a2f..d30c3b43 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -225,6 +225,7 @@ export function RoomNavItem({
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
   const {
+    isCallActive,
     activeCallRoomId,
     setActiveCallRoomId,
     setViewedCallRoomId,

From b08fa60a93794bce32d43e97aab9eb7ec7677158 Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Tue, 17 Jun 2025 11:37:25 -0500
Subject: [PATCH 217/242] Update src/app/features/room-nav/RoomNavItem.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room-nav/RoomNavItem.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index d30c3b43..9b988670 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -236,6 +236,7 @@ export function RoomNavItem({
   const typingMember = useRoomTypingMember(room.roomId).filter(
     (receipt) => receipt.userId !== mx.getUserId()
   );
+  const isActiveCall = isCallActive && activeCallRoomId === room.roomId;
   const { navigateRoom } = useRoomNavigate();
   const { roomIdOrAlias: viewedRoomId } = useParams();
   const screenSize = useScreenSizeContext();

From 7a169fcc0e4cc9ed83ddd3797778846cc4885965 Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Tue, 17 Jun 2025 11:37:44 -0500
Subject: [PATCH 218/242] Update src/app/features/room-nav/RoomNavItem.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room-nav/RoomNavItem.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 9b988670..65660d74 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -325,8 +325,10 @@ export function RoomNavItem({
               />
             ) : (
               <RoomIcon
-                style={{ opacity: unread ? config.opacity.P500 : config.opacity.P300 }}
-                filled={selected}
+                style={{
+                  opacity: unread || isActiveCall ? config.opacity.P500 : config.opacity.P300,
+                }}
+                filled={selected || isActiveCall}
                 size="100"
                 joinRule={room.getJoinRule()}
                 call={room.isCallRoom()}

From f74feec123983af5b4af5721c015750c4e31567f Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Tue, 17 Jun 2025 11:37:56 -0500
Subject: [PATCH 219/242] Update src/app/features/room-nav/RoomNavItem.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room-nav/RoomNavItem.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 65660d74..ff6ffe05 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -336,7 +336,12 @@ export function RoomNavItem({
             )}
           </Avatar>
           <Box as="span" grow="Yes">
-            <Text priority={unread ? '500' : '300'} as="span" size="Inherit" truncate>
+            <Text
+              priority={unread || isActiveCall ? '500' : '300'}
+              as="span"
+              size="Inherit"
+              truncate
+            >
               {room.name}
             </Text>
           </Box>

From aca2a403097e90ac647b1a0a37b57552d4d46ffb Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Tue, 17 Jun 2025 11:38:11 -0500
Subject: [PATCH 220/242] Update src/app/features/room-nav/RoomNavUser.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room-nav/RoomNavUser.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room-nav/RoomNavUser.tsx b/src/app/features/room-nav/RoomNavUser.tsx
index 6a533a0e..ea3f6c0c 100644
--- a/src/app/features/room-nav/RoomNavUser.tsx
+++ b/src/app/features/room-nav/RoomNavUser.tsx
@@ -1,4 +1,4 @@
-import { Avatar, Box, Icon, Icons } from 'folds';
+import { Avatar, Box, Icon, Icons, Text } from 'folds';
 import React from 'react';
 import { Room, RoomMember } from 'matrix-js-sdk';
 import { NavItem, NavItemContent } from '../../components/nav';

From b46c9ed023066aa2aae37cc607573d5a2aeacd70 Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Tue, 17 Jun 2025 11:38:19 -0500
Subject: [PATCH 221/242] Update src/app/features/room-nav/RoomNavUser.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room-nav/RoomNavUser.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room-nav/RoomNavUser.tsx b/src/app/features/room-nav/RoomNavUser.tsx
index ea3f6c0c..66770ed4 100644
--- a/src/app/features/room-nav/RoomNavUser.tsx
+++ b/src/app/features/room-nav/RoomNavUser.tsx
@@ -1,6 +1,6 @@
 import { Avatar, Box, Icon, Icons, Text } from 'folds';
 import React from 'react';
-import { Room, RoomMember } from 'matrix-js-sdk';
+import { Room } from 'matrix-js-sdk';
 import { NavItem, NavItemContent } from '../../components/nav';
 import { UserAvatar } from '../../components/user-avatar';
 import { useMatrixClient } from '../../hooks/useMatrixClient';

From dd158fa6526eae08dc3a2425570f3626836ae13d Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Tue, 17 Jun 2025 11:38:29 -0500
Subject: [PATCH 222/242] Update src/app/features/room-nav/RoomNavUser.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room-nav/RoomNavUser.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/features/room-nav/RoomNavUser.tsx b/src/app/features/room-nav/RoomNavUser.tsx
index 66770ed4..f72df92e 100644
--- a/src/app/features/room-nav/RoomNavUser.tsx
+++ b/src/app/features/room-nav/RoomNavUser.tsx
@@ -41,7 +41,9 @@ export function RoomNavUser({ room, space, sender }: RoomNavUserProps) {
               renderFallback={() => <Icon size="50" src={Icons.User} filled />}
             />
           </Avatar>
-          {getName}
+          <Text size="B400" priority="300" truncate>
+            {getName}
+          </Text>
         </Box>
       </NavItemContent>
     </NavItem>

From e6e751d3053beed19c01b977d0e748950070cb4a Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Tue, 17 Jun 2025 11:38:41 -0500
Subject: [PATCH 223/242] Update src/app/pages/client/space/Space.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/pages/client/space/Space.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 8b62065e..f474ce50 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -586,7 +586,7 @@ export function Space() {
                 case 'user': {
                   const { sender, room } = item;
                   return (
-                    <Box>
+                    <Box style={{ paddingLeft: config.space.S200 }}>
                       <RoomNavUser room={room} space={space} sender={sender} />
                     </Box>
                   );

From 6b3c9dfddc0b0709c4f823df2f398706e995c798 Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Wed, 18 Jun 2025 17:26:47 -0500
Subject: [PATCH 224/242] Update src/app/features/call/CallView.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/call/CallView.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/features/call/CallView.tsx b/src/app/features/call/CallView.tsx
index eed5bd32..72eaa09b 100644
--- a/src/app/features/call/CallView.tsx
+++ b/src/app/features/call/CallView.tsx
@@ -2,7 +2,6 @@
 import { Room } from 'matrix-js-sdk';
 import React, { useContext, useMemo, useCallback, useEffect, useRef } from 'react';
 import { Box } from 'folds';
-import { RoomViewHeader } from '../room/RoomViewHeader';
 import { useCallState } from '../../pages/client/call/CallProvider';
 import {
   PrimaryRefContext,

From c67513180219b0d76e3305bf4477f3cd2154d94e Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Wed, 18 Jun 2025 17:26:57 -0500
Subject: [PATCH 225/242] Update src/app/features/call/CallView.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/call/CallView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/call/CallView.tsx b/src/app/features/call/CallView.tsx
index 72eaa09b..560fd5d0 100644
--- a/src/app/features/call/CallView.tsx
+++ b/src/app/features/call/CallView.tsx
@@ -32,7 +32,7 @@ type OriginalStyles = {
   border?: string;
 };
 
-export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
+export function CallView({ room }: { room: Room }) {
   const primaryIframeRef = useContext(PrimaryRefContext);
   const backupIframeRef = useContext(BackupRefContext);
   const iframeHostRef = useRef<HTMLDivElement>(null);

From a2c8097c01b689f50d83d73a792829e89ec1565b Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Wed, 18 Jun 2025 17:27:26 -0500
Subject: [PATCH 226/242] Update src/app/features/call/CallView.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/call/CallView.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/features/call/CallView.tsx b/src/app/features/call/CallView.tsx
index 560fd5d0..516a7909 100644
--- a/src/app/features/call/CallView.tsx
+++ b/src/app/features/call/CallView.tsx
@@ -140,7 +140,6 @@ export function CallView({ room }: { room: Room }) {
         display: isCallViewVisible ? (isMobile && isChatOpen ? 'none' : 'flex') : 'none',
       }}
     >
-      <RoomViewHeader />
       <div
         ref={iframeHostRef}
         style={{

From 9be2a945da5ccd0f74ddc425c0d52530826a8064 Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Wed, 18 Jun 2025 17:27:34 -0500
Subject: [PATCH 227/242] Update src/app/features/room/RoomView.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room/RoomView.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx
index f98729ce..71902f70 100644
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -99,6 +99,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
 
   return (
     <Page ref={roomViewRef}>
+      {!room.isCallRoom() && <RoomViewHeader />}
       <RoomViewHeader />
       <Box grow="Yes" direction="Column" style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
         <RoomTimeline

From 4403eacdf1d34d7706169ebe9b15e24886f1711a Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Wed, 18 Jun 2025 17:42:15 -0500
Subject: [PATCH 228/242] Update src/app/features/room/RoomView.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room/RoomView.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx
index 71902f70..25d8fbd8 100644
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -100,7 +100,6 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
   return (
     <Page ref={roomViewRef}>
       {!room.isCallRoom() && <RoomViewHeader />}
-      <RoomViewHeader />
       <Box grow="Yes" direction="Column" style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
         <RoomTimeline
           key={roomId}

From 7712e34d226360d11dd0242e25248d3637dd4714 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 18 Jun 2025 17:42:53 -0500
Subject: [PATCH 229/242] adjust room header for calling

---
 src/app/features/room/Room.tsx | 57 +++++++++++++++++++++-------------
 1 file changed, 35 insertions(+), 22 deletions(-)

diff --git a/src/app/features/room/Room.tsx b/src/app/features/room/Room.tsx
index 5dd67047..24f378b4 100644
--- a/src/app/features/room/Room.tsx
+++ b/src/app/features/room/Room.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-nested-ternary */
 import React, { useCallback } from 'react';
 import { Box, Line } from 'folds';
 import { useParams } from 'react-router-dom';
@@ -15,6 +16,7 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomMembers } from '../../hooks/useRoomMembers';
 import { CallView } from '../call/CallView';
 import { useCallState } from '../../pages/client/call/CallProvider';
+import { RoomViewHeader } from './RoomViewHeader';
 
 export function Room() {
   const { eventId } = useParams();
@@ -48,31 +50,42 @@ export function Room() {
           width: '100%',
           height: '100%',
           display: 'flex',
-          flexDirection: 'row',
+          flexDirection: 'column',
         }}
       >
-        <CallView room={room} eventId={eventId} />
-        {(!room.isCallRoom() || isChatOpen) && (
-          <Box
-            grow="Yes"
-            style={{
-              width: room.isCallRoom() ? (isChatOpen ? '40%' : '0%') : '100%',
-              height: '100%',
-              display: 'flex',
-              flexDirection: 'column',
-            }}
-          >
-            <Box style={{ flex: 1, minHeight: 0, overflowY: 'auto', background: '#fff' }}>
-              <RoomView room={room} eventId={eventId} />
+        {room.isCallRoom() && <RoomViewHeader />}
+        <Box
+          grow="Yes"
+          style={{
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'row',
+          }}
+        >
+          <CallView room={room} />
+          {(!room.isCallRoom() || isChatOpen) && (
+            <Box
+              grow="Yes"
+              style={{
+                width: room.isCallRoom() ? (isChatOpen ? '40%' : '0%') : '100%',
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+            >
+              <Box style={{ flex: 1, minHeight: 0, overflowY: 'auto', background: '#fff' }}>
+                <RoomView room={room} eventId={eventId} />
+              </Box>
             </Box>
-          </Box>
-        )}
-        {screenSize === ScreenSize.Desktop && !room.isCallRoom() && isDrawer && (
-          <>
-            <Line variant="Background" direction="Vertical" size="300" />
-            <MembersDrawer key={room.roomId} room={room} members={members} />
-          </>
-        )}
+          )}
+          {screenSize === ScreenSize.Desktop && !room.isCallRoom() && isDrawer && (
+            <>
+              <Line variant="Background" direction="Vertical" size="300" />
+              <MembersDrawer key={room.roomId} room={room} members={members} />
+            </>
+          )}
+        </Box>
       </Box>
     </PowerLevelsContextProvider>
   );

From 20815390e64762873e17106d50f6a419ea438dd1 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Wed, 18 Jun 2025 18:39:30 -0500
Subject: [PATCH 230/242] Remove No Active Call text when not in a call

---
 src/app/features/room-nav/RoomCallNavStatus.tsx | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/src/app/features/room-nav/RoomCallNavStatus.tsx b/src/app/features/room-nav/RoomCallNavStatus.tsx
index 2535394e..d3f23794 100644
--- a/src/app/features/room-nav/RoomCallNavStatus.tsx
+++ b/src/app/features/room-nav/RoomCallNavStatus.tsx
@@ -22,20 +22,7 @@ export function CallNavStatus() {
     }
   };
   if (!isCallActive) {
-    return (
-      <Box
-        direction="Column"
-        gap="500"
-        style={{
-          flexShrink: 0,
-          borderTop: `1px solid #e0e0e0`,
-        }}
-      >
-        <Text size="T200" color="Muted" align="Center">
-          No active call
-        </Text>
-      </Box>
-    );
+    return null;
   }
 
   return (

From 78c38506fa40bf3172b290a419a122663cbb959a Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 20 Jun 2025 16:51:40 -0500
Subject: [PATCH 231/242] update element-call version

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a3d8536c..934bb070 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -74,7 +74,7 @@
         "ua-parser-js": "1.0.35"
       },
       "devDependencies": {
-        "@element-hq/element-call-embedded": "0.9.0",
+        "@element-hq/element-call-embedded": "0.12.2",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rollup/plugin-inject": "5.0.3",
         "@rollup/plugin-wasm": "6.1.1",
@@ -1661,9 +1661,9 @@
       }
     },
     "node_modules/@element-hq/element-call-embedded": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@element-hq/element-call-embedded/-/element-call-embedded-0.9.0.tgz",
-      "integrity": "sha512-W/ocQqfzU1rqwjLBCjCpeIEJTX2iCqn8CR3GRF0kqd5wsehPDhIsGPnUDmFalY/iN15eRDx/hex2rgOOJzFoGg==",
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/@element-hq/element-call-embedded/-/element-call-embedded-0.12.2.tgz",
+      "integrity": "sha512-2u5/bOARcjc5TFq4929x1R0tvsNbeVA58FBtiW05GlIJCapxzPSOeeGhbqEcJ1TW3/hLGpiKMcw0QwRBQVNzQA==",
       "dev": true
     },
     "node_modules/@emotion/hash": {
diff --git a/package.json b/package.json
index e9b42b71..44385104 100644
--- a/package.json
+++ b/package.json
@@ -86,7 +86,7 @@
     "ua-parser-js": "1.0.35"
   },
   "devDependencies": {
-    "@element-hq/element-call-embedded": "0.9.0",
+    "@element-hq/element-call-embedded": "0.12.2",
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@rollup/plugin-inject": "5.0.3",
     "@rollup/plugin-wasm": "6.1.1",

From 6d0e8b7f7914108f6e5f4907f360677741b492e6 Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Tue, 24 Jun 2025 19:00:06 -0500
Subject: [PATCH 232/242] Update src/app/features/room/RoomViewHeader.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room/RoomViewHeader.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 6eedfc32..78b41091 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -461,6 +461,24 @@ export function RoomViewHeader() {
             </TooltipProvider>
           )}
 
+          {room.isCallRoom() && !isDirectMessage() && (
+            <TooltipProvider
+              position="Bottom"
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  <Text>Chat</Text>
+                </Tooltip>
+              }
+            >
+              {(triggerRef) => (
+                <IconButton ref={triggerRef} onClick={toggleChat}>
+                  <Icon size="400" src={Icons.Message} filled={isChatOpen} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          )}
+
           <TooltipProvider
             position="Bottom"
             align="End"

From 7e948f0050ade41ee5eaceca395f1adb64a4d03c Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Tue, 24 Jun 2025 19:00:19 -0500
Subject: [PATCH 233/242] Update src/app/features/room/RoomViewHeader.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room/RoomViewHeader.tsx | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 78b41091..5844d9f7 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -515,23 +515,6 @@ export function RoomViewHeader() {
               </FocusTrap>
             }
           />
-          {room.isCallRoom() && !isDirectMessage() && (
-            <TooltipProvider
-              position="Bottom"
-              offset={4}
-              tooltip={
-                <Tooltip>
-                  <Text>Chat</Text>
-                </Tooltip>
-              }
-            >
-              {(triggerRef) => (
-                <IconButton ref={triggerRef} onClick={toggleChat}>
-                  <Icon size="400" src={Icons.Message} />
-                </IconButton>
-              )}
-            </TooltipProvider>
-          )}
         </Box>
       </Box>
     </PageHeader>

From 40a227799649d39317107c7919d24e750c7498c5 Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Tue, 24 Jun 2025 19:00:54 -0500
Subject: [PATCH 234/242] Update src/app/features/room/RoomViewHeader.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room/RoomViewHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 5844d9f7..94ad82b0 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -365,7 +365,7 @@ export function RoomViewHeader() {
             </TooltipProvider>
           )}
 
-          {!ecryptedRoom && !room.isCallRoom() && (
+          {!ecryptedRoom && (!room.isCallRoom() || isChatOpen) && (
             <TooltipProvider
               position="Bottom"
               offset={4}

From 2869735e2b7e0f742ad71ee99c1083ba5d621d50 Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Tue, 24 Jun 2025 19:01:09 -0500
Subject: [PATCH 235/242] Update src/app/features/room/RoomViewHeader.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room/RoomViewHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 94ad82b0..2287ca53 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -382,7 +382,7 @@ export function RoomViewHeader() {
               )}
             </TooltipProvider>
           )}
-          {!room.isCallRoom() && (
+          {(!room.isCallRoom() || isChatOpen) && (
             <TooltipProvider
               position="Bottom"
               offset={4}

From eaf70fb79aa157bdf4d6aa102b35b9b7250f1d2b Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Tue, 24 Jun 2025 19:01:41 -0500
Subject: [PATCH 236/242] Update src/app/features/room/RoomViewHeader.tsx

Co-authored-by: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
---
 src/app/features/room/RoomViewHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 2287ca53..3265cd3f 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -421,7 +421,7 @@ export function RoomViewHeader() {
               )}
             </TooltipProvider>
           )}
-          {!room.isCallRoom() && (
+          {(!room.isCallRoom() || isChatOpen) && (
             <PopOut
               anchor={pinMenuAnchor}
               position="Bottom"

From efc77ceb44028143a4e1d8d6e6f79c2b136d3135 Mon Sep 17 00:00:00 2001
From: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
Date: Fri, 27 Jun 2025 12:38:13 +0200
Subject: [PATCH 237/242] Revert most changes to Space.tsx

---
 src/app/pages/client/space/Space.tsx | 263 +++++----------------------
 1 file changed, 47 insertions(+), 216 deletions(-)

diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index f474ce50..c708ef0b 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -26,7 +26,6 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import { JoinRule, Room } from 'matrix-js-sdk';
 import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
 import FocusTrap from 'focus-trap-react';
-import { logger } from 'matrix-js-sdk/lib/logger';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { mDirectAtom } from '../../../state/mDirectList';
 import {
@@ -46,8 +45,7 @@ import {
 import { useSpace } from '../../../hooks/useSpace';
 import { VirtualTile } from '../../../components/virtualizer';
 import { RoomNavCategoryButton, RoomNavItem } from '../../../features/room-nav';
-// Using the original name for clarity when generating space category IDs
-import { makeNavCategoryId as makeSpaceNavCategoryId } from '../../../state/closedNavCategories';
+import { makeNavCategoryId } from '../../../state/closedNavCategories';
 import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
 import { useCategoryHandler } from '../../../hooks/useCategoryHandler';
 import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper';
@@ -79,118 +77,6 @@ import {
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { CallNavStatus } from '../../../features/room-nav/RoomCallNavStatus';
-import { getStateEvents } from '../../../utils/room';
-import { RoomNavUser } from '../../../features/room-nav/RoomNavUser';
-import { useStateEvents } from '../../../hooks/useStateEvents';
-
-/**
- * Processes the raw hierarchy from useSpaceJoinedHierarchy into a flat list
- * suitable for the virtualizer, including collapsible headers for text/voice rooms.
- * Removes the top-level "Rooms" category header.
- *
- * @param hierarchy - The raw hierarchy data (array of { roomId: string }).
- * @param mx - The Matrix client instance.
- * @param spaceRoomId - The ID of the root space being viewed.
- * @param closedCategories - The Set of currently closed category IDs.
- * @returns An array of processed items for rendering.
- */
-const processHierarchyForVirtualizer = (
-  hierarchy: { roomId: string }[],
-  mx: ReturnType<typeof useMatrixClient>,
-  spaceRoomId: string,
-  closedCategories: Set<string>
-): Array<{ type: string; key: string; [key: string]: any }> => {
-  const processed: Array<{ type: string; key: string; [key: string]: any }> = [];
-  let currentCategoryRooms = { text: [], voice: [], users: [] };
-  let currentParentId: string = spaceRoomId;
-
-  const addCollectedRoomsToProcessed = (parentId: string) => {
-    const textCategoryId = `${parentId}_text_rooms`;
-    const voiceCategoryId = `${parentId}_call_rooms`;
-    const isTextClosed = closedCategories.has(textCategoryId);
-    const isCallClosed = closedCategories.has(voiceCategoryId);
-
-    if (currentCategoryRooms.text.length > 0) {
-      processed.push({
-        type: 'room_header',
-        title: 'Text Rooms',
-        categoryId: textCategoryId,
-        key: `${parentId}-text-header`,
-      });
-      if (!isTextClosed) {
-        currentCategoryRooms.text.forEach((room) =>
-          processed.push({ type: 'room', room, key: room.roomId })
-        );
-      }
-    }
-
-    if (currentCategoryRooms.voice.length > 0) {
-      processed.push({
-        type: 'room_header',
-        title: 'Call Rooms',
-        categoryId: voiceCategoryId,
-        key: `${parentId}-voice-header`,
-      });
-      if (!isCallClosed) {
-        currentCategoryRooms.voice.forEach((room) => {
-          processed.push({ type: 'room', room, key: room.roomId });
-
-          currentCategoryRooms.users.forEach((entry) => {
-            if (entry.room.roomId === room.roomId) {
-              processed.push(entry);
-            }
-          });
-        });
-      }
-    }
-
-    currentCategoryRooms = { text: [], voice: [], users: [] };
-  };
-
-  hierarchy.forEach((item) => {
-    const room = mx.getRoom(item.roomId);
-    if (!room) {
-      logger.warn(`processHierarchyForVirtualizer: Room not found for ID ${item.roomId}`);
-    }
-
-    if (room.isSpaceRoom()) {
-      addCollectedRoomsToProcessed(currentParentId);
-      currentParentId = room.roomId;
-      if (room.roomId !== spaceRoomId) {
-        const spaceCategoryId = makeSpaceNavCategoryId(spaceRoomId, room.roomId);
-        processed.push({
-          type: 'category',
-          room,
-          categoryId: spaceCategoryId,
-          key: room.roomId,
-        });
-      }
-    } else if (room.isCallRoom()) {
-      currentCategoryRooms.voice.push(room);
-      getStateEvents(room, 'org.matrix.msc3401.call.member').forEach(({ event }) => {
-        if (Object.entries(event?.content).length !== 0) {
-          if (event.origin_server_ts + event.content.expires > Date.now()) {
-            currentCategoryRooms.users.push({
-              type: 'user',
-              sender: event.sender,
-              key: event.event_id,
-              room,
-            });
-          }
-        }
-      });
-    } else if (!room.isCallRoom()) {
-      currentCategoryRooms.text.push(room);
-    } else {
-      logger.warn(`processHierarchyForVirtualizer: Room ${room.roomId} is neither text nor voice.`);
-      currentCategoryRooms.text.push(room);
-    }
-  });
-
-  addCollectedRoomsToProcessed(currentParentId);
-
-  return processed;
-};
 
 type SpaceMenuProps = {
   room: Room;
@@ -203,7 +89,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   const roomToParents = useAtomValue(roomToParentsAtom);
   const powerLevels = usePowerLevels(room);
   const { getPowerLevel, canDoAction } = usePowerLevelsAPI(powerLevels);
-  const canInvite = canDoAction('invite', mx.getUserId() ?? '');
+  const canInvite = canDoAction('invite', getPowerLevel(mx.getUserId() ?? ''));
   const openSpaceSettings = useOpenSpaceSettings();
   const { navigateRoom } = useRoomNavigate();
 
@@ -354,6 +240,7 @@ function SpaceHeader() {
       return cords;
     });
   };
+
   return (
     <>
       <PageNavHeader>
@@ -430,8 +317,7 @@ export function Space() {
     getRoom,
     useCallback(
       (parentId, roomId) => {
-        const parentSpaceCategoryId = makeSpaceNavCategoryId(space.roomId, parentId);
-        if (!closedCategories.has(parentSpaceCategoryId)) {
+        if (!closedCategories.has(makeNavCategoryId(space.roomId, parentId))) {
           return false;
         }
         const showRoomAnyway = roomToUnread.has(roomId) || roomId === selectedRoomId;
@@ -439,31 +325,14 @@ export function Space() {
       },
       [space.roomId, closedCategories, roomToUnread, selectedRoomId]
     ),
-
     useCallback(
-      (subCategoryId) => closedCategories.has(makeSpaceNavCategoryId(space.roomId, subCategoryId)),
+      (sId) => closedCategories.has(makeNavCategoryId(space.roomId, sId)),
       [closedCategories, space.roomId]
     )
   );
 
-  const callRooms = useMemo(
-    () =>
-      hierarchy
-        .map((item) => mx.getRoom(item.roomId))
-        .filter((room): room is Room => !!room && room.isCallRoom()),
-    [hierarchy, mx]
-  );
-
-  const updateTrigger = useStateEvents(callRooms, StateEvent.GroupCallMemberPrefix);
-
-  const processedHierarchy = useMemo(
-    () => processHierarchyForVirtualizer(hierarchy, mx, space.roomId, closedCategories),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [hierarchy, mx, space.roomId, closedCategories, updateTrigger]
-  );
-
   const virtualizer = useVirtualizer({
-    count: processedHierarchy.length,
+    count: hierarchy.length,
     getScrollElement: () => scrollRef.current,
     estimateSize: () => 32,
     overscan: 10,
@@ -477,12 +346,9 @@ export function Space() {
     getSpaceRoomPath(spaceIdOrAlias, getCanonicalAliasOrRoomId(mx, roomId));
 
   return (
-    <PageNav style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+    <PageNav>
       <SpaceHeader />
-      <PageNavContent
-        scrollRef={scrollRef}
-        style={{ flexGrow: 1, overflowY: 'auto', overflowX: 'hidden' }}
-      >
+      <PageNavContent scrollRef={scrollRef}>
         <Box direction="Column" gap="300">
           <NavCategory>
             <NavItem variant="Background" radii="400" aria-selected={lobbySelected}>
@@ -518,91 +384,56 @@ export function Space() {
               </NavLink>
             </NavItem>
           </NavCategory>
-        </Box>
-        <NavCategory
-          style={{
-            height: `${virtualizer.getTotalSize()}px`,
-            width: '100%',
-            position: 'relative',
-          }}
-        >
-          {virtualizer.getVirtualItems().map((vItem) => {
-            const item = processedHierarchy[vItem.index];
-            if (!item) return null;
-            const renderContent = () => {
-              switch (item.type) {
-                case 'category': {
-                  const { room, categoryId } = item;
-                  const { name } = room;
-                  const paddingTop = config?.space?.S400 ?? '1rem';
-                  return (
-                    <div style={{ paddingTop }}>
+          <NavCategory
+            style={{
+              height: virtualizer.getTotalSize(),
+              position: 'relative',
+            }}
+          >
+            {virtualizer.getVirtualItems().map((vItem) => {
+              const { roomId } = hierarchy[vItem.index] ?? {};
+              const room = mx.getRoom(roomId);
+              if (!room) return null;
+
+              if (room.isSpaceRoom()) {
+                const categoryId = makeNavCategoryId(space.roomId, roomId);
+
+                return (
+                  <VirtualTile
+                    virtualItem={vItem}
+                    key={vItem.index}
+                    ref={virtualizer.measureElement}
+                  >
+                    <div style={{ paddingTop: vItem.index === 0 ? undefined : config.space.S400 }}>
                       <NavCategoryHeader>
                         <RoomNavCategoryButton
                           data-category-id={categoryId}
                           onClick={handleCategoryClick}
                           closed={closedCategories.has(categoryId)}
                         >
-                          {name}
+                          {roomId === space.roomId ? 'Rooms' : room?.name}
                         </RoomNavCategoryButton>
                       </NavCategoryHeader>
                     </div>
-                  );
-                }
-                case 'room_header': {
-                  const { title, categoryId } = item;
-                  return (
-                    <Box>
-                      <NavCategoryHeader variant="Subtle">
-                        <RoomNavCategoryButton
-                          data-category-id={categoryId}
-                          onClick={handleCategoryClick}
-                          closed={closedCategories.has(categoryId)}
-                        >
-                          {title}
-                        </RoomNavCategoryButton>
-                      </NavCategoryHeader>
-                    </Box>
-                  );
-                }
-                case 'room': {
-                  const { room } = item;
-                  return (
-                    <Box>
-                      <RoomNavItem
-                        room={room}
-                        selected={selectedRoomId === room.roomId}
-                        showAvatar={mDirects.has(room.roomId)}
-                        direct={mDirects.has(room.roomId)}
-                        linkPath={getToLink(room.roomId)}
-                        notificationMode={getRoomNotificationMode(
-                          notificationPreferences,
-                          room.roomId
-                        )}
-                      />
-                    </Box>
-                  );
-                }
-                case 'user': {
-                  const { sender, room } = item;
-                  return (
-                    <Box style={{ paddingLeft: config.space.S200 }}>
-                      <RoomNavUser room={room} space={space} sender={sender} />
-                    </Box>
-                  );
-                }
-                default:
-                  return null;
+                  </VirtualTile>
+                );
               }
-            };
 
-            return (
-              <VirtualTile virtualItem={vItem} key={item.key} ref={virtualizer.measureElement}>
-                {renderContent()}
-              </VirtualTile>
-            );
-          })}
-        </NavCategory>
+              return (
+                <VirtualTile virtualItem={vItem} key={vItem.index} ref={virtualizer.measureElement}>
+                  <RoomNavItem
+                    room={room}
+                    selected={selectedRoomId === roomId}
+                    showAvatar={mDirects.has(roomId)}
+                    direct={mDirects.has(roomId)}
+                    linkPath={getToLink(roomId)}
+                    notificationMode={getRoomNotificationMode(notificationPreferences, room.roomId)}
+                  />
+                </VirtualTile>
+              );
+            })}
+          </NavCategory>
+        </Box>
       </PageNavContent>
       <CallNavStatus />
     </PageNav>

From f407905d73a51f835b77735d5f7663daeefb7785 Mon Sep 17 00:00:00 2001
From: Gimle Larpes <97182804+GimleLarpes@users.noreply.github.com>
Date: Fri, 27 Jun 2025 12:51:36 +0200
Subject: [PATCH 238/242] Show call room even if category is collapsed

---
 src/app/pages/client/space/Space.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index c708ef0b..36909e8b 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -77,6 +77,7 @@ import {
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { CallNavStatus } from '../../../features/room-nav/RoomCallNavStatus';
+import { useCallState } from '../call/CallProvider';
 
 type SpaceMenuProps = {
   room: Room;
@@ -299,6 +300,7 @@ export function Space() {
   const selectedRoomId = useSelectedRoom();
   const lobbySelected = useSpaceLobbySelected(spaceIdOrAlias);
   const searchSelected = useSpaceSearchSelected(spaceIdOrAlias);
+  const { isCallActive, activeCallRoomId } = useCallState();
 
   const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
 
@@ -320,10 +322,13 @@ export function Space() {
         if (!closedCategories.has(makeNavCategoryId(space.roomId, parentId))) {
           return false;
         }
-        const showRoomAnyway = roomToUnread.has(roomId) || roomId === selectedRoomId;
+        const showRoomAnyway =
+          roomToUnread.has(roomId) ||
+          roomId === selectedRoomId ||
+          (isCallActive && activeCallRoomId === roomId);
         return !showRoomAnyway;
       },
-      [space.roomId, closedCategories, roomToUnread, selectedRoomId]
+      [space.roomId, closedCategories, roomToUnread, selectedRoomId, activeCallRoomId, isCallActive]
     ),
     useCallback(
       (sId) => closedCategories.has(makeNavCategoryId(space.roomId, sId)),

From 79fab78c71d8dc51dd1d6b4ab28347a406d3bec3 Mon Sep 17 00:00:00 2001
From: Gimle Larpes <gimlelarpes@gmail.com>
Date: Sun, 29 Jun 2025 14:21:22 +0200
Subject: [PATCH 239/242] changes to RoomNavItem, RoomNavUser and add
 useCallMembers

---
 src/app/features/room-nav/RoomNavItem.tsx | 293 ++++++++++++----------
 src/app/features/room-nav/RoomNavUser.tsx | 172 ++++++++++---
 src/app/hooks/useCallMembers.ts           |  81 ++++++
 3 files changed, 388 insertions(+), 158 deletions(-)
 create mode 100644 src/app/hooks/useCallMembers.ts

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index ff6ffe05..565e49a9 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -22,7 +22,7 @@ import {
 import { useFocusWithin, useHover } from 'react-aria';
 import FocusTrap from 'focus-trap-react';
 import { useParams } from 'react-router-dom';
-import { NavItem, NavItemContent, NavItemOptions, NavLink } from '../../components/nav';
+import { NavButton, NavItem, NavItemContent, NavItemOptions, NavLink } from '../../components/nav';
 import { UnreadBadge, UnreadBadgeCenter } from '../../components/unread-badge';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
@@ -53,8 +53,10 @@ import {
 } from '../../hooks/useRoomsNotificationPreferences';
 import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
 import { useCallState } from '../../pages/client/call/CallProvider';
+import { useCallMembers } from '../../hooks/useCallMembers';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+import { RoomNavUser } from './RoomNavUser';
 
 type RoomNavItemMenuProps = {
   room: Room;
@@ -237,6 +239,7 @@ export function RoomNavItem({
     (receipt) => receipt.userId !== mx.getUserId()
   );
   const isActiveCall = isCallActive && activeCallRoomId === room.roomId;
+  const callMembers = useCallMembers(mx, room.roomId);
   const { navigateRoom } = useRoomNavigate();
   const { roomIdOrAlias: viewedRoomId } = useParams();
   const screenSize = useScreenSizeContext();
@@ -293,142 +296,176 @@ export function RoomNavItem({
   };
 
   const optionsVisible = hover || !!menuAnchor;
+  const ariaLabel = [
+    room.name,
+    room.isCallRoom()
+      ? [
+          'Call Room',
+          isActiveCall && 'Currently in Call',
+          callMembers.length && `${callMembers.length} in Call`,
+        ]
+      : 'Text Room',
+    unread?.total && `${unread.total} Messages`,
+  ]
+    .flat()
+    .filter(Boolean)
+    .join(', ');
 
   return (
-    <NavItem
-      variant="Background"
-      radii="400"
-      highlight={unread !== undefined}
-      aria-selected={selected}
-      data-hover={!!menuAnchor}
-      onContextMenu={handleContextMenu}
-      {...hoverProps}
-      {...focusWithinProps}
-    >
-      <NavItemContent onClick={handleNavItemClick}>
-        <Box as="span" grow="Yes" alignItems="Center" gap="200">
-          <Avatar size="200" radii="400">
-            {showAvatar ? (
-              <RoomAvatar
-                roomId={room.roomId}
-                src={
-                  direct
-                    ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
-                    : getRoomAvatarUrl(mx, room, 96, useAuthentication)
-                }
-                alt={room.name}
-                renderFallback={() => (
-                  <Text as="span" size="H6">
-                    {nameInitials(room.name)}
-                  </Text>
+    <Box direction="Column" grow="Yes">
+      <NavItem
+        variant="Background"
+        radii="400"
+        highlight={unread !== undefined}
+        aria-selected={selected}
+        data-hover={!!menuAnchor}
+        onContextMenu={handleContextMenu}
+        {...hoverProps}
+        {...focusWithinProps}
+      >
+        <NavButton onClick={handleNavItemClick} aria-label={ariaLabel}>
+          <NavItemContent>
+            <Box as="span" grow="Yes" alignItems="Center" gap="200">
+              <Avatar size="200" radii="400">
+                {showAvatar ? (
+                  <RoomAvatar
+                    roomId={room.roomId}
+                    src={
+                      direct
+                        ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
+                        : getRoomAvatarUrl(mx, room, 96, useAuthentication)
+                    }
+                    alt={room.name}
+                    renderFallback={() => (
+                      <Text as="span" size="H6">
+                        {nameInitials(room.name)}
+                      </Text>
+                    )}
+                  />
+                ) : (
+                  <RoomIcon
+                    style={{
+                      opacity: unread || isActiveCall ? config.opacity.P500 : config.opacity.P300,
+                    }}
+                    filled={selected || isActiveCall}
+                    size="100"
+                    joinRule={room.getJoinRule()}
+                    call={room.isCallRoom()}
+                  />
                 )}
-              />
-            ) : (
-              <RoomIcon
-                style={{
-                  opacity: unread || isActiveCall ? config.opacity.P500 : config.opacity.P300,
-                }}
-                filled={selected || isActiveCall}
-                size="100"
-                joinRule={room.getJoinRule()}
-                call={room.isCallRoom()}
-              />
-            )}
-          </Avatar>
-          <Box as="span" grow="Yes">
-            <Text
-              priority={unread || isActiveCall ? '500' : '300'}
-              as="span"
-              size="Inherit"
-              truncate
-            >
-              {room.name}
-            </Text>
-          </Box>
-          {!optionsVisible && !unread && !selected && typingMember.length > 0 && (
-            <Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>
-              <TypingIndicator size="300" disableAnimation />
-            </Badge>
-          )}
-          {!optionsVisible && unread && (
-            <UnreadBadgeCenter>
-              <UnreadBadge highlight={unread.highlight > 0} count={unread.total} />
-            </UnreadBadgeCenter>
-          )}
-          {!optionsVisible && notificationMode !== RoomNotificationMode.Unset && (
-            <Icon size="50" src={getRoomNotificationModeIcon(notificationMode)} />
-          )}
-        </Box>
-      </NavItemContent>
-      {optionsVisible && (
-        <NavItemOptions>
-          <PopOut
-            anchor={menuAnchor}
-            offset={menuAnchor?.width === 0 ? 0 : undefined}
-            alignOffset={menuAnchor?.width === 0 ? 0 : -5}
-            position="Bottom"
-            align={menuAnchor?.width === 0 ? 'Start' : 'End'}
-            content={
-              <FocusTrap
-                focusTrapOptions={{
-                  initialFocus: false,
-                  returnFocusOnDeactivate: false,
-                  onDeactivate: () => setMenuAnchor(undefined),
-                  clickOutsideDeactivates: true,
-                  isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-                  isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-                  escapeDeactivates: stopPropagation,
-                }}
-              >
-                <RoomNavItemMenu
-                  room={room}
-                  requestClose={() => setMenuAnchor(undefined)}
-                  notificationMode={notificationMode}
+              </Avatar>
+              <Box as="span" grow="Yes">
+                <Text
+                  priority={unread || isActiveCall ? '500' : '300'}
+                  as="span"
+                  size="Inherit"
+                  truncate
+                >
+                  {room.name}
+                </Text>
+              </Box>
+              {!optionsVisible && !unread && !selected && typingMember.length > 0 && (
+                <Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>
+                  <TypingIndicator size="300" disableAnimation />
+                </Badge>
+              )}
+              {!optionsVisible && unread && (
+                <UnreadBadgeCenter>
+                  <UnreadBadge highlight={unread.highlight > 0} count={unread.total} />
+                </UnreadBadgeCenter>
+              )}
+              {!optionsVisible && notificationMode !== RoomNotificationMode.Unset && (
+                <Icon
+                  size="50"
+                  src={getRoomNotificationModeIcon(notificationMode)}
+                  aria-label={notificationMode}
                 />
-              </FocusTrap>
-            }
-          >
-            {room.isCallRoom() && (
-              <TooltipProvider
+              )}
+            </Box>
+          </NavItemContent>
+          {optionsVisible && (
+            <NavItemOptions>
+              <PopOut
+                id={`menu-${room.roomId}`}
+                aria-expanded={!!menuAnchor}
+                anchor={menuAnchor}
+                offset={menuAnchor?.width === 0 ? 0 : undefined}
+                alignOffset={menuAnchor?.width === 0 ? 0 : -5}
                 position="Bottom"
-                offset={4}
-                tooltip={
-                  <Tooltip>
-                    <Text>Open Chat</Text>
-                  </Tooltip>
+                align={menuAnchor?.width === 0 ? 'Start' : 'End'}
+                content={
+                  <FocusTrap
+                    focusTrapOptions={{
+                      initialFocus: false,
+                      returnFocusOnDeactivate: false,
+                      onDeactivate: () => setMenuAnchor(undefined),
+                      clickOutsideDeactivates: true,
+                      isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                      isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                      escapeDeactivates: stopPropagation,
+                    }}
+                  >
+                    <RoomNavItemMenu
+                      room={room}
+                      requestClose={() => setMenuAnchor(undefined)}
+                      notificationMode={notificationMode}
+                    />
+                  </FocusTrap>
                 }
               >
-                {(triggerRef) => (
-                  <IconButton
-                    ref={triggerRef}
-                    data-testid="chat-button"
-                    onClick={handleChatButtonClick}
-                    aria-pressed={isChatOpen && selected}
-                    variant="Background"
-                    fill="None"
-                    size="300"
-                    radii="300"
+                {room.isCallRoom() && (
+                  <TooltipProvider
+                    position="Bottom"
+                    offset={4}
+                    tooltip={
+                      <Tooltip>
+                        <Text>Open Chat</Text>
+                      </Tooltip>
+                    }
                   >
-                    <NavLink to={linkPath}>
-                      <Icon size="50" src={Icons.Message} />
-                    </NavLink>
-                  </IconButton>
+                    {(triggerRef) => (
+                      <IconButton
+                        ref={triggerRef}
+                        data-testid="chat-button"
+                        onClick={handleChatButtonClick}
+                        aria-pressed={isChatOpen && selected}
+                        aria-label="Open Chat"
+                        variant="Background"
+                        fill="None"
+                        size="300"
+                        radii="300"
+                      >
+                        <NavLink to={linkPath}>
+                          <Icon size="50" src={Icons.Message} />
+                        </NavLink>
+                      </IconButton>
+                    )}
+                  </TooltipProvider>
                 )}
-              </TooltipProvider>
-            )}
-            <IconButton
-              onClick={handleOpenMenu}
-              aria-pressed={!!menuAnchor}
-              variant="Background"
-              fill="None"
-              size="300"
-              radii="300"
-            >
-              <Icon size="50" src={Icons.VerticalDots} />
-            </IconButton>
-          </PopOut>
-        </NavItemOptions>
+                <IconButton
+                  onClick={handleOpenMenu}
+                  aria-pressed={!!menuAnchor}
+                  aria-controls={`menu-${room.roomId}`}
+                  aria-label="More Options"
+                  variant="Background"
+                  fill="None"
+                  size="300"
+                  radii="300"
+                >
+                  <Icon size="50" src={Icons.VerticalDots} />
+                </IconButton>
+              </PopOut>
+            </NavItemOptions>
+          )}
+        </NavButton>
+      </NavItem>
+      {room.isCallRoom() && (
+        <Box direction="Column" style={{ paddingLeft: config.space.S200 }}>
+          {callMembers.map((userId) => (
+            <RoomNavUser room={room} userId={userId} />
+          ))}
+        </Box>
       )}
-    </NavItem>
+    </Box>
   );
 }
diff --git a/src/app/features/room-nav/RoomNavUser.tsx b/src/app/features/room-nav/RoomNavUser.tsx
index f72df92e..bd65ef78 100644
--- a/src/app/features/room-nav/RoomNavUser.tsx
+++ b/src/app/features/room-nav/RoomNavUser.tsx
@@ -1,51 +1,163 @@
-import { Avatar, Box, Icon, Icons, Text } from 'folds';
-import React from 'react';
+import {
+  Avatar,
+  Box,
+  config,
+  Icon,
+  IconButton,
+  Icons,
+  Text,
+  Tooltip,
+  TooltipProvider,
+} from 'folds';
+import React, { useState } from 'react';
 import { Room } from 'matrix-js-sdk';
-import { NavItem, NavItemContent } from '../../components/nav';
+import { useFocusWithin, useHover } from 'react-aria';
+import { NavItem, NavItemContent, NavItemOptions } from '../../components/nav';
 import { UserAvatar } from '../../components/user-avatar';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useRoomMembers } from '../../hooks/useRoomMembers';
+import { useCallState } from '../../pages/client/call/CallProvider';
 import { getMxIdLocalPart } from '../../utils/matrix';
-import { getMemberDisplayName } from '../../utils/room';
+import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { openProfileViewer } from '../../../client/action/navigation';
 
 type RoomNavUserProps = {
   room: Room;
-  space: Room;
-  sender: string;
+  userId: string;
 };
-export function RoomNavUser({ room, space, sender }: RoomNavUserProps) {
+export function RoomNavUser({ room, userId }: RoomNavUserProps) {
   const mx = useMatrixClient();
-  const members = useRoomMembers(mx, space.roomId);
   const useAuthentication = useMediaAuthentication();
-
-  const member = members.find((roomMember) => roomMember.userId === sender);
-  const avatarMxcUrl = member?.getMxcAvatarUrl();
+  const [navUserExpanded, setNavUserExpanded] = useState(false);
+  const [hover, setHover] = useState(false);
+  const { hoverProps } = useHover({ onHoverChange: setHover });
+  const { focusWithinProps } = useFocusWithin({
+    onFocusWithinChange: (isFocused) => {
+      setHover(isFocused);
+      if (!isFocused) setNavUserExpanded(false);
+    },
+  });
+  const { isCallActive, activeCallRoomId } = useCallState();
+  const isActiveCall = isCallActive && activeCallRoomId === room.roomId;
+  const avatarMxcUrl = getMemberAvatarMxc(room, userId);
   const avatarUrl = avatarMxcUrl
     ? mx.mxcUrlToHttp(avatarMxcUrl, 32, 32, 'crop', undefined, false, useAuthentication)
     : undefined;
-  const getName =
-    getMemberDisplayName(room, member?.userId ?? '') ??
-    getMxIdLocalPart(member?.userId ?? '') ??
-    member?.userId;
+  const getName = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
+  const isCallParticipant = isActiveCall && userId !== mx.getUserId();
+
+  const handleNavUserClick = () => {
+    if (isCallParticipant) {
+      setNavUserExpanded((prev) => !prev);
+    }
+  };
+
+  const handleClickUser = () => {
+    openProfileViewer(userId, room.roomId);
+  };
+
+  // PLACEHOLDER
+  const [userMuted, setUserMuted] = useState(false);
+  const handleToggleMute = () => {
+    setUserMuted(!userMuted);
+  };
+
+  const optionsVisible = (hover || userMuted || navUserExpanded) && isCallParticipant && false; // Disable until individual volume control and mute have been added
+  const ariaLabel = isCallParticipant
+    ? `Call Participant: ${getName}${userMuted ? ', Muted' : ''}`
+    : getName;
 
   return (
-    <NavItem variant="Background" radii="400">
-      <NavItemContent>
-        <Box as="span" grow="Yes" alignItems="Center" gap="200">
-          <Avatar size="200">
-            <UserAvatar
-              userId={member?.userId ?? ''}
-              src={avatarUrl ?? undefined}
-              alt={getName}
-              renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-            />
-          </Avatar>
-          <Text size="B400" priority="300" truncate>
-            {getName}
-          </Text>
+    <NavItem
+      tabIndex={0}
+      variant="Background"
+      radii="400"
+      style={{ paddingTop: config.space.S200, paddingBottom: config.space.S200 }}
+      {...hoverProps}
+      {...focusWithinProps}
+      aria-label={ariaLabel}
+    >
+      <NavItemContent onClick={handleNavUserClick}>
+        <Box direction="Column" grow="Yes" gap="200" justifyContent="Stretch">
+          <Box as="span" alignItems="Center" gap="200">
+            <Avatar size="200">
+              <UserAvatar
+                userId={userId}
+                src={avatarUrl ?? undefined}
+                alt={getName}
+                renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+              />
+            </Avatar>
+            <Text
+              size="B400"
+              priority="300"
+              // Set priority based on if talking
+              truncate
+            >
+              {getName}
+            </Text>
+          </Box>
+          {navUserExpanded && (
+            <Box as="span" grow="Yes" alignItems="Center" gap="200">
+              {/* Slider here, when implemented into folds */}
+              <Text>---- THIS IS A SLIDER ---</Text>
+            </Box>
+          )}
         </Box>
       </NavItemContent>
+      {optionsVisible && (
+        <NavItemOptions direction="Column" justifyContent="SpaceBetween">
+          <TooltipProvider
+            position="Bottom"
+            offset={4}
+            tooltip={
+              <Tooltip>
+                <Text>{userMuted ? 'Unmute' : 'Mute'}</Text>
+              </Tooltip>
+            }
+          >
+            {(triggerRef) => (
+              <IconButton
+                ref={triggerRef}
+                onClick={handleToggleMute}
+                aria-pressed={userMuted}
+                aria-label={userMuted ? `Unmute ${getName}` : `Mute ${getName}`}
+                variant={userMuted ? 'Critical' : 'Background'}
+                fill="None"
+                size="300"
+                radii="300"
+              >
+                <Icon size="50" src={userMuted ? Icons.VolumeMute : Icons.VolumeHigh} />
+              </IconButton>
+            )}
+          </TooltipProvider>
+          {navUserExpanded && (
+            <TooltipProvider
+              position="Bottom"
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  <Text>View Profile</Text>
+                </Tooltip>
+              }
+            >
+              {(triggerRef) => (
+                <IconButton
+                  ref={triggerRef}
+                  onClick={handleClickUser}
+                  aria-label="View Profile"
+                  variant="Background"
+                  fill="None"
+                  size="300"
+                  radii="300"
+                >
+                  <Icon size="50" src={Icons.User} />
+                </IconButton>
+              )}
+            </TooltipProvider>
+          )}
+        </NavItemOptions>
+      )}
     </NavItem>
   );
 }
diff --git a/src/app/hooks/useCallMembers.ts b/src/app/hooks/useCallMembers.ts
new file mode 100644
index 00000000..6e2e184c
--- /dev/null
+++ b/src/app/hooks/useCallMembers.ts
@@ -0,0 +1,81 @@
+/*import { MatrixClient } from 'matrix-js-sdk';
+import {
+  MatrixRTCSession,
+  MatrixRTCSessionEvent,
+} from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
+import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
+import { useEffect, useState } from 'react';
+
+export const useCallMembers = (
+  mx: MatrixClient,
+  mxr: MatrixRTCSession,
+  roomId: string
+): CallMembership[] => {
+  const [memberships, setMemberships] = useState<CallMembership[]>([]);
+
+  useEffect(() => {
+    const room = mx.getRoom(roomId);
+
+    const updateMemberships = () => {
+      if (!room?.isCallRoom()) return;
+      setMemberships(MatrixRTCSession.callMembershipsForRoom(room));
+      //setMemberships(mxr.memberships);
+      //console.log('MEMBERSHIPS:');
+      //console.log(memberships);
+    };
+
+    updateMemberships();
+
+    mxr.on(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
+    return () => {
+      mxr.removeListener(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
+    };
+  }, [mx, mxr, roomId]);
+
+  return memberships;
+};*/
+
+// TEMPORARY
+import { MatrixClient, MatrixEvent, RoomStateEvent } from 'matrix-js-sdk';
+import { useEffect, useMemo, useState } from 'react';
+import { getStateEvents } from '../utils/room';
+import { StateEvent } from '../../types/matrix/room';
+
+export const useCallMembers = (mx: MatrixClient, roomId: string): string[] => {
+  const [events, setEvents] = useState<MatrixEvent[]>([]);
+
+  useEffect(() => {
+    const room = mx.getRoom(roomId);
+
+    const updateEvents = (event?: MatrixEvent) => {
+      if (!room?.isCallRoom() || (event && event.getRoomId() !== roomId)) return;
+      setEvents(getStateEvents(room, StateEvent.GroupCallMemberPrefix));
+    };
+
+    updateEvents();
+
+    mx.on(RoomStateEvent.Events, updateEvents);
+    return () => {
+      mx.removeListener(RoomStateEvent.Events, updateEvents);
+    };
+  }, [mx, roomId]);
+
+  const participants = useMemo(
+    () =>
+      events
+        .filter((ev) => {
+          const content = ev.getContent();
+          return (
+            content &&
+            ev.getSender() &&
+            content.expires &&
+            ev.getTs() + content.expires > Date.now()
+          );
+        })
+        /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+        .map((ev) => ev.getSender()!),
+    [events]
+  );
+
+  return participants;
+};

From ca2c868624e343326e2924e5f9b682537c0f5b91 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 4 Jul 2025 22:19:19 -0500
Subject: [PATCH 240/242] Rename file, sprinkle in the magic one line for
 matrixRTCSession. and remove comment block

---
 src/app/hooks/useCallMembers.ts     | 81 -----------------------------
 src/app/hooks/useCallMemberships.ts | 28 ++++++++++
 2 files changed, 28 insertions(+), 81 deletions(-)
 delete mode 100644 src/app/hooks/useCallMembers.ts
 create mode 100644 src/app/hooks/useCallMemberships.ts

diff --git a/src/app/hooks/useCallMembers.ts b/src/app/hooks/useCallMembers.ts
deleted file mode 100644
index 6e2e184c..00000000
--- a/src/app/hooks/useCallMembers.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-/*import { MatrixClient } from 'matrix-js-sdk';
-import {
-  MatrixRTCSession,
-  MatrixRTCSessionEvent,
-} from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
-import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
-import { useEffect, useState } from 'react';
-
-export const useCallMembers = (
-  mx: MatrixClient,
-  mxr: MatrixRTCSession,
-  roomId: string
-): CallMembership[] => {
-  const [memberships, setMemberships] = useState<CallMembership[]>([]);
-
-  useEffect(() => {
-    const room = mx.getRoom(roomId);
-
-    const updateMemberships = () => {
-      if (!room?.isCallRoom()) return;
-      setMemberships(MatrixRTCSession.callMembershipsForRoom(room));
-      //setMemberships(mxr.memberships);
-      //console.log('MEMBERSHIPS:');
-      //console.log(memberships);
-    };
-
-    updateMemberships();
-
-    mxr.on(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
-    return () => {
-      mxr.removeListener(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
-    };
-  }, [mx, mxr, roomId]);
-
-  return memberships;
-};*/
-
-// TEMPORARY
-import { MatrixClient, MatrixEvent, RoomStateEvent } from 'matrix-js-sdk';
-import { useEffect, useMemo, useState } from 'react';
-import { getStateEvents } from '../utils/room';
-import { StateEvent } from '../../types/matrix/room';
-
-export const useCallMembers = (mx: MatrixClient, roomId: string): string[] => {
-  const [events, setEvents] = useState<MatrixEvent[]>([]);
-
-  useEffect(() => {
-    const room = mx.getRoom(roomId);
-
-    const updateEvents = (event?: MatrixEvent) => {
-      if (!room?.isCallRoom() || (event && event.getRoomId() !== roomId)) return;
-      setEvents(getStateEvents(room, StateEvent.GroupCallMemberPrefix));
-    };
-
-    updateEvents();
-
-    mx.on(RoomStateEvent.Events, updateEvents);
-    return () => {
-      mx.removeListener(RoomStateEvent.Events, updateEvents);
-    };
-  }, [mx, roomId]);
-
-  const participants = useMemo(
-    () =>
-      events
-        .filter((ev) => {
-          const content = ev.getContent();
-          return (
-            content &&
-            ev.getSender() &&
-            content.expires &&
-            ev.getTs() + content.expires > Date.now()
-          );
-        })
-        /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
-        .map((ev) => ev.getSender()!),
-    [events]
-  );
-
-  return participants;
-};
diff --git a/src/app/hooks/useCallMemberships.ts b/src/app/hooks/useCallMemberships.ts
new file mode 100644
index 00000000..36418e0d
--- /dev/null
+++ b/src/app/hooks/useCallMemberships.ts
@@ -0,0 +1,28 @@
+import { MatrixClient } from 'matrix-js-sdk';
+import {
+  MatrixRTCSession,
+  MatrixRTCSessionEvent,
+} from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
+import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
+import { useEffect, useState } from 'react';
+
+export const useCallMembers = (mx: MatrixClient, roomId: string): CallMembership[] => {
+  const [memberships, setMemberships] = useState<CallMembership[]>([]);
+  const room = mx.getRoom(roomId);
+  const mxr = mx.matrixRTC.getRoomSession(room);
+  useEffect(() => {
+    const updateMemberships = () => {
+      if (!room?.isCallRoom()) return;
+      setMemberships(MatrixRTCSession.callMembershipsForRoom(room));
+    };
+
+    updateMemberships();
+
+    mxr.on(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
+    return () => {
+      mxr.removeListener(MatrixRTCSessionEvent.MembershipsChanged, updateMemberships);
+    };
+  }, [mx, mxr, room, roomId]);
+
+  return memberships;
+};

From 92e24e5281a24527ce55aab64c7c392a0e870cd7 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 4 Jul 2025 22:21:31 -0500
Subject: [PATCH 241/242] swap userId to callMembership as a prop and add a
 nullchecked userId that uses the membership sender

---
 src/app/features/room-nav/RoomNavUser.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/features/room-nav/RoomNavUser.tsx b/src/app/features/room-nav/RoomNavUser.tsx
index bd65ef78..55a95c15 100644
--- a/src/app/features/room-nav/RoomNavUser.tsx
+++ b/src/app/features/room-nav/RoomNavUser.tsx
@@ -12,6 +12,7 @@ import {
 import React, { useState } from 'react';
 import { Room } from 'matrix-js-sdk';
 import { useFocusWithin, useHover } from 'react-aria';
+import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
 import { NavItem, NavItemContent, NavItemOptions } from '../../components/nav';
 import { UserAvatar } from '../../components/user-avatar';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
@@ -23,9 +24,9 @@ import { openProfileViewer } from '../../../client/action/navigation';
 
 type RoomNavUserProps = {
   room: Room;
-  userId: string;
+  callMembership: CallMembership;
 };
-export function RoomNavUser({ room, userId }: RoomNavUserProps) {
+export function RoomNavUser({ room, callMembership }: RoomNavUserProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
   const [navUserExpanded, setNavUserExpanded] = useState(false);
@@ -39,11 +40,12 @@ export function RoomNavUser({ room, userId }: RoomNavUserProps) {
   });
   const { isCallActive, activeCallRoomId } = useCallState();
   const isActiveCall = isCallActive && activeCallRoomId === room.roomId;
+  const userId = callMembership.sender ?? '';
   const avatarMxcUrl = getMemberAvatarMxc(room, userId);
   const avatarUrl = avatarMxcUrl
     ? mx.mxcUrlToHttp(avatarMxcUrl, 32, 32, 'crop', undefined, false, useAuthentication)
     : undefined;
-  const getName = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
+  const getName = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId);
   const isCallParticipant = isActiveCall && userId !== mx.getUserId();
 
   const handleNavUserClick = () => {

From 5a25da4415f61c9e7c0ee29108916ad7ef6b29d3 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Fri, 4 Jul 2025 22:21:53 -0500
Subject: [PATCH 242/242] update references to use callMembership instead

---
 src/app/features/room-nav/RoomNavItem.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 565e49a9..b666c48b 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -53,7 +53,7 @@ import {
 } from '../../hooks/useRoomsNotificationPreferences';
 import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
 import { useCallState } from '../../pages/client/call/CallProvider';
-import { useCallMembers } from '../../hooks/useCallMembers';
+import { useCallMembers } from '../../hooks/useCallMemberships';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { RoomNavUser } from './RoomNavUser';
@@ -239,7 +239,7 @@ export function RoomNavItem({
     (receipt) => receipt.userId !== mx.getUserId()
   );
   const isActiveCall = isCallActive && activeCallRoomId === room.roomId;
-  const callMembers = useCallMembers(mx, room.roomId);
+  const callMemberships = useCallMembers(mx, room.roomId);
   const { navigateRoom } = useRoomNavigate();
   const { roomIdOrAlias: viewedRoomId } = useParams();
   const screenSize = useScreenSizeContext();
@@ -302,7 +302,7 @@ export function RoomNavItem({
       ? [
           'Call Room',
           isActiveCall && 'Currently in Call',
-          callMembers.length && `${callMembers.length} in Call`,
+          callMemberships.length && `${callMemberships.length} in Call`,
         ]
       : 'Text Room',
     unread?.total && `${unread.total} Messages`,
@@ -461,8 +461,8 @@ export function RoomNavItem({
       </NavItem>
       {room.isCallRoom() && (
         <Box direction="Column" style={{ paddingLeft: config.space.S200 }}>
-          {callMembers.map((userId) => (
-            <RoomNavUser room={room} userId={userId} />
+          {callMemberships.map((callMembership) => (
+            <RoomNavUser room={room} callMembership={callMembership} />
           ))}
         </Box>
       )}