feat: Implement frontend asset build process and update Docker configuration

- Added a new build script using esbuild to bundle JavaScript and CSS assets, including Tailwind CSS and Font Awesome.
- Updated the Dockerfile to include a multi-stage build process for frontend assets, ensuring efficient image creation.
- Enhanced GitHub workflows to automate the installation of Node.js dependencies and build frontend assets during CI/CD.
- Introduced a .gitignore entry for the dist directory to prevent unnecessary files from being tracked.
- Improved caching and content type handling for static files served by the application.

static/css/app.css

@@ -1,3 +1,54 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Custom styles */
+html, body {
+  margin: 0;
+  padding: 0;
+  overflow-x: hidden;
+  width: 100%;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+.pb-mobile-nav {
+  padding-bottom: 4rem;
+}
+
+@media (min-width: 640px) {
+  .pb-mobile-nav {
+    padding-bottom: 0;
+  }
+}
+
+/* Dark mode styles */
+body.dark {
+  background-color: #111827; /* gray-900 */
+}
+
+body.dark .configs-page, 
+body.dark .jobs-page {
+  background-color: #111827 !important; /* gray-900 */
+  min-height: 100vh;
+}
+
+#jobs-container.dark, #configs-container.dark {
+  background-color: #111827 !important;
+  min-height: 100vh;
+}
+
+body.dark .bg-white {
+  background-color: #1f2937 !important;
+}
+
 /* Base styles */
 :root {
     --primary-color: #2563eb;

static/js/init.js

@@ -0,0 +1,32 @@
+// Add script to ensure dark mode is properly applied
+document.addEventListener('DOMContentLoaded', function() {
+    // Apply body dark class when theme changes
+    const isDark = document.documentElement.classList.contains('dark');
+    if (isDark) {
+        document.body.classList.add('dark');
+        
+        // Also apply to containers
+        const jobsContainer = document.getElementById('jobs-container');
+        const configsContainer = document.getElementById('configs-container');
+        
+        if (jobsContainer) jobsContainer.classList.add('dark');
+        if (configsContainer) configsContainer.classList.add('dark');
+    }
+
+    // Initialize admin dropdown toggle if available
+    const adminDropdownToggle = document.querySelector('[data-collapse-toggle="dropdown-settings"]');
+    const adminDropdown = document.getElementById('dropdown-settings');
+    
+    if (adminDropdownToggle && adminDropdown) {
+        // Check if we should show the dropdown (if current page is under admin section)
+        const currentPath = window.location.pathname;
+        if (currentPath.startsWith('/admin')) {
+            adminDropdown.classList.remove('hidden');
+        }
+
+        // Add click event listener
+        adminDropdownToggle.addEventListener('click', function() {
+            adminDropdown.classList.toggle('hidden');
+        });
+    }
+}); 

static/js/vendor.js

@@ -0,0 +1,53 @@
+// Import HTMX
+import 'htmx.org';
+
+// Import Alpine.js
+import Alpine from 'alpinejs';
+window.Alpine = Alpine;
+
+// Import Flowbite
+import 'flowbite';
+import 'flowbite/dist/flowbite.css';
+
+// Initialize Flowbite components
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize Alpine.js
+    Alpine.start();
+    
+    // Initialize Flowbite modals
+    const modalTriggers = document.querySelectorAll('[data-modal-target]');
+    modalTriggers.forEach(trigger => {
+        const targetId = trigger.getAttribute('data-modal-target');
+        const targetModal = document.getElementById(targetId);
+        if (targetModal) {
+            // Show modal
+            trigger.addEventListener('click', () => {
+                targetModal.classList.remove('hidden');
+                targetModal.classList.add('flex');
+                // Add backdrop
+                document.body.style.overflow = 'hidden';
+            });
+            
+            // Handle modal hide buttons
+            const hideButtons = targetModal.querySelectorAll('[data-modal-hide]');
+            hideButtons.forEach(button => {
+                button.addEventListener('click', () => {
+                    targetModal.classList.add('hidden');
+                    targetModal.classList.remove('flex');
+                    // Remove backdrop
+                    document.body.style.overflow = '';
+                });
+            });
+
+            // Handle clicking outside the modal
+            targetModal.addEventListener('click', (event) => {
+                if (event.target === targetModal || event.target.classList.contains('fixed')) {
+                    targetModal.classList.add('hidden');
+                    targetModal.classList.remove('flex');
+                    // Remove backdrop
+                    document.body.style.overflow = '';
+                }
+            });
+        }
+    });
+});