Migrate compose and message-edit banners to the modern banner component

The compose box and message-edit banners still use the legacy .main-view-banner markup, instead of the modern banner component (web/src/banners.ts, viewable in the development environment at http://localhost:9991/devtools/banners/).

Because the legacy close button is an <a role="button" tabindex="0">, it takes focus on mouse clicks and shows a focus outline. That was worked around in #39759 with a :focus:not(:focus-visible) rule and a TODO pointing here; migrating would let us drop the workaround.

Note that the two components use different layout systems (flexbox vs. CSS grid, different padding, line height, and close button size), so this will change how the banners look worth confirming the intended design before implementing.