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

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,10 +36,22 @@ session-list-item.selected {
 
 .session-list-item-number-of-changes {
     font-size: 12px;
+    opacity: 0.6;
 }
 
 .session-list-item-number-of-changes::before {
     content: "Number of changes: ";
     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();
         }
     }