feat(widgets): open a widget in its own window (#205)
CI / Build & Quality Checks (pull_request) Successful in 3m34s
CI / Trigger Desktop Build (pull_request) Skipped
CI / Docker image build & smoke test (pull_request) Skipped
CI / Secret scan (gitleaks) (pull_request) Successful in 7s
CI / Playwright smoke (e2e) (pull_request) Successful in 17m37s

Each widget in the Widgets panel (and the open widget's header) gets an
"Open in a new window" button, so a pad or board can sit beside the chat.
It opens the same filled-in URL the frame uses (widgetCompleteUrl, now
shared) with noopener,noreferrer, standalone as in Element. Only
cross-origin https URLs get the button: room state can carry anything,
e.g. a script URL from another client.

Refs #205

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5
This commit is contained in:
Lotus CI
2026-10-20 20:17:52 -04:00
co-authored by Claude Opus 5.5
parent ccbafdb147
commit c3f897b6d1
4 changed files with 86 additions and 9 deletions
@@ -1,8 +1,10 @@
import type { MatrixClient } from 'matrix-js-sdk';
import {
Capability,
EventDirection,
EventKind,
MatrixCapabilities,
type Widget,
WidgetEventCapability,
} from 'matrix-widget-api';
@@ -48,6 +50,29 @@ export const isWidgetUrlSafe = (completeUrl: string, appOrigin: string): boolean
}
};
/** The widget's URL with its template variables filled in for this viewer. */
export const widgetCompleteUrl = (widget: Widget, mx: MatrixClient, roomId: string): string =>
widget.getCompleteUrl({
currentUserId: mx.getSafeUserId(),
widgetRoomId: roomId,
deviceId: mx.getDeviceId() ?? undefined,
baseUrl: mx.baseUrl,
});
/**
* [Gitea #205] The URL to open a widget in its own window, or null when it
* mustn't be opened: only cross-origin https (room state can carry anything,
* e.g. a `javascript:` URL from another client, whose origin is "null").
*/
export const widgetPopoutUrl = (completeUrl: string, appOrigin: string): string | null => {
try {
const u = new URL(completeUrl);
return u.protocol === 'https:' && u.origin !== appOrigin ? u.href : null;
} catch {
return null;
}
};
export const generateWidgetId = (): string =>
`lotus_${Date.now()}_${Math.random().toString(36).slice(2, 10)}`;