Way to much fixes and improvements

UI/Base/Combine.ts

@@ -2,14 +2,17 @@ import {UIElement} from "../UIElement";
 import Translations from "../i18n/Translations";
 
 export default class Combine extends UIElement {
-    private uiElements: (string | UIElement)[];
-    private className: string = undefined;
-    private clas: string = undefined;
+    private readonly uiElements: (string | UIElement)[];
+    private readonly className: string = undefined;
 
     constructor(uiElements: (string | UIElement)[], className: string = undefined) {
         super(undefined);
+        this.dumbMode = false;
         this.className = className;
         this.uiElements = uiElements;
+        if (className) {
+            console.error("Deprecated used of className")
+        }
     }
 
     InnerRender(): string {

UI/Base/PageSplit.ts

@@ -0,0 +1,20 @@
+import {UIElement} from "../UIElement";
+
+export default class PageSplit extends UIElement{
+    private _left: UIElement;
+    private _right: UIElement;
+    private _leftPercentage: number;
+    
+    constructor(left: UIElement, right:UIElement,
+                leftPercentage: number = 50) {
+        super();
+        this._left = left;
+        this._right = right;
+        this._leftPercentage = leftPercentage;
+    }
+    
+    InnerRender(): string {
+        return `<span class="page-split" style="height: min-content"><span style="width:${this._leftPercentage}%">${this._left.Render()}</span><span style="width:${100-this._leftPercentage}">${this._right.Render()}</span></span>`;
+    }
+    
+}

UI/Base/SubtleButton.ts

@@ -4,9 +4,9 @@ import Combine from "./Combine";
 
 
 export class SubtleButton extends UIElement{
-    private imageUrl: string;
-    private message: UIElement;
-    private linkTo: { url: string, newTab?: boolean } = undefined;
+    private readonly imageUrl: string;
+    private readonly message: UIElement;
+    private readonly linkTo: { url: string, newTab?: boolean } = undefined;
 
     constructor(imageUrl: string, message: string | UIElement, linkTo: { url: string, newTab?: boolean } = undefined) {
         super(undefined);
@@ -18,7 +18,7 @@ export class SubtleButton extends UIElement{
 
     InnerRender(): string {
         
-        if(this.message.IsEmpty()){
+        if(this.message !== null && this.message.IsEmpty()){
             return "";
         }
 
@@ -26,7 +26,7 @@ export class SubtleButton extends UIElement{
             return new Combine([
                 `<a class="subtle-button" href="${this.linkTo.url}" ${this.linkTo.newTab ? 'target="_blank"' : ""}>`,
                 this.imageUrl !== undefined ? `<img src='${this.imageUrl}'>` : "",
-                this.message,
+                this.message ?? "",
                 '</a>'
             ]).Render();
         }
@@ -34,7 +34,7 @@ export class SubtleButton extends UIElement{
         return new Combine([
             '<span class="subtle-button">',
             this.imageUrl !== undefined ? `<img src='${this.imageUrl}'>` : "",
-            this.message,
+            this.message ?? "",
             '</span>'
         ]).Render();
     }

UI/Base/TabbedComponent.ts

@@ -7,8 +7,8 @@ export class TabbedComponent extends UIElement {
     private headers: UIElement[] = [];
     private content: UIElement[] = [];
 
-    constructor(elements: { header: UIElement | string, content: UIElement | string }[], openedTab : UIEventSource<number> = new UIEventSource<number>(0)) {
-        super(openedTab);
+    constructor(elements: { header: UIElement | string, content: UIElement | string }[], openedTab: (UIEventSource<number> | number) = 0) {
+        super(typeof (openedTab) === "number" ? new UIEventSource(openedTab) : (openedTab ?? new UIEventSource<number>(0)));
         const self = this;
         for (let i = 0; i < elements.length; i++) {
             let element = elements[i];