Show device type in dashboard target subtitles for all targets

Fetch devices list alongside targets and profiles in loadDashboard,
then look up device_type from the devices map instead of relying on
state.device_name which is only available for running targets.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/wled_controller/static/js/features/dashboard.js

@@ -25,9 +25,10 @@ export async function loadDashboard() {
     if (!container) { set_dashboardLoading(false); return; }
 
     try {
-        const [targetsResp, profilesResp] = await Promise.all([
+        const [targetsResp, profilesResp, devicesResp] = await Promise.all([
             fetch(`${API_BASE}/picture-targets`, { headers: getHeaders() }),
             fetch(`${API_BASE}/profiles`, { headers: getHeaders() }).catch(() => null),
+            fetch(`${API_BASE}/devices`, { headers: getHeaders() }).catch(() => null),
         ]);
         if (targetsResp.status === 401) { handle401Error(); return; }
 
@@ -35,6 +36,9 @@ export async function loadDashboard() {
         const targets = targetsData.targets || [];
         const profilesData = profilesResp && profilesResp.ok ? await profilesResp.json() : { profiles: [] };
         const profiles = profilesData.profiles || [];
+        const devicesData = devicesResp && devicesResp.ok ? await devicesResp.json() : { devices: [] };
+        const devicesMap = {};
+        for (const d of (devicesData.devices || [])) { devicesMap[d.id] = d; }
 
         if (targets.length === 0 && profiles.length === 0) {
             container.innerHTML = `<div class="dashboard-no-targets">${t('dashboard.no_targets')}</div>`;
@@ -81,7 +85,7 @@ export async function loadDashboard() {
                     <span class="dashboard-section-count">${running.length}</span>
                     <button class="btn btn-sm btn-danger dashboard-stop-all" onclick="dashboardStopAll()" title="${t('dashboard.stop_all')}">⏹️ ${t('dashboard.stop_all')}</button>
                 </div>
-                ${running.map(target => renderDashboardTarget(target, true)).join('')}
+                ${running.map(target => renderDashboardTarget(target, true, devicesMap)).join('')}
             </div>`;
         }
 
@@ -91,7 +95,7 @@ export async function loadDashboard() {
                     ${t('dashboard.section.stopped')}
                     <span class="dashboard-section-count">${stopped.length}</span>
                 </div>
-                ${stopped.map(target => renderDashboardTarget(target, false)).join('')}
+                ${stopped.map(target => renderDashboardTarget(target, false, devicesMap)).join('')}
             </div>`;
         }
 
@@ -105,7 +109,7 @@ export async function loadDashboard() {
     }
 }
 
-function renderDashboardTarget(target, isRunning) {
+function renderDashboardTarget(target, isRunning, devicesMap = {}) {
     const state = target.state || {};
     const metrics = target.metrics || {};
     const isLed = target.target_type === 'led' || target.target_type === 'wled';
@@ -113,8 +117,11 @@ function renderDashboardTarget(target, isRunning) {
     const typeLabel = isLed ? 'LED' : 'Key Colors';
 
     let subtitleParts = [typeLabel];
-    if (isLed && state.device_name) {
-        subtitleParts.push(state.device_name);
+    if (isLed) {
+        const device = target.device_id ? devicesMap[target.device_id] : null;
+        if (device) {
+            subtitleParts.push((device.device_type || '').toUpperCase());
+        }
     }
 
     if (isRunning) {