mailscope 0.1.0

data/app/assets/mailscope/mailscope.js

@@ -0,0 +1,559 @@
+// Mailscope UI. No framework, no build step — just the browser.
+(function () {
+  'use strict';
+
+  var body = document.body;
+  var app = document.querySelector('[data-mailscope-app]');
+  if (!app) return;
+
+  // Strings come from the server so this file stays locale-free and cacheable.
+  var I18N = (function () {
+    var node = document.querySelector('[data-mailscope-i18n]');
+    try { return JSON.parse(node.textContent); } catch (e) { return {}; }
+  })();
+
+  function t(key, values) {
+    var text = I18N[key] || key;
+    if (!values) return text;
+    return text.replace(/%\{(\w+)\}/g, function (_, name) { return values[name]; });
+  }
+
+  var STORAGE_THEME = 'mailscope:theme';
+  var STORAGE_REMOTE = 'mailscope:remote';
+  var STORAGE_LIVE = 'mailscope:live';
+
+  // ── helpers ──────────────────────────────────────────────────────────
+  function $(selector, root) { return (root || document).querySelector(selector); }
+  function $$(selector, root) { return Array.prototype.slice.call((root || document).querySelectorAll(selector)); }
+
+  function csrfToken() {
+    var meta = document.querySelector('meta[name="csrf-token"]');
+    return meta ? meta.content : '';
+  }
+
+  function request(url, options) {
+    options = options || {};
+    options.headers = Object.assign({
+      'X-CSRF-Token': csrfToken(),
+      'X-Requested-With': 'XMLHttpRequest'
+    }, options.headers || {});
+    options.credentials = 'same-origin';
+    return fetch(url, options);
+  }
+
+  function store(key, value) {
+    try { value === null ? localStorage.removeItem(key) : localStorage.setItem(key, value); } catch (e) { /* private mode */ }
+  }
+
+  function read(key) {
+    try { return localStorage.getItem(key); } catch (e) { return null; }
+  }
+
+  // ── toast ────────────────────────────────────────────────────────────
+  var toast = (function () {
+    var node = document.createElement('div');
+    var timer;
+    node.className = 'ms-toast';
+    node.setAttribute('role', 'status');
+    document.body.appendChild(node);
+
+    return function (message, action) {
+      node.textContent = '';
+      node.appendChild(document.createTextNode(message));
+      if (action) {
+        var button = document.createElement('button');
+        button.type = 'button';
+        button.textContent = action.label;
+        button.addEventListener('click', function () {
+          hide();
+          action.onClick();
+        });
+        node.appendChild(button);
+      }
+      node.classList.add('is-visible');
+      clearTimeout(timer);
+      timer = setTimeout(hide, action ? 9000 : 3200);
+    };
+
+    function hide() { node.classList.remove('is-visible'); }
+  })();
+
+  // ── theme ────────────────────────────────────────────────────────────
+  function currentTheme() { return document.documentElement.dataset.theme || 'system'; }
+
+  // What the page actually looks like right now — 'system' resolves against
+  // the OS setting. The toggle flips this, so one click always does what the
+  // icon promises instead of stepping through a three-state cycle.
+  function effectiveTheme() {
+    var theme = currentTheme();
+    if (theme === 'light' || theme === 'dark') return theme;
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+
+  function applyTheme(theme) {
+    document.documentElement.dataset.theme = theme;
+    store(STORAGE_THEME, theme === 'system' ? null : theme);
+    onThemeChange();
+  }
+
+  function toggleTheme() {
+    var next = effectiveTheme() === 'dark' ? 'light' : 'dark';
+    applyTheme(next);
+    toast(t('theme', { name: t(next === 'dark' ? 'themeDark' : 'themeLight') }));
+  }
+
+  // The preview lives in a sandboxed, opaque-origin iframe, so it cannot read
+  // the parent's theme — it is passed along in the URL instead.
+  var themeListeners = [];
+  function onThemeChange() { themeListeners.forEach(function (fn) { fn(); }); }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
+    if (currentTheme() === 'system') onThemeChange();
+  });
+
+  // ── relative timestamps ──────────────────────────────────────────────
+  function refreshTimes() {
+    var now = Date.now();
+    $$('time[data-relative]').forEach(function (node) {
+      var then = Date.parse(node.dataset.relative);
+      if (isNaN(then)) return;
+      var seconds = Math.round((now - then) / 1000);
+      if (seconds < 60) node.textContent = t('timeNow');
+      else if (seconds < 3600) node.textContent = t('timeMinutes', { count: Math.floor(seconds / 60) });
+    });
+  }
+
+  // ── list + pane loading ──────────────────────────────────────────────
+  var currentUrl = location.pathname + location.search;
+
+  function selectedItem() { return $('[data-item].is-selected'); }
+
+  function closeRail() {
+    var rail = $('.ms-rail');
+    if (!rail || !rail.classList.contains('is-open')) return;
+    rail.classList.remove('is-open');
+    var toggle = $('[data-action="rail"]');
+    if (toggle) toggle.setAttribute('aria-expanded', 'false');
+  }
+
+  function markSelected(id) {
+    $$('[data-item]').forEach(function (item) {
+      var on = item.dataset.id === id;
+      item.classList.toggle('is-selected', on);
+      item.setAttribute('aria-selected', on ? 'true' : 'false');
+    });
+  }
+
+  function openMessage(id, options) {
+    options = options || {};
+    var item = $('[data-item][data-id="' + id + '"]');
+    var link = item && $('[data-item-link]', item);
+    if (!link) return;
+
+    markSelected(id);
+    if (item.scrollIntoView) item.scrollIntoView({ block: 'nearest' });
+
+    var pane = $('[data-pane]');
+    pane.setAttribute('aria-busy', 'true');
+
+    request(link.href, { headers: { 'X-Mailscope-Pane': '1' } })
+      .then(function (r) { return r.ok ? r.text() : Promise.reject(r.status); })
+      .then(function (html) {
+        pane.innerHTML = html;
+        pane.removeAttribute('aria-busy');
+        setupPane();
+        if (!options.silent) {
+          history.pushState({ id: id }, '', link.href);
+          currentUrl = link.href;
+        }
+      })
+      .catch(function () {
+        pane.removeAttribute('aria-busy');
+        toast(t('openFailed'));
+      });
+  }
+
+  function reloadList(url, options) {
+    options = options || {};
+    url = url || currentUrl;
+    app.classList.add('is-busy');
+
+    return request(url)
+      .then(function (r) { return r.ok ? r.text() : Promise.reject(r.status); })
+      .then(function (html) {
+        var doc = new DOMParser().parseFromString(html, 'text/html');
+        ['.ms-list', '.ms-rail'].forEach(function (selector) {
+          var fresh = doc.querySelector(selector);
+          var stale = document.querySelector(selector);
+          if (fresh && stale) stale.replaceWith(fresh);
+        });
+
+        var clear = $('[data-action="clear"]');
+        var freshClear = doc.querySelector('[data-action="clear"]');
+        if (clear && freshClear) clear.disabled = freshClear.disabled;
+
+        if (doc.title) document.title = doc.title;
+
+        refreshTimes();
+
+        if (options.keepSelection) {
+          var id = options.keepSelection;
+          if ($('[data-item][data-id="' + id + '"]')) markSelected(id);
+        }
+        if (options.selectFirst) {
+          var first = $('[data-item]');
+          if (first) openMessage(first.dataset.id);
+          else renderBlankPane(doc);
+        }
+      })
+      .catch(function () { toast(t('listFailed')); })
+      .finally(function () { app.classList.remove('is-busy'); });
+  }
+
+  function renderBlankPane(doc) {
+    var blank = doc && doc.querySelector('.ms-empty--pane');
+    $('[data-pane]').innerHTML = blank ? blank.outerHTML :
+      '<div class="ms-empty ms-empty--pane"><p class="ms-empty__title"></p></div>';
+    if (!blank) $('[data-pane] .ms-empty__title').textContent = t('emptyTitle');
+  }
+
+  // ── pane behaviour (tabs, viewport, remote content) ──────────────────
+  function setupPane() {
+    var message = $('[data-message]');
+    if (!message) return;
+
+    var frame = $('[data-frame]', message);
+    var frameWrap = $('[data-frame-wrap]', message);
+    var bodyControls = $('[data-body-controls]', message);
+    var sourceLoaded = false;
+
+    function activateTab(tab) {
+      $$('.ms-tab', message).forEach(function (t) {
+        var on = t === tab;
+        t.classList.toggle('is-active', on);
+        t.setAttribute('aria-selected', on ? 'true' : 'false');
+      });
+      var name = tab.dataset.tab;
+      $$('.ms-panel', message).forEach(function (panel) {
+        panel.classList.toggle('is-active', panel.dataset.panel === name);
+      });
+      if (bodyControls) bodyControls.style.visibility = name === 'body' ? '' : 'hidden';
+
+      if (name === 'body' && tab.dataset.part) setFrameSrc({ part: tab.dataset.part });
+      if (name === 'source' && !sourceLoaded) loadSource();
+    }
+
+    function loadSource() {
+      sourceLoaded = true;
+      var target = $('[data-source-target]', message);
+      request(message.dataset.sourceUrl)
+        .then(function (r) { return r.text(); })
+        .then(function (text) { target.textContent = text; })
+        .catch(function () { target.textContent = t('sourceError'); });
+    }
+
+    function currentPart() {
+      var active = $('.ms-tab.is-active[data-part]', message);
+      return active ? active.dataset.part : 'html';
+    }
+
+    function remoteAllowed() {
+      var toggle = $('[data-remote-toggle]', message);
+      return !!(toggle && toggle.checked);
+    }
+
+    // Swaps in a brand new iframe instead of re-pointing the existing one:
+    // assigning `src` to a live iframe pushes an entry onto the session
+    // history, so the back button would walk through every preview you opened.
+    function setFrameSrc(options) {
+      options = options || {};
+      var part = options.part || currentPart();
+      var url = message.dataset.bodyUrl + '?part=' + encodeURIComponent(part) +
+        '&remote=' + (remoteAllowed() ? '1' : '0') +
+        '&theme=' + effectiveTheme();
+      if (frame.getAttribute('src') === url) return;
+
+      var fresh = document.createElement('iframe');
+      fresh.setAttribute('data-frame', '');
+      fresh.setAttribute('title', frame.getAttribute('title') || '');
+      fresh.setAttribute('sandbox', frame.getAttribute('sandbox') || '');
+      fresh.style.maxWidth = frame.style.maxWidth;
+      fresh.src = url;
+      frame.replaceWith(fresh);
+      frame = fresh;
+    }
+
+    $$('.ms-tab', message).forEach(function (tab) {
+      tab.addEventListener('click', function () { activateTab(tab); });
+    });
+
+    $$('[data-viewport]', message).forEach(function (button) {
+      button.addEventListener('click', function () {
+        $$('[data-viewport]', message).forEach(function (b) { b.classList.toggle('is-active', b === button); });
+        frame.style.maxWidth = button.dataset.viewport ? button.dataset.viewport + 'px' : '';
+        frame.dataset.viewport = button.dataset.viewport || '';
+      });
+    });
+
+    var remoteToggle = $('[data-remote-toggle]', message);
+    if (remoteToggle) {
+      var stored = read(STORAGE_REMOTE);
+      if (stored !== null) remoteToggle.checked = stored === '1';
+      remoteToggle.addEventListener('change', function () {
+        store(STORAGE_REMOTE, remoteToggle.checked ? '1' : '0');
+        setFrameSrc();
+        var notice = $('[data-remote-notice]', message);
+        if (notice) notice.hidden = remoteToggle.checked;
+      });
+      if (remoteToggle.checked) {
+        var notice = $('[data-remote-notice]', message);
+        if (notice) notice.hidden = true;
+      }
+    }
+
+    // First paint of the preview.
+    setFrameSrc();
+
+    // Only the plain-text view follows the theme; see BodyRenderer.
+    themeListeners = [function () { setFrameSrc(); }];
+
+    var allow = $('[data-action="allow-remote"]', message);
+    if (allow) {
+      allow.addEventListener('click', function () {
+        if (remoteToggle) { remoteToggle.checked = true; remoteToggle.dispatchEvent(new Event('change')); }
+      });
+    }
+  }
+
+  // ── destructive actions ──────────────────────────────────────────────
+  function deleteMessage(url, id) {
+    request(url, { method: 'DELETE', headers: { Accept: 'application/json' } })
+      .then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
+      .then(function () {
+        var item = $('[data-item][data-id="' + id + '"]');
+        var wasSelected = item && item.classList.contains('is-selected');
+        var neighbour = item && (item.nextElementSibling || item.previousElementSibling);
+        var nextId = neighbour ? neighbour.dataset.id : null;
+        if (item) item.remove();
+        if (wasSelected) {
+          if (nextId) openMessage(nextId);
+          else renderBlankPane(null);
+        }
+        reloadList(currentUrl, { keepSelection: nextId || undefined });
+        toast(t('deleted'));
+      })
+      .catch(function () { toast(t('deleteFailed')); });
+  }
+
+  function clearAll(url) {
+    if (!window.confirm(t('clearConfirm'))) return;
+
+    request(url, { method: 'DELETE', headers: { Accept: 'application/json' } })
+      .then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
+      .then(function (data) {
+        currentUrl = app.dataset.rootPath || location.pathname;
+        history.replaceState({}, '', currentUrl);
+        return reloadList(currentUrl, { selectFirst: true }).then(function () {
+          toast(data.removed === 1 ? t('clearedOne') : t('clearedMany', { count: data.removed }));
+        });
+      })
+      .catch(function () { toast(t('clearFailed')); });
+  }
+
+  // ── live polling ─────────────────────────────────────────────────────
+  var live = (function () {
+    var timer = null;
+    var revision = null;
+    var interval = (parseFloat(body.dataset.refreshInterval) || 3) * 1000;
+
+    function tick() {
+      request(body.dataset.statusUrl, { headers: { Accept: 'application/json' } })
+        .then(function (r) { return r.json(); })
+        .then(function (data) {
+          if (revision === null) { revision = data.revision; return; }
+          if (data.revision === revision) return;
+          revision = data.revision;
+          onChange();
+        })
+        .catch(function () { /* the app may just be reloading */ });
+    }
+
+    function onChange() {
+      var selected = selectedItem();
+      var keep = selected ? selected.dataset.id : null;
+      reloadList(currentUrl, { keepSelection: keep }).then(function () {
+        var first = $('[data-item]');
+        if (!first) return;
+        if (keep && $('[data-item][data-id="' + keep + '"]')) {
+          toast(t('newMail'), { label: t('open'), onClick: function () { openMessage(first.dataset.id); } });
+        } else {
+          openMessage(first.dataset.id);
+        }
+      });
+    }
+
+    return {
+      start: function () { if (!timer) { tick(); timer = setInterval(tick, interval); } },
+      stop: function () { clearInterval(timer); timer = null; },
+      poke: function () { revision = null; }
+    };
+  })();
+
+  // ── keyboard ─────────────────────────────────────────────────────────
+  function moveSelection(delta) {
+    var items = $$('[data-item]');
+    if (!items.length) return;
+    var index = items.indexOf(selectedItem());
+    var next = items[Math.min(items.length - 1, Math.max(0, (index === -1 ? 0 : index + delta)))];
+    if (next) openMessage(next.dataset.id);
+  }
+
+  function typingInField(event) {
+    var tag = (event.target.tagName || '').toLowerCase();
+    return tag === 'input' || tag === 'textarea' || tag === 'select' || event.target.isContentEditable;
+  }
+
+  document.addEventListener('keydown', function (event) {
+    if (event.metaKey || event.ctrlKey || event.altKey) return;
+
+    if (event.key === 'Escape') {
+      if (!$('[data-shortcuts]').hidden) { $('[data-shortcuts]').hidden = true; return; }
+      closeRail();
+      if (typingInField(event)) event.target.blur();
+      return;
+    }
+
+    if (typingInField(event)) return;
+
+    switch (event.key) {
+      case 'j': case 'ArrowDown': event.preventDefault(); moveSelection(1); break;
+      case 'k': case 'ArrowUp': event.preventDefault(); moveSelection(-1); break;
+      case '/': event.preventDefault(); $('[data-search-input]').focus(); $('[data-search-input]').select(); break;
+      case 'r': event.preventDefault(); live.poke(); reloadList(currentUrl, { keepSelection: selectedItem() && selectedItem().dataset.id }); break;
+      case 't': event.preventDefault(); toggleTheme(); break;
+      case '?': event.preventDefault(); $('[data-shortcuts]').hidden = false; break;
+      case 'x': {
+        var selected = selectedItem();
+        var button = selected && $('[data-action="delete-item"]', selected);
+        if (button) { event.preventDefault(); deleteMessage(button.dataset.url, selected.dataset.id); }
+        break;
+      }
+      default:
+        if (/^[1-5]$/.test(event.key)) {
+          var tabs = $$('.ms-tab');
+          var tab = tabs[parseInt(event.key, 10) - 1];
+          if (tab) { event.preventDefault(); tab.click(); }
+        }
+    }
+  });
+
+  // ── wiring ───────────────────────────────────────────────────────────
+  document.addEventListener('click', function (event) {
+    var link = event.target.closest('[data-item-link]');
+    if (link && !event.metaKey && !event.ctrlKey && event.button === 0) {
+      event.preventDefault();
+      openMessage(link.closest('[data-item]').dataset.id);
+      return;
+    }
+
+    var box = event.target.closest('.ms-box');
+    if (box) {
+      event.preventDefault();
+      closeRail();
+      currentUrl = box.getAttribute('href');
+      history.pushState({}, '', currentUrl);
+      reloadList(currentUrl, { selectFirst: true });
+      return;
+    }
+
+    var chip = event.target.closest('.ms-chip--clear');
+    if (chip) {
+      event.preventDefault();
+      currentUrl = chip.getAttribute('href');
+      history.pushState({}, '', currentUrl);
+      reloadList(currentUrl, { selectFirst: true });
+      return;
+    }
+
+    var action = event.target.closest('[data-action]');
+    if (!action) return;
+
+    switch (action.dataset.action) {
+      case 'refresh':
+        event.preventDefault();
+        live.poke();
+        reloadList(currentUrl, { keepSelection: selectedItem() && selectedItem().dataset.id });
+        break;
+      case 'theme': event.preventDefault(); toggleTheme(); break;
+      case 'rail': {
+        event.preventDefault();
+        var rail = $('.ms-rail');
+        var open = rail.classList.toggle('is-open');
+        action.setAttribute('aria-expanded', open ? 'true' : 'false');
+        break;
+      }
+      case 'shortcuts': event.preventDefault(); $('[data-shortcuts]').hidden = false; break;
+      case 'close-shortcuts': event.preventDefault(); $('[data-shortcuts]').hidden = true; break;
+      case 'clear': event.preventDefault(); clearAll(action.dataset.url); break;
+      case 'delete-item': {
+        event.preventDefault();
+        var item = action.closest('[data-item]');
+        var id = item ? item.dataset.id : action.closest('[data-message]').dataset.id;
+        deleteMessage(action.dataset.url, id);
+        break;
+      }
+    }
+  });
+
+  // debounced live search
+  (function () {
+    var input = $('[data-search-input]');
+    if (!input) return;
+    var form = input.closest('form');
+    var timer;
+
+    form.addEventListener('submit', function (event) {
+      event.preventDefault();
+      runSearch();
+    });
+
+    input.addEventListener('input', function () {
+      clearTimeout(timer);
+      timer = setTimeout(runSearch, 220);
+    });
+
+    function runSearch() {
+      var url = form.getAttribute('action') + '?' + new URLSearchParams(new FormData(form)).toString();
+      currentUrl = url;
+      history.replaceState({}, '', url);
+      reloadList(url, { selectFirst: true });
+    }
+  })();
+
+  window.addEventListener('popstate', function () {
+    currentUrl = location.pathname + location.search;
+    reloadList(currentUrl, { selectFirst: true });
+  });
+
+  var liveToggle = $('[data-live-toggle]');
+  if (liveToggle) {
+    // The server sets the default; whatever the user picks wins from then on.
+    var storedLive = read(STORAGE_LIVE);
+    if (storedLive !== null) liveToggle.checked = storedLive === '1';
+
+    liveToggle.addEventListener('change', function () {
+      store(STORAGE_LIVE, liveToggle.checked ? '1' : '0');
+      liveToggle.checked ? live.start() : live.stop();
+    });
+  }
+
+  document.addEventListener('visibilitychange', function () {
+    if (!liveToggle || !liveToggle.checked) return;
+    document.hidden ? live.stop() : live.start();
+  });
+
+  setupPane();
+  refreshTimes();
+  setInterval(refreshTimes, 30000);
+  if (liveToggle && liveToggle.checked) live.start();
+})();

data/app/controllers/mailscope/application_controller.rb

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Mailscope
+  class ApplicationController < ActionController::Base
+    protect_from_forgery with: :exception, unless: -> { Rails.configuration.try(:api_only) }
+
+    layout 'mailscope/application'
+
+    before_action :authenticate_mailscope!
+
+    private
+
+    # Mailscope is frequently mounted on staging. Give people a first-class
+    # hook instead of relying on them remembering a routing constraint.
+    def authenticate_mailscope!
+      guard = Mailscope.config.authenticate_with
+      return if guard.nil?
+
+      return if instance_exec(request, &guard)
+
+      head :unauthorized
+    end
+
+    def mailscope_config = Mailscope.config
+
+    def storage = Mailscope.storage
+
+    helper_method :mailscope_config
+  end
+end

data/app/controllers/mailscope/assets_controller.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Mailscope
+  # Serves the engine's own CSS/JS from disk with an immutable cache header.
+  # This keeps API-only apps working without an asset pipeline, and avoids
+  # letter_opener_web's habit of inlining ~277 KB of vendor code into every
+  # single HTML response.
+  class AssetsController < ApplicationController
+    skip_before_action :verify_authenticity_token, raise: false
+
+    ROOT = Mailscope::Engine.root.join('app', 'assets', 'mailscope')
+    TYPES = { '.css' => 'text/css', '.js' => 'text/javascript', '.svg' => 'image/svg+xml',
+              '.woff2' => 'font/woff2' }.freeze
+
+    def show
+      path = ROOT.join(File.basename(params[:file])).cleanpath
+      return head :not_found unless path.to_s.start_with?("#{ROOT}/") && path.file?
+
+      response.headers['Cache-Control'] = 'public, max-age=31536000, immutable'
+      send_file path, type: TYPES.fetch(path.extname, 'application/octet-stream'),
+                      disposition: 'inline'
+    end
+  end
+end