From 0d351f9743fe2ea7681f7033a3f93869c31cdebf Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Sun, 16 Aug 2026 22:51:36 +0200
Subject: [PATCH] ENH - complete Mail and Radio Sky UI

---
 .../src/components/MailMarkdownEditor.vue     |  266 +--
 frontend/src/stores/mail.test.ts              |   96 +
 frontend/src/stores/mail.ts                   |   90 +-
 frontend/src/stores/phone-locales.test.ts     |   26 +
 frontend/src/stores/phone.ts                  |   39 +-
 frontend/src/types/mail.ts                    |   22 +
 .../src/views/apps/MailApp.contract.test.ts   |  302 ++++
 frontend/src/views/apps/MailApp.vue           | 1561 +++++++++++++----
 .../src/views/apps/RadioApp.contract.test.ts  |   41 +-
 frontend/src/views/apps/RadioApp.vue          |   37 +-
 frontend/testserver/index.cjs                 |  117 +-
 frontend/testserver/smoke.cjs                 |   38 +
 sky_phone/config/config.lua                   |    3 +
 sky_phone/config/locales/en.lua               |   24 +-
 sky_phone/source/client/main.lua              |    4 +
 sky_phone/source/server/db_migrate.lua        |   26 +
 sky_phone/source/server/mail.lua              |  306 +++-
 sky_phone/sql/install.sql                     |   14 +
 18 files changed, 2547 insertions(+), 465 deletions(-)
 create mode 100644 frontend/src/views/apps/MailApp.contract.test.ts

diff --git a/frontend/src/components/MailMarkdownEditor.vue b/frontend/src/components/MailMarkdownEditor.vue
index 3e3cb33..8b9f079 100644
--- a/frontend/src/components/MailMarkdownEditor.vue
+++ b/frontend/src/components/MailMarkdownEditor.vue
@@ -15,6 +15,8 @@ import {
 } from 'lucide-vue-next'
 import { onBeforeUnmount, watch } from 'vue'
 
+import { SkyButton, SkyIcon, SkyToolbar, SkyToolbarPane } from '@/ui'
+
 export type MailEditorLabels = {
   bold: string
   bulletList: string
@@ -22,6 +24,7 @@ export type MailEditorLabels = {
   numberedList: string
   quote: string
   redo: string
+  toolbar: string
   undo: string
 }
 
@@ -41,6 +44,7 @@ const props = withDefaults(
       numberedList: 'Numbered list',
       quote: 'Quote',
       redo: 'Redo',
+      toolbar: 'Formatting tools',
       undo: 'Undo',
     }),
     placeholder: '',
@@ -111,126 +115,159 @@ onBeforeUnmount(() => editor.value?.destroy())
 
 <template>
   <div class="mail-editor" :class="{ 'mail-editor--readonly': !editable }">
-    <div v-if="editable && editor" class="mail-editor__toolbar">
-      <button
-        type="button"
-        :class="{ 'is-active': editor.isActive('bold') }"
-        :aria-label="labels.bold"
-        :title="labels.bold"
-        @click="editor.chain().focus().toggleBold().run()"
-      >
-        <Bold :size="17" />
-      </button>
-      <button
-        type="button"
-        :class="{ 'is-active': editor.isActive('italic') }"
-        :aria-label="labels.italic"
-        :title="labels.italic"
-        @click="editor.chain().focus().toggleItalic().run()"
-      >
-        <Italic :size="17" />
-      </button>
-      <button
-        type="button"
-        :class="{ 'is-active': editor.isActive('bulletList') }"
-        :aria-label="labels.bulletList"
-        :title="labels.bulletList"
-        @click="editor.chain().focus().toggleBulletList().run()"
-      >
-        <List :size="17" />
-      </button>
-      <button
-        type="button"
-        :class="{ 'is-active': editor.isActive('orderedList') }"
-        :aria-label="labels.numberedList"
-        :title="labels.numberedList"
-        @click="editor.chain().focus().toggleOrderedList().run()"
-      >
-        <ListOrdered :size="17" />
-      </button>
-      <button
-        type="button"
-        :class="{ 'is-active': editor.isActive('blockquote') }"
-        :aria-label="labels.quote"
-        :title="labels.quote"
-        @click="editor.chain().focus().toggleBlockquote().run()"
-      >
-        <Quote :size="17" />
-      </button>
-      <span class="mail-editor__toolbar-spacer" />
-      <button
-        type="button"
-        :disabled="!editor.can().chain().focus().undo().run()"
-        :aria-label="labels.undo"
-        :title="labels.undo"
-        @click="editor.chain().focus().undo().run()"
-      >
-        <Undo2 :size="17" />
-      </button>
-      <button
-        type="button"
-        :disabled="!editor.can().chain().focus().redo().run()"
-        :aria-label="labels.redo"
-        :title="labels.redo"
-        @click="editor.chain().focus().redo().run()"
-      >
-        <Redo2 :size="17" />
-      </button>
-    </div>
-    <EditorContent v-if="editor" :editor="editor" />
+    <EditorContent
+      v-if="editor"
+      class="mail-editor__content"
+      :editor="editor"
+    />
+    <SkyToolbar
+      v-if="editable && editor"
+      class="mail-editor__tools"
+      component="footer"
+      :aria-label="labels.toolbar"
+    >
+      <SkyToolbarPane class="mail-editor__tool-pane">
+        <SkyButton
+          class="mail-editor__tool"
+          :class="{
+            'mail-editor__tool--active': editor.isActive('bold'),
+          }"
+          variant="plain"
+          icon-only
+          :aria-label="labels.bold"
+          :aria-pressed="editor.isActive('bold')"
+          @click="editor.chain().focus().toggleBold().run()"
+        >
+          <SkyIcon :size="20"><Bold /></SkyIcon>
+        </SkyButton>
+        <SkyButton
+          class="mail-editor__tool"
+          :class="{
+            'mail-editor__tool--active': editor.isActive('italic'),
+          }"
+          variant="plain"
+          icon-only
+          :aria-label="labels.italic"
+          :aria-pressed="editor.isActive('italic')"
+          @click="editor.chain().focus().toggleItalic().run()"
+        >
+          <SkyIcon :size="20"><Italic /></SkyIcon>
+        </SkyButton>
+        <SkyButton
+          class="mail-editor__tool"
+          :class="{
+            'mail-editor__tool--active': editor.isActive('bulletList'),
+          }"
+          variant="plain"
+          icon-only
+          :aria-label="labels.bulletList"
+          :aria-pressed="editor.isActive('bulletList')"
+          @click="editor.chain().focus().toggleBulletList().run()"
+        >
+          <SkyIcon :size="20"><List /></SkyIcon>
+        </SkyButton>
+        <SkyButton
+          class="mail-editor__tool"
+          :class="{
+            'mail-editor__tool--active': editor.isActive('orderedList'),
+          }"
+          variant="plain"
+          icon-only
+          :aria-label="labels.numberedList"
+          :aria-pressed="editor.isActive('orderedList')"
+          @click="editor.chain().focus().toggleOrderedList().run()"
+        >
+          <SkyIcon :size="20"><ListOrdered /></SkyIcon>
+        </SkyButton>
+        <SkyButton
+          class="mail-editor__tool"
+          :class="{
+            'mail-editor__tool--active': editor.isActive('blockquote'),
+          }"
+          variant="plain"
+          icon-only
+          :aria-label="labels.quote"
+          :aria-pressed="editor.isActive('blockquote')"
+          @click="editor.chain().focus().toggleBlockquote().run()"
+        >
+          <SkyIcon :size="20"><Quote /></SkyIcon>
+        </SkyButton>
+        <SkyButton
+          class="mail-editor__tool"
+          variant="plain"
+          icon-only
+          :disabled="!editor.can().chain().focus().undo().run()"
+          :aria-label="labels.undo"
+          @click="editor.chain().focus().undo().run()"
+        >
+          <SkyIcon :size="20"><Undo2 /></SkyIcon>
+        </SkyButton>
+        <SkyButton
+          class="mail-editor__tool"
+          variant="plain"
+          icon-only
+          :disabled="!editor.can().chain().focus().redo().run()"
+          :aria-label="labels.redo"
+          @click="editor.chain().focus().redo().run()"
+        >
+          <SkyIcon :size="20"><Redo2 /></SkyIcon>
+        </SkyButton>
+      </SkyToolbarPane>
+    </SkyToolbar>
   </div>
 </template>
 
 <style scoped>
 .mail-editor {
-  min-height: 210px;
-  color: #f5f5f7;
-}
-
-.mail-editor__toolbar {
-  position: sticky;
-  z-index: 2;
-  top: 0;
+  width: 100%;
+  min-height: 0;
+  height: 100%;
   display: flex;
-  align-items: center;
-  gap: 3px;
-  min-height: 43px;
-  padding: 5px 7px;
-  border-bottom: 1px solid #ffffff14;
-  background: #1c1c1ee8;
-  backdrop-filter: blur(18px) saturate(160%);
-  -webkit-backdrop-filter: blur(18px) saturate(160%);
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--sky-bg);
+  color: var(--sky-text);
 }
 
-.mail-editor__toolbar button {
-  display: grid;
-  width: 32px;
-  height: 32px;
-  place-items: center;
-  border: 0;
-  border-radius: 9px;
-  background: transparent;
-  color: #f5f5f7;
-  cursor: pointer;
-}
-
-.mail-editor__toolbar button.is-active {
-  background: #0a84ff;
-  color: #fff;
-}
-
-.mail-editor__toolbar button:disabled {
-  opacity: 0.28;
-  cursor: default;
-}
-
-.mail-editor__toolbar-spacer {
+.mail-editor__content {
+  min-height: 0;
   flex: 1;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: none;
+}
+
+.mail-editor__content::-webkit-scrollbar {
+  display: none;
+}
+
+.mail-editor__tools {
+  padding-right: var(--sky-space-3);
+  padding-left: var(--sky-space-3);
+}
+
+.mail-editor__tools :deep(.sky-toolbar__inner),
+.mail-editor__tool-pane {
+  width: 100%;
+}
+
+.mail-editor__tool {
+  min-width: var(--sky-touch-target);
+  min-height: var(--sky-touch-target);
+  flex: 1 1 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--sky-text);
+}
+
+.mail-editor__tool--active {
+  background: transparent;
+  color: var(--sky-app-accent);
 }
 
 :deep(.tiptap) {
-  min-height: 210px;
-  padding: 15px 16px 92px;
+  min-height: 100%;
+  padding: 15px 16px 124px;
   outline: none;
   font-size: 15px;
   line-height: 1.5;
@@ -238,7 +275,14 @@ onBeforeUnmount(() => editor.value?.destroy())
 }
 
 .mail-editor--readonly {
+  height: auto;
+  display: block;
   min-height: 0;
+  overflow: visible;
+}
+
+.mail-editor--readonly .mail-editor__content {
+  overflow: visible;
 }
 
 .mail-editor--readonly :deep(.tiptap) {
@@ -248,11 +292,7 @@ onBeforeUnmount(() => editor.value?.destroy())
 }
 
 :deep(.tiptap p) {
-  margin: 0 0 0.8em;
-}
-
-:deep(.tiptap p:last-child) {
-  margin-bottom: 0;
+  margin: 0;
 }
 
 :deep(.tiptap h2),
diff --git a/frontend/src/stores/mail.test.ts b/frontend/src/stores/mail.test.ts
index 4436b54..408e07e 100644
--- a/frontend/src/stores/mail.test.ts
+++ b/frontend/src/stores/mail.test.ts
@@ -18,6 +18,7 @@ const counts: MailCounts = {
   trash: 4,
   unread: 1,
 }
+const noMailboxes = { mailboxes: [] }
 
 function listItem(id: number): MailListItem {
   return {
@@ -161,6 +162,7 @@ describe('mail store', () => {
         success: true,
       })
       .mockResolvedValueOnce({ data: counts, success: true })
+      .mockResolvedValueOnce({ data: noMailboxes, success: true })
       .mockResolvedValueOnce({
         data: { hasMore: true, items: [listItem(1)] },
         success: true,
@@ -183,6 +185,7 @@ describe('mail store', () => {
   it('removes loaded cloud mail when the device becomes unlinked', async () => {
     mockNuiCall
       .mockResolvedValueOnce({ data: counts, success: true })
+      .mockResolvedValueOnce({ data: noMailboxes, success: true })
       .mockResolvedValueOnce({
         data: { hasMore: true, items: [listItem(1)] },
         success: true,
@@ -234,6 +237,10 @@ describe('mail store', () => {
         resolveCounts = resolve
       }),
     )
+    mockNuiCall.mockResolvedValueOnce({
+      data: noMailboxes,
+      success: true,
+    })
     const mail = useMailStore()
 
     const bootstrap = mail.bootstrap('alex@ifruit.com')
@@ -282,6 +289,7 @@ describe('mail store', () => {
         }),
       )
       .mockResolvedValueOnce({ data: counts, success: true })
+      .mockResolvedValueOnce({ data: noMailboxes, success: true })
     const mail = useMailStore()
     const account = useAccountStore()
 
@@ -297,4 +305,92 @@ describe('mail store', () => {
     expect(mail.accountEmail).toBe('morgan@ifruit.com')
     expect(account.email).toBe('morgan@ifruit.com')
   })
+
+  it('creates an account-owned mailbox and refreshes the mailbox list', async () => {
+    mockNuiCall
+      .mockResolvedValueOnce({
+        data: { count: 0, id: 7, name: 'Projects', sort_order: 1 },
+        success: true,
+      })
+      .mockResolvedValueOnce({
+        data: {
+          mailboxes: [{ count: 0, id: 7, name: 'Projects', sort_order: 1 }],
+        },
+        success: true,
+      })
+    const mail = useMailStore()
+
+    const response = await mail.createMailbox('Projects')
+
+    expect(response.success).toBe(true)
+    expect(mockNuiCall).toHaveBeenNthCalledWith(1, 'mail:create-mailbox', {
+      name: 'Projects',
+    })
+    expect(mockNuiCall).toHaveBeenNthCalledWith(2, 'mail:mailboxes')
+    expect(mail.mailboxes).toEqual([
+      { count: 0, id: 7, name: 'Projects', sort_order: 1 },
+    ])
+  })
+
+  it('loads custom mailbox folders through the regular list contract', async () => {
+    mockNuiCall.mockResolvedValueOnce({
+      data: { hasMore: false, items: [listItem(4)] },
+      success: true,
+    })
+    const mail = useMailStore()
+
+    expect(await mail.loadFolder('mailbox:7')).toBe(true)
+    expect(mockNuiCall).toHaveBeenCalledWith('mail:list', {
+      folder: 'mailbox:7',
+      offset: 0,
+      search: '',
+    })
+    expect(mail.folder).toBe('mailbox:7')
+  })
+
+  it('keeps active mail filters in the paginated server request', async () => {
+    mockNuiCall.mockResolvedValueOnce({
+      data: { hasMore: false, items: [listItem(5)] },
+      success: true,
+    })
+    const mail = useMailStore()
+    mail.setListFilters({
+      address: 'to-me',
+      direction: 'all',
+      read: 'unread',
+      today: true,
+    })
+
+    expect(await mail.loadFolder('inbox')).toBe(true)
+    expect(mockNuiCall).toHaveBeenCalledWith('mail:list', {
+      filters: {
+        address: 'to-me',
+        direction: 'all',
+        read: 'unread',
+        today: true,
+      },
+      folder: 'inbox',
+      offset: 0,
+      search: '',
+    })
+  })
+
+  it('moves a custom mailbox entry back to its original built-in folder', async () => {
+    mockNuiCall
+      .mockResolvedValueOnce({ success: true })
+      .mockResolvedValueOnce({ data: counts, success: true })
+      .mockResolvedValueOnce({ data: noMailboxes, success: true })
+      .mockResolvedValueOnce({
+        data: { hasMore: false, items: [] },
+        success: true,
+      })
+    const mail = useMailStore()
+    mail.folder = 'mailbox:7'
+
+    expect(await mail.moveEntry(4, null)).toBe(true)
+    expect(mockNuiCall).toHaveBeenNthCalledWith(1, 'mail:move', {
+      id: 4,
+      mailboxId: 0,
+    })
+  })
 })
diff --git a/frontend/src/stores/mail.ts b/frontend/src/stores/mail.ts
index d9ac1e8..01aca4d 100644
--- a/frontend/src/stores/mail.ts
+++ b/frontend/src/stores/mail.ts
@@ -7,9 +7,12 @@ import type {
   MailComposeDraft,
   MailCounts,
   MailDraft,
-  MailFolder,
+  MailFolderKey,
   MailListItem,
+  MailListFilters,
   MailListResponse,
+  MailMailbox,
+  MailMailboxesResponse,
   MailMessage,
 } from '@/types/mail'
 import { nuiCall } from '@/utils/nui'
@@ -21,15 +24,23 @@ const emptyCounts = (): MailCounts => ({
   trash: 0,
   unread: 0,
 })
+const emptyListFilters = (): MailListFilters => ({
+  address: 'all',
+  direction: 'all',
+  read: 'all',
+  today: false,
+})
 
 export const useMailStore = defineStore('mail', () => {
   const account = useAccountStore()
   const accountEmail = ref('')
   const counts = ref<MailCounts>(emptyCounts())
-  const folder = ref<MailFolder>('inbox')
+  const folder = ref<MailFolderKey>('inbox')
   const hasMore = ref(false)
   const items = ref<MailListItem[]>([])
   const loading = ref(false)
+  const listFilters = ref<MailListFilters>(emptyListFilters())
+  const mailboxes = ref<MailMailbox[]>([])
   const search = ref('')
   let authenticationGeneration = 0
   let folderRequestGeneration = 0
@@ -41,6 +52,8 @@ export const useMailStore = defineStore('mail', () => {
     folderRequestGeneration += 1
     accountEmail.value = ''
     counts.value = emptyCounts()
+    listFilters.value = emptyListFilters()
+    mailboxes.value = []
     items.value = []
     hasMore.value = false
     folder.value = 'inbox'
@@ -57,7 +70,7 @@ export const useMailStore = defineStore('mail', () => {
     sessionGeneration += 1
     folderRequestGeneration += 1
     accountEmail.value = email
-    await refreshCounts()
+    await Promise.all([refreshCounts(), loadMailboxes()])
   }
 
   async function login(email: string, password: string) {
@@ -106,7 +119,7 @@ export const useMailStore = defineStore('mail', () => {
   }
 
   async function loadFolder(
-    nextFolder: MailFolder,
+    nextFolder: MailFolderKey,
     nextSearch = '',
     append = false,
   ): Promise<boolean> {
@@ -114,10 +127,16 @@ export const useMailStore = defineStore('mail', () => {
     const session = sessionGeneration
     loading.value = true
     const offset = append ? items.value.length : 0
+    const hasFilters =
+      listFilters.value.address !== 'all' ||
+      listFilters.value.direction !== 'all' ||
+      listFilters.value.read !== 'all' ||
+      listFilters.value.today
     const response = await nuiCall<MailListResponse>('mail:list', {
       folder: nextFolder,
       offset,
       search: nextSearch,
+      ...(hasFilters ? { filters: { ...listFilters.value } } : {}),
     })
     if (generation === folderRequestGeneration) loading.value = false
     if (
@@ -151,6 +170,60 @@ export const useMailStore = defineStore('mail', () => {
     }
   }
 
+  async function loadMailboxes(): Promise<boolean> {
+    const email = accountEmail.value
+    const session = sessionGeneration
+    const response = await nuiCall<MailMailboxesResponse>('mail:mailboxes')
+    if (
+      session !== sessionGeneration ||
+      email !== accountEmail.value ||
+      !response.success ||
+      !response.data
+    ) {
+      return false
+    }
+
+    mailboxes.value = response.data.mailboxes
+    return true
+  }
+
+  async function createMailbox(name: string) {
+    const session = sessionGeneration
+    const response = await nuiCall<MailMailbox>('mail:create-mailbox', { name })
+    if (response.success && session === sessionGeneration) {
+      await loadMailboxes()
+    }
+    return response
+  }
+
+  async function deleteMailbox(id: number): Promise<boolean> {
+    const session = sessionGeneration
+    const response = await nuiCall('mail:delete-mailbox', { id })
+    if (response.success && session === sessionGeneration) {
+      await Promise.all([refreshCounts(), loadMailboxes()])
+    }
+    return response.success
+  }
+
+  async function moveEntry(
+    id: number,
+    mailboxId: number | null,
+  ): Promise<boolean> {
+    const session = sessionGeneration
+    const response = await nuiCall('mail:move', {
+      id,
+      mailboxId: mailboxId ?? 0,
+    })
+    if (response.success && session === sessionGeneration) {
+      await Promise.all([
+        refreshCounts(),
+        loadMailboxes(),
+        loadFolder(folder.value, search.value),
+      ])
+    }
+    return response.success
+  }
+
   async function openMessage(id: number): Promise<MailMessage | null> {
     const response = await nuiCall<MailMessage>('mail:get', { id })
     if (!response.success || !response.data) return null
@@ -236,16 +309,22 @@ export const useMailStore = defineStore('mail', () => {
     accountEmail,
     bootstrap,
     counts,
+    createMailbox,
     deleteDraft,
+    deleteMailbox,
     deleteMany,
     emptyTrash,
     folder,
     hasMore,
     items,
     loadFolder,
+    loadMailboxes,
+    listFilters,
     loading,
     login,
     logout,
+    mailboxes,
+    moveEntry,
     mutateEntry,
     openDraft,
     openMessage,
@@ -254,6 +333,9 @@ export const useMailStore = defineStore('mail', () => {
     saveDraft,
     search,
     send,
+    setListFilters(nextFilters: MailListFilters) {
+      listFilters.value = { ...nextFilters }
+    },
     setCounts(nextCounts: MailCounts) {
       counts.value = nextCounts
     },
diff --git a/frontend/src/stores/phone-locales.test.ts b/frontend/src/stores/phone-locales.test.ts
index e3ecfb8..9d82f65 100644
--- a/frontend/src/stores/phone-locales.test.ts
+++ b/frontend/src/stores/phone-locales.test.ts
@@ -29,4 +29,30 @@ describe('phone locale fallback', () => {
       'Remove from favorites',
     )
   })
+
+  it('keeps mailbox and filter copy translated with a partial server locale', () => {
+    const phone = usePhoneStore()
+    phone.open({ locales: { Apps: { mail: { name: 'Mail' } } } })
+
+    expect(phone.t('Apps.mail.newMailbox')).toBe('New Mailbox')
+    expect(phone.t('Apps.mail.mailboxNamePlaceholder')).toBe('Mailbox name')
+    expect(phone.t('Apps.mail.filterTitle')).toBe('Filter')
+    expect(phone.t('Apps.mail.filterUnreadLabel')).toBe('Unread')
+    expect(phone.t('Apps.mail.errors.mailbox_exists')).toBe(
+      'A mailbox with that name already exists.',
+    )
+  })
+
+  it('keeps provider capability copy translated with a partial server locale', () => {
+    const phone = usePhoneStore()
+    phone.open({ locales: { Apps: { radio: { name: 'Radio' } } } })
+
+    expect(phone.t('Apps.radio.notSupported')).toBe('Not supported')
+    expect(phone.t('Apps.radio.providerFeatureUnavailable')).toBe(
+      'Not supported by this voice service',
+    )
+    expect(phone.t('Apps.radio.displayNamePlaceholder')).toBe(
+      'Character name',
+    )
+  })
 })
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 3324b14..bb0253a 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -2162,6 +2162,8 @@ const defaultLocales: LocaleTree = {
       disconnect: 'Disconnect',
       speaker: 'Speaker',
       speakerDescription: 'Play radio traffic through speaker mode',
+      providerFeatureUnavailable: 'Not supported by this voice service',
+      notSupported: 'Not supported',
       members: 'Currently connected ({count})',
       noMembers: 'No participants',
       history: 'Recently connected',
@@ -2170,9 +2172,9 @@ const defaultLocales: LocaleTree = {
       badgePlaceholder: 'e.g. 231',
       profileSaved: 'Radio profile saved',
       displayName: 'Radio display name',
-      displayNamePlaceholder: 'Leave empty to use your character name',
+      displayNamePlaceholder: 'Character name',
       displayNameDescription:
-        'This name is shown to other participants and in the built-in radio overlay.',
+        'Leave empty to use your character name. This name is shown to other participants and in the built-in radio overlay.',
       displayNameNotAllowed:
         'Your current job or grade is not allowed to change the radio display name.',
       otherSettings: 'Other',
@@ -3618,6 +3620,17 @@ const defaultLocales: LocaleTree = {
       passwordWarning:
         'Use an in-character password. Do not reuse a real-world password.',
       mailboxes: 'Mailboxes',
+      editMailboxes: 'Edit',
+      newMailbox: 'New Mailbox',
+      mailboxName: 'Name',
+      mailboxNamePlaceholder: 'Mailbox name',
+      mailboxLocation: 'Mailbox Location',
+      deleteMailbox: 'Delete {mailbox}',
+      deleteMailboxTitle: 'Delete Mailbox?',
+      deleteMailboxBody:
+        'Messages in {mailbox} will return to their original mailbox.',
+      moveToMailbox: 'Move to Mailbox',
+      movedToMailbox: 'Moved to {mailbox}.',
       inbox: 'Inbox',
       sent: 'Sent',
       drafts: 'Drafts',
@@ -3632,6 +3645,22 @@ const defaultLocales: LocaleTree = {
       messagePlaceholder: 'Write a message...',
       search: 'Search mail',
       messages: 'messages',
+      toolbar: 'Mail tools',
+      filterTitle: 'Filter',
+      filteredBy: 'Filtered by',
+      filterActiveLabel: 'Filtered by {filter}',
+      filterStatus: 'Status',
+      filterAddressed: 'Addressed',
+      filterDirection: 'Direction',
+      filterOther: 'Other',
+      filterUnreadLabel: 'Unread',
+      filterReadLabel: 'Read',
+      filterReceived: 'Received',
+      filterSent: 'Sent',
+      filterToMe: 'To Me',
+      filterFromMe: 'From Me',
+      filterToday: 'Today',
+      filterMultiple: '{count} Filters',
       select: 'Select',
       selectedCount: '{count} Selected',
       deleteSelected: 'Delete Selected',
@@ -3681,6 +3710,12 @@ const defaultLocales: LocaleTree = {
         not_authenticated: 'Your mail session has ended. Sign in again.',
         request_failed: 'Mail is temporarily unavailable.',
         invalid_request: 'The mail request was invalid.',
+        invalid_mailbox: 'Enter a mailbox name with up to 50 characters.',
+        mailbox_exists: 'A mailbox with that name already exists.',
+        mailbox_limit: 'You have reached the mailbox limit.',
+        mailbox_not_found: 'That mailbox is no longer available.',
+        message_not_found: 'That message is no longer available.',
+        invalid_filter: 'That mail filter is not available.',
         default: 'The mail request failed.',
       },
     },
diff --git a/frontend/src/types/mail.ts b/frontend/src/types/mail.ts
index 87010da..223cefd 100644
--- a/frontend/src/types/mail.ts
+++ b/frontend/src/types/mail.ts
@@ -1,6 +1,28 @@
 import type { DatabaseDateValue } from '@/utils/date'
 
 export type MailFolder = 'inbox' | 'sent' | 'drafts' | 'trash'
+export type MailFolderKey = MailFolder | `mailbox:${number}`
+export type MailReadFilter = 'all' | 'read' | 'unread'
+export type MailDirectionFilter = 'all' | 'inbox' | 'sent'
+export type MailAddressFilter = 'all' | 'from-me' | 'to-me'
+
+export type MailListFilters = {
+  address: MailAddressFilter
+  direction: MailDirectionFilter
+  read: MailReadFilter
+  today: boolean
+}
+
+export type MailMailbox = {
+  count: number
+  id: number
+  name: string
+  sort_order: number
+}
+
+export type MailMailboxesResponse = {
+  mailboxes: MailMailbox[]
+}
 
 export type MailCounts = {
   drafts: number
diff --git a/frontend/src/views/apps/MailApp.contract.test.ts b/frontend/src/views/apps/MailApp.contract.test.ts
new file mode 100644
index 0000000..484eeaa
--- /dev/null
+++ b/frontend/src/views/apps/MailApp.contract.test.ts
@@ -0,0 +1,302 @@
+import { readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vitest'
+
+const source = readFileSync(new URL('./MailApp.vue', import.meta.url), 'utf8')
+const editorSource = readFileSync(
+  new URL('../../components/MailMarkdownEditor.vue', import.meta.url),
+  'utf8',
+)
+const mailServerSource = readFileSync(
+  new URL('../../../../sky_phone/source/server/mail.lua', import.meta.url),
+  'utf8',
+)
+const migrationSource = readFileSync(
+  new URL('../../../../sky_phone/source/server/db_migrate.lua', import.meta.url),
+  'utf8',
+)
+const clientSource = readFileSync(
+  new URL('../../../../sky_phone/source/client/main.lua', import.meta.url),
+  'utf8',
+)
+
+describe('MailApp Sky UI contract', () => {
+  it('uses Sky navigation for logout and mailbox back actions', () => {
+    expect(source).toContain('class="mail-navbar mail-folders-navbar"')
+    expect(source).toContain(':aria-label="phone.t(\'Apps.mail.logout\')"')
+    expect(source).toContain('<LogOut :size="20"')
+    expect(source).toContain('<sky-navbar-back-link')
+    expect(source).not.toContain('<header class="mail-header')
+    expect(source).not.toContain('class="mail-header__back"')
+  })
+
+  it('puts logout on the left and mailbox editing on the right', () => {
+    const foldersStart = source.indexOf('v-else-if="screen === \'folders\'"')
+    const foldersEnd = source.indexOf(
+      'v-else-if="screen === \'list\'"',
+      foldersStart,
+    )
+    const folders = source.slice(foldersStart, foldersEnd)
+    const left = folders.slice(
+      folders.indexOf('<template #left>'),
+      folders.indexOf('</template>', folders.indexOf('<template #left>')),
+    )
+    const right = folders.slice(
+      folders.indexOf('<template #right>'),
+      folders.indexOf('</template>', folders.indexOf('<template #right>')),
+    )
+
+    expect(left).toContain("phone.t('Apps.mail.logout')")
+    expect(right).toContain('mail-folders-navbar__edit')
+    expect(right).toContain("'Apps.mail.editMailboxes'")
+  })
+
+  it('provides a Sky UI modal to create and open custom mailboxes', () => {
+    const mailboxStart = source.indexOf(
+      'class="mail-modal mail-mailbox-modal"',
+    )
+    const mailboxEnd = source.indexOf('</sky-sheet>', mailboxStart)
+    const mailboxModal = source.slice(mailboxStart, mailboxEnd)
+
+    expect(source).not.toContain("screen === 'mailbox-create'")
+    expect(source).toContain('class="mail-modal mail-mailbox-modal"')
+    expect(source).toContain(':opened="mailboxCreateOpened"')
+    expect(source).toContain('@backdropclick="cancelMailboxCreate"')
+    expect(source).toContain('@escape="cancelMailboxCreate"')
+    expect(source).toContain('@swipeclose="cancelMailboxCreate"')
+    expect(source).toContain('v-model="mailboxName"')
+    expect(source).toContain("phone.t('Apps.mail.mailboxLocation')")
+    expect(source).toContain('@click="createMailbox"')
+    expect(source).toContain('@click="openFolder(mailboxFolderKey(mailbox.id))"')
+    expect(source).toContain('@click="moveMessageToMailbox(mailbox)"')
+    expect(source).toContain('@click="moveMessageToDefaultMailbox"')
+    expect(mailboxModal).toContain('class="mail-modal__nav-button"')
+    expect(mailboxModal).toContain(":aria-label=\"phone.t('Common.cancel')\"")
+    expect(mailboxModal).toContain(":aria-label=\"phone.t('Common.save')\"")
+    expect(mailboxModal).toContain('<X :size="20" />')
+    expect(mailboxModal).toContain('<Check :size="20" />')
+    expect(mailboxModal).not.toContain('<sky-spinner')
+    expect(mailboxModal).toContain('class="mail-mailbox-create__name"')
+    expect(mailboxModal).toContain(
+      'class="mail-mailbox-create__location-row"',
+    )
+    expect(mailboxModal).not.toContain(' outline')
+    expect(source).toMatch(
+      /\.mail-mailbox-create__form\s*\{[^}]*overflow-y:\s*auto/s,
+    )
+    expect(source).toMatch(
+      /\.mail-mailbox-create__name\s*\{[^}]*border-radius:\s*17px[^}]*background:\s*var\(--sky-surface-variant\)/s,
+    )
+    expect(source).toMatch(
+      /\.mail-mailbox-modal\s+:deep\(\.sky-sheet__panel\)\s*\{[^}]*height:\s*auto[^}]*background:\s*var\(--sky-surface\)/s,
+    )
+    expect(source).toMatch(
+      /\.mail-mailbox-create\s*\{[^}]*height:\s*auto[^}]*background:\s*var\(--sky-surface\)/s,
+    )
+  })
+
+  it('places the Apple-style filter, Sky search and compose action together', () => {
+    const toolbarClass = 'class="mail-bottom-toolbar mail-list-toolbar"'
+    const classIndex = source.indexOf(toolbarClass)
+    const toolbarStart = source.lastIndexOf('<sky-toolbar', classIndex)
+    const toolbarEnd =
+      source.indexOf('</sky-toolbar>', classIndex) + '</sky-toolbar>'.length
+    const toolbar = source.slice(toolbarStart, toolbarEnd)
+
+    expect(toolbar).toContain('component="footer"')
+    expect(toolbar).toContain('@click="openMailFilters"')
+    expect(toolbar).toContain('<ListFilter :size="21"')
+    expect(toolbar).toContain('mail-filter-fab--active')
+    expect(toolbar).toContain("phone.t('Apps.mail.filteredBy')")
+    expect(toolbar).toContain('{{ activeFilterSummary }}')
+    expect(toolbar).toContain('<sky-searchbar')
+    expect(toolbar).toContain('@update:model-value="updateSearch"')
+    expect(toolbar).toContain('variant="neutral"')
+    expect(toolbar).toContain('@click="beginCompose()"')
+    expect(source).not.toContain('class="mail-search"')
+    expect(source).not.toContain('class="mail-compose-fab"')
+    expect(source).toMatch(
+      /\.mail-bottom-toolbar\s*\{[^}]*padding-bottom:\s*calc\([\s\S]*var\(--sky-space-6\)/,
+    )
+  })
+
+  it('offers multiple filter criteria in one scrolling Sky UI modal', () => {
+    const filterStart = source.indexOf(
+      'class="mail-modal mail-filter-modal"',
+    )
+    const filterEnd = source.indexOf('</sky-sheet>', filterStart)
+    const filterScreen = source.slice(filterStart, filterEnd)
+
+    expect(source).not.toContain("screen === 'filters'")
+    expect(filterScreen).toContain(':opened="filtersOpened"')
+    expect(filterScreen).toContain('@backdropclick="closeMailFilters"')
+    expect(filterScreen).toContain('@escape="closeMailFilters"')
+    expect(filterScreen).toContain('@swipeclose="closeMailFilters"')
+    expect(filterScreen).toContain('class="mail-modal__navbar mail-filters__navbar"')
+    expect(filterScreen).toContain('@click="applyMailFilters"')
+    expect(filterScreen).toContain("toggleDraftReadFilter('unread')")
+    expect(filterScreen).toContain("toggleDraftReadFilter('read')")
+    expect(filterScreen).toContain("toggleDraftAddressFilter('to-me')")
+    expect(filterScreen).toContain("toggleDraftAddressFilter('from-me')")
+    expect(filterScreen).toContain("toggleDraftDirectionFilter('inbox')")
+    expect(filterScreen).toContain("toggleDraftDirectionFilter('sent')")
+    expect(filterScreen).toContain(
+      'draftMailFilters.today = !draftMailFilters.today',
+    )
+    expect(source).toMatch(
+      /\.mail-filters__content\s*\{[^}]*overflow-y:\s*auto/s,
+    )
+  })
+
+  it('keeps the filtered empty state as only No Mail', () => {
+    expect(source).toContain('<template v-if="hasActiveFilters">')
+    expect(source).toContain("<h2>{{ phone.t('Apps.mail.noMail') }}</h2>")
+    expect(source).not.toContain('mail.search || showUnreadOnly')
+  })
+
+  it('sends active filters through the paginated mail list contract', () => {
+    expect(source).toContain('mail.setListFilters(mailFilters.value)')
+    expect(mailServerSource).toContain('local function normalize_list_filters')
+    expect(mailServerSource).toContain('local filters = normalize_list_filters(data.filters)')
+    expect(mailServerSource).toContain("filters.read == \"unread\"")
+    expect(mailServerSource).toContain("filters.address == \"to-me\"")
+    expect(mailServerSource).toContain('m.`created_at` >= CURRENT_DATE()')
+  })
+
+  it('keeps authentication hints legible and placeholders muted', () => {
+    expect(source).toMatch(
+      /\.mail-auth__field input::placeholder\s*\{[^}]*color:\s*var\(--mail-muted\)[^}]*opacity:\s*0\.72/s,
+    )
+    expect(source).toMatch(
+      /\.mail-auth__warning\s*\{[^}]*color:\s*var\(--sky-text\)[^}]*font-size:\s*14px[^}]*font-weight:\s*500[^}]*line-height:\s*19px/s,
+    )
+    expect(source).toContain('<ShieldCheck :size="17" />')
+  })
+
+  it('uses icon actions in the new-message navbar', () => {
+    const composeStart = source.indexOf('v-else-if="screen === \'compose\'"')
+    const compose = source.slice(composeStart)
+
+    expect(compose).toContain(':aria-label="phone.t(\'Common.cancel\')"')
+    expect(compose).toContain('<X :size="21"')
+    expect(compose).toContain(':aria-label="phone.t(\'Common.send\')"')
+    expect(compose).toContain('<Send :size="20"')
+    expect(source).toMatch(
+      /\.mail-navbar\s*\{[^}]*--sky-safe-area-top:\s*calc\(46px \+ var\(--sky-space-2\)\)/s,
+    )
+    expect(source).not.toContain('deleteCurrentDraft')
+    expect(source).not.toContain("phone.t('Apps.mail.deleteDraft')")
+  })
+
+  it('keeps mail rows and navbar actions geometrically stable', () => {
+    expect(source).not.toContain(
+      '.mail-row-shell:not(.is-dragging) .mail-row:hover',
+    )
+    expect(source).toMatch(
+      /\.mail-row\s*\{[^}]*color:\s*var\(--sky-text\)[^}]*transition:\s*transform/s,
+    )
+    expect(source).toContain('class="mail-navbar__select"')
+    expect(source).toMatch(
+      /\.mail-navbar__select\.sky-link\)\s*\{[^}]*width:\s*auto[^}]*height:\s*var\(--sky-touch-target\)[^}]*padding:\s*0 var\(--sky-space-3\)[^}]*color:\s*#fff[^}]*font-size:\s*15px/s,
+    )
+    expect(source).toMatch(
+      /\.mail-navbar__select\.sky-link:focus-visible\)\s*\{[^}]*outline:\s*0[^}]*box-shadow:\s*inset 0 0 0 1px #fff/s,
+    )
+    expect(source).toMatch(
+      /\.sky-navbar-back-link__icon\)\s*\{[^}]*transform:\s*translateX\(2px\)/s,
+    )
+    expect(source).toMatch(
+      /\.mail-navbar\s+:deep\(\.sky-link\)\s*\{[^}]*color:\s*#fff/s,
+    )
+    expect(source).toMatch(
+      /\.mail-navbar\s+:deep\(\.sky-navbar-back-link\)\s*\{[^}]*color:\s*#fff/s,
+    )
+    expect(source).not.toMatch(
+      /\.mail-navbar\s+:deep\(\.sky-link\)\s*\{[^}]*color:\s*var\(--mail-blue\)/s,
+    )
+  })
+})
+
+describe('MailMarkdownEditor Sky toolbar contract', () => {
+  it('places formatting actions in a Sky toolbar instead of navigation', () => {
+    expect(editorSource.indexOf('<EditorContent')).toBeLessThan(
+      editorSource.indexOf('<SkyToolbar'),
+    )
+    expect(editorSource).toContain('class="mail-editor__tools"')
+    expect(editorSource).toContain('<SkyToolbarPane')
+    expect(editorSource.match(/<SkyButton\b/g)).toHaveLength(7)
+    expect(editorSource).toContain('<SkyIcon')
+    expect(editorSource).toContain(':aria-pressed="editor.isActive')
+    expect(editorSource).not.toContain('<SkyTabBar')
+    expect(editorSource).not.toContain('<SkyTabButton')
+    expect(editorSource).toMatch(
+      /\.mail-editor\s*\{[^}]*width:\s*100%[^}]*display:\s*flex[^}]*flex-direction:\s*column[^}]*overflow:\s*hidden/s,
+    )
+    expect(editorSource).toMatch(
+      /\.mail-editor__content\s*\{[^}]*flex:\s*1[^}]*overflow-y:\s*auto/s,
+    )
+    expect(editorSource).toMatch(
+      /\.mail-editor__tool--active\s*\{[^}]*background:\s*transparent[^}]*color:\s*var\(--sky-app-accent\)/s,
+    )
+    expect(editorSource).toMatch(
+      /\.mail-editor__tools\s*\{[^}]*padding-right:\s*var\(--sky-space-3\)[^}]*padding-left:\s*var\(--sky-space-3\)/s,
+    )
+    expect(editorSource).toMatch(
+      /:deep\(\.tiptap p\)\s*\{[^}]*margin:\s*0;/s,
+    )
+    expect(editorSource).not.toContain(':deep(.tiptap p:last-child)')
+  })
+})
+
+describe('Mail list toolbar styling contract', () => {
+  it('keeps the outer action buttons on the same hairline as the search field', () => {
+    expect(source).toMatch(
+      /\.mail-list-toolbar\s+:deep\(\.sky-fab\)\s*\{[^}]*border:\s*1px solid var\(--sky-hairline\)/s,
+    )
+  })
+
+  it('right-aligns the mailbox compose action and keeps folders compact', () => {
+    expect(source).toMatch(
+      /\.mail-folders-toolbar\s+:deep\(\.sky-toolbar__inner\)\s*\{[^}]*width:\s*100%[^}]*justify-content:\s*flex-end/s,
+    )
+    expect(source).toMatch(
+      /\.mail-folders-toolbar\s+:deep\(\.sky-fab\)\s*\{[^}]*border:\s*1px solid var\(--sky-hairline\)/s,
+    )
+    expect(source).toMatch(
+      /\.mail-folder-row\s*\{[^}]*min-height:\s*52px/s,
+    )
+  })
+})
+
+describe('Mail custom mailbox server contract', () => {
+  it('persists account-owned mailboxes and custom entry placement', () => {
+    expect(migrationSource).toContain('name = "sky_phone_mailboxes"')
+    expect(migrationSource).toContain('{ name = "mailbox_id", type = "BIGINT UNSIGNED NULL" }')
+    expect(mailServerSource).toContain(
+      'Bridge.Callbacks.Register("sky_phone:mail:create-mailbox"',
+    )
+    expect(mailServerSource).toContain(
+      'Bridge.Callbacks.Register("sky_phone:mail:delete-mailbox"',
+    )
+    expect(mailServerSource).toContain(
+      'Bridge.Callbacks.Register("sky_phone:mail:move"',
+    )
+    expect(mailServerSource).toContain(
+      'WHERE `id` = ? AND `account_id` = ?',
+    )
+    expect(mailServerSource).toContain(
+      'WHERE `id` = ? AND `account_id` = ? AND `trashed_at` IS NULL',
+    )
+  })
+
+  it('exposes every mailbox callback through the client allowlist', () => {
+    for (const endpoint of [
+      'mail:mailboxes',
+      'mail:create-mailbox',
+      'mail:delete-mailbox',
+      'mail:move',
+    ]) {
+      expect(clientSource).toContain(`"${endpoint}"`)
+    }
+  })
+})
diff --git a/frontend/src/views/apps/MailApp.vue b/frontend/src/views/apps/MailApp.vue
index d22ff5d..54362dd 100644
--- a/frontend/src/views/apps/MailApp.vue
+++ b/frontend/src/views/apps/MailApp.vue
@@ -1,31 +1,38 @@
 <script setup lang="ts">
 import {
+  SkyButton,
   SkyDialog,
   SkyDialogButton,
   SkyFab,
+  SkyField,
   SkyLink,
   SkyNavbar,
   SkyNavbarBackLink,
+  SkySearchbar,
   SkyAppPage,
+  SkySheet,
   SkySpinner,
   SkyToast,
   SkyToolbar,
   SkyToolbarPane,
 } from '@/ui'
 import {
-  ArrowLeft,
+  CalendarDays,
   Check,
+  ChevronDown,
   ChevronRight,
   FileText,
+  Folder,
   Forward,
   Inbox,
+  ListFilter,
+  LogOut,
   Mail,
   MailCheck,
   MailOpen,
   Reply,
   ReplyAll,
   RotateCcw,
-  Search,
   Send,
   Share2,
   ShieldCheck,
@@ -45,9 +52,15 @@ import { usePhoneStore } from '@/stores/phone'
 import type {
   MailComposeDraft,
   MailCounts,
+  MailAddressFilter,
+  MailDirectionFilter,
   MailFolder,
+  MailFolderKey,
+  MailListFilters,
   MailListItem,
+  MailMailbox,
   MailMessage,
+  MailReadFilter,
 } from '@/types/mail'
 import {
   buildForwardDraft,
@@ -114,18 +127,90 @@ const ignoredRowClick = ref<string | null>(null)
 const selecting = ref(false)
 const selectedItemKeys = ref<string[]>([])
 const deletingSelected = ref(false)
+const mailFilters = ref<MailListFilters>({
+  address: 'all',
+  direction: 'all',
+  read: 'all',
+  today: false,
+})
+const draftMailFilters = ref<MailListFilters>({ ...mailFilters.value })
+const editingMailboxes = ref(false)
+const mailboxName = ref('')
+const mailboxCreateOpened = ref(false)
+const filtersOpened = ref(false)
+const mailboxMoveOpened = ref(false)
+const mailboxDeleteTarget = ref<MailMailbox | null>(null)
 let draftTimer: ReturnType<typeof setTimeout> | undefined
 let ignoredRowClickTimer: ReturnType<typeof setTimeout> | undefined
 let searchTimer: ReturnType<typeof setTimeout> | undefined
 let toastTimer: ReturnType<typeof setTimeout> | undefined
 
 const authenticated = computed(() => Boolean(mail.accountEmail))
-const folderTitle = computed(() => phone.t(`Apps.mail.${mail.folder}`))
+const folderTitle = computed(() => {
+  const mailboxId = mailboxIdFromFolder(mail.folder)
+  if (mailboxId) {
+    return (
+      mail.mailboxes.find((mailbox) => mailbox.id === mailboxId)?.name ??
+      phone.t('Apps.mail.mailboxes')
+    )
+  }
+  return phone.t(`Apps.mail.${mail.folder}`)
+})
 const selectedItems = computed(() =>
   mail.items.filter((item) =>
     selectedItemKeys.value.includes(mailItemKey(item)),
   ),
 )
+const activeFilterLabels = computed(() => {
+  const labels: string[] = []
+  if (mailFilters.value.read === 'unread') {
+    labels.push(phone.t('Apps.mail.filterUnreadLabel'))
+  } else if (mailFilters.value.read === 'read') {
+    labels.push(phone.t('Apps.mail.filterReadLabel'))
+  }
+  if (mailFilters.value.address === 'to-me') {
+    labels.push(phone.t('Apps.mail.filterToMe'))
+  } else if (mailFilters.value.address === 'from-me') {
+    labels.push(phone.t('Apps.mail.filterFromMe'))
+  }
+  if (mailFilters.value.direction === 'inbox') {
+    labels.push(phone.t('Apps.mail.filterReceived'))
+  } else if (mailFilters.value.direction === 'sent') {
+    labels.push(phone.t('Apps.mail.filterSent'))
+  }
+  if (mailFilters.value.today) {
+    labels.push(phone.t('Apps.mail.filterToday'))
+  }
+  return labels
+})
+const hasActiveFilters = computed(() => activeFilterLabels.value.length > 0)
+const activeFilterSummary = computed(() =>
+  activeFilterLabels.value.length === 1
+    ? (activeFilterLabels.value[0] ?? '')
+    : phone.t('Apps.mail.filterMultiple', {
+        count: String(activeFilterLabels.value.length),
+      }),
+)
+const filterButtonLabel = computed(() =>
+  hasActiveFilters.value
+    ? phone.t('Apps.mail.filterActiveLabel', {
+        filter: activeFilterSummary.value,
+      })
+    : phone.t('Apps.mail.filterTitle'),
+)
+const canFilterFolder = computed(
+  () => mail.folder === 'inbox' || Boolean(mailboxIdFromFolder(mail.folder)),
+)
+const visibleItems = computed(() => mail.items)
+const availableMoveMailboxes = computed(() => {
+  const currentMailboxId = mailboxIdFromFolder(mail.folder)
+  return mail.mailboxes.filter((mailbox) => mailbox.id !== currentMailboxId)
+})
+const canMoveMessage = computed(
+  () =>
+    Boolean(mailboxIdFromFolder(mail.folder)) ||
+    availableMoveMailboxes.value.length > 0,
+)
 const canSend = computed(
   () =>
     Boolean(parseMailRecipients(recipientText.value)) &&
@@ -133,6 +218,12 @@ const canSend = computed(
     body.value.length <= 20000 &&
     !submitting.value,
 )
+const canCreateMailbox = computed(
+  () =>
+    Boolean(mailboxName.value.trim()) &&
+    mailboxName.value.trim().length <= 50 &&
+    !submitting.value,
+)
 const editorLabels = computed<MailEditorLabels>(() => ({
   bold: phone.t('Apps.mail.formatBold'),
   bulletList: phone.t('Apps.mail.formatBulletList'),
@@ -140,6 +231,7 @@ const editorLabels = computed<MailEditorLabels>(() => ({
   numberedList: phone.t('Apps.mail.formatNumberedList'),
   quote: phone.t('Apps.mail.formatQuote'),
   redo: phone.t('Apps.mail.redo'),
+  toolbar: phone.t('Apps.mail.body'),
   undo: phone.t('Apps.mail.undo'),
 }))
 
@@ -165,6 +257,12 @@ function errorText(error?: string): string {
     'not_authenticated',
     'request_failed',
     'invalid_request',
+    'invalid_mailbox',
+    'mailbox_exists',
+    'mailbox_limit',
+    'mailbox_not_found',
+    'message_not_found',
+    'invalid_filter',
   ]
   return phone.t(
     `Apps.mail.errors.${error && known.includes(error) ? error : 'default'}`,
@@ -247,7 +345,7 @@ function mailItemKey(item: MailListItem): string {
 }
 
 function canSwipeRead(item: MailListItem): boolean {
-  return mail.folder === 'inbox' && !item.is_read
+  return item.folder === 'inbox' && !item.is_read
 }
 
 function mailRowStyle(
@@ -482,6 +580,16 @@ function folderCount(folder: MailFolder): number {
   return mail.counts[folder]
 }
 
+function mailboxFolderKey(id: number): `mailbox:${number}` {
+  return `mailbox:${id}`
+}
+
+function mailboxIdFromFolder(folder: MailFolderKey): number | null {
+  if (!folder.startsWith('mailbox:')) return null
+  const id = Number(folder.slice('mailbox:'.length))
+  return Number.isSafeInteger(id) && id > 0 ? id : null
+}
+
 async function submitAuth(): Promise<void> {
   if (
     authMode.value === 'register' &&
@@ -509,12 +617,14 @@ async function submitAuth(): Promise<void> {
 
 async function signOut(): Promise<void> {
   await mail.logout()
+  editingMailboxes.value = false
   selectedMessage.value = null
   screen.value = 'folders'
 }
 
-async function openFolder(folder: MailFolder): Promise<void> {
+async function openFolder(folder: MailFolderKey): Promise<void> {
   clearMailSelection()
+  resetMailFilters()
   if (!(await mail.loadFolder(folder))) {
     showToast(errorText())
     return
@@ -522,6 +632,101 @@ async function openFolder(folder: MailFolder): Promise<void> {
   screen.value = 'list'
 }
 
+function resetMailFilters(): void {
+  mailFilters.value = {
+    address: 'all',
+    direction: 'all',
+    read: 'all',
+    today: false,
+  }
+  draftMailFilters.value = { ...mailFilters.value }
+  mail.setListFilters(mailFilters.value)
+}
+
+function openMailFilters(): void {
+  draftMailFilters.value = { ...mailFilters.value }
+  filtersOpened.value = true
+}
+
+function closeMailFilters(): void {
+  draftMailFilters.value = { ...mailFilters.value }
+  filtersOpened.value = false
+}
+
+function toggleDraftReadFilter(filter: Exclude<MailReadFilter, 'all'>): void {
+  draftMailFilters.value.read =
+    draftMailFilters.value.read === filter ? 'all' : filter
+}
+
+function toggleDraftDirectionFilter(
+  filter: Exclude<MailDirectionFilter, 'all'>,
+): void {
+  draftMailFilters.value.direction =
+    draftMailFilters.value.direction === filter ? 'all' : filter
+}
+
+function toggleDraftAddressFilter(
+  filter: Exclude<MailAddressFilter, 'all'>,
+): void {
+  draftMailFilters.value.address =
+    draftMailFilters.value.address === filter ? 'all' : filter
+}
+
+async function applyMailFilters(): Promise<void> {
+  clearMailSelection()
+  mailFilters.value = { ...draftMailFilters.value }
+  mail.setListFilters(mailFilters.value)
+  filtersOpened.value = false
+  if (!(await mail.loadFolder(mail.folder, mail.search))) {
+    showToast(errorText())
+  }
+}
+
+function toggleMailboxEditing(): void {
+  editingMailboxes.value = !editingMailboxes.value
+}
+
+function beginMailboxCreate(): void {
+  mailboxName.value = ''
+  mailboxCreateOpened.value = true
+}
+
+function cancelMailboxCreate(): void {
+  if (submitting.value) return
+  mailboxName.value = ''
+  mailboxCreateOpened.value = false
+}
+
+async function createMailbox(): Promise<void> {
+  if (!canCreateMailbox.value) return
+
+  submitting.value = true
+  const response = await mail.createMailbox(mailboxName.value.trim())
+  submitting.value = false
+  if (!response.success) {
+    showToast(errorText(response.error))
+    return
+  }
+
+  mailboxName.value = ''
+  editingMailboxes.value = true
+  mailboxCreateOpened.value = false
+}
+
+function requestMailboxDelete(mailbox: MailMailbox): void {
+  mailboxDeleteTarget.value = mailbox
+}
+
+async function confirmMailboxDelete(): Promise<void> {
+  const mailbox = mailboxDeleteTarget.value
+  mailboxDeleteTarget.value = null
+  if (!mailbox) return
+
+  if (!(await mail.deleteMailbox(mailbox.id))) {
+    showToast(errorText())
+  }
+}
+
 async function openItem(item: MailListItem): Promise<void> {
   if (mail.folder === 'drafts') {
     const draft = await mail.openDraft(String(item.id))
@@ -595,11 +800,6 @@ async function closeCompose(): Promise<void> {
   screen.value = composeReturn.value
 }
 
-async function deleteCurrentDraft(): Promise<void> {
-  if (draftId.value) await mail.deleteDraft(draftId.value)
-  screen.value = composeReturn.value
-}
-
 async function sendMessage(): Promise<void> {
   const recipients = parseMailRecipients(recipientText.value)
   if (!recipients || !canSend.value) {
@@ -650,6 +850,37 @@ function shareMessage(): void {
   })
 }
 
+async function moveMessageToMailbox(mailbox: MailMailbox): Promise<void> {
+  if (!selectedMessage.value) return
+
+  const moved = await mail.moveEntry(selectedMessage.value.id, mailbox.id)
+  mailboxMoveOpened.value = false
+  if (!moved) {
+    showToast(errorText())
+    return
+  }
+
+  showToast(phone.t('Apps.mail.movedToMailbox', { mailbox: mailbox.name }))
+  selectedMessage.value = null
+  screen.value = 'list'
+}
+
+async function moveMessageToDefaultMailbox(): Promise<void> {
+  if (!selectedMessage.value) return
+
+  const mailboxName = phone.t(`Apps.mail.${selectedMessage.value.folder}`)
+  const moved = await mail.moveEntry(selectedMessage.value.id, null)
+  mailboxMoveOpened.value = false
+  if (!moved) {
+    showToast(errorText())
+    return
+  }
+
+  showToast(phone.t('Apps.mail.movedToMailbox', { mailbox: mailboxName }))
+  selectedMessage.value = null
+  screen.value = 'list'
+}
+
 async function mutateSelected(
   endpoint: string,
   extra: Record<string, unknown> = {},
@@ -663,8 +894,8 @@ async function mutateSelected(
   screen.value = 'list'
 }
 
-function updateSearch(event: Event): void {
-  const value = eventValue(event)
+function updateSearch(value: string): void {
+  mail.search = value
   if (selecting.value) clearMailSelection()
   if (searchTimer) clearTimeout(searchTimer)
   searchTimer = setTimeout(() => {
@@ -678,6 +909,7 @@ async function confirmEmptyTrash(): Promise<void> {
 }
 
 function clearMailSearch(): void {
+  if (searchTimer) clearTimeout(searchTimer)
   if (selecting.value) clearMailSelection()
   void mail.loadFolder(mail.folder, '')
 }
@@ -709,6 +941,7 @@ function onMailEvent(event: MessageEvent<MailEvent>): void {
   if (!isTrustedRootMessageSource(event.source, window)) return
   if (event.data.type === 'mail:changed' && event.data.data?.counts) {
     mail.setCounts(event.data.data.counts)
+    void mail.loadMailboxes()
     if (screen.value === 'list' && !deletingSelected.value) {
       void mail.loadFolder(mail.folder, mail.search)
     }
@@ -849,7 +1082,7 @@ onBeforeUnmount(() => {
           </template>
         </button>
         <p v-if="authMode === 'register'" class="mail-auth__warning">
-          <ShieldCheck :size="14" />
+          <ShieldCheck :size="17" />
           {{ phone.t('Apps.mail.passwordWarning') }}
         </p>
       </form>
@@ -861,23 +1094,44 @@ onBeforeUnmount(() => {
     class="mail-page"
     :aria-label="phone.t('Apps.mail.mailboxes')"
   >
-    <div class="mail-screen">
-      <header class="mail-header mail-header--large">
-        <span aria-hidden="true" />
-        <button class="mail-header__text" type="button" @click="signOut">
-          {{ phone.t('Apps.mail.logout') }}
-        </button>
-        <div class="mail-header__title">
-          <small>{{ mail.accountEmail }}</small>
-          <h1>{{ phone.t('Apps.mail.mailboxes') }}</h1>
-        </div>
-      </header>
+    <div class="mail-screen mail-screen--toolbar">
+      <sky-navbar
+        class="mail-navbar mail-folders-navbar"
+        large
+        :title="phone.t('Apps.mail.mailboxes')"
+        :subtitle="mail.accountEmail"
+      >
+        <template #left>
+          <sky-link
+            component="button"
+            icon-only
+            :aria-label="phone.t('Apps.mail.logout')"
+            @click="signOut"
+          >
+            <LogOut :size="20" />
+          </sky-link>
+        </template>
+        <template #right>
+          <sky-link
+            class="mail-folders-navbar__edit"
+            component="button"
+            @click="toggleMailboxEditing"
+          >
+            {{
+              phone.t(
+                editingMailboxes ? 'Common.done' : 'Apps.mail.editMailboxes',
+              )
+            }}
+          </sky-link>
+        </template>
+      </sky-navbar>
 
       <main class="mail-folders">
         <div class="mail-folders__card">
           <button
             class="mail-folder-row"
             type="button"
+            :disabled="editingMailboxes"
             @click="openFolder('inbox')"
           >
             <span class="mail-folder-row__icon"><Inbox :size="22" /></span>
@@ -888,6 +1142,7 @@ onBeforeUnmount(() => {
           <button
             class="mail-folder-row"
             type="button"
+            :disabled="editingMailboxes"
             @click="openFolder('sent')"
           >
             <span class="mail-folder-row__icon"><Send :size="21" /></span>
@@ -898,6 +1153,7 @@ onBeforeUnmount(() => {
           <button
             class="mail-folder-row"
             type="button"
+            :disabled="editingMailboxes"
             @click="openFolder('drafts')"
           >
             <span class="mail-folder-row__icon"><FileText :size="21" /></span>
@@ -908,6 +1164,7 @@ onBeforeUnmount(() => {
           <button
             class="mail-folder-row"
             type="button"
+            :disabled="editingMailboxes"
             @click="openFolder('trash')"
           >
             <span class="mail-folder-row__icon"><Trash2 :size="21" /></span>
@@ -915,18 +1172,72 @@ onBeforeUnmount(() => {
             <span>{{ folderCount('trash') }}</span>
             <ChevronRight :size="19" />
           </button>
+          <template v-for="mailbox in mail.mailboxes" :key="mailbox.id">
+            <div
+              v-if="editingMailboxes"
+              class="mail-folder-row mail-folder-row--editing"
+            >
+              <sky-button
+                class="mail-folder-row__delete"
+                variant="plain"
+                icon-only
+                :aria-label="
+                  phone.t('Apps.mail.deleteMailbox', { mailbox: mailbox.name })
+                "
+                @click="requestMailboxDelete(mailbox)"
+              >
+                <Trash2 :size="18" />
+              </sky-button>
+              <strong>{{ mailbox.name }}</strong>
+              <span>{{ mailbox.count || '' }}</span>
+              <span aria-hidden="true" />
+            </div>
+            <button
+              v-else
+              class="mail-folder-row"
+              type="button"
+              @click="openFolder(mailboxFolderKey(mailbox.id))"
+            >
+              <span class="mail-folder-row__icon"><Folder :size="21" /></span>
+              <strong>{{ mailbox.name }}</strong>
+              <span>{{ mailbox.count || '' }}</span>
+              <ChevronRight :size="19" />
+            </button>
+          </template>
         </div>
       </main>
 
-      <sky-fab
-        component="button"
-        class="mail-compose-fab"
-        type="button"
-        :aria-label="phone.t('Apps.mail.compose')"
-        @click="beginCompose()"
+      <sky-toolbar
+        component="footer"
+        class="mail-bottom-toolbar mail-folders-toolbar"
+        :aria-label="
+          phone.t(
+            editingMailboxes ? 'Apps.mail.newMailbox' : 'Apps.mail.compose',
+          )
+        "
       >
-        <template #icon><SquarePen :size="22" /></template>
-      </sky-fab>
+        <sky-fab
+          v-if="editingMailboxes"
+          component="button"
+          type="button"
+          variant="neutral"
+          :text="phone.t('Apps.mail.newMailbox')"
+          :aria-label="phone.t('Apps.mail.newMailbox')"
+          @click="beginMailboxCreate"
+        >
+          <template #icon><Folder :size="21" /></template>
+        </sky-fab>
+        <sky-fab
+          v-else
+          component="button"
+          type="button"
+          variant="neutral"
+          :aria-label="phone.t('Apps.mail.compose')"
+          @click="beginCompose()"
+        >
+          <template #icon><SquarePen :size="22" /></template>
+        </sky-fab>
+      </sky-toolbar>
     </div>
   </sky-app-page>
 
@@ -935,67 +1246,55 @@ onBeforeUnmount(() => {
     class="mail-page"
     :aria-label="folderTitle"
   >
-    <div class="mail-screen">
-      <header class="mail-header mail-header--list">
-        <sky-link
-          component="button"
-          icon-only
-          class="mail-header__back"
-          :aria-label="phone.t('Apps.mail.mailboxes')"
-          @click="goBack"
-        >
-          <ArrowLeft :size="21" />
-        </sky-link>
-        <div v-if="mail.items.length" class="mail-header__actions">
-          <sky-link
-            v-if="mail.folder === 'trash' && !selecting"
+    <div class="mail-screen mail-screen--toolbar">
+      <sky-navbar
+        class="mail-navbar mail-list-navbar"
+        large
+        :title="folderTitle"
+        :subtitle="
+          selecting
+            ? phone.t('Apps.mail.selectedCount', {
+                count: String(selectedItems.length),
+              })
+            : `${visibleItems.length} ${phone.t('Apps.mail.messages')}`
+        "
+      >
+        <template #left>
+          <sky-navbar-back-link
             component="button"
-            @click="emptyTrashOpened = true"
-          >
-            {{ phone.t('Apps.mail.emptyTrash') }}
-          </sky-link>
-          <sky-link
-            component="button"
-            :disabled="deletingSelected"
-            @click="toggleMailSelection"
-          >
-            {{ phone.t(selecting ? 'Common.done' : 'Apps.mail.select') }}
-          </sky-link>
-        </div>
-        <span v-else />
-        <div class="mail-header__title">
-          <small>{{
-            selecting
-              ? phone.t('Apps.mail.selectedCount', {
-                  count: String(selectedItems.length),
-                })
-              : `${mail.items.length} ${phone.t('Apps.mail.messages')}`
-          }}</small>
-          <h1>{{ folderTitle }}</h1>
-        </div>
-        <label class="mail-search">
-          <Search :size="17" />
-          <input
-            :value="mail.search"
-            :placeholder="phone.t('Apps.mail.search')"
-            @input="updateSearch"
+            :text="phone.t('Apps.mail.mailboxes')"
+            :aria-label="phone.t('Apps.mail.mailboxes')"
+            @click="goBack"
           />
-          <button
-            v-if="mail.search"
-            type="button"
-            :aria-label="phone.t('Common.close')"
-            @click="clearMailSearch"
-          >
-            <X :size="14" />
-          </button>
-        </label>
-      </header>
+        </template>
+        <template v-if="mail.items.length" #right>
+          <div class="mail-navbar__actions">
+            <sky-link
+              v-if="mail.folder === 'trash' && !selecting"
+              component="button"
+              icon-only
+              :aria-label="phone.t('Apps.mail.emptyTrash')"
+              @click="emptyTrashOpened = true"
+            >
+              <Trash2 :size="19" />
+            </sky-link>
+            <sky-link
+              class="mail-navbar__select"
+              component="button"
+              :disabled="deletingSelected"
+              @click="toggleMailSelection"
+            >
+              {{ phone.t(selecting ? 'Common.done' : 'Apps.mail.select') }}
+            </sky-link>
+          </div>
+        </template>
+      </sky-navbar>
 
       <main class="mail-list">
         <div v-if="mail.loading" class="mail-loading"><sky-spinner /></div>
-        <template v-else-if="mail.items.length">
+        <template v-else-if="visibleItems.length">
           <div
-            v-for="(item, index) in mail.items"
+            v-for="(item, index) in visibleItems"
             :key="`${mail.folder}-${item.id}`"
             class="mail-row-shell"
             :class="mailRowClasses(item)"
@@ -1016,7 +1315,7 @@ onBeforeUnmount(() => {
             <button
               class="mail-row"
               :class="{
-                'mail-row--unread': mail.folder === 'inbox' && !item.is_read,
+                'mail-row--unread': item.folder === 'inbox' && !item.is_read,
                 'mail-row--selecting': selecting,
               }"
               type="button"
@@ -1024,7 +1323,7 @@ onBeforeUnmount(() => {
               @click="handleMailRowClick(item)"
             >
               <span
-                v-if="!selecting && mail.folder === 'inbox' && !item.is_read"
+                v-if="!selecting && item.folder === 'inbox' && !item.is_read"
                 class="mail-row__unread"
               />
               <span v-if="selecting" class="mail-row__selection">
@@ -1062,38 +1361,97 @@ onBeforeUnmount(() => {
             {{ phone.t('Apps.mail.loadMore') }}
           </button>
         </template>
-        <div v-else class="mail-empty">
-          <Mail :size="38" />
-          <h2>
-            {{
-              phone.t(mail.search ? 'Apps.mail.noResults' : 'Apps.mail.noMail')
-            }}
-          </h2>
-          <p>
-            {{
-              phone.t(
-                mail.search
-                  ? 'Apps.mail.noResultsBody'
-                  : 'Apps.mail.noMailBody',
-              )
-            }}
-          </p>
+        <div
+          v-else
+          class="mail-empty"
+          :class="{ 'mail-empty--filtered': hasActiveFilters }"
+        >
+          <template v-if="hasActiveFilters">
+            <h2>{{ phone.t('Apps.mail.noMail') }}</h2>
+          </template>
+          <template v-else>
+            <Mail :size="38" />
+            <h2>
+              {{
+                phone.t(mail.search ? 'Apps.mail.noResults' : 'Apps.mail.noMail')
+              }}
+            </h2>
+            <p>
+              {{
+                phone.t(
+                  mail.search
+                    ? 'Apps.mail.noResultsBody'
+                    : 'Apps.mail.noMailBody',
+                )
+              }}
+            </p>
+          </template>
         </div>
       </main>
 
-      <sky-fab
+      <sky-toolbar
         v-if="!selecting"
-        component="button"
-        class="mail-compose-fab"
-        type="button"
-        :aria-label="phone.t('Apps.mail.compose')"
-        @click="beginCompose()"
+        component="footer"
+        class="mail-bottom-toolbar mail-list-toolbar"
+        :aria-label="phone.t('Apps.mail.toolbar')"
       >
-        <template #icon><SquarePen :size="21" /></template>
-      </sky-fab>
+        <sky-fab
+          v-if="hasActiveFilters"
+          component="button"
+          type="button"
+          class="mail-filter-fab mail-filter-fab--active"
+          variant="neutral"
+          :disabled="!canFilterFolder"
+          :aria-label="filterButtonLabel"
+          :aria-pressed="true"
+          @click="openMailFilters"
+        >
+          <template #icon><ListFilter :size="21" /></template>
+          <template #text>
+            <span class="mail-filter-fab__copy">
+              <small>{{ phone.t('Apps.mail.filteredBy') }}</small>
+              <strong>
+                {{ activeFilterSummary }}
+                <ChevronDown :size="15" />
+              </strong>
+            </span>
+          </template>
+        </sky-fab>
+        <sky-fab
+          v-else
+          component="button"
+          type="button"
+          class="mail-filter-fab"
+          variant="neutral"
+          :disabled="!canFilterFolder"
+          :aria-label="filterButtonLabel"
+          :aria-pressed="false"
+          @click="openMailFilters"
+        >
+          <template #icon><ListFilter :size="21" /></template>
+        </sky-fab>
+        <sky-searchbar
+          :model-value="mail.search"
+          :clear-label="phone.t('Common.clear')"
+          :label="phone.t('Apps.mail.search')"
+          :placeholder="phone.t('Apps.mail.search')"
+          @clear="clearMailSearch"
+          @update:model-value="updateSearch"
+        />
+        <sky-fab
+          component="button"
+          type="button"
+          variant="neutral"
+          :aria-label="phone.t('Apps.mail.compose')"
+          @click="beginCompose()"
+        >
+          <template #icon><SquarePen :size="21" /></template>
+        </sky-fab>
+      </sky-toolbar>
       <sky-toolbar
         v-else
-        class="mail-selection-toolbar"
+        component="footer"
+        class="mail-bottom-toolbar mail-selection-toolbar"
         inner-class="mail-selection-toolbar__inner"
         :outline="false"
       >
@@ -1124,7 +1482,7 @@ onBeforeUnmount(() => {
     class="mail-page"
     :aria-label="selectedMessage.subject"
   >
-    <div class="mail-screen">
+    <div class="mail-screen mail-screen--toolbar">
       <sky-navbar class="mail-navbar" :title="folderTitle">
         <template #left>
           <sky-navbar-back-link
@@ -1173,7 +1531,8 @@ onBeforeUnmount(() => {
       </article>
 
       <sky-toolbar
-        class="mail-action-bar"
+        component="footer"
+        class="mail-bottom-toolbar mail-action-bar"
         inner-class="mail-action-bar__inner"
         :outline="false"
       >
@@ -1214,6 +1573,16 @@ onBeforeUnmount(() => {
           >
             <Forward :size="20" />
           </sky-link>
+          <sky-link
+            v-if="canMoveMessage && !selectedMessage.trashed_at"
+            component="button"
+            icon-only
+            type="button"
+            :aria-label="phone.t('Apps.mail.moveToMailbox')"
+            @click="mailboxMoveOpened = true"
+          >
+            <Folder :size="20" />
+          </sky-link>
           <sky-link
             v-if="selectedMessage.trashed_at"
             component="button"
@@ -1265,31 +1634,29 @@ onBeforeUnmount(() => {
     <div class="mail-screen mail-compose">
       <sky-navbar
         class="mail-navbar mail-compose__navbar"
-        left-class="mail-compose__nav-side mail-compose__nav-side--left"
-        right-class="mail-compose__nav-side mail-compose__nav-side--right"
-        title-class="mail-compose__nav-title"
         :title="phone.t('Apps.mail.compose')"
       >
         <template #left>
           <sky-link
             component="button"
-            class="mail-compose__nav-action"
+            icon-only
             type="button"
+            :aria-label="phone.t('Common.cancel')"
             @click="closeCompose"
           >
-            {{ phone.t('Common.cancel') }}
+            <X :size="21" />
           </sky-link>
         </template>
         <template #right>
           <sky-link
             component="button"
-            class="mail-compose__nav-action"
+            icon-only
             type="button"
             :disabled="!canSend"
             :aria-label="phone.t('Common.send')"
             @click="sendMessage"
           >
-            {{ phone.t('Common.send') }}
+            <Send :size="20" />
           </sky-link>
         </template>
       </sky-navbar>
@@ -1332,9 +1699,6 @@ onBeforeUnmount(() => {
         />
       </div>
       <div class="mail-compose__meta">
-        <button v-if="draftId" type="button" @click="deleteCurrentDraft">
-          <Trash2 :size="15" /> {{ phone.t('Apps.mail.deleteDraft') }}
-        </button>
         <span :class="{ 'is-over-limit': body.length > 20000 }">
           {{ body.length.toLocaleString(phone.lang) }} / 20,000
         </span>
@@ -1342,7 +1706,245 @@ onBeforeUnmount(() => {
     </div>
   </sky-app-page>
 
+  <sky-sheet
+    class="mail-modal mail-mailbox-modal"
+    :opened="mailboxCreateOpened"
+    :aria-label="phone.t('Apps.mail.newMailbox')"
+    grabber-clickable
+    :grabber-label="phone.t('Common.cancel')"
+    swipe-to-close
+    @backdropclick="cancelMailboxCreate"
+    @escape="cancelMailboxCreate"
+    @grabberclick="cancelMailboxCreate"
+    @swipeclose="cancelMailboxCreate"
+  >
+    <section class="mail-modal__surface mail-mailbox-create">
+      <header class="mail-modal__navbar">
+        <sky-button
+          class="mail-modal__nav-button"
+          icon-only
+          inline
+          rounded
+          type="button"
+          variant="secondary"
+          :aria-label="phone.t('Common.cancel')"
+          @click="cancelMailboxCreate"
+        >
+          <X :size="20" />
+        </sky-button>
+        <h2>{{ phone.t('Apps.mail.newMailbox') }}</h2>
+        <sky-button
+          class="mail-modal__nav-button"
+          :disabled="!canCreateMailbox"
+          icon-only
+          inline
+          rounded
+          type="button"
+          variant="secondary"
+          :aria-label="phone.t('Common.save')"
+          @click="createMailbox"
+        >
+          <Check :size="20" />
+        </sky-button>
+      </header>
+
+      <form class="mail-mailbox-create__form" @submit.prevent="createMailbox">
+        <sky-field
+          v-model="mailboxName"
+          class="mail-mailbox-create__name"
+          component="div"
+          autofocus
+          clear-button
+          :clear-label="phone.t('Common.clear')"
+          input-id="mail-mailbox-name"
+          :aria-label="phone.t('Apps.mail.mailboxName')"
+          :maxlength="50"
+          :placeholder="phone.t('Apps.mail.mailboxNamePlaceholder')"
+        />
+
+        <section class="mail-mailbox-create__location">
+          <h3>{{ phone.t('Apps.mail.mailboxLocation') }}</h3>
+          <div class="mail-mailbox-create__location-row">
+            <span>{{ mail.accountEmail }}</span>
+            <ChevronRight :size="18" aria-hidden="true" />
+          </div>
+        </section>
+      </form>
+    </section>
+  </sky-sheet>
+
+  <sky-sheet
+    class="mail-modal mail-filter-modal"
+    :opened="filtersOpened"
+    :aria-label="phone.t('Apps.mail.filterTitle')"
+    grabber-clickable
+    :grabber-label="phone.t('Common.cancel')"
+    swipe-to-close
+    @backdropclick="closeMailFilters"
+    @escape="closeMailFilters"
+    @grabberclick="closeMailFilters"
+    @swipeclose="closeMailFilters"
+  >
+    <section class="mail-modal__surface mail-filters">
+      <header class="mail-modal__navbar mail-filters__navbar">
+        <span aria-hidden="true"></span>
+        <h2>{{ phone.t('Apps.mail.filterTitle') }}</h2>
+        <sky-link
+          class="mail-filters__done"
+          component="button"
+          icon-only
+          :aria-label="phone.t('Common.done')"
+          @click="applyMailFilters"
+        >
+          <Check :size="22" />
+        </sky-link>
+      </header>
+
+      <main class="mail-filters__content">
+        <section class="mail-filter-section">
+          <h2>{{ phone.t('Apps.mail.filterStatus') }}</h2>
+          <div class="mail-filter-card">
+            <sky-button
+              block
+              class="mail-filter-row"
+              type="button"
+              variant="plain"
+              :aria-pressed="draftMailFilters.read === 'unread'"
+              @click="toggleDraftReadFilter('unread')"
+            >
+              <Mail :size="20" />
+              <span>{{ phone.t('Apps.mail.filterUnreadLabel') }}</span>
+              <Check
+                v-if="draftMailFilters.read === 'unread'"
+                :size="20"
+                class="mail-filter-row__check"
+              />
+            </sky-button>
+            <sky-button
+              block
+              class="mail-filter-row"
+              type="button"
+              variant="plain"
+              :aria-pressed="draftMailFilters.read === 'read'"
+              @click="toggleDraftReadFilter('read')"
+            >
+              <MailOpen :size="20" />
+              <span>{{ phone.t('Apps.mail.filterReadLabel') }}</span>
+              <Check
+                v-if="draftMailFilters.read === 'read'"
+                :size="20"
+                class="mail-filter-row__check"
+              />
+            </sky-button>
+          </div>
+        </section>
+
+        <section class="mail-filter-section">
+          <h2>{{ phone.t('Apps.mail.filterAddressed') }}</h2>
+          <div class="mail-filter-card">
+            <sky-button
+              block
+              class="mail-filter-row"
+              type="button"
+              variant="plain"
+              :aria-pressed="draftMailFilters.address === 'to-me'"
+              @click="toggleDraftAddressFilter('to-me')"
+            >
+              <Inbox :size="20" />
+              <span>{{ phone.t('Apps.mail.filterToMe') }}</span>
+              <Check
+                v-if="draftMailFilters.address === 'to-me'"
+                :size="20"
+                class="mail-filter-row__check"
+              />
+            </sky-button>
+            <sky-button
+              block
+              class="mail-filter-row"
+              type="button"
+              variant="plain"
+              :aria-pressed="draftMailFilters.address === 'from-me'"
+              @click="toggleDraftAddressFilter('from-me')"
+            >
+              <Send :size="20" />
+              <span>{{ phone.t('Apps.mail.filterFromMe') }}</span>
+              <Check
+                v-if="draftMailFilters.address === 'from-me'"
+                :size="20"
+                class="mail-filter-row__check"
+              />
+            </sky-button>
+          </div>
+        </section>
+
+        <section
+          v-if="mailboxIdFromFolder(mail.folder)"
+          class="mail-filter-section"
+        >
+          <h2>{{ phone.t('Apps.mail.filterDirection') }}</h2>
+          <div class="mail-filter-card">
+            <sky-button
+              block
+              class="mail-filter-row"
+              type="button"
+              variant="plain"
+              :aria-pressed="draftMailFilters.direction === 'inbox'"
+              @click="toggleDraftDirectionFilter('inbox')"
+            >
+              <Inbox :size="20" />
+              <span>{{ phone.t('Apps.mail.filterReceived') }}</span>
+              <Check
+                v-if="draftMailFilters.direction === 'inbox'"
+                :size="20"
+                class="mail-filter-row__check"
+              />
+            </sky-button>
+            <sky-button
+              block
+              class="mail-filter-row"
+              type="button"
+              variant="plain"
+              :aria-pressed="draftMailFilters.direction === 'sent'"
+              @click="toggleDraftDirectionFilter('sent')"
+            >
+              <Send :size="20" />
+              <span>{{ phone.t('Apps.mail.filterSent') }}</span>
+              <Check
+                v-if="draftMailFilters.direction === 'sent'"
+                :size="20"
+                class="mail-filter-row__check"
+              />
+            </sky-button>
+          </div>
+        </section>
+
+        <section class="mail-filter-section">
+          <h2>{{ phone.t('Apps.mail.filterOther') }}</h2>
+          <div class="mail-filter-card">
+            <sky-button
+              block
+              class="mail-filter-row"
+              type="button"
+              variant="plain"
+              :aria-pressed="draftMailFilters.today"
+              @click="draftMailFilters.today = !draftMailFilters.today"
+            >
+              <CalendarDays :size="20" />
+              <span>{{ phone.t('Apps.mail.filterToday') }}</span>
+              <Check
+                v-if="draftMailFilters.today"
+                :size="20"
+                class="mail-filter-row__check"
+              />
+            </sky-button>
+          </div>
+        </section>
+      </main>
+    </section>
+  </sky-sheet>
+
   <sky-dialog
+    class="mail-dialog"
     :opened="emptyTrashOpened"
     @backdropclick="emptyTrashOpened = false"
   >
@@ -1358,6 +1960,66 @@ onBeforeUnmount(() => {
     </template>
   </sky-dialog>
 
+  <sky-dialog
+    class="mail-dialog"
+    :opened="mailboxMoveOpened"
+    @backdropclick="mailboxMoveOpened = false"
+  >
+    <template #title>{{ phone.t('Apps.mail.moveToMailbox') }}</template>
+    <div class="mail-mailbox-picker">
+      <sky-button
+        v-if="mailboxIdFromFolder(mail.folder) && selectedMessage"
+        block
+        type="button"
+        variant="secondary"
+        @click="moveMessageToDefaultMailbox"
+      >
+        <Inbox v-if="selectedMessage.folder === 'inbox'" :size="18" />
+        <Send v-else :size="18" />
+        <span>{{ phone.t(`Apps.mail.${selectedMessage.folder}`) }}</span>
+      </sky-button>
+      <sky-button
+        v-for="mailbox in availableMoveMailboxes"
+        :key="mailbox.id"
+        block
+        type="button"
+        variant="secondary"
+        @click="moveMessageToMailbox(mailbox)"
+      >
+        <Folder :size="18" />
+        <span>{{ mailbox.name }}</span>
+      </sky-button>
+    </div>
+    <template #buttons>
+      <sky-dialog-button @click="mailboxMoveOpened = false">
+        {{ phone.t('Common.cancel') }}
+      </sky-dialog-button>
+    </template>
+  </sky-dialog>
+
+  <sky-dialog
+    class="mail-dialog"
+    :opened="Boolean(mailboxDeleteTarget)"
+    @backdropclick="mailboxDeleteTarget = null"
+  >
+    <template #title>{{ phone.t('Apps.mail.deleteMailboxTitle') }}</template>
+    <p>
+      {{
+        phone.t('Apps.mail.deleteMailboxBody', {
+          mailbox: mailboxDeleteTarget?.name ?? '',
+        })
+      }}
+    </p>
+    <template #buttons>
+      <sky-dialog-button @click="mailboxDeleteTarget = null">
+        {{ phone.t('Common.cancel') }}
+      </sky-dialog-button>
+      <sky-dialog-button strong @click="confirmMailboxDelete">
+        {{ phone.t('Common.delete') }}
+      </sky-dialog-button>
+    </template>
+  </sky-dialog>
+
   <sky-toast
     :opened="toastOpened"
     position="center"
@@ -1368,11 +2030,15 @@ onBeforeUnmount(() => {
 </template>
 
 <style scoped>
-.mail-page {
+.mail-page,
+.mail-modal {
   --mail-blue: #0a84ff;
   --mail-border: var(--sky-hairline);
   --mail-muted: var(--sky-muted);
   --mail-surface: var(--sky-surface);
+}
+
+.mail-page {
   min-height: 0 !important;
   padding: 0 !important;
   overflow: hidden;
@@ -1389,6 +2055,12 @@ onBeforeUnmount(() => {
   animation: mail-screen-enter 240ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
 }
 
+.mail-screen--toolbar,
+.mail-compose {
+  display: flex;
+  flex-direction: column;
+}
+
 button,
 input {
   font: inherit;
@@ -1398,91 +2070,31 @@ button {
   color: inherit;
 }
 
-.mail-header {
-  position: relative;
-  z-index: 5;
-  display: grid;
-  grid-template-columns: 54px 1fr 54px;
-  align-items: center;
-  padding: 51px 15px 10px;
-  background: color-mix(in srgb, var(--sky-bg) 88%, transparent);
-  backdrop-filter: blur(18px) saturate(150%);
-  -webkit-backdrop-filter: blur(18px) saturate(150%);
-}
-
-.mail-header > :first-child {
-  justify-self: start;
-}
-
-.mail-header > :nth-child(2) {
-  justify-self: center;
-}
-
-.mail-header > :nth-child(3) {
-  justify-self: end;
-}
-
-.mail-header--large,
-.mail-header--list {
-  grid-template-rows: 40px auto;
-  padding-bottom: 12px;
-}
-
-.mail-header--large {
-  grid-template-columns: 54px 1fr 86px;
-}
-
-.mail-header--large > :nth-child(2) {
-  grid-column: 3;
-  justify-self: end;
-  white-space: nowrap;
-}
-
-.mail-header--large .mail-header__title,
-.mail-header--list .mail-header__title {
-  grid-column: 1 / -1;
-  justify-self: stretch;
-  padding-top: 8px;
-}
-
-.mail-header__title h1 {
-  margin: 0;
-  font-size: 32px;
-  font-weight: 760;
-  line-height: 1.08;
-  letter-spacing: -1.2px;
-}
-
-.mail-header__title small {
-  display: block;
-  margin-bottom: 3px;
-  overflow: hidden;
-  color: var(--mail-muted);
-  font-size: 11px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.mail-header__text {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  border: 0;
-  padding: 5px 0;
-  background: none;
-  color: var(--mail-blue);
-  font-size: 13px;
-  cursor: pointer;
-}
-
-.mail-header__back {
-  width: 38px;
-  height: 38px;
-  color: var(--mail-blue);
-}
-
 .mail-folders {
-  padding: 8px 15px 90px;
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 15px 24px;
+}
+
+.mail-folders-navbar :deep(.sky-navbar__left),
+.mail-folders-navbar :deep(.sky-navbar__right) {
+  min-width: var(--sky-touch-target);
+}
+
+.mail-folders-navbar :deep(.mail-folders-navbar__edit.sky-link),
+.mail-modal__navbar :deep(.sky-link) {
+  width: auto;
+  min-width: var(--sky-touch-target);
+  padding: 0 var(--sky-space-3);
+  color: #fff;
+  font-size: 15px;
+}
+
+.mail-folders-navbar :deep(.mail-folders-navbar__edit.sky-link:focus-visible),
+.mail-modal__navbar :deep(.sky-link:focus-visible) {
+  outline: 0;
+  box-shadow: inset 0 0 0 1px #fff;
 }
 
 .mail-folders__card {
@@ -1495,7 +2107,7 @@ button {
 .mail-folder-row {
   position: relative;
   width: 100%;
-  min-height: 61px;
+  min-height: 52px;
   display: grid;
   grid-template-columns: 36px 1fr auto 18px;
   align-items: center;
@@ -1508,6 +2120,11 @@ button {
   transition: background-color 160ms ease;
 }
 
+.mail-folder-row:disabled {
+  cursor: default;
+  opacity: 1;
+}
+
 .mail-folder-row:not(:last-child)::after {
   position: absolute;
   right: 13px;
@@ -1537,69 +2154,297 @@ button {
   color: var(--mail-blue);
 }
 
-.mail-header--list {
-  grid-template-columns: 1fr 1fr;
+.mail-folder-row--editing {
+  grid-template-columns: 36px minmax(0, 1fr) auto 18px;
 }
 
-.mail-header--list > .mail-header__actions {
+.mail-folder-row__delete {
+  width: 32px;
+  min-width: 32px;
+  height: 44px;
+  min-height: 44px;
+  margin-left: -6px;
+  padding: 0;
+  color: #ff453a;
+}
+
+.mail-modal {
+  --sky-overlay-layer: 85;
+}
+
+.mail-modal :deep(.sky-overlay-backdrop) {
+  background: rgba(0, 0, 0, 0.58);
+}
+
+.mail-modal :deep(.sky-sheet__panel) {
+  height: calc(100% - 48px);
+  max-height: calc(100% - 48px);
+  overflow: hidden;
+  border-radius: 26px 26px 0 0;
+  background: var(--sky-bg);
+}
+
+.mail-mailbox-modal :deep(.sky-sheet__panel) {
+  height: auto;
+  background: var(--sky-surface);
+}
+
+.mail-modal__surface {
+  height: calc(100% - 32px);
+  min-height: 0;
   display: flex;
+  flex-direction: column;
+  background: var(--sky-bg);
+}
+
+.mail-mailbox-create {
+  height: auto;
+  background: var(--sky-surface);
+}
+
+.mail-modal__navbar {
+  min-height: 56px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
   align-items: center;
-  gap: 10px;
-  justify-self: end;
+  gap: var(--sky-space-2);
+  padding: 0 var(--sky-space-3);
+  border-bottom: 1px solid var(--mail-border);
+}
+
+.mail-modal__navbar h2 {
+  overflow: hidden;
+  margin: 0;
+  color: var(--sky-text);
+  font-size: 16px;
+  font-weight: 650;
+  text-align: center;
+  text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.mail-header__actions :deep(.sky-link) {
-  border: 0;
-  padding: 4px 0;
-  background: transparent;
-  color: var(--mail-blue);
-  font-size: 12px;
+.mail-modal__navbar > :first-child {
+  justify-self: start;
 }
 
-.mail-header__actions :deep(.sky-link:disabled) {
-  opacity: 0.4;
+.mail-modal__navbar > :last-child {
+  justify-self: end;
 }
 
-.mail-search {
-  grid-column: 1 / -1;
-  display: flex;
-  height: 34px;
-  align-items: center;
-  gap: 7px;
-  margin-top: 11px;
-  padding: 0 10px;
-  border-radius: 10px;
+.mail-filters__navbar :deep(.mail-filters__done.sky-link) {
+  width: var(--sky-touch-target);
+  min-width: var(--sky-touch-target);
+  height: var(--sky-touch-target);
+  min-height: var(--sky-touch-target);
+  border-radius: 50%;
+  background: var(--mail-blue);
+  color: #fff;
+}
+
+.mail-filters__navbar :deep(.mail-filters__done.sky-link:focus-visible) {
+  outline: 0;
+  box-shadow: inset 0 0 0 1px #fff;
+}
+
+.mail-filters__content {
+  min-height: 0;
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--sky-space-4) var(--sky-page-gutter) 28px;
+}
+
+.mail-filter-section + .mail-filter-section {
+  margin-top: var(--sky-space-6);
+}
+
+.mail-filter-section h2 {
+  margin: 0 0 var(--sky-space-2) var(--sky-space-3);
+  color: var(--mail-muted);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.mail-filter-card {
+  overflow: hidden;
+  border: 1px solid #ffffff08;
+  border-radius: 20px;
   background: var(--mail-surface);
+}
+
+.mail-filter-card :deep(.mail-filter-row.sky-button) {
+  position: relative;
+  width: 100%;
+  min-height: 52px;
+  display: grid;
+  grid-template-columns: 28px minmax(0, 1fr) 24px;
+  align-items: center;
+  gap: var(--sky-space-3);
+  border: 0;
+  border-radius: 0;
+  padding: 0 var(--sky-space-4);
+  background: transparent;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 500;
+  text-align: left;
+  text-transform: none;
+}
+
+.mail-filter-card :deep(.mail-filter-row + .mail-filter-row::before) {
+  position: absolute;
+  top: 0;
+  right: var(--sky-space-4);
+  left: 52px;
+  height: 1px;
+  background: var(--mail-border);
+  content: '';
+}
+
+.mail-filter-card :deep(.mail-filter-row > svg:first-child) {
+  color: #fff;
+}
+
+.mail-filter-card :deep(.mail-filter-row__check) {
+  color: var(--mail-blue);
+}
+
+.mail-mailbox-create__form {
+  min-height: 0;
+  display: grid;
+  align-content: start;
+  gap: var(--sky-space-6);
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--sky-space-6) var(--sky-page-gutter)
+    calc(24px + var(--sky-safe-area-bottom));
+}
+
+.mail-modal__navbar :deep(.mail-modal__nav-button.sky-button) {
+  width: var(--sky-touch-target);
+  min-width: var(--sky-touch-target);
+  height: var(--sky-touch-target);
+  min-height: var(--sky-touch-target);
+  padding: 0;
+  border: 1px solid var(--sky-hairline);
+  background: var(--sky-surface-tint);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 550;
+}
+
+.mail-modal__navbar :deep(.mail-modal__nav-button.sky-button:focus-visible) {
+  outline: 0;
+  box-shadow: inset 0 0 0 1px #fff;
+}
+
+.mail-mailbox-create__name {
+  min-height: 54px;
+  padding-left: 0;
+  border: 1px solid #ffffff0d;
+  border-radius: 17px;
+  background: var(--sky-surface-variant);
+}
+
+.mail-mailbox-create__name:focus-within {
+  border-color: #ffffff38;
+}
+
+.mail-mailbox-create__form :deep(.mail-mailbox-create__name .sky-field__inner) {
+  align-self: auto;
+  padding: 0 var(--sky-space-4);
+}
+
+.mail-mailbox-create__form :deep(.mail-mailbox-create__name .sky-field__control) {
+  min-height: 52px;
+  margin: 0;
+  color: var(--sky-text);
+}
+
+.mail-mailbox-create__form :deep(.mail-mailbox-create__name .sky-field__input) {
+  height: 52px;
+  color: var(--sky-text);
+  font-size: 15px;
+}
+
+.mail-mailbox-create__form :deep(.mail-mailbox-create__name .sky-field__input::placeholder) {
+  color: var(--mail-muted);
+  opacity: 1;
+}
+
+.mail-mailbox-create__location h3 {
+  margin: 0 0 var(--sky-space-2) var(--sky-space-3);
+  color: var(--mail-muted);
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.mail-mailbox-create__location-row {
+  min-height: 54px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--sky-space-3);
+  padding: 0 var(--sky-space-4);
+  border: 1px solid #ffffff0d;
+  border-radius: 17px;
+  background: var(--sky-surface-variant);
+  color: var(--sky-text);
+  font-size: 15px;
+}
+
+.mail-mailbox-create__location-row span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mail-mailbox-create__location-row svg {
   color: var(--mail-muted);
 }
 
-.mail-search input {
-  min-width: 0;
-  flex: 1;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  color: var(--sky-text);
-  font-size: 14px;
+.mail-navbar__actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  white-space: nowrap;
 }
 
-.mail-search button {
-  display: grid;
-  width: 20px;
-  height: 20px;
-  place-items: center;
+.mail-navbar__actions :deep(.sky-link) {
   border: 0;
-  border-radius: 50%;
-  padding: 0;
-  background: #636366;
-  color: #1c1c1e;
+  padding: 4px 0;
+  background: transparent;
+  color: #fff;
+  font-size: 12px;
+}
+
+.mail-navbar__actions :deep(.sky-link:disabled) {
+  opacity: 0.4;
+}
+
+.mail-list-navbar
+  .mail-navbar__actions
+  :deep(.mail-navbar__select.sky-link) {
+  width: auto;
+  height: var(--sky-touch-target);
+  min-width: 0;
+  min-height: var(--sky-touch-target);
+  padding: 0 var(--sky-space-3);
+  color: #fff;
+  font-size: 15px;
+}
+
+.mail-list-navbar
+  .mail-navbar__actions
+  :deep(.mail-navbar__select.sky-link:focus-visible) {
+  outline: 0;
+  box-shadow: inset 0 0 0 1px #fff;
 }
 
 .mail-list {
-  height: calc(100% - 188px);
+  min-height: 0;
+  flex: 1;
   overflow-y: auto;
-  padding: 0 0 82px;
+  padding: 0 0 18px;
 }
 
 .mail-row-shell {
@@ -1668,12 +2513,11 @@ button {
   border: 0;
   padding: 8px 13px 8px 19px;
   background: var(--sky-bg);
+  color: var(--sky-text);
   text-align: left;
   cursor: pointer;
   transform: translate3d(var(--mail-row-offset), 0, 0);
-  transition:
-    transform 260ms cubic-bezier(0.22, 0.8, 0.3, 1),
-    background-color 160ms ease;
+  transition: transform 260ms cubic-bezier(0.22, 0.8, 0.3, 1);
   will-change: transform;
 }
 
@@ -1814,19 +2658,111 @@ button {
   color: #48484a;
 }
 
-.mail-compose-fab {
-  position: absolute;
-  z-index: 8;
-  right: 17px;
-  bottom: 32px;
+.mail-bottom-toolbar {
+  flex: none;
+  padding-bottom: calc(var(--sky-safe-area-bottom, 0px) + var(--sky-space-6));
 }
 
-.mail-selection-toolbar {
-  position: absolute;
-  z-index: 8;
-  right: 0;
-  bottom: 0;
-  left: 0;
+.mail-folders-toolbar :deep(.sky-toolbar__inner) {
+  width: 100%;
+  justify-content: flex-end;
+}
+
+.mail-folders-toolbar :deep(.sky-fab) {
+  flex: none;
+  border: 1px solid var(--sky-hairline);
+  color: #fff;
+}
+
+.mail-folders-toolbar :deep(.sky-fab--with-text) {
+  width: auto;
+  min-width: var(--sky-touch-target);
+  padding-inline: var(--sky-space-5);
+}
+
+.mail-mailbox-picker {
+  display: grid;
+  gap: var(--sky-space-2);
+  max-height: 260px;
+  overflow-y: auto;
+}
+
+.mail-mailbox-picker :deep(.sky-button) {
+  min-height: var(--sky-touch-target);
+  justify-content: flex-start;
+  gap: var(--sky-space-3);
+  color: #fff;
+  text-align: left;
+}
+
+.mail-dialog :deep(.sky-dialog-button) {
+  color: #fff;
+}
+
+.mail-list-toolbar :deep(.sky-toolbar__inner) {
+  align-items: center;
+  gap: var(--sky-space-2);
+}
+
+.mail-list-toolbar :deep(.sky-searchbar) {
+  min-width: 0;
+  flex: 1;
+}
+
+.mail-list-toolbar :deep(.sky-fab) {
+  flex: none;
+  border: 1px solid var(--sky-hairline);
+}
+
+.mail-list-toolbar :deep(.mail-filter-fab--active) {
+  width: min(145px, 43%);
+  min-width: 112px;
+  flex: 0 1 145px;
+  padding: 0 var(--sky-space-3);
+  text-transform: none;
+}
+
+.mail-list-toolbar :deep(.mail-filter-fab--active .sky-fab__icon) {
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: var(--mail-blue);
+  color: #fff;
+}
+
+.mail-list-toolbar :deep(.mail-filter-fab--active .sky-fab__text) {
+  min-width: 0;
+  overflow: hidden;
+}
+
+.mail-list-toolbar :deep(.mail-filter-fab__copy) {
+  min-width: 0;
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  line-height: 1.05;
+  text-align: left;
+}
+
+.mail-list-toolbar :deep(.mail-filter-fab__copy small) {
+  color: #fff;
+  font-size: 9px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.mail-list-toolbar :deep(.mail-filter-fab__copy strong) {
+  min-width: 0;
+  max-width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  overflow: hidden;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .mail-selection-toolbar :deep(.mail-selection-toolbar__inner) {
@@ -1888,6 +2824,10 @@ button {
   line-height: 1.4;
 }
 
+.mail-empty--filtered h2 {
+  margin: 0;
+}
+
 .mail-load-more {
   width: 100%;
   border: 0;
@@ -1897,43 +2837,31 @@ button {
 }
 
 .mail-navbar {
-  --sky-safe-area-top: 46px;
+  --sky-safe-area-top: calc(46px + var(--sky-space-2));
   color: var(--sky-text);
 }
 
 .mail-navbar :deep(.sky-link) {
-  color: var(--mail-blue);
+  color: #fff;
+}
+
+.mail-navbar :deep(.sky-navbar-back-link) {
+  color: #fff;
 }
 
 .mail-navbar :deep(.sky-link:disabled) {
   opacity: 0.4;
 }
 
-.mail-compose__navbar :deep(.mail-compose__nav-side--left) {
-  margin-right: 12px;
-}
-
-.mail-compose__navbar :deep(.mail-compose__nav-side--right) {
-  margin-left: 12px;
-}
-
-.mail-compose__navbar :deep(.mail-compose__nav-title) {
-  max-width: 112px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.mail-compose__navbar :deep(.mail-compose__nav-action) {
-  min-width: 54px;
-  justify-content: center;
-  padding-right: 10px;
-  padding-left: 10px;
+.mail-navbar :deep(.sky-navbar-back-link__icon) {
+  transform: translateX(2px);
 }
 
 .mail-message {
-  height: calc(100% - 90px);
+  min-height: 0;
+  flex: 1;
   overflow-y: auto;
-  padding: 18px 18px 104px;
+  padding: 18px;
   user-select: text;
 }
 
@@ -1982,11 +2910,6 @@ button {
 }
 
 .mail-action-bar {
-  position: absolute;
-  z-index: 7;
-  right: 0;
-  bottom: 0;
-  left: 0;
   animation: mail-action-bar-enter 320ms cubic-bezier(0.22, 0.8, 0.3, 1) both;
 }
 
@@ -2026,8 +2949,7 @@ button {
   white-space: nowrap;
 }
 
-.mail-action-bar :deep(.sky-link:focus-visible),
-.mail-compose-fab:focus-visible {
+.mail-action-bar :deep(.sky-link:focus-visible) {
   outline: 2px solid var(--mail-blue);
   outline-offset: 2px;
 }
@@ -2038,13 +2960,12 @@ button {
 }
 
 @media (hover: hover) {
-  .mail-folder-row:hover,
-  .mail-row-shell:not(.is-dragging) .mail-row:hover {
+  .mail-folder-row:not(:disabled):hover {
     background: #ffffff0b;
   }
 
   .mail-action-bar :deep(.sky-link:hover) {
-    color: #64b5ff;
+    color: #fff;
   }
 
   .mail-action-bar :deep(.mail-action-bar__danger:hover) {
@@ -2096,35 +3017,25 @@ button {
 }
 
 .mail-compose__editor {
-  height: calc(100% - 278px);
-  min-height: 250px;
-  overflow-y: auto;
+  min-height: 0;
+  display: flex;
+  flex: 1;
+  overflow: hidden;
 }
 
 .mail-compose__meta {
   position: absolute;
   right: 17px;
-  bottom: 28px;
+  bottom: 92px;
   left: 17px;
   z-index: 4;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   color: var(--mail-muted);
   font-size: 10px;
   pointer-events: none;
 }
 
-.mail-compose__meta button {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  border: 0;
-  padding: 0;
-  background: none;
-  color: #ff453a;
-  pointer-events: auto;
-}
-
 .mail-compose__meta .is-over-limit {
   color: #ff453a;
 }
@@ -2247,6 +3158,11 @@ button {
   font-size: 14px;
 }
 
+.mail-auth__field input::placeholder {
+  color: var(--mail-muted);
+  opacity: 0.72;
+}
+
 .mail-auth__field small {
   color: var(--mail-muted);
   font-size: 11px;
@@ -2273,15 +3189,17 @@ button {
 .mail-auth__warning {
   display: flex;
   align-items: flex-start;
-  gap: 6px;
-  margin: 2px 3px 0;
-  color: var(--mail-muted);
-  font-size: 10px;
-  line-height: 1.35;
+  gap: 8px;
+  margin: 6px 3px 0;
+  color: var(--sky-text);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 19px;
 }
 
 .mail-auth__warning svg {
   flex: 0 0 auto;
+  margin-top: 1px;
 }
 
 @keyframes mail-screen-enter {
@@ -2329,7 +3247,6 @@ button {
 
   .mail-row,
   .mail-row-action,
-  .mail-compose-fab,
   .mail-folder-row {
     transition-duration: 0.01ms;
   }
diff --git a/frontend/src/views/apps/RadioApp.contract.test.ts b/frontend/src/views/apps/RadioApp.contract.test.ts
index f6202f6..241598f 100644
--- a/frontend/src/views/apps/RadioApp.contract.test.ts
+++ b/frontend/src/views/apps/RadioApp.contract.test.ts
@@ -114,8 +114,45 @@ describe('RadioApp Sky UI contract', () => {
       /:deep\(\.radio-speaker-content \.sky-list-item__subtitle\)\s*\{[^}]*color:\s*var\(--sky-muted\)[^}]*font-size:\s*12px[^}]*line-height:\s*16px/s,
     )
     expect(source).toContain(':aria-busy="radio.speakerPending || undefined"')
-    expect(source).toContain(
-      ':disabled="!radio.data.connected || radio.speakerPending"',
+    expect(source).toContain('!radio.data.speakerSupported ||')
+    expect(source).toContain('!radio.data.connected ||')
+    expect(source).toContain('radio.speakerPending')
+  })
+
+  it('keeps provider capability rows stable when PMA lacks secondary and speaker support', () => {
+    const secondaryFieldStart = source.lastIndexOf(
+      '<SkyField',
+      source.indexOf("phone.t('Apps.radio.secondaryFrequency')"),
+    )
+    const secondaryField = source.slice(
+      secondaryFieldStart,
+      source.indexOf('</SkyField>', secondaryFieldStart),
+    )
+    const speakerRowStart = source.lastIndexOf(
+      '<SkyListItem',
+      source.indexOf("phone.t('Apps.radio.speaker')"),
+    )
+    const speakerRow = source.slice(
+      speakerRowStart,
+      source.indexOf('</SkyListItem>', speakerRowStart),
+    )
+
+    expect(secondaryField.slice(0, secondaryField.indexOf('>'))).not.toContain(
+      'v-if="radio.data.secondarySupported"',
+    )
+    expect(secondaryField).toContain(
+      ':disabled="!radio.data.secondarySupported"',
+    )
+    expect(secondaryField).toContain("'Apps.radio.notSupported'")
+    expect(speakerRow).not.toContain('v-if="radio.data.speakerSupported"')
+    expect(speakerRow).toContain(':disabled="!radio.data.speakerSupported"')
+    expect(source).toContain("'Apps.radio.providerFeatureUnavailable'")
+  })
+
+  it('uses compact profile placeholders without dropping the full guidance', () => {
+    expect(source.match(/class="radio-profile-field"/g)).toHaveLength(2)
+    expect(source).toMatch(
+      /:deep\(\.radio-profile-field \.sky-field__input\)\s*\{[^}]*min-width:\s*0[^}]*font-size:\s*15px/s,
     )
   })
 
diff --git a/frontend/src/views/apps/RadioApp.vue b/frontend/src/views/apps/RadioApp.vue
index 6a086da..372f60b 100644
--- a/frontend/src/views/apps/RadioApp.vue
+++ b/frontend/src/views/apps/RadioApp.vue
@@ -67,6 +67,14 @@ const providerText = computed(() => {
   return provider.replace(/^./, (character) => character.toLocaleUpperCase())
 })
 
+const speakerDescription = computed(() =>
+  phone.t(
+    radio.data.speakerSupported
+      ? 'Apps.radio.speakerDescription'
+      : 'Apps.radio.providerFeatureUnavailable',
+  ),
+)
+
 function parseFrequency(value: string): number {
   return Number.parseFloat(value.replace(',', '.'))
 }
@@ -274,12 +282,18 @@ onBeforeUnmount(() => {
               </template>
             </SkyField>
             <SkyField
-              v-if="radio.data.secondarySupported"
               v-model="secondaryInput"
               type="number"
               input-mode="decimal"
+              :disabled="!radio.data.secondarySupported"
               :label="phone.t('Apps.radio.secondaryFrequency')"
-              :placeholder="phone.t('Apps.radio.optional')"
+              :placeholder="
+                phone.t(
+                  radio.data.secondarySupported
+                    ? 'Apps.radio.optional'
+                    : 'Apps.radio.notSupported',
+                )
+              "
               :min="radio.data.frequencyMin"
               :max="radio.data.frequencyMax"
               :step="radio.data.frequencyStep"
@@ -287,7 +301,7 @@ onBeforeUnmount(() => {
               <template #leading>
                 <RadioTower :size="20" aria-hidden="true" />
               </template>
-              <template #trailing>
+              <template v-if="radio.data.secondarySupported" #trailing>
                 <span class="radio-unit">{{ phone.t('Apps.radio.mhz') }}</span>
               </template>
             </SkyField>
@@ -320,14 +334,14 @@ onBeforeUnmount(() => {
               </template>
             </SkyListItem>
             <SkyListItem
-              v-if="radio.data.speakerSupported"
               inner-class="radio-speaker-content"
               media-class="radio-audio-control-icon"
               :aria-busy="radio.speakerPending || undefined"
+              :disabled="!radio.data.speakerSupported"
               :strong-title="false"
               :title="phone.t('Apps.radio.speaker')"
               title-font-size-ios="radio-audio-control-title"
-              :subtitle="phone.t('Apps.radio.speakerDescription')"
+              :subtitle="speakerDescription"
             >
               <template #media>
                 <Volume2 :size="20" aria-hidden="true" />
@@ -335,7 +349,11 @@ onBeforeUnmount(() => {
               <template #after>
                 <SkyToggle
                   :model-value="radio.data.speakerEnabled"
-                  :disabled="!radio.data.connected || radio.speakerPending"
+                  :disabled="
+                    !radio.data.speakerSupported ||
+                    !radio.data.connected ||
+                    radio.speakerPending
+                  "
                   :aria-label="phone.t('Apps.radio.speaker')"
                   @update:model-value="setSpeaker"
                 />
@@ -435,6 +453,7 @@ onBeforeUnmount(() => {
         >
           <SkyField
             v-model="displayNameInput"
+            class="radio-profile-field"
             type="text"
             :aria-label="phone.t('Apps.radio.displayName')"
             :readonly="!radio.data.displayNameAllowed"
@@ -450,6 +469,7 @@ onBeforeUnmount(() => {
         >
           <SkyField
             v-model="badgeInput"
+            class="radio-profile-field"
             type="text"
             :aria-label="phone.t('Apps.radio.badge')"
             :maxlength="radio.data.badgeMaxLength"
@@ -593,6 +613,11 @@ onBeforeUnmount(() => {
   line-height: 16px;
 }
 
+:deep(.radio-profile-field .sky-field__input) {
+  min-width: 0;
+  font-size: 15px;
+}
+
 .radio-primary-action {
   margin-top: 12px;
 }
diff --git a/frontend/testserver/index.cjs b/frontend/testserver/index.cjs
index 7ea6330..1dd7343 100644
--- a/frontend/testserver/index.cjs
+++ b/frontend/testserver/index.cjs
@@ -85,6 +85,10 @@ function memoWaveform(phase = 0) {
 
 let authenticated = true
 let draft = null
+let mockMailboxes = [
+  { count: 0, id: 7, name: 'Projects', sort_order: 0 },
+]
+let nextMockMailboxId = 8
 const radioData = {
   badge: '231',
   badgeEnabled: true,
@@ -3339,17 +3343,33 @@ function counts() {
   return {
     drafts: draft ? 1 : 0,
     inbox: messages.filter(
-      (item) => item.folder === 'inbox' && !item.trashed_at,
+      (item) =>
+        item.folder === 'inbox' && !item.mailbox_id && !item.trashed_at,
+    ).length,
+    sent: messages.filter(
+      (item) => item.folder === 'sent' && !item.mailbox_id && !item.trashed_at,
     ).length,
-    sent: messages.filter((item) => item.folder === 'sent' && !item.trashed_at)
-      .length,
     trash: messages.filter((item) => item.trashed_at).length,
     unread: messages.filter(
-      (item) => item.folder === 'inbox' && !item.trashed_at && !item.is_read,
+      (item) =>
+        item.folder === 'inbox' &&
+        !item.mailbox_id &&
+        !item.trashed_at &&
+        !item.is_read,
     ).length,
   }
 }
 
+function mailboxViews() {
+  return mockMailboxes.map((mailbox) => ({
+    ...mailbox,
+    count: messages.filter(
+      (message) =>
+        message.mailbox_id === mailbox.id && !message.trashed_at,
+    ).length,
+  }))
+}
+
 let flareProfile = {
   id: 1,
   name: 'Alex',
@@ -9998,17 +10018,104 @@ app.post('/api/:endpoint', (request, response) => {
     response.json({ success: true, data: counts() })
     return
   }
+  if (endpoint === 'mail:mailboxes') {
+    response.json({ success: true, data: { mailboxes: mailboxViews() } })
+    return
+  }
+  if (endpoint === 'mail:create-mailbox') {
+    const name = String(request.body.name ?? '').trim()
+    if (!name || name.length > 50) {
+      response.json({ success: false, error: 'invalid_mailbox' })
+      return
+    }
+    if (
+      mockMailboxes.some(
+        (mailbox) => mailbox.name.toLowerCase() === name.toLowerCase(),
+      )
+    ) {
+      response.json({ success: false, error: 'mailbox_exists' })
+      return
+    }
+    if (mockMailboxes.length >= 20) {
+      response.json({ success: false, error: 'mailbox_limit' })
+      return
+    }
+
+    const mailbox = {
+      count: 0,
+      id: nextMockMailboxId,
+      name,
+      sort_order: mockMailboxes.length,
+    }
+    nextMockMailboxId += 1
+    mockMailboxes.push(mailbox)
+    response.json({ success: true, data: mailbox })
+    return
+  }
+  if (endpoint === 'mail:delete-mailbox') {
+    const mailboxId = Number(request.body.id)
+    const mailboxIndex = mockMailboxes.findIndex(
+      (mailbox) => mailbox.id === mailboxId,
+    )
+    if (mailboxIndex < 0) {
+      response.json({ success: false, error: 'mailbox_not_found' })
+      return
+    }
+
+    mockMailboxes.splice(mailboxIndex, 1)
+    for (const message of messages) {
+      if (message.mailbox_id === mailboxId) message.mailbox_id = null
+    }
+    response.json({ success: true })
+    return
+  }
+  if (endpoint === 'mail:move') {
+    const message = messages.find(
+      (item) => item.id === Number(request.body.id) && !item.trashed_at,
+    )
+    const mailboxId = Number(request.body.mailboxId)
+    const mailboxExists = mockMailboxes.some(
+      (mailbox) => mailbox.id === mailboxId,
+    )
+    if (!message) {
+      response.json({ success: false, error: 'message_not_found' })
+      return
+    }
+    if (mailboxId !== 0 && !mailboxExists) {
+      response.json({ success: false, error: 'mailbox_not_found' })
+      return
+    }
+
+    message.mailbox_id = mailboxId || null
+    response.json({ success: true })
+    return
+  }
   if (endpoint === 'mail:list') {
     const { folder, search = '' } = request.body
+    const mailboxMatch = /^mailbox:(\d+)$/.exec(String(folder))
+    const mailboxId = mailboxMatch ? Number(mailboxMatch[1]) : null
+    if (
+      mailboxId &&
+      !mockMailboxes.some((mailbox) => mailbox.id === mailboxId)
+    ) {
+      response.json({ success: false, error: 'mailbox_not_found' })
+      return
+    }
     let items =
       folder === 'drafts'
         ? draft
           ? [{ ...draft, created_at: draft.updated_at, preview: draft.body }]
           : []
+        : mailboxId
+          ? messages.filter(
+              (item) => item.mailbox_id === mailboxId && !item.trashed_at,
+            )
         : messages.filter((item) =>
             folder === 'trash'
               ? item.trashed_at
-              : item.folder === folder && !item.trashed_at,
+              : item.folder === folder &&
+                !item.mailbox_id &&
+                !item.trashed_at,
           )
     const query = String(search).toLowerCase()
     if (query) {
diff --git a/frontend/testserver/smoke.cjs b/frontend/testserver/smoke.cjs
index 127ff2e..5df0991 100644
--- a/frontend/testserver/smoke.cjs
+++ b/frontend/testserver/smoke.cjs
@@ -39,6 +39,7 @@ const browserDataRequests = [
   ['housing:key-candidates', { action: 'give' }],
   ['mail:counts', {}],
   ['mail:list', { folder: 'inbox' }],
+  ['mail:mailboxes', {}],
   ['map:getPlayerCoords', {}],
   ['map:markers', {}],
   ['marketplace:counts', {}],
@@ -147,6 +148,10 @@ function verifyBrowserTestData(dataByEndpoint) {
     5,
   )
   expectItems(dataByEndpoint.get('mail:list').items, 'inbox mail', 2)
+  expectItems(
+    dataByEndpoint.get('mail:mailboxes').mailboxes,
+    'custom mailboxes',
+  )
   expectItems(dataByEndpoint.get('map:markers'), 'map markers')
   expectItems(
     dataByEndpoint.get('marketplace:list').items,
@@ -597,6 +602,39 @@ async function verifyStatefulActions(baseUrl) {
   assert.equal(payphoneCall.state, 'connected')
   await expectSuccess(baseUrl, 'payphone:hangup')
 
+  const mailbox = await expectSuccess(
+    baseUrl,
+    'mail:create-mailbox',
+    { name: 'Browser Test' },
+    true,
+  )
+  const mailboxes = await expectSuccess(
+    baseUrl,
+    'mail:mailboxes',
+    {},
+    true,
+  )
+  assert(
+    mailboxes.mailboxes.some((item) => item.id === mailbox.id),
+    'mail:create-mailbox did not update the mock mailbox list',
+  )
+  await expectSuccess(baseUrl, 'mail:move', {
+    id: 2,
+    mailboxId: mailbox.id,
+  })
+  const mailboxItems = await expectSuccess(
+    baseUrl,
+    'mail:list',
+    { folder: `mailbox:${mailbox.id}` },
+    true,
+  )
+  assert(
+    mailboxItems.items.some((message) => message.id === 2),
+    'mail:move did not add the message to the custom mailbox',
+  )
+  await expectSuccess(baseUrl, 'mail:move', { id: 2, mailboxId: 0 })
+  await expectSuccess(baseUrl, 'mail:delete-mailbox', { id: mailbox.id })
+
   const draft = await expectSuccess(
     baseUrl,
     'mail:save-draft',
diff --git a/sky_phone/config/config.lua b/sky_phone/config/config.lua
index 8324a17..c857752 100644
--- a/sky_phone/config/config.lua
+++ b/sky_phone/config/config.lua
@@ -259,6 +259,9 @@ Config.Mail = {
     MaxRecipients = 10,
     PageSize = 50,
     AuthAttemptsPerMinute = 5,
+    MailboxNameMaxLength = 50,
+    MaxMailboxes = 20,
+    MailboxRequestsPerMinute = 12,
     DeleteBatchSize = 50,
     DeleteRequestsPerMinute = 12,
 }
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index f36dbf5..d980db9 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -998,11 +998,12 @@ Locales["en"] = {
                 secondaryFrequency = "Secondary frequency", frequencyPlaceholder = "e.g. 120.5", optional = "Optional",
                 mhz = "MHz", volume = "Volume", connect = "Connect", disconnect = "Disconnect",
                 speaker = "Speaker", speakerDescription = "Play radio traffic through speaker mode",
+                providerFeatureUnavailable = "Not supported by this voice service", notSupported = "Not supported",
                 members = "Currently connected ({count})", noMembers = "No participants", history = "Recently connected",
                 noHistory = "No history", badge = "Service number", badgePlaceholder = "e.g. 231",
                 profileSaved = "Radio profile saved", otherSettings = "Other", autoRejoin = "Automatic rejoin",
-                displayName = "Radio display name", displayNamePlaceholder = "Leave empty to use your character name",
-                displayNameDescription = "This name is shown to other participants and in the built-in radio overlay.",
+                displayName = "Radio display name", displayNamePlaceholder = "Character name",
+                displayNameDescription = "Leave empty to use your character name. This name is shown to other participants and in the built-in radio overlay.",
                 displayNameNotAllowed = "Your current job or grade is not allowed to change the radio display name.",
                 autoRejoinDescription = "Reconnect after spawning or restarting the phone resource",
                 radioNotifications = "Radio notifications", notificationsDescription = "Show joins and leaves on your current channel",
@@ -1432,10 +1433,21 @@ Locales["en"] = {
                 localPart = "Email address", email = "Email", password = "Password", confirmPassword = "Confirm password",
                 accountEyebrow = "Your Sky Cloud account", emailPlaceholder = "name@ifruit.com", passwordPlaceholder = "Enter password",
                 passwordWarning = "Use an in-character password. Do not reuse a real-world password.",
-                mailboxes = "Mailboxes", inbox = "Inbox", sent = "Sent", drafts = "Drafts", trash = "Trash",
+                mailboxes = "Mailboxes", editMailboxes = "Edit", newMailbox = "New Mailbox",
+                mailboxName = "Name", mailboxNamePlaceholder = "Mailbox name", mailboxLocation = "Mailbox Location",
+                deleteMailbox = "Delete {mailbox}", deleteMailboxTitle = "Delete Mailbox?",
+                deleteMailboxBody = "Messages in {mailbox} will return to their original mailbox.",
+                moveToMailbox = "Move to Mailbox", movedToMailbox = "Moved to {mailbox}.",
+                inbox = "Inbox", sent = "Sent", drafts = "Drafts", trash = "Trash",
                 compose = "New Message", recipients = "To", recipientHint = "Separate up to 10 addresses with commas.",
                 recipientPlaceholder = "name@ifruit.com", subject = "Subject", subjectPlaceholder = "What's this about?",
                 body = "Message", messagePlaceholder = "Write a message...", search = "Search mail", messages = "messages",
+                toolbar = "Mail tools", filterTitle = "Filter", filteredBy = "Filtered by",
+                filterActiveLabel = "Filtered by {filter}",
+                filterStatus = "Status", filterAddressed = "Addressed", filterDirection = "Direction", filterOther = "Other",
+                filterUnreadLabel = "Unread", filterReadLabel = "Read", filterReceived = "Received",
+                filterSent = "Sent", filterToMe = "To Me", filterFromMe = "From Me",
+                filterToday = "Today", filterMultiple = "{count} Filters",
                 select = "Select", selectedCount = "{count} Selected", deleteSelected = "Delete Selected",
                 selectionLimit = "You can select up to {count} messages at once.",
                 noMessageContent = "No message content", noMail = "No Mail",
@@ -1457,6 +1469,12 @@ Locales["en"] = {
                     recipient_not_found = "One or more recipients do not exist.", invalid_draft = "This draft contains invalid content.",
                     not_authenticated = "Your mail session has ended. Sign in again.",
                     request_failed = "Mail is temporarily unavailable.", invalid_request = "The mail request was invalid.",
+                    invalid_mailbox = "Enter a mailbox name with up to 50 characters.",
+                    mailbox_exists = "A mailbox with that name already exists.",
+                    mailbox_limit = "You have reached the mailbox limit.",
+                    mailbox_not_found = "That mailbox is no longer available.",
+                    message_not_found = "That message is no longer available.",
+                    invalid_filter = "That mail filter is not available.",
                     default = "The mail request failed.",
                 },
             },
diff --git a/sky_phone/source/client/main.lua b/sky_phone/source/client/main.lua
index 43fc5fa..1997d8d 100644
--- a/sky_phone/source/client/main.lua
+++ b/sky_phone/source/client/main.lua
@@ -43,6 +43,9 @@ local server_callbacks = {
     "mail:login",
     "mail:logout",
     "mail:counts",
+    "mail:mailboxes",
+    "mail:create-mailbox",
+    "mail:delete-mailbox",
     "mail:list",
     "mail:get",
     "mail:get-draft",
@@ -51,6 +54,7 @@ local server_callbacks = {
     "mail:delete-many",
     "mail:send",
     "mail:set-read",
+    "mail:move",
     "mail:trash",
     "mail:restore",
     "mail:delete-forever",
diff --git a/sky_phone/source/server/db_migrate.lua b/sky_phone/source/server/db_migrate.lua
index d7de524..6618469 100644
--- a/sky_phone/source/server/db_migrate.lua
+++ b/sky_phone/source/server/db_migrate.lua
@@ -57,6 +57,30 @@ local schema = {
         },
         tableOptions = "ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci",
     },
+    {
+        name = "sky_phone_mailboxes",
+        columns = {
+            { name = "id", type = "BIGINT UNSIGNED NOT NULL AUTO_INCREMENT" },
+            { name = "account_id", type = "BIGINT UNSIGNED NOT NULL" },
+            { name = "name", type = "VARCHAR(50) NOT NULL" },
+            { name = "sort_order", type = "SMALLINT UNSIGNED NOT NULL DEFAULT 0" },
+            { name = "created_at", type = "DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP" },
+        },
+        primaryKey = "id",
+        uniqueKeys = {
+            { name = "uniq_sky_phone_mailbox_name", columns = "(`account_id`, `name`)" },
+        },
+        indexes = {
+            { name = "idx_sky_phone_mailboxes", columns = "(`account_id`, `sort_order`, `id`)" },
+        },
+        foreignKeys = {
+            {
+                column = "account_id",
+                references = "`sky_phone_accounts` (`id`) ON DELETE CASCADE",
+            },
+        },
+        tableOptions = "ENGINE=InnoDB",
+    },
     {
         name = "sky_phone_mail_entries",
         columns = {
@@ -64,6 +88,7 @@ local schema = {
             { name = "message_id", type = "CHAR(36) NOT NULL" },
             { name = "account_id", type = "BIGINT UNSIGNED NOT NULL" },
             { name = "folder", type = "ENUM('inbox', 'sent') NOT NULL" },
+            { name = "mailbox_id", type = "BIGINT UNSIGNED NULL" },
             { name = "read_at", type = "DATETIME NULL" },
             { name = "trashed_at", type = "DATETIME NULL" },
         },
@@ -76,6 +101,7 @@ local schema = {
         },
         indexes = {
             { name = "idx_sky_phone_mailbox", columns = "(`account_id`, `folder`, `trashed_at`, `id`)" },
+            { name = "idx_sky_phone_custom_mailbox", columns = "(`account_id`, `mailbox_id`, `trashed_at`, `id`)" },
         },
         foreignKeys = {
             {
diff --git a/sky_phone/source/server/mail.lua b/sky_phone/source/server/mail.lua
index 45337d9..5f5b1df 100644
--- a/sky_phone/source/server/mail.lua
+++ b/sky_phone/source/server/mail.lua
@@ -67,6 +67,60 @@ local function validate_text(value, maximum)
     return length and length <= maximum
 end
 
+local function normalize_mailbox_name(value)
+    local name = trim(value)
+    local length = text_length(name)
+    if not length or length < 1 or length > Config.Mail.MailboxNameMaxLength or name:find("%c") then
+        return nil
+    end
+
+    return name
+end
+
+local function normalize_numeric_id(value)
+    local id = tonumber(value)
+    if not id or id ~= id or id < 1 or id > MAX_SAFE_INTEGER or id ~= math.floor(id) then
+        return nil
+    end
+
+    return id
+end
+
+local function mailbox_id_from_folder(folder)
+    if type(folder) ~= "string" then
+        return nil
+    end
+
+    local value = folder:match("^mailbox:(%d+)$")
+    return value and normalize_numeric_id(value) or nil
+end
+
+local function normalize_list_filters(value)
+    if value == nil then
+        return {
+            address = "all",
+            direction = "all",
+            read = "all",
+            today = false,
+        }
+    end
+    if type(value) ~= "table"
+        or (value.address ~= "all" and value.address ~= "from-me" and value.address ~= "to-me")
+        or (value.direction ~= "all" and value.direction ~= "inbox" and value.direction ~= "sent")
+        or (value.read ~= "all" and value.read ~= "read" and value.read ~= "unread")
+        or type(value.today) ~= "boolean"
+    then
+        return nil
+    end
+
+    return {
+        address = value.address,
+        direction = value.direction,
+        read = value.read,
+        today = value.today,
+    }
+end
+
 local function normalize_recipients(values, strict)
     if type(values) ~= "table" or #values > Config.Mail.MaxRecipients then
         return nil
@@ -192,9 +246,9 @@ end
 local function get_counts(account_id)
     local rows = Bridge.Database.Query([[
         SELECT
-            SUM(CASE WHEN `folder` = 'inbox' AND `trashed_at` IS NULL AND `read_at` IS NULL THEN 1 ELSE 0 END) AS unread,
-            SUM(CASE WHEN `folder` = 'inbox' AND `trashed_at` IS NULL THEN 1 ELSE 0 END) AS inbox,
-            SUM(CASE WHEN `folder` = 'sent' AND `trashed_at` IS NULL THEN 1 ELSE 0 END) AS sent,
+            SUM(CASE WHEN `folder` = 'inbox' AND `mailbox_id` IS NULL AND `trashed_at` IS NULL AND `read_at` IS NULL THEN 1 ELSE 0 END) AS unread,
+            SUM(CASE WHEN `folder` = 'inbox' AND `mailbox_id` IS NULL AND `trashed_at` IS NULL THEN 1 ELSE 0 END) AS inbox,
+            SUM(CASE WHEN `folder` = 'sent' AND `mailbox_id` IS NULL AND `trashed_at` IS NULL THEN 1 ELSE 0 END) AS sent,
             SUM(CASE WHEN `trashed_at` IS NOT NULL THEN 1 ELSE 0 END) AS trash
         FROM `sky_phone_mail_entries`
         WHERE `account_id` = ?
@@ -214,6 +268,38 @@ local function get_counts(account_id)
     }
 end
 
+local function get_mailboxes(account_id)
+    local rows = Bridge.Database.Query([[
+        SELECT mailbox.`id`, mailbox.`name`, mailbox.`sort_order`, COUNT(entry.`id`) AS `count`
+        FROM `sky_phone_mailboxes` mailbox
+        LEFT JOIN `sky_phone_mail_entries` entry
+            ON entry.`mailbox_id` = mailbox.`id`
+            AND entry.`account_id` = mailbox.`account_id`
+            AND entry.`trashed_at` IS NULL
+        WHERE mailbox.`account_id` = ?
+        GROUP BY mailbox.`id`, mailbox.`name`, mailbox.`sort_order`
+        ORDER BY mailbox.`sort_order` ASC, mailbox.`id` ASC
+    ]], { account_id })
+
+    for index = 1, #rows do
+        rows[index].id = tonumber(rows[index].id)
+        rows[index].sort_order = tonumber(rows[index].sort_order) or 0
+        rows[index].count = tonumber(rows[index].count) or 0
+    end
+
+    return rows
+end
+
+local function find_owned_mailbox(account_id, mailbox_id)
+    local rows = Bridge.Database.Query([[
+        SELECT `id`, `name`, `sort_order`
+        FROM `sky_phone_mailboxes`
+        WHERE `id` = ? AND `account_id` = ?
+        LIMIT 1
+    ]], { mailbox_id, account_id })
+    return rows[1]
+end
+
 local function broadcast_mailbox_changed(account_id, counts)
     notify_account(account_id, "sky_phone:mail:changed", {
         counts = counts or get_counts(account_id),
@@ -229,6 +315,111 @@ Bridge.Callbacks.Register("sky_phone:mail:counts", function(source)
     return { success = true, data = get_counts(session.id) }
 end)
 
+Bridge.Callbacks.Register("sky_phone:mail:mailboxes", function(source)
+    local session, error_response = require_session(source)
+    if not session then
+        return error_response
+    end
+
+    return { success = true, data = { mailboxes = get_mailboxes(session.id) } }
+end)
+
+Bridge.Callbacks.Register("sky_phone:mail:create-mailbox", function(source, data)
+    local session, error_response = require_session(source)
+    if not session then
+        return error_response
+    end
+    if not SkyPhone.AllowOperation(source, "mail_manage_mailboxes", Config.Mail.MailboxRequestsPerMinute, 60) then
+        return { success = false, error = "rate_limited" }
+    end
+
+    data = validate_payload(source, "create-mailbox", data)
+    if not data then
+        return { success = false, error = "invalid_request" }
+    end
+
+    local name = normalize_mailbox_name(data.name)
+    if not name then
+        return { success = false, error = "invalid_mailbox" }
+    end
+
+    local rows = Bridge.Database.Query([[
+        SELECT COUNT(*) AS `count`,
+            SUM(CASE WHEN LOWER(`name`) = LOWER(?) THEN 1 ELSE 0 END) AS `duplicate_count`,
+            COALESCE(MAX(`sort_order`), -1) AS `maximum_sort_order`
+        FROM `sky_phone_mailboxes`
+        WHERE `account_id` = ?
+    ]], { name, session.id })
+    local summary = rows[1] or {}
+    if (tonumber(summary.duplicate_count) or 0) > 0 then
+        return { success = false, error = "mailbox_exists" }
+    end
+    if (tonumber(summary.count) or 0) >= Config.Mail.MaxMailboxes then
+        return { success = false, error = "mailbox_limit" }
+    end
+
+    local sort_order = math.min(65535, (tonumber(summary.maximum_sort_order) or -1) + 1)
+    Bridge.Database.Query([[
+        INSERT INTO `sky_phone_mailboxes` (`account_id`, `name`, `sort_order`)
+        VALUES (?, ?, ?)
+    ]], { session.id, name, sort_order })
+
+    local created = Bridge.Database.Query([[
+        SELECT `id`, `name`, `sort_order`, 0 AS `count`
+        FROM `sky_phone_mailboxes`
+        WHERE `account_id` = ? AND LOWER(`name`) = LOWER(?)
+        LIMIT 1
+    ]], { session.id, name })
+    if not created[1] then
+        error("[sky_phone] Created mail mailbox could not be loaded.")
+    end
+
+    created[1].id = tonumber(created[1].id)
+    created[1].sort_order = tonumber(created[1].sort_order) or 0
+    created[1].count = 0
+    broadcast_mailbox_changed(session.id)
+    return { success = true, data = created[1] }
+end)
+
+Bridge.Callbacks.Register("sky_phone:mail:delete-mailbox", function(source, data)
+    local session, error_response = require_session(source)
+    if not session then
+        return error_response
+    end
+    if not SkyPhone.AllowOperation(source, "mail_manage_mailboxes", Config.Mail.MailboxRequestsPerMinute, 60) then
+        return { success = false, error = "rate_limited" }
+    end
+
+    data = validate_payload(source, "delete-mailbox", data)
+    if not data then
+        return { success = false, error = "invalid_request" }
+    end
+
+    local mailbox_id = normalize_numeric_id(data.id)
+    if not mailbox_id or not find_owned_mailbox(session.id, mailbox_id) then
+        return { success = false, error = "mailbox_not_found" }
+    end
+
+    if not Bridge.Database.Transaction({
+        {
+            query = [[
+                UPDATE `sky_phone_mail_entries` SET `mailbox_id` = NULL
+                WHERE `account_id` = ? AND `mailbox_id` = ?
+            ]],
+            params = { session.id, mailbox_id },
+        },
+        {
+            query = "DELETE FROM `sky_phone_mailboxes` WHERE `id` = ? AND `account_id` = ?",
+            params = { mailbox_id, session.id },
+        },
+    }) then
+        return { success = false, error = "request_failed" }
+    end
+
+    broadcast_mailbox_changed(session.id)
+    return { success = true }
+end)
+
 Bridge.Callbacks.Register("sky_phone:mail:list", function(source, data)
     local session, error_response = require_session(source)
     if not session then
@@ -241,9 +432,15 @@ Bridge.Callbacks.Register("sky_phone:mail:list", function(source, data)
     end
 
     local folder = data.folder
-    if folder ~= "inbox" and folder ~= "sent" and folder ~= "drafts" and folder ~= "trash" then
+    local custom_mailbox_id = mailbox_id_from_folder(folder)
+    if folder ~= "inbox" and folder ~= "sent" and folder ~= "drafts" and folder ~= "trash"
+        and not custom_mailbox_id
+    then
         return { success = false, error = "invalid_folder" }
     end
+    if custom_mailbox_id and not find_owned_mailbox(session.id, custom_mailbox_id) then
+        return { success = false, error = "mailbox_not_found" }
+    end
 
     local search = trim(data.search) or ""
     if not validate_text(search, 120) then
@@ -251,9 +448,16 @@ Bridge.Callbacks.Register("sky_phone:mail:list", function(source, data)
     end
     local offset = math.max(0, math.min(100000, math.floor(tonumber(data.offset) or 0)))
     local limit = Config.Mail.PageSize + 1
+    local filters = normalize_list_filters(data.filters)
+    if not filters then
+        return { success = false, error = "invalid_filter" }
+    end
     local rows
 
     if folder == "drafts" then
+        if filters.address ~= "all" or filters.direction ~= "all" or filters.read ~= "all" or filters.today then
+            return { success = false, error = "invalid_filter" }
+        end
         local pattern = "%" .. search .. "%"
         rows = Bridge.Database.Query([[
             SELECT `id`, `recipients`, `subject`, LEFT(`body`, 180) AS `preview`, `updated_at` AS `created_at`
@@ -265,13 +469,35 @@ Bridge.Callbacks.Register("sky_phone:mail:list", function(source, data)
     else
         local conditions
         local values = { session.id }
-        if folder == "trash" then
+        if custom_mailbox_id then
+            conditions = "e.`mailbox_id` = ? AND e.`trashed_at` IS NULL"
+            values[#values + 1] = custom_mailbox_id
+        elseif folder == "trash" then
             conditions = "e.`trashed_at` IS NOT NULL"
         else
-            conditions = "e.`folder` = ? AND e.`trashed_at` IS NULL"
+            conditions = "e.`folder` = ? AND e.`mailbox_id` IS NULL AND e.`trashed_at` IS NULL"
             values[#values + 1] = folder
         end
 
+        if filters.read == "unread" then
+            conditions = conditions .. " AND e.`folder` = 'inbox' AND e.`read_at` IS NULL"
+        elseif filters.read == "read" then
+            conditions = conditions .. " AND (e.`folder` = 'sent' OR e.`read_at` IS NOT NULL)"
+        end
+        if filters.direction ~= "all" then
+            conditions = conditions .. " AND e.`folder` = ?"
+            values[#values + 1] = filters.direction
+        end
+        if filters.address == "to-me" then
+            conditions = conditions .. " AND m.`recipients` LIKE ?"
+            values[#values + 1] = "%\"" .. session.email .. "\"%"
+        elseif filters.address == "from-me" then
+            conditions = conditions .. " AND m.`sender_account_id` = e.`account_id`"
+        end
+        if filters.today then
+            conditions = conditions .. " AND m.`created_at` >= CURRENT_DATE() AND m.`created_at` < CURRENT_DATE() + INTERVAL 1 DAY"
+        end
+
         local pattern = "%" .. search .. "%"
         values[#values + 1] = search
         values[#values + 1] = pattern
@@ -566,6 +792,57 @@ Bridge.Callbacks.Register("sky_phone:mail:set-read", function(source, data)
     return { success = true }
 end)
 
+Bridge.Callbacks.Register("sky_phone:mail:move", function(source, data)
+    local session, error_response = require_session(source)
+    if not session then
+        return error_response
+    end
+    if not SkyPhone.AllowOperation(source, "mail_move", Config.Mail.MailboxRequestsPerMinute * 3, 60) then
+        return { success = false, error = "rate_limited" }
+    end
+
+    data = validate_payload(source, "move", data)
+    if not data then
+        return { success = false, error = "invalid_request" }
+    end
+
+    local entry_id = normalize_numeric_id(data.id)
+    local mailbox_id
+    if data.mailboxId ~= 0 then
+        mailbox_id = normalize_numeric_id(data.mailboxId)
+    end
+    if not entry_id then
+        return { success = false, error = "message_not_found" }
+    end
+    if data.mailboxId ~= 0 and (not mailbox_id or not find_owned_mailbox(session.id, mailbox_id)) then
+        return { success = false, error = "mailbox_not_found" }
+    end
+
+    local entries = Bridge.Database.Query([[
+        SELECT `id`
+        FROM `sky_phone_mail_entries`
+        WHERE `id` = ? AND `account_id` = ? AND `trashed_at` IS NULL
+        LIMIT 1
+    ]], { entry_id, session.id })
+    if not entries[1] then
+        return { success = false, error = "message_not_found" }
+    end
+
+    if mailbox_id then
+        Bridge.Database.Query([[
+            UPDATE `sky_phone_mail_entries` SET `mailbox_id` = ?
+            WHERE `id` = ? AND `account_id` = ? AND `trashed_at` IS NULL
+        ]], { mailbox_id, entry_id, session.id })
+    else
+        Bridge.Database.Query([[
+            UPDATE `sky_phone_mail_entries` SET `mailbox_id` = NULL
+            WHERE `id` = ? AND `account_id` = ? AND `trashed_at` IS NULL
+        ]], { entry_id, session.id })
+    end
+    broadcast_mailbox_changed(session.id)
+    return { success = true }
+end)
+
 Bridge.Callbacks.Register("sky_phone:mail:trash", function(source, data)
     local session, error_response = require_session(source)
     if not session then
@@ -658,9 +935,13 @@ Bridge.Callbacks.Register("sky_phone:mail:delete-many", function(source, data)
     end
 
     local folder = data.folder
-    if type(folder) ~= "string" or not DELETE_FOLDERS[folder] then
+    local custom_mailbox_id = mailbox_id_from_folder(folder)
+    if type(folder) ~= "string" or (not DELETE_FOLDERS[folder] and not custom_mailbox_id) then
         return { success = false, error = "invalid_folder" }
     end
+    if custom_mailbox_id and not find_owned_mailbox(session.id, custom_mailbox_id) then
+        return { success = false, error = "mailbox_not_found" }
+    end
 
     local ids = normalize_delete_ids(folder, data.ids)
     if not ids then
@@ -680,7 +961,16 @@ Bridge.Callbacks.Register("sky_phone:mail:delete-many", function(source, data)
         append_values(parameters, ids)
         Bridge.Database.Query(([[
             UPDATE `sky_phone_mail_entries` SET `trashed_at` = CURRENT_TIMESTAMP
-            WHERE `account_id` = ? AND `folder` = ? AND `trashed_at` IS NULL
+            WHERE `account_id` = ? AND `folder` = ? AND `mailbox_id` IS NULL
+                AND `trashed_at` IS NULL
+                AND `id` IN (%s)
+        ]]):format(placeholders), parameters)
+    elseif custom_mailbox_id then
+        local parameters = { session.id, custom_mailbox_id }
+        append_values(parameters, ids)
+        Bridge.Database.Query(([[
+            UPDATE `sky_phone_mail_entries` SET `trashed_at` = CURRENT_TIMESTAMP
+            WHERE `account_id` = ? AND `mailbox_id` = ? AND `trashed_at` IS NULL
                 AND `id` IN (%s)
         ]]):format(placeholders), parameters)
     else
diff --git a/sky_phone/sql/install.sql b/sky_phone/sql/install.sql
index 644a600..6367c2e 100644
--- a/sky_phone/sql/install.sql
+++ b/sky_phone/sql/install.sql
@@ -23,16 +23,30 @@ CREATE TABLE IF NOT EXISTS `sky_phone_mail_messages` (
     FOREIGN KEY (`sender_account_id`) REFERENCES `sky_phone_accounts` (`id`) ON DELETE CASCADE
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
 
+CREATE TABLE IF NOT EXISTS `sky_phone_mailboxes` (
+    `id` BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
+    `account_id` BIGINT UNSIGNED NOT NULL,
+    `name` VARCHAR(50) NOT NULL,
+    `sort_order` SMALLINT UNSIGNED NOT NULL DEFAULT 0,
+    `created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    PRIMARY KEY (`id`),
+    UNIQUE KEY `uniq_sky_phone_mailbox_name` (`account_id`, `name`),
+    KEY `idx_sky_phone_mailboxes` (`account_id`, `sort_order`, `id`),
+    FOREIGN KEY (`account_id`) REFERENCES `sky_phone_accounts` (`id`) ON DELETE CASCADE
+) ENGINE=InnoDB;
+
 CREATE TABLE IF NOT EXISTS `sky_phone_mail_entries` (
     `id` BIGINT UNSIGNED NOT NULL AUTO_INCREMENT,
     `message_id` CHAR(36) NOT NULL,
     `account_id` BIGINT UNSIGNED NOT NULL,
     `folder` ENUM('inbox', 'sent') NOT NULL,
+    `mailbox_id` BIGINT UNSIGNED NULL,
     `read_at` DATETIME NULL,
     `trashed_at` DATETIME NULL,
     PRIMARY KEY (`id`),
     UNIQUE KEY `uniq_sky_phone_mail_entry` (`message_id`, `account_id`, `folder`),
     KEY `idx_sky_phone_mailbox` (`account_id`, `folder`, `trashed_at`, `id`),
+    KEY `idx_sky_phone_custom_mailbox` (`account_id`, `mailbox_id`, `trashed_at`, `id`),
     FOREIGN KEY (`message_id`) REFERENCES `sky_phone_mail_messages` (`id`) ON DELETE CASCADE,
     FOREIGN KEY (`account_id`) REFERENCES `sky_phone_accounts` (`id`) ON DELETE CASCADE
 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;