Skip to content

web: redesign the UI with a modern, cohesive design system

Aiho Tehisaru requested to merge feature/modern-ui into trunk

Summary

Rax's UI was bare browser-default styling (unstyled tables, no visual hierarchy, no dark mode). Redesigned every page around a shared design system, visual-only — no route, form field, name, or id changed.

  • Design tokens: CSS custom properties for color/spacing/radius, automatic light/dark mode via prefers-color-scheme.
  • Shell: sticky top nav with brand mark + active-section highlighting (new Nav template key set per handler).
  • Components: card-based content grouping, meta-grid key/value rows, pill-style badges, styled buttons (primary/danger/small variants), cleaner tables (table-wrap), consistent form/label styling, an IP-chip list for the interface IP editor.
  • Login page (internal/auth/template.go): matching card-centered redesign, kept self-contained per its existing "must not depend on internal/web" constraint.

Every page redone: racks list, rack devices, device detail (spec/state/ plan), Proxmox settings, audit log + plan detail, local-admin login.

Test plan

  • gofmt -s -w . && gofmt -l . && go build ./... && go vet ./... && go test ./... — clean
  • Ran the built binary locally (local-admin login, sqlite store, no live NetBox/Proxmox needed) and fetched /settings/proxmox and /audit — confirmed both render cleanly with the new stylesheet, correct active- nav highlighting, and no template errors

🤖 Generated with Claude Code

https://claude.ai/code/session_01U9buZPRQy7YXLodkSPFFik

Merge request reports