added slider and some ui fixes

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

@@ -14,8 +14,12 @@ session-list-item.selected {
     background-color: lighten(@primary-interaction-highlight-white, 30%);
 }
 
+session-list-item.selected .slider-wrap {
+    display: block;
+}
+
 .session-list-item-session-id::before {
-    content: "Session: ";
+    content: "";
 }
 
 .session-list-item-timestamp::before {
@@ -25,6 +29,7 @@ session-list-item.selected {
 .session-list-item-timestamp {
     font-size: 12px;
     opacity: 0.9;
+    padding-left: 3px;
 }
 
 .session-list-item-session-id {
@@ -32,11 +37,24 @@ session-list-item.selected {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    margin-bottom: 3px;
+}
+
+.session-list-item-session-id > span {
+    display: inline-block;
+    font-size: 9px;
+    padding: 2px 4px;
+    background-color: @editor-bg-white;
+    border: 1px solid;
+    border-color: darken(@editor-bg-white, 10%);
+    border-radius: 3px;
+    opacity: 0.7;
 }
 
 .session-list-item-number-of-changes {
     font-size: 12px;
     opacity: 0.6;
+    padding-left: 3px;
 }
 
 .session-list-item-number-of-changes::before {
@@ -45,7 +63,54 @@ session-list-item.selected {
     z-index: 0;
 }
 
-@media (prefers-color-scheme: dark) {
+.slider-wrap {
+    display: none;
+    margin-top: 3px;
+}
+
+.slider-wrap input {
+    width: 100%; /* Width of the outside container */
+  }
+  
+  /* The slider itself */
+  .slider-wrap input {
+    -webkit-appearance: none;  /* Override default CSS styles */
+    appearance: none;
+    width: 100%; /* Full-width */
+    height: 25px; /* Specified height */
+    background: @editor-bg-white; /* Grey background */
+    outline: none; /* Remove outline */
+    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
+    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
+    transition: opacity .2s;
+    border-radius: 3px;
+  }
+  
+  /* Mouse-over effects */
+  .slider-wrap input:hover {
+    opacity: 1; /* Fully shown on mouse-over */
+  }
+  
+  /* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
+  .slider-wrap input::-webkit-slider-thumb {
+    -webkit-appearance: none; /* Override default look */
+    appearance: none;
+    width: 25px; /* Set a specific slider handle width */
+    height: 25px; /* Slider handle height */
+    background: @primary-interaction-highlight-white; /* Green background */
+    cursor: pointer; /* Cursor on hover */
+    border-radius: 3px;
+  }
+  
+  .slider-wrap input::-moz-range-thumb {
+    width: 25px; /* Set a specific slider handle width */
+    height: 25px; /* Slider handle height */
+    background: @primary-interaction-highlight-white; /* Green background */
+    cursor: pointer; /* Cursor on hover */
+    border-radius: 3px;
+  }
+
+  @media (prefers-color-scheme: dark) {
     session-list-item {
         border-color: @primary-bg-color-dark;
         color: @primary-text-color-dark;
@@ -54,4 +119,13 @@ session-list-item.selected {
     session-list-item.selected {
         background-color: @primary-interaction-highlight-dark;
     }
+
+    .slider-wrap input { 
+        background: @editor-bg-dark; /* Grey background */
+    }
+
+    .session-list-item-session-id > span {
+        background-color: @editor-bg-dark;
+        border-color: lighten(@editor-bg-dark, 10%);
+    }
 }