@switchbot/homebridge-switchbot 5.1.0-beta.2 → 5.1.0-beta.3

package/src/homebridge-ui/public/js/render.ts

@@ -5,6 +5,22 @@ const SPACES_REGEX = /\s/g
 const CAMELCASE_REGEX = /([A-Z])/g
 const FIRST_CHAR_REGEX = /^./
 
+async function copyTextWithFallback(text: string): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(text)
+  } catch {
+    const textarea = document.createElement('textarea')
+    textarea.value = text
+    textarea.setAttribute('readonly', '')
+    textarea.style.cssText = 'position:fixed;left:-9999px;opacity:0;pointer-events:none'
+    document.body.appendChild(textarea)
+    textarea.select()
+    textarea.setSelectionRange(0, textarea.value.length)
+    document.execCommand('copy')
+    textarea.remove()
+  }
+}
+
 /**
  * Get RSSI signal quality level and color based on dBm value
  * @param rssi Signal strength in dBm (typically -30 to -90)
@@ -119,7 +135,6 @@ export function renderSignalQualityBadge(rssi: number | undefined): HTMLElement
     border-radius: 3px;
     font-size: 10px;
     font-weight: 600;
-    margin-left: 8px;
   `
   badge.title = quality.description
 
@@ -927,6 +942,7 @@ export function renderDeviceList(list: any[]): void {
 
   status.textContent = `Found ${list.length} device(s)`
   ul.classList.add('device-grid')
+  ul.style.padding = '0'
   ul.innerHTML = ''
 
   // Show remove all button when devices exist
@@ -941,6 +957,7 @@ export function renderDeviceList(list: any[]): void {
     li.style.display = 'flex'
     li.style.flexDirection = 'column'
     li.style.alignItems = 'stretch'
+    li.style.padding = '5px 8px'
     li.style.marginBottom = '0'
 
     const info = document.createElement('div')
@@ -950,14 +967,15 @@ export function renderDeviceList(list: any[]): void {
 
     const nameContainer = document.createElement('div')
     nameContainer.style.display = 'flex'
-    nameContainer.style.flexDirection = 'column'
-    nameContainer.style.alignItems = 'flex-start'
-    nameContainer.style.gap = '0'
+    nameContainer.style.alignItems = 'center'
+    nameContainer.style.marginBottom = '0'
+    nameContainer.style.flexWrap = 'wrap'
+    nameContainer.style.gap = '4px'
 
     const name = document.createElement('div')
     name.style.fontWeight = '500'
     name.style.fontSize = '13px'
-    name.textContent = d.name || d.id
+    name.textContent = d.configDeviceName || d.name || d.id
 
     const expandedDetails = document.createElement('div')
     expandedDetails.style.display = 'none'
@@ -978,25 +996,8 @@ export function renderDeviceList(list: any[]): void {
       expandBtn.style.transform = isHidden ? 'rotate(180deg)' : 'rotate(0deg)'
     }
 
-    const code = document.createElement('code')
-    code.textContent = d.id
-    code.style.fontSize = '10px'
-    code.style.opacity = '0.75'
-    code.style.marginLeft = '0'
-    code.style.whiteSpace = 'normal'
-    code.style.overflowWrap = 'anywhere'
-    code.style.wordBreak = 'break-word'
-    code.style.maxWidth = '100%'
-
-    const headerRow = document.createElement('div')
-    headerRow.style.display = 'inline-flex'
-    headerRow.style.alignItems = 'center'
-    headerRow.style.gap = '4px'
-    headerRow.appendChild(name)
-    headerRow.appendChild(expandBtn)
-
-    nameContainer.appendChild(headerRow)
-    nameContainer.appendChild(code)
+    nameContainer.appendChild(name)
+    nameContainer.appendChild(expandBtn)
 
     // Add signal strength visualization if RSSI is available
     if (d.rssi !== undefined && d.rssi !== null && d.rssi !== 0) {
@@ -1005,15 +1006,17 @@ export function renderDeviceList(list: any[]): void {
     }
 
     const meta = document.createElement('div')
-    meta.style.opacity = '0.75'
-    meta.style.marginTop = '0'
-    meta.style.fontSize = '11px'
-
-    const typeText = d.type ? `type: ${d.type}` : ''
-    const connText = d.connectionPreference ? `conn: ${d.connectionPreference}` : ''
+    meta.style.opacity = '0.7'
+    meta.style.fontSize = '10px'
+    meta.style.fontFamily = 'monospace'
+
+    const deviceIdentifier = d.deviceId || d.id
+    const id = `ID: ${deviceIdentifier}`
+    const typeText = d.configDeviceType || d.type ? `Type: ${d.configDeviceType || d.type}` : ''
+    const connText = d.connectionPreference ? `Conn: ${d.connectionPreference}` : ''
     const extText = d.externalPublishProtocol && d.externalPublishProtocol !== 'none' ? `external: ${d.externalPublishProtocol}` : ''
-    const roomText = d.room ? `room: ${d.room}` : ''
-    meta.textContent = [typeText, connText, extText, roomText].filter(Boolean).join(' | ')
+    const roomText = d.room ? `Room: ${d.room}` : ''
+    meta.textContent = [id, typeText, connText, extText, roomText].filter(Boolean).join(' | ')
 
     info.appendChild(nameContainer)
     info.appendChild(meta)
@@ -1044,7 +1047,9 @@ export function renderDeviceList(list: any[]): void {
     copyBtn.style.fontSize = '11px'
     copyBtn.addEventListener('click', async () => {
       try {
-        await navigator.clipboard.writeText(d.id)
+        if (deviceIdentifier) {
+          await copyTextWithFallback(deviceIdentifier)
+        }
         copyBtn.textContent = 'Copied'
         copyBtn.classList.add('success')
         setTimeout(() => {
@@ -1073,8 +1078,8 @@ export function renderDeviceList(list: any[]): void {
 
     buttons.appendChild(editBtn)
     buttons.appendChild(copyBtn)
-    buttons.appendChild(createConnectionTestControls(d))
     buttons.appendChild(deleteBtn)
+    buttons.appendChild(createConnectionTestControls(d))
 
     li.appendChild(info)
     li.appendChild(buttons)

package/src/homebridge-ui/public/js/toast.ts

@@ -10,10 +10,9 @@ function showToast(
     // Defensive: check for window and homebridge existence
     const hb = typeof window !== 'undefined' ? (window as any).homebridge : undefined
     const toast = hb && typeof hb.toast === 'object' ? hb.toast : undefined
-    const fn = toast && typeof toast[method] === 'function' ? toast[method] : undefined
-    if (fn) {
+    if (toast && typeof toast[method] === 'function') {
       try {
-        fn(message, title)
+        toast[method](message, title)
         return
       } catch (err) {
         uiLog.warn(`Toast ${method} threw:`, err)