From 5287794a72e1e2c1e7b64d01a9c09df9a60114da Mon Sep 17 00:00:00 2001
From: Ilia Denisov <evilcart@gmail.com>
Date: Mon, 15 Jun 2026 12:45:00 +0200
Subject: [PATCH] fix(feedback): theme buttons, badge the Info button, simplify
 admin actions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- style the About feedback button and the form's Send/attach/remove buttons with
  the accent/border tokens used by the New Game CTA, so they follow light/dark
  theme (the previous .btn/.ghost classes were not defined globally); the attach
  button is a neutral 📎 icon button with an aria-label
- show a round badge on the About 'Feedback' button when a reply is waiting
- admin: one 'ban from feedback' checkbox shared by Delete and Delete-all (via
  button formaction); hide Mark read when already read and Archive when archived
- e2e: match the About button by substring (its name gains the badge)
---
 .../templates/pages/feedback_detail.gohtml    | 13 +++----
 ui/e2e/feedback.spec.ts                       |  4 +-
 ui/src/screens/About.svelte                   | 27 ++++++++++++-
 ui/src/screens/Feedback.svelte                | 38 ++++++++++++++++---
 4 files changed, 67 insertions(+), 15 deletions(-)

diff --git a/backend/internal/adminconsole/templates/pages/feedback_detail.gohtml b/backend/internal/adminconsole/templates/pages/feedback_detail.gohtml
index 76a4ef4..9f85def 100644
--- a/backend/internal/adminconsole/templates/pages/feedback_detail.gohtml
+++ b/backend/internal/adminconsole/templates/pages/feedback_detail.gohtml
@@ -31,15 +31,14 @@
 </form>
 </section>
 <section class="panel"><h2>Actions</h2>
-<form class="form" method="post" action="/_gm/feedback/{{.ID}}/read"><button type="submit">Mark read</button></form>
-<form class="form" method="post" action="/_gm/feedback/{{.ID}}/archive"><button type="submit">Archive</button></form>
+{{if not .Read}}<form class="form" method="post" action="/_gm/feedback/{{.ID}}/read"><button type="submit">Mark read</button></form>{{end}}
+{{if not .Archived}}<form class="form" method="post" action="/_gm/feedback/{{.ID}}/archive"><button type="submit">Archive</button></form>{{end}}
 <form class="form col" method="post" action="/_gm/feedback/{{.ID}}/delete">
 <label><input type="checkbox" name="block" value="1"> ban the player from feedback</label>
-<div><button type="submit">Delete</button></div>
-</form>
-<form class="form col" method="post" action="/_gm/feedback/{{.ID}}/delete-all">
-<label><input type="checkbox" name="block" value="1"> ban the player from feedback</label>
-<div><button type="submit">Delete all from this player</button></div>
+<div>
+<button type="submit">Delete</button>
+<button type="submit" formaction="/_gm/feedback/{{.ID}}/delete-all">Delete all from this player</button>
+</div>
 </form>
 </section>
 {{end}}
diff --git a/ui/e2e/feedback.spec.ts b/ui/e2e/feedback.spec.ts
index e4f9d97..d08cb5f 100644
--- a/ui/e2e/feedback.spec.ts
+++ b/ui/e2e/feedback.spec.ts
@@ -14,7 +14,9 @@ async function openFeedback(page: Page): Promise<void> {
   await page.getByRole('button', { name: /Settings/ }).click();
   await expect(page.locator('.pane')).toHaveCount(1);
   await page.getByRole('button', { name: 'Info', exact: true }).click();
-  await page.getByRole('button', { name: 'Feedback', exact: true }).click();
+  // The About "Feedback" button: its accessible name gains the "1" badge once a reply
+  // is waiting, so match by substring rather than exact.
+  await page.getByRole('button', { name: /Feedback/ }).click();
 }
 
 test('feedback: submit a message, then resend is blocked', async ({ page }) => {
diff --git a/ui/src/screens/About.svelte b/ui/src/screens/About.svelte
index f80242a..0daa6f3 100644
--- a/ui/src/screens/About.svelte
+++ b/ui/src/screens/About.svelte
@@ -34,7 +34,9 @@
   <p class="muted">{t('about.version', { v: version })}</p>
 
   {#if !(app.profile?.isGuest ?? true)}
-    <button class="btn feedback" onclick={() => navigate('/feedback')}>{t('feedback.title')}</button>
+    <button class="feedback" onclick={() => navigate('/feedback')}>
+      {t('feedback.title')}{#if app.feedbackReplyUnread}<span class="fbadge">1</span>{/if}
+    </button>
   {/if}
 </div>
 
@@ -78,4 +80,27 @@
     font-size: 0.9rem;
     margin: 0;
   }
+  .feedback {
+    align-self: flex-start;
+    padding: 12px 18px;
+    border: 1px solid var(--accent);
+    background: var(--accent);
+    color: var(--accent-text);
+    border-radius: var(--radius);
+    font-weight: 600;
+  }
+  /* The reply badge sits on the accent button, so it inverts the accent colours. */
+  .fbadge {
+    display: inline-block;
+    margin-left: 8px;
+    min-width: 18px;
+    padding: 0 5px;
+    border-radius: 999px;
+    background: var(--accent-text);
+    color: var(--accent);
+    font-size: 0.78rem;
+    font-weight: 700;
+    line-height: 1.55;
+    text-align: center;
+  }
 </style>
diff --git a/ui/src/screens/Feedback.svelte b/ui/src/screens/Feedback.svelte
index 748b884..1877065 100644
--- a/ui/src/screens/Feedback.svelte
+++ b/ui/src/screens/Feedback.svelte
@@ -94,13 +94,17 @@
       <input bind:this={fileInput} type="file" class="hidden" onchange={pickFile} />
       {#if file}
         <span class="fname">{file.name}</span>
-        <button type="button" class="ghost" onclick={removeFile}>{t('feedback.removeFile')}</button>
+        <button type="button" class="neutral" onclick={removeFile}>{t('feedback.removeFile')}</button>
       {:else}
-        <button type="button" class="ghost" onclick={() => fileInput.click()} disabled={!enabled}>
-          {t('feedback.attach')}
-        </button>
+        <button
+          type="button"
+          class="neutral attach"
+          aria-label={t('feedback.attach')}
+          title={t('feedback.attach')}
+          onclick={() => fileInput.click()}
+          disabled={!enabled}>📎</button>
       {/if}
-      <button type="button" class="btn" onclick={send} disabled={!canSend}>{t('feedback.send')}</button>
+      <button type="button" class="cta" onclick={send} disabled={!canSend}>{t('feedback.send')}</button>
     </div>
 
     {#if fileError}<p class="err">{t('feedback.fileRejected')}</p>{/if}
@@ -151,8 +155,30 @@
     color: var(--text-muted);
     font-size: 0.9rem;
   }
-  .row .btn {
+  .cta {
     margin-left: auto;
+    padding: 12px 18px;
+    border: 1px solid var(--accent);
+    background: var(--accent);
+    color: var(--accent-text);
+    border-radius: var(--radius);
+    font-weight: 600;
+  }
+  .neutral {
+    padding: 12px 14px;
+    border: 1px solid var(--border);
+    background: var(--surface-2);
+    color: var(--text);
+    border-radius: var(--radius);
+    font-weight: 600;
+  }
+  .cta:disabled,
+  .neutral:disabled {
+    opacity: 0.5;
+  }
+  .attach {
+    font-size: 1.15rem;
+    line-height: 1;
   }
   .hidden {
     display: none;