fixed some bugs, dark/white mode fix and sessionid in url

codeeditor-app/boot.ts

@@ -41,7 +41,7 @@ if (isSessionPage()) {
         var sessionMenuItem = <HTMLElement>document.querySelector("window-control-connector[target='.menu-container']");
         if (menuEle) {
             menuEle.style.display = "block";
-            sessionMenuItem.style.display = "inline";
+            sessionMenuItem.style.display = "inline-block";
             containers.style.display = "none";
             outputframe.style.display = "none";
         }

codeeditor-app/elements/session-list-item/session-list-item.less

@@ -1,20 +1,32 @@
+@import url('../../../shared/theme.less');
+
 session-list-item {
-    color: white;
+    color: @primary-text-color-white;
     padding: 10px;
     display: block;
     position: relative;
-    border-bottom: 1px solid grey;
+    border-bottom: 1px solid;
+    border-color: @primary-bg-color-white;
     cursor: pointer;
 }
 
 session-list-item.selected {
-    background-color: #1e1e1e;
+    background-color: lighten(@primary-interaction-highlight-white, 30%);
 }
 
 .session-list-item-session-id::before {
     content: "Session: ";
 }
 
+.session-list-item-timestamp::before {
+    content: "Created: ";
+}
+
+.session-list-item-timestamp {
+    font-size: 12px;
+    opacity: 0.9;
+}
+
 .session-list-item-session-id {
     display: block;
     white-space: nowrap;
@@ -24,6 +36,7 @@ session-list-item.selected {
 
 .session-list-item-number-of-changes {
     font-size: 12px;
+    opacity: 0.6;
 }
 
 .session-list-item-number-of-changes::before {
@@ -31,3 +44,14 @@ session-list-item.selected {
     position: relative;
     z-index: 0;
 }
+
+@media (prefers-color-scheme: dark) {
+    session-list-item {
+        border-color: @primary-bg-color-dark;
+        color: @primary-text-color-dark;
+    }
+
+    session-list-item.selected {
+        background-color: @primary-interaction-highlight-dark;
+    }
+}

codeeditor-app/elements/session-list-item/session-list-item.ts

@@ -2,6 +2,9 @@ import { BaseElement } from '../../../shared/_base';
 import { CodeEditorContainer } from '../code-editor-container/code-editor-container';
 import './session-list-item.less';
 import * as sessionApi from '../../../shared/session-api';
+import { formatDate } from '../../../shared/date-helper';
+import { navigateTo } from '../../../shared/navigation';
+import { getSessionDetailsId } from '../../../shared/page';
 
 export class SessionListItem extends BaseElement {
     onInit(): void {
@@ -12,6 +15,13 @@ export class SessionListItem extends BaseElement {
             this.appendChild(sessionIdEle);
         }
 
+        if (this.hasAttribute("timestamp")) {
+            var timestampEle = document.createElement("div");
+            timestampEle.classList.add("session-list-item-timestamp");
+            timestampEle.innerHTML = formatDate(this.getAttribute("timestamp")?.toString() ?? "");
+            this.appendChild(timestampEle);
+        }
+
         if (this.hasAttribute("numberOfChanges")) {
             var numberOfChangesEle = document.createElement("div");
             numberOfChangesEle.classList.add("session-list-item-number-of-changes");
@@ -22,6 +32,10 @@ export class SessionListItem extends BaseElement {
         this.addEventListener("click", (evt) => {
             this.itemClicked();
         });
+
+        if (this.isUrlSelected()) {
+            this.itemClicked();
+        }
     }
 
     private intervalHandle: number | null = null;
@@ -34,11 +48,17 @@ export class SessionListItem extends BaseElement {
         }
     }
 
+    isUrlSelected(): boolean {
+        var selectedId = getSessionDetailsId();
+        return selectedId === this.getAttribute("sessionId")?.toString()?? "";
+    }
+
     startUpdate() {
         this.stopUpdate();
 
         this.classList.add("selected");
 
+        this.updateInputs();
         this.intervalHandle = window.setInterval(this.updateInputs.bind(this), 1000);
     }
 
@@ -86,6 +106,8 @@ export class SessionListItem extends BaseElement {
             containers.style.display = "block";
             outputframe.style.display = "block";
 
+            navigateTo("/sessions/" + this.getAttribute("sessionId")?.toString()?? "");
+
             var children = this.parentElement?.children;
 
             if (children) {
@@ -101,7 +123,6 @@ export class SessionListItem extends BaseElement {
             }
         }
         else {
-            console.log("WOULD STOP!");
             this.stopUpdate();
         }
     }

codeeditor-app/elements/session-list/session-list.ts

@@ -23,8 +23,6 @@ export class SessionList extends BaseElement {
         sessionApi.getSessions((sessions) => {
             var loadingSpinner = this.getElementsByTagName("loading-spinner")[0];
 
-            console.log(loadingSpinner);
-
             if (loadingSpinner) {
                 this.removeChild(loadingSpinner);
             }
@@ -36,6 +34,7 @@ export class SessionList extends BaseElement {
                     var ele = document.createElement("session-list-item");
                     ele.setAttribute("sessionId", session.id);
                     ele.setAttribute("numberOfChanges", session.numberOfChanges);
+                    ele.setAttribute("timestamp", session.timestamp);
 
                     this.appendChild(ele);
                 }

package.json

@@ -13,33 +13,33 @@
   "dependencies": {
   },
   "devDependencies": {
-		"monaco-editor-core": "0.33.0",
+		"monaco-editor-core": "0.38.0",
-    "monaco-editor": "^0.33.0",
+    "monaco-editor": "0.38.0",
-    "@types/node": "17.0.21",
+    "@types/node": "20.2.5",
-    "@babel/core": "7.17.8",
+    "@babel/core": "7.22.1",
-    "@webcomponents/custom-elements": "1.5.0",
+    "@webcomponents/custom-elements": "1.6.0",
-    "babel-loader": "8.2.3",
+    "babel-loader": "9.1.2",
     "babel-plugin-transform-custom-element-classes": "0.1.0",
     "babel-preset-env": "1.7.0",
-    "copy-webpack-plugin": "^10.2.4",
+    "copy-webpack-plugin": "11.0.0",
-    "css-loader": "6.7.1",
+    "css-loader": "6.8.1",
     "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "6.2.0",
     "gulp": "4.0.2",
-    "html-loader": "3.1.0",
+    "html-loader": "4.2.0",
-    "less": "4.1.2",
+    "less": "4.1.3",
-    "less-loader": "10.2.0",
+    "less-loader": "11.1.1",
-    "npm": "8.5.5",
+    "npm": "9.6.7",
-    "open": "8.4.0",
+    "open": "9.1.0",
     "path": "0.12.7",
     "replace-in-file-webpack-plugin": "1.0.6",
-    "style-loader": "3.3.1",
+    "style-loader": "3.3.3",
-    "ts-loader": "9.2.8",
+    "ts-loader": "9.4.3",
-    "typescript": "4.6.2",
+    "typescript": "5.0.4",
-    "webpack": "5.70.0",
+    "webpack": "5.84.1",
-    "webpack-cli": "4.9.2",
+    "webpack-cli": "5.1.1",
-    "webpack-dev-server": "4.7.4",
+    "webpack-dev-server": "4.15.0",
-    "webpack-merge": "5.8.0",
+    "webpack-merge": "5.9.0",
     "raw-loader": "4.0.2",
     "monaco-editor-webpack-plugin": "7.0.1"
   }

shared/date-helper.ts

@@ -0,0 +1,13 @@
+export function formatDate(date: string): string {
+    if (date == "") {
+        return "No date";
+    }
+    var d = new Date(date);
+    return pad(d.getDate()) + "-" + pad(d.getMonth() + 1) + "-" + d.getFullYear() + " " + pad(d.getHours()) + ":" + pad(d.getMinutes());
+}
+
+function pad(value: number): string {
+    var strVal = value.toString();
+
+    return strVal.length > 1 ? strVal : "0" + strVal;
+}

shared/navigation.ts

@@ -0,0 +1,3 @@
+export function navigateTo(url: string) {
+    window.history.pushState("", "", url);
+}

shared/page.ts

@@ -5,3 +5,11 @@ export function isSessionPage() {
 export function isRootPage() {
     return document.URL.indexOf("/sessions") == -1;
 }
+
+export function isSessionDetailPage() {
+    return document.URL.indexOf("/sessions") != -1 && document.URL.length > 40;
+}
+
+export function getSessionDetailsId() {
+    return document.URL.length > 40 ? document.URL.substring(document.URL.indexOf("/sessions/") + 10) : "";
+}

shared/url-helpers.ts

@@ -8,7 +8,7 @@ export function IsLocalhost(): boolean {
 
 export function GetOutputFrameUrl(): string {
     if (IsLocalhost()) {
-        return "http://127.0.0.1:8021/";
+        return "http://localhost:8021/";
     }
     else {
         return "https://outputframe.davidmeincke.dk/";