From 917939a9fcaad0b979feefe6e92e27ff29536c6e Mon Sep 17 00:00:00 2001
From: Gronod <gordon@i3omb.com>
Date: Tue, 19 May 2026 18:51:50 +0100
Subject: [PATCH] fix(ui): wire status panel close button via addEventListener

Inline onclick attribute was silently blocked by the server CSP nonce
policy. Replace with addEventListener after innerHTML is set.

chore: bump version to 1.5.0a
---
 CHANGELOG.md  | 8 ++++++++
 package.json  | 2 +-
 public/app.js | 5 ++++-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9115f61..63a20dc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,14 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ---
 
+## [1.5.0a] - 2026-05-19
+
+### Fixed
+
+- **Status panel close button** — the `×` button now correctly hides the status panel and stops the auto-refresh timer. The button was previously using an inline `onclick` attribute which was silently blocked by the server's CSP nonce policy. Replaced with `addEventListener` wired after `innerHTML` is set, consistent with all other button handlers in the application.
+
+---
+
 ## [1.5.0] - 2026-05-19
 
 ### Changed
diff --git a/package.json b/package.json
index 4d3c60f..aeea999 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sofarr",
-  "version": "1.5.0",
+  "version": "1.5.0a",
   "description": "A personal media download dashboard that shows your downloads 'so far' while you relax on the sofa waiting for your *arr services to finish",
   "main": "server/index.js",
   "scripts": {
diff --git a/public/app.js b/public/app.js
index ddd4f99..f89cd7f 100644
--- a/public/app.js
+++ b/public/app.js
@@ -812,7 +812,7 @@ function renderStatusPanel(data, panel) {
   let html = `
     <div class="status-header">
       <h3>Server Status</h3>
-      <button class="status-close" onclick="closeStatusPanel()">&times;</button>
+      <button class="status-close" id="status-close-btn">&times;</button>
     </div>
     <div class="status-grid">
       <div class="status-card">
@@ -886,6 +886,9 @@ function renderStatusPanel(data, panel) {
 
   html += `</tbody></table></div></div>`;
   panel.innerHTML = html;
+  // Wire close button — addEventListener avoids CSP inline handler restrictions
+  const closeBtn = panel.querySelector('#status-close-btn');
+  if (closeBtn) closeBtn.addEventListener('click', closeStatusPanel);
   // Set bar widths via JS DOM assignment — immune to CSP style-src restrictions
   panel.querySelectorAll('.timing-bar[data-w]').forEach(el => {
     el.style.width = el.dataset.w + '%';