Update.

src/snek/static/base.css

@@ -412,8 +412,8 @@ a {
             display: block;
             width: 100%;
         }
-        
+    }    
-    }
+    
 /*
     body {
         justify-content: flex-start;
@@ -429,3 +429,89 @@ a {
         position:sticky;
     }*/
 }
+
+dialog {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  border: none;
+  border-radius: 12px;
+  padding: 24px;
+  background-color: #000; /* Deep black */
+  color: #f1f1f1;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
+  width: 90%;
+  max-width: 400px;
+
+  animation: dialogFadeIn 0.3s ease-out, dialogScaleIn 0.3s ease-out;
+  z-index: 1000;
+}
+
+/* Backdrop styling */
+dialog::backdrop {
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+}
+
+/* Title and content */
+dialog .dialog-title {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-bottom: 16px;
+  color: #fff;
+}
+
+dialog .dialog-content {
+  font-size: 1rem;
+  color: #ccc;
+  margin-bottom: 20px;
+}
+
+/* Button layout */
+dialog .dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+dialog .dialog-button {
+  padding: 8px 16px;
+  font-size: 0.95rem;
+  border-radius: 8px;
+  border: none;
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+
+@keyframes dialogFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes dialogScaleIn {
+  from { transform: scale(0.95) translate(-50%, -50%); opacity: 0; }
+  to { transform: scale(1) translate(-50%, -50%); opacity: 1; }
+}
+
+dialog .dialog-button.primary {
+  background-color: #f05a28;
+  color: white;
+}
+
+dialog .dialog-button.primary:hover {
+  background-color: #f05a28;
+}
+
+dialog .dialog-button.secondary {
+  background-color:  #f0a328;
+  color: #eee;
+}
+
+dialog .dialog-button.secondary:hover {
+  background-color:  #f0b84c;
+}
+
+

src/snek/templates/dialog_help.html

@@ -0,0 +1,61 @@
+
+<dialog id="help-dialog">
+  <div class="dialog-backdrop">
+    <div class="dialog-box">
+      <div class="dialog-title"><h2>Help</h2></div>
+      <div class="dialog-content">
+        <help-command-list></help-command-list>
+      </div>
+      <div class="dialog-actions">
+        <button class="dialog-button primary">Close</button>
+      </div>
+    </div>
+  </div>
+</dialog>
+
+<script>
+  class HelpCommandListComponent extends HTMLElement {
+    helpCommands = [
+      {
+        command: "/help",
+        description: "Show this help message"
+      },
+      {
+        command: "/online",
+        description: "Show online users"
+      },
+      {
+        command: "/clear",
+        description: "Clear the board"
+      },
+      {
+        command: "/img-gen",
+        description: "Generate an image"
+      }
+    ];
+
+    constructor() {
+      super();
+    }
+
+    connectedCallback() {
+      this.innerHTML = this.helpCommands
+            .map(cmd => `<div><h2>${cmd.command}</h2><div>${cmd.description}</div></div>`)
+        .join('');
+    }
+  }
+
+  customElements.define('help-command-list', HelpCommandListComponent);
+
+  const helpDialog = document.getElementById("help-dialog");
+  const helpCloseButton = helpDialog.querySelector('.dialog-button.primary');
+    function showHelp() {
+        helpDialog.showModal();
+
+        helpCloseButton.focus();
+    }
+    helpCloseButton.addEventListener('click', () => {
+      helpDialog.close();
+    });
+
+</script>

src/snek/templates/dialog_online.html

@@ -0,0 +1,28 @@
+
+<dialog id="online-users">
+  <div class="dialog-backdrop">
+    <div class="dialog-box">
+      <div class="dialog-title"><h2>Online Users</h2></div>
+      <div class="dialog-content"><user-list></user-list></div>
+      <div class="dialog-actions">
+        <button class="dialog-button primary">Close</button>
+      </div>
+    </div>
+  </div>
+</dialog>
+
+<script>
+const onlineUsersDialog = document.getElementById("online-users");
+const closeButton = onlineUsersDialog.querySelector('.dialog-button.primary');
+
+closeButton.addEventListener('click', () => {
+    onlineUsersDialog.close();
+});
+
+async function showOnline() {
+    const users = await app.rpc.getOnlineUsers('{{ channel.uid.value }}');
+    onlineUsersDialog.querySelector('user-list').data = users;
+    onlineUsersDialog.showModal();
+    closeButton.focus();
+}
+</script>

src/snek/templates/online.html

@@ -1,117 +0,0 @@
-<style>
-/* Ensure the dialog appears centered when open as modal */
-#online-users {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  border: none;
-  border-radius: 12px;
-  padding: 24px;
-  background-color: #111; /* Deep black */
-  color: #f1f1f1;
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
-  width: 90%;
-  max-width: 400px;
-
-  animation: fadeIn 0.3s ease-out, scaleIn 0.3s ease-out;
-  z-index: 1000;
-}
-
-/* Backdrop styling */
-#online-users::backdrop {
-  background: rgba(0, 0, 0, 0.7);
-  backdrop-filter: blur(4px);
-}
-
-/* Title and content */
-#online-users .dialog-title {
-  font-size: 1.5rem;
-  font-weight: bold;
-  margin-bottom: 16px;
-  color: #fff;
-}
-
-#online-users .dialog-content {
-  font-size: 1rem;
-  color: #ccc;
-  margin-bottom: 20px;
-}
-
-/* Button layout */
-#online-users .dialog-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 10px;
-}
-
-/* Buttons */
-#online-users .dialog-button {
-  padding: 8px 16px;
-  font-size: 0.95rem;
-  border-radius: 8px;
-  border: none;
-  cursor: pointer;
-  transition: background 0.2s ease;
-}
-
-#online-users .dialog-button.primary {
-  background-color: #4f46e5;
-  color: white;
-}
-
-#online-users .dialog-button.primary:hover {
-  background-color: #4338ca;
-}
-
-#online-users .dialog-button.secondary {
-  background-color: #333;
-  color: #eee;
-}
-
-#online-users .dialog-button.secondary:hover {
-  background-color: #444;
-}
-
-/* Animations */
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes scaleIn {
-  from { transform: scale(0.95) translate(-50%, -50%); opacity: 0; }
-  to { transform: scale(1) translate(-50%, -50%); opacity: 1; }
-}
-</style>
-
-
-<dialog id="online-users">
-    <div class="dialog-backdrop">
-      <div class="dialog-box">
-        <div class="dialog-title"><h2>Currently online</h2></div>
-        <div class="dialog-content"><user-list></user-list></div>
-        <div class="dialog-actions">
-          <button class="dialog-button primary">Close</button>
-        </div>
-      </div>
-    </div>
-  </dialog>
-
-<script>
-const onlineDialog = document.getElementById("online-users");
-const dialogButton = onlineDialog.querySelector('.dialog-button.primary');
-
-dialogButton.addEventListener('click', () => {
-    onlineDialog.close();
-});
-
-async function showOnlineUsers() {
-    const users = await app.rpc.getOnlineUsers('{{ channel.uid.value }}');
-    onlineDialog.querySelector('user-list').data = users;
-    onlineDialog.showModal();
-}
-</script>
-
-

src/snek/templates/web.html

@@ -21,7 +21,8 @@
         <upload-button channel="{{ channel.uid.value }}"></upload-button>
     </div>
 </section>
-{% include "online.html" %}
+{% include "dialog_help.html" %}
+{% include "dialog_online.html" %}
 <script type="module">
     import { app } from "/app.js";
     import { Schedule } from "/schedule.js";
@@ -32,13 +33,16 @@
     }
     getInputField().autoComplete = {
         "/online": () =>{
-            showOnlineUsers();
+            showOnline();
         },
         "/clear": () => {
             document.querySelector(".chat-messages").innerHTML = '';
         },
         "/live": () =>{
             getInputField().liveType = !getInputField().liveType
+        },
+        "/help": () => {
+            showHelp();
         }
     }