Renovate mitigation panels and messages

core/templates/base.html

@@ -60,6 +60,41 @@
           });
         });
 
+        const composeLink = document.getElementById('nav-compose-link');
+        const composeDropdown = document.getElementById('nav-compose-contacts');
+        let composePreviewLoaded = false;
+        let composePreviewLoading = false;
+        if (composeLink && composeDropdown) {
+          composeLink.addEventListener('mouseenter', () => {
+            const previewUrl = composeLink.dataset.previewUrl || '';
+            if (!previewUrl || composePreviewLoaded || composePreviewLoading) {
+              return;
+            }
+            composePreviewLoading = true;
+            fetch(previewUrl, {
+              method: 'GET',
+              credentials: 'same-origin',
+              headers: { 'HX-Request': 'true' },
+            })
+              .then((response) => {
+                if (!response.ok) {
+                  throw new Error('Failed contacts preview fetch.');
+                }
+                return response.text();
+              })
+              .then((html) => {
+                composeDropdown.innerHTML = html;
+                composePreviewLoaded = true;
+              })
+              .catch(() => {
+                composePreviewLoaded = false;
+              })
+              .finally(() => {
+                composePreviewLoading = false;
+              });
+          });
+        }
+
       });
     </script>
     <style>
@@ -274,16 +309,25 @@
           {% if user.is_authenticated %}
             <div class="navbar-item has-dropdown is-hoverable">
               <a
+                id="nav-compose-link"
                 class="navbar-link"
-                hx-get="{% url 'compose_contacts_dropdown' %}"
+                data-preview-url="{% url 'compose_contacts_dropdown' %}"
+                data-full-url="{% url 'compose_contacts_dropdown' %}?all=1"
+                hx-get="{% url 'compose_contacts_dropdown' %}?all=1"
                 hx-target="#nav-compose-contacts"
-                hx-trigger="click once"
+                hx-trigger="click"
                 hx-swap="innerHTML">
                 <span class="icon is-small"><i class="fa-solid fa-paper-plane"></i></span>
                 <span style="margin-left: 0.35rem;">Message</span>
               </a>
               <div class="navbar-dropdown" id="nav-compose-contacts">
-                <a class="navbar-item is-disabled">Load contacts</a>
+                <a
+                  class="navbar-item"
+                  hx-get="{% url 'compose_contacts_dropdown' %}?all=1"
+                  hx-target="#nav-compose-contacts"
+                  hx-swap="innerHTML">
+                  Fetch Contacts
+                </a>
               </div>
             </div>
             <a class="navbar-item" href="{% url 'ai_workspace' %}">