getMenuItem(box: Mailbox) {
   return ui.li()
     .class('clickable')
     .classIf(this.logic.isMailboxSelected(box.id), 'selected')
     .onClick(_ => this.logic.gotoMailbox(box.id))
     .child(ui.span(box.messages.length).class('count'), box.name);
 }

 getBody(): ui.Element {
   let box = this.logic.getSelectedMailbox();
   if (!box) {
     return ui.span('select a mailbox');
   }
   return ui.table().class('mailboxClass').child(
     tableRowHeader('date', 'subject', 'from', 'to'),
     this.getMessageRows(box)
   );
 }

 getBody() {
   const input = ui.input('input').autocomplete(false).ref();
   return ui.form(input, ui.button('submit')).onSubmit(() => {
     const message = input.getValue();
     input.setValue('');
     input.focus();
     if (message === '') {
       return;
     }
     return this.logic.addEntry({message});
   });
 }

 getBody() {
   const {logic} = this;
   return ui.flexDown(
     new AddEntry(logic),
     ui.flexRight(
       new ui.Tristate(logic.getEntries,
         () => 'loading',
         entries => new EntryList(logic).data(entries),
         e => 'failed to load entries'
       ).refreshOn(logic.entriesChanged),
       ui.flexDown(
         ui.flexPad(),
         ui.button('delete', () => logic.deleteEntry())
       )
     )
   );
 }

  getBody() {
    const {folders, mailbox, message} = this.logic;

    const messagePromise = ui.delayedPromise(message.getSelectedMessage).then(x => {
      // throw new Error('failed to load message');
      return x;
    });

    const hasMailbox = !!state.mailbox.selectedId;
    const hasMessage = !!state.message.selectedId;

    return ui.flexRight(
      new Folders(folders, 'folders'),
      ui.flexDown().class('mailContainer').child(
        new Mailbox(mailbox, 'mailbox'),
        new ui.Tristate(() => hasMailbox && hasMessage && messagePromise,
          () => 'pending',
          m => new MessageUi({getMessage: () => m}, 'message'),
          e => ui.span(e.message).class('error')
        )
      )
    );
  }

 e => ui.span(e.message).class('error')

function trThTd(th: string, td: string) {
  return ui.tr(ui.th(th), ui.td(td));
}

 return ui.tr(Array.from(args, a => ui.td(a)));

export function tableRowData(...args): ui.Element {
  return ui.tr(Array.from(args, a => ui.td(a)));
}

export function tableRowHeader(...args): ui.Element {
  return ui.tr(Array.from(args, a => ui.th(a)));
}