Most software doesn't get to visibly change its mind. We do — Planagonia is small enough, and moves fast enough, that we can rebuild something the same day we start disliking it. This week that happened to the row of buttons across the top of the app: we redesigned it three separate times before landing on the version that's live now, and each attempt taught us something the last one hadn't.
Take one: everything behind three menus
The toolbar had grown the ordinary way software grows: one button added at a time, in whatever order they were built, with no grouping and no visual hierarchy at all. Rename, Delete, three flavors of Export, and a whole separate sign-in flow, all sitting in a flat row. The first fix looked obvious — group them. We built a small menu bar: File, View, Account, each opening its own dropdown, closing on an outside click or Escape, only one open at a time. Tidier immediately, and every existing button kept its own id and its own click handler — only the wrapper around it changed.
Take two: dressing it up like a ribbon
Grouped wasn't the same as clear. A plain vertical list of text still asked you to read every label to find anything. So we rebuilt the inside of each dropdown as a small ribbon panel — an icon on top, a short label underneath, grouped with a thin divider, the same visual language a modern office suite uses for its own toolbar. The "show grid" option stopped being a line with a checkmark next to it and became an actual toggle button, pressed and highlighted when it's on, the same way a Bold button looks pressed in a word processor.
Take three: show almost everything
Here's the part we didn't expect going in: once every action had a proper icon and a short label, most of them didn't need to be hidden behind anything anymore. Planagonia only has about eight real toolbar actions total — nowhere near enough to justify a click just to reveal them. So we removed the menu layer for anything that was really its own, separate action: Rename, Import, Delete, the grid toggle, signing in — all of it sits directly in the toolbar now, all the time, icon and label together, nothing to open or close first.
One thing stayed behind a small flyout on purpose: Export. Rename and Delete are genuinely different actions competing for the same row; a plan file, a PNG, and an SVG are the same action — getting your plan out of the app — with three destinations. Grouping those three together isn't the "hide it behind a click" problem we'd just spent an afternoon undoing, it's exactly what a dropdown is actually good for. So Export got its one flyout back, and everything else stayed flat. The row is a little longer than before either way, and on a phone it simply wraps onto a second line — a trade we're happy with, since nothing is ever more than one glance and, at most, one hover away.
A real popup instead of browser prompts
Signing in used to mean answering two of your browser's own plain prompt() boxes, one for a username and one for a password — functional, but the kind of thing that makes a product look unfinished. That's gone now too. Signing in and creating an account both happen in an actual popup inside the app, built to match the same sign-in form already used on your account page, so it's the same flow and the same wording whichever way you get there — and a genuine error message if something goes wrong, instead of nothing at all.
Toggles that actually look like toggles
The grid on/off setting used to live as a checkmark next to a menu item — technically clear, but nothing about it looked interactive until you'd already opened the menu and found it. It's now a plain button in the header that visibly stays pressed while the grid is on, the same way a Bold button in a word processor looks pressed while it's active — no menu required to even tell whether it's currently on.
Connecting two things that aren't touching
Wiring two elements together — a power line to a socket, a fixture to its own supply — used to mean small +/- icons that only ever appeared once two things were already physically touching each other. That's gone, replaced with a single gesture: hold Ctrl (or Cmd on a Mac) and drag from one element to another, anywhere on the canvas, even if they're nowhere near each other yet. Drop it on a valid target and a small menu asks what kind of relationship you meant — connected, or attached to its outside edge — worded in plain terms, the same way the new Placement submenu below already is. Removing a connection moved out of that old icon entirely and into the right-click menu instead, sitting next to Duplicate and the object's other actions.
A few other things that shipped alongside it
Alongside the toolbar itself, and the undo button and duplicate action we'd added only a couple of days earlier, a few smaller things shipped this week too:
- Planagonia now has a real, automated test suite — a growing set of checks that actually launch the app in a browser and interact with it, run before anything ships. It's the kind of infrastructure you don't see, but it's the reason we can rebuild something like the toolbar three times in a day and still be confident nothing else quietly broke along the way. It now also runs on its own, on every single change we make, rather than only when someone remembers to run it by hand first.
- One of the app's built-in starter examples, previously a single house with one power line, is now a small electrical grid — three connected parcels, each with its own house, all wired to a shared distribution cabinet, styled entirely through a handful of named, reusable style definitions rather than repeating the same colors on every shape. A good look at what that feature is actually for once a plan gets bigger than a single room.
- Hovering an element that's connected to another now highlights its partner in the exact same color as an ordinary hover, instead of a separate, slightly different one — the two ends of one connection read as one relationship now, not two unrelated highlights.
Placement, as a menu instead of a mystery
The right-click menu on any object also picked up a proper "Placement" submenu — three always-shown options, each naming the actual container by name: keep it inside, snap it flush to the edge, or set it free of both, with a checkmark on whichever is currently active. Picking "Inside" or "Snapped to edge" doesn't just set a property and leave the object exactly where it happened to be — it immediately snaps into a valid position using the same math a drag already uses, so choosing an option and seeing nothing visibly change never happens.
More authoring mistakes caught automatically
Beyond the checks we added a couple of days earlier for overlaps and duplicate names, the app now also recognizes when a plan uses a property that doesn't actually apply to what it's attached to — a rotation value on a shape that can't rotate, an "always show" dimension label on a shape with no single fixed width to show, a wall's own "flush" setting declared without it actually being placed inside anything. Small typos and copy-paste leftovers that used to sit silently in a plan now show up in the same validation panel as everything else that's actually wrong with it.
Want to see where it landed? Open the app — the toolbar at the top is exactly what's described here, live right now.
We're not precious about a first attempt here, or a second one — if a real look at something reveals it isn't quite right, we'd rather rebuild it the same day than leave it as-is until "later." Thanks for reading, and for putting up with a toolbar that occasionally changes shape underneath you.