Fixed some modal flaws (will break because of ts inter op which hasn't been commited)

shared/js/ui/react-elements/external-modal/PopoutEntrypoint.ts

@@ -75,7 +75,7 @@ loader.register_task(Stage.JAVASCRIPT_INITIALIZING, {
                 throw "missing handler";
             }
 
-            modalClass = await registeredModal.classLoader();
+            modalClass = (await registeredModal.classLoader()).default;
         } catch(error) {
             loader.critical_error("Failed to load modal", "Lookup the console for more detail");
             console.error("Failed to load modal %s: %o", modalTarget, error);

shared/js/ui/react-elements/internal-modal/Controller.ts

@@ -50,8 +50,7 @@ export class InternalModalController implements ModalController {
         this.refModal = React.createRef();
         this.domElement = document.createElement("div");
 
-        this.modalInstance = new (await this.modalType.classLoader())(...this.constructorArguments);
+        this.modalInstance = new (await this.modalType.classLoader()).default(...this.constructorArguments);
-        console.error(this.modalInstance);
         const element = React.createElement(InternalModalRenderer, {
             ref: this.refModal,
             modal: this.modalInstance,

shared/js/ui/react-elements/internal-modal/Modal.scss

@@ -141,6 +141,7 @@ html:root {
         justify-content: stretch;
 
         padding: .25em;
+        @include user-select(none);
 
         .icon, .button {
             flex-grow: 0;
@@ -155,6 +156,7 @@ html:root {
             border-radius: .2em;
 
             cursor: pointer;
+            display: flex;
 
             -webkit-app-region: no-drag;
             pointer-events: all;

shared/js/ui/react-elements/internal-modal/Renderer.tsx

@@ -26,7 +26,7 @@ export const InternalModalContentRenderer = React.memo((props: {
         <div className={cssStyle.content + " " + props.containerClass} ref={props.refContent}>
             <div className={cssStyle.header + " " + props.headerClass}>
                 <div className={cssStyle.icon}>
-                    <img src="img/favicon/teacup.png"  alt={tr("Modal - Icon")} />
+                    <img src="img/favicon/teacup.png"  alt={tr("Modal - Icon")} draggable={false} />
                 </div>
                 <div className={cssStyle.title + " " + props.headerTitleClass}>
                     <ErrorBoundary>

shared/js/ui/react-elements/modal/Definitions.ts

@@ -8,6 +8,7 @@ import {InviteUiEvents, InviteUiVariables} from "tc-shared/ui/modal/invite/Defin
 import {ReactElement} from "react";
 import * as React from "react";
 import {IpcVariableDescriptor} from "tc-shared/ui/utils/IpcVariable";
+import {ModalBookmarkEvents, ModalBookmarkVariables} from "tc-shared/ui/modal/bookmarks/Definitions";
 
 export type ModalType = "error" | "warning" | "info" | "none";
 export type ModalRenderType = "page" | "dialog";
@@ -132,5 +133,9 @@ export interface ModalConstructorArguments {
         /* events */ IpcRegistryDescription<InviteUiEvents>,
         /* variables */ IpcVariableDescriptor<InviteUiVariables>,
         /* serverName */ string
+    ],
+    "modal-bookmarks": [
+        /* events */ IpcRegistryDescription<ModalBookmarkEvents>,
+        /* variables */ IpcVariableDescriptor<ModalBookmarkVariables>,
     ]
 }

shared/js/ui/react-elements/modal/Registry.ts

@@ -3,7 +3,7 @@ import {ModalConstructorArguments} from "tc-shared/ui/react-elements/modal/Defin
 
 export interface RegisteredModal<T extends keyof ModalConstructorArguments> {
     modalId: T,
-    classLoader: () => Promise<new (...args: ModalConstructorArguments[T]) => AbstractModal>,
+    classLoader: () => Promise<{ default: new (...args: ModalConstructorArguments[T]) => AbstractModal }>,
     popoutSupported: boolean
 }
 
@@ -73,3 +73,9 @@ registerModal({
     popoutSupported: true
 });
 
+registerModal({
+    modalId: "modal-bookmarks",
+    classLoader: async () => await import("tc-shared/ui/modal/bookmarks/Renderer"),
+    popoutSupported: true
+});
+

shared/js/ui/react-elements/modal/index.ts

@@ -22,7 +22,7 @@ export function spawnReactModal<ModalClass extends InternalModal>(modalClass: ne
     return new InternalModalController({
         popoutSupported: false,
         modalId: "__internal__unregistered",
-        classLoader: async () => modalClass
+        classLoader: async () => ({ default: modalClass })
     }, args);
 }