@switchbot/homebridge-switchbot 5.0.0-beta.110 → 5.0.0-beta.112

package/src/homebridge-ui/public/index.html

@@ -9,65 +9,45 @@
   <body>
     <h1>🤖 SwitchBot Configuration</h1>
 
-    <div class="card">
+    <div class="card compact">
       <h2>API Credentials</h2>
-      <p>
-        Configure your SwitchBot API token and secret to enable device discovery
-        and control.
-      </p>
-
-      <div class="form-group">
-        <label for="token">API Token:</label>
-        <input
-          type="password"
-          id="token"
-          placeholder="Enter your SwitchBot API token"
-        />
-        <div class="status" id="tokenStatus"></div>
-      </div>
-
-      <div class="form-group">
-        <label for="secret">API Secret:</label>
-        <input
-          type="password"
-          id="secret"
-          placeholder="Enter your SwitchBot API secret"
-        />
-        <div class="status" id="secretStatus"></div>
+      <div class="credentials-row">
+        <div class="form-group">
+          <label for="token">Token:</label>
+          <input type="password" id="token" placeholder="Enter token" />
+          <div class="status" id="tokenStatus"></div>
+        </div>
+        <div class="form-group">
+          <label for="secret">Secret:</label>
+          <input type="password" id="secret" placeholder="Enter secret" />
+          <div class="status" id="secretStatus"></div>
+        </div>
       </div>
-
-      <button id="saveBtn" onclick="saveCredentials()">Save Credentials</button>
+      <button id="saveBtn" onclick="saveCredentials()">Save</button>
       <div id="saveStatus"></div>
     </div>
 
-    <div class="card">
+    <div class="card compact">
       <h2>Discover Devices</h2>
-      <p>
-        Click "Discover" to find all devices available in your SwitchBot account
-        and add them to your configuration.
-      </p>
-      <div style="margin-bottom: 16px">
-        <label
-          style="display: flex; align-items: center; gap: 8px; cursor: pointer"
-        >
-          <input
-            type="checkbox"
-            id="autoAddAllCheckbox"
-            style="width: auto; margin: 0"
-          />
-          <span>Auto-add all discovered devices</span>
+      <div style="margin-bottom: 6px">
+        <label style="display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 11px">
+          <input type="checkbox" id="autoAddAllCheckbox" style="width: auto; margin: 0" />
+          <span>Auto-add all</span>
+          <span
+            title="When enabled, Discover immediately adds all found devices to your config. Existing devices are skipped automatically."
+            style="font-size: 11px; opacity: 0.7"
+          >ⓘ</span>
         </label>
+        <div style="margin-top: 2px; margin-left: 22px; font-size: 10px; opacity: 0.75; line-height: 1.25">
+          Adds all discovered devices automatically; already configured devices are skipped.
+        </div>
       </div>
-      <button
-        id="discoverBtn"
-        onclick="discoverDevices()"
-        style="margin-bottom: 16px"
-      >
-        🔍 Discover Devices
+      <button id="discoverBtn" onclick="discoverDevices()" style="margin-bottom: 8px">
+        🔍 Discover
       </button>
-      <div id="discoverStatus" style="margin-bottom: 16px"></div>
+      <div id="discoverStatus" style="margin-bottom: 6px; font-size: 11px"></div>
       <div id="discoveredList" style="display: none">
-        <h3 style="margin-top: 0">Available Devices</h3>
+        <h3 style="margin-top: 0; font-size: 12px; margin-bottom: 6px; font-weight: 600">Available Devices</h3>
         <ul
           id="discoveredDevices"
           style="max-height: 300px; overflow-y: auto"
@@ -75,22 +55,16 @@
       </div>
     </div>
 
-    <div class="card">
+    <div class="card compact">
       <h2>Configured Devices</h2>
-      <p>
-        This page lists devices found in your Homebridge config for the
-        SwitchBot platform. Use the copy button to insert device IDs into the
-        plugin configuration. Connection preference (BLE/OpenAPI) is shown when
-        available.
-      </p>
       <div id="status">Loading…</div>
       <ul id="devices"></ul>
       <div
         id="removeAllContainer"
         style="
           display: none;
-          margin-top: 16px;
-          padding-top: 16px;
+          margin-top: 12px;
+          padding-top: 10px;
           border-top: 1px solid rgba(0, 0, 0, 0.1);
         "
       >
@@ -99,8 +73,8 @@
           style="
             background: #dc2626;
             width: 100%;
-            padding: 10px 16px;
-            font-size: 14px;
+            padding: 7px 12px;
+            font-size: 12px;
             font-weight: 500;
           "
         >

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

@@ -115,10 +115,20 @@ export async function discoverDevices(): Promise<any[]> {
   }
 }
 
-export async function addDevice(deviceId: string, name: string, type: string): Promise<any> {
+export async function addDevice(
+  deviceId: string,
+  name: string,
+  type: string,
+  options?: { address?: string, model?: string, rssi?: number },
+): Promise<any> {
   try {
-    uiLog.info('Adding device to config:', { deviceId, name, type })
-    const resp = await homebridge.request('/add-device', { deviceId, name, type })
+    const payload: any = { deviceId, name, type }
+    if (options?.address) { payload.address = options.address }
+    if (options?.model) { payload.model = options.model }
+    if (options?.rssi !== undefined && options?.rssi !== null && options?.rssi !== 0) { payload.rssi = options.rssi }
+
+    uiLog.info('Adding device to config:', payload)
+    const resp = await homebridge.request('/add-device', payload)
     uiLog.info('Add device response:', resp)
 
     if (!resp || resp.success === false) {

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

@@ -8,9 +8,19 @@ export async function addDeviceToConfig(device: any, options: { refresh?: boolea
   const { refresh = true, showStatus = true } = options
 
   try {
+    const { importDiscoveredDevice } = await import('./modals.js')
+    const importValues = await importDiscoveredDevice(device)
+    if (!importValues) {
+      return { added: false }
+    }
+
     showBusyUi()
     uiLog.info('Adding device to config:', device)
-    const resp = await addDevice(device.id, device.name, device.type)
+    const resp = await addDevice(device.id, importValues.configDeviceName, importValues.configDeviceType, {
+      address: importValues.address,
+      model: device.model,
+      rssi: device.rssi,
+    })
     uiLog.info('Add device response:', resp)
 
     if (!resp || resp.success === false) {
@@ -21,8 +31,8 @@ export async function addDeviceToConfig(device: any, options: { refresh?: boolea
     const message
       = resp?.message
         || (alreadyExists
-          ? `Device "${device.name}" already in config`
-          : `Device "${device.name}" added successfully!`)
+          ? `Device "${importValues.configDeviceName}" already in config`
+          : `Device "${importValues.configDeviceName}" added successfully!`)
 
     if (alreadyExists) {
       toastInfo(message)

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

@@ -10,6 +10,10 @@ import { hideBusyUi, showBusyUi } from './modal.js'
 import { renderDiscoveredDevices, filterDevices, sortDevices, getDiscoveryPreferences, setDiscoveryPreferences } from './render.js'
 import { toastError, toastInfo, toastSuccess, toastWarning } from './toast.js'
 
+function normalizeId(value: any): string {
+  return String(value ?? '').trim().toLowerCase()
+}
+
 export async function discoverDevices(): Promise<void> {
   const btn = document.getElementById('discoverBtn') as HTMLButtonElement
   const status = document.getElementById('discoverStatus')
@@ -138,6 +142,7 @@ export async function discoverDevices(): Promise<void> {
       btn.style.cursor = 'pointer'
       btn.style.border = preferences.connectionType === option.value ? '2px solid #007AFF' : '1px solid #ccc'
       btn.style.backgroundColor = preferences.connectionType === option.value ? '#f0f7ff' : '#fff'
+      btn.style.color = preferences.connectionType === option.value ? '#1d4ed8' : '#374151'
 
       btn.onclick = () => {
         preferences.connectionType = option.value
@@ -147,9 +152,11 @@ export async function discoverDevices(): Promise<void> {
         for (const b of Array.from(filterGroup.querySelectorAll('button'))) {
           ;(b as HTMLButtonElement).style.border = '1px solid #ccc'
           ;(b as HTMLButtonElement).style.backgroundColor = '#fff'
+          ;(b as HTMLButtonElement).style.color = '#374151'
         }
         btn.style.border = '2px solid #007AFF'
         btn.style.backgroundColor = '#f0f7ff'
+        btn.style.color = '#1d4ed8'
       }
 
       filterGroup.appendChild(btn)
@@ -222,6 +229,19 @@ export async function discoverDevices(): Promise<void> {
     list.innerHTML = ''
     list.appendChild(controlsDiv)
 
+    // Create or get the device list container
+    let deviceListContainer = document.getElementById('discoveredDevices')
+    if (!deviceListContainer) {
+      deviceListContainer = document.createElement('ul')
+      deviceListContainer.id = 'discoveredDevices'
+      deviceListContainer.style.maxHeight = '400px'
+      deviceListContainer.style.overflowY = 'auto'
+      deviceListContainer.style.marginTop = '12px'
+      deviceListContainer.style.padding = '0'
+      deviceListContainer.style.listStyle = 'none'
+      list.appendChild(deviceListContainer)
+    }
+
     // Display discovery list
     list.style.display = 'block'
 
@@ -255,9 +275,26 @@ async function updateDiscoveryView(
   const filtered = filterDevices(allDevices, preferences.connectionType, preferences.searchQuery)
   const sorted = sortDevices(filtered, preferences.sortBy)
 
+  // Build configured device lookup for duplicate detection
+  const configured = await fetchDevices()
+  const configuredIds = new Set((configured || []).map(d => normalizeId(d?.id || d?.deviceId)))
+
   // Render updated list
-  const ul = await renderDiscoveredDevices(sorted)
-  document.getElementById('discoveredDevices')?.replaceWith(ul)
+  const ul = await renderDiscoveredDevices(sorted, {
+    configuredIds,
+  })
+  
+  // Replace or append the rendered list
+  const existingList = document.getElementById('discoveredDevices')
+  if (existingList && existingList.parentNode) {
+    existingList.replaceWith(ul)
+  } else {
+    // Fallback: append to discovery list container
+    const listContainer = document.getElementById('discoveredList')
+    if (listContainer) {
+      listContainer.appendChild(ul)
+    }
+  }
   ul.id = 'discoveredDevices'
 
   // Update status with count

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

@@ -1,6 +1,173 @@
 import { DEVICE_TYPES } from './constants.js'
 import { uiLog } from './logger.js'
 
+export async function importDiscoveredDevice(device: any): Promise<{ configDeviceName: string, configDeviceType: string, address?: string } | null> {
+  return new Promise((resolve) => {
+    const div = document.createElement('div')
+    div.style.position = 'fixed'
+    div.style.top = '0'
+    div.style.left = '0'
+    div.style.width = '100%'
+    div.style.height = '100%'
+    div.style.background = 'rgba(0,0,0,0.7)'
+    div.style.display = 'flex'
+    div.style.alignItems = 'center'
+    div.style.justifyContent = 'center'
+    div.style.zIndex = '9999'
+
+    const modal = document.createElement('div')
+    modal.style.background = getComputedStyle(document.body).backgroundColor
+    modal.style.color = getComputedStyle(document.body).color
+    modal.style.padding = '0'
+    modal.style.borderRadius = '10px'
+    modal.style.minWidth = '440px'
+    modal.style.maxWidth = '90vw'
+    modal.style.boxShadow = '0 8px 32px rgba(0,0,0,0.35)'
+    modal.style.overflow = 'hidden'
+    modal.style.borderTop = '3px solid var(--switchbot-red, #ef4444)'
+
+    const title = document.createElement('h3')
+    title.textContent = 'Import Discovered Device'
+    title.style.marginTop = '0'
+    title.style.marginBottom = '16px'
+    title.style.padding = '20px 20px 0'
+    title.style.fontSize = '18px'
+    title.style.fontWeight = '600'
+    title.style.color = 'var(--switchbot-red, #ef4444)'
+    title.style.letterSpacing = '-0.02em'
+
+    const contentDiv = document.createElement('div')
+    contentDiv.style.padding = '0 20px 20px'
+
+    const nameLabel = document.createElement('label')
+    nameLabel.textContent = 'Device Name'
+    nameLabel.style.display = 'block'
+    nameLabel.style.marginBottom = '6px'
+    nameLabel.style.fontWeight = '500'
+    nameLabel.style.fontSize = '12px'
+    nameLabel.style.color = '#6b7280'
+
+    const nameInput = document.createElement('input')
+    nameInput.type = 'text'
+    nameInput.value = device.name || device.id || ''
+    nameInput.style.width = '100%'
+    nameInput.style.marginBottom = '12px'
+    nameInput.style.padding = '8px 10px'
+    nameInput.style.borderRadius = '6px'
+    nameInput.style.fontSize = '14px'
+    nameInput.style.boxSizing = 'border-box'
+
+    const typeLabel = document.createElement('label')
+    typeLabel.textContent = 'Config Device Type'
+    typeLabel.style.display = 'block'
+    typeLabel.style.marginBottom = '6px'
+    typeLabel.style.fontWeight = '500'
+    typeLabel.style.fontSize = '12px'
+    typeLabel.style.color = '#6b7280'
+
+    const typeSelect = document.createElement('select')
+    typeSelect.style.width = '100%'
+    typeSelect.style.padding = '8px 10px'
+    typeSelect.style.marginBottom = '12px'
+    typeSelect.style.borderRadius = '6px'
+    typeSelect.style.fontSize = '14px'
+    typeSelect.style.background = getComputedStyle(nameInput).background
+    typeSelect.style.color = getComputedStyle(nameInput).color
+    typeSelect.style.border = getComputedStyle(nameInput).border
+    typeSelect.style.boxSizing = 'border-box'
+
+    Object.keys(DEVICE_TYPES).forEach((categoryName) => {
+      const optgroup = document.createElement('optgroup')
+      optgroup.label = categoryName
+
+      DEVICE_TYPES[categoryName as keyof typeof DEVICE_TYPES].forEach((deviceType) => {
+        const opt = document.createElement('option')
+        opt.value = deviceType
+        opt.text = deviceType
+        const detectedType = (device.type || '').toLowerCase()
+        opt.selected = deviceType.toLowerCase() === detectedType
+        optgroup.appendChild(opt)
+      })
+
+      typeSelect.appendChild(optgroup)
+    })
+
+    const macLabel = document.createElement('label')
+    macLabel.textContent = 'BLE MAC Address (optional)'
+    macLabel.style.display = 'block'
+    macLabel.style.marginBottom = '6px'
+    macLabel.style.fontWeight = '500'
+    macLabel.style.fontSize = '12px'
+    macLabel.style.color = '#6b7280'
+
+    const macInput = document.createElement('input')
+    macInput.type = 'text'
+    macInput.value = device.address || ''
+    macInput.placeholder = 'AA:BB:CC:DD:EE:FF'
+    macInput.style.width = '100%'
+    macInput.style.marginBottom = '12px'
+    macInput.style.padding = '8px 10px'
+    macInput.style.borderRadius = '6px'
+    macInput.style.fontSize = '14px'
+    macInput.style.boxSizing = 'border-box'
+
+    const buttons = document.createElement('div')
+    buttons.style.display = 'flex'
+    buttons.style.gap = '10px'
+    buttons.style.justifyContent = 'flex-end'
+    buttons.style.marginTop = '18px'
+    buttons.style.paddingTop = '18px'
+    buttons.style.borderTop = '1px solid rgba(0, 0, 0, 0.08)'
+
+    const cancelBtn = document.createElement('button')
+    cancelBtn.textContent = 'Cancel'
+    cancelBtn.className = 'secondary'
+    cancelBtn.style.background = '#6b7280'
+    cancelBtn.style.padding = '8px 16px'
+    cancelBtn.style.fontSize = '13px'
+
+    const importBtn = document.createElement('button')
+    importBtn.textContent = 'Add to Config'
+    importBtn.style.background = 'var(--switchbot-red, #ef4444)'
+    importBtn.style.padding = '8px 20px'
+    importBtn.style.fontSize = '13px'
+
+    const cleanup = (result: { configDeviceName: string, configDeviceType: string, address?: string } | null) => {
+      div.remove()
+      resolve(result)
+    }
+
+    cancelBtn.onclick = () => cleanup(null)
+    importBtn.onclick = () => cleanup({
+      configDeviceName: nameInput.value || device.name || device.id,
+      configDeviceType: typeSelect.value || device.type,
+      address: macInput.value || undefined,
+    })
+
+    div.addEventListener('click', (event) => {
+      if (event.target === div) {
+        cleanup(null)
+      }
+    })
+
+    buttons.appendChild(cancelBtn)
+    buttons.appendChild(importBtn)
+    contentDiv.appendChild(nameLabel)
+    contentDiv.appendChild(nameInput)
+    contentDiv.appendChild(typeLabel)
+    contentDiv.appendChild(typeSelect)
+    contentDiv.appendChild(macLabel)
+    contentDiv.appendChild(macInput)
+    contentDiv.appendChild(buttons)
+
+    modal.appendChild(title)
+    modal.appendChild(contentDiv)
+    div.appendChild(modal)
+    document.body.appendChild(div)
+    nameInput.focus()
+  })
+}
+
 export async function editDevice(device: any): Promise<void> {
   // Create modal dialog for editing
   const div = document.createElement('div')