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

package/CHANGELOG.md

@@ -10,6 +10,7 @@ All notable changes to `@homebridge-plugins/homebridge-govee` will be documented
 - 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

@@ -82,31 +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>
-    <ul class="list-group mt-2 mb-3 mx-0" id="configActionList" 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 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>
+          <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 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>
+          <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 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>
+          <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-3" id="deviceTable" style="display: none;">
+    <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>
@@ -381,13 +387,18 @@
         return null
       }
 
+      // 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 = hidden ? 'Show' : 'Hide'
+        btn.innerHTML = actionArrow
+        btn.setAttribute('aria-label', hidden ? 'Show this device in HomeKit' : 'Hide this device from HomeKit')
         document.getElementById('hideDeviceText').innerHTML = hidden
-          ? 'Show this device in HomeKit.'
-          : 'Hide this device from HomeKit.'
+          ? 'Show <strong>this</strong> device in HomeKit'
+          : 'Hide <strong>this</strong> device from HomeKit'
       }
 
       const setConfigButton = inConfig => {
@@ -397,10 +408,11 @@
         btn.dataset.state = inConfig ? 'remove' : 'add'
         btn.classList.remove('btn-danger')
         btn.classList.add('btn-primary')
-        btn.innerHTML = inConfig ? 'Remove' : 'Add'
+        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 this device from the config.'
-          : 'Adds this device to the config.'
+          ? 'Removes <strong>this</strong> device from the config'
+          : 'Adds <strong>this</strong> device to the config'
       }
 
       const addDeviceToConfig = (config, acc) => {
@@ -453,8 +465,9 @@
               btn.dataset.confirm = 'yes'
               btn.classList.remove('btn-primary')
               btn.classList.add('btn-danger')
-              btn.innerHTML = 'Confirm'
-              document.getElementById('deviceConfigText').innerHTML = 'This entry has extra settings which will be lost - click again to remove it.'
+              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
             }

package/package.json

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