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

package/CHANGELOG.md

@@ -10,6 +10,8 @@ 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
+- style(ui): give each action row a title with a grey description underneath
 
 ## v11.31.0 (2026-07-24)
 

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

@@ -23,10 +23,17 @@
       border-color: #444444;
       color: #eeeeee;
     }
+
+    .text-muted {
+      color: #aaaaaa !important;
+    }
   }
   .min-w-50 {
     min-width: 50px;
   }
+  .action-desc {
+    font-size: 0.85rem;
+  }
   select {
     background-image:
       linear-gradient(45deg, transparent 50%, gray 50%),
@@ -82,31 +89,46 @@
   </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>
+          <div class="pr-2">
+            <div>Add All Devices</div>
+            <div class="text-muted action-desc">Add all devices to the config that are not already in the config.</div>
+          </div>
+          <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>
+          <div class="pr-2">
+            <div id="deviceConfigTitle">Add This Device</div>
+            <div class="text-muted action-desc" id="deviceConfigText">Add this device to the plugin config.</div>
+          </div>
+          <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>
+          <div class="pr-2">
+            <div id="hideDeviceTitle">Hide This Device</div>
+            <div class="text-muted action-desc" id="hideDeviceText">Hide this device from HomeKit. This adds the device to the config if needed.</div>
+          </div>
+          <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 +403,19 @@
         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('hideDeviceTitle').innerHTML = hidden ? 'Show This Device' : 'Hide This Device'
         document.getElementById('hideDeviceText').innerHTML = hidden
-          ? 'Show this device in HomeKit.'
-          : 'Hide this device from HomeKit.'
+          ? 'Show this device in HomeKit again. The config entry is kept.'
+          : 'Hide this device from HomeKit. This adds the device to the config if needed.'
       }
 
       const setConfigButton = inConfig => {
@@ -397,10 +425,12 @@
         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('deviceConfigTitle').innerHTML = inConfig ? 'Remove This Device' : 'Add This Device'
         document.getElementById('deviceConfigText').innerHTML = inConfig
-          ? 'Removes this device from the config.'
-          : 'Adds this device to the config.'
+          ? 'Remove this device from the plugin config.'
+          : 'Add this device to the plugin config.'
       }
 
       const addDeviceToConfig = (config, acc) => {
@@ -453,8 +483,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.4",
   "description": "Homebridge plugin to integrate Govee devices into HomeKit.",
   "author": {
     "name": "bwp91",