matrix

public/index.html

@@ -28,8 +28,8 @@
   <aside id="sidebar">
     <header id="server-name">gibbz voice <span class="poc-tag">POC</span></header>
     <div class="channel-group-label">Text channels</div>
-    <div class="channel text" data-noop>#
-      general <span class="hint">not implemented</span></div>
+    <div class="channel text" data-mx-room="gibbz-general">#
+      general <span class="hint">matrix</span></div>
     <div class="channel-group-label">Voice channels</div>
     <div class="channel voice" data-room="general">&#128266; General <span class="count" data-room-count="general"></span></div>
     <div class="channel voice" data-room="gaming">&#128266; Gaming <span class="count" data-room-count="gaming"></span></div>
@@ -97,8 +97,29 @@
   </div>
 </div>
 
+<div id="mx-panel" class="hidden">
+  <div class="mx-header">
+    <span>#general <span class="poc-tag">matrix · experimental</span></span>
+    <button id="mx-close" class="ghost" title="Close">&times;</button>
+  </div>
+  <div id="mx-messages"></div>
+  <div class="mx-composer">
+    <textarea id="mx-input" rows="1" placeholder="Message #general (Enter to send)"></textarea>
+    <button id="mx-send">Send</button>
+  </div>
+</div>
+
+<div id="reconnect-banner" class="hidden" role="alert">
+  <div class="reconnect-spinner"></div>
+  <span id="reconnect-text">Connection lost</span>
+  <div class="reconnect-actions">
+    <button id="reconnect-retry">Retry now</button>
+    <button id="reconnect-dismiss" class="ghost">Dismiss</button>
+  </div>
+</div>
+
 <div id="toasts"></div>
 
-<script src="app.js?v=10"></script>
+<script type="module" src="app.js?v=11"></script>
 </body>
 </html>