Improve device cards, stream/template UI, and add PP template testing

- Move WLED UI button into URL badge as clickable link on device cards
- Remove version label from device cards
- Show PP template name on processed stream cards
- Display filter chain as pills on processing template cards
- Add processing template test with source stream selector
- Pre-load PP templates when viewing streams to fix race condition
- Add ESC key handling for all modals
- Add filter chain CSS styles

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-11 15:28:58 +03:00
parent c8ebb60f99
commit 4f9c30ef06
7 changed files with 390 additions and 19 deletions

View File

@@ -243,6 +243,7 @@ section {
color: var(--primary-color);
}
.card-remove-btn {
position: absolute;
top: 10px;
@@ -284,6 +285,9 @@ section {
}
.device-url-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 0.7rem;
font-weight: 400;
color: var(--text-secondary);
@@ -292,6 +296,16 @@ section {
border-radius: 10px;
letter-spacing: 0.03em;
font-family: monospace;
text-decoration: none;
transition: background 0.2s;
}
.device-url-badge:hover {
background: var(--text-muted);
}
.device-url-icon {
font-size: 0.6rem;
}
.card-subtitle {
@@ -1791,6 +1805,27 @@ input:-webkit-autofill:focus {
margin-bottom: 8px;
}
.filter-chain {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 8px;
}
.filter-chain-item {
font-size: 0.7rem;
background: var(--border-color);
color: var(--text-secondary);
padding: 2px 8px;
border-radius: 10px;
}
.filter-chain-arrow {
font-size: 0.7rem;
color: var(--text-muted);
}
.template-config-details {
margin: 12px 0;
font-size: 13px;