mailscope 0.1.0

data/app/controllers/mailscope/messages_controller.rb

@@ -0,0 +1,139 @@
+# frozen_string_literal: true
+
+module Mailscope
+  class MessagesController < ApplicationController
+    TRUTHY = %w[1 true t yes y on].freeze
+
+    before_action :load_message, only: %i[show destroy body source download attachment]
+
+    def index
+      load_index
+      @message ||= @messages.first
+
+      respond_to do |format|
+        format.html { render :index }
+        format.json { render json: index_payload }
+      end
+    end
+
+    def show
+      load_index
+
+      respond_to do |format|
+        format.html do
+          # The pane is fetched on its own by the front-end; a full page load
+          # (no JS, opened in a new tab) still renders the whole UI.
+          if pane_request?
+            render partial: 'mailscope/messages/pane', locals: { message: @message }, layout: false
+          else
+            render :index
+          end
+        end
+        format.json { render json: @message.to_h }
+      end
+    end
+
+    def body
+      renderer = BodyRenderer.new(@message, part: params[:part], block_remote: block_remote?,
+                                            theme: params[:theme])
+
+      response.headers['Content-Security-Policy'] = renderer.content_security_policy
+      response.headers['X-Mailscope-Blocked-Resources'] = renderer.blocked_resources.to_s
+      response.headers['X-Frame-Options'] = 'SAMEORIGIN'
+      response.headers['Cache-Control'] = 'no-store'
+
+      render html: renderer.document.html_safe, layout: false
+    end
+
+    def source
+      render plain: @message.raw, content_type: 'text/plain'
+    end
+
+    def download
+      send_data @message.raw,
+                filename: "#{@message.id}.eml",
+                type: 'message/rfc822',
+                disposition: 'attachment'
+    end
+
+    def attachment
+      found = @message.attachment(params[:attachment_id])
+      return head :not_found unless found
+
+      bytes = @message.attachment_body(found.id)
+      return head :not_found unless bytes
+
+      send_data bytes,
+                filename: found.filename,
+                type: found.content_type.presence || 'application/octet-stream',
+                disposition: inline_attachment?(found) ? 'inline' : 'attachment'
+    end
+
+    def destroy
+      storage.delete(@message.id)
+
+      respond_to do |format|
+        format.json { render json: { ok: true, revision: storage.revision } }
+        format.any  { redirect_to root_path(filter_params), status: :see_other }
+      end
+    end
+
+    def clear
+      removed = storage.clear
+
+      respond_to do |format|
+        format.json { render json: { ok: true, removed: removed, revision: storage.revision } }
+        format.any  { redirect_to root_path, status: :see_other }
+      end
+    end
+
+    # Cheap endpoint the browser polls to notice new mail.
+    def status
+      response.headers['Cache-Control'] = 'no-store'
+      render json: { revision: storage.revision, count: storage.all.size }
+    end
+
+    private
+
+    def load_index
+      @all       = storage.all
+      @mailboxes = Mailbox.index(@all)
+      @query     = Query.new(@all, mailbox: params[:mailbox], term: params[:q], only: params[:only])
+      @messages  = @query.results
+      @mailbox   = params[:mailbox].presence
+    end
+
+    def load_message
+      @message = storage.find(params[:id])
+      head :not_found unless @message
+    rescue InvalidLetterId
+      head :not_found
+    end
+
+    def block_remote?
+      return mailscope_config.block_remote_content unless params.key?(:remote)
+
+      TRUTHY.exclude?(params[:remote].to_s.downcase)
+    end
+
+    def inline_attachment?(found)
+      found.image? || found.content_type.to_s == 'application/pdf'
+    end
+
+    def pane_request?
+      request.headers['X-Mailscope-Pane'].present?
+    end
+
+    def filter_params
+      params.permit(:mailbox, :q, :only).to_h.compact_blank
+    end
+
+    def index_payload
+      {
+        revision: storage.revision,
+        mailboxes: @mailboxes.map(&:to_h),
+        messages: @messages.map(&:to_h)
+      }
+    end
+  end
+end

data/app/helpers/mailscope/application_helper.rb

@@ -0,0 +1,124 @@
+# frozen_string_literal: true
+
+require 'digest'
+
+module Mailscope
+  module ApplicationHelper
+    ASSET_ROOT = Mailscope::Engine.root.join('app', 'assets', 'mailscope')
+
+    # Digest of the asset bundle, so `Cache-Control: immutable` is safe and a
+    # gem upgrade (or a local edit while developing the gem) busts the cache.
+    def mailscope_assets_digest
+      if Rails.env.development? || ENV['MAILSCOPE_DEV']
+        return Digest::MD5.hexdigest(Dir[ASSET_ROOT.join('*')].map { |f| "#{f}#{File.mtime(f).to_i}" }.join)[0, 12]
+      end
+
+      @mailscope_assets_digest ||= Digest::MD5.hexdigest(Mailscope::VERSION)[0, 12]
+    end
+
+    def mailscope_asset_path(file)
+      asset_path(digest: mailscope_assets_digest, file: file)
+    end
+
+    # Shorthand for the engine's translation namespace.
+    def ms_t(key, **options)
+      t("mailscope.#{key}", **options)
+    end
+
+    def mailscope_time_tag(time)
+      tag.time(mailscope_short_time(time),
+               datetime: time.iso8601,
+               title: mailscope_datetime(time),
+               data: { relative: time.iso8601 })
+    end
+
+    def mailscope_short_time(time)
+      now = Time.now
+      seconds = (now - time).to_i
+
+      case seconds
+      when ...60      then ms_t('time.now')
+      when ...3600    then ms_t('time.minutes', count: seconds / 60)
+      when ...86_400  then time.strftime('%H:%M')
+      when ...604_800 then ms_t('time.weekdays')[time.wday]
+      else time.strftime('%d/%m')
+      end
+    end
+
+    # Strings the front-end needs. Serialised once into the page so the JS
+    # bundle stays a static, cacheable asset with no locale baked in.
+    def mailscope_js_strings
+      {
+        clearConfirm: ms_t('actions.clear_confirm'),
+        deleted: ms_t('toasts.deleted'),
+        deleteFailed: ms_t('toasts.delete_failed'),
+        clearedOne: ms_t('toasts.cleared', count: 1),
+        clearedMany: ms_t('toasts.cleared', count: 2).sub('2', '%{count}'),
+        clearFailed: ms_t('toasts.clear_failed'),
+        newMail: ms_t('toasts.new_mail'),
+        open: ms_t('toasts.open'),
+        listFailed: ms_t('toasts.list_failed'),
+        openFailed: ms_t('toasts.open_failed'),
+        sourceError: ms_t('message.source_error'),
+        emptyTitle: ms_t('empty.inbox_title'),
+        theme: ms_t('toasts.theme', name: '%{name}'),
+        themeSystem: ms_t('toasts.theme_system'),
+        themeLight: ms_t('toasts.theme_light'),
+        themeDark: ms_t('toasts.theme_dark'),
+        timeNow: ms_t('time.now'),
+        timeMinutes: ms_t('time.minutes', count: 0).sub('0', '%{count}')
+      }
+    end
+
+    def mailscope_datetime(time)
+      time.getlocal.strftime(ms_t('time.datetime'))
+    end
+
+    def mailscope_bytes(size)
+      size = size.to_i
+      units = %w[B KB MB GB]
+      index = 0
+      value = size.to_f
+      while value >= 1024 && index < units.size - 1
+        value /= 1024
+        index += 1
+      end
+      format(index.zero? ? '%d %s' : '%.1f %s', value, units[index])
+    end
+
+    # Accepts a Mailbox, a Message::Address or a plain string. Initials come
+    # from the display name when there is one, so "Equipe Impulso" beats
+    # "nao-responda@...".
+    def mailscope_avatar(source, size: :md)
+      mailbox = case source
+                when Mailbox then source
+                when Message::Address then Mailbox.new(address: source.address.to_s, name: source.name, count: 0)
+                else Mailbox.new(address: source.to_s, name: nil, count: 0)
+                end
+
+      tag.span(mailbox.initials,
+               class: "ms-avatar ms-avatar--#{size}",
+               style: "--avatar-hue: #{mailbox.hue}",
+               aria: { hidden: true })
+    end
+
+    def mailscope_addresses(addresses, limit: 2)
+      return tag.span('—', class: 'ms-muted') if addresses.empty?
+
+      shown = addresses.first(limit).map(&:short).join(', ')
+      rest  = addresses.size - limit
+      rest.positive? ? "#{shown} +#{rest}" : shown
+    end
+
+    def mailscope_icon(name, size: 16)
+      tag.svg(tag.use(nil, href: "##{name}"),
+              class: "ms-icon ms-icon--#{name}", width: size, height: size,
+              viewBox: '0 0 24 24', fill: 'none', aria: { hidden: true })
+    end
+
+    def mailscope_filter_url(overrides = {})
+      base = { mailbox: params[:mailbox], q: params[:q], only: params[:only] }
+      root_path(base.merge(overrides).compact_blank)
+    end
+  end
+end

data/app/views/layouts/mailscope/application.html.erb

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="pt-BR" data-theme="<%= mailscope_config.default_theme %>">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title><%= yield(:title).presence || mailscope_config.title %></title>
+  <meta name="robots" content="noindex, nofollow">
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag if respond_to?(:csp_meta_tag) %>
+  <link rel="icon" href="<%= mailscope_asset_path('favicon.svg') %>" type="image/svg+xml">
+  <link rel="stylesheet" href="<%= mailscope_asset_path('mailscope.css') %>">
+  <script nonce="<%= content_security_policy_nonce %>">
+    // Resolve the stored theme before first paint so there is no flash.
+    (function () {
+      try {
+        var stored = localStorage.getItem('mailscope:theme');
+        if (stored) document.documentElement.dataset.theme = stored;
+      } catch (e) {}
+    })();
+  </script>
+</head>
+<body class="ms-body" data-refresh-interval="<%= mailscope_config.auto_refresh_interval %>"
+      data-status-url="<%= status_path %>"
+      data-block-remote="<%= mailscope_config.block_remote_content %>">
+  <%= render 'mailscope/shared/icons' %>
+  <script type="application/json" data-mailscope-i18n><%= mailscope_js_strings.to_json.html_safe %></script>
+  <%= yield %>
+  <script src="<%= mailscope_asset_path('mailscope.js') %>" defer nonce="<%= content_security_policy_nonce %>"></script>
+</body>
+</html>

data/app/views/mailscope/messages/_blank_pane.html.erb

@@ -0,0 +1,9 @@
+<div class="ms-empty ms-empty--pane">
+  <span class="ms-empty__icon ms-empty__icon--lg"><%= mailscope_icon('i-inbox', size: 36) %></span>
+  <p class="ms-empty__title"><%= ms_t('empty.no_selection_title') %></p>
+  <p class="ms-empty__text">
+    <%= ms_t('empty.no_selection_text_html',
+             keys: tag.kbd('j').concat(' / ').concat(tag.kbd('k')),
+             search: tag.kbd('/')) %>
+  </p>
+</div>

data/app/views/mailscope/messages/_list.html.erb

@@ -0,0 +1,34 @@
+<section class="ms-list" aria-label="<%= ms_t('list.label') %>">
+  <header class="ms-list__head">
+    <div class="ms-list__count">
+      <strong><%= @messages.size %></strong>
+      <%= ms_t('list.count', count: @messages.size) %>
+      <% if @query.filtered? %>
+        <a class="ms-chip ms-chip--clear" href="<%= root_path %>">
+          <%= ms_t('actions.clear_filters') %> <%= mailscope_icon('i-close', size: 12) %>
+        </a>
+      <% end %>
+    </div>
+  </header>
+
+  <ol class="ms-list__items" data-list role="listbox" tabindex="0"
+      aria-label="<%= ms_t('list.listbox') %>">
+    <% @messages.each do |message| %>
+      <%= render 'mailscope/messages/list_item', message: message, selected: @message&.id == message.id %>
+    <% end %>
+  </ol>
+
+  <% if @messages.empty? %>
+    <div class="ms-empty ms-empty--list">
+      <span class="ms-empty__icon"><%= mailscope_icon('i-inbox', size: 28) %></span>
+      <% if @query.filtered? %>
+        <p class="ms-empty__title"><%= ms_t('empty.no_results_title') %></p>
+        <p class="ms-empty__text"><%= ms_t('empty.no_results_text') %></p>
+        <a class="ms-btn ms-btn--soft" href="<%= root_path %>"><%= ms_t('actions.clear_filters_button') %></a>
+      <% else %>
+        <p class="ms-empty__title"><%= ms_t('empty.inbox_title') %></p>
+        <p class="ms-empty__text"><%= ms_t('empty.inbox_text') %></p>
+      <% end %>
+    </div>
+  <% end %>
+</section>

data/app/views/mailscope/messages/_list_item.html.erb

@@ -0,0 +1,39 @@
+<li class="ms-item <%= 'is-selected' if selected %>" role="option"
+    aria-selected="<%= selected %>" data-item data-id="<%= message.id %>">
+  <a class="ms-item__link" href="<%= message_path(message) %>" data-item-link>
+    <%= mailscope_avatar(message.from.first) %>
+
+    <div class="ms-item__body">
+      <div class="ms-item__row">
+        <span class="ms-item__from"><%= message.from.first&.short || ms_t('list.unknown_sender') %></span>
+        <%= mailscope_time_tag(message.sent_at) %>
+      </div>
+
+      <div class="ms-item__subject"><%= message.subject %></div>
+
+      <div class="ms-item__row ms-item__row--meta">
+        <span class="ms-item__to"><%= ms_t('list.to', list: mailscope_addresses(message.to)) %></span>
+        <span class="ms-item__badges">
+          <% if message.visible_attachments.any? %>
+            <span class="ms-badge" title="<%= ms_t('list.attachments', count: message.visible_attachments.size) %>">
+              <%= mailscope_icon('i-clip', size: 12) %><%= message.visible_attachments.size %>
+            </span>
+          <% end %>
+          <span class="ms-badge ms-badge--<%= message.html? ? 'html' : 'text' %>">
+            <%= message.html? ? 'HTML' : 'TXT' %>
+          </span>
+        </span>
+      </div>
+
+      <% if message.preview.present? %>
+        <p class="ms-item__preview"><%= truncate(message.preview, length: 110) %></p>
+      <% end %>
+    </div>
+  </a>
+
+  <button type="button" class="ms-item__delete" data-action="delete-item"
+          data-url="<%= message_path(message) %>"
+          title="<%= ms_t('actions.delete') %>" aria-label="<%= ms_t('actions.delete_message', subject: message.subject) %>">
+    <%= mailscope_icon('i-trash', size: 14) %>
+  </button>
+</li>

data/app/views/mailscope/messages/_pane.html.erb

@@ -0,0 +1,151 @@
+<%
+  part_tabs = []
+  part_tabs << 'html' if message.html?
+  part_tabs << 'text' if message.text?
+  default_part = message.default_part
+  blocked = Mailscope::BodyRenderer.new(message, part: default_part, block_remote: true).blocked_resources
+%>
+<article class="ms-message" data-message data-id="<%= message.id %>"
+         data-body-url="<%= message_body_path(message) %>"
+         data-source-url="<%= message_source_path(message) %>">
+
+  <header class="ms-message__head">
+    <div class="ms-message__title">
+      <h1><%= message.subject %></h1>
+      <div class="ms-message__tools">
+        <a class="ms-btn ms-btn--ghost" href="<%= message_download_path(message) %>" title="<%= ms_t('actions.download') %>">
+          <%= mailscope_icon('i-download') %><span class="ms-sr"><%= ms_t('actions.download') %></span>
+        </a>
+        <a class="ms-btn ms-btn--ghost" href="<%= message_body_path(message, part: default_part) %>"
+           target="_blank" rel="noopener" title="<%= ms_t('actions.open_in_tab') %>">
+          <%= mailscope_icon('i-external') %><span class="ms-sr"><%= ms_t('actions.open_in_tab') %></span>
+        </a>
+        <button type="button" class="ms-btn ms-btn--ghost ms-btn--danger-ghost"
+                data-action="delete-item" data-url="<%= message_path(message) %>"
+                title="<%= ms_t('actions.delete_hint') %>">
+          <%= mailscope_icon('i-trash') %><span class="ms-sr"><%= ms_t('actions.delete') %></span>
+        </button>
+      </div>
+    </div>
+
+    <%# Reads like a message in a mail client: who sent it, to whom, when.
+        Everything else lives one disclosure away. %>
+    <div class="ms-sender">
+      <%= mailscope_avatar(message.from.first) %>
+      <div class="ms-sender__body">
+        <div class="ms-sender__line">
+          <span class="ms-sender__name"><%= message.from.first&.short || ms_t('list.unknown_sender') %></span>
+          <% if message.from.first&.name.present? %>
+            <span class="ms-sender__addr">&lt;<%= message.from.first.address %>&gt;</span>
+          <% end %>
+          <span class="ms-sender__date"><%= mailscope_datetime(message.sent_at) %></span>
+        </div>
+        <div class="ms-sender__line ms-sender__line--sub">
+          <span class="ms-sender__to"><%= ms_t('message.to_line', list: mailscope_addresses(message.to, limit: 3)) %></span>
+        </div>
+        <%# Everything else lives in the Headers tab, except these: Bcc is
+            stripped from the encoded message, and mailer and size are derived
+            rather than real headers. %>
+        <div class="ms-sender__line ms-sender__facts">
+          <% if message.bcc.any? %>
+            <span><%= ms_t('message.bcc') %> <%= mailscope_addresses(message.bcc, limit: 2) %></span>
+          <% end %>
+          <% if message.mailer.present? %><code><%= message.mailer %></code><% end %>
+          <span><%= mailscope_bytes(message.size) %></span>
+        </div>
+      </div>
+    </div>
+
+  </header>
+
+  <nav class="ms-tabs" role="tablist">
+    <% part_tabs.each_with_index do |value, index| %>
+      <button type="button" role="tab" class="ms-tab <%= 'is-active' if index.zero? %>"
+              data-tab="body" data-part="<%= value %>"
+              aria-selected="<%= index.zero? %>"><%= ms_t("tabs.#{value}") %></button>
+    <% end %>
+    <button type="button" role="tab" class="ms-tab" data-tab="source" aria-selected="false"><%= ms_t('tabs.source') %></button>
+    <button type="button" role="tab" class="ms-tab" data-tab="headers" aria-selected="false"><%= ms_t('tabs.headers') %></button>
+    <% if message.visible_attachments.any? %>
+      <button type="button" role="tab" class="ms-tab" data-tab="attachments" aria-selected="false">
+        <%= ms_t('tabs.attachments') %> <span class="ms-tab__count"><%= message.visible_attachments.size %></span>
+      </button>
+    <% end %>
+
+    <div class="ms-tabs__right" data-body-controls>
+      <div class="ms-segmented" role="group" aria-label="<%= ms_t('preview.widths') %>">
+        <% { 'desktop' => ['i-desktop', ''], 'tablet' => ['i-tablet', '768'], 'mobile' => ['i-mobile', '390'] }
+             .each_with_index do |(key, (icon, width)), index| %>
+          <% label = ms_t("preview.#{key}") %>
+          <button type="button" class="ms-segmented__btn <%= 'is-active' if index.zero? %>"
+                  data-viewport="<%= width %>" title="<%= label %><%= " · #{width}px" if width.present? %>">
+            <%= mailscope_icon(icon, size: 15) %><span class="ms-sr"><%= label %></span>
+          </button>
+        <% end %>
+      </div>
+
+      <label class="ms-switch" title="<%= ms_t('preview.remote_hint') %>">
+        <input type="checkbox" data-remote-toggle <%= 'checked' unless mailscope_config.block_remote_content %>>
+        <span class="ms-switch__track" aria-hidden="true"><span class="ms-switch__thumb"></span></span>
+        <span class="ms-switch__label"><%= mailscope_icon('i-shield', size: 14) %> <%= ms_t('preview.remote_content') %></span>
+      </label>
+    </div>
+  </nav>
+
+  <% if blocked.positive? %>
+    <div class="ms-notice" data-remote-notice>
+      <%= mailscope_icon('i-shield', size: 15) %>
+      <span><%= ms_t('preview.blocked_html', count: blocked) %></span>
+      <button type="button" class="ms-link" data-action="allow-remote"><%= ms_t('actions.allow_remote') %></button>
+    </div>
+  <% end %>
+
+  <div class="ms-panels">
+    <div class="ms-panel is-active" data-panel="body">
+      <div class="ms-frame" data-frame-wrap>
+        <%# The src is assigned by mailscope.js so the stored "remote content"
+            preference is honoured on the first paint instead of causing a
+            second load right after it. %>
+        <iframe data-frame title="<%= ms_t('message.preview_label') %>"
+                sandbox="allow-popups allow-popups-to-escape-sandbox"></iframe>
+        <noscript>
+          <a class="ms-btn ms-btn--soft" target="_blank" rel="noopener"
+             href="<%= message_body_path(message, part: default_part) %>"><%= ms_t('actions.open_preview') %></a>
+        </noscript>
+      </div>
+    </div>
+
+    <div class="ms-panel" data-panel="source">
+      <pre class="ms-source" data-source-target><%= ms_t('message.loading') %></pre>
+    </div>
+
+    <div class="ms-panel" data-panel="headers">
+      <table class="ms-headers">
+        <tbody>
+          <% message.header_pairs.each do |name, value| %>
+            <tr><th scope="row"><%= name %></th><td><%= value %></td></tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+
+    <% if message.visible_attachments.any? %>
+      <div class="ms-panel" data-panel="attachments">
+        <ul class="ms-attachments">
+          <% message.visible_attachments.each do |file| %>
+            <li>
+              <a href="<%= message_attachment_path(message, attachment_id: file.id) %>" target="_blank" rel="noopener">
+                <span class="ms-attachments__ext"><%= File.extname(file.filename).delete('.').upcase.presence || '?' %></span>
+                <span class="ms-attachments__body">
+                  <span class="ms-attachments__name"><%= file.filename %></span>
+                  <span class="ms-attachments__meta"><%= file.content_type %> · <%= mailscope_bytes(file.size) %></span>
+                </span>
+                <%= mailscope_icon('i-download', size: 16) %>
+              </a>
+            </li>
+          <% end %>
+        </ul>
+      </div>
+    <% end %>
+  </div>
+</article>

data/app/views/mailscope/messages/_rail.html.erb

@@ -0,0 +1,33 @@
+<nav class="ms-rail" aria-label="<%= ms_t('rail.label') %>">
+  <div class="ms-rail__section">
+    <h2 class="ms-rail__title"><%= ms_t('rail.heading') %></h2>
+
+    <a class="ms-box <%= 'is-active' unless @mailbox %>" href="<%= mailscope_filter_url(mailbox: nil) %>">
+      <span class="ms-box__icon"><%= mailscope_icon('i-inbox', size: 15) %></span>
+      <span class="ms-box__label"><span class="ms-box__name"><%= ms_t('rail.all') %></span></span>
+      <span class="ms-box__count"><%= @all.size %></span>
+    </a>
+
+    <% if @mailboxes.empty? %>
+      <p class="ms-rail__hint"><%= ms_t('rail.empty') %></p>
+    <% end %>
+
+    <% @mailboxes.each do |box| %>
+      <a class="ms-box <%= 'is-active' if @mailbox == box.address %>"
+         href="<%= mailscope_filter_url(mailbox: box.address) %>"
+         title="<%= box.address %>">
+        <%= mailscope_avatar(box, size: :sm) %>
+        <span class="ms-box__label">
+          <span class="ms-box__name"><%= box.label %></span>
+          <% if box.name.present? %><span class="ms-box__addr"><%= box.address %></span><% end %>
+        </span>
+        <span class="ms-box__count"><%= box.count %></span>
+      </a>
+    <% end %>
+  </div>
+
+  <footer class="ms-rail__footer">
+    <span class="ms-rail__version">Mailscope <%= Mailscope::VERSION %></span>
+    <span class="ms-rail__path" title="<%= mailscope_config.location %>"><%= mailscope_config.location.basename %>/</span>
+  </footer>
+</nav>

data/app/views/mailscope/messages/_shortcuts.html.erb

@@ -0,0 +1,21 @@
+<div class="ms-modal" data-shortcuts hidden>
+  <div class="ms-modal__backdrop" data-action="close-shortcuts"></div>
+  <div class="ms-modal__card" role="dialog" aria-modal="true" aria-label="<%= ms_t('shortcuts.title') %>">
+    <header>
+      <h2><%= ms_t('shortcuts.title') %></h2>
+      <button type="button" class="ms-btn ms-btn--ghost" data-action="close-shortcuts"
+              aria-label="<%= ms_t('actions.close') %>">
+        <%= mailscope_icon('i-close') %>
+      </button>
+    </header>
+    <dl class="ms-shortcuts">
+      <% [[%w[j ↓], 'next'], [%w[k ↑], 'previous'], [%w[/], 'search'], [%w[r], 'refresh'],
+          [%w[x], 'delete'], [%w[1 … 5], 'tabs'], [%w[t], 'theme'], [%w[?], 'help'], [%w[Esc], 'close']].each do |keys, key| %>
+        <div>
+          <dt><% keys.each do |k| %><%= k == '…' ? '…' : tag.kbd(k) %><% end %></dt>
+          <dd><%= ms_t("shortcuts.#{key}") %></dd>
+        </div>
+      <% end %>
+    </dl>
+  </div>
+</div>

data/app/views/mailscope/messages/index.html.erb

@@ -0,0 +1,66 @@
+<% content_for :title, @all.any? ? "#{mailscope_config.title} (#{@all.size})" : mailscope_config.title %>
+
+<div class="ms-app" data-mailscope-app data-root-path="<%= root_path %>">
+  <header class="ms-topbar">
+    <button type="button" class="ms-btn ms-btn--ghost ms-rail-toggle" data-action="rail"
+            aria-expanded="false" title="<%= ms_t('rail.label') %>">
+      <%= mailscope_icon('i-menu') %><span class="ms-sr"><%= ms_t('rail.label') %></span>
+    </button>
+
+    <a class="ms-brand" href="<%= root_path %>">
+      <span class="ms-brand__mark"><%= mailscope_icon('i-envelope', size: 15) %></span>
+      <span class="ms-brand__name"><%= mailscope_config.title %></span>
+    </a>
+
+    <form class="ms-search" method="get" action="<%= root_path %>" role="search">
+      <%= mailscope_icon('i-search') %>
+      <input type="search" name="q" value="<%= params[:q] %>" data-search-input
+             placeholder="<%= ms_t('search.placeholder') %>"
+             aria-label="<%= ms_t('search.label') %>" autocomplete="off">
+      <% if @mailbox %><input type="hidden" name="mailbox" value="<%= @mailbox %>"><% end %>
+      <kbd class="ms-search__kbd">/</kbd>
+    </form>
+
+    <div class="ms-topbar__actions">
+      <button type="button" class="ms-btn ms-btn--ghost" data-action="refresh" title="<%= ms_t('actions.refresh_hint') %>">
+        <%= mailscope_icon('i-refresh') %><span class="ms-sr"><%= ms_t('actions.refresh') %></span>
+      </button>
+
+      <label class="ms-live" title="<%= ms_t('actions.live_hint') %>">
+        <input type="checkbox" data-live-toggle <%= 'checked' if mailscope_config.auto_refresh %>>
+        <span class="ms-live__dot" aria-hidden="true"></span>
+        <span class="ms-live__label"><%= ms_t('actions.live') %></span>
+      </label>
+
+      <button type="button" class="ms-btn ms-btn--ghost" data-action="theme" title="<%= ms_t('actions.theme') %>">
+        <span data-theme-icon="light"><%= mailscope_icon('i-sun') %></span>
+        <span data-theme-icon="dark"><%= mailscope_icon('i-moon') %></span>
+        <span class="ms-sr"><%= ms_t('actions.theme') %></span>
+      </button>
+
+      <button type="button" class="ms-btn ms-btn--ghost" data-action="shortcuts" title="<%= ms_t('actions.shortcuts_hint') %>">
+        <%= mailscope_icon('i-keyboard') %><span class="ms-sr"><%= ms_t('actions.shortcuts') %></span>
+      </button>
+
+      <button type="button" class="ms-btn ms-btn--danger" data-action="clear"
+              data-url="<%= clear_messages_path %>" <%= 'disabled' if @all.empty? %>>
+        <%= mailscope_icon('i-trash') %><span><%= ms_t('actions.clear') %></span>
+      </button>
+    </div>
+  </header>
+
+  <div class="ms-main">
+    <%= render 'mailscope/messages/rail' %>
+    <%= render 'mailscope/messages/list' %>
+
+    <section class="ms-pane" data-pane aria-live="polite">
+      <% if @message %>
+        <%= render 'mailscope/messages/pane', message: @message %>
+      <% else %>
+        <%= render 'mailscope/messages/blank_pane' %>
+      <% end %>
+    </section>
+  </div>
+
+  <%= render 'mailscope/messages/shortcuts' %>
+</div>