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

package/CHANGELOG.md

@@ -9,6 +9,8 @@ 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
+- style(ui): polish the action list - consistent spacing, arrow buttons, bold emphasis
 
 ## 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:
@@ -73,11 +82,37 @@
   </div>
   <div id="deviceInfo">
     <form>
-      <div class="form-group">
+      <div class="form-group mb-0">
         <select class="form-control" id="deviceSelect"></select>
       </div>
     </form>
-    <table class="table w-100 mt-3" id="deviceTable" style="display: none;">
+    <ul class="list-group mt-4 mb-4 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 <strong>all</strong> devices to the config</span>
+          <button type="button" class="btn btn-primary m-0 ml-3 py-1 min-w-50" id="addAllBtn" aria-label="Add all devices to the config">
+            <i aria-hidden="true" class="fas fa-arrow-right"></i>
+          </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 <strong>this</strong> device to the config</span>
+          <button type="button" class="btn btn-primary m-0 ml-3 py-1 min-w-50" id="deviceConfigBtn" aria-label="Add this device to the config">
+            <i aria-hidden="true" class="fas fa-arrow-right"></i>
+          </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 <strong>this</strong> device from HomeKit</span>
+          <button type="button" class="btn btn-primary m-0 ml-3 py-1 min-w-50" id="hideDeviceBtn" aria-label="Hide this device from HomeKit">
+            <i aria-hidden="true" class="fas fa-arrow-right"></i>
+          </button>
+        </div>
+      </li>
+    </ul>
+    <table class="table w-100 mt-0" id="deviceTable" style="display: none;">
       <thead>
         <tr class="table-active">
           <th scope="col" style="width: 40%;">Device Name</th>
@@ -161,24 +196,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 +387,18 @@
         return null
       }
 
-      const setHideCheckbox = hidden => {
-        document.getElementById('hideDeviceCheck').checked = !!hidden
+      // The action buttons always show the settings-page arrow; the row text
+      // (and the button's aria-label) says what the arrow will do
+      const actionArrow = '<i aria-hidden="true" class="fas fa-arrow-right"></i>'
+
+      const setHideControl = hidden => {
+        const btn = document.getElementById('hideDeviceBtn')
+        btn.dataset.hidden = hidden ? 'yes' : 'no'
+        btn.innerHTML = actionArrow
+        btn.setAttribute('aria-label', hidden ? 'Show this device in HomeKit' : 'Hide this device from HomeKit')
+        document.getElementById('hideDeviceText').innerHTML = hidden
+          ? 'Show <strong>this</strong> device in HomeKit'
+          : 'Hide <strong>this</strong> device from HomeKit'
       }
 
       const setConfigButton = inConfig => {
@@ -376,7 +408,11 @@
         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 = actionArrow
+        btn.setAttribute('aria-label', inConfig ? 'Remove this device from the config' : 'Add this device to the config')
+        document.getElementById('deviceConfigText').innerHTML = inConfig
+          ? 'Removes <strong>this</strong> device from the config'
+          : 'Adds <strong>this</strong> device to the config'
       }
 
       const addDeviceToConfig = (config, acc) => {
@@ -405,19 +441,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 +465,9 @@
               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 = actionArrow
+              btn.setAttribute('aria-label', 'Confirm removing this device from the config')
+              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 +477,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 +485,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 +495,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 +506,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 +516,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 +552,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 +732,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 +744,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.3",
   "description": "Homebridge plugin to integrate Govee devices into HomeKit.",
   "author": {
     "name": "bwp91",