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

package/dist/homebridge-ui/public/css/styles.css

@@ -75,12 +75,13 @@ body {
     system-ui,
     -apple-system,
     Arial;
-  padding: 16px;
+  padding: 10px;
 }
 
 h1 {
-  font-size: 24px;
+  font-size: 18px;
   margin-top: 0;
+  margin-bottom: 10px;
 }
 
 h2 {
@@ -152,25 +153,25 @@ code {
 }
 
 .form-group {
-  margin-bottom: 16px;
+  margin-bottom: 10px;
 }
 
 label {
   display: block;
-  margin-bottom: 6px;
+  margin-bottom: 4px;
   font-weight: 500;
-  font-size: 12px;
+  font-size: 11px;
   color: #6b7280;
 }
 
 input {
   width: 100%;
   max-width: 400px;
-  padding: 8px 10px;
+  padding: 6px 8px;
   border: 1px solid #d1d5db;
   border-radius: 6px;
   font-family: system-ui, -apple-system, monospace;
-  font-size: 14px;
+  font-size: 12px;
   transition: all 0.2s ease;
 }
 
@@ -203,8 +204,8 @@ select:focus {
 }
 
 .status {
-  font-size: 14px;
-  margin-top: 4px;
+  font-size: 11px;
+  margin-top: 3px;
 }
 
 .status.ok {
@@ -221,27 +222,121 @@ select:focus {
 }
 
 .card {
-  padding: 16px;
+  padding: 12px;
   border-radius: 8px;
-  margin-bottom: 16px;
+  margin-bottom: 10px;
 }
 
-.device-item {
-  padding: 10px 12px;
-  border-radius: 6px;
+.card.compact {
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+.card.compact h2 {
+  margin-top: 0;
+  margin-bottom: 6px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.card.compact .form-group {
   margin-bottom: 6px;
+}
+
+.card.compact label {
+  font-size: 11px;
+  margin-bottom: 2px;
+  display: block;
+}
+
+.card.compact input {
+  padding: 5px 8px;
+  font-size: 12px;
+}
+
+.card.compact button {
+  padding: 6px 12px;
+  font-size: 12px;
+}
+
+.card.compact .status {
+  font-size: 11px;
+  margin-top: 4px;
+}
+
+.credentials-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.credentials-row .form-group {
+  flex: 1 1 100%;
+  min-width: 0;
+}
+
+@media (min-width: 700px) {
+  .credentials-row {
+    gap: 10px;
+    align-items: start;
+  }
+
+  .credentials-row .form-group {
+    flex: 1 1 calc(50% - 5px);
+  }
+}
+
+.device-item {
+  padding: 5px 8px;
+  border-radius: 5px;
+  margin-bottom: 0;
   display: flex;
-  gap: 10px;
+  gap: 8px;
   align-items: center;
   justify-content: space-between;
   transition: all 0.2s ease;
+  height: 100%;
+  min-width: 0;
 }
 
 .device-item:hover {
-  transform: translateY(-1px);
+  transform: translateY(-0.5px);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
+.device-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+#devices.device-grid,
+#discoveredDevices.device-grid,
+ul.device-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+  gap: 6px;
+  padding-left: 0;
+  list-style: none;
+  margin: 0;
+}
+
+.device-item code {
+  display: inline-block;
+  max-width: 100%;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  word-break: break-word;
+}
+
+@media (max-width: 900px) {
+  .device-actions {
+    width: 100%;
+    justify-content: flex-start !important;
+    margin-left: 0 !important;
+  }
+}
+
 .card {
   padding: 16px;
   border-radius: 8px;

package/dist/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/dist/homebridge-ui/public/js/app.js

@@ -463,6 +463,17 @@ async function discoverDevices2() {
     controlsDiv.appendChild(searchInput);
     list.innerHTML = "";
     list.appendChild(controlsDiv);
+    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);
+    }
     list.style.display = "block";
     await updateDiscoveryView(devices, preferences);
   } catch (e) {
@@ -485,7 +496,15 @@ async function updateDiscoveryView(allDevices, preferences) {
   const ul = await renderDiscoveredDevices(sorted, {
     configuredIds
   });
-  document.getElementById("discoveredDevices")?.replaceWith(ul);
+  const existingList = document.getElementById("discoveredDevices");
+  if (existingList && existingList.parentNode) {
+    existingList.replaceWith(ul);
+  } else {
+    const listContainer = document.getElementById("discoveredList");
+    if (listContainer) {
+      listContainer.appendChild(ul);
+    }
+  }
   ul.id = "discoveredDevices";
   const status = document.getElementById("discoverStatus");
   if (status) {
@@ -1307,6 +1326,7 @@ function scrollToConfiguredDevice(deviceId) {
 }
 async function renderDiscoveredDevices(devices, options = {}) {
   const ul = document.createElement("ul");
+  ul.className = "device-grid";
   ul.style.maxHeight = "400px";
   ul.style.overflowY = "auto";
   ul.style.marginTop = "12px";
@@ -1321,28 +1341,31 @@ async function renderDiscoveredDevices(devices, options = {}) {
     const li = document.createElement("li");
     li.className = "device-item";
     li.style.display = "flex";
-    li.style.alignItems = "center";
-    li.style.justifyContent = "space-between";
-    li.style.padding = "10px 12px";
-    li.style.marginBottom = "6px";
-    li.style.borderRadius = "6px";
+    li.style.flexDirection = "column";
+    li.style.alignItems = "stretch";
+    li.style.justifyContent = "flex-start";
+    li.style.padding = "5px 8px";
+    li.style.marginBottom = "0";
+    li.style.borderRadius = "5px";
     li.style.transition = "all 0.2s ease";
     const info = document.createElement("div");
-    info.style.flex = "1";
+    info.style.flex = "1 1 auto";
+    info.style.width = "100%";
+    info.style.minWidth = "0";
     const nameContainer = document.createElement("div");
     nameContainer.style.display = "flex";
     nameContainer.style.alignItems = "center";
-    nameContainer.style.marginBottom = "4px";
+    nameContainer.style.marginBottom = "0";
     nameContainer.style.flexWrap = "wrap";
-    nameContainer.style.gap = "6px";
+    nameContainer.style.gap = "4px";
     const name = document.createElement("div");
     name.style.fontWeight = "500";
-    name.style.fontSize = "14px";
+    name.style.fontSize = "13px";
     name.textContent = d.name || d.id;
     nameContainer.appendChild(name);
     const duplicateBadge = document.createElement("span");
     duplicateBadge.textContent = alreadyAdded ? "\u2713 Already Added" : "\u2795 New Device";
-    duplicateBadge.style.cssText = alreadyAdded ? "background: #16a34a; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600;" : "background: #2563eb; color: white; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 600;";
+    duplicateBadge.style.cssText = alreadyAdded ? "background: #16a34a; color: white; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 600;" : "background: #2563eb; color: white; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 600;";
     nameContainer.appendChild(duplicateBadge);
     if (d.connectionType) {
       const badge = renderConnectionBadge(d.connectionType);
@@ -1358,10 +1381,13 @@ async function renderDiscoveredDevices(devices, options = {}) {
       nameContainer.appendChild(renderSignalQualityBadge(d.rssi));
     }
     const details = document.createElement("div");
-    details.style.fontSize = "11px";
+    details.style.fontSize = "10px";
     details.style.opacity = "0.7";
-    details.style.marginTop = "4px";
+    details.style.marginTop = "0";
     details.style.fontFamily = "monospace";
+    details.style.whiteSpace = "normal";
+    details.style.overflowWrap = "anywhere";
+    details.style.wordBreak = "break-word";
     let detailsText = `ID: ${d.id} | Type: ${d.type} | Model: ${d.model || "N/A"}`;
     if (d.hubDeviceId) {
       detailsText += ` | Hub: ${d.hubDeviceId}`;
@@ -1374,9 +1400,10 @@ async function renderDiscoveredDevices(devices, options = {}) {
     info.appendChild(details);
     const addBtn = document.createElement("button");
     addBtn.textContent = alreadyAdded ? "Already Added" : "Add to Config";
-    addBtn.style.marginLeft = "8px";
-    addBtn.style.padding = "6px 14px";
-    addBtn.style.fontSize = "12px";
+    addBtn.style.marginLeft = "0";
+    addBtn.style.marginTop = "2px";
+    addBtn.style.padding = "4px 9px";
+    addBtn.style.fontSize = "11px";
     addBtn.style.whiteSpace = "nowrap";
     addBtn.style.flexShrink = "0";
     addBtn.disabled = alreadyAdded;
@@ -1395,25 +1422,42 @@ async function renderDiscoveredDevices(devices, options = {}) {
       const viewBtn = document.createElement("button");
       viewBtn.textContent = "View in Config";
       viewBtn.className = "secondary";
-      viewBtn.style.marginLeft = "8px";
-      viewBtn.style.padding = "6px 12px";
-      viewBtn.style.fontSize = "12px";
+      viewBtn.style.marginLeft = "0";
+      viewBtn.style.padding = "4px 9px";
+      viewBtn.style.fontSize = "11px";
       viewBtn.onclick = async () => {
         await loadConfiguredDevices2();
         scrollToConfiguredDevice(d.id);
       };
       li.appendChild(info);
-      const actions = document.createElement("div");
-      actions.style.display = "flex";
-      actions.style.alignItems = "center";
-      actions.appendChild(viewBtn);
-      actions.appendChild(addBtn);
-      li.appendChild(actions);
+      const actions2 = document.createElement("div");
+      actions2.className = "device-actions";
+      actions2.style.display = "flex";
+      actions2.style.alignItems = "center";
+      actions2.style.flexWrap = "wrap";
+      actions2.style.justifyContent = "flex-start";
+      actions2.style.marginLeft = "0";
+      actions2.style.width = "100%";
+      actions2.style.marginTop = "2px";
+      actions2.style.gap = "5px";
+      actions2.appendChild(viewBtn);
+      actions2.appendChild(addBtn);
+      li.appendChild(actions2);
       ul.appendChild(li);
       continue;
     }
+    const actions = document.createElement("div");
+    actions.className = "device-actions";
+    actions.style.display = "flex";
+    actions.style.flexWrap = "wrap";
+    actions.style.justifyContent = "flex-start";
+    actions.style.marginLeft = "0";
+    actions.style.width = "100%";
+    actions.style.marginTop = "2px";
+    actions.style.gap = "5px";
+    actions.appendChild(addBtn);
     li.appendChild(info);
-    li.appendChild(addBtn);
+    li.appendChild(actions);
     ul.appendChild(li);
   }
   return ul;
@@ -1526,6 +1570,7 @@ function renderDeviceList(list) {
     return;
   }
   status.textContent = `Found ${list.length} device(s)`;
+  ul.classList.add("device-grid");
   ul.innerHTML = "";
   if (removeAllContainer) {
     removeAllContainer.style.display = "block";
@@ -1534,21 +1579,32 @@ function renderDeviceList(list) {
     const li = document.createElement("li");
     li.className = "device-item";
     li.setAttribute("data-device-id", normalizeId2(d.id));
+    li.style.display = "flex";
+    li.style.flexDirection = "column";
+    li.style.alignItems = "stretch";
+    li.style.marginBottom = "0";
     const info = document.createElement("div");
-    info.style.flex = "1";
+    info.style.flex = "1 1 auto";
+    info.style.width = "100%";
+    info.style.minWidth = "0";
     const nameContainer = document.createElement("div");
     nameContainer.style.display = "flex";
-    nameContainer.style.alignItems = "center";
-    nameContainer.style.flexWrap = "wrap";
-    nameContainer.style.gap = "6px";
+    nameContainer.style.flexDirection = "column";
+    nameContainer.style.alignItems = "flex-start";
+    nameContainer.style.gap = "0";
     const name = document.createElement("div");
     name.style.fontWeight = "500";
+    name.style.fontSize = "13px";
     name.textContent = d.name || d.id;
     const code = document.createElement("code");
     code.textContent = d.id;
-    code.style.fontSize = "12px";
+    code.style.fontSize = "10px";
     code.style.opacity = "0.75";
-    code.style.marginLeft = "8px";
+    code.style.marginLeft = "0";
+    code.style.whiteSpace = "normal";
+    code.style.overflowWrap = "anywhere";
+    code.style.wordBreak = "break-word";
+    code.style.maxWidth = "100%";
     nameContainer.appendChild(name);
     nameContainer.appendChild(code);
     if (d.rssi !== void 0 && d.rssi !== null && d.rssi !== 0) {
@@ -1557,8 +1613,8 @@ function renderDeviceList(list) {
     }
     const meta = document.createElement("div");
     meta.style.opacity = "0.75";
-    meta.style.marginTop = "4px";
-    meta.style.fontSize = "12px";
+    meta.style.marginTop = "0";
+    meta.style.fontSize = "11px";
     const typeText = d.type ? `type: ${d.type}` : "";
     const connText = d.connectionPreference ? `conn: ${d.connectionPreference}` : "";
     const roomText = d.room ? `room: ${d.room}` : "";
@@ -1566,20 +1622,26 @@ function renderDeviceList(list) {
     info.appendChild(nameContainer);
     info.appendChild(meta);
     const buttons = document.createElement("div");
+    buttons.className = "device-actions";
     buttons.style.display = "flex";
-    buttons.style.gap = "8px";
+    buttons.style.flexWrap = "wrap";
+    buttons.style.justifyContent = "flex-start";
+    buttons.style.marginLeft = "0";
+    buttons.style.width = "100%";
+    buttons.style.marginTop = "2px";
+    buttons.style.gap = "5px";
     const editBtn = document.createElement("button");
     editBtn.textContent = "\u270F\uFE0F Edit";
-    editBtn.style.padding = "6px 12px";
-    editBtn.style.fontSize = "12px";
+    editBtn.style.padding = "4px 9px";
+    editBtn.style.fontSize = "11px";
     editBtn.onclick = async () => {
       const { editDevice: editDevice2 } = await Promise.resolve().then(() => (init_modals(), modals_exports));
       await editDevice2(d);
     };
     const copyBtn = document.createElement("button");
     copyBtn.textContent = "Copy ID";
-    copyBtn.style.padding = "6px 12px";
-    copyBtn.style.fontSize = "12px";
+    copyBtn.style.padding = "4px 9px";
+    copyBtn.style.fontSize = "11px";
     copyBtn.addEventListener("click", async () => {
       try {
         await navigator.clipboard.writeText(d.id);
@@ -1595,8 +1657,8 @@ function renderDeviceList(list) {
     });
     const deleteBtn = document.createElement("button");
     deleteBtn.textContent = "\u{1F5D1}\uFE0F Delete";
-    deleteBtn.style.padding = "6px 12px";
-    deleteBtn.style.fontSize = "12px";
+    deleteBtn.style.padding = "4px 9px";
+    deleteBtn.style.fontSize = "11px";
     deleteBtn.style.background = "#ef4444";
     deleteBtn.onclick = async () => {
       const { deleteDeviceFromConfig: deleteDeviceFromConfig2 } = await Promise.resolve().then(() => (init_devices_delete(), devices_delete_exports));