Add WLED auto-discovery via mDNS with zeroconf

Scan the local network for WLED devices advertising _wled._tcp.local.
and present them in the Add Device modal for one-click selection.

- New discovery.py: async mDNS browse + parallel /json/info enrichment
- GET /api/v1/devices/discover endpoint with already_added dedup
- Header scan button (magnifying glass icon) in add-device modal
- Discovered devices show name, IP, LED count, version; click to fill form
- en/ru locale strings for discovery UI

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-16 13:06:29 +03:00
parent b5a6885126
commit 638dc526f9
9 changed files with 378 additions and 1 deletions

View File

@@ -352,6 +352,73 @@ section {
letter-spacing: 0.5px;
}
/* Device discovery */
.discovery-section {
margin-bottom: 12px;
}
.btn-block {
width: 100%;
}
.discovery-list {
max-height: 200px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 8px;
}
.discovery-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 4px;
background: var(--card-bg);
cursor: pointer;
transition: opacity 0.15s;
}
.discovery-item:not(.discovery-item--added):hover {
opacity: 0.8;
}
.discovery-item--added {
opacity: 0.5;
cursor: default;
}
.discovery-item-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.discovery-badge {
font-size: 11px;
padding: 2px 8px;
border-radius: 10px;
background: var(--border-color);
white-space: nowrap;
}
.modal-divider {
border: none;
border-top: 1px solid var(--border-color);
margin: 12px 0;
}
.discovery-loading {
display: flex;
justify-content: center;
padding: 12px;
}
.discovery-spinner {
width: 20px;
height: 20px;
border: 2px solid var(--border-color);
border-top-color: var(--primary-color);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.channel-indicator {
display: inline-flex;
gap: 2px;
@@ -949,6 +1016,34 @@ input:-webkit-autofill:focus {
color: var(--text-color);
}
.modal-header-actions {
display: flex;
align-items: center;
gap: 4px;
}
.modal-header-btn {
background: none;
border: none;
font-size: 1.1rem;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 4px;
transition: background 0.2s;
flex-shrink: 0;
}
.modal-header-btn:hover {
background: rgba(128, 128, 128, 0.15);
}
.modal-header-btn:disabled {
opacity: 0.4;
cursor: default;
}
.modal-close-btn {
background: none;
border: none;