[feat](trx-frontend-http): add recorder file management and pagination

Add download/remove buttons per file, filename filter, sort dropdown, and paginated file list. Restore header REC toggle button. Add GET /api/recorder/download/{filename} and DELETE /api/recorder/files/{filename} endpoints with path traversal protection.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
2026-03-31 02:52:34 +02:00
parent bccb66f250
commit 10f25349e2
6 changed files with 253 additions and 21 deletions
@@ -1118,6 +1118,7 @@ small { color: var(--text-muted); }
align-items: center;
gap: 0.6rem;
min-width: 0;
overflow: hidden;
}
.header-bar-btn.header-audio-btn {
width: 2rem;
@@ -1142,6 +1143,26 @@ small { color: var(--text-muted); }
color: #00d17f;
border-color: #00d17f;
}
.header-bar-btn.header-rec-btn {
height: 2rem;
min-height: 0;
padding: 0 0.45rem;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.04em;
border: 1px solid var(--border-light);
border-radius: 6px;
background: var(--input-bg);
color: var(--text-muted);
cursor: pointer;
flex-shrink: 0;
}
.header-rec-btn.rec-active {
color: #ff3b30;
border-color: #ff3b30;
background: rgba(255, 59, 48, 0.12);
animation: rec-pulse 1.5s ease-in-out infinite;
}
/* ── Recorder page ──────────────────────────────────────────────────────── */
.recorder-controls-bar {
display: flex;
@@ -1177,6 +1198,14 @@ small { color: var(--text-muted); }
50% { opacity: 0.6; }
}
.tab.rec-active .tab-icon { color: #ff3b30; }
.recorder-filter-bar {
display: flex;
gap: 0.6rem;
align-items: center;
margin-bottom: 0.6rem;
}
.recorder-filter-input { flex: 1; min-width: 0; max-width: 22rem; }
.recorder-sort-select { width: auto; min-width: 10rem; }
.recorder-section { margin-bottom: 1.5rem; }
.recorder-section-heading {
font-size: 0.85rem;
@@ -1204,6 +1233,28 @@ small { color: var(--text-muted); }
text-transform: uppercase;
letter-spacing: 0.03em;
}
.recorder-table .rec-file-actions {
display: flex;
gap: 0.4rem;
}
.recorder-table .rec-file-btn {
padding: 0.2rem 0.5rem;
font-size: 0.75rem;
border: 1px solid var(--border-light);
border-radius: 4px;
background: var(--input-bg);
color: var(--text-primary);
cursor: pointer;
}
.recorder-table .rec-file-btn:hover { border-color: var(--accent-green); color: var(--accent-green); }
.recorder-table .rec-file-btn.rec-delete-btn:hover { border-color: #ff3b30; color: #ff3b30; }
.recorder-page-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.8rem;
padding: 0.9rem 0.2rem 0;
}
.header-rig-switch {
display: flex;
align-items: center;