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
This commit is contained in:
2026-01-01 05:37:46 +07:00
parent ab7e917b03
commit f1cc7d65a6
7 changed files with 553 additions and 723 deletions

View File

@@ -5,7 +5,7 @@
{{define "content"}}
{{template "nav" .}}
<main class="max-w-6xl mx-auto px-4 py-8">
<main class="max-w-6xl mx-auto px-4 py-8" x-data="dashboard()">
{{template "alert-success" .}}
{{template "alert-error" .}}
@@ -58,9 +58,7 @@
</td>
<td class="text-gray-500 text-sm">
{{if .LastDeployTime}}
<span class="relative-time cursor-default" data-time="{{.LastDeployISO}}" title="{{.LastDeployLabel}}">
{{.LastDeployLabel}}
</span>
<span x-data="relativeTime('{{.LastDeployISO}}')" x-text="display" class="cursor-default" title="{{.LastDeployLabel}}"></span>
{{else}}
<span class="text-gray-400">-</span>
{{end}}