Finished up work on advanced formatted private messaging.

www/css/channel.css

@@ -162,18 +162,18 @@ p.panel-head-element{
     height: 1.5em;
 }
 
-.chat-entry{
+.chat-entry, .pm-panel-sesh-entry{
     display: flex;
     align-content: center;
     font-size: 10pt;
 }
 
-.chat-entry-username{
+.chat-entry-username, .pm-panel-sesh-entry-username{
     margin: auto 0.2em auto 0;
     text-wrap: nowrap;
 }
 
-.chat-entry-body{
+.chat-entry-body, .pm-panel-sesh-entry-body{
     margin: 0.2em;
     align-content: center;
 }
@@ -182,7 +182,7 @@ p.panel-head-element{
     margin: auto;
 }
 
-.chat-entry-high-level{
+.chat-entry-high-level, .pm-panel-sesh-entry-high-level{
     margin: auto 0 auto 0.2em;
 }
 

www/css/panel/pm.css

@@ -17,13 +17,14 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
     display: flex;
     flex-direction: horizontal;
     height: 100%;
+    overflow: hidden;
 }
 
 #pm-panel-sesh-list-container{
     flex: 1;
     max-width: 10em;
-    width: calc(100% - 1.25em);
     margin-left: 0.25em;
+    overflow-y: auto;
 }
 
 #pm-panel-sesh-container{
@@ -32,6 +33,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
     flex: 1;
     height: calc(100% - 0.25em);
     margin-top: 0;
+    margin-right: 0.25em;
 }
 
 #pm-panel-start-sesh{
@@ -49,6 +51,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
 
 #pm-panel-sesh-buffer{
     flex: 1;
+    overflow-y: auto;
 }
 
 #pm-panel-sesh-control-div{
@@ -72,12 +75,6 @@ div.pm-panel-sesh-list-entry, div.pm-panel-sesh-list-entry p{
     text-align: center;
 }
 
-#pm-panel-sesh-buffer span{
-    display: flex;
-    flex-direction: row;
-    margin: 0;
-}
-
 .pm-panel-sesh-message-sender, .pm-panel-sesh-message-content{
     margin: 0;
     font-size: 10pt;
@@ -89,4 +86,36 @@ div.pm-panel-sesh-list-entry, div.pm-panel-sesh-list-entry p{
     justify-content: center;
     text-align: center;
     height: 100%;
+}
+
+.pm-panel-sesh-entry{
+    display: flex;
+    align-content: center;
+    font-size: 10pt;
+}
+
+.pm-panel-sesh-entry-username{
+    margin: auto 0.2em auto 0;
+    text-wrap: nowrap;
+}
+
+.pm-panel-sesh-entry-body{
+    margin: 0.2em;
+    align-content: center;
+}
+
+.pm-panel-sesh-entry-high-level{
+    margin: auto 0 auto 0.2em;
+}
+
+.high-level{
+    z-index: 2;
+    background-image: url("/img/sweet_leaf_simple.png");
+    background-size: 1.3em;
+    background-repeat: no-repeat;
+    background-position-x: center;
+    background-position-y: top;
+    width: 1.5em;
+    text-align: center;
+    flex-shrink: 0;
 }

www/css/theme/movie-night.css

@@ -623,13 +623,12 @@ div.archived p{
     border-left: 1px solid var(--accent0);
 }
 
-#pm-panel-start-sesh{
+#pm-panel-start-sesh, div.pm-panel-sesh-list-entry{
     border-bottom: 1px solid var(--accent0);
 }
 
-
-div.pm-panel-sesh-list-entry{
-    border-bottom: 1px solid var(--accent0);
+span.pm-panel-sesh-entry{
+    border-bottom: 1px solid var(--accent1-alt1);
 }
 
 /* altcha theming*/

www/js/channel/chatPostprocessor.js

@@ -35,14 +35,13 @@ class chatPostprocessor{
      * @param {Object} rawData - Raw data from server
      * @returns {Node} Post-Processed Chat Entry
      */
-    postprocess(rawData){
+    postprocess(rawData, pm = false){
         //Create empty array to hold filter spans
         this.filterSpans = [];
         //Set raw message data
         this.rawData = rawData;
         //Set current chat nodes
-        this.buildEntry();
-        this.chatBody = this.chatEntry.querySelector(".chat-entry-body");
+        this.buildEntry(pm);
 
         //Split the chat message into an array of objects representing each word/chunk
         this.splitMessage();
@@ -87,14 +86,16 @@ class chatPostprocessor{
         return this.chatEntry;
     }
 
-    buildEntry(){
+    buildEntry(pm){
+        const classSuffix = pm ? 'pm-panel-sesh' : 'chat';
+        const classSuffixAlt = pm ? classSuffix : 'chat-panel';
         //Create chat-entry span
         this.chatEntry = document.createElement('span');
-        this.chatEntry.classList.add("chat-panel-buffer","chat-entry",`chat-entry-${this.rawData.user}`);
+        this.chatEntry.classList.add(`${classSuffixAlt}-buffer`,`${classSuffix}-entry`,`${classSuffix}-entry-${this.rawData.user}`);
 
         //Create high-level label
         var highLevel = document.createElement('p');
-        highLevel.classList.add("chat-panel-buffer","chat-entry-high-level","high-level");
+        highLevel.classList.add(`${classSuffixAlt}-buffer`,`${classSuffix}-entry-high-level`,"high-level");
         highLevel.textContent = utils.unescapeEntities(`${this.rawData.highLevel}`);
         this.chatEntry.appendChild(highLevel);
 
@@ -110,11 +111,11 @@ class chatPostprocessor{
 
         //Create username label
         var userLabel = document.createElement('p');
-        userLabel.classList.add("chat-panel-buffer", "chat-entry-username", );
+        userLabel.classList.add(`${classSuffixAlt}-buffer`, `${classSuffix}-entry-username`, );
         
         //Create color span
         var flairSpan = document.createElement('span');
-        flairSpan.classList.add("chat-entry-flair-span", flair);
+        flairSpan.classList.add(`${classSuffix}-entry-flair-span`, flair);
         flairSpan.innerHTML = this.rawData.user;
 
         //Inject flair span into user label before the colon
@@ -124,9 +125,11 @@ class chatPostprocessor{
         this.chatEntry.appendChild(userLabel);
 
         //Create chat body
-        var chatBody = document.createElement('p');
-        chatBody.classList.add("chat-panel-buffer","chat-entry-body");
-        this.chatEntry.appendChild(chatBody);
+        this.chatBody = document.createElement('p');
+        this.chatBody.classList.add(`${classSuffixAlt}-buffer`,`${classSuffix}-entry-body`);
+
+        //Append chat body to chat entry
+        this.chatEntry.appendChild(this.chatBody);
     }
 
     /**

www/js/channel/panels/pmPanel.js

@@ -229,7 +229,7 @@ class pmPanel extends panelObj{
      */
     renderMessage(message){
         //Run postprocessing functions on chat message
-        const postprocessedMessage = client.chatBox.chatPostprocessor.postprocess(message);
+        const postprocessedMessage = client.chatBox.chatPostprocessor.postprocess(message, true);
 
         //Append message to buffer
         this.seshBuffer.appendChild(postprocessedMessage);

www/js/channel/pmHandler.js

@@ -112,9 +112,9 @@ class pmHandler{
         }
 
         //If this wasn't our message
-        if(message.sender != client.user.user){
+        if(message.user != client.user.user){
             //Push sender onto members list
-            recipients.push(message.sender);
+            recipients.push(message.user);
         }
 
         //Sort recipients