SelfPost · panel mockups
Every screen of the panel
The accepted design (the plan): Bulma as the base, the important things in view, details one or two clicks away, with a postal signature — the postmark verdict, numbered mono section heads, the stamp's perforated paper edge under a brick bar that carries the wordmark — and Tabler icons. The screens and a components page live in panel/; a page of the running panel that disagrees with its mockup is wrong. Serve this folder from the repository root: the pages load the panel's own fonts and mark by relative path. The three directions of the redesign's first stage and the earlier 1.x mockups were removed on 2026-10-16; they are in the git history.
Screen map
| Signed out | Sign in · sign in before an administrator exists · Create administrator |
|---|---|
| Overview | Overview — postmark verdict, six health cards, both domain lists |
| Outbound | Domains · domain ·
domain settings · application form ·
password shown once · delete domain Log · message · Queue · DMARC reports · by domain · one report |
| Inbound | Domains · domain ·
delete domain · Log ·
Queue (empty state) Quarantine · held message · Filter lists — roadmap items, drawn as their target look |
| Server | Health · Preflight (roadmap) · System log · Backup · Users · user form · delete user · Settings |
| User menu | Account · Help |
| Contract | Components — every building block in every state ·
the plan · panel/check.py lints the mockups and writes panel/outlines.json |
What changed against the 1.x panel
- Overview shows verdicts, Health shows tables. Process lists, socket paths and interface counters moved to Server › Health, one click from each card.
- Every page is one of three layouts: a list (form on top, table below), a detail page (sticky side menu + numbered boxes), or a form page (boxes in equal columns). No page picks its own width.
- Own password is Account, instance defaults are Settings. Export sits with the domain, import with Backup, and each links to the other.
- Queues are tables, not a
postqueue -pdump — this needspostqueue -jparsing. The inbound queue is the same queue filtered by recipient domain. - Confirm pages say what will be lost as a list, beside a hint for the usual alternative (export before delete).
- Own components on top of Bulma: postmark, perforated edge, numbered box head, health card, DNS record block, facts grid,
timeline, log pane. The mockup's
theme.cssis about 200 lines. panel/build.pywraps the fragments inpanel/src/with the shared navbar; the built pages are committed, so nothing has to be run to view them.