Improve insights and continue WhatsApp implementation

core/templates/mixins/wm/widget.html

@@ -1,6 +1,9 @@
 <div id="widget">
   <div id="widget-{{ unique }}" class="grid-stack-item" {% block widget_options %}{% if widget_options is None %}gs-w="6" gs-h="1" gs-y="20" gs-x="0"{% else %}{% autoescape off %}{{ widget_options }}{% endautoescape %}{% endif %}{% endblock %}>
     <div class="grid-stack-item-content">
+      <span class="gia-widget-focus-indicator" aria-hidden="true">
+        <i class="{{ widget_icon|default:'fa-solid fa-circle' }}"></i>
+      </span>
 
       <nav class="panel">
         <p class="panel-heading" style="padding: .2em; line-height: .5em;">
@@ -27,6 +30,36 @@
   </div>
 </div>
 
+<style>
+  #widget-{{ unique }} .grid-stack-item-content {
+    position: relative;
+  }
+  #widget-{{ unique }} .gia-widget-focus-indicator {
+    position: absolute;
+    left: 0.32rem;
+    top: 50%;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.7rem;
+    color: #2f5f9f;
+    background: rgba(235, 244, 255, 0.92);
+    border: 1px solid rgba(47, 95, 159, 0.3);
+    opacity: 0;
+    transform: translateY(-50%) scale(0.92);
+    transition: opacity 120ms ease, transform 120ms ease;
+    pointer-events: none;
+    z-index: 3;
+  }
+  #widget-{{ unique }}.is-widget-active .gia-widget-focus-indicator {
+    opacity: 1;
+    transform: translateY(-50%) scale(1);
+  }
+</style>
+
 <script>
   {% block custom_script %}
   {% endblock %}
@@ -34,43 +67,22 @@
   document.dispatchEvent(widget_event);
   (function () {
     var widgetRoot = document.getElementById("widget-{{ unique }}");
-    var iconClass = "{{ widget_icon|default:'fa-solid fa-arrows-minimize'|escapejs }}";
-    function decorateHandle() {
-      if (!widgetRoot) {
-        return true;
-      }
-      var handles = widgetRoot.querySelectorAll(".ui-resizable-se");
-      if (!handles.length) {
-        handles = widgetRoot.querySelectorAll(".ui-resizable-handle");
-      }
-      if (!handles.length) {
-        return false;
-      }
-      handles.forEach(function (handle) {
-        if (handle.dataset.iconApplied === "1") {
-          return;
-        }
-        handle.dataset.iconApplied = "1";
-        handle.style.display = "flex";
-        handle.style.alignItems = "center";
-        handle.style.justifyContent = "center";
-        handle.style.overflow = "hidden";
-        var icon = document.createElement("i");
-        icon.className = iconClass + " has-text-grey-light";
-        icon.style.fontSize = "0.65rem";
-        icon.style.opacity = "0.65";
-        icon.style.pointerEvents = "none";
-        handle.appendChild(icon);
-      });
-      return true;
+    if (!widgetRoot) {
+      return;
     }
-    var attempts = 0;
-    var timer = window.setInterval(function () {
-      attempts += 1;
-      if (decorateHandle() || attempts > 10) {
-        window.clearInterval(timer);
-      }
-    }, 80);
+
+    function setActive() {
+      document.querySelectorAll(".grid-stack-item.is-widget-active").forEach(function (node) {
+        if (node !== widgetRoot) {
+          node.classList.remove("is-widget-active");
+        }
+      });
+      widgetRoot.classList.add("is-widget-active");
+    }
+
+    widgetRoot.addEventListener("mousedown", setActive);
+    widgetRoot.addEventListener("focusin", setActive);
+    window.setTimeout(setActive, 0);
   })();
 </script>
 {% block custom_end %}