add DM screen

webroot/screens.js

@@ -129,6 +129,20 @@ var invitesEntry = `
 </div>
 `;
 
+var chatScreen = `
+<div style="display: flex; flex-direction: column; height: 100%; width: 100%;">
+    <div id="chat-messages" style="flex-grow: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem;">
+        <!-- messages go here -->
+    </div>
+    <div style="padding: 1rem; border-top: var(--border-width) solid var(--light-border-color); display: flex; gap: 0.5rem;">
+        <input type="text" id="chat-input" class="forminput" style="flex-grow: 1; margin: 0;" placeholder="{blah(placeholder.message.input)}">
+        <button class="submit-button" onclick="sendMessage()" style="margin: 0; padding: 0 1.5rem;">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="var(--main-bg-color)" width="1.5rem"><path d="M120-160v-240l320-80-320-80v-240l760 320-760 320Z"/></svg>
+        </button>
+    </div>
+</div>
+`;
+
 //roombars
 var homeRoomBar = `
 <div class="sidebar-section-header">
@@ -147,6 +161,7 @@ var homeRoomBar = `
         </svg>
     </button>
 </div>
+<div id="dms-list" class="list-container empty" style="padding: 0 0.5rem;"></div>
 
 <div class="sidebar-section-header">
     <button class="collapse-text-button" id="collapse-groups" onclick="clickCollapseGroups()">