Files
RustBox/src/web/index.html
T
Mateusz Gruszczyński dacdf9c27d
RustBox CI / rustbox (push) Canceled after 0s
v0.2.8
2026-11-01 20:40:40 +01:00

1744 lines
108 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="en" data-base-path="__RUSTBOX_BASE_PATH__" data-default-theme="__RUSTBOX_DEFAULT_THEME__"
data-default-interface-skin="__RUSTBOX_DEFAULT_INTERFACE_SKIN__"
data-max-attachment-bytes="__RUSTBOX_MAX_ATTACHMENT_BYTES__" data-max-attachment-mb="__RUSTBOX_MAX_ATTACHMENT_MB__"
data-max-message-bytes="__RUSTBOX_MAX_MESSAGE_BYTES__" data-max-message-mb="__RUSTBOX_MAX_MESSAGE_MB__"
data-theme="dark" data-interface-skin="__RUSTBOX_DEFAULT_INTERFACE_SKIN__" data-density="compact"
data-preview="right">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="color-scheme" content="dark light">
<meta name="description" content="RustBox webmail">
<title>RustBox</title>
<script src="__RUSTBOX_ASSET_PREFIX__/assets/theme-bootstrap.__RUSTBOX_ASSET_ID__.js"></script>
<link rel="icon" href="__RUSTBOX_ASSET_PREFIX__/favicon.svg" type="image/svg+xml">
<link rel="stylesheet" href="__RUSTBOX_ASSET_PREFIX__/assets/app.__RUSTBOX_ASSET_ID__.css">
</head>
<body>
<div id="boot" class="boot-screen" aria-live="polite">
<svg class="boot-icon" aria-hidden="true">
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-mail"></use>
</svg>
<strong>RustBox</strong>
</div>
<section id="login-view" class="login-view hidden" data-i18n-scope aria-label="Sign in">
<div class="login-panel">
<header class="login-brand">
<svg class="brand-icon" aria-hidden="true">
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-mail"></use>
</svg>
<div><strong>RustBox</strong><span>Webmail</span></div>
</header>
<form id="login-form" autocomplete="on" class="login-form">
<label><span>Email</span><input id="login-email" type="email" autocomplete="username" required
autofocus></label>
<label><span>Password</span><input id="login-password" type="password" autocomplete="current-password"
required></label>
<label id="login-remember-row" class="checkbox-row"><input id="login-remember" type="checkbox"><span
id="login-remember-label">Keep me signed in</span></label>
<div id="login-error" class="form-error hidden" role="alert"></div>
<button class="button primary wide" type="submit">Sign in</button>
</form>
<footer>RustBox __RUSTBOX_VERSION__</footer>
</div>
</section>
<main id="app-view" class="app-view hidden">
<div id="offline-banner" class="offline-banner hidden" role="status" aria-live="polite"></div>
<header class="appbar" data-i18n-scope>
<div class="app-brand">
<svg class="brand-icon" aria-hidden="true">
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-mail"></use>
</svg>
<strong>RustBox</strong>
</div>
<form id="search-form" class="search-field" role="search">
<svg aria-hidden="true">
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-search"></use>
</svg>
<input id="search-input" autocomplete="off" placeholder="Search mail" data-i18n-placeholder="search_mail">
<button id="advanced-search-btn" class="search-filter-button" type="button" title="Advanced search"
aria-label="Advanced search"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-sliders"></use>
</svg></button>
<kbd>/</kbd>
</form>
<div class="appbar-actions">
<span id="indexing-indicator" class="indexing-indicator hidden" role="status" aria-live="polite"
title="Mail synchronization" aria-label="Mail synchronization"><svg aria-hidden="true">
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-refresh-cw"></use>
</svg></span>
<button id="contacts-btn" class="icon-button" type="button" title="Contacts" aria-label="Contacts"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-user-round"></use>
</svg></button>
<button id="calendar-btn" class="icon-button" type="button" title="Calendar" aria-label="Calendar"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-calendar-days"></use>
</svg></button>
<button id="settings-btn" class="icon-button" type="button" title="Settings" aria-label="Settings"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-settings"></use>
</svg></button>
<button id="logout-btn" class="icon-button" type="button" title="Sign out" aria-label="Sign out"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-log-out"></use>
</svg></button>
<div class="account-summary"><span id="account-email">—</span><span id="connection-label">Connecting</span>
</div>
</div>
</header>
<div class="mail-shell">
<button id="folder-drawer-scrim" class="folder-drawer-scrim" type="button" aria-label="Close folders"
tabindex="-1"></button>
<aside id="folder-pane" class="folder-pane" data-i18n-scope>
<div class="folder-drawer-header mobile-only">
<button id="folder-drawer-close" class="icon-button folder-drawer-close" type="button"
aria-label="Back to messages" title="Back to messages"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-arrow-left"></use>
</svg></button>
<strong>Folders</strong>
</div>
<button id="compose-btn" class="button primary compose-button" type="button">
<svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-square-pen"></use>
</svg><span data-i18n="compose">Compose</span>
</button>
<div class="section-heading"><span>Folders</span><button id="folder-manage-btn" class="icon-button small"
type="button" title="Manage folders" aria-label="Manage folders"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-folder-plus"></use>
</svg></button></div>
<nav id="folder-list" class="folder-list" aria-label="Mail folders"></nav>
<div class="section-heading label-heading"><span>Labels</span><button id="tag-add-btn" class="icon-button small"
type="button" title="New label" aria-label="New label"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-plus"></use>
</svg></button></div>
<nav id="tag-list" class="folder-list tag-list" aria-label="Message labels"></nav>
<div id="folder-quota" class="folder-quota" aria-live="polite">
<div class="folder-quota-label"><span>IMAP storage</span><span id="folder-quota-text">Loading…</span></div>
<div class="folder-quota-track"><span id="folder-quota-bar"></span></div>
</div>
<div class="folder-pane-footer"><span id="mail-server-label">IMAP</span><span>RustBox __RUSTBOX_VERSION__</span>
</div>
<div id="folder-resizer" class="pane-resizer" role="separator" aria-orientation="vertical"
aria-label="Resize folder pane"></div>
</aside>
<section class="message-pane">
<div class="pane-toolbar">
<div class="pane-title"><button id="mobile-folders" class="icon-button mobile-only" type="button"
aria-label="Folders"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-menu"></use>
</svg></button>
<div><strong id="folder-title">Inbox</strong><span id="message-count">0 messages</span></div>
</div>
<div class="toolbar-actions">
<label class="list-sort-control"><span class="sr-only">Sort messages</span><select id="message-sort"
title="Sort messages">
<option value="date_desc">Newest</option>
<option value="date_asc">Oldest</option>
<option value="sender_asc">Sender A–Z</option>
<option value="sender_desc">Sender Z–A</option>
<option value="subject_asc">Subject A–Z</option>
<option value="subject_desc">Subject Z–A</option>
<option value="size_asc">Smallest</option>
<option value="size_desc">Largest</option>
</select></label>
<button id="select-mode-btn" class="icon-button" type="button" title="Select messages"
aria-label="Select messages" aria-pressed="false"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-check-circle"></use>
</svg></button>
<button id="refresh-btn" class="icon-button" type="button" title="Refresh" aria-label="Refresh"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-refresh-cw"></use>
</svg></button>
</div>
</div>
<div id="bulk-toolbar" class="bulk-toolbar hidden" role="toolbar" aria-label="Actions for selected messages"
aria-live="polite">
<label class="bulk-select"><input id="bulk-select-all" type="checkbox"><span id="bulk-count">0
selected</span></label>
<button id="bulk-select-search" class="button quiet hidden" type="button"
data-i18n="select_all_results">Select all results</button>
<button id="bulk-read" class="button quiet" type="button">Mark read</button>
<button id="bulk-unread" class="button quiet" type="button">Mark unread</button>
<button id="bulk-flag" class="button quiet" type="button">Flag</button>
<button id="bulk-unflag" class="button quiet" type="button">Unflag</button>
<button id="bulk-archive" class="button quiet" type="button">Archive</button>
<button id="bulk-junk" class="button quiet" type="button" data-i18n="spam">Spam</button>
<label class="move-control"><span class="sr-only">Move selected</span><select id="bulk-move-select">
<option value="">Move to…</option>
</select></label>
<label class="move-control"><span class="sr-only">Copy selected</span><select id="bulk-copy-select">
<option value="">Copy to…</option>
</select></label>
<label class="move-control"><span class="sr-only">Label selected</span><select id="bulk-tag-select">
<option value="">Add label…</option>
</select></label>
<span class="toolbar-spacer"></span>
<button id="bulk-delete" class="button quiet danger" type="button">Delete</button>
<button id="selection-done" class="button quiet" type="button">Done</button>
</div>
<div id="message-list" class="message-list" aria-live="polite"></div>
<button id="load-more" class="button quiet load-more hidden" type="button">Load more</button>
<div id="message-resizer" class="pane-resizer" role="separator" aria-orientation="vertical"
aria-label="Resize message list"></div>
</section>
<section id="reader" class="reader-pane">
<div id="reader-empty" class="reader-empty">
<svg aria-hidden="true">
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-mail-open"></use>
</svg>
<strong>No message selected</strong><span>Select a message from the list.</span>
</div>
<article id="reader-content" class="reader-content hidden">
<div class="reader-toolbar">
<button id="reader-back" class="icon-button mobile-only" type="button" aria-label="Back"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-arrow-left"></use>
</svg></button>
<button id="reader-prev" class="icon-button" type="button" title="Previous message"
aria-label="Previous message"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-arrow-left"></use>
</svg></button>
<button id="reader-next" class="icon-button" type="button" title="Next message"
aria-label="Next message"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-chevron-right"></use>
</svg></button>
<button id="reader-fullscreen" class="icon-button" type="button" title="Open full screen"
aria-label="Open message full screen" aria-pressed="false"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-external-link"></use>
</svg></button>
<button id="reply-btn" class="button quiet" type="button"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-reply"></use>
</svg><span data-i18n="reply">Reply</span></button>
<button id="reply-all-btn" class="button quiet" type="button"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-reply-all"></use>
</svg><span data-i18n="reply_all">Reply all</span></button>
<button id="forward-btn" class="button quiet" type="button"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-forward"></use>
</svg><span data-i18n="forward">Forward</span></button>
<details id="message-details-menu" class="toolbar-menu">
<summary class="button quiet"><svg aria-hidden="true">
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-file-text"></use>
</svg><span data-i18n="message_details">Message details</span></summary>
<div class="toolbar-menu-popover" role="menu">
<button id="headers-btn" type="button" role="menuitem" data-i18n="headers">Headers</button>
<button id="source-btn" type="button" role="menuitem" data-i18n="source">Source</button>
</div>
</details>
<button id="quick-filter-btn" class="icon-button" type="button" title="Create filter from sender"
aria-label="Create filter from sender" data-i18n-title="create_filter_sender"
data-i18n-aria-label="create_filter_sender"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-filter"></use>
</svg></button>
<button id="print-btn" class="icon-button" type="button" title="Print message" aria-label="Print message"
data-i18n-title="print_message" data-i18n-aria-label="print_message"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-printer"></use>
</svg></button>
<button id="archive-btn" class="icon-button" type="button" title="Archive" aria-label="Archive"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-archive"></use>
</svg></button>
<button id="spam-btn" class="icon-button" type="button" title="Mark as spam" aria-label="Mark as spam"
data-i18n-title="mark_spam" data-i18n-aria-label="mark_spam"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-shield-alert"></use>
</svg></button>
<button id="flag-btn" class="icon-button" type="button" title="Flag" aria-label="Flag"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-star"></use>
</svg></button>
<button id="unread-btn" class="icon-button" type="button" title="Mark read or unread"
aria-label="Mark read or unread"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-mail"></use>
</svg></button>
<details id="message-transfer-menu" class="toolbar-menu">
<summary class="button quiet"><svg aria-hidden="true">
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-folder"></use>
</svg><span data-i18n="move_copy">Move / copy</span></summary>
<div class="toolbar-menu-popover" role="menu">
<button id="reader-move-action" type="button" role="menuitem" data-i18n="move_to">Move to…</button>
<button id="reader-copy-action" type="button" role="menuitem" data-i18n="copy_to">Copy to…</button>
</div>
</details>
<span class="toolbar-spacer"></span>
<button id="delete-btn" class="icon-button danger" type="button" title="Delete" aria-label="Delete"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-trash"></use>
</svg></button>
</div>
<header class="message-header">
<h1 id="reader-subject"></h1>
<div class="message-meta">
<div class="avatar" id="reader-avatar">?</div>
<div class="sender">
<div class="sender-line"><strong id="reader-from"></strong><button id="reader-add-sender-contact"
class="address-contact-button" type="button" title="Add sender to contacts"
aria-label="Add sender to contacts"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-user-round"></use>
</svg></button></div>
<div id="reader-to" class="reader-recipients" role="button" tabindex="0" aria-expanded="false"
title="Show full addresses"></div>
</div><time id="reader-date"></time>
</div>
</header>
<section id="thread-section" class="thread-section hidden">
<div class="section-heading"><span id="thread-title">Thread</span><button id="thread-toggle"
class="icon-button small" type="button" aria-label="Toggle thread"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-chevron-right"></use>
</svg></button></div>
<div id="thread-list" class="thread-list"></div>
</section>
<div id="attachment-list" class="attachment-list hidden"></div>
<div id="remote-image-bar" class="remote-image-bar hidden"><span>Remote images are blocked.</span>
<div class="inline-actions"><button id="remote-image-load" class="button quiet" type="button">Load
images</button><button id="remote-image-trust" class="button quiet" type="button">Trust sender</button>
</div>
</div>
<div id="pgp-reader-bar" class="pgp-reader-bar hidden" role="status" aria-live="polite">
<div><strong id="pgp-reader-title">OpenPGP</strong><span id="pgp-reader-status" class="muted"></span></div>
<div class="inline-actions"><button id="pgp-reader-process" class="button quiet small" type="button">Verify
/ decrypt</button><button id="pgp-reader-discover" class="button quiet small hidden" type="button">Find
signer key</button></div>
</div>
<div id="message-body" class="message-body"></div>
</article>
</section>
</div>
</main>
<dialog id="compose-dialog" class="dialog compose-dialog" data-i18n-scope>
<form id="compose-form" class="dialog-card compose-card" method="dialog">
<header class="dialog-header"><strong id="compose-title">New message</strong>
<div class="compose-header-actions"><button type="button" id="compose-recover" class="button quiet small"
title="Recover a saved draft">Recover draft</button><button type="button" id="compose-fullscreen"
class="icon-button compose-fullscreen-toggle" aria-label="Toggle full screen composer" aria-pressed="false"
title="Full screen">⛶</button><button type="button" class="icon-button close-dialog"
aria-label="Close"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use>
</svg></button></div>
</header>
<div class="compose-addresses">
<label><span>From</span><select id="compose-from">
<option value="">Account default</option>
</select></label>
<label><span>To</span><input id="compose-to" required autocomplete="off"></label>
<label><span>Cc</span><input id="compose-cc" autocomplete="off"></label>
<label><span>Bcc</span><input id="compose-bcc" autocomplete="off"></label>
<label><span>Subject</span><input id="compose-subject" autocomplete="off"></label>
<div class="compose-options-row"><span>Options</span>
<div class="compose-options"><label><span>Priority</span><select id="compose-priority">
<option value="normal">Normal</option>
<option value="high">High</option>
<option value="low">Low</option>
</select></label><label id="compose-pgp-option" class="hidden"><span>OpenPGP</span><select
id="compose-pgp-mode">
<option value="none">Off</option>
<option value="sign">Sign</option>
<option value="encrypt">Encrypt</option>
<option value="sign-encrypt">Sign + encrypt</option>
</select></label><label class="compose-mdn-option"><input id="compose-mdn" type="checkbox"><span>Request
read receipt</span></label></div>
</div>
<details id="compose-pgp-panel" class="compose-pgp-panel hidden">
<summary><span class="compose-pgp-summary-title">OpenPGP</span><span id="compose-pgp-status"
class="muted compose-pgp-summary-status">OpenPGP disabled</span><span
class="compose-pgp-summary-action">Details</span></summary>
<div class="compose-pgp-details"><label class="checkbox-row"><input id="compose-pgp-inline"
type="checkbox"><span>Inline OpenPGP (text only; PGP/MIME recommended)</span></label><label
class="checkbox-row" id="compose-pgp-attach-sender-row"><input id="compose-pgp-attach-key"
type="checkbox"><span>Attach my public OpenPGP key</span></label><label class="checkbox-row"
id="compose-pgp-attach-recipient-row"><input id="compose-pgp-attach-recipient-keys"
type="checkbox"><span>Attach public keys of To/Cc recipients</span></label><small
id="compose-pgp-attach-recipient-help" class="muted compose-pgp-wide">Bcc recipient keys are never
attached, so hidden recipients are not disclosed.</small><label id="compose-pgp-passphrase-row"
class="compose-pgp-passphrase hidden"><span>Private-key passphrase</span><input
id="compose-pgp-passphrase" type="password" autocomplete="off" maxlength="1024"></label>
<div class="inline-actions"><button id="compose-pgp-check" class="button quiet small" type="button">Check
recipient keys</button><button id="compose-pgp-discover" class="button quiet small" type="button">Find
missing keys</button></div>
</div>
</details>
</div>
<div class="editor-toolbar" aria-label="Formatting">
<button type="button" data-command="bold" title="Bold"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-bold"></use>
</svg></button>
<button type="button" data-command="italic" title="Italic"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-italic"></use>
</svg></button>
<button type="button" data-command="underline" title="Underline"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-underline"></use>
</svg></button>
<button type="button" data-command="strikeThrough" title="Strikethrough"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-strikethrough"></use>
</svg></button>
<span class="toolbar-separator"></span>
<label class="editor-select"><span class="sr-only">Font</span><select id="editor-font" title="Font">
<option value="">Font</option>
<option value="Arial">Arial</option>
<option value="Georgia">Georgia</option>
<option value="Times New Roman">Times</option>
<option value="Courier New">Courier</option>
<option value="Verdana">Verdana</option>
</select></label>
<label class="editor-select"><span class="sr-only">Text size</span><select id="editor-size" title="Text size">
<option value="">Size</option>
<option value="2">Small</option>
<option value="3">Normal</option>
<option value="4">Large</option>
<option value="5">Larger</option>
</select></label>
<label class="editor-color" title="Text color"><span class="sr-only">Text color</span><input id="editor-color"
type="color" value="#222222"></label>
<span class="toolbar-separator"></span>
<button type="button" data-command="insertUnorderedList" title="Bullet list"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-list"></use>
</svg></button>
<button type="button" data-command="insertOrderedList" title="Numbered list"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-list-ordered"></use>
</svg></button>
<button type="button" data-command="formatBlock" data-command-value="blockquote" title="Quote"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-quote"></use>
</svg></button>
<button type="button" data-command="justifyLeft" title="Align left"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-align-left"></use>
</svg></button>
<button type="button" data-command="justifyCenter" title="Align center"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-align-center"></use>
</svg></button>
<button type="button" data-command="justifyRight" title="Align right"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-align-right"></use>
</svg></button>
<button type="button" id="editor-link" title="Insert link"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-link"></use>
</svg></button>
<button type="button" id="editor-image" title="Insert inline image"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-image"></use>
</svg></button><input id="compose-images" type="file" accept="image/png,image/jpeg,image/gif,image/webp"
hidden>
<button type="button" id="editor-image-edit" title="Edit selected image" disabled><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-sliders"></use>
</svg></button>
<button type="button" data-command="removeFormat" title="Clear formatting"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-remove-format"></use>
</svg></button>
<button type="button" data-command="undo" title="Undo"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-undo"></use>
</svg></button>
<button type="button" data-command="redo" title="Redo"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-redo"></use>
</svg></button>
<button type="button" id="compose-attach" title="Attach files"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-paperclip"></use>
</svg></button><input id="compose-files" type="file" multiple hidden>
<button type="button" id="compose-markdown-preview" class="hidden" title="Preview Markdown"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-file-text"></use>
</svg></button>
<label class="compose-response-control"><span class="sr-only">Saved response</span><select
id="compose-response-template" title="Saved response">
<option value="">Response…</option>
</select></label>
<button type="button" id="compose-response-insert" title="Insert saved response" disabled><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-file-text"></use>
</svg></button>
</div>
<div id="compose-editor" class="compose-editor" contenteditable="true" role="textbox" aria-multiline="true"
data-placeholder="Write a message"></div>
<div id="compose-upload-progress" class="compose-upload-progress hidden" role="status" aria-live="polite">
<div class="compose-upload-track" aria-hidden="true"><span id="compose-upload-bar"></span></div><span
id="compose-upload-label">Uploading…</span>
</div>
<div id="compose-attachments" class="compose-attachments hidden"></div>
<div id="compose-error" class="form-error hidden"></div>
<footer class="dialog-actions compose-footer">
<label class="compose-mode-control"><span class="sr-only">Compose format</span><select id="compose-mode">
<option value="html">HTML</option>
<option value="text">Plain text</option>
<option value="markdown">Markdown</option>
</select></label>
<span id="compose-status" class="muted"></span><span id="compose-message-size"
class="muted compose-message-size" title="Estimated final message size">~0 / __RUSTBOX_MAX_MESSAGE_MB__
MiB</span>
<div class="compose-submit-actions"><button type="button"
class="button quiet close-dialog">Cancel</button><button id="send-btn" type="submit"
class="button primary"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-send"></use>
</svg><span>Send</span></button></div>
</footer>
</form>
</dialog>
<dialog id="markdown-preview-dialog" class="dialog markdown-preview-dialog" data-i18n-scope>
<div class="dialog-card markdown-preview-card">
<header class="dialog-header"><strong>Markdown preview</strong><button type="button"
class="icon-button close-dialog" aria-label="Close"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use>
</svg></button></header>
<article id="markdown-preview-content" class="markdown-preview-content"></article>
</div>
</dialog>
<dialog id="image-edit-dialog" class="dialog image-edit-dialog">
<form id="image-edit-form" class="dialog-card image-edit-card">
<header class="dialog-header"><strong>Edit inline image</strong><button type="button"
class="icon-button close-dialog" aria-label="Close"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use>
</svg></button></header>
<div class="image-edit-layout">
<div class="image-edit-preview"><canvas id="image-edit-preview" width="640" height="360"
aria-label="Image crop preview"></canvas></div>
<div class="image-edit-controls">
<label><span>Display width</span>
<div class="image-edit-range-line"><input id="image-edit-width" type="range" min="10" max="100" step="5"
value="100"><output id="image-edit-width-value">100%</output></div>
</label>
<label><span>Position</span><select id="image-edit-align">
<option value="inline">Inline</option>
<option value="left">Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
</select></label>
<fieldset id="image-crop-controls" class="image-crop-controls">
<legend>Crop / cut</legend>
<label><span>Top</span>
<div class="image-edit-range-line"><input id="image-crop-top" type="range" min="0" max="45" step="1"
value="0"><output id="image-crop-top-value">0%</output></div>
</label>
<label><span>Right</span>
<div class="image-edit-range-line"><input id="image-crop-right" type="range" min="0" max="45" step="1"
value="0"><output id="image-crop-right-value">0%</output></div>
</label>
<label><span>Bottom</span>
<div class="image-edit-range-line"><input id="image-crop-bottom" type="range" min="0" max="45" step="1"
value="0"><output id="image-crop-bottom-value">0%</output></div>
</label>
<label><span>Left</span>
<div class="image-edit-range-line"><input id="image-crop-left" type="range" min="0" max="45" step="1"
value="0"><output id="image-crop-left-value">0%</output></div>
</label>
</fieldset>
<p id="image-edit-help" class="image-edit-help">Resizing changes only the displayed size. Cropping creates a
new CID image and replaces the previous inline attachment.</p>
</div>
</div>
<footer class="dialog-actions"><button id="image-edit-reset" type="button" class="button quiet">Reset
crop</button><button type="button" class="button quiet close-dialog">Cancel</button><button
id="image-edit-apply" type="submit" class="button primary">Apply</button></footer>
</form>
</dialog>
<dialog id="folder-dialog" class="dialog" data-i18n-scope>
<div class="dialog-card folder-card">
<header class="dialog-header"><strong>Folders</strong><button type="button" class="icon-button close-dialog"
aria-label="Close"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use>
</svg></button></header>
<section class="settings-section"><label><span>Create folder</span>
<div class="inline-field"><input id="new-folder-name" placeholder="Folder name"><button id="create-folder-btn"
type="button" class="button primary">Create</button></div>
</label></section>
<section class="settings-section"><label><span>Current folder</span><input id="current-folder-name"
readonly></label>
<div class="inline-actions"><button id="subscribe-folder-btn" type="button" class="button quiet">Subscribe /
Unsubscribe</button><button id="rename-folder-btn" type="button" class="button quiet">Rename</button><button
id="delete-folder-btn" type="button" class="button quiet danger">Delete</button></div>
</section>
</div>
</dialog>
<dialog id="settings-dialog" class="dialog settings-dialog" data-i18n-scope>
<div class="dialog-card settings-card">
<header class="dialog-header"><strong>Settings</strong><button type="button" class="icon-button close-dialog"
aria-label="Close"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use>
</svg></button></header>
<div class="settings-layout">
<nav class="settings-nav"><button class="settings-tab active" data-tab="appearance" type="button"
data-i18n="appearance">Appearance</button><button class="settings-tab" data-tab="mailbox"
type="button">Mailbox</button><button class="settings-tab" data-tab="composing"
type="button">Composing</button><button class="settings-tab" data-tab="folders"
type="button">Folders</button><button class="settings-tab" data-tab="identities" type="button">Identities &
signatures</button><button class="settings-tab" data-tab="notifications"
type="button">Notifications</button><button class="settings-tab" data-tab="openpgp"
type="button">OpenPGP</button><button class="settings-tab" data-tab="sieve" type="button"
data-i18n="filters">Filters</button><button class="settings-tab" data-tab="diagnostics"
type="button">Diagnostics</button><button class="settings-tab" data-tab="account"
type="button">Account</button><button class="settings-tab" data-tab="about" type="button"
data-i18n="about">About</button><button id="shortcuts-open" class="button quiet settings-shortcuts"
type="button">Keyboard shortcuts</button></nav>
<div class="settings-content">
<section class="settings-panel" data-panel="appearance">
<div class="settings-panel-heading">
<div>
<h2 data-i18n="appearance">Appearance</h2>
<p class="muted">Personalize RustBox without changing mail behavior.</p>
</div><button id="pref-reset" class="button quiet" type="button" data-i18n="reset_appearance">Reset
appearance</button>
</div>
<div class="settings-grid appearance-grid">
<label><span data-i18n="language">Language</span><select id="pref-language">
<option value="en">English</option>
<option value="pl">Polski</option>
</select></label>
<label><span data-i18n="theme">Theme</span><select id="pref-theme">
<option value="dark">Dark</option>
<option value="light">Light</option>
<option value="system">System</option>
</select></label>
<label><span>Interface style</span><select id="pref-interface-skin">
<option value="default">Global default</option>
<option value="rustbox">RustBox (custom)</option>
<option value="roundcube-classic">Roundcube Classic</option>
<option value="roundcube-larry">Roundcube Larry</option>
<option value="roundcube-elastic">Roundcube Elastic</option>
<option value="clean">Clean</option>
<option value="gmail">Gmail inspired</option>
<option value="proton">Proton inspired</option>
<option value="zoho">Zoho inspired</option>
<option value="outlook">Outlook inspired</option>
<option value="minimal">Minimal</option>
<option value="graphite">Graphite</option>
<option value="high-contrast">High contrast</option>
<option value="fastmail">Fastmail inspired</option>
<option value="apple-mail">Apple Mail inspired</option>
<option value="yahoo">Yahoo Mail inspired</option>
<option value="hey">HEY inspired</option>
<option value="nord">Nord</option>
<option value="github">GitHub inspired</option>
<option value="gitlab">GitLab inspired</option>
<option value="discord">Discord inspired</option>
<option value="slack">Slack inspired</option>
<option value="reddit">Reddit inspired</option>
<option value="notion">Notion inspired</option>
</select><small id="pref-interface-skin-note" class="muted">RustBox is fully customizable: colors,
spacing, panes and typography.</small></label>
<label id="pref-preset-scale-unlocked-row" class="checkbox-row hidden"><input
id="pref-preset-scale-unlocked" type="checkbox"><span>Allow UI scaling for predefined
style</span><small class="muted">When enabled, the UI size control can override the scale defined by
the selected preset.</small></label>
<label><span data-i18n="color_preset">Color preset</span><select id="pref-color-preset">
<option value="sage">Sage</option>
<option value="blue">Blue</option>
<option value="teal">Teal</option>
<option value="cyan">Cyan</option>
<option value="indigo">Indigo</option>
<option value="slate">Slate</option>
<option value="graphite">Graphite</option>
<option value="amber">Amber</option>
<option value="orange">Orange</option>
<option value="violet">Violet</option>
<option value="rose">Rose</option>
<option value="red">Red</option>
<option value="emerald">Emerald</option>
<option value="lime">Lime</option>
<option value="sky">Sky</option>
<option value="navy">Navy</option>
<option value="plum">Plum</option>
<option value="magenta">Magenta</option>
<option value="copper">Copper</option>
<option value="sand">Sand</option>
<option value="custom">Custom</option>
</select></label>
<label><span data-i18n="accent_color">Accent color</span>
<div class="color-input"><input id="pref-accent" type="color" value="#6f9c86"><output
id="pref-accent-value">#6f9c86</output></div>
</label>
<label><span>Custom background</span>
<div class="color-input"><input id="pref-background" type="color" value="#121513"><output
id="pref-background-value">#121513</output></div>
</label>
<label><span>Custom panel</span>
<div class="color-input"><input id="pref-panel" type="color" value="#181c19"><output
id="pref-panel-value">#181c19</output></div>
</label>
<label><span>Custom text</span>
<div class="color-input"><input id="pref-text-color" type="color" value="#edf0ec"><output
id="pref-text-color-value">#edf0ec</output></div>
</label>
<label><span data-i18n="density">Density</span><select id="pref-density">
<option value="compact">Compact</option>
<option value="comfortable">Comfortable</option>
</select></label>
<label><span data-i18n="preview_pane">Preview pane</span><select id="pref-preview">
<option value="right">Right</option>
<option value="bottom">Bottom</option>
<option value="off">Off</option>
</select></label>
<label><span data-i18n="ui_size">UI size</span><select id="pref-scale">
<option value="small">Small</option>
<option value="normal">Normal</option>
<option value="large">Large</option>
</select></label>
<label><span data-i18n="font_family">Font family</span><select id="pref-font-family">
<option value="system">System UI</option>
<option value="inter">Inter</option>
<option value="humanist">Humanist</option>
<option value="mono">Monospace</option>
</select></label>
<label><span><span data-i18n="font_size">Font size</span> <output id="pref-font-size-value">13
px</output></span><input id="pref-font-size" type="range" min="11" max="18" step="1"
value="13"></label>
<label><span><span data-i18n="row_height">Message row height</span> <output id="pref-row-height-value">58
px</output></span><input id="pref-row-height" type="range" min="42" max="88" step="2"
value="58"></label>
<label><span><span data-i18n="folder_width">Folder pane width</span> <output
id="pref-folder-width-value">228 px</output></span><input id="pref-folder-width" type="range"
min="180" max="360" step="4" value="228"></label>
<label><span><span data-i18n="message_width">Message pane width</span> <output
id="pref-message-width-value">420 px</output></span><input id="pref-message-width" type="range"
min="300" max="720" step="10" value="420"></label>
<label><span><span data-i18n="corner_radius">Corner radius</span> <output id="pref-radius-value">4
px</output></span><input id="pref-radius" type="range" min="0" max="12" step="1" value="4"></label>
<label><span data-i18n="contrast">Contrast</span><select id="pref-contrast">
<option value="soft">Soft</option>
<option value="normal">Normal</option>
<option value="high">High</option>
</select></label>
<label><span>Date format</span><select id="pref-date-format">
<option value="locale">Locale</option>
<option value="iso">YYYY-MM-DD</option>
<option value="eu">DD/MM/YYYY</option>
<option value="us">MM/DD/YYYY</option>
</select></label>
<label><span>Time format</span><select id="pref-time-format">
<option value="locale">Locale</option>
<option value="24h">24-hour</option>
<option value="12h">12-hour</option>
</select></label>
</div>
<div class="appearance-toggles">
<label class="checkbox-row"><input id="pref-avatars" type="checkbox"><span data-i18n="show_avatars">Show
avatars</span></label>
<label class="checkbox-row"><input id="pref-attachment-icons" type="checkbox"><span
data-i18n="show_attachment_icons">Show attachment icons</span></label>
<label class="checkbox-row"><input id="pref-flags" type="checkbox"><span data-i18n="show_flags">Show
flags</span></label>
<label class="checkbox-row"><input id="pref-reduce-motion" type="checkbox"><span
data-i18n="reduce_motion">Reduce motion</span></label>
</div>
<details class="appearance-advanced">
<summary>Advanced interface styling</summary>
<div class="settings-grid appearance-grid">
<label><span>Icon size <output id="pref-icon-size-value">18 px</output></span><input id="pref-icon-size"
type="range" min="14" max="28" step="1" value="18"></label>
<label><span>Toolbar density</span><select id="pref-toolbar-density">
<option value="compact">Compact</option>
<option value="normal">Normal</option>
<option value="spacious">Spacious</option>
</select></label>
<label><span>Sidebar item height <output id="pref-sidebar-height-value">29 px</output></span><input
id="pref-sidebar-height" type="range" min="24" max="48" step="1" value="29"></label>
<label><span>Reader max width</span><select id="pref-reader-width">
<option value="0">Fluid</option>
<option value="680">680 px</option>
<option value="820">820 px</option>
<option value="980">980 px</option>
<option value="1200">1200 px</option>
</select></label>
<label><span>Composer width <output id="pref-composer-width-value">900 px</output></span><input
id="pref-composer-width" type="range" min="640" max="1400" step="20" value="900"></label>
<label><span>Selection color</span>
<div class="color-input"><input id="pref-selection-color" type="color" value="#28352e"><output
id="pref-selection-color-value">#28352e</output></div>
</label>
<label><span>Unread weight <output id="pref-unread-weight-value">730</output></span><input
id="pref-unread-weight" type="range" min="500" max="800" step="10" value="730"></label>
<label><span>Unread marker</span><select id="pref-unread-badge">
<option value="dot">Dot</option>
<option value="outline">Outline</option>
<option value="solid">Solid</option>
</select></label>
<label><span>Scrollbar</span><select id="pref-scrollbar-density">
<option value="thin">Thin</option>
<option value="normal">Normal</option>
<option value="hidden">Hidden</option>
</select></label>
</div>
<div class="appearance-toggles">
<label class="checkbox-row"><input id="pref-compact-headers" type="checkbox"><span>Compact message
headers</span></label>
<label class="checkbox-row"><input id="pref-show-borders" type="checkbox"><span>Show panel
borders</span></label>
<label class="checkbox-row"><input id="pref-monochrome" type="checkbox"><span>Monochrome
interface</span></label>
</div>
<div class="pane-background-grid">
<label class="pane-background-control"><span><input id="pref-folder-bg-enabled" type="checkbox"> Folder
background override</span><input id="pref-folder-bg" type="color" value="#101310"></label>
<label class="pane-background-control"><span><input id="pref-message-bg-enabled" type="checkbox">
Message-list background override</span><input id="pref-message-bg" type="color"
value="#181c19"></label>
<label class="pane-background-control"><span><input id="pref-reader-bg-enabled" type="checkbox"> Reader
background override</span><input id="pref-reader-bg" type="color" value="#181c19"></label>
</div>
</details>
</section>
<section class="settings-panel hidden" data-panel="mailbox">
<div class="settings-panel-heading">
<div>
<h2>Mailbox</h2>
<p class="muted">Control message-list and reader behavior for this account.</p>
</div>
</div>
<div class="settings-grid">
<label><span>Messages per page</span><select id="mail-pref-per-page">
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
</select></label>
<label><span>Mark as read</span><select id="mail-pref-read-delay">
<option value="0">Immediately</option>
<option value="750">After 0.75 s</option>
<option value="1500">After 1.5 s</option>
<option value="3000">After 3 s</option>
<option value="5000">After 5 s</option>
</select></label>
<label><span>Remote images</span><select id="mail-pref-remote-images">
<option value="never">Never</option>
<option value="contacts">Contacts only</option>
<option value="ask">Ask for each message</option>
<option value="always">Always load</option>
</select></label>
<label><span>Message body</span><select id="mail-pref-preferred-body">
<option value="auto">Auto</option>
<option value="html">Prefer HTML</option>
<option value="text">Plain text</option>
</select></label>
<label><span>Threads</span><select id="mail-pref-thread-mode">
<option value="threaded">Threaded</option>
<option value="flat">Flat</option>
</select></label>
<label><span>Default sort</span><select id="mail-pref-sort">
<option value="date_desc">Newest first</option>
<option value="date_asc">Oldest first</option>
<option value="sender_asc">Sender A–Z</option>
<option value="sender_desc">Sender Z–A</option>
<option value="subject_asc">Subject A–Z</option>
<option value="subject_desc">Subject Z–A</option>
<option value="size_asc">Smallest first</option>
<option value="size_desc">Largest first</option>
</select></label>
</div>
<div class="appearance-toggles"><label class="checkbox-row"><input id="mail-pref-collapse-quotes"
type="checkbox"><span>Collapse quoted text where possible</span></label><label
class="checkbox-row"><input id="mail-pref-show-snippets" type="checkbox"><span>Show message snippets in
the list</span></label><label class="checkbox-row"><input id="mail-pref-flagged-top"
type="checkbox"><span>Keep flagged messages on top by default</span></label><label
class="checkbox-row"><input id="mail-pref-sync-keywords" type="checkbox"><span>Synchronize RustBox
labels as IMAP keywords</span></label></div>
<p class="muted">Keyword synchronization is used only in folders whose IMAP server advertises persistent
custom flags. Local labels remain available everywhere.</p>
<div class="inline-actions"><button id="mail-pref-save" class="button primary" type="button">Save mailbox
settings</button><button id="mail-pref-reconcile-labels" class="button quiet" type="button">Reconcile
IMAP labels now</button><span id="mail-pref-reconcile-status" class="muted"></span></div>
</section>
<section class="settings-panel hidden" data-panel="composing">
<div class="settings-panel-heading">
<div>
<h2>Composing</h2>
<p class="muted">Defaults for new messages and draft behavior.</p>
</div>
</div>
<div class="settings-grid">
<label><span>Default format</span><select id="compose-pref-format">
<option value="html">HTML</option>
<option value="text">Plain text</option>
<option value="markdown">Markdown</option>
</select></label>
<label><span>Autosave interval</span><select id="compose-pref-autosave">
<option value="1000">1 second</option>
<option value="3000">3 seconds</option>
<option value="5000">5 seconds</option>
<option value="10000">10 seconds</option>
<option value="20000">20 seconds</option>
<option value="60000">60 seconds</option>
</select></label>
<label><span>Default priority</span><select id="compose-pref-priority">
<option value="normal">Normal</option>
<option value="high">High</option>
<option value="low">Low</option>
</select></label>
<label><span>Default message font</span><select id="compose-pref-font">
<option value="system">System sans</option>
<option value="humanist">Humanist sans</option>
<option value="serif">Serif</option>
<option value="mono">Monospace</option>
</select></label>
<label><span>Reply position</span><select id="compose-pref-reply-position">
<option value="above">Write above quote</option>
<option value="below">Write below quote</option>
</select></label>
<label><span>Quote style</span><select id="compose-pref-quote-style">
<option value="standard">Standard attribution</option>
<option value="compact">Compact attribution</option>
<option value="none">Do not include quote</option>
</select></label>
<label><span>Forward button</span><select id="compose-pref-forward-mode">
<option value="inline">Forward inline</option>
<option value="attachment">Forward as .eml attachment</option>
</select></label>
</div>
<div class="appearance-toggles">
<label class="checkbox-row"><input id="compose-pref-mdn" type="checkbox"><span>Request read receipt by
default</span></label>
<label class="checkbox-row"><input id="compose-pref-attachment-reminder" type="checkbox"><span>Warn when
message text suggests a missing attachment</span></label>
<label class="checkbox-row"><input id="compose-pref-spellcheck" type="checkbox"><span>Use browser
spellcheck while composing</span></label>
<label><span>Maximum attachment size</span><output
id="compose-pref-max-attachment">__RUSTBOX_MAX_ATTACHMENT_MB__ MiB</output><small
class="muted">Per-file upload limit set with <code>max_attachment_size_mb</code> in
rustbox.toml.</small></label>
<label><span>Maximum message size</span><output id="compose-pref-max-message">__RUSTBOX_MAX_MESSAGE_MB__
MiB</output><small class="muted">Hard limit for the complete RFC822/MIME message sent to the MTA,
including base64/MIME overhead.</small></label>
</div>
<p class="muted">Markdown is stored as source text and sent as a safe rendered HTML alternative with a
plain-text fallback.</p>
<div class="settings-panel-heading response-template-heading">
<div>
<h3>Saved responses</h3>
<p class="muted">Reusable text or HTML responses, compatible with the Roundcube canned-response
workflow.</p>
</div><button id="response-template-new" class="button quiet" type="button">New response</button>
</div>
<div id="response-template-list" class="response-template-list"><span class="muted">No saved
responses.</span></div>
</section>
<section class="settings-panel hidden" data-panel="folders">
<div class="settings-panel-heading">
<div>
<h2>Folders</h2>
<p class="muted">Choose special IMAP folders used by RustBox. Values are stored per account.</p>
</div><button id="special-folders-auto" class="button quiet" type="button">Auto-detect</button>
</div>
<div class="settings-grid">
<label><span>Sent</span><select id="special-sent"></select></label>
<label><span>Drafts</span><select id="special-drafts"></select></label>
<label><span>Trash</span><select id="special-trash"></select></label>
<label><span>Default spam destination</span><select id="spam-default-folder"></select><small
class="muted">Shared by all accounts in this browser when that folder exists.</small></label>
<label><span>Spam destination override (this account)</span><select id="special-junk"></select><small
class="muted">Leave automatic to use the default above, then IMAP Junk/Spam
auto-detection.</small></label>
<label><span>Archive</span><select id="special-archive"></select></label>
</div>
<p class="muted">Sent, Trash, Spam/Junk and Archive are used directly by mail actions. The spam destination
resolves in this order: account override → browser default → IMAP Junk/Spam auto-detection.</p>
<div id="quota-summary" class="quota-summary"><strong>Mailbox storage</strong><span>Loading quota…</span>
<div class="quota-track"><span id="quota-bar"></span></div>
</div>
<div class="inline-actions"><button id="special-folders-save" class="button primary" type="button">Save
folder settings</button></div>
</section>
<section class="settings-panel hidden" data-panel="identities">
<div class="settings-panel-heading">
<div>
<h2>Identities & signatures</h2>
<p class="muted">Sender identities and account-wide signatures. Editing opens in a dedicated window so
the form never collides with Settings.</p>
</div><button id="identity-new" class="button primary" type="button">New identity</button>
</div>
<div class="identity-overview">
<div class="identity-overview-hint"><strong>Configured identities</strong><span
id="identity-overview-help" class="muted">Select an
identity to edit its sender data, text/HTML footer, image and OpenPGP defaults.</span></div>
<div id="identity-list" class="identity-list"></div>
</div>
</section>
<section class="settings-panel hidden" data-panel="openpgp">
<div class="settings-panel-heading">
<div>
<h2>OpenPGP</h2>
<p class="muted">Manage per-user keys, trust and discovery. Private keys never leave the server unless
you explicitly export one.</p>
</div><button id="pgp-refresh" class="button quiet" type="button">Refresh</button>
</div>
<div class="settings-section">
<h3>Policy & discovery</h3>
<div class="appearance-toggles">
<label class="checkbox-row"><input id="pgp-pref-wkd" type="checkbox"><span>Discover keys with
WKD</span></label>
<label class="checkbox-row"><input id="pgp-pref-hkp" type="checkbox"><span>Fallback to configured HTTPS
key server</span></label>
<label class="checkbox-row"><input id="pgp-pref-trusted" type="checkbox"><span>Encrypt only to trusted
keys</span></label>
</div>
<div class="inline-actions"><button id="pgp-pref-save" class="button primary" type="button">Save OpenPGP
policy</button></div>
</div>
<div class="pgp-settings-grid">
<div class="settings-section">
<h3>Generate key</h3>
<label><span>Name</span><input id="pgp-generate-name" autocomplete="name"></label>
<label><span>Email</span><input id="pgp-generate-email" type="email" autocomplete="email"></label>
<label><span>Passphrase</span><input id="pgp-generate-passphrase" type="password"
autocomplete="new-password" maxlength="1024"><small class="muted">Not stored by
RustBox.</small></label>
<div class="inline-actions"><button id="pgp-generate" class="button primary" type="button">Generate
key</button></div>
</div>
<div class="settings-section">
<h3>Import / discover</h3>
<label><span>Armored public/private key</span><textarea id="pgp-import-data" rows="6" spellcheck="false"
placeholder="-----BEGIN PGP ... KEY BLOCK-----"></textarea></label>
<label><span>Initial trust</span><select id="pgp-import-trust">
<option value="unknown">Unknown</option>
<option value="verified">Verified</option>
<option value="trusted">Trusted</option>
<option value="untrusted">Untrusted</option>
</select></label>
<div class="inline-actions"><button id="pgp-import" class="button quiet"
type="button">Import</button><button id="pgp-import-file" class="button quiet" type="button">Import
file</button><input id="pgp-import-file-input" type="file"
accept=".asc,.pgp,application/pgp-keys,text/plain" hidden></div>
<label><span>Discover by email</span><input id="pgp-discover-email" type="email"
autocomplete="email"></label>
<div class="inline-actions"><button id="pgp-discover" class="button quiet" type="button">Discover
key</button></div>
</div>
</div>
<div class="settings-section">
<div class="settings-panel-heading compact">
<div>
<h3>Keyring</h3>
<p id="pgp-key-summary" class="muted">No keys loaded</p>
</div>
</div>
<div id="pgp-key-list" class="pgp-key-list"></div>
</div>
</section>
<section class="settings-panel hidden" data-panel="notifications">
<h2>Notifications</h2>
<div class="settings-section notification-settings">
<label class="checkbox-row"><input id="notify-enabled" type="checkbox"><span>Desktop
notifications</span></label>
<label class="checkbox-row"><input id="notify-sound" type="checkbox"><span>Sound for new mail and calendar
reminders</span></label>
<label class="checkbox-row"><input id="notify-dnd-enabled" type="checkbox"><span>Do Not
Disturb</span></label>
<div class="settings-grid"><label><span>DND from</span><input id="notify-dnd-start" type="time"
value="22:00"></label><label><span>DND until</span><input id="notify-dnd-end" type="time"
value="07:00"></label></div>
<div><span class="field-label">Folders</span>
<div id="notify-folders" class="notification-folder-list"></div>
</div>
<p id="notify-permission-status" class="muted">Browser permission: unknown</p>
<div class="inline-actions"><button id="notify-permission" class="button quiet" type="button">Request
permission</button><button id="notify-test" class="button quiet" type="button">Test
notification</button><button id="notify-save" class="button primary" type="button">Save</button></div>
</div>
</section>
<section class="settings-panel hidden" data-panel="sieve">
<div class="sieve-header">
<div>
<h2>ManageSieve filters</h2>
<p id="sieve-status" class="muted">Not checked</p>
</div>
<div class="inline-actions"><button id="sieve-backup" class="button quiet"
type="button">Backup</button><button id="sieve-restore" class="button quiet"
type="button">Restore</button><input id="sieve-restore-file" type="file"
accept="application/json,.json" hidden><button id="sieve-refresh" class="button quiet"
type="button">Refresh</button></div>
</div>
<div class="sieve-layout">
<div>
<div class="field-label">Scripts</div>
<div id="sieve-scripts" class="sieve-scripts"></div><button id="sieve-new" class="button quiet wide"
type="button">New script</button>
</div>
<div class="sieve-editor-wrap">
<label><span>Script name</span><input id="sieve-name" placeholder="rustbox"></label>
<section class="sieve-rules-overview">
<div class="sieve-section-heading">
<div><strong>Rules in this script</strong><small class="muted">Existing <code># rule:[name]</code>
filters and RustBox rules are parsed automatically.</small></div><span id="sieve-rule-count"
class="sieve-count-badge">0</span>
</div>
<div id="sieve-managed-rules" class="sieve-managed-rules">
<div class="muted">No rules found in this script</div>
</div>
</section>
<div class="sieve-rule-launch"><button id="sieve-rule-new" class="button primary" type="button">Create
filter</button><span class="muted">Rules are edited in a separate visual window with a live “what
will happen” preview.</span></div>
<details class="sieve-builder sieve-vacation">
<summary>Autoresponder / vacation</summary>
<div class="sieve-builder-grid">
<label><span>Subject</span><input id="sieve-vacation-subject" value="Out of office"></label>
<label><span>Reply interval (days)</span><input id="sieve-vacation-days" type="number" min="1"
max="30" value="7"></label>
<label><span>Active from</span><input id="sieve-vacation-start" type="date"></label>
<label><span>Active until</span><input id="sieve-vacation-end" type="date"></label>
<label class="sieve-builder-wide"><span>Message</span><textarea id="sieve-vacation-message" rows="4"
placeholder="I am currently away..."></textarea></label>
<label class="checkbox-row"><input id="sieve-vacation-skip-lists" type="checkbox" checked><span>Skip
mailing lists</span></label>
<label class="checkbox-row"><input id="sieve-vacation-skip-auto" type="checkbox" checked><span>Skip
automated messages</span></label>
</div>
<div class="inline-actions"><button id="sieve-vacation-append" class="button quiet"
type="button">Append autoresponder</button><span id="sieve-vacation-capability"
class="muted"></span></div>
</details>
<details class="sieve-raw-source">
<summary>Advanced Sieve source</summary>
<p class="muted">Use this only for syntax the visual editor does not understand. Parsed rules stay
editable above.</p><textarea id="sieve-editor" class="code-editor" spellcheck="false"></textarea>
</details>
<div id="sieve-result" class="muted sieve-result"></div>
<div class="inline-actions"><button id="sieve-check" class="button quiet"
type="button">Validate</button><button id="sieve-save" class="button primary"
type="button">Save</button><button id="sieve-activate" class="button quiet"
type="button">Activate</button><button id="sieve-deactivate" class="button quiet"
type="button">Deactivate all</button><button id="sieve-delete" class="button quiet danger"
type="button">Delete</button></div>
</div>
</div>
</section>
<section class="settings-panel hidden" data-panel="diagnostics">
<div class="settings-panel-heading">
<div>
<h2>Diagnostics</h2>
<p class="muted">Live capability checks for the current account. Credentials and server host names are
not returned to the browser.</p>
</div><button id="diagnostics-refresh" class="button quiet" type="button">Refresh</button>
</div>
<div class="diagnostics-grid">
<section class="diagnostic-card">
<div class="section-heading"><span>IMAP</span><strong id="diagnostic-imap-status">Not checked</strong>
</div>
<div id="diagnostic-imap-summary" class="capability-grid"></div>
<div id="diagnostic-imap-caps" class="capability-list"></div>
<div class="inline-actions diagnostic-imap-actions"><button id="diagnostic-imap-reconnect"
class="button quiet" type="button">Reconnect</button></div>
</section>
<section class="diagnostic-card">
<div class="section-heading"><span>SMTP</span><strong id="diagnostic-smtp-status">Not checked</strong>
</div>
<div id="diagnostic-smtp-summary" class="capability-list"></div>
</section>
<section id="diagnostic-sieve-card" class="diagnostic-card">
<div class="section-heading"><span>ManageSieve</span><strong id="diagnostic-sieve-status">Not
checked</strong></div>
<div id="diagnostic-sieve-summary" class="capability-list"></div>
</section>
<section class="diagnostic-card">
<div class="section-heading"><span>Realtime</span><strong
id="diagnostic-ws-status">Disconnected</strong></div>
<p class="muted">IMAP IDLE events are delivered to the browser through the RustBox WebSocket connection.
</p>
</section>
<section class="diagnostic-card">
<div class="section-heading"><span>Synchronization cache</span><strong id="diagnostic-sync-status">Not
checked</strong></div>
<div id="diagnostic-sync-summary" class="capability-list"></div>
</section>
<section class="diagnostic-card">
<div class="section-heading"><span>Search index</span><strong id="diagnostic-search-status">Not
checked</strong></div>
<div id="diagnostic-search-summary" class="capability-list"></div>
<div class="inline-actions"><button id="diagnostic-search-rebuild" class="button quiet"
type="button">Rebuild index</button></div>
</section>
</div>
</section>
<section class="settings-panel hidden" data-panel="account">
<div class="settings-panel-heading">
<div>
<h2>Account</h2>
<p class="muted">Accounts signed in to this RustBox browser session.</p>
</div><button id="account-add" class="button quiet" type="button">Add account</button>
</div>
<div id="account-settings-list" class="account-settings-list"></div>
<div class="settings-panel-heading account-session-heading">
<div>
<h3>Active sessions</h3>
<p class="muted">Live RustBox sessions for this account, including other browsers while the server is
running.</p>
</div><button id="account-revoke-others" class="button quiet danger" type="button">Revoke other
sessions</button>
</div>
<div id="account-session-list" class="account-settings-list"></div>
<div class="settings-panel-heading account-session-heading">
<div>
<h3>Reset settings</h3>
<p class="muted">Restore appearance, mailbox, notifications, folder, calendar and OpenPGP preferences.
Messages, identities, keys and templates are kept.</p>
</div><button id="reset-all-settings" class="button quiet danger" type="button">Reset all
settings</button>
</div>
</section>
<section class="settings-panel hidden" data-panel="about">
<h2>RustBox __RUSTBOX_VERSION__</h2>
<p>Webmail based on the Oxi codebase, with a RustBox-owned interface compiled into the Rust executable.</p>
<dl class="about-list">
<dt>Upstream</dt>
<dd>c0h1b4/oxi</dd>
<dt>Oxi base</dt>
<dd><code>__RUSTBOX_OXI_BASE__</code></dd>
<dt>Frontend</dt>
<dd>HTML, CSS and vanilla JavaScript embedded at Cargo build time</dd>
<dt>Author</dt>
<dd>@linuxiarz.pl</dd>
<dt>Repository</dt>
<dd><a href="https://git.linuxiarz.pl/gru/RustBox" target="_blank"
rel="noopener noreferrer">git.linuxiarz.pl/gru/RustBox</a></dd>
</dl>
</section>
</div>
</div>
</div>
</dialog>
<dialog id="identity-dialog" class="dialog identity-dialog" data-i18n-scope>
<form id="identity-form" class="dialog-card identity-card">
<header class="dialog-header"><strong id="identity-dialog-title">Identity & signature</strong><button
type="button" class="icon-button close-dialog" aria-label="Close"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use>
</svg></button></header>
<div class="identity-form-body">
<input id="identity-id" type="hidden">
<section class="identity-modal-section">
<div class="identity-modal-heading"><strong>Sender identity</strong><span class="muted">Address and headers
used when this identity is selected in the composer.</span></div>
<div class="identity-fields-grid">
<label><span>Display name</span><input id="identity-name" autocomplete="name"></label>
<label><span>Email</span><input id="identity-email" type="email" required autocomplete="email"></label>
<label><span>Reply-To</span><input id="identity-reply-to" type="email" autocomplete="email"></label>
<label><span>Automatic Bcc</span><input id="identity-bcc" placeholder="archive@example.com"></label>
<label class="identity-field-wide"><span>Organization</span><input id="identity-organization"></label>
</div>
</section>
<section class="identity-modal-section">
<div class="identity-modal-heading"><strong>Signature / footer</strong><span class="muted">Maintain separate
text and HTML versions. Imported images are embedded into outgoing mail as inline CID images.</span></div>
<div class="identity-signature-grid">
<label><span>Plain-text signature / footer</span><textarea id="identity-signature-text" rows="8"
placeholder="Text-only signature used in plain-text messages"></textarea></label>
<label class="identity-signature-field"><span>HTML signature / footer</span>
<div class="signature-editor-shell">
<div class="signature-editor-toolbar" aria-label="Signature formatting"><button type="button"
data-signature-command="bold" title="Bold"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-bold"></use>
</svg></button><button type="button" data-signature-command="italic" title="Italic"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-italic"></use>
</svg></button><button type="button" data-signature-command="underline" title="Underline"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-underline"></use>
</svg></button><button type="button" id="identity-signature-link" title="Insert link"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-link"></use>
</svg></button><button type="button" id="identity-signature-image-btn" title="Import image"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-image"></use>
</svg></button><button type="button" data-signature-command="removeFormat"
title="Clear formatting"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-remove-format"></use>
</svg></button></div>
<div id="identity-signature" class="signature-editor" contenteditable="true" role="textbox"
aria-multiline="true"></div>
</div><input id="identity-signature-image" type="file" accept="image/png,image/jpeg,image/gif,image/webp"
hidden><small class="muted signature-help">You can also paste an image directly into this
editor.</small>
</label>
</div>
<div class="identity-options-grid">
<label><span>Signature position</span><select id="identity-signature-position">
<option value="above">Above quoted text</option>
<option value="below">Below quoted text</option>
</select></label>
<label id="identity-pgp-key-row"><span>OpenPGP key</span><select id="identity-pgp-key">
<option value="">Automatic / none</option>
</select></label>
</div>
</section>
<section class="identity-modal-section identity-modal-options">
<div class="identity-modal-heading"><strong>Defaults</strong><span id="identity-defaults-help"
class="muted">Choose where this signature
is inserted and, when OpenPGP is configured, its default behavior.</span></div>
<div class="identity-toggle-grid">
<label class="checkbox-row"><input id="identity-signature-new" type="checkbox"><span>Signature on new
messages</span></label>
<label class="checkbox-row"><input id="identity-signature-reply" type="checkbox"><span>Signature on
replies</span></label>
<label class="checkbox-row"><input id="identity-signature-forward" type="checkbox"><span>Signature on
forwards</span></label>
<label class="checkbox-row"><input id="identity-default" type="checkbox"><span>Default
identity</span></label>
<label class="checkbox-row identity-pgp-default"><input id="identity-pgp-sign" type="checkbox"><span>Sign by
default with OpenPGP</span></label>
<label class="checkbox-row identity-pgp-default"><input id="identity-pgp-encrypt"
type="checkbox"><span>Encrypt by default with OpenPGP</span></label>
<label class="checkbox-row identity-pgp-default"><input id="identity-pgp-inline" type="checkbox"><span>Use
inline OpenPGP by default</span></label>
</div>
</section>
</div>
<footer class="dialog-actions identity-dialog-actions"><button id="identity-delete" type="button"
class="button quiet danger">Delete</button><button type="button"
class="button quiet close-dialog">Cancel</button><button type="submit" class="button primary">Save
identity</button></footer>
</form>
</dialog>
<dialog id="sieve-rule-dialog" class="dialog sieve-rule-dialog" data-i18n-scope>
<div class="dialog-card sieve-rule-card">
<header class="dialog-header">
<div><strong id="sieve-rule-dialog-title">Create filter</strong><span id="sieve-rule-dialog-subtitle"
class="muted sieve-rule-dialog-subtitle">Build the rule visually and verify the preview before applying
it.</span></div><button type="button" class="icon-button close-dialog" aria-label="Close"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use>
</svg></button>
</header>
<div class="sieve-rule-dialog-body">
<div class="sieve-builder sieve-builder-modal">
<div class="sieve-builder-body">
<section class="sieve-builder-section">
<div class="sieve-section-heading">
<div><strong>Rule</strong><small class="muted">Give it a readable name and decide whether it is
active.</small></div>
</div>
<div class="sieve-builder-grid sieve-builder-grid-rule">
<label><span>Rule name</span><input id="sieve-builder-name" placeholder="allegro"></label>
<label class="checkbox-row"><input id="sieve-builder-enabled" type="checkbox" checked><span>Rule
enabled</span></label>
<label class="checkbox-row"><input id="sieve-builder-stop" type="checkbox" checked><span>Stop after this
rule</span></label>
</div>
</section>
<section class="sieve-builder-section">
<div class="sieve-section-heading">
<div><strong>When</strong><small class="muted">Choose what the incoming message must match.</small>
</div>
</div>
<div class="sieve-builder-grid">
<label><span>Condition</span><select id="sieve-builder-condition">
<option value="from">From address</option>
<option value="from-domain">From domain</option>
<option value="to">To / Cc address</option>
<option value="header-from">From header</option>
<option value="header-to">To header</option>
<option value="subject">Subject</option>
<option value="list-id">List-ID</option>
<option value="header">Custom header</option>
</select></label>
<label><span>Match</span><select id="sieve-builder-match">
<option value="contains">contains</option>
<option value="is">is exactly</option>
<option value="matches">wildcard matches</option>
</select></label>
<label id="sieve-builder-header-wrap" class="hidden"><span>Header name</span><input
id="sieve-builder-header" placeholder="X-Spam-Status"></label>
<label><span>Value</span><input id="sieve-builder-value" placeholder="example.com"></label>
<label class="checkbox-row"><input id="sieve-builder-negate" type="checkbox"><span>NOT /
negate</span></label>
<label><span>Join next condition</span><select id="sieve-builder-logic">
<option value="allof">AND</option>
<option value="anyof">OR</option>
</select></label>
<label><span>Second condition</span><select id="sieve-builder-condition-2">
<option value="">None</option>
<option value="from">From address</option>
<option value="from-domain">From domain</option>
<option value="to">To / Cc address</option>
<option value="header-from">From header</option>
<option value="header-to">To header</option>
<option value="subject">Subject</option>
<option value="list-id">List-ID</option>
<option value="header">Custom header</option>
</select></label>
<label><span>Match</span><select id="sieve-builder-match-2">
<option value="contains">contains</option>
<option value="is">is exactly</option>
<option value="matches">wildcard matches</option>
</select></label>
<label id="sieve-builder-header-wrap-2" class="hidden"><span>Header name</span><input
id="sieve-builder-header-2" placeholder="X-Spam-Status"></label>
<label><span>Value</span><input id="sieve-builder-value-2" placeholder="optional"></label>
<label class="checkbox-row"><input id="sieve-builder-negate-2" type="checkbox"><span>NOT /
negate</span></label>
<label><span>Join third condition</span><select id="sieve-builder-logic-3">
<option value="allof">AND</option>
<option value="anyof">OR</option>
</select></label>
<label><span>Third condition</span><select id="sieve-builder-condition-3">
<option value="">None</option>
<option value="from">From address</option>
<option value="from-domain">From domain</option>
<option value="to">To / Cc address</option>
<option value="header-from">From header</option>
<option value="header-to">To header</option>
<option value="subject">Subject</option>
<option value="list-id">List-ID</option>
<option value="header">Custom header</option>
</select></label>
<label><span>Match</span><select id="sieve-builder-match-3">
<option value="contains">contains</option>
<option value="is">is exactly</option>
<option value="matches">wildcard matches</option>
</select></label>
<label id="sieve-builder-header-wrap-3" class="hidden"><span>Header name</span><input
id="sieve-builder-header-3" placeholder="X-Spam-Status"></label>
<label><span>Value</span><input id="sieve-builder-value-3" placeholder="optional"></label>
<label class="checkbox-row"><input id="sieve-builder-negate-3" type="checkbox"><span>NOT /
negate</span></label>
<div id="sieve-builder-extra-conditions" class="sieve-builder-dynamic-list sieve-builder-wide"></div>
<div class="inline-actions sieve-builder-wide"><button id="sieve-builder-add-condition"
class="button quiet small" type="button">+ Add condition</button></div>
</div>
</section>
<section class="sieve-builder-section">
<div class="sieve-section-heading">
<div><strong>Then</strong><small class="muted">Actions run in the order shown below.</small></div>
</div>
<div class="sieve-builder-grid">
<label><span>Action</span><select id="sieve-builder-action">
<option value="move">Move to folder</option>
<option value="copy">Copy to folder</option>
<option value="redirect">Redirect</option>
<option value="redirect-copy">Redirect and keep copy</option>
<option value="discard">Discard</option>
<option value="mark-read">Mark read</option>
<option value="add-flag">Add IMAP flag</option>
<option value="set-flags">Set IMAP flags</option>
<option value="keep">Keep</option>
</select></label>
<label id="sieve-builder-target-wrap"><span id="sieve-builder-target-label">Folder</span><input
id="sieve-builder-target" list="sieve-folder-options" placeholder="Archive"><datalist
id="sieve-folder-options"></datalist></label>
<label><span>Second action</span><select id="sieve-builder-action-2">
<option value="">None</option>
<option value="move">Move to folder</option>
<option value="copy">Copy to folder</option>
<option value="redirect">Redirect</option>
<option value="redirect-copy">Redirect and keep copy</option>
<option value="discard">Discard</option>
<option value="mark-read">Mark read</option>
<option value="add-flag">Add IMAP flag</option>
<option value="set-flags">Set IMAP flags</option>
<option value="keep">Keep</option>
</select></label>
<label id="sieve-builder-target-wrap-2" class="hidden"><span
id="sieve-builder-target-label-2">Folder</span><input id="sieve-builder-target-2"
list="sieve-folder-options" placeholder="Archive"></label>
<div id="sieve-builder-extra-actions" class="sieve-builder-dynamic-list sieve-builder-wide"></div>
<div class="inline-actions sieve-builder-wide"><button id="sieve-builder-add-action"
class="button quiet small" type="button">+ Add action</button></div>
</div>
</section>
<section class="sieve-rule-preview" aria-live="polite">
<div class="sieve-section-heading">
<div><strong>What will happen</strong><small class="muted">Live explanation of the rule before you save
it.</small></div><span id="sieve-builder-preview-state" class="sieve-status-pill">Ready</span>
</div>
<div id="sieve-builder-preview-text" class="sieve-rule-preview-text">Complete the rule to see its effect.
</div>
<pre id="sieve-builder-preview-code" class="sieve-rule-preview-code"></pre>
</section>
<div class="sieve-builder-footer">
<div class="inline-actions"><button id="sieve-builder-append" class="button primary" type="button">Add
rule</button><button id="sieve-builder-replace" class="button quiet" type="button" disabled>Update
selected rule</button><button id="sieve-builder-clear" class="button quiet"
type="button">Clear</button></div>
<span id="sieve-builder-capability" class="muted"></span>
</div>
</div>
</div>
</div>
</div>
</dialog>
<dialog id="shortcuts-dialog" class="dialog" data-i18n-scope>
<div class="dialog-card shortcuts-card">
<header class="dialog-header"><strong>Keyboard shortcuts</strong><button type="button"
class="icon-button close-dialog" aria-label="Close"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use>
</svg></button></header>
<div class="shortcuts-grid">
<section>
<h3>Global</h3>
<dl>
<dt><kbd>/</kbd></dt>
<dd>Focus search</dd>
<dt><kbd>C</kbd> / <kbd>Ctrl</kbd> + <kbd>N</kbd></dt>
<dd>New message</dd>
<dt><kbd>V</kbd></dt>
<dd>Toggle selection mode</dd>
<dt><kbd>?</kbd></dt>
<dd>Show shortcuts</dd>
</dl>
</section>
<section>
<h3>Message</h3>
<dl>
<dt><kbd>J</kbd> / <kbd>K</kbd></dt>
<dd>Next / previous message</dd>
<dt><kbd>X</kbd></dt>
<dd>Select / unselect current message</dd>
<dt><kbd>R</kbd></dt>
<dd>Reply</dd>
<dt><kbd>A</kbd></dt>
<dd>Reply all</dd>
<dt><kbd>F</kbd></dt>
<dd>Forward</dd>
<dt><kbd>E</kbd></dt>
<dd>Archive</dd>
<dt><kbd>M</kbd></dt>
<dd>Read / unread</dd>
<dt><kbd>S</kbd></dt>
<dd>Flag / unflag</dd>
<dt><kbd>!</kbd></dt>
<dd>Spam / not spam</dd>
<dt><kbd>Delete</kbd></dt>
<dd>Delete / move to Trash</dd>
</dl>
</section>
</div>
<footer class="dialog-actions"><button type="button" class="button primary close-dialog">Close</button></footer>
</div>
</dialog>
<dialog id="tag-dialog" class="dialog" data-i18n-scope>
<div class="dialog-card tag-card">
<header class="dialog-header"><strong>Label</strong><button type="button" class="icon-button close-dialog"
aria-label="Close"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use>
</svg></button></header>
<form id="tag-form" class="tag-form">
<input id="tag-id" type="hidden">
<label><span>Name</span><input id="tag-name" maxlength="60" required></label>
<label><span>Color</span><input id="tag-color" type="color" value="#6b7280"></label>
<footer class="dialog-actions"><button id="tag-delete" type="button"
class="button quiet danger">Delete</button><span class="toolbar-spacer"></span><button type="button"
class="button quiet close-dialog">Cancel</button><button type="submit" class="button primary">Save</button>
</footer>
</form>
</div>
</dialog>
<dialog id="advanced-search-dialog" class="dialog" data-i18n-scope>
<div class="dialog-card advanced-search-card">
<header class="dialog-header"><strong>Advanced search</strong><button type="button"
class="icon-button close-dialog" aria-label="Close"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use>
</svg></button></header>
<form id="advanced-search-form" class="advanced-search-form">
<div class="settings-grid advanced-search-grid">
<label><span>Contains</span><input id="search-text" autocomplete="off"></label>
<label><span>Folder</span><select id="search-folder">
<option value="">All folders</option>
</select></label>
<label><span>From</span><input id="search-from" autocomplete="off"></label>
<label><span>To</span><input id="search-to" autocomplete="off"></label>
<label class="wide-field"><span>Subject</span><input id="search-subject" autocomplete="off"></label>
<label><span>Date from</span><input id="search-date-from" type="date"></label>
<label><span>Date to</span><input id="search-date-to" type="date"></label>
<label><span>Read status</span><select id="search-read">
<option value="">Any</option>
<option value="unread">Unread</option>
<option value="read">Read</option>
</select></label>
<label><span>Flag</span><select id="search-flagged">
<option value="">Any</option>
<option value="true">Flagged</option>
<option value="false">Not flagged</option>
</select></label>
<label><span>Attachments</span><select id="search-attachment">
<option value="">Any</option>
<option value="true">Has attachment</option>
<option value="false">No attachment</option>
</select></label>
<label><span>Sort</span><select id="search-sort">
<option value="date_desc">Newest first</option>
<option value="date_asc">Oldest first</option>
</select></label>
</div>
<div class="saved-search-section">
<div class="section-heading"><span>Saved searches</span></div>
<div id="saved-search-list" class="saved-search-list"></div>
</div>
<footer class="dialog-actions advanced-search-actions">
<button id="search-reset-btn" type="button" class="button quiet">Reset</button>
<button id="search-save-btn" type="button" class="button quiet">Save search</button>
<span class="toolbar-spacer"></span>
<button type="button" class="button quiet close-dialog">Cancel</button>
<button type="submit" class="button primary">Search</button>
</footer>
</form>
</div>
</dialog>
<dialog id="contacts-dialog" class="dialog" data-i18n-scope>
<div class="dialog-card contacts-card">
<header class="dialog-header"><strong>Contacts</strong><button type="button" class="icon-button close-dialog"
aria-label="Close"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use>
</svg></button></header>
<div class="contacts-layout">
<div class="contacts-sidebar">
<div class="contact-group-toolbar"><select id="contact-group-filter">
<option value="">All contacts</option>
</select><button id="contact-group-new" class="button quiet" type="button">New group</button><button
id="contact-group-rename" class="button quiet" type="button">Rename</button><button
id="contact-group-delete" class="button quiet danger" type="button">Delete</button></div>
<div class="inline-field"><input id="contact-search" placeholder="Search contacts"><button id="contact-new"
class="button quiet" type="button">New</button></div>
<div class="contact-transfer"><button id="contact-import" class="button quiet" type="button">Import
vCard</button><input id="contact-import-file" type="file" accept=".vcf,text/vcard,text/x-vcard"
hidden><button id="contact-export" class="button quiet" type="button">Export vCard</button><button
id="contact-duplicates" class="button quiet" type="button">Find duplicates</button></div>
<div id="contact-list" class="contact-list"></div>
</div>
<form id="contact-form" class="contact-form">
<input id="contact-id" type="hidden">
<div class="contact-photo-editor">
<div id="contact-photo-placeholder" class="contact-photo-placeholder">Photo</div>
<img id="contact-photo-preview" class="contact-photo-preview hidden" alt="Contact photo">
<div class="inline-actions">
<button id="contact-photo-upload" type="button" class="button quiet" disabled>Upload photo</button>
<button id="contact-photo-delete" type="button" class="button quiet danger" disabled>Remove photo</button>
<input id="contact-photo-file" type="file" accept="image/png,image/jpeg,image/webp" hidden>
</div>
</div>
<label><span>Name</span><input id="contact-name"></label>
<label><span>Email</span><input id="contact-email" type="email" required></label>
<label><span>Other emails</span><textarea id="contact-emails" rows="2"
placeholder="One address per line"></textarea></label>
<label><span>Phone</span><input id="contact-phone" type="tel"></label>
<label><span>Other phones</span><textarea id="contact-phones" rows="2"
placeholder="One number per line"></textarea></label>
<label><span>Company</span><input id="contact-company"></label>
<label><span>Job title</span><input id="contact-job-title"></label>
<label><span>Website</span><input id="contact-website" type="url" placeholder="https://"></label>
<label><span>Birthday</span><input id="contact-birthday" type="date"></label>
<label><span>Address</span><textarea id="contact-address" rows="3"></textarea></label>
<label><span>Other addresses</span><textarea id="contact-addresses" rows="3"
placeholder="One address per line"></textarea></label>
<label><span>Notes</span><textarea id="contact-notes" rows="6"></textarea></label>
<label class="checkbox-row"><input id="contact-favorite" type="checkbox"><span>Favorite</span></label>
<div><span class="field-label">Groups</span>
<div id="contact-group-membership" class="contact-group-membership"></div>
</div>
<div class="inline-actions"><button type="submit" class="button primary">Save</button><button
id="contact-compose" type="button" class="button quiet">Compose</button><button id="contact-delete"
type="button" class="button quiet danger">Delete</button></div>
</form>
</div>
</div>
</dialog>
<dialog id="contact-duplicates-dialog" class="dialog" data-i18n-scope>
<div class="dialog-card duplicates-card">
<header class="dialog-header"><strong>Duplicate contacts</strong><button type="button"
class="icon-button close-dialog" aria-label="Close"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use>
</svg></button></header>
<p class="muted">Duplicates are detected when two contacts share a primary or alternate e-mail address. Choose
which record to keep.</p>
<div id="contact-duplicate-list" class="duplicate-contact-list"></div>
<footer class="dialog-actions"><button type="button" class="button primary close-dialog">Close</button></footer>
</div>
</dialog>
<dialog id="calendar-dialog" class="dialog" data-i18n-scope>
<div class="dialog-card calendar-card">
<header class="dialog-header"><strong>Calendar</strong>
<div class="inline-actions"><button id="calendar-today" type="button" class="button quiet">Today</button><button
type="button" class="icon-button close-dialog" aria-label="Close"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use>
</svg></button></div>
</header>
<div class="calendar-toolbar"><button id="calendar-prev" type="button"
class="button quiet">Previous</button><strong id="calendar-range"></strong><button id="calendar-next"
type="button" class="button quiet">Next</button><select id="calendar-view" aria-label="Calendar view">
<option value="month">Month</option>
<option value="week">Week</option>
<option value="day">Day</option>
<option value="agenda">Agenda</option>
</select><button id="calendar-import" type="button" class="button quiet">Import ICS</button><input
id="calendar-import-file" type="file" accept=".ics,text/calendar" hidden><button id="calendar-export"
type="button" class="button quiet">Export ICS</button><button id="calendar-new" type="button"
class="button primary">New event</button></div>
<div id="calendar-events" class="calendar-events"></div>
<form id="calendar-form" class="calendar-form hidden">
<input id="calendar-event-id" type="hidden">
<label><span>Title</span><input id="calendar-title" required></label>
<label class="checkbox-row"><input id="calendar-all-day" type="checkbox"><span>All day</span></label>
<div class="settings-grid"><label><span>Start</span><input id="calendar-start" type="datetime-local"
required></label><label><span>End</span><input id="calendar-end" type="datetime-local" required></label>
</div>
<div class="settings-grid"><label><span>Recurrence</span><select id="calendar-recurrence">
<option value="">Does not repeat</option>
<option value="FREQ=DAILY">Daily</option>
<option value="FREQ=WEEKLY">Weekly</option>
<option value="FREQ=MONTHLY">Monthly</option>
<option value="FREQ=YEARLY">Yearly</option>
<option value="custom">Custom RRULE</option>
</select></label><label id="calendar-rrule-wrap" class="hidden"><span>RRULE</span><input id="calendar-rrule"
placeholder="FREQ=WEEKLY;INTERVAL=2"></label></div>
<div class="settings-grid"><label><span>Status</span><select id="calendar-status">
<option value="confirmed">Confirmed</option>
<option value="tentative">Tentative</option>
<option value="cancelled">Cancelled</option>
</select></label><label><span>Reminder</span><select id="calendar-reminder">
<option value="">None</option>
<option value="0">At start</option>
<option value="5">5 minutes</option>
<option value="15">15 minutes</option>
<option value="30">30 minutes</option>
<option value="60">1 hour</option>
<option value="1440">1 day</option>
</select></label></div>
<div class="settings-grid"><label><span>Organizer</span><input id="calendar-organizer"
type="email"></label><label><span>Color</span><input id="calendar-color" type="color"
value="#6b7280"></label></div>
<label><span>Attendees</span><input id="calendar-attendees"
placeholder="alice@example.com, bob@example.com"></label>
<label><span>Location</span><input id="calendar-location"></label>
<label><span>Meeting link</span><input id="calendar-meeting-url" type="url" placeholder="https://"></label>
<label><span>Description</span><textarea id="calendar-description" rows="4"></textarea></label>
<div class="inline-actions"><button type="submit" class="button primary">Save</button><button
id="calendar-delete" type="button" class="button quiet danger">Delete</button><button id="calendar-cancel"
type="button" class="button quiet">Cancel</button></div>
</form>
</div>
</dialog>
<dialog id="headers-dialog" class="dialog" data-i18n-scope>
<div class="dialog-card headers-card">
<header class="dialog-header"><strong>Message headers</strong><button type="button"
class="icon-button close-dialog" aria-label="Close"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use>
</svg></button></header>
<div id="headers-summary" class="headers-summary"></div>
<pre id="headers-content" class="headers-content"></pre>
<footer class="dialog-actions"><button id="copy-headers-btn" type="button"
class="button quiet">Copy</button><button type="button" class="button primary close-dialog">Close</button>
</footer>
</div>
</dialog>
<dialog id="add-account-dialog" class="dialog" data-i18n-scope>
<div class="dialog-card add-account-card">
<header class="dialog-header"><strong>Add account</strong><button type="button" class="icon-button close-dialog"
aria-label="Close"><svg>
<use href="__RUSTBOX_ASSET_PREFIX__/assets/icons.svg#icon-x"></use>
</svg></button></header>
<form id="add-account-form" class="login-form">
<label><span>Email</span><input id="add-account-email" type="email" autocomplete="username" required></label>
<label><span>Password</span><input id="add-account-password" type="password" autocomplete="current-password"
required></label>
<label id="add-account-remember-row" class="checkbox-row"><input id="add-account-remember" type="checkbox"><span
id="add-account-remember-label">Keep me signed in</span></label>
<div id="add-account-error" class="form-error hidden" role="alert"></div>
<footer class="dialog-actions"><button type="button" class="button quiet close-dialog">Cancel</button><button
class="button primary" type="submit">Add account</button></footer>
</form>
</div>
</dialog>
<div id="context-menu" class="context-menu hidden" role="menu"></div>
<div id="toast-stack" class="toast-stack" aria-live="polite"></div>
<script src="__RUSTBOX_ASSET_PREFIX__/assets/app.__RUSTBOX_ASSET_ID__.js" defer></script>
</body>
</html>