@homebridge-plugins/homebridge-govee 11.32.0-beta.1 → 11.32.0-beta.2

package/CHANGELOG.md

@@ -9,6 +9,7 @@ All notable changes to `@homebridge-plugins/homebridge-govee` will be documented
 - chore(github): use the shared homebridge action to deprecate past pre-releases
 - feat(ui): add and remove devices from the config via the my devices tab (#1323)
 - feat(ui): hide or show a device in homekit from the my devices tab
+- style(ui): present the device config actions as a settings-style list
 
 ## v11.31.0 (2026-07-24)
 

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

@@ -17,6 +17,15 @@
       color: #eeeeee !important;
       font-weight: 500 !important;
     }
+
+    .list-group-item {
+      background-color: #333333;
+      border-color: #444444;
+      color: #eeeeee;
+    }
+  }
+  .min-w-50 {
+    min-width: 50px;
   }
   select {
     background-image:
@@ -77,6 +86,26 @@
         <select class="form-control" id="deviceSelect"></select>
       </div>
     </form>
+    <ul class="list-group mt-2 mb-3 mx-0" id="configActionList" style="display: none;">
+      <li class="list-group-item">
+        <div class="d-flex justify-content-between align-items-center">
+          <span class="pr-2">Adds all devices to the config.</span>
+          <button type="button" class="btn btn-primary m-0 ml-3 py-1 min-w-50" id="addAllBtn">Add All</button>
+        </div>
+      </li>
+      <li class="list-group-item">
+        <div class="d-flex justify-content-between align-items-center">
+          <span class="pr-2" id="deviceConfigText">Adds this device to the config.</span>
+          <button type="button" class="btn btn-primary m-0 ml-3 py-1 min-w-50" id="deviceConfigBtn">Add</button>
+        </div>
+      </li>
+      <li class="list-group-item">
+        <div class="d-flex justify-content-between align-items-center">
+          <span class="pr-2" id="hideDeviceText">Hide this device from HomeKit.</span>
+          <button type="button" class="btn btn-primary m-0 ml-3 py-1 min-w-50" id="hideDeviceBtn">Hide</button>
+        </div>
+      </li>
+    </ul>
     <table class="table w-100 mt-3" id="deviceTable" style="display: none;">
       <thead>
         <tr class="table-active">
@@ -161,24 +190,11 @@
           <th scope="row">Humidity Range</th>
           <td id="humi_range"></td>
         </tr>
-        <tr>
-          <th scope="row">Hide From HomeKit</th>
-          <td>
-            <div class="custom-control custom-checkbox">
-              <input type="checkbox" class="custom-control-input" id="hideDeviceCheck">
-              <label class="custom-control-label" for="hideDeviceCheck">Hide this device from HomeKit</label>
-            </div>
-          </td>
-        </tr>
         <tr>
           <td colspan="2" style="text-align: center" id="image"></td>
         </tr>
       </tbody>
     </table>
-    <div id="configBtnRow" class="text-center mt-2 mb-3" style="display: none;">
-      <button type="button" class="btn btn-primary" id="deviceConfigBtn">Add To Config</button>
-      <button type="button" class="btn btn-secondary" id="addAllBtn">Add All To Config</button>
-    </div>
   </div>
 </div>
 <div id="pageSupport" class="mt-4" style="display: none;">
@@ -365,8 +381,13 @@
         return null
       }
 
-      const setHideCheckbox = hidden => {
-        document.getElementById('hideDeviceCheck').checked = !!hidden
+      const setHideControl = hidden => {
+        const btn = document.getElementById('hideDeviceBtn')
+        btn.dataset.hidden = hidden ? 'yes' : 'no'
+        btn.innerHTML = hidden ? 'Show' : 'Hide'
+        document.getElementById('hideDeviceText').innerHTML = hidden
+          ? 'Show this device in HomeKit.'
+          : 'Hide this device from HomeKit.'
       }
 
       const setConfigButton = inConfig => {
@@ -376,7 +397,10 @@
         btn.dataset.state = inConfig ? 'remove' : 'add'
         btn.classList.remove('btn-danger')
         btn.classList.add('btn-primary')
-        btn.innerHTML = inConfig ? 'Remove From Config' : 'Add To Config'
+        btn.innerHTML = inConfig ? 'Remove' : 'Add'
+        document.getElementById('deviceConfigText').innerHTML = inConfig
+          ? 'Removes this device from the config.'
+          : 'Adds this device to the config.'
       }
 
       const addDeviceToConfig = (config, acc) => {
@@ -405,19 +429,19 @@
             // re-check and never add a duplicate - just correct the button
             if (found) {
               setConfigButton(true)
-              setHideCheckbox(!!config[found.key][found.index].ignoreDevice)
+              setHideControl(!!config[found.key][found.index].ignoreDevice)
               homebridge.toast.info(acc.displayName + ' is already in the config.', 'Not Added')
               return
             }
             addDeviceToConfig(config, acc)
             await homebridge.updatePluginConfig(blocks)
             setConfigButton(true)
-            setHideCheckbox(false)
+            setHideControl(false)
             homebridge.toast.success(acc.displayName + ' added - press Save to apply.', 'Added To Config')
           } else {
             if (!found) {
               setConfigButton(false)
-              setHideCheckbox(false)
+              setHideControl(false)
               homebridge.toast.info(acc.displayName + ' is not in the config.', 'Not Removed')
               return
             }
@@ -429,7 +453,8 @@
               btn.dataset.confirm = 'yes'
               btn.classList.remove('btn-primary')
               btn.classList.add('btn-danger')
-              btn.innerHTML = 'Click Again To Remove (entry has settings)'
+              btn.innerHTML = 'Confirm'
+              document.getElementById('deviceConfigText').innerHTML = 'This entry has extra settings which will be lost - click again to remove it.'
               removeConfirmTimer = setTimeout(() => setConfigButton(true), 5000)
               return
             }
@@ -439,7 +464,7 @@
             }
             await homebridge.updatePluginConfig(blocks)
             setConfigButton(false)
-            setHideCheckbox(false)
+            setHideControl(false)
             homebridge.toast.success(acc.displayName + ' removed - press Save to apply.', 'Removed From Config')
           }
         } catch (err) {
@@ -447,7 +472,7 @@
         }
       })
 
-      document.getElementById('hideDeviceCheck').addEventListener('change', async (e) => {
+      document.getElementById('hideDeviceBtn').addEventListener('click', async () => {
         try {
           const selectedId = document.getElementById('deviceSelect').value
           const acc = pickerAccessories.find(x => x.context.gvDeviceId === selectedId)
@@ -457,7 +482,8 @@
           const blocks = await getConfigBlocks()
           const config = blocks[0]
           let found = findInConfig(config, selectedId)
-          if (e.target.checked) {
+          const currentlyHidden = document.getElementById('hideDeviceBtn').dataset.hidden === 'yes'
+          if (!currentlyHidden) {
             // Hiding needs a config entry to carry the flag, so create one if
             // the device is not in the config yet
             if (!found) {
@@ -467,6 +493,7 @@
             config[found.key][found.index].ignoreDevice = true
             await homebridge.updatePluginConfig(blocks)
             setConfigButton(true)
+            setHideControl(true)
             homebridge.toast.success(acc.displayName + ' will be hidden from HomeKit - press Save to apply.', 'Device Hidden')
           } else {
             if (found) {
@@ -476,6 +503,7 @@
               await homebridge.updatePluginConfig(blocks)
             }
             setConfigButton(!!found)
+            setHideControl(false)
             homebridge.toast.success(acc.displayName + ' will be shown in HomeKit - press Save to apply.', 'Device Unhidden')
           }
         } catch (err) {
@@ -511,7 +539,7 @@
             const nowFound = findInConfig(config, selectedId)
             setConfigButton(!!nowFound)
             if (nowFound) {
-              setHideCheckbox(!!config[nowFound.key][nowFound.index].ignoreDevice)
+              setHideControl(!!config[nowFound.key][nowFound.index].ignoreDevice)
             }
           }
         } catch (err) {
@@ -691,8 +719,8 @@
           const configBlocks = await getConfigBlocks()
           const configEntry = findInConfig(configBlocks[0], context.gvDeviceId)
           setConfigButton(!!configEntry)
-          setHideCheckbox(!!(configEntry && configBlocks[0][configEntry.key][configEntry.index].ignoreDevice))
-          document.getElementById('configBtnRow').style.display = 'block'
+          setHideControl(!!(configEntry && configBlocks[0][configEntry.key][configEntry.index].ignoreDevice))
+          document.getElementById('configActionList').style.display = 'block'
           homebridge.hideSpinner()
         }
         deviceSelect.addEventListener('change', event => showDeviceInfo(event.target.value))
@@ -703,7 +731,7 @@
           option.text = 'No Devices'
           deviceSelect.add(option)
           deviceSelect.disabled = true
-          document.getElementById('configBtnRow').style.display = 'none'
+          document.getElementById('configActionList').style.display = 'none'
         }
         homebridge.hideSpinner()
       }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@homebridge-plugins/homebridge-govee",
   "alias": "Govee",
   "type": "module",
-  "version": "11.32.0-beta.1",
+  "version": "11.32.0-beta.2",
   "description": "Homebridge plugin to integrate Govee devices into HomeKit.",
   "author": {
     "name": "bwp91",