Added basic sesh list rendering to PM panel UX

www/css/panel/pm.css

@@ -22,6 +22,8 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
 #pm-panel-sesh-list-container{
     flex: 1;
     max-width: 10em;
+    width: calc(100% - 1.25em);
+    margin-left: 0.25em;
 }
 
 #pm-panel-sesh-container{
@@ -33,11 +35,11 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
 }
 
 #pm-panel-start-sesh{
-    width: calc(100% - 1.25em);
-    margin-left: 0.25em;
     padding: 0 0.5em;
     text-wrap: nowrap;
     display: flex;
+    font-size: 1.2em;
+    font-weight: bold;
 }
 
 #pm-panel-start-sesh span{
@@ -52,3 +54,15 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
 #pm-panel-sesh-control-div{
     margin: 0.5em;
 }
+
+div.pm-panel-sesh-list-entry{
+    padding: 0 0.5em;
+    display: flex;
+    flex-direction: row;
+}
+
+div.pm-panel-sesh-list-entry, div.pm-panel-sesh-list-entry p{
+    margin: 0;
+    text-wrap: nowrap;
+    text-align: center;
+}

www/css/theme/movie-night.css

@@ -627,6 +627,11 @@ div.archived p{
     border-bottom: 1px solid var(--accent0);
 }
 
+
+div.pm-panel-sesh-list-entry{
+    border-bottom: 1px solid var(--accent0);
+}
+
 /* altcha theming*/
 div.altcha{
     box-shadow: 4px 4px 1px var(--bg1-alt0) inset;

www/js/channel/panels/pmPanel.js

@@ -26,13 +26,26 @@ class pmPanel extends panelObj{
      */
     constructor(client, panelDocument){
         super(client, "Private Messaging", "/panel/pm", panelDocument);
+
+        this.defineListeners();
     }
 
     closer(){
     }
 
     docSwitch(){
+        this.seshList = this.panelDocument.querySelector('#pm-panel-sesh-list');
+
         this.setupInput();
+
+        this.renderSeshList();
+    }
+
+    /**
+     * Defines network related event listeners
+     */
+    defineListeners(){
+
     }
 
     /**
@@ -40,4 +53,36 @@ class pmPanel extends panelObj{
      */
     setupInput(){
     }
+
+    /**
+     * Render out current sesh array to sesh list UI
+     */
+    renderSeshList(){
+        //For each session tracked by the pmHandler
+        for(const sesh of this.client.pmHandler.seshList){
+            this.renderSeshListEntry(sesh);
+        }
+    }
+
+    /**
+     * Renders out a given messaging sesh to the sesh list UI
+     */
+    renderSeshListEntry(sesh){
+        //Create container div
+        const entryDiv = document.createElement('div');
+        //Set conatiner div classes
+        entryDiv.classList.add('pm-panel-sesh-list-entry','interactive');
+
+
+        //Create sesh label
+        const seshLabel = document.createElement('p');
+        //Create human-readable label out of members array
+        seshLabel.textContent = utils.unescapeEntities(sesh.recipients.sort().join(', '));
+
+        //append sesh label to entry div
+        entryDiv.appendChild(seshLabel);
+
+        //Append entry div to sesh list
+        this.seshList.appendChild(entryDiv);
+    }
 }