web/widget: implement handling close event

web/src/ui/rightpanel/RightPanel.tsx

@@ -16,7 +16,7 @@
 import type { IWidget } from "matrix-widget-api"
 import { JSX, use } from "react"
 import type { UserID } from "@/api/types"
-import MainScreenContext from "../MainScreenContext.ts"
+import MainScreenContext, { MainScreenContextFields } from "../MainScreenContext.ts"
 import ErrorBoundary from "../util/ErrorBoundary.tsx"
 import ElementCall from "../widget/ElementCall.tsx"
 import LazyWidget from "../widget/LazyWidget.tsx"
@@ -63,7 +63,7 @@ function getTitle(props: RightPanelProps): string {
 	}
 }
 
-function renderRightPanelContent(props: RightPanelProps): JSX.Element | null {
+function renderRightPanelContent(props: RightPanelProps, mainScreen: MainScreenContextFields): JSX.Element | null {
 	switch (props.type) {
 	case "pinned-messages":
 		return <PinnedMessages />
@@ -72,9 +72,9 @@ function renderRightPanelContent(props: RightPanelProps): JSX.Element | null {
 	case "widgets":
 		return <WidgetList />
 	case "element-call":
-		return <ElementCall />
+		return <ElementCall onClose={mainScreen.closeRightPanel} />
 	case "widget":
-		return <LazyWidget info={props.info} />
+		return <LazyWidget info={props.info} onClose={mainScreen.closeRightPanel} />
 	case "user":
 		return <UserInfo userID={props.userID} />
 	}
@@ -104,7 +104,7 @@ const RightPanel = (props: RightPanelProps) => {
 		</div>
 		<div className={`right-panel-content ${props.type}`}>
 			<ErrorBoundary thing="right panel content">
-				{renderRightPanelContent(props)}
+				{renderRightPanelContent(props, mainScreen)}
 			</ErrorBoundary>
 		</div>
 	</div>

web/src/ui/widget/ElementCall.tsx

@@ -33,7 +33,7 @@ const elementCallParams = new URLSearchParams({
 	appPrompt: "false",
 }).toString().replaceAll("%24", "$")
 
-const ElementCall = () => {
+const ElementCall = ({ onClose }: { onClose?: () => void }) => {
 	const room = use(RoomContext)?.store ?? null
 	const client = use(ClientContext)!
 	const baseURL = usePreference(client.store, room, "element_call_base_url")
@@ -51,7 +51,7 @@ const ElementCall = () => {
 	if (!room || !client) {
 		return null
 	}
-	return <LazyWidget info={widgetInfo} />
+	return <LazyWidget info={widgetInfo} onClose={onClose} />
 }
 
 export default ElementCall

web/src/ui/widget/LazyWidget.tsx

@@ -28,9 +28,10 @@ const widgetLoader = <div className="widget-container widget-loading">
 
 export interface LazyWidgetProps {
 	info: IWidget
+	onClose?: () => void
 }
 
-const LazyWidget = ({ info }: LazyWidgetProps) => {
+const LazyWidget = ({ info, onClose }: LazyWidgetProps) => {
 	const room = use(RoomContext)?.store
 	const client = use(ClientContext)
 	if (!room || !client) {
@@ -38,7 +39,7 @@ const LazyWidget = ({ info }: LazyWidgetProps) => {
 	}
 	return (
 		<Suspense fallback={widgetLoader}>
-			<Widget info={info} room={room} client={client} />
+			<Widget info={info} room={room} client={client} onClose={onClose} />
 		</Suspense>
 	)
 }

web/src/ui/widget/widget.tsx

@@ -27,6 +27,7 @@ export interface WidgetProps {
 	info: IWidget
 	room: RoomStateStore
 	client: Client
+	onClose?: () => void
 }
 
 // TODO remove this after widgets start using a parameter for it
@@ -68,7 +69,7 @@ class WidgetListenerImpl implements WidgetListener {
 	}
 }
 
-const ReactWidget = ({ room, info, client }: WidgetProps) => {
+const ReactWidget = ({ room, info, client, onClose }: WidgetProps) => {
 	const wrappedWidget = new WrappedWidget(info)
 	const driver = new GomuksWidgetDriver(client, room)
 	const widgetURL = addLegacyParams(wrappedWidget.getCompleteUrl({
@@ -92,13 +93,16 @@ const ReactWidget = ({ room, info, client }: WidgetProps) => {
 			evt.preventDefault()
 			clientAPI.transport.reply(evt.detail, {})
 		}
+		const closeWidget = (evt: CustomEvent) => {
+			noopReply(evt)
+			onClose?.()
+		}
 		clientAPI.on("action:io.element.join", noopReply)
 		clientAPI.on("action:im.vector.hangup", noopReply)
 		clientAPI.on("action:io.element.device_mute", noopReply)
 		clientAPI.on("action:io.element.tile_layout", noopReply)
 		clientAPI.on("action:io.element.spotlight_layout", noopReply)
-		// TODO handle this one?
-		clientAPI.on("action:io.element.close", noopReply)
+		clientAPI.on("action:io.element.close", closeWidget)
 		clientAPI.on("action:set_always_on_screen", noopReply)
 		const removeListener = client.addWidgetListener(new WidgetListenerImpl(clientAPI))