Stage 0, steps 3-5, in one commit: the three were built together (the kit
page is what exercises the partials and the shell) and do not split into
states that build on their own. Written by Sonnet, reviewed by Opus.
- static/panel.css: shared/brand.css + panel/theme.css, rule for rule.
wordmark.svg and perf-edge.svg beside it; the stamp is logo.svg.
- templates/components.html: every partial of the plan's Three layers,
with its typed input in components.go. Wrappers are open/close pairs
(box_open/box_close, body_open/body_close, record_open/record_close).
Rich text is a Text value built from escaped runs - no field is
trusted HTML. status_tag and wbr_at are template functions; copy_field
is a partial whose button panel.js wires through data-copy.
- templates/layout.html: the shell as build.py draws it, the menu paths
written out literally, visibility from a typed Shell (role, feature
flags, the user's reach); the signed-out screen as a second define.
Not in the 2.0 menu: Inbound Log / Queue / Quarantine / Filter lists
and Preflight.
- GET /server/components (global role, 404 otherwise): the mockup
components page rebuilt from fixtures (kit.go) by the real templates.
- The old panel steps aside unchanged: panel.css -> legacy.css,
layout.html -> layout_legacy.html; a page uses the new layout iff it
is off legacy_pages.txt.
- legacy_pages.txt: @kit removed - the kit is under the guards for good.
Differences from the mockup components page, for the owner:
- the head button is Help, not "Cover sheet"; two "Example" links are
dropped (no fixed URL), two point at /outbound/domains and /login;
- the page sits in the Server group, so the sibling strip shows;
- Sign out is a POST form whose button carries navbar-item: same size
and type as the links, but without Bulma's hover tint;
- a head's actions are always wrapped in div.buttons.
Evidence
- docs/assets/panel-redesign/evidence/components.png: 1440 px wide, full
height, headless Edge. Taken from the real templates served locally,
NOT from the container (no Docker on this machine); the page reads
only its own fixtures and embedded assets.
- panel/audit.js on the kit page, 1440 and 1280:
{"pages":1,"widths":[1440,1280],"textsChecked":516,"problems":[]}
- go test ./internal/web/... (with @kit removed)
ok github.com/mixeme/selfpost/internal/web
ok github.com/mixeme/selfpost/internal/web/auth
ok github.com/mixeme/selfpost/internal/web/handlers
ok github.com/mixeme/selfpost/internal/web/validate
ok github.com/mixeme/selfpost/internal/web/view
TestRoutesFollowNavigation stays skipped behind @routes (stage 1).
Roadmap 10/27.
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
187 lines
9.0 KiB
Go
187 lines
9.0 KiB
Go
package view
|
|
|
|
// The data of the kit page (GET /server/components): every partial of
|
|
// components.html in every state it has, filled the way the mockup components
|
|
// page (docs/assets/panel-redesign/panel/src/components.html) is filled, same
|
|
// boxes, same order, same words. It is production code, not a test fixture,
|
|
// because the handler serves it; the guard tests render the same value
|
|
// (fixtures_test.go).
|
|
|
|
// Kit is the data of the kit page, rendered by templates/kit.html. The fields
|
|
// are named after the boxes of the page they fill.
|
|
type Kit struct {
|
|
Meta
|
|
Head Head
|
|
Flash Flash
|
|
FlashError Flash
|
|
|
|
Layouts Box
|
|
LayoutFacts []Fact
|
|
Postmark Box
|
|
Postmarks []Postmark
|
|
StatusTag Box
|
|
StatusRows []KitStatusRow
|
|
BoxHead Box
|
|
BoxFoot Foot
|
|
DangerZone Box
|
|
Credential Box
|
|
HealthCard Box
|
|
HealthCards []HealthCard
|
|
DNSRecord Box
|
|
Records []Record
|
|
Tables Box
|
|
TablesFoot Foot
|
|
LogPane Box
|
|
LogLines []LogLine
|
|
Facts Box
|
|
FactList []Fact
|
|
Timeline Box
|
|
Steps []Step
|
|
EmptyState Box
|
|
Empty EmptyState
|
|
ConfirmList Box
|
|
Confirm []Text
|
|
SideMenu SideMenu
|
|
FormRows Box
|
|
Route Route
|
|
HelpTopic HelpTopic
|
|
Shell Box
|
|
ShellFacts []Fact
|
|
TypeScale Box
|
|
TypeScaleFoot Foot
|
|
KickerSample string
|
|
}
|
|
|
|
// KitStatusRow is one row of the status_tag table: the words that map to one
|
|
// tag, and the tag.
|
|
type KitStatusRow struct {
|
|
Words string
|
|
Tag Tag
|
|
}
|
|
|
|
// KitPage returns the kit page's data. The page is shown to the global role, so
|
|
// the shell is theirs; it sits under Server in the address and in the menu.
|
|
func KitPage() *Kit {
|
|
return &Kit{
|
|
Meta: Meta{Title: "Components", User: "admin", IsGlobal: true, Section: "server"},
|
|
Head: Head{
|
|
Postmark: &Postmark{Top: "SELFPOST", Word: "REF", Bottom: "DESIGN CONTRACT", Level: LevelOK},
|
|
Kicker: "Reference · page_head",
|
|
Title: "Components",
|
|
Lead: Plain("Every building block of the panel, in every state it has. A screen is assembled from these and from plain Bulma — nothing else. The title of each box is the name of its template partial."),
|
|
Actions: []Action{{Label: "Help", Icon: "ti-help-circle", Href: "/help"}},
|
|
},
|
|
Flash: Flash{Text: Rich(Strong("flash"), " — the result of the last action, between page_head and the first box. Success, or…")},
|
|
FlashError: Flash{Error: true, Text: Rich("…", Strong("flash, error"), " — a failure that belongs to the page, not to one field. A field's error stays under the field in Bulma's ", Code("help is-danger"), ".")},
|
|
|
|
Layouts: Box{No: "00", Title: "Page layouts", End: Plain("A page is exactly one of these")},
|
|
LayoutFacts: []Fact{
|
|
{Label: "list", Value: Rich("page_head, then full-width boxes: the add form first, the table second. ", Link("/outbound/domains", "Example"))},
|
|
{Label: "detail", Value: Rich("page_head, then ", Code("columns"), ": ", Code("is-3"), " side menu + ", Code("is-9"), " boxes.")},
|
|
{Label: "form", Value: Rich("page_head, then boxes in equal ", Code("columns"), ", one submit row under them.")},
|
|
{Label: "signed out", Value: Rich("The split brand / form screen, no navbar. ", Link("/login", "Example"))},
|
|
},
|
|
|
|
Postmark: Box{No: "01", Title: "postmark", End: Plain("Worst status of the page's checks")},
|
|
Postmarks: []Postmark{
|
|
{Top: "SELFPOST", Word: "OK", Bottom: "6 OF 6 CHECKS", Level: LevelOK},
|
|
{Top: "SELFPOST", Word: "WARN", Bottom: "1 OF 6 CHECKS", Level: LevelWarn},
|
|
{Top: "DNS", Word: "FAIL", Bottom: "1 OF 3 RECORDS", Level: LevelFail},
|
|
},
|
|
|
|
StatusTag: Box{No: "03", Title: "status_tag", End: Plain("One mapping, one function")},
|
|
StatusRows: []KitStatusRow{
|
|
{"ok, published, running, sent", Tag{Status: "ok"}},
|
|
{"warn, deferred, quiet", Tag{Status: "warn"}},
|
|
{"error, fail, mismatch, bounced", Tag{Status: "fail"}},
|
|
{"unknown, off, neutral counts", Tag{Status: "off"}},
|
|
{"held: quarantine · role: global", Tag{Status: "quarantine"}},
|
|
},
|
|
|
|
BoxHead: Box{No: "02", Title: "box · box_head",
|
|
End: Plain("The end slot: a note, a tag, a link or a filter form"),
|
|
Help: &HelpLink{Href: "/help#checks", Title: "Optional: the section's Help topic"}},
|
|
BoxFoot: Foot{Text: Plain("box_foot — a legend, paging"), End: Plain("end slot")},
|
|
DangerZone: Box{Icon: "ti-alert-triangle", Title: "box · sp-danger-zone", Variant: BoxDanger},
|
|
Credential: Box{Icon: "ti-eye", Title: "box · sp-credential", End: Plain("Shown once"), Variant: BoxCredential},
|
|
|
|
HealthCard: Box{No: "04", Title: "health_card", End: Plain("Overview only · each card links to its detail")},
|
|
HealthCards: []HealthCard{
|
|
{Name: "Name", Value: "Verdict in words", Sub: "ok · one supporting fact", Icon: "ti-server-cog", Href: "#"},
|
|
{Name: "Name", Value: "Expires in 12 days", Sub: "sp-warn", Icon: "ti-certificate", Href: "#", Level: LevelWarn},
|
|
{Name: "Name", Value: "1 of 2 answering", Sub: "sp-fail", Icon: "ti-plug-connected-x", Href: "#", Level: LevelFail},
|
|
},
|
|
|
|
DNSRecord: Box{No: "05", Title: "dns_record · copy_field", End: Plain("One block per record")},
|
|
Records: []Record{
|
|
{Name: "Record", Status: Tag{Status: "published"}, Note: Plain("A one-line note"),
|
|
Host: "copy_field — single line", Type: "TXT",
|
|
Value: "copy_field — multi-line, for a DKIM key", ValueRows: 2},
|
|
{Name: "Record", Status: Tag{Status: "mismatch"}, Note: Plain(`"In DNS now" appears only when it differs`),
|
|
InDNS: "what the resolver returned", Problem: Plain("What is wrong and the exact fix.")},
|
|
},
|
|
|
|
Tables: Box{No: "07", Title: "Table conventions", End: Rich("Always inside ", Code("table-container"), " · an address breaks after its @")},
|
|
TablesFoot: Foot{Text: Plain("Page 1 of 9"), Link: &Anchor{Href: "#", Label: "Older →"}},
|
|
|
|
LogPane: Box{No: "09", Title: "log_pane", End: Plain("sp-d time · sp-w warning · sp-e error")},
|
|
LogLines: []LogLine{
|
|
{Time: "13:58:07", Text: "an ordinary line"},
|
|
{Time: "13:58:09", Text: "a deferred delivery — sp-w", Level: "warn"},
|
|
{Time: "13:57:41", Text: "a reject or a bounce — sp-e", Level: "error"},
|
|
},
|
|
|
|
Facts: Box{No: "06", Title: "facts"},
|
|
FactList: []Fact{
|
|
{Label: "Label", Value: Plain("Value")},
|
|
{Label: "Mono value", Value: Plain("4XcB7k2Jm9z1"), Mono: true},
|
|
{Label: "sp-big", Value: Plain("5 days"), Big: true, Note: Plain("a supporting line")},
|
|
},
|
|
|
|
Timeline: Box{No: "08", Title: "timeline"},
|
|
Steps: []Step{
|
|
{Time: "13:58:07 UTC", Strong: "Done", Text: Plain(" — default")},
|
|
{Time: "13:58:09 UTC", Strong: "Deferred", Text: Plain(" — sp-warn"), Level: LevelWarn},
|
|
{Time: "14:40:00 UTC", Strong: "Bounced", Text: Plain(" — sp-fail"), Level: LevelFail},
|
|
{Time: "not yet", Text: Plain("Expected next — sp-pending"), Level: LevelPending},
|
|
},
|
|
|
|
EmptyState: Box{No: "10", Title: "empty_state"},
|
|
Empty: EmptyState{Icon: "ti-stack-2", Text: Plain("One sentence: what is absent and why that is fine.")},
|
|
|
|
ConfirmList: Box{No: "11", Title: "confirm_list"},
|
|
Confirm: []Text{
|
|
Plain("each thing that will be lost, one per line;"),
|
|
Plain("inside an sp-danger-zone box, above the danger button."),
|
|
},
|
|
|
|
SideMenu: SideMenu{Groups: []MenuGroup{
|
|
{Label: "side_menu", Items: []MenuItem{
|
|
{Label: "Current", Icon: "ti-world-check", Href: "#", Active: true, Tag: &Tag{Status: "fail", Label: "1"}},
|
|
{Label: "Section", Icon: "ti-apps", Href: "#", Tag: &Tag{Status: "off", Label: "2"}},
|
|
}},
|
|
{Label: "Rarely changed", Items: []MenuItem{
|
|
{Label: "Delete", Icon: "ti-trash", Href: "#", Danger: true},
|
|
}},
|
|
}},
|
|
|
|
FormRows: Box{No: "12", Title: "Form rows · route · help_topic"},
|
|
Route: Route{
|
|
{Text: "from@example.org"}, {Arrow: true}, {Text: "to@example.net"}, {Tag: &Tag{Status: "deferred"}},
|
|
},
|
|
HelpTopic: HelpTopic{Title: "help_topic", Body: []Text{Plain("A heading and a paragraph; topics stack inside one box on the Help page.")}},
|
|
|
|
Shell: Box{No: "13", Title: "shell", End: Plain("Owned by the layout — a screen never writes it")},
|
|
ShellFacts: []Fact{
|
|
{Label: "Name", Value: Plain("The wordmark, not the stamp: at nav size the stamp's perforation is under a pixel and its brick field dissolves into the bar. The stamp lives on sign-in, setup and the favicon.")},
|
|
{Label: "Edge", Value: Rich("Built like the mark: the brick field, then the stamp's paper margin, and the perforation along the outer edge of that margin — round holes, flat teeth, the ink hairline. One tile, ", Code("perf-edge.svg"), ".")},
|
|
{Label: "Sibling strip", Value: Plain("The pages of the current group, under the edge. Five or six entries; past that the group is split.")},
|
|
{Label: "Menus", Value: Plain("Bulma hover dropdowns, no JavaScript. The user menu holds Account, Help and Sign out.")},
|
|
},
|
|
|
|
TypeScale: Box{No: "14", Title: "Type scale", End: Plain("Three sizes · nothing to be read is under 13px")},
|
|
TypeScaleFoot: Foot{Bare: true, Text: Rich("Bulma's ", Code("is-small"), " and ", Code("is-size-7"), " are not used: a control is never small, and ", Code("sp-small"), " replaces the helper. The postmark's fine print is an imprint, not text.")},
|
|
KickerSample: "Upper-case mono label",
|
|
}
|
|
}
|