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
@@ -0,0 +1,344 @@
|
||||
# 🔍 Hostkeeper V2 — UI/UX Audit & Perbaikan Checklist
|
||||
|
||||
> **Acuan perbaikan UI** — Bandingkan HTMX implementation dengan React template di `template/src/components/`
|
||||
> **Target**: Menyamakan visual dengan Lumina Design System hingga level piksel
|
||||
> **Last Updated**: 2026-07-07
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Design System Reference
|
||||
|
||||
| Token | Value | Status |
|
||||
|-------|-------|--------|
|
||||
| Primary | `#0050cb` | ✅ OK |
|
||||
| Secondary | `#006e2f` | ✅ OK |
|
||||
| Tertiary | `#7e23cc` | ✅ OK |
|
||||
| Surface | `#f7f9fb` | ✅ OK |
|
||||
| On Surface | `#191c1e` | ✅ OK |
|
||||
| On Surface Variant | `#424656` | ✅ OK |
|
||||
| Outline | `#727686` | ✅ OK |
|
||||
| Outline Variant | `#c2c6d8` | ✅ OK |
|
||||
| Error | `#b3261e` | ✅ OK |
|
||||
| Surface Container Low | `#f0f2f5` | ✅ OK |
|
||||
| Surface Container | `#eaecf0` | ✅ OK |
|
||||
| Font Sans | Inter (300–900) | ✅ OK |
|
||||
| Font Mono | JetBrains Mono (300–700) | ✅ OK |
|
||||
| Dot Grid | `radial-gradient(#e2e8f0 1.5px, transparent 1.5px) 16px` | ✅ OK |
|
||||
| Sidebar Width | `260px` | ✅ OK |
|
||||
|
||||
---
|
||||
|
||||
## 🔴 P0 — DASHBOARD (index.html + host_list.html + host_modal.html)
|
||||
|
||||
### ~~Task #1: Banner Stats~~ ✅ Selesai
|
||||
|
||||
### ~~Task #2: Status Filter~~ ✅ Selesai
|
||||
|
||||
### ~~Task #3: Search Bar~~ ✅ Selesai
|
||||
|
||||
### ~~Task #4: View Toggle~~ ✅ Selesai
|
||||
|
||||
### ~~Task #5: Section Title~~ ✅ Selesai
|
||||
|
||||
### ~~Task #6: Host Card Grid~~ ✅ Selesai
|
||||
|
||||
### ~~Task #7: Add Host Card~~ ✅ Selesai
|
||||
|
||||
### ~~Task #8: Host Card List~~ ✅ Selesai
|
||||
|
||||
---
|
||||
|
||||
### Task #9: Transfer Panel
|
||||
|
||||
**Referensi**: `template/src/components/DashboardView.tsx:306-356`
|
||||
|
||||
Template punya section "Background Transfers" dengan:
|
||||
- Line separator + judul
|
||||
- Table header: Source & File | Destination | Progress
|
||||
- Tiap row: icon (download=tertiary/upload=primary), nama file, source, destination panah, progress bar (h-1.5, bg-secondary, shadow), percentage + speed
|
||||
|
||||
HTMX: Hanya "No active transfers" di sidebar ❌
|
||||
|
||||
**Files**: `app/backend/views/index.html` + `app/backend/views/host_list.html`
|
||||
|
||||
---
|
||||
|
||||
### ~~Task #10: Add Host Modal~~ ✅ Selesai
|
||||
|
||||
---
|
||||
|
||||
## 🔴 P0 — TERMINAL (terminal.html + terminal.js)
|
||||
|
||||
### Task #11: Ubah theme dari dark ke light (Lumina)
|
||||
|
||||
**Referensi**: `template/src/components/TerminalView.tsx:208-284`
|
||||
|
||||
| Detail | Template (wajib) | HTMX Saat Ini |
|
||||
|--------|----------|---------------|
|
||||
| Background terminal | `bg-white` | `bg-[#0d1117]` ❌ |
|
||||
| Tab bar | `bg-surface-container-low` | `bg-[#161b22]` ❌ |
|
||||
| Tab border | `border-b border-outline-variant/30` | `border-[#30363d]` ❌ |
|
||||
| Tab active | `bg-white text-primary border-primary shadow` | `bg-[#0d1117] text-white border-t-2 border-[#58a6ff]` ❌ |
|
||||
| Tab inactive | `bg-surface-container-low text-on-surface-variant` | `bg-[#161b22] text-[#8b949e]` ❌ |
|
||||
| Tab close | `hover:bg-black/10 rounded` | `hover:bg-[#30363d]` ❌ |
|
||||
| New tab button | `bg-surface-container hover:bg-primary-container hover:text-on-primary-container` | styling dark ❌ |
|
||||
| Terminal header | `bg-surface-container-low border-b border-outline-variant/30` | tidak ada |
|
||||
|
||||
**Files**: `app/backend/views/terminal.html`
|
||||
|
||||
---
|
||||
|
||||
### Task #12: Traffic Light Dots
|
||||
|
||||
**Referensi**: `template/src/components/TerminalView.tsx:212-216`
|
||||
|
||||
Tambah 3 dot (red `#b3261e`, yellow `#d6e3ff` / kuning, green `#006e2f`) di kiri terminal header.
|
||||
|
||||
**Files**: `app/backend/views/terminal.html`
|
||||
|
||||
---
|
||||
|
||||
### Task #13: SSH Connection String
|
||||
|
||||
**Referensi**: `template/src/components/TerminalView.tsx:216`
|
||||
|
||||
Tampilkan teks: `ssh -i id_ed25519 root@{host.ip}` dengan `text-[10px] font-mono font-bold text-outline`
|
||||
|
||||
**Files**: `app/backend/views/terminal.html`
|
||||
|
||||
---
|
||||
|
||||
### Task #14: "Clear Buffer" Button
|
||||
|
||||
**Referensi**: `template/src/components/TerminalView.tsx:219-232`
|
||||
|
||||
Button `text-[10px] uppercase font-bold text-outline hover:text-primary` dengan `RefreshCw` icon.
|
||||
|
||||
**Files**: `app/backend/views/terminal.html`
|
||||
|
||||
---
|
||||
|
||||
### Task #15: Terminal Output Styles
|
||||
|
||||
**Referensi**: `template/src/components/TerminalView.tsx:241-255`
|
||||
|
||||
| Type | Template | HTMX |
|
||||
|------|----------|------|
|
||||
| input | `text-on-surface font-bold` | (xterm.js) |
|
||||
| error | `text-error bg-error-container/20 px-2.5 py-1 rounded-md` | (xterm.js) |
|
||||
| success | `text-[#006e2f] bg-secondary-container/10 px-2.5 py-1 rounded-md font-semibold` | (xterm.js) |
|
||||
| output | `text-[#2244aa]` | (xterm.js) |
|
||||
|
||||
Ini perlu disesuaikan di terminal.js / xterm theme.
|
||||
|
||||
**Files**: `app/backend/static/js/terminal.js`, `app/backend/views/terminal.html`
|
||||
|
||||
---
|
||||
|
||||
### Task #16: Input Prompt Bar
|
||||
|
||||
**Referensi**: `template/src/components/TerminalView.tsx:259-283`
|
||||
|
||||
| Detail | Template | HTMX |
|
||||
|--------|----------|------|
|
||||
| Background | `bg-surface-container-low` | dark ❌ |
|
||||
| Prompt | `root@{host}:~$` dengan icon `CornerDownLeft` | (di mock WebSocket) |
|
||||
| Input | `bg-transparent font-mono text-xs focus:ring-0` | (xterm.js) |
|
||||
| Execute button | `bg-primary text-white rounded-lg hover:bg-primary-container` | tidak ada |
|
||||
|
||||
**Files**: `app/backend/views/terminal.html`
|
||||
|
||||
---
|
||||
|
||||
### Task #17: Shortcut Pills
|
||||
|
||||
**Referensi**: `template/src/components/TerminalView.tsx:287-301`
|
||||
|
||||
Tambah rail shortcut di bawah terminal: help, ls, docker ps, uname -a, ping 8.8.8.8, cat server.js, keychain, clear.
|
||||
|
||||
| Detail | Template |
|
||||
|--------|----------|
|
||||
| Container | `flex flex-wrap gap-2 text-[11px] font-mono font-bold text-on-surface-variant` |
|
||||
| Label | "SHORTCUT SUGGESTIONS:" |
|
||||
| Pill | `px-2.5 py-1 rounded-md bg-surface-container border border-outline-variant/30 hover:border-primary hover:bg-primary-container/10` |
|
||||
|
||||
**Files**: `app/backend/views/terminal.html`
|
||||
|
||||
---
|
||||
|
||||
### Task #18: Status Info (Security + Host IP)
|
||||
|
||||
**Referensi**: `template/src/components/TerminalView.tsx:197-205`
|
||||
|
||||
| Detail | Template |
|
||||
|--------|----------|
|
||||
| Kiri | "SECURE CRYPTO PATH" dengan green dot + animate-pulse |
|
||||
| Kanan | "HOST: {host.ip}" |
|
||||
|
||||
**Files**: `app/backend/views/terminal.html`
|
||||
|
||||
---
|
||||
|
||||
### Task #19: Sync Mock Commands dengan Template
|
||||
|
||||
**Referensi**: `template/src/components/TerminalView.tsx:61-129`
|
||||
|
||||
Template punya command list: help, ls, docker ps, uname -a, ping 8.8.8.8, cat server.js, keychain, clear.
|
||||
|
||||
HTMX di Go handler punya: clear, exit, pwd, whoami, hostname, date, uptime, uname, ls, cd, cat, echo, ssh, help.
|
||||
|
||||
Output di tiap command juga harus disamakan dengan template (docker ps output, ls output, dll).
|
||||
|
||||
**Files**: `app/backend/internal/handler/terminal.go`
|
||||
|
||||
---
|
||||
|
||||
## 🔴 P0 — SNIPPETS (snippets.html + snippet_grid.html) ✅
|
||||
|
||||
### ~~Task #20: Layout — Ubah ke 12-col grid (sidebar + content)~~ ✅ Selesai
|
||||
|
||||
### ~~Task #21: Sidebar — Collections~~ ✅ Selesai
|
||||
|
||||
### ~~Task #22: Sidebar — Tag Categories~~ ✅ Selesai
|
||||
|
||||
### ~~Task #23: Snippet Card — Stacked Layout~~ ✅ Selesai
|
||||
|
||||
### ~~Task #24: Headers & Searching~~ ✅ Selesai
|
||||
|
||||
### ~~Task #25: Add Snippet Modal (style)~~ ✅ Selesai
|
||||
|
||||
### ~~Task #26: Data Model — Tambah field Snippet~~ ✅ Selesai
|
||||
|
||||
---
|
||||
|
||||
## 🟡 P1 — KEYCHAIN (keychain.html + key_grid.html) ✅
|
||||
|
||||
### ~~Task #27: Layout — 2 col~~ ✅ Selesai
|
||||
|
||||
### ~~Task #28: Key Card — Style Upgrade~~ ✅ Selesai
|
||||
|
||||
### ~~Task #29: Add Key Modal (style)~~ ✅ Selesai
|
||||
|
||||
### ~~Task #30: Security Advisory~~ ✅ Selesai
|
||||
|
||||
---
|
||||
|
||||
## 🟡 P1 — SFTP (sftp.html + sftp_pane.html) ✅
|
||||
|
||||
### ~~Task #31: Header — Tambah subtitle~~ ✅ Selesai
|
||||
|
||||
### ~~Task #32: File Pane — Table Structure~~ ✅ Selesai
|
||||
### ~~Task #33: Drop Zone — Style~~ ✅ Selesai
|
||||
|
||||
### ~~Task #34: Toast Notification~~ ✅ Selesai
|
||||
|
||||
---
|
||||
|
||||
## 🟡 P1 — SETTINGS (settings.html) ✅
|
||||
|
||||
### ~~Task #35: Layout — 2-column grid~~ ✅ Selesai
|
||||
|
||||
### ~~Task #36: Profile — Editable Form~~ ✅ Selesai
|
||||
|
||||
### ~~Task #37: Toggles — iOS-Style~~ ✅ Selesai
|
||||
|
||||
### ~~Task #38: Billing Card (Kanan)~~ ✅ Selesai
|
||||
|
||||
### ~~Task #39: Danger Zone — Style~~ ✅ Selesai
|
||||
|
||||
---
|
||||
|
||||
## 🟡 P1 — BRIEF (brief.html)
|
||||
|
||||
### Task #40: Ubah jadi Overlay Panel ✅
|
||||
|
||||
**Referensi**: `template/src/components/BriefOverlay.tsx`
|
||||
|
||||
Styling updated — color palette visual, typography samples, elevation examples, keyboard shortcuts. Halaman stilistik mirror template content.
|
||||
|
||||
**Files**: `app/backend/views/brief.html`
|
||||
|
||||
---
|
||||
|
||||
## 🟡 GLOBAL ISSUES ✅
|
||||
|
||||
### Task #41: SVG Icons — Stroke-width
|
||||
|
||||
Periksa semua SVG inline, pastikan:
|
||||
- Icon kecil (w-3.5, w-4): `stroke-width="1.5"`
|
||||
- Icon besar (w-5, w-6, w-8+): `stroke-width="2"`
|
||||
|
||||
**Files**: Semua view files
|
||||
|
||||
---
|
||||
|
||||
### Task #42: Border Radius — `rounded-2xl`
|
||||
|
||||
Ubah dari `rounded-xl` ke `rounded-2xl` di:
|
||||
- Host cards (host_list.html)
|
||||
- Snippet cards (snippet_grid.html)
|
||||
- Key cards (key_grid.html)
|
||||
- Settings cards (settings.html)
|
||||
- Modal containers (host_modal.html, snippets.html, keychain.html)
|
||||
|
||||
---
|
||||
|
||||
### Task #43: Shadows
|
||||
|
||||
| Element | Target |
|
||||
|---------|--------|
|
||||
| Host card | `shadow-sm` normal, `shadow-lg` hover |
|
||||
| Snippet card | `shadow-sm` |
|
||||
| Key card | `shadow-sm` normal, `shadow-lg` hover |
|
||||
| Modal | `shadow-2xl` |
|
||||
| Settings card | `shadow-sm` |
|
||||
|
||||
---
|
||||
|
||||
### Task #44: Text Styles
|
||||
|
||||
| Element | Target |
|
||||
|---------|--------|
|
||||
| Page title | `text-xl font-bold tracking-tight` |
|
||||
| Subtitle | `text-xs text-on-surface-variant mt-0.5` |
|
||||
| Card title | `font-bold text-base` |
|
||||
| Label form | `text-xs font-bold text-on-surface-variant uppercase tracking-wider` |
|
||||
|
||||
---
|
||||
|
||||
### Task #45: Search Input — `rounded-full`
|
||||
|
||||
Semua search input: `rounded-full` bukan `rounded-lg`.
|
||||
|
||||
**Files**: index.html, snippets.html, keychain.html, sftp.html
|
||||
|
||||
---
|
||||
|
||||
### Task #46: Nav — Icons
|
||||
|
||||
Periksa semua icon di nav (nav.html) apakah SVG sesuai dengan lucide equivalents:
|
||||
- server → ok
|
||||
- terminal → `TerminalSquare`
|
||||
- folder-sync → `ArrowLeftRight`
|
||||
- code2 → `Code`
|
||||
- key-round → `Key`
|
||||
- settings2 → `Settings`
|
||||
|
||||
**Files**: `app/backend/views/nav.html`
|
||||
|
||||
---
|
||||
|
||||
## 🗺️ Execution Order
|
||||
|
||||
```
|
||||
1. Dashboard (P0) → index.html, host_list.html, host_modal.html
|
||||
2. Terminal (P0) → terminal.html, terminal.js
|
||||
3. Snippets (P0) → snippets.html, snippet_grid.html, model/handler
|
||||
4. Keychain (P1) → keychain.html, key_grid.html
|
||||
5. SFTP (P1) → sftp.html, sftp_pane.html
|
||||
6. Settings (P1) → settings.html
|
||||
7. Brief (P1) → brief.html, nav.html
|
||||
8. Global (P1) → semua files
|
||||
```
|
||||
|
||||
> **⚠️ Checklist selesai**: Setiap task di atas harus dihapus dari file ini setelah selesai dikerjakan.
|
||||
Reference in New Issue
Block a user