backend: improve user mailbox layout and display

src/controllers/backend/MailboxBackendController.ts

@@ -86,6 +86,7 @@ export default class MailboxBackendController extends Controller {
         res.render('backend/mailbox', {
             mailbox: {
                 id: user.id,
+                userName: user.as(UserNameComponent).name,
                 name: await mainMailIdentity?.toEmail() || 'Not created.',
             },
             domains: mailDomains.map(d => ({

views/backend/mailbox.njk

@@ -4,14 +4,14 @@
 
 {% block body %}
     <div class="container">
-        {{ macros.breadcrumb(mailbox.name, [
+        {{ macros.breadcrumb(mailbox.userName + ' - ' + mailbox.name, [
             {title: 'Backend', link: route('backend')},
             {title: 'Mailboxes', link: route('backend-mailboxes')}
         ]) }}
+        <h1>Mailbox: {{ mailbox.userName }} - {{ mailbox.name }}</h1>
 
-        <div class="panel">
-            <i data-feather="mail"></i>
-            <h1>Mailbox: {{ mailbox.name }}</h1>
+        <section class="panel">
+            <h2><i data-feather="mail"></i> Identities</h2>
 
             <table class="data-table">
                 <thead>
@@ -57,6 +57,6 @@
 
                 {{ macros.csrf(getCsrfToken) }}
             </form>
-        </div>
+        </section>
     </div>
 {% endblock %}