Integrate Alpine.js for reactive UI

- Add Alpine.js (self-hosted, embedded in static/)
- Refactor app.js to use Alpine.js stores and components
- Update templates to use x-data, x-bind, x-show, x-text directives
- Add reactive deploy button state, live logs, status badges
- Add auto-dismiss alerts with close button and transitions
- Add copy-to-clipboard component with feedback
- Add confirm dialog component for destructive actions
- Add relative time component with auto-update
- Add prettier to make fmt target for JS formatting

templates/deployments.html

@@ -5,7 +5,7 @@
 {{define "content"}}
 {{template "nav" .}}
 
-<main class="max-w-4xl mx-auto px-4 py-8">
+<main class="max-w-4xl mx-auto px-4 py-8" x-data="deploymentsPage({ appId: '{{.App.ID}}' })">
     <div class="mb-6">
         <a href="/apps/{{.App.ID}}" class="text-primary-600 hover:text-primary-800 inline-flex items-center">
             <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -17,19 +17,21 @@
 
     <div class="section-header">
         <h1 class="text-2xl font-medium text-gray-900">Deployment History</h1>
-        <form id="deploy-form" method="POST" action="/apps/{{.App.ID}}/deploy">
-            <button id="deploy-btn" type="submit" class="btn-success">Deploy Now</button>
+        <form method="POST" action="/apps/{{.App.ID}}/deploy" @submit="submitDeploy()">
+            <button type="submit" class="btn-success" x-bind:disabled="isDeploying" x-bind:class="{ 'opacity-50 cursor-not-allowed': isDeploying }">
+                <span x-text="isDeploying ? 'Deploying...' : 'Deploy Now'"></span>
+            </button>
         </form>
     </div>
 
     <!-- Live Build Logs (shown during active deployment) -->
-    <div id="live-logs-section" class="card p-6 mb-4" style="display: none;">
+    <div class="card p-6 mb-4" x-show="showLiveLogs" x-cloak>
         <div class="flex items-center justify-between mb-4">
             <h2 class="section-title">Live Build Logs</h2>
-            <span id="live-status" class="badge-neutral text-xs">Building</span>
+            <span x-bind:class="liveStatusBadgeClass" x-text="liveStatusLabel"></span>
         </div>
-        <div id="live-logs-wrapper" class="bg-gray-900 rounded-lg p-4 overflow-auto" style="max-height: 400px;">
-            <pre id="live-logs" class="text-gray-100 text-xs font-mono whitespace-pre-wrap">Waiting for logs...</pre>
+        <div x-ref="liveLogsWrapper" class="bg-gray-900 rounded-lg p-4 overflow-auto" style="max-height: 400px;">
+            <pre class="text-gray-100 text-xs font-mono whitespace-pre-wrap" x-text="liveLogs"></pre>
         </div>
     </div>
 
@@ -42,7 +44,7 @@
                     <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                     </svg>
-                    <span class="relative-time" data-time="{{.StartedAt.Format "2006-01-02T15:04:05Z07:00"}}" title="{{.StartedAt.Format "2006-01-02 15:04:05"}}">{{.StartedAt.Format "2006-01-02 15:04:05"}}</span>
+                    <span x-data="relativeTime('{{.StartedAt.Format `2006-01-02T15:04:05Z07:00`}}')" x-text="display" title="{{.StartedAt.Format `2006-01-02 15:04:05`}}"></span>
                     {{if .FinishedAt.Valid}}
                     <span class="text-gray-400">•</span>
                     <span>{{.Duration}}</span>
@@ -100,8 +102,10 @@
                 <h3 class="empty-state-title">No deployments yet</h3>
                 <p class="empty-state-description">Deploy your application to see the deployment history here.</p>
                 <div class="mt-6">
-                    <form id="deploy-form-empty" method="POST" action="/apps/{{.App.ID}}/deploy">
-                        <button id="deploy-btn-empty" type="submit" class="btn-success">Deploy Now</button>
+                    <form method="POST" action="/apps/{{.App.ID}}/deploy" @submit="submitDeploy()">
+                        <button type="submit" class="btn-success" x-bind:disabled="isDeploying" x-bind:class="{ 'opacity-50 cursor-not-allowed': isDeploying }">
+                            <span x-text="isDeploying ? 'Deploying...' : 'Deploy Now'"></span>
+                        </button>
                     </form>
                 </div>
             </div>
@@ -109,10 +113,4 @@
         {{end}}
     </div>
 </main>
-
-<script>
-upaas.initDeploymentsPage({
-    appId: "{{.App.ID}}"
-});
-</script>
 {{end}}