Add LED type detection, improve device card layout
Some checks failed
Validate / validate (push) Failing after 9s

- Detect LED chip type (WS2812B, SK6812, etc.) from WLED /json/cfg
- Show RGBW/RGB channel indicator with colored squares on device card
- Move version, display index, LED count to subtitle row under device name
- Add remove button as × icon in top-right corner of card
- Hide latency from card display (still visible in health dot tooltip)
- Fix display layout overflow on narrow viewports
- Add wled_rgbw and wled_led_type to ProcessingState API schema

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-08 03:26:46 +03:00
parent 7f613df362
commit 6006e00c3f
4 changed files with 114 additions and 37 deletions

View File

@@ -173,6 +173,7 @@ section {
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 20px;
position: relative;
transition: transform 0.2s, box-shadow 0.2s;
}
@@ -180,24 +181,35 @@ section {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.card-remove-btn {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
color: #777;
font-size: 1rem;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 4px;
transition: color 0.2s, background 0.2s;
}
.card-remove-btn:hover {
color: var(--danger-color);
background: rgba(244, 67, 54, 0.1);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.card-header-badges {
display: flex;
align-items: center;
gap: 8px;
}
.display-badge,
.led-count-badge {
font-size: 0.8rem;
color: var(--info-color);
opacity: 0.8;
margin-bottom: 4px;
padding-right: 30px;
}
.card-title {
@@ -206,16 +218,35 @@ section {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.wled-version {
font-size: 0.65rem;
font-weight: 400;
color: var(--text-secondary);
background: var(--border-color);
padding: 1px 6px;
border-radius: 8px;
letter-spacing: 0.03em;
.card-subtitle {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
flex-wrap: wrap;
}
.card-meta {
font-size: 0.8rem;
color: #999;
display: inline-flex;
align-items: center;
gap: 4px;
}
.channel-indicator {
display: inline-flex;
gap: 2px;
align-items: center;
}
.channel-indicator .ch {
width: 8px;
height: 10px;
border-radius: 1px;
}
.badge {
@@ -363,10 +394,11 @@ section {
border: 2px dashed var(--border-color);
border-radius: 8px;
padding: 30px;
min-height: 300px;
min-height: 280px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.layout-container {