From d00695cd5135daad7988564e037675a38f0d3e5e Mon Sep 17 00:00:00 2001
From: Darek <idarekj@gmail.com>
Date: Tue, 14 Apr 2026 01:55:29 -0500
Subject: [PATCH] Device detail UI cleanup: battery icon, HA live % unknown
 state, remove redundant entity row

---
 templates/device_detail.html | 41 +++++++++++++++++++++++++++---------
 1 file changed, 31 insertions(+), 10 deletions(-)

diff --git a/templates/device_detail.html b/templates/device_detail.html
index 85069a7..5be7dfa 100644
--- a/templates/device_detail.html
+++ b/templates/device_detail.html
@@ -4,7 +4,30 @@
 {% block content %}
 <h1>{{ device.name }}</h1>
 
-<div class="card">
+<div class="card" style="position:relative;">
+{% if ha_enabled and device.ha_entity_id and ha_live_pct is not none %}
+{% set _pct = ha_live_pct %}
+{% set _fill = ((_pct / 100) * 48) | int %}
+{% if _pct < 20 %}{% set _color = '#ef4444' %}
+{% elif _pct < 60 %}{% set _color = '#f59e0b' %}
+{% else %}{% set _color = '#22c55e' %}{% endif %}
+<div title="HA battery: {{ _pct }}%"
+     style="position:absolute;top:1rem;right:1rem;display:flex;flex-direction:column;align-items:center;gap:0.2rem;opacity:0.9;">
+  <svg width="54" height="26" viewBox="0 0 60 28" xmlns="http://www.w3.org/2000/svg">
+    <rect x="1" y="4" width="52" height="20" rx="3" ry="3"
+          fill="none" stroke="var(--text-muted)" stroke-width="2"/>
+    <rect x="54" y="10" width="5" height="8" rx="1.5"
+          fill="var(--text-muted)"/>
+    {% if _fill > 0 %}
+    <rect x="3" y="6" width="{{ _fill }}" height="16" rx="2"
+          fill="{{ _color }}"/>
+    {% endif %}
+    <text x="27" y="19" text-anchor="middle"
+          font-size="10" font-weight="600" fill="#fff"
+          style="text-shadow:0 0 3px rgba(0,0,0,0.6);">{{ _pct }}%</text>
+  </svg>
+</div>
+{% endif %}
   <table style="width:auto;border:none;">
     <tr>
       <td style="padding:0.3rem 1rem 0.3rem 0;font-weight:600;color:#64748b;border:none;">Slots</td>
@@ -29,23 +52,21 @@
     </tr>
     {% endif %}
     {% if ha_enabled and device.ha_entity_id %}
-    <tr>
-      <td style="padding:0.3rem 1rem 0.3rem 0;font-weight:600;color:#64748b;border:none;">HA Entity</td>
-      <td style="border:none;"><code style="word-break:break-all;">{{ device.ha_entity_id }}</code></td>
-    </tr>
-    {% if ha_live_pct is not none %}
     <tr>
       <td style="padding:0.3rem 1rem 0.3rem 0;font-weight:600;color:#64748b;border:none;">HA Live %</td>
       <td style="border:none;">
-        {% if ha_live_pct < 20 %}
-          <span class="badge badge-warning">⚠ {{ ha_live_pct }}%</span>
+        {% if ha_live_pct is not none %}
+          {% if ha_live_pct < 20 %}
+            <span class="badge badge-warning">⚠ {{ ha_live_pct }}%</span>
+          {% else %}
+            {{ ha_live_pct }}%
+          {% endif %}
         {% else %}
-          {{ ha_live_pct }}%
+          <span class="text-muted">—</span>
         {% endif %}
       </td>
     </tr>
     {% endif %}
-    {% endif %}
   </table>
 </div>