From b45adcd81959658a2c0b036b52dc19a78ebdb20c Mon Sep 17 00:00:00 2001
From: mwiegand <martin.wiegand@seibert.group>
Date: Sun, 17 May 2026 19:56:54 +0200
Subject: [PATCH] feat(console): add color legend under console input

Three labelled swatches mirror the dropdown's name colors so users
can decode the cvar/command/sourcemod color scheme without guesswork.
Plain-text caveat next to the sourcemod swatch notes that those
commands are plugin-dependent.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../static/css/console-autocomplete.css       | 29 +++++++++++++++++++
 l4d2web/l4d2web/templates/server_detail.html  |  5 ++++
 2 files changed, 34 insertions(+)

diff --git a/l4d2web/l4d2web/static/css/console-autocomplete.css b/l4d2web/l4d2web/static/css/console-autocomplete.css
index b121c88..f8d69ee 100644
--- a/l4d2web/l4d2web/static/css/console-autocomplete.css
+++ b/l4d2web/l4d2web/static/css/console-autocomplete.css
@@ -50,6 +50,35 @@
   color: var(--cm-number, #884488);
 }
 
+/* Color legend rendered under the console input, mirroring the
+   three name colors used in dropdown rows. */
+.console-color-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.2em;
+  margin-top: 0.4em;
+  padding: 0 0.2em;
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  color: var(--color-muted, #888);
+}
+
+.console-color-legend-swatch {
+  font-weight: 600;
+}
+
+.console-color-legend-swatch.swatch-cvar {
+  color: var(--cm-keyword, #569cd6);
+}
+
+.console-color-legend-swatch.swatch-command {
+  color: var(--cm-string, #ce9178);
+}
+
+.console-color-legend-swatch.swatch-sourcemod {
+  color: var(--cm-number, #884488);
+}
+
 .console-autocomplete-desc {
   color: var(--color-muted, #888);
   font-size: 0.9em;
diff --git a/l4d2web/l4d2web/templates/server_detail.html b/l4d2web/l4d2web/templates/server_detail.html
index a0654e5..53fb085 100644
--- a/l4d2web/l4d2web/templates/server_detail.html
+++ b/l4d2web/l4d2web/templates/server_detail.html
@@ -61,6 +61,11 @@
       <span class="console-spinner" aria-hidden="true">…</span>
       <button type="submit">Send</button>
     </form>
+    <div class="console-color-legend" aria-label="Autocomplete color legend">
+      <span class="console-color-legend-swatch swatch-cvar">cvar</span>
+      <span class="console-color-legend-swatch swatch-command">command</span>
+      <span class="console-color-legend-swatch swatch-sourcemod">sm_*  (SourceMod — only if the plugin is loaded)</span>
+    </div>
   </section>
 
   <h2 class="section-title">Files</h2>