[drudge]

Requested by Nick · project thread

Before: Create Zone opened on a name field. Next came a bare dropdown of seven zone types with no explanation, then a TSIG select. The TSIG select showed for every type, including Forwarder and Alias where it does nothing, and offered only "None" when no keys existed. Alias was greyed out with no reason given.

After: you pick the type first, from a pill segmented control: Primary / Secondary / Forwarder / More. More opens Stub, Alias, Catalog and Secondary Catalog, each with a description, in a list under the bar. Once you pick one, the segment takes its name ("Stub ▾"). A help line under the bar describes the picked type. The name comes next, then only the fields that type uses. Nick picked this layout from four mockups (cards, list, dropdown, chips).

How

• zones.templ: a single zoneKinds list (value, title, description, common) drives both ZoneTypePicker and the disabled type select in Zone Settings, so the two can't drift. Each choice is a visually hidden radio named type, so the form posts exactly what it did before. When there's no zone to mirror, Alias is disabled and says "Needs a primary or secondary zone to mirror first." TSIG has its own section after the type fields. With no keys configured, that section is a line pointing to Settings › TSIG instead of an empty select.
• Zone Name is now monospace, has help text, gets focus when the dialog opens, and checks itself inline. It catches a pasted URL, an IP address, bad characters, a label over 63 characters, and a zone that's already on the list ("A zone named x already exists."). The server still validates everything.
• app.js: syncZoneCreateType runs on change, on setup and on form reset. It shows the type's sections, updates the help line and the More label, and closes the More list. TSIG shows for primary, secondary, stub, catalog and secondary catalog.
• app.js: dialogs now focus an [autofocus] field before falling back to the first input. Before, querySelector('[autofocus], input…') returned whichever came first in the document, so autofocus only worked on a dialog's first field.
• app.css: .zone-type-segments uses the same pill track, active segment and shadow as .dialog-tab-list. The More list sits inline under the bar instead of floating, because a floating panel gets clipped by the dialog. The dialog stays at its original 32rem.

Screenshots

	Before (main)	After
Laptop, dark
Secondary, light
Phone, light
Forwarder, phone dark

States that are new in this PR, so they have no before shot:

More open	More open, phone	Alias picked	Stub picked, phone	Inline name check

The Vandelay demo has no TSIG keys, so every shot shows the "add one under Settings" line. With keys configured, the select appears in that spot.

Checks

• go tool mage verify passes, and gofmt -l . prints nothing.
• TestCreateZoneDialogPicksTypeFromSegments covers:
  • every type with its description
  • Primary checked by default
  • Stub under More
  • the starting help line
  • the disabled Alias choice
  • the no-keys TSIG line
• Checked by hand in the demo with Playwright:
  • the dialog opens with focus on Zone Name
  • a duplicate name blocks submit inline
  • creating seg-zone.test as Primary works and opens the new zone
• Quality stays red on govulncheck until the Go 1.27.3 bump (Build with Go 1.27.3 for GO-2026-6809 #471) lands on main. After that I'll merge main in here.

[drudge]

Quality is red on govulncheck, and the cause isn't in this PR. GO-2026-6809 (crypto/x509 distrusting compromised intermediates) is reachable through web.StartTLS, in Go 1.27.2. go.mod pins toolchain go1.27.2, so main fails the same scan. The fix is in Go 1.27.3, which is already available.

No fix PR exists yet. The patch is one line in go.mod:

-toolchain go1.27.2
+toolchain go1.27.3

I've left it out of this UI PR. Once that bump lands on main, merging main in here turns Quality green.

---

Generated by Claude Code