diff --git a/working/ui-refactor.md b/working/ui-refactor.md new file mode 100644 index 0000000..fa60950 --- /dev/null +++ b/working/ui-refactor.md @@ -0,0 +1,138 @@ +# Wild Central UI Refactor + +## Current Problems + +### 1. DNS is three overlapping pages + +- `/central/dns` — hybrid view showing both LAN DNS (dnsmasq) and DDNS (Cloudflare A records) +- `/central/lan-dns` — duplicates the LAN DNS portion of `/dns` +- `/central/ddns` — separate DDNS page + +A user configuring DNS doesn't know where to go. Three pages, overlapping scope, no clear ownership. + +### 2. Cloudflare is scattered across three pages + +The Cloudflare API token is needed by DDNS, certificates, and tunnels — but each is configured in a different section. First-time setup requires hopping between Cloudflare, DDNS, and Certificates pages. + +### 3. "Ingress Proxy" is jargon + +Shows registered services and HAProxy config. "Ingress" is Kubernetes terminology. Most users think "reverse proxy" or just "services." The registered services display deserves to be the primary view — that's what consumers (Wild Cloud, Wild Works) care about, not HAProxy stats. + +### 4. The sidebar order is arbitrary + +No grouping by function. DNS next to Ingress next to Firewall next to VPN. A user doing initial setup can't follow a logical flow. + +### 5. Overview is nearly empty + +Just operator email and a restart button. Should be a status dashboard: are all daemons running? How many services registered? Any certs expiring? Any security alerts? + +## Current Navigation (9 items, flat) + +``` +Central +├── Overview → operator email, restart button +├── Cloudflare → API token verification +├── DNS → LAN DNS + DDNS hybrid (confusing) +├── Ingress Proxy → HAProxy + registered services (jargon) +├── Firewall → nftables rules +├── VPN → WireGuard server + peers +├── Certificates → TLS cert provisioning +├── CrowdSec → intrusion detection +└── DHCP → DHCP server + leases +``` + +Hidden/redundant pages (routed but not in sidebar): +- `/central/lan-dns` — duplicate of DNS page +- `/central/ddns` — separate DDNS page + +## Proposed Navigation (9 items, better organized) + +``` +Central +├── Dashboard → system health, daemon status, registered services count, cert warnings +├── Services → registered services from Wild Cloud/Works (the primary consumer view) +├── DNS → LAN DNS config (dnsmasq only, one page) +├── Cloudflare → token + DDNS records + tunnel status (all in one place) +├── Certificates → TLS cert status and provisioning +├── Firewall → nftables rules +├── VPN → WireGuard server + peers +├── CrowdSec → security alerts + decisions +└── DHCP → DHCP server config + leases +``` + +## What Changes + +### Overview → Dashboard + +Replace the empty overview with a status dashboard showing: +- All daemon statuses (dnsmasq, haproxy, nftables, wireguard, crowdsec) — green/red +- Registered services count + breakdown by source +- TLS cert warnings (expiring soon, missing) +- Recent security alerts (from CrowdSec) +- DDNS sync status +- Quick links to configure missing items + +### Ingress Proxy → Services + +Rename and restructure: +- Primary view: list of registered service domains with status, reach, subdomains indicator +- Each service row shows: domain, backend, type (L4/L7), reach (internal/public), TLS mode +- Collapsible "Advanced" section for HAProxy raw config, stats, generate/restart +- Remove HAProxy jargon from the primary view + +### DNS consolidated + +Kill `/central/lan-dns` (duplicate) and `/central/ddns` (moved to Cloudflare): +- One DNS page showing dnsmasq config: listen address, upstream servers, active DNS entries +- DHCP stays separate (it's dnsmasq too, but different concern) +- DDNS moves to Cloudflare page (it's a Cloudflare API concern) + +### Cloudflare becomes one-stop shop + +Consolidate: +- API token management (from current Cloudflare page) +- DDNS records (from current DDNS page) +- Tunnel status (currently missing from UI entirely) +- All three share the same Cloudflare token — configure once, see all effects + +### First-time user flow + +The navigation should support a linear setup flow: + +1. **Dashboard** — see what's running, what needs attention +2. **Cloudflare** — set API token (enables DDNS + certs) +3. **DNS** — verify LAN DNS is configured +4. **Certificates** — provision TLS certs +5. **Services** — registered services appear as Wild Cloud/Works connect + +## Pages to delete + +- `LanDnsPage.tsx` — duplicate, fold into DNS +- `DdnsPage.tsx` — fold into Cloudflare +- `LanDnsComponent.tsx` — duplicate component + +## Pages to rename + +- `CentralPage.tsx` → `DashboardPage.tsx` +- `IngressProxyPage.tsx` → `ServicesPage.tsx` +- `IngressProxyComponent.tsx` → `ServicesComponent.tsx` +- `CentralComponent.tsx` → `DashboardComponent.tsx` + +## Sidebar items to rename + +- "Overview" → "Dashboard" +- "Ingress Proxy" → "Services" + +## Sidebar icons + +| Item | Current Icon | Proposed Icon | +|------|-------------|---------------| +| Dashboard | Server | LayoutDashboard | +| Services | Network | Globe | +| DNS | Router | Router (keep) | +| Cloudflare | Cloud | Cloud (keep) | +| Certificates | ShieldCheck | ShieldCheck (keep) | +| Firewall | Shield | Shield (keep) | +| VPN | Lock | Lock (keep) | +| CrowdSec | ShieldAlert | ShieldAlert (keep) | +| DHCP | Wifi | Wifi (keep) |