HostKeeper/docs/PERBAIKANUI.md

🔍 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.