Move diagnostics log to modal; add header Log button

This commit is contained in:
Aaron
2025-12-13 11:41:13 -05:00
parent 5ee183d607
commit 650175913e
3 changed files with 36 additions and 7 deletions

View File

@@ -33,6 +33,9 @@
>
<span id="themeToggleIcon" aria-hidden="true">&#127769;</span>
</button>
<button id="diagLogBtn" class="ghost hidden" title="Diagnostics log (visible when enabled)">
Log
</button>
<button id="releaseBtn" class="ghost" title="Pi-Kit updates">
Update
</button>
@@ -102,6 +105,29 @@
</div>
</div>
<div id="diagModal" class="modal hidden diag-log-modal">
<div class="modal-card wide">
<div class="panel-header sticky">
<div>
<p class="eyebrow">Diagnostics</p>
<h3>Diagnostics log</h3>
<p class="hint">RAM-only; cleared on reboot/clear. Use toggles in Settings → Diagnostics to enable.</p>
</div>
<button id="diagClose" class="ghost icon-btn close-btn" title="Close diagnostics log">
&times;
</button>
</div>
<div class="control-actions wrap gap">
<button id="diagRefreshBtn" class="ghost">Refresh</button>
<button id="diagClearBtn" class="ghost">Clear</button>
<button id="diagCopyBtn" class="ghost">Copy</button>
<button id="diagDownloadBtn" class="ghost">Download</button>
<span id="diagStatusModal" class="hint quiet"></span>
</div>
<pre id="diagLogBox" class="log-box" aria-live="polite"></pre>
</div>
</div>
<div id="releaseModal" class="modal hidden">
<div class="modal-card wide">
<div class="panel-header sticky">
@@ -528,7 +554,7 @@
</button>
<div class="accordion-body" id="acc-diag">
<p class="hint">
Temporary, RAM-only logs for debugging. Toggle on, choose debug for extra detail, then refresh/copy/download the log. Logs reset on reboot or clear.
Temporary, RAM-only logs for debugging. Toggle on, choose debug for extra detail. Logs reset on reboot or clear. Use the Log button in the top bar (visible when diagnostics is enabled) to view, copy, download, or clear entries.
</p>
<div class="control-actions split-row">
<label class="checkbox-row inline tight">
@@ -540,14 +566,9 @@
<span>Debug detail (includes UI clicks)</span>
</label>
</div>
<div class="control-actions wrap gap">
<button id="diagRefreshBtn" class="ghost">Refresh log</button>
<button id="diagClearBtn" class="ghost">Clear</button>
<button id="diagCopyBtn" class="ghost">Copy</button>
<button id="diagDownloadBtn" class="ghost">Download</button>
<div class="control-actions">
<span id="diagStatus" class="hint quiet"></span>
</div>
<pre id="diagLogBox" class="log-box" aria-live="polite"></pre>
<p class="hint quiet">Stored in RAM (max ~1MB server, ~500 entries client). No data written to disk.</p>
</div>
</div>