Compact interfaces and edit more things inline

core/templates/mixins/wm/widget.html

@@ -0,0 +1,77 @@
+<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">
+
+      <nav class="panel">
+        <p class="panel-heading" style="padding: .2em; line-height: .5em;">
+          <i class="{{ widget_icon|default:'fa-solid fa-arrows-up-down-left-right' }} has-text-grey-light"></i>
+          {% block close_button %}
+            {% include "mixins/partials/close-widget.html" %}
+          {% endblock %}
+          <i
+            class="fa-solid fa-arrows-minimize has-text-grey-light float-right"
+            onclick="grid.compact();"></i>
+          {% block heading %}
+            {{ title }}
+          {% endblock %}
+        </p>
+        <article class="panel-block is-active">
+          <div class="control">
+            {% block panel_content %}
+              {% include window_content %}
+            {% endblock %}
+          </div>
+        </article>
+      </nav>
+    </div>
+  </div>
+</div>
+
+<script>
+  {% block custom_script %}
+  {% endblock %}
+  var widget_event = new Event("load-widget");
+  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;
+    }
+    var attempts = 0;
+    var timer = window.setInterval(function () {
+      attempts += 1;
+      if (decorateHandle() || attempts > 10) {
+        window.clearInterval(timer);
+      }
+    }, 80);
+  })();
+</script>
+{% block custom_end %}
+{% endblock %}