style: Simplify loading overlay display in dashboard.html and add optional Alpine.js script in layout.html

Author: 9trocode

ui/templates/dashboard.html

@@ -93,7 +93,7 @@
 
         <!-- Request Detail Placeholder/Content -->
         <div id="request-detail" class="flex-1 overflow-hidden flex flex-col relative transition-opacity duration-150">
-            <!-- Loading overlay (CSS-only, no Vue transition) -->
+            <!-- Loading overlay -->
             <div id="loading-overlay" class="absolute inset-0 bg-slate-950/80 backdrop-blur-sm z-10 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-200" style="display: none;">
                 <div class="text-center">
                     <div class="w-8 h-8 border-2 border-brand-500 border-t-transparent rounded-full animate-spin mx-auto mb-2"></div>
@@ -539,7 +539,7 @@
             // End Request Detail Functions
             // ============================================
 
-            // Apply colors to request items and dropdown after Vue is mounted
+            // Apply colors to request items and dropdown on page load
             function applyEndpointColors() {
                 document.querySelectorAll("[data-endpoint-id]").forEach(el => {
                     const endpointId = el.getAttribute("data-endpoint-id");

ui/templates/layout.html

@@ -6,7 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>PipeHooks</title>
     <link rel="icon" type="image/svg+xml" href="/static/pipehook.svg">
-    <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
+    <!-- Alpine.js for lightweight interactivity (optional, add if needed) -->
+    <!-- <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script> -->
     <script src="https://unpkg.com/htmx.org@1.9.10"></script>
     <script src="https://unpkg.com/htmx.org@1.9.10/dist/ext/sse.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
@@ -26,35 +27,6 @@
         .fade-in {
             animation: fadeIn 0.2s ease-in-out;
         }
-        /* Vue transitions */
-        .fade-enter-active, .fade-leave-active {
-            transition: opacity 0.2s ease-in-out;
-        }
-        .fade-enter-from, .fade-leave-to {
-            opacity: 0;
-        }
-        .dropdown-enter-active, .dropdown-leave-active {
-            transition: all 0.2s ease-out;
-        }
-        .dropdown-enter-from {
-            opacity: 0;
-            transform: translateY(-10px) scale(0.95);
-        }
-        .dropdown-leave-to {
-            opacity: 0;
-            transform: translateY(-10px) scale(0.95);
-        }
-        .slide-enter-active, .slide-leave-active {
-            transition: all 0.3s ease;
-        }
-        .slide-enter-from {
-            opacity: 0;
-            transform: translateX(-20px);
-        }
-        .slide-leave-to {
-            opacity: 0;
-            transform: translateX(20px);
-        }
     </style>
     <script>
         tailwind.config = {