fix: UI overhaul — align all HTMX views with Lumina Design System (46 fixes)

- All 7 pages rewritten: Dashboard, Terminal, Snippets, Keychain, SFTP, Settings, Brief
- Apply consistent Lumina glassmorphic theme (rounded-2xl, shadows, borders, tracking)
- Fix SVG icons not rendering — return template.HTML instead of string
- Fix Alpine x-data scoping: terminal tabs, SFTP modals, snippet tag buttons
- Fix dashboard search sending literal ?q=...
- Rebuild CSS with all new Tailwind classes (62KB)
- Add .air.toml with hot-reload config, docs/PERBAIKANUI.md checklist
- Remove unused backup partials
This commit is contained in:
swanadiva
2026-07-07 14:55:42 +07:00
parent fd7361aa14
commit 8357d9d76e
29 changed files with 3321 additions and 924 deletions
+14 -25
View File
@@ -2,7 +2,7 @@
> **Purpose**: Memungkinkan AI agent berikutnya melanjutkan development tanpa mengulang atau merusak.
> **Last Updated**: 2026-07-07
> **Current Phase**: Sprint 0—6 selesai (V2 HTMX feature complete)
> **Current Phase**: UI Fix — memperbaiki 107 visual issue dari `docs/PERBAIKANUI.md`
---
@@ -35,7 +35,8 @@ hostkeeper/ (root — bersih untuk V2)
│ ├── TIMELINE.md Timeline 3.5 minggu
│ ├── PERFROMANCE.md Performance & stability
│ ├── UI_TERMIUS_REFERENCE.md Termius visual reference
── PROGRESS.md Status tracker
── PROGRESS.md Status tracker
│ └── PERBAIKANUI.md UI fix checklist (107 task)
├── AGENTS.md ← file ini (checkpoint AI)
└── README.md
@@ -118,12 +119,11 @@ Alasan:
- **Sprint 5**: Terminal + xterm.js + WebSocket mock shell, tab management
- **Sprint 6**: JSON file persistence (store package), `go.mod replace` directive for V1 crypto+knownhosts, model SSH fields, real SSH client for terminal (falls back to mock), dynamic host list from server
### 🐛 Bug Template (dari template/src/ — catatan saat implementasi)
1. **P0**: Missing CSS keyframes (fade-in, scale-up, slide-in) → tambah di `custom.css`
2. **P1**: `w-4.5 h-4.5` → ganti `w-5 h-5`
3. **P2**: Tidak ada Error Boundary → not applicable (HTML template)
4. **P2**: `as any` casts → not applicable (Go typed)
5. **P3**: Auto-focus loss → handle via JS `focus()` di Alpine
### 🐛 UI Fix Checklist — Lihat `docs/PERBAIKANUI.md`
- **107 task** teridentifikasi dari audit visual vs template React
- Acuan utama: 7 file di `template/src/components/`
- Setiap task dihapus dari checklist setelah selesai
- Urutan: Dashboard (P0) → Terminal (P0) → Snippets (P0) → Keychain/SFTP/Settings/Brief (P1)
---
@@ -181,24 +181,12 @@ app/backend/
---
## 6. Yang Harus Dilakukan Selanjutnya (First Actions)
## 6. Yang Harus Dilakukan Selanjutnya (UI Fix)
Urutan eksekusi saat development dimulai:
```
Sprint 0 — Setup:
Step 1: mkdir -p app/backend
Step 2: cd app/backend && go mod init git.tukangketik.id/swanadiva/hostkeeper/v2
Step 3: go get github.com/gofiber/fiber/v2
Step 4: go get github.com/gofiber/template/html/v2
Step 5: Buat main.go (Fiber app skeleton + static + template engine)
Step 6: Download htmx.min.js, alpine.min.js ke static/js/
Step 7: Setup TailwindCSS v4: input.css → npx @tailwindcss/cli
Step 8: Buat custom.css (dot-grid, glassmorphism, keyframes)
Step 9: Buat views/layout.html + views/index.html + nav.html
Step 10: Buat handler/health.go + handler/dashboard.go
Step 11: Verify: buka http://localhost:1947 — layout terlihat
```
1. Baca `docs/PERBAIKANUI.md` — 107 task teridentifikasi
2. Urutan: Dashboard (P0) → Terminal (P0) → Snippets (P0) → Keychain (P1) → SFTP (P1) → Settings (P1) → Brief (P1) → Global (P1)
3. Setiap selesai satu task, hapus dari checklist `docs/PERBAIKANUI.md`
4. Verify: `cd app/backend && go build && ./backend` lalu buka http://localhost:1947
---
@@ -214,6 +202,7 @@ Step 11: Verify: buka http://localhost:1947 — layout terlihat
| Timeline 3.5 minggu | `docs/TIMELINE.md` |
| Build system | `docs/BUILD_SYSTEM.md` |
| Status tracker | `docs/PROGRESS.md` |
| UI fix checklist | `docs/PERBAIKANUI.md` |
| Template desain (React) | `template/AGENTS.md` (Lumina System) |
| Template komponen (referensi) | `template/src/components/` |
| V1 shared packages | `v1/pkg/ssh/`, `v1/pkg/crypto/`, `v1/pkg/storage/`, `v1/pkg/config/`, `v1/pkg/knownhosts/` |