Updated dashboard dropdown to use HA panels API

Necessary to fix confusing dashboard listing that showed 4 path
variants per custom dashboard, many resolving to the same page.
Replaced lovelace/dashboards/list with get_panels WebSocket call
(the same API HA's own sidebar uses) and filtered for lovelace
panels to show only actual dashboards with their display titles.

Extracted buildDashboardList as a testable pure function, which
also caught and fixed a deduplication bug where duplicate url_paths
could slip through the Set-based check.

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

Author: ikraamg

trmnl-ha/ha-trmnl/html/js/device-presets.ts

@@ -26,11 +26,17 @@ interface HassThemes {
   themes?: Record<string, unknown>
 }
 
+/** Dashboard entry from backend */
+interface DashboardEntry {
+  path: string
+  title: string
+}
+
 /** Home Assistant global object */
 interface Hass {
   themes?: HassThemes
   config?: HassConfig
-  dashboards?: string[]
+  dashboards?: DashboardEntry[] | string[]
 }
 
 // Extend Window to include Home Assistant global
@@ -64,7 +70,9 @@ export class DevicePresetsManager {
   }
 
   #renderPresetOptions(): void {
-    const select = document.getElementById('devicePreset') as HTMLSelectElement | null
+    const select = document.getElementById(
+      'devicePreset',
+    ) as HTMLSelectElement | null
     if (!select) return
 
     while (select.options.length > 1) {
@@ -101,7 +109,9 @@ export class DevicePresetsManager {
    * Applies selected device preset to form inputs.
    */
   applyDevicePreset(): boolean {
-    const select = document.getElementById('devicePreset') as HTMLSelectElement | null
+    const select = document.getElementById(
+      'devicePreset',
+    ) as HTMLSelectElement | null
     if (!select) return false
 
     const option = select.options[select.selectedIndex]
@@ -113,8 +123,12 @@ export class DevicePresetsManager {
 
     const device = JSON.parse(option.dataset.device || '{}')
 
-    const widthInput = document.getElementById('s_width') as HTMLInputElement | null
-    const heightInput = document.getElementById('s_height') as HTMLInputElement | null
+    const widthInput = document.getElementById(
+      's_width',
+    ) as HTMLInputElement | null
+    const heightInput = document.getElementById(
+      's_height',
+    ) as HTMLInputElement | null
 
     if (widthInput && device.viewport?.width) {
       widthInput.value = device.viewport.width
@@ -127,15 +141,19 @@ export class DevicePresetsManager {
     }
 
     if (device.rotate) {
-      const rotateSelect = document.getElementById('s_rotate') as HTMLSelectElement | null
+      const rotateSelect = document.getElementById(
+        's_rotate',
+      ) as HTMLSelectElement | null
       if (rotateSelect) {
         rotateSelect.value = device.rotate
         rotateSelect.dispatchEvent(new Event('change'))
       }
     }
 
     if (device.format) {
-      const formatSelect = document.getElementById('s_format') as HTMLSelectElement | null
+      const formatSelect = document.getElementById(
+        's_format',
+      ) as HTMLSelectElement | null
       if (formatSelect) {
         formatSelect.value = device.format
         formatSelect.dispatchEvent(new Event('change'))
@@ -158,7 +176,9 @@ export class DevicePresetsManager {
    * Populates theme dropdown from Home Assistant themes.
    */
   populateThemePicker(selectedTheme: string | null = null): void {
-    const themeSelect = document.getElementById('s_theme') as HTMLSelectElement | null
+    const themeSelect = document.getElementById(
+      's_theme',
+    ) as HTMLSelectElement | null
     if (!themeSelect) return
 
     themeSelect.innerHTML = '<option value="">Default</option>'
@@ -185,7 +205,9 @@ export class DevicePresetsManager {
    * Auto-fills language field from Home Assistant configuration.
    */
   prefillLanguage(): void {
-    const langInput = document.getElementById('s_lang') as HTMLInputElement | null
+    const langInput = document.getElementById(
+      's_lang',
+    ) as HTMLInputElement | null
     if (!langInput) return
 
     if (window.hass?.config?.language && !langInput.value) {
@@ -196,9 +218,12 @@ export class DevicePresetsManager {
 
   /**
    * Populates dashboard dropdown from Home Assistant dashboards.
+   * Supports both { path, title } objects (new) and plain strings (legacy).
    */
   populateDashboardPicker(): void {
-    const select = document.getElementById('dashboardSelector') as HTMLSelectElement | null
+    const select = document.getElementById(
+      'dashboardSelector',
+    ) as HTMLSelectElement | null
     if (!select) return
 
     while (select.options.length > 1) {
@@ -218,10 +243,15 @@ export class DevicePresetsManager {
       return
     }
 
-    window.hass.dashboards.forEach((path) => {
+    window.hass.dashboards.forEach((entry) => {
       const option = document.createElement('option')
-      option.value = path
-      option.textContent = path
+      if (typeof entry === 'string') {
+        option.value = entry
+        option.textContent = entry
+      } else {
+        option.value = entry.path
+        option.textContent = `${entry.title} (${entry.path})`
+      }
       select.appendChild(option)
     })
   }
@@ -230,8 +260,12 @@ export class DevicePresetsManager {
    * Copies selected dashboard path to dashboard input field.
    */
   applyDashboardSelection(): boolean {
-    const select = document.getElementById('dashboardSelector') as HTMLSelectElement | null
-    const pathInput = document.getElementById('s_path') as HTMLInputElement | null
+    const select = document.getElementById(
+      'dashboardSelector',
+    ) as HTMLSelectElement | null
+    const pathInput = document.getElementById(
+      's_path',
+    ) as HTMLInputElement | null
 
     if (!select || !pathInput) return false
 

trmnl-ha/ha-trmnl/tests/unit/dashboard-list.test.ts

@@ -0,0 +1,177 @@
+/**
+ * Tests for Dashboard List Builder
+ *
+ * Verifies that HA panel data is correctly mapped to dashboard entries
+ * for the UI dropdown picker.
+ */
+
+import { describe, it, expect } from 'bun:test'
+import { buildDashboardList } from '../../ui.js'
+
+describe('buildDashboardList', () => {
+  describe('with null/invalid panels', () => {
+    it('returns default dashboard when panels is null', () => {
+      const result = buildDashboardList(null)
+
+      expect(result).toEqual([
+        { path: '/lovelace/0', title: 'Default Dashboard' },
+      ])
+    })
+
+    it('returns default dashboard when panels is not an object', () => {
+      // @ts-expect-error - testing invalid input
+      const result = buildDashboardList('not-an-object')
+
+      expect(result).toEqual([
+        { path: '/lovelace/0', title: 'Default Dashboard' },
+      ])
+    })
+  })
+
+  describe('with valid panels', () => {
+    it('includes only lovelace panels', () => {
+      const panels = {
+        lovelace: {
+          component_name: 'lovelace',
+          url_path: 'lovelace',
+          title: 'Overview',
+          icon: null,
+        },
+        energy: {
+          component_name: 'energy',
+          url_path: 'energy',
+          title: 'Energy',
+          icon: 'mdi:lightning-bolt',
+        },
+        map: {
+          component_name: 'map',
+          url_path: 'map',
+          title: 'Map',
+          icon: 'mdi:map',
+        },
+      }
+
+      const result = buildDashboardList(panels)
+
+      expect(result).toHaveLength(2)
+      expect(result[0]).toEqual({
+        path: '/lovelace/0',
+        title: 'Default Dashboard',
+      })
+      expect(result[1]).toEqual({ path: '/lovelace', title: 'Overview' })
+    })
+
+    it('maps custom dashboards with correct paths', () => {
+      const panels = {
+        'my-trmnl': {
+          component_name: 'lovelace',
+          url_path: 'my-trmnl',
+          title: 'TRMNL Display',
+          icon: 'mdi:monitor',
+        },
+        kitchen: {
+          component_name: 'lovelace',
+          url_path: 'kitchen',
+          title: 'Kitchen Panel',
+          icon: null,
+        },
+      }
+
+      const result = buildDashboardList(panels)
+
+      expect(result).toHaveLength(3)
+      expect(result[1]).toEqual({
+        path: '/my-trmnl',
+        title: 'TRMNL Display',
+      })
+      expect(result[2]).toEqual({
+        path: '/kitchen',
+        title: 'Kitchen Panel',
+      })
+    })
+
+    it('uses url_path as title when title is null', () => {
+      const panels = {
+        untitled: {
+          component_name: 'lovelace',
+          url_path: 'untitled-dash',
+          title: null,
+          icon: null,
+        },
+      }
+
+      const result = buildDashboardList(panels)
+
+      expect(result[1]).toEqual({
+        path: '/untitled-dash',
+        title: 'untitled-dash',
+      })
+    })
+
+    it('uses url_path as title when title is empty string', () => {
+      const panels = {
+        empty: {
+          component_name: 'lovelace',
+          url_path: 'empty-title',
+          title: '',
+          icon: null,
+        },
+      }
+
+      const result = buildDashboardList(panels)
+
+      expect(result[1]!.title).toBe('empty-title')
+    })
+  })
+
+  describe('deduplication', () => {
+    it('does not duplicate default dashboard path', () => {
+      const panels = {
+        lovelace: {
+          component_name: 'lovelace',
+          url_path: 'lovelace/0',
+          title: 'Overview',
+          icon: null,
+        },
+      }
+
+      const result = buildDashboardList(panels)
+
+      const lovelacePaths = result.filter((d) => d.path === '/lovelace/0')
+      expect(lovelacePaths).toHaveLength(1)
+    })
+
+    it('keeps first occurrence when panels have duplicate url_paths', () => {
+      const panels = {
+        home: {
+          component_name: 'lovelace',
+          url_path: 'home',
+          title: 'Home',
+          icon: null,
+        },
+        'home-alias': {
+          component_name: 'lovelace',
+          url_path: 'home',
+          title: 'Home Alias',
+          icon: null,
+        },
+      }
+
+      const result = buildDashboardList(panels)
+
+      const homePaths = result.filter((d) => d.path === '/home')
+      expect(homePaths).toHaveLength(1)
+      expect(homePaths[0]!.title).toBe('Home')
+    })
+  })
+
+  describe('with empty panels object', () => {
+    it('returns only default dashboard', () => {
+      const result = buildDashboardList({})
+
+      expect(result).toEqual([
+        { path: '/lovelace/0', title: 'Default Dashboard' },
+      ])
+    })
+  })
+})