From 53c6e34c13d970c9e549f90ea7a126b02be5ee5b Mon Sep 17 00:00:00 2001
From: Ilia Denisov <evilcart@gmail.com>
Date: Mon, 15 Jun 2026 23:35:52 +0200
Subject: [PATCH] feat(ads): add a link-formatting help aside to the banner
 message editor

On the campaign detail page, beside the "Add message" form, a static aside
explains the message markdown: plain text is escaped, `[text](url)` becomes a
link, and only http(s)/root-relative targets are linkified (others show as
plain text). New .form-help (flex row) + .help (muted aside) console styles;
wraps below the form on a narrow viewport.
---
 backend/internal/adminconsole/assets/console.css | 16 ++++++++++++++++
 .../templates/pages/banner_detail.gohtml         |  9 +++++++++
 2 files changed, 25 insertions(+)

diff --git a/backend/internal/adminconsole/assets/console.css b/backend/internal/adminconsole/assets/console.css
index 8002a48..706432e 100644
--- a/backend/internal/adminconsole/assets/console.css
+++ b/backend/internal/adminconsole/assets/console.css
@@ -86,6 +86,22 @@ h1 { font-size: 1.4rem; margin: 0 0 0.4rem; }
   font: inherit;
 }
 .form textarea { min-height: 4rem; resize: vertical; }
+/* A form beside a static help aside (e.g. message-formatting hints). The form keeps its
+   own max-width; the aside fills the remainder and wraps below on a narrow viewport. */
+.form-help { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
+.help {
+  flex: 1 1 16rem;
+  min-width: 14rem;
+  max-width: 30rem;
+  background: var(--panel-hi);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  padding: 0.5rem 0.8rem;
+  font-size: 0.85rem;
+  color: var(--ink-dim);
+}
+.help h4 { margin: 0 0 0.4rem; font-size: 0.85rem; color: var(--ink); }
+.help p { margin: 0.35rem 0; }
 button {
   background: var(--accent);
   color: #06121f;
diff --git a/backend/internal/adminconsole/templates/pages/banner_detail.gohtml b/backend/internal/adminconsole/templates/pages/banner_detail.gohtml
index 90b154d..603e07f 100644
--- a/backend/internal/adminconsole/templates/pages/banner_detail.gohtml
+++ b/backend/internal/adminconsole/templates/pages/banner_detail.gohtml
@@ -39,11 +39,20 @@
 </div>
 {{else}}<p class="note">no messages yet</p>{{end}}
 <h3>Add message</h3>
+<div class="form-help">
 <form class="form col" method="post" action="/_gm/banners/{{.ID}}/messages">
 <label>English <input type="text" name="body_en" maxlength="500" required></label>
 <label>Russian <input type="text" name="body_ru" maxlength="500" required></label>
 <div><button type="submit">Add message</button></div>
 </form>
+<aside class="help">
+<h4>Formatting</h4>
+<p>Plain text is shown as-is (any HTML is escaped).</p>
+<p>Add a link with markdown — <code>[visible text](https://example.com)</code> — which renders as the linked <em>visible text</em>.</p>
+<p>Only <code>https://</code>, <code>http://</code> and root-relative <code>/path</code> targets become links; any other scheme (e.g. <code>javascript:</code>, <code>ftp:</code>) is dropped and shown as plain text.</p>
+<p>Keep it short: an over-long line scrolls in the strip. The same formatting applies when editing a message above.</p>
+</aside>
+</div>
 </section>
 {{end}}
 {{- end}}