Merge branch 'release/1.1.6'

Release 1.1.6
Fix: Workaround for Safari source matching bug blocking event listener
2026-03-03 14:47:01 +00:00 · 2022-09-19 22:18:01 +12:00 · 2022-09-19 22:18:00 +12:00 · 2022-09-19 22:17:20 +12:00 · 2022-09-17 08:09:22 +12:00 · 2022-09-16 23:27:57 +12:00
23 changed files with 1128 additions and 736 deletions
--- a/.chglog/CHANGELOG.tpl.md
+++ b/.chglog/CHANGELOG.tpl.md
@@ -2,7 +2,6 @@

 Notable changes to Mailpit will be documented in this file.

-
 {{ if .Versions -}}
 {{ if .Unreleased.CommitGroups -}}
 ## [Unreleased]
@@ -38,11 +37,11 @@ Notable changes to Mailpit will be documented in this file.
 - {{ if .Scope }}**{{ .Scope }}:** {{ end }}{{ .Subject }}
 {{ end }}
 {{ end }}
-{{ end -}}

 {{- if .MergeCommits -}}
 ### Pull Requests
 {{ range .MergeCommits -}}
 - {{ .Header }}
 {{ end }}
+{{ end }}
 {{ end -}}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,62 @@

 Notable changes to Mailpit will be documented in this file.

+## 1.1.6
+
+### Fix
+- Workaround for Safari source matching bug blocking event listener
+
+### UI
+- Add documentation link (wiki)
+
+
+## 1.1.5
+
+### Build
+- Switch to esbuild-sass-plugin
+
+### UI
+- Support for inline images using filenames instead of cid
+
+
+## 1.1.4
+
+### Feature
+- Add --quiet flag to display only errors
+
+### Security
+- Add restrictive HTTP Content-Security-Policy
+
+### UI
+- Minor UI color change & unread count position adjustment
+- Add favicon unread message counter
+- Remove left & right borders (message list)
+
+
+## 1.1.3
+
+### Fix
+- Update message download link
+
+
+## 1.1.2
+
+### UI
+- Allow reverse proxy subdirectories
+
+
+## 1.1.1
+
+### UI
+- Attachment icons and image thumbnails
+
+
+## 1.1.0
+
+### UI
+- HTML source & highlighting
+- Add previous/next message links
+

 ## 1.0.0

@@ -66,6 +122,9 @@ This release includes a major backend storage change (SQLite) that will render a
 - Minor UI tweaks
 - Update pagination values when new mail arrives when not on first page

+### Pull Requests
+- Merge pull request [#6](https://github.com/axllent/mailpit/issues/6) from KaptinLin/develop
+

 ## 0.1.2

--- a/README.md
+++ b/README.md
@@ -19,7 +19,8 @@ Mailpit is inspired by [MailHog](#why-rewrite-mailhog), but much, much faster.

 - Runs entirely from a single binary, no installation required
 - SMTP server (default `0.0.0.0:1025`)
- Web UI to view emails (HTML format, text, source and MIME attachments, default `0.0.0.0:8025`)
+- Web UI to view emails (formatted HTML, highlighted HTML source, text, raw source and MIME attachments including image thumbnails)
+- Advanced mail search ([see wiki](https://github.com/axllent/mailpit/wiki/Mail-search))
 - Real-time web UI updates using web sockets for new mail
 - Optional browser notifications for new mail (HTTPS only)
 - Configurable automatic email pruning (default keeps the most recent 500 emails)
@@ -34,10 +35,18 @@ Mailpit is inspired by [MailHog](#why-rewrite-mailhog), but much, much faster.

 ## Installation

-Download a pre-built binary in the [releases](https://github.com/axllent/mailpit/releases/latest). The `mailpit` can be placed in your `$PATH`, or simply run as `./mailpit`. See `mailpit -h` for options, or see [the wiki](https://github.com/axllent/mailpit/wiki/Runtime-options) for additional information.
+Linux & Mac users can install it directly to `/usr/local/bin/mailpit` with:
+
+```bash
+sudo bash < <(curl -sL https://raw.githubusercontent.com/axllent/mailpit/develop/install.sh)
+```
+
+Or download a pre-built binary in the [releases](https://github.com/axllent/mailpit/releases/latest). The `mailpit` can be placed in your `$PATH`, or simply run as `./mailpit`. See `mailpit -h` for options, or see [the wiki](https://github.com/axllent/mailpit/wiki/Runtime-options) for additional information.

 To build Mailpit from source see [building from source](https://github.com/axllent/mailpit/wiki/Building-from-source).

+The Mailpit web UI listens by default on `http://0.0.0.0:8025`, and the SMTP port on `0.0.0.0:1025`.
+

 ### Configuring sendmail

@@ -59,6 +68,6 @@ You can build a Mailpit-specific sendmail binary from source (see [building from

 I had been using MailHog for a few years to intercept and test emails generated from several projects. MailHog has a number of severe performance issues, many of the modules are horribly out of date, and other than a few accepted MRs, it is not actively developed.

-Initially I started trying to upgrade a fork of MailHog (both the UI as well as the HTTP server & API), but soon discovered that it is (with all due respect) very poorly designed. It is over-engineered (split over 9 separate projects), has too many unnecessary features for my purpose, and performs exceptionally poorly when dealing with large lumbers of emails or processing any email with an attachment (a single email with a 3MB attachment can take over a minute). The API transmits a lot of duplicate and unnecessary data on every message request for all web calls, and there is no HTTP compression.
+Initially I started trying to upgrade a fork of MailHog (both the UI as well as the HTTP server & API), but soon discovered that it is (with all due respect) very poorly designed. It is over-engineered (split over 9 separate projects) and has too many unnecessary features for my purpose. It performs exceptionally poorly when dealing with large amounts of emails or processing any email with an attachment (a single email with a 3MB attachment can take over a minute to ingest). The API also transmits a lot of duplicate and unnecessary data on every message request for all web calls, and there is no HTTP compression.

 In order to improve it I felt it needed to be completely rewritten, and so Mailpit was born.
--- a/cmd/root.go
+++ b/cmd/root.go
@@ -136,6 +136,7 @@ func init() {
 	rootCmd.Flags().StringVar(&config.SMTPSSLCert, "smtp-ssl-cert", config.SMTPSSLCert, "SSL certificate for SMTP - requires smtp-ssl-key")
 	rootCmd.Flags().StringVar(&config.SMTPSSLKey, "smtp-ssl-key", config.SMTPSSLKey, "SSL key for SMTP - requires smtp-ssl-cert")

+	rootCmd.Flags().BoolVarP(&config.QuietLogging, "quiet", "q", false, "Quiet logging (errors only)")
 	rootCmd.Flags().BoolVarP(&config.VerboseLogging, "verbose", "v", false, "Verbose logging")

 	// deprecated 2022/08/06
--- a/config/config.go
+++ b/config/config.go
@@ -26,6 +26,9 @@ var (
 	// VerboseLogging for console output
 	VerboseLogging = false

+	// QuietLogging for console output (errors only)
+	QuietLogging = false
+
 	// NoLogging for tests
 	NoLogging = false

--- a/data/message.go
+++ b/data/message.go
@@ -1,3 +1,4 @@
+// Package data contains the message & mailbox structs
 package data

 import (
@@ -19,6 +20,7 @@ type Message struct {
 	Date        time.Time
 	Text        string
 	HTML        string
+	HTMLSource  string
 	Size        int
 	Inline      []Attachment
 	Attachments []Attachment
--- a/esbuild.config.js
+++ b/esbuild.config.js
@@ -1,6 +1,6 @@
 const { build } = require('esbuild')
 const pluginVue = require('esbuild-plugin-vue-next')
-const sassPlugin = require("esbuild-plugin-sass");
+const { sassPlugin } = require('esbuild-sass-plugin');

 const doWatch = process.env.WATCH == 'true' ? true : false;
 const doMinify = process.env.MINIFY == 'true' ? true : false;
--- a/go.mod
+++ b/go.mod
@@ -5,6 +5,7 @@ go 1.18
 require (
 	github.com/GuiaBolso/darwin v0.0.0-20191218124601-fd6d2aa3d244
 	github.com/axllent/semver v0.0.1
+	github.com/disintegration/imaging v1.6.2
 	github.com/gorilla/mux v1.8.0
 	github.com/gorilla/websocket v1.5.0
 	github.com/jhillyerd/enmime v0.10.0
@@ -44,6 +45,7 @@ require (
 	github.com/stretchr/testify v1.7.2 // indirect
 	github.com/valyala/bytebufferpool v1.0.0 // indirect
 	golang.org/x/crypto v0.0.0-20220826181053-bd7e27e6170d // indirect
+	golang.org/x/image v0.0.0-20191009234506-e7c1f5e7dbb8 // indirect
 	golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4 // indirect
 	golang.org/x/net v0.0.0-20220826154423-83b083e8dc8b // indirect
 	golang.org/x/sys v0.0.0-20220825204002-c680a09ffe64 // indirect
--- a/go.sum
+++ b/go.sum
@@ -33,6 +33,8 @@ github.com/cznic/zappy v0.0.0-20160723133515-2533cb5b45cc/go.mod h1:Y1SNZ4dRUOKX
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/disintegration/imaging v1.6.2 h1:w1LecBlG2Lnp8B3jk5zSuNqd7b4DXhcjwek1ei82L+c=
+github.com/disintegration/imaging v1.6.2/go.mod h1:44/5580QXChDfwIclfc/PCwrr44amcmDAg8hxG0Ewe4=
 github.com/dustin/go-humanize v1.0.0 h1:VSnTsYCnlFHaM2/igO1h6X3HA71jcobQuxemgkq4zYo=
 github.com/dustin/go-humanize v1.0.0/go.mod h1:HtrtbFcZ19U5GC7JDqmcUSB87Iq5E25KnS6fMYU6eOk=
 github.com/edsrzf/mmap-go v0.0.0-20170320065105-0bce6a688712 h1:aaQcKT9WumO6JEJcRyTqFVq4XUZiUcKR2/GI31TOcz8=
@@ -136,6 +138,8 @@ golang.org/x/crypto v0.0.0-20191011191535-87dc89f01550/go.mod h1:yigFU9vqHzYiE8U
 golang.org/x/crypto v0.0.0-20200622213623-75b288015ac9/go.mod h1:LzIPMQfyMNhhGPhUkYOs5KpL4U8rLKemX1yGLhDgUto=
 golang.org/x/crypto v0.0.0-20220826181053-bd7e27e6170d h1:3qF+Z8Hkrw9sOhrFHti9TlB1Hkac1x+DNRkv0XQiFjo=
 golang.org/x/crypto v0.0.0-20220826181053-bd7e27e6170d/go.mod h1:IxCIyHEi3zRg3s0A5j5BB6A9Jmi73HwBIUl50j+osU4=
+golang.org/x/image v0.0.0-20191009234506-e7c1f5e7dbb8 h1:hVwzHzIUGRjiF7EcUjqNxk3NCfkPxbDKRdnNE1Rpg0U=
+golang.org/x/image v0.0.0-20191009234506-e7c1f5e7dbb8/go.mod h1:FeLwcggjj3mMvU+oOTbSwawSJRM1uh48EjtB4UJZlP0=
 golang.org/x/mod v0.3.0/go.mod h1:s0Qsj1ACt9ePp/hMypM3fl4fZqREWJwdYDEqhRiZZUA=
 golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4 h1:6zppjxzCulZykYSLyVDYbneBfbaBIQPYMevg0bEwv2s=
 golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
--- a/install.sh
+++ b/install.sh
@@ -0,0 +1,98 @@
+#!/usr/bin/env bash
+
+GH_REPO="axllent/mailpit"
+TIMEOUT=90
+
+set -e
+
+VERSION=$(curl --silent --location --max-time "${TIMEOUT}" "https://api.github.com/repos/${GH_REPO}/releases/latest" | grep '"tag_name":' | sed -E 's/.*"([^"]+)".*/\1/')
+if [ $? -ne 0 ]; then
+    echo -ne "\nThere was an error trying to check what is the latest version of ssbak.\nPlease try again later.\n"
+    exit 1
+fi
+
+# detect the platform
+OS="$(uname)"
+case $OS in
+Linux)
+    OS='linux'
+    ;;
+FreeBSD)
+    OS='freebsd'
+    echo 'OS not supported'
+    exit 2
+    ;;
+NetBSD)
+    OS='netbsd'
+    echo 'OS not supported'
+    exit 2
+    ;;
+OpenBSD)
+    OS='openbsd'
+    echo 'OS not supported'
+    exit 2
+    ;;
+Darwin)
+    OS='darwin'
+    ;;
+SunOS)
+    OS='solaris'
+    echo 'OS not supported'
+    exit 2
+    ;;
+*)
+    echo 'OS not supported'
+    exit 2
+    ;;
+esac
+
+# detect the arch
+OS_type="$(uname -m)"
+case "$OS_type" in
+x86_64 | amd64)
+    OS_type='amd64'
+    ;;
+i?86 | x86)
+    OS_type='386'
+    ;;
+aarch64 | arm64)
+    OS_type='arm64'
+    ;;
+*)
+    echo 'OS type not supported'
+    exit 2
+    ;;
+esac
+
+GH_REPO_BIN="mailpit-${OS}-${OS_type}.tar.gz"
+
+#create tmp directory and move to it with macOS compatibility fallback
+tmp_dir=$(mktemp -d 2>/dev/null || mktemp -d -t 'mailpit-install.XXXXXXXXXX')
+cd "$tmp_dir"
+
+echo "Downloading Mailpit $VERSION"
+LINK="https://github.com/${GH_REPO}/releases/download/${VERSION}/${GH_REPO_BIN}"
+
+curl --silent --location --max-time "${TIMEOUT}" "${LINK}" | tar zxf - || {
+    echo "Error downloading"
+    exit 2
+}
+
+mkdir -p /usr/local/bin || exit 2
+cp mailpit /usr/local/bin/ || exit 2
+chmod 755 /usr/local/bin/mailpit || exit 2
+case "$OS" in
+'linux')
+    chown root:root /usr/local/bin/mailpit || exit 2
+    ;;
+'freebsd' | 'openbsd' | 'netbsd' | 'darwin')
+    chown root:wheel /usr/local/bin/mailpit || exit 2
+    ;;
+*)
+    echo 'OS not supported'
+    exit 2
+    ;;
+esac
+
+rm -rf "$tmp_dir"
+echo "Installed successfully to /usr/local/bin/mailpit"
--- a/logger/logger.go
+++ b/logger/logger.go
@@ -19,9 +19,13 @@ func Log() *logrus.Logger {
 		log = logrus.New()
 		log.SetLevel(logrus.InfoLevel)
 		if config.VerboseLogging {
+			// verbose logging (debug)
 			log.SetLevel(logrus.DebugLevel)
-		}
-		if config.NoLogging {
+		} else if config.QuietLogging {
+			// show errors only
+			log.SetLevel(logrus.ErrorLevel)
+		} else if config.NoLogging {
+			// disable all logging (tests)
 			log.SetLevel(logrus.PanicLevel)
 		}

--- a/package-lock.json
+++ b/package-lock.json
@@ -12,15 +12,16 @@
        "bootstrap": "^5.2.0",
        "bootstrap-icons": "^1.9.1",
        "moment": "^2.29.4",
-        "remove": "^0.1.5",
+        "prismjs": "^1.29.0",
+        "tinycon": "^0.6.8",
        "vue": "^3.2.13"
      },
      "devDependencies": {
        "@popperjs/core": "^2.11.5",
        "@vue/compiler-sfc": "^3.2.37",
        "esbuild": "^0.14.50",
-        "esbuild-plugin-sass": "^1.0.1",
-        "esbuild-plugin-vue-next": "^0.1.4"
+        "esbuild-plugin-vue-next": "^0.1.4",
+        "esbuild-sass-plugin": "^2.3.2"
      }
    },
    "node_modules/@babel/parser": {
@@ -188,12 +189,6 @@
        "form-data": "^4.0.0"
      }
    },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
-    },
    "node_modules/binary-extensions": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -226,16 +221,6 @@
      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.9.1.tgz",
      "integrity": "sha512-d4ZkO30MIkAhQ2nNRJqKXJVEQorALGbLWTuRxyCTJF96lRIV6imcgMehWGJUiJMJhglN0o2tqLIeDnMdiQEE9g=="
    },
-    "node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
    "node_modules/braces": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
@@ -248,17 +233,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/chainsaw": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.0.9.tgz",
-      "integrity": "sha512-nG8PYH+/4xB+8zkV4G844EtfvZ5tTiLFoX3dZ4nhF4t3OCKIb9UvaFyNmeZO2zOSmRWzBoTD+napN6hiL+EgcA==",
-      "dependencies": {
-        "traverse": ">=0.3.0 <0.4"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
    "node_modules/chokidar": {
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -297,12 +271,6 @@
        "node": ">= 0.8"
      }
    },
-    "node_modules/concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
-    },
    "node_modules/convert-source-map": {
      "version": "1.8.0",
      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
@@ -312,19 +280,6 @@
        "safe-buffer": "~5.1.1"
      }
    },
-    "node_modules/css-tree": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
-      "dev": true,
-      "dependencies": {
-        "mdn-data": "2.0.14",
-        "source-map": "^0.6.1"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
    "node_modules/csstype": {
      "version": "2.6.20",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
@@ -630,21 +585,6 @@
        "node": ">=12"
      }
    },
-    "node_modules/esbuild-plugin-sass": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/esbuild-plugin-sass/-/esbuild-plugin-sass-1.0.1.tgz",
-      "integrity": "sha512-YFxjzD9Z1vz92QCJcAmCO15WVCUiOobw9ypdVeMsW+xa6S+zqryLUIh8d3fe/UkRHRO5PODZz/3xDAQuEXZwmQ==",
-      "dev": true,
-      "dependencies": {
-        "css-tree": "1.1.3",
-        "fs-extra": "10.0.0",
-        "sass": "1.47.0",
-        "tmp": "0.2.1"
-      },
-      "peerDependencies": {
-        "esbuild": ">=0.11.14"
-      }
-    },
    "node_modules/esbuild-plugin-vue-next": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/esbuild-plugin-vue-next/-/esbuild-plugin-vue-next-0.1.4.tgz",
@@ -658,6 +598,34 @@
        "@vue/compiler-sfc": ">=3.0.0"
      }
    },
+    "node_modules/esbuild-sass-plugin": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/esbuild-sass-plugin/-/esbuild-sass-plugin-2.3.2.tgz",
+      "integrity": "sha512-bNIV241S0vpy+F9U9oMbmlAD+GDzKLJp2+Z9rSRP8Rq8Nwmxh9roI0s3iB9d6Eii1A5WYgCK7HZeWPokw2rhSw==",
+      "dev": true,
+      "dependencies": {
+        "esbuild": "^0.14.13",
+        "resolve": "^1.22.1",
+        "sass": "^1.49.0"
+      }
+    },
+    "node_modules/esbuild-sass-plugin/node_modules/sass": {
+      "version": "1.54.9",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.9.tgz",
+      "integrity": "sha512-xb1hjASzEH+0L0WI9oFjqhRi51t/gagWnxLiwUNMltA0Ab6jIDkAacgKiGYKM9Jhy109osM7woEEai6SXeJo5Q==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
    "node_modules/esbuild-sunos-64": {
      "version": "0.14.54",
      "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz",
@@ -771,26 +739,6 @@
        "node": ">= 6"
      }
    },
-    "node_modules/fs-extra": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz",
-      "integrity": "sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true
-    },
    "node_modules/fsevents": {
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -805,25 +753,11 @@
        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
      }
    },
-    "node_modules/glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dev": true,
-      "dependencies": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      },
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
+    "node_modules/function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
    },
    "node_modules/glob-parent": {
      "version": "5.1.2",
@@ -837,11 +771,17 @@
        "node": ">= 6"
      }
    },
-    "node_modules/graceful-fs": {
-      "version": "4.2.10",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-      "dev": true
+    "node_modules/has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4.0"
+      }
    },
    "node_modules/hash-sum": {
      "version": "2.0.0",
@@ -849,39 +789,12 @@
      "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
      "dev": true
    },
-    "node_modules/hashish": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/hashish/-/hashish-0.0.4.tgz",
-      "integrity": "sha512-xyD4XgslstNAs72ENaoFvgMwtv8xhiDtC2AtzCG+8yF7W/Knxxm9BX+e2s25mm+HxMKh0rBmXVOEGF3zNImXvA==",
-      "dependencies": {
-        "traverse": ">=0.2.4"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
    "node_modules/immutable": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
      "dev": true
    },
-    "node_modules/inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dev": true,
-      "dependencies": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
-    "node_modules/inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
-    },
    "node_modules/is-binary-path": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -894,6 +807,18 @@
        "node": ">=8"
      }
    },
+    "node_modules/is-core-module": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz",
+      "integrity": "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==",
+      "dev": true,
+      "dependencies": {
+        "has": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -924,18 +849,6 @@
        "node": ">=0.12.0"
      }
    },
-    "node_modules/jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
-      "dependencies": {
-        "universalify": "^2.0.0"
-      },
-      "optionalDependencies": {
-        "graceful-fs": "^4.1.6"
-      }
-    },
    "node_modules/magic-string": {
      "version": "0.25.9",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -944,12 +857,6 @@
        "sourcemap-codec": "^1.4.8"
      }
    },
-    "node_modules/mdn-data": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
-      "dev": true
-    },
    "node_modules/mime-db": {
      "version": "1.52.0",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -969,18 +876,6 @@
        "node": ">= 0.6"
      }
    },
-    "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
    "node_modules/moment": {
      "version": "2.29.4",
      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
@@ -1009,23 +904,11 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
-      "dependencies": {
-        "wrappy": "1"
-      }
-    },
-    "node_modules/path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
    },
    "node_modules/picocolors": {
      "version": "1.0.0",
@@ -1067,6 +950,14 @@
        "node": "^10 || ^12 || >=14"
      }
    },
+    "node_modules/prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/readdirp": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -1079,27 +970,21 @@
        "node": ">=8.10.0"
      }
    },
-    "node_modules/remove": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/remove/-/remove-0.1.5.tgz",
-      "integrity": "sha512-AJMA9oWvJzdTjwIGwSQZsjGQiRx73YTmiOWmfCp1fpLa/D4n7jKcpoA+CZiVLJqKcEKUuh1Suq80c5wF+L/qVQ==",
-      "dependencies": {
-        "seq": ">= 0.3.5"
-      }
-    },
-    "node_modules/rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+    "node_modules/resolve": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
+      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
      "dev": true,
      "dependencies": {
-        "glob": "^7.1.3"
+        "is-core-module": "^2.9.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
      },
      "bin": {
-        "rimraf": "bin.js"
+        "resolve": "bin/resolve"
      },
      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "url": "https://github.com/sponsors/ljharb"
      }
    },
    "node_modules/safe-buffer": {
@@ -1108,35 +993,6 @@
      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
      "dev": true
    },
-    "node_modules/sass": {
-      "version": "1.47.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.47.0.tgz",
-      "integrity": "sha512-GtXwvwgD7/6MLUZPnlA5/8cdRgC9SzT5kAnnJMRmEZQFRE3J56Foswig4NyyyQGsnmNvg6EUM/FP0Pe9Y2zywQ==",
-      "dev": true,
-      "dependencies": {
-        "chokidar": ">=3.0.0 <4.0.0",
-        "immutable": "^4.0.0",
-        "source-map-js": ">=0.6.2 <2.0.0"
-      },
-      "bin": {
-        "sass": "sass.js"
-      },
-      "engines": {
-        "node": ">=8.9.0"
-      }
-    },
-    "node_modules/seq": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/seq/-/seq-0.3.5.tgz",
-      "integrity": "sha512-sisY2Ln1fj43KBkRtXkesnRHYNdswIkIibvNe/0UKm2GZxjMbqmccpiatoKr/k2qX5VKiLU8xm+tz/74LAho4g==",
-      "dependencies": {
-        "chainsaw": ">=0.0.7 <0.1",
-        "hashish": ">=0.0.2 <0.1"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
    "node_modules/source-map": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -1158,18 +1014,23 @@
      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
    },
-    "node_modules/tmp": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
-      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
      "dev": true,
-      "dependencies": {
-        "rimraf": "^3.0.0"
-      },
      "engines": {
-        "node": ">=8.17.0"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/tinycon": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/tinycon/-/tinycon-0.6.8.tgz",
+      "integrity": "sha512-bF8Lxm4JUXF6Cw0XlZdugJ44GV575OinZ0Pt8vQPr8ooNqd2yyNkoFdCHzmdpHlgoqfSLfcyk4HDP1EyllT+ug=="
+    },
    "node_modules/to-regex-range": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -1182,23 +1043,6 @@
        "node": ">=8.0"
      }
    },
-    "node_modules/traverse": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
-      "integrity": "sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ==",
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/universalify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-      "dev": true,
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
    "node_modules/vue": {
      "version": "3.2.38",
      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.38.tgz",
@@ -1210,12 +1054,6 @@
        "@vue/server-renderer": "3.2.38",
        "@vue/shared": "3.2.38"
      }
-    },
-    "node_modules/wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
    }
  },
  "dependencies": {
@@ -1359,12 +1197,6 @@
        "form-data": "^4.0.0"
      }
    },
-    "balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
-    },
    "binary-extensions": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -1382,16 +1214,6 @@
      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.9.1.tgz",
      "integrity": "sha512-d4ZkO30MIkAhQ2nNRJqKXJVEQorALGbLWTuRxyCTJF96lRIV6imcgMehWGJUiJMJhglN0o2tqLIeDnMdiQEE9g=="
    },
-    "brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "requires": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
    "braces": {
      "version": "3.0.2",
      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
@@ -1401,14 +1223,6 @@
        "fill-range": "^7.0.1"
      }
    },
-    "chainsaw": {
-      "version": "0.0.9",
-      "resolved": "https://registry.npmjs.org/chainsaw/-/chainsaw-0.0.9.tgz",
-      "integrity": "sha512-nG8PYH+/4xB+8zkV4G844EtfvZ5tTiLFoX3dZ4nhF4t3OCKIb9UvaFyNmeZO2zOSmRWzBoTD+napN6hiL+EgcA==",
-      "requires": {
-        "traverse": ">=0.3.0 <0.4"
-      }
-    },
    "chokidar": {
      "version": "3.5.3",
      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -1433,12 +1247,6 @@
        "delayed-stream": "~1.0.0"
      }
    },
-    "concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-      "dev": true
-    },
    "convert-source-map": {
      "version": "1.8.0",
      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz",
@@ -1448,16 +1256,6 @@
        "safe-buffer": "~5.1.1"
      }
    },
-    "css-tree": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
-      "integrity": "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==",
-      "dev": true,
-      "requires": {
-        "mdn-data": "2.0.14",
-        "source-map": "^0.6.1"
-      }
-    },
    "csstype": {
      "version": "2.6.20",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
@@ -1609,18 +1407,6 @@
      "dev": true,
      "optional": true
    },
-    "esbuild-plugin-sass": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/esbuild-plugin-sass/-/esbuild-plugin-sass-1.0.1.tgz",
-      "integrity": "sha512-YFxjzD9Z1vz92QCJcAmCO15WVCUiOobw9ypdVeMsW+xa6S+zqryLUIh8d3fe/UkRHRO5PODZz/3xDAQuEXZwmQ==",
-      "dev": true,
-      "requires": {
-        "css-tree": "1.1.3",
-        "fs-extra": "10.0.0",
-        "sass": "1.47.0",
-        "tmp": "0.2.1"
-      }
-    },
    "esbuild-plugin-vue-next": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/esbuild-plugin-vue-next/-/esbuild-plugin-vue-next-0.1.4.tgz",
@@ -1631,6 +1417,30 @@
        "hash-sum": "^2.0.0"
      }
    },
+    "esbuild-sass-plugin": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/esbuild-sass-plugin/-/esbuild-sass-plugin-2.3.2.tgz",
+      "integrity": "sha512-bNIV241S0vpy+F9U9oMbmlAD+GDzKLJp2+Z9rSRP8Rq8Nwmxh9roI0s3iB9d6Eii1A5WYgCK7HZeWPokw2rhSw==",
+      "dev": true,
+      "requires": {
+        "esbuild": "^0.14.13",
+        "resolve": "^1.22.1",
+        "sass": "^1.49.0"
+      },
+      "dependencies": {
+        "sass": {
+          "version": "1.54.9",
+          "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.9.tgz",
+          "integrity": "sha512-xb1hjASzEH+0L0WI9oFjqhRi51t/gagWnxLiwUNMltA0Ab6jIDkAacgKiGYKM9Jhy109osM7woEEai6SXeJo5Q==",
+          "dev": true,
+          "requires": {
+            "chokidar": ">=3.0.0 <4.0.0",
+            "immutable": "^4.0.0",
+            "source-map-js": ">=0.6.2 <2.0.0"
+          }
+        }
+      }
+    },
    "esbuild-sunos-64": {
      "version": "0.14.54",
      "resolved": "https://registry.npmjs.org/esbuild-sunos-64/-/esbuild-sunos-64-0.14.54.tgz",
@@ -1688,23 +1498,6 @@
        "mime-types": "^2.1.12"
      }
    },
-    "fs-extra": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz",
-      "integrity": "sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      }
-    },
-    "fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-      "dev": true
-    },
    "fsevents": {
      "version": "2.3.2",
      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -1712,19 +1505,11 @@
      "dev": true,
      "optional": true
    },
-    "glob": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
-      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
-      "dev": true,
-      "requires": {
-        "fs.realpath": "^1.0.0",
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "^3.1.1",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      }
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
    },
    "glob-parent": {
      "version": "5.1.2",
@@ -1735,11 +1520,14 @@
        "is-glob": "^4.0.1"
      }
    },
-    "graceful-fs": {
-      "version": "4.2.10",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-      "dev": true
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
    },
    "hash-sum": {
      "version": "2.0.0",
@@ -1747,36 +1535,12 @@
      "integrity": "sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==",
      "dev": true
    },
-    "hashish": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/hashish/-/hashish-0.0.4.tgz",
-      "integrity": "sha512-xyD4XgslstNAs72ENaoFvgMwtv8xhiDtC2AtzCG+8yF7W/Knxxm9BX+e2s25mm+HxMKh0rBmXVOEGF3zNImXvA==",
-      "requires": {
-        "traverse": ">=0.2.4"
-      }
-    },
    "immutable": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
      "dev": true
    },
-    "inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
-      "dev": true,
-      "requires": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
-    "inherits": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
-    },
    "is-binary-path": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1786,6 +1550,15 @@
        "binary-extensions": "^2.0.0"
      }
    },
+    "is-core-module": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz",
+      "integrity": "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
    "is-extglob": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -1807,16 +1580,6 @@
      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
      "dev": true
    },
-    "jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.6",
-        "universalify": "^2.0.0"
-      }
-    },
    "magic-string": {
      "version": "0.25.9",
      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
@@ -1825,12 +1588,6 @@
        "sourcemap-codec": "^1.4.8"
      }
    },
-    "mdn-data": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
-      "integrity": "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==",
-      "dev": true
-    },
    "mime-db": {
      "version": "1.52.0",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -1844,15 +1601,6 @@
        "mime-db": "1.52.0"
      }
    },
-    "minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "requires": {
-        "brace-expansion": "^1.1.7"
-      }
-    },
    "moment": {
      "version": "2.29.4",
      "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
@@ -1869,19 +1617,10 @@
      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
      "dev": true
    },
-    "once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
-      "dev": true,
-      "requires": {
-        "wrappy": "1"
-      }
-    },
-    "path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+    "path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
      "dev": true
    },
    "picocolors": {
@@ -1905,6 +1644,11 @@
        "source-map-js": "^1.0.2"
      }
    },
+    "prismjs": {
+      "version": "1.29.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+      "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q=="
+    },
    "readdirp": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -1914,21 +1658,15 @@
        "picomatch": "^2.2.1"
      }
    },
-    "remove": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/remove/-/remove-0.1.5.tgz",
-      "integrity": "sha512-AJMA9oWvJzdTjwIGwSQZsjGQiRx73YTmiOWmfCp1fpLa/D4n7jKcpoA+CZiVLJqKcEKUuh1Suq80c5wF+L/qVQ==",
-      "requires": {
-        "seq": ">= 0.3.5"
-      }
-    },
-    "rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+    "resolve": {
+      "version": "1.22.1",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
+      "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
      "dev": true,
      "requires": {
-        "glob": "^7.1.3"
+        "is-core-module": "^2.9.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
      }
    },
    "safe-buffer": {
@@ -1937,26 +1675,6 @@
      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
      "dev": true
    },
-    "sass": {
-      "version": "1.47.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.47.0.tgz",
-      "integrity": "sha512-GtXwvwgD7/6MLUZPnlA5/8cdRgC9SzT5kAnnJMRmEZQFRE3J56Foswig4NyyyQGsnmNvg6EUM/FP0Pe9Y2zywQ==",
-      "dev": true,
-      "requires": {
-        "chokidar": ">=3.0.0 <4.0.0",
-        "immutable": "^4.0.0",
-        "source-map-js": ">=0.6.2 <2.0.0"
-      }
-    },
-    "seq": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/seq/-/seq-0.3.5.tgz",
-      "integrity": "sha512-sisY2Ln1fj43KBkRtXkesnRHYNdswIkIibvNe/0UKm2GZxjMbqmccpiatoKr/k2qX5VKiLU8xm+tz/74LAho4g==",
-      "requires": {
-        "chainsaw": ">=0.0.7 <0.1",
-        "hashish": ">=0.0.2 <0.1"
-      }
-    },
    "source-map": {
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -1972,14 +1690,16 @@
      "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
    },
-    "tmp": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
-      "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
-      "dev": true,
-      "requires": {
-        "rimraf": "^3.0.0"
-      }
+    "supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true
+    },
+    "tinycon": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/tinycon/-/tinycon-0.6.8.tgz",
+      "integrity": "sha512-bF8Lxm4JUXF6Cw0XlZdugJ44GV575OinZ0Pt8vQPr8ooNqd2yyNkoFdCHzmdpHlgoqfSLfcyk4HDP1EyllT+ug=="
    },
    "to-regex-range": {
      "version": "5.0.1",
@@ -1990,17 +1710,6 @@
        "is-number": "^7.0.0"
      }
    },
-    "traverse": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.3.9.tgz",
-      "integrity": "sha512-iawgk0hLP3SxGKDfnDJf8wTz4p2qImnyihM5Hh/sGvQ3K37dPi/w8sRhdNIxYA1TwFwc5mDhIJq+O0RsvXBKdQ=="
-    },
-    "universalify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-      "dev": true
-    },
    "vue": {
      "version": "3.2.38",
      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.38.tgz",
@@ -2012,12 +1721,6 @@
        "@vue/server-renderer": "3.2.38",
        "@vue/shared": "3.2.38"
      }
-    },
-    "wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-      "dev": true
    }
  }
 }
--- a/package.json
+++ b/package.json
@@ -12,14 +12,15 @@
    "bootstrap": "^5.2.0",
    "bootstrap-icons": "^1.9.1",
    "moment": "^2.29.4",
-    "remove": "^0.1.5",
+    "prismjs": "^1.29.0",
+    "tinycon": "^0.6.8",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@popperjs/core": "^2.11.5",
    "@vue/compiler-sfc": "^3.2.37",
    "esbuild": "^0.14.50",
-    "esbuild-plugin-sass": "^1.0.1",
-    "esbuild-plugin-vue-next": "^0.1.4"
+    "esbuild-plugin-vue-next": "^0.1.4",
+    "esbuild-sass-plugin": "^2.3.2"
  }
 }
--- a/server/api.go
+++ b/server/api.go
@@ -90,7 +90,7 @@ func apiOpenMessage(w http.ResponseWriter, r *http.Request) {

 	msg, err := storage.GetMessage(id)
 	if err != nil {
-		httpError(w, err.Error())
+		httpError(w, "Message not found")
 		return
 	}

@@ -121,8 +121,8 @@ func apiDownloadAttachment(w http.ResponseWriter, r *http.Request) {
 	_, _ = w.Write(a.Content)
 }

-// View the full email source as plain text
-func apiDownloadSource(w http.ResponseWriter, r *http.Request) {
+// Download the full email source as plain text
+func apiDownloadRaw(w http.ResponseWriter, r *http.Request) {
 	vars := mux.Vars(r)

 	id := vars["id"]
--- a/server/server.go
+++ b/server/server.go
@@ -21,6 +21,8 @@ import (
 //go:embed ui
 var embeddedFS embed.FS

+var contentSecurityPolicy = "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; frame-src 'self'; img-src * data: blob:; font-src 'self' data:; media-src 'self'; connect-src 'self' ws: wss:; object-src 'none'; base-uri 'self';"
+
 // Listen will start the httpd
 func Listen() {
 	serverRoot, err := fs.Sub(embeddedFS, "ui")
@@ -43,8 +45,9 @@ func Listen() {
 	r.HandleFunc("/api/read", apiMarkAllRead).Methods("GET")
 	r.HandleFunc("/api/read", apiMarkSelectedRead).Methods("POST")
 	r.HandleFunc("/api/unread", apiMarkSelectedUnread).Methods("POST")
-	r.HandleFunc("/api/{id}/source", middleWareFunc(apiDownloadSource)).Methods("GET")
+	r.HandleFunc("/api/{id}/raw", middleWareFunc(apiDownloadRaw)).Methods("GET")
 	r.HandleFunc("/api/{id}/part/{partID}", middleWareFunc(apiDownloadAttachment)).Methods("GET")
+	r.HandleFunc("/api/{id}/part/{partID}/thumb", middleWareFunc(apiAttachmentThumbnail)).Methods("GET")
 	r.HandleFunc("/api/{id}/delete", middleWareFunc(apiDeleteOne)).Methods("GET")
 	r.HandleFunc("/api/{id}/unread", middleWareFunc(apiUnreadOne)).Methods("GET")
 	r.HandleFunc("/api/{id}", middleWareFunc(apiOpenMessage)).Methods("GET")
@@ -84,6 +87,9 @@ func (w gzipResponseWriter) Write(b []byte) (int, error) {
 // and gzip compression.
 func middleWareFunc(fn http.HandlerFunc) http.HandlerFunc {
 	return func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Referrer-Policy", "no-referrer")
+		w.Header().Set("Content-Security-Policy", contentSecurityPolicy)
+
 		if config.UIAuthFile != "" {
 			user, pass, ok := r.BasicAuth()

@@ -114,6 +120,8 @@ func middleWareFunc(fn http.HandlerFunc) http.HandlerFunc {
 // and gzip compression
 func middlewareHandler(h http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Referrer-Policy", "no-referrer")
+		w.Header().Set("Content-Security-Policy", contentSecurityPolicy)

 		if config.UIAuthFile != "" {
 			user, pass, ok := r.BasicAuth()
@@ -142,6 +150,8 @@ func middlewareHandler(h http.Handler) http.Handler {

 // FourOFour returns a basic 404 message
 func fourOFour(w http.ResponseWriter) {
+	w.Header().Set("Referrer-Policy", "no-referrer")
+	w.Header().Set("Content-Security-Policy", contentSecurityPolicy)
 	w.WriteHeader(http.StatusNotFound)
 	w.Header().Set("Content-Type", "text/plain")
 	fmt.Fprint(w, "404 page not found")
@@ -149,6 +159,8 @@ func fourOFour(w http.ResponseWriter) {

 // HTTPError returns a basic error message (400 response)
 func httpError(w http.ResponseWriter, msg string) {
+	w.Header().Set("Referrer-Policy", "no-referrer")
+	w.Header().Set("Content-Security-Policy", contentSecurityPolicy)
 	w.WriteHeader(http.StatusBadRequest)
 	w.Header().Set("Content-Type", "text/plain")
 	fmt.Fprint(w, msg)
--- a/server/thumbnails.go
+++ b/server/thumbnails.go
@@ -0,0 +1,107 @@
+package server
+
+import (
+	"bufio"
+	"bytes"
+	"image"
+	"image/color"
+	"image/draw"
+	"image/jpeg"
+	"net/http"
+	"strings"
+
+	"github.com/axllent/mailpit/logger"
+	"github.com/axllent/mailpit/storage"
+	"github.com/disintegration/imaging"
+	"github.com/gorilla/mux"
+	"github.com/jhillyerd/enmime"
+)
+
+var (
+	thumbWidth  = 180
+	thumbHeight = 120
+)
+
+// Attachment thumbnail (images only)
+func apiAttachmentThumbnail(w http.ResponseWriter, r *http.Request) {
+	vars := mux.Vars(r)
+
+	id := vars["id"]
+	partID := vars["partID"]
+
+	a, err := storage.GetAttachmentPart(id, partID)
+	if err != nil {
+		httpError(w, err.Error())
+		return
+	}
+
+	fileName := a.FileName
+	if fileName == "" {
+		fileName = a.ContentID
+	}
+
+	if !strings.HasPrefix(a.ContentType, "image/") {
+		blankImage(a, w)
+		return
+	}
+
+	buf := bytes.NewBuffer(a.Content)
+
+	img, err := imaging.Decode(buf)
+	if err != nil {
+		// it's not an image, return default
+		logger.Log().Warning(err)
+		blankImage(a, w)
+		return
+	}
+
+	var b bytes.Buffer
+	foo := bufio.NewWriter(&b)
+
+	var dstImageFill *image.NRGBA
+
+	if img.Bounds().Dx() < thumbWidth || img.Bounds().Dy() < thumbHeight {
+		dstImageFill = imaging.Fit(img, thumbWidth, thumbHeight, imaging.Lanczos)
+	} else {
+		dstImageFill = imaging.Fill(img, thumbWidth, thumbHeight, imaging.Center, imaging.Lanczos)
+	}
+	// create white image and paste image over the top
+	// preventing black backgrounds for transparent GIF/PNG images
+	dst := imaging.New(thumbWidth, thumbHeight, color.White)
+	// paste the original over the top
+	dst = imaging.OverlayCenter(dst, dstImageFill, 1.0)
+
+	if err := jpeg.Encode(foo, dst, &jpeg.Options{Quality: 70}); err != nil {
+		logger.Log().Warning(err)
+		blankImage(a, w)
+		return
+	}
+
+	w.Header().Add("Content-Type", "image/jpeg")
+	w.Header().Set("Content-Disposition", "filename=\""+fileName+"\"")
+	_, _ = w.Write(b.Bytes())
+}
+
+// Return a blank image instead of an error when file or image not supported
+func blankImage(a *enmime.Part, w http.ResponseWriter) {
+	rect := image.Rect(0, 0, thumbWidth, thumbHeight)
+	img := image.NewRGBA(rect)
+	background := color.RGBA{255, 255, 255, 255}
+	draw.Draw(img, img.Bounds(), &image.Uniform{background}, image.ZP, draw.Src)
+	var b bytes.Buffer
+	foo := bufio.NewWriter(&b)
+	dstImageFill := imaging.Fill(img, thumbWidth, thumbHeight, imaging.Center, imaging.Lanczos)
+
+	if err := jpeg.Encode(foo, dstImageFill, &jpeg.Options{Quality: 70}); err != nil {
+		logger.Log().Warning(err)
+	}
+
+	fileName := a.FileName
+	if fileName == "" {
+		fileName = a.ContentID
+	}
+
+	w.Header().Add("Content-Type", "image/jpeg")
+	w.Header().Set("Content-Disposition", "filename=\""+fileName+"\"")
+	_, _ = w.Write(b.Bytes())
+}
--- a/server/ui-src/App.vue
+++ b/server/ui-src/App.vue
@@ -1,7 +1,8 @@
 <script>
-import commonMixins from './mixins.js'
+import commonMixins from './mixins.js';
 import Message from './templates/Message.vue';
-import moment from 'moment'
+import moment from 'moment';
+import Tinycon from 'tinycon';

 export default {
 	mixins: [commonMixins],
@@ -22,9 +23,12 @@ export default {
 			isConnected: false,
 			scrollInPlace: false,
 			message: false,
+			messagePrev: false,
+			messageNext: false,
 			notificationsSupported: false,
 			notificationsEnabled: false,
-			selected: []
+			selected: [],
+			tcStatus: 0
 		}
 	},
 	watch: {
@@ -34,6 +38,17 @@ export default {
 			} else {
 				this.message = false;
 			}
+		},
+		unread(v, old) {
+			if (v == this.tcStatus) {
+				return;
+			}
+			this.tcStatus = v;
+			if (v == 0) {
+				Tinycon.reset();
+			} else {
+				Tinycon.setBubble(v);
+			}
 		}
 	},
 	computed: {
@@ -54,6 +69,12 @@ export default {
 			&& ("Notification" in window && Notification.permission !== "denied");
 		this.notificationsEnabled = this.notificationsSupported && Notification.permission == "granted";

+		Tinycon.setOptions({
+			height: 11,
+			background: '#dd0000',
+			fallback: false
+		});
+
 		this.connect();
 		this.loadMessages();
 	},
@@ -153,6 +174,13 @@ export default {
 								window.location.origin+'/api/'+d.ID+'/part/'+a.PartID
 							);
 						}
+						if (a.FileName.match(/^[a-zA-Z0-9\_\-\.]+$/)) {
+							// some old email clients use the filename
+							d.HTML = d.HTML.replace(
+								new RegExp('src=(\'|")'+a.FileName+'(\'|")', 'g'), 
+								'src="'+window.location.origin+'/api/'+d.ID+'/part/'+a.PartID+'"'
+							);
+						}
 					}
 				}
 				// replace inline images
@@ -165,10 +193,31 @@ export default {
 								window.location.origin+'/api/'+d.ID+'/part/'+a.PartID
 							);
 						}
+						if (a.FileName.match(/^[a-zA-Z0-9\_\-\.]+$/)) {
+							// some old email clients use the filename
+							d.HTML = d.HTML.replace(
+								new RegExp('src=(\'|")'+a.FileName+'(\'|")', 'g'), 
+								'src="'+window.location.origin+'/api/'+d.ID+'/part/'+a.PartID+'"'
+							);
+						}
 					}
 				}

 				self.message = d;
+				// generate the prev/next links based on current message list
+				self.messagePrev = false;
+				self.messageNext = false;
+				let found = false;
+				for (let i in self.items) {
+					if (self.items[i].ID == self.message.ID) {
+						found = true;
+					} else if (found && !self.messageNext) {
+						self.messageNext = self.items[i].ID;
+						break;
+					} else {
+						self.messagePrev = self.items[i].ID;
+					}
+				}
 			});
 		},

@@ -176,6 +225,7 @@ export default {
 			let self = this;
 			let uri = 'api/delete'
 			self.get(uri, false, function(response) {
+				window.location.hash = "";
 				self.reloadMessages();
 			});
 		},
@@ -190,7 +240,6 @@ export default {
 				window.location.hash = "";
 				self.scrollInPlace = true;
 				self.loadMessages();
-
 			});
 		},

@@ -259,7 +308,9 @@ export default {
 		// websocket connect
        connect: function () {
            let wsproto = location.protocol == 'https:' ? 'wss' : 'ws';
-            let ws = new WebSocket(wsproto + "://" + document.location.host + "/api/events");
+            let ws = new WebSocket(
+				wsproto + "://" + document.location.host + document.location.pathname + "api/events"
+			);
            let self = this;
            ws.onmessage = function (e) {
 				let response = JSON.parse(e.data);
@@ -370,6 +421,12 @@ export default {

 			let selecting = false;
 			let lastSelected = this.selected.length > 0 && this.selected[this.selected.length - 1];
+			if (lastSelected == id) {
+				this.selected =  this.selected.filter(function(ele){ 
+					return ele != id; 
+				});
+				return
+			}

 			if (lastSelected === false) {
 				this.selected.push(id);
@@ -378,13 +435,17 @@ export default {

 			for (let d of this.items) {
 				if (selecting) {
-					this.selected.push(d.ID);
+					if (!this.isSelected(d.ID)) {
+						this.selected.push(d.ID);
+					}
 					if (d.ID == lastSelected || d.ID == id) {
 						// reached backwards select
 						break;
 					}
 				} else if (d.ID == id || d.ID == lastSelected) {
-					this.selected.push(d.ID);
+					if (!this.isSelected(d.ID)) {
+						this.selected.push(d.ID);
+					}
 					selecting = true;
 				}
 			}
@@ -416,7 +477,13 @@ export default {
 			<button class="btn btn-outline-secondary me-2" title="Mark unread" v-on:click="markUnread">
 				<i class="bi bi-eye-slash"></i> <span class="d-none d-md-inline">Mark unread</span>
 			</button>
-			<a :href="'api/' + message.ID + '/source?dl=1'" class="btn btn-outline-secondary me-2 float-end" title="Download message">
+			<a class="btn btn-outline-secondary float-end" :class="messageNext ? '':'disabled'" :href="'#'+messageNext" title="View next message">
+				<i class="bi bi-caret-right-fill"></i>
+			</a>
+			<a class="btn btn-outline-secondary ms-2 me-1 float-end" :class="messagePrev ? '': 'disabled'" :href="'#'+messagePrev" title="View previous message">
+				<i class="bi bi-caret-left-fill"></i>
+			</a>
+			<a :href="'api/' + message.ID + '/raw?dl=1'" class="btn btn-outline-secondary me-2 float-end" title="Download message">
 				<i class="bi bi-file-arrow-down-fill"></i> <span class="d-none d-md-inline">Download</span>
 			</a>
 		</div>
@@ -459,11 +526,10 @@ export default {
 				<small>
 					<b>{{ formatNumber(start + 1) }}-{{ formatNumber(start + items.length) }}</b> of <b>{{ formatNumber(total) }}</b>
 				</small>
-				<button class="btn btn-outline-secondary ms-2 me-1" :disabled="!canPrev" v-on:click="viewPrev"
-					v-if="!searching">
+				<button class="btn btn-outline-secondary ms-2 me-1" :disabled="!canPrev" v-on:click="viewPrev" v-if="!searching" :title="'View previous '+limit+' messages'">
 					<i class="bi bi-caret-left-fill"></i>
 				</button>
-				<button class="btn btn-outline-secondary" :disabled="!canNext" v-on:click="viewNext" v-if="!searching">
+				<button class="btn btn-outline-secondary" :disabled="!canNext" v-on:click="viewNext" v-if="!searching" :title="'View next '+limit+' messages'">
 					<i class="bi bi-caret-right-fill"></i>
 				</button>
 			</span>
@@ -485,7 +551,7 @@ export default {
 						<i class="bi bi-envelope me-1" v-if="isConnected"></i>
 						<i class="bi bi-arrow-clockwise me-1" v-else></i>
 						Inbox 
-						<span style="margin-top: -5px; margin-left: 5px;" class="position-absolute badge rounded-pill text-bg-secondary" title="Unread messages" v-if="unread">
+						<span class="badge rounded-pill text-bg-primary ms-1" title="Unread messages" v-if="unread">
 							{{ formatNumber(unread) }}
 						</span>
 					</a>
@@ -532,11 +598,15 @@ export default {
 						Enable alerts
 					</a>
 				</li>
-				<li class="mt-5 position-fixed bottom-0">
-					<a href="https://github.com/axllent/mailpit" target="_blank" class="text-muted w-100 d-block bg-white my-3">
+				<li class="mt-5 position-fixed bottom-0 bg-white py-2 text-muted">
+					<a href="https://github.com/axllent/mailpit" target="_blank" class="text-muted me-1">
 						<i class="bi bi-github"></i>
 						GitHub
 					</a>
+					/
+					<a href="https://github.com/axllent/mailpit/wiki" target="_blank" class="text-muted ms-1">
+						Docs
+					</a>
 				</li>
 			</ul>
 		</div>
@@ -546,14 +616,13 @@ export default {
 				<div class="list-group" v-if="items.length">
 					<a v-for="message in items" :href="'#'+message.ID" 
 						v-on:click.ctrl="toggleSelected($event, message.ID)" v-on:click.shift="selectRange($event, message.ID)" 
-						class="row message d-flex small list-group-item list-group-item-action"
+						class="row message d-flex small list-group-item list-group-item-action border-start-0 border-end-0"
 						:class="message.Read ? 'read':'', isSelected(message.ID) ? 'selected':''">
 						<div class="col-lg-3">
 							<div class="d-lg-none float-end text-muted text-nowrap small">
 								<i class="bi bi-paperclip h6 me-1" v-if="message.Attachments"></i>
 								{{ getRelativeCreated(message) }}
 							</div>
-
 							<div class="text-truncate d-lg-none privacy">
 								<span v-if="message.From" :title="message.From.Address">{{ message.From.Name ? message.From.Name : message.From.Address }}</span>
 							</div> 
--- a/server/ui-src/assets/_bootstrap_variables.scss
+++ b/server/ui-src/assets/_bootstrap_variables.scss
@@ -1 +1,2 @@
 $link-decoration: none;
+$primary: #3465b5;
--- a/server/ui-src/assets/styles.scss
+++ b/server/ui-src/assets/styles.scss
@@ -38,14 +38,14 @@
    color: $gray-500;
 }

-#nav-plain-text,
+#nav-plain-text .text-view,
 #nav-source {
    white-space: pre;
    font-family: Courier New, Courier, System, fixed-width;
    font-size: 0.85em;
 }

-#nav-plain-text {
+#nav-plain-text .text-view {
    white-space: pre-wrap;
 }

@@ -95,3 +95,192 @@ body.blur {
        filter: blur(3px);
    }
 }
+
+.card.attachment {
+    color: $gray-800;
+
+    .icon {
+        position: absolute;
+        top: 18px;
+        left: 0;
+        right: 0;
+        font-size: 3.5rem;
+        text-align: center;
+        color: $gray-300;
+    }
+
+    .card-body {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        overflow: hidden;
+        opacity: 0;
+    }
+
+    .card-footer {
+        background: $gray-300;
+
+        .bi {
+            font-size: 1.3em;
+            margin-left: -10px;
+        }
+    }
+
+    &:hover {
+        .card-body {
+            opacity: 1;
+            background: $gray-300;
+        }
+    }
+}
+
+/* PrismJS 1.29.0 - modified!
+https://prismjs.com/download.html#themes=prism-coy&languages=markup+css */
+code[class*="language-"],
+pre[class*="language-"] {
+    color: #000;
+    background: 0 0;
+    font-size: 0.85em;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+}
+pre[class*="language-"] {
+    position: relative;
+    overflow: visible;
+}
+pre[class*="language-"] > code {
+    position: relative;
+    z-index: 1;
+}
+code[class*="language-"] {
+    max-height: inherit;
+    height: inherit;
+    padding: 0 1em;
+    display: block;
+    overflow: auto;
+}
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+    background-color: #fdfdfd;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    margin-bottom: 1em;
+}
+:not(pre) > code[class*="language-"] {
+    position: relative;
+    padding: 0.2em;
+    border-radius: 0.3em;
+    color: #c92c2c;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    display: inline;
+    white-space: normal;
+}
+
+.token.block-comment,
+.token.cdata,
+.token.comment,
+.token.doctype,
+.token.prolog {
+    color: #7d8b99;
+}
+.token.punctuation {
+    color: #5f6364;
+}
+.token.boolean,
+.token.constant,
+.token.deleted,
+.token.function-name,
+.token.number,
+.token.property,
+.token.symbol,
+.token.tag {
+    color: #c92c2c;
+}
+.token.attr-name,
+.token.builtin,
+.token.char,
+.token.function,
+.token.inserted,
+.token.selector,
+.token.string {
+    color: #2f9c0a;
+}
+.token.entity,
+.token.operator,
+.token.url,
+.token.variable {
+    color: #a67f59;
+    background: rgba(255, 255, 255, 0.5);
+}
+.token.atrule,
+.token.attr-value,
+.token.class-name,
+.token.keyword {
+    color: #1990b8;
+}
+.token.important,
+.token.regex {
+    color: #e90;
+}
+.language-css .token.string,
+.style .token.string {
+    color: #a67f59;
+    background: rgba(255, 255, 255, 0.5);
+}
+.token.important {
+    font-weight: 400;
+}
+.token.bold {
+    font-weight: 700;
+}
+.token.italic {
+    font-style: italic;
+}
+.token.entity {
+    cursor: help;
+}
+.token.namespace {
+    opacity: 0.7;
+}
+@media screen and (max-width: 767px) {
+    pre[class*="language-"]:after,
+    pre[class*="language-"]:before {
+        bottom: 14px;
+        box-shadow: none;
+    }
+}
+pre[class*="language-"].line-numbers.line-numbers {
+    padding-left: 0;
+}
+pre[class*="language-"].line-numbers.line-numbers code {
+    padding-left: 3.8em;
+}
+pre[class*="language-"].line-numbers.line-numbers .line-numbers-rows {
+    left: 0;
+}
+pre[class*="language-"][data-line] {
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-left: 0;
+}
+pre[data-line] code {
+    position: relative;
+    padding-left: 4em;
+}
+pre .line-highlight {
+    margin-top: 0;
+}
--- a/server/ui-src/mixins.js
+++ b/server/ui-src/mixins.js
@@ -8,127 +8,183 @@ FakeModal.prototype.show = function () { alert('open fake modal') }

 /* Common mixin functions used in apps */
 const commonMixins = {
-    data() {
-        return {
-            loading: 0,
-        }
-    },
+	data() {
+		return {
+			loading: 0,
+		}
+	},

-    methods: {
-        getFileSize: function (bytes) {
-            var i = Math.floor(Math.log(bytes) / Math.log(1024));
-            return (bytes / Math.pow(1024, i)).toFixed(1) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
-        },
+	methods: {
+		getFileSize: function (bytes) {
+			var i = Math.floor(Math.log(bytes) / Math.log(1024));
+			return (bytes / Math.pow(1024, i)).toFixed(1) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
+		},

-        formatNumber: function (nr) {
-            return new Intl.NumberFormat().format(nr);
-        },
+		formatNumber: function (nr) {
+			return new Intl.NumberFormat().format(nr);
+		},

-        // Ajax error message
-        handleError: function (error) {
-            // handle error
-            if (error.response && error.response.data) {
-                // The request was made and the server responded with a status code
-                // that falls out of the range of 2xx
-                if (error.response.data.Error) {
-                    alert(error.response.data.Error)
-                } else {
-                    alert(error.response.data);
-                }
-            } else if (error.request) {
-                // The request was made but no response was received
-                // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
-                // http.ClientRequest in node.js
-                alert('Error sending data to the server. Please try again.');
-            } else {
-                // Something happened in setting up the request that triggered an Error
-                alert(error.message);
-            }
-        },
+		// Ajax error message
+		handleError: function (error) {
+			// handle error
+			if (error.response && error.response.data) {
+				// The request was made and the server responded with a status code
+				// that falls out of the range of 2xx
+				if (error.response.data.Error) {
+					alert(error.response.data.Error)
+				} else {
+					alert(error.response.data);
+				}
+			} else if (error.request) {
+				// The request was made but no response was received
+				// `error.request` is an instance of XMLHttpRequest in the browser and an instance of
+				// http.ClientRequest in node.js
+				alert('Error sending data to the server. Please try again.');
+			} else {
+				// Something happened in setting up the request that triggered an Error
+				alert(error.message);
+			}
+		},

-        // generic modal get/set function
-        modal: function (id) {
-            let e = document.getElementById(id);
-            if (e) {
-                return bootstrap.Modal.getOrCreateInstance(e);
-            }
-            // in case there are open/close actions
-            return new FakeModal();
-        },
+		// generic modal get/set function
+		modal: function (id) {
+			let e = document.getElementById(id);
+			if (e) {
+				return bootstrap.Modal.getOrCreateInstance(e);
+			}
+			// in case there are open/close actions
+			return new FakeModal();
+		},

-        // generic modal get/set function
-        offcanvas: function (id) {
-            var e = document.getElementById(id);
-            if (e) {
-                return bootstrap.Offcanvas.getOrCreateInstance(e);
-            }
-            // in case there are open/close actions
-            return new FakeModal();
-        },
+		// generic modal get/set function
+		offcanvas: function (id) {
+			var e = document.getElementById(id);
+			if (e) {
+				return bootstrap.Offcanvas.getOrCreateInstance(e);
+			}
+			// in case there are open/close actions
+			return new FakeModal();
+		},

-        /**
-         * Axios GET request
-         *
-         * @params string   url
-         * @params array    array parameters Object/array
-         * @params function callback function
-         */
-        get: function (url, values, callback) {
-            let self = this;
-            self.loading++;
-            axios.get(url, { params: values })
-                .then(callback)
-                .catch(self.handleError)
-                .then(function () {
-                    // always executed
-                    if (self.loading > 0) {
-                        self.loading--;
-                    }
-                });
-        },
+		/**
+		 * Axios GET request
+		 *
+		 * @params string   url
+		 * @params array    array parameters Object/array
+		 * @params function callback function
+		 */
+		get: function (url, values, callback) {
+			let self = this;
+			self.loading++;
+			axios.get(url, { params: values })
+				.then(callback)
+				.catch(self.handleError)
+				.then(function () {
+					// always executed
+					if (self.loading > 0) {
+						self.loading--;
+					}
+				});
+		},

-        /**
-         * Axios Post request
-         *
-         * @params string   url
-         * @params array    array parameters Object/array
-         * @params function callback function
-         */
-        post: function (url, values, callback) {
-            let self = this;
-            self.loading++;
-            axios.post(url, values)
-                .then(callback)
-                .catch(self.handleError)
-                .then(function () {
-                    // always executed
-                    if (self.loading > 0) {
-                        self.loading--;
-                    }
-                });
-        },
+		/**
+		 * Axios Post request
+		 *
+		 * @params string   url
+		 * @params array    array parameters Object/array
+		 * @params function callback function
+		 */
+		post: function (url, values, callback) {
+			let self = this;
+			self.loading++;
+			axios.post(url, values)
+				.then(callback)
+				.catch(self.handleError)
+				.then(function () {
+					// always executed
+					if (self.loading > 0) {
+						self.loading--;
+					}
+				});
+		},

-        /**
-         * Axios DELETE request (REST only)
-         *
-         * @params string   url
-         * @params array    array parameters Object/array
-         * @params function callback function
-         */
-        delete: function (url, values, callback) {
-            let self = this;
-            self.loading++;
-            axios.delete(url, { data: values })
-                .then(callback)
-                .catch(self.handleError)
-                .then(function () {
-                    // always executed
-                    if (self.loading > 0) {
-                        self.loading--;
-                    }
-                });
-        }
-    }
+		/**
+		 * Axios DELETE request (REST only)
+		 *
+		 * @params string   url
+		 * @params array    array parameters Object/array
+		 * @params function callback function
+		 */
+		delete: function (url, values, callback) {
+			let self = this;
+			self.loading++;
+			axios.delete(url, { data: values })
+				.then(callback)
+				.catch(self.handleError)
+				.then(function () {
+					// always executed
+					if (self.loading > 0) {
+						self.loading--;
+					}
+				});
+		},
+
+		allAttachments: function (message) {
+			let a = [];
+			for (let i in message.Attachments) {
+				a.push(message.Attachments[i]);
+			}
+			for (let i in message.OtherParts) {
+				a.push(message.OtherParts[i]);
+			}
+			for (let i in message.Inline) {
+				a.push(message.Inline[i]);
+			}
+
+			return a.length ? a : false;
+		},
+
+		isImage(a) {
+			return a.ContentType.match(/^image\//);
+		},
+
+		attachmentIcon: function (a) {
+			let ext = a.FileName.split('.').pop().toLowerCase();
+
+			if (a.ContentType.match(/^image\//)) {
+				return 'bi-file-image-fill';
+			}
+			if (a.ContentType.match(/\/pdf$/) || ext == 'pdf') {
+				return 'bi-file-pdf-fill';
+			}
+			if (['doc', 'docx', 'odt', 'rtf'].includes(ext)) {
+				return 'bi-file-word-fill';
+			}
+			if (['xls', 'xlsx', 'ods'].includes(ext)) {
+				return 'bi-file-spreadsheet-fill';
+			}
+			if (['ppt', 'pptx', 'key', 'ppt', 'odp'].includes(ext)) {
+				return 'bi-file-slides-fill';
+			}
+			if (['zip', 'tar', 'rar', 'bz2', 'gz', 'xz'].includes(ext)) {
+				return 'bi-file-zip-fill';
+			}
+			if (a.ContentType.match(/^audio\//)) {
+				return 'bi-file-music-fill';
+			}
+			if (a.ContentType.match(/^video\//)) {
+				return 'bi-file-play-fill';
+			}
+			if (a.ContentType.match(/\/calendar$/)) {
+				return 'bi-file-check-fill';
+			}
+			if (a.ContentType.match(/^text\//) || ['txt', 'sh', 'log'].includes(ext)) {
+				return 'bi-file-text-fill';
+			}
+
+			return 'bi-file-arrow-down-fill';
+		}
+	}
 }


--- a/server/ui-src/templates/Attachments.vue
+++ b/server/ui-src/templates/Attachments.vue
@@ -0,0 +1,37 @@
+
+<script>
+import commonMixins from '../mixins.js';
+
+export default {
+	props: {
+		message: Object,
+		attachments: Object
+	},
+
+	mixins: [commonMixins]
+}
+</script>
+
+<template>
+	<div class="mt-4 border-top pt-4">
+		<a v-for="part in attachments" :href="'api/'+message.ID+'/part/'+part.PartID" class="card attachment float-start me-3 mb-3" target="_blank" style="width: 180px">
+			<img v-if="isImage(part)" :src="'api/'+message.ID+'/part/'+part.PartID+'/thumb'" class="card-img-top" alt="">
+			<img v-else src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAB4AQMAAABhKUq+AAAAA1BMVEX///+nxBvIAAAAGUlEQVQYGe3BgQAAAADDoPtTT+EA1QAAgFsLQAAB12s2WgAAAABJRU5ErkJggg==" class="card-img-top" alt="">
+			<div class="icon" v-if="!isImage(part)">
+				<i class="bi" :class="attachmentIcon(part)"></i>
+			</div>
+			<div class="card-body border-0">
+				<p class="mb-1 text-muted">
+					<i class="bi me-1" :class="attachmentIcon(part)"></i>
+					<small>{{ getFileSize(part.Size) }}</small>
+				</p>
+				<p class="card-text mb-0 small">
+					{{ part.FileName != '' ? part.FileName : '[ unknown ]' }}
+				</p>
+			</div>
+				<div class="card-footer small border-0 text-center text-truncate">
+				{{ part.FileName != '' ? part.FileName : '[ unknown ]' }}
+			</div>
+		</a>
+	</div>
+</template>
--- a/server/ui-src/templates/Message.vue
+++ b/server/ui-src/templates/Message.vue
@@ -1,13 +1,21 @@

 <script>
 import commonMixins from '../mixins.js';
-import moment from 'moment'
+import moment from 'moment';
+import Prism from "prismjs";
+import Attachments from './Attachments.vue';

 export default {
 	props: {
 		message: Object
 	},
+
+	components: {
+		Attachments
+	},
+
 	mixins: [commonMixins],
+
 	data() {
 		return {
 			srcURI: false,
@@ -15,36 +23,28 @@ export default {
 		}
 	},

+	watch: {
+		message: {
+			handler(newQuestion) {
+				let self = this;
+				// delay 100ms to select first tab and add HTML highlighting (prev/next)
+				window.setTimeout(function() {
+					self.renderUI();
+				}, 100)
+			},
+			// force eager callback execution
+			immediate: true
+		}
+
+	},
+
 	mounted() {
-		var self = this;
-
+		let self = this;
 		window.addEventListener("resize", self.resizeIframes);
-
-		// click the first non-disabled tab
-		document.querySelector('#nav-tab button:not([disabled])').click();
-		document.activeElement.blur(); // blur focus
-
-		window.setTimeout(function(){
-			let p = document.getElementById('preview-html');
-
-			if (p) {
-				// make links open in new window
-				let anchorEls = p.contentWindow.document.body.querySelectorAll('a');
-				for (var i = 0; i < anchorEls.length; i++) {
-					let anchorEl = anchorEls[i];
-					let href = anchorEl.getAttribute('href');
-
-					if (href && href.match(/^http/)) {
-						anchorEl.setAttribute('target', '_blank');
-					}
-				}
-				self.resizeIframes();
-			}
-		}, 200);
-
-		var tabEl = document.getElementById('nav-source-tab');
+		self.renderUI();
+		var tabEl = document.getElementById('nav-raw-tab');
 		tabEl.addEventListener('shown.bs.tab', function (event) {
-			self.srcURI = 'api/' + self.message.ID + '/source';
+			self.srcURI = 'api/' + self.message.ID + '/raw';
 		});
 	},
 	
@@ -53,6 +53,37 @@ export default {
 	},

 	methods: {
+		renderUI: function() {
+			let self = this;
+			// click the first non-disabled tab
+			document.querySelector('#nav-tab button:not([disabled])').click();
+			document.activeElement.blur(); // blur focus
+			document.getElementById('message-view').scrollTop = 0;
+
+			window.setTimeout(function(){
+				let p = document.getElementById('preview-html');
+
+				if (p) {
+					// make links open in new window
+					let anchorEls = p.contentWindow.document.body.querySelectorAll('a');
+					for (var i = 0; i < anchorEls.length; i++) {
+						let anchorEl = anchorEls[i];
+						let href = anchorEl.getAttribute('href');
+
+						if (href && href.match(/^http/)) {
+							anchorEl.setAttribute('target', '_blank');
+						}
+					}
+					self.resizeIframes();
+				}
+			}, 200);
+
+			// html highlighting
+			window.Prism = window.Prism || {};
+			window.Prism.manual = true;
+			Prism.highlightAll();
+		},
+		
 		resizeIframe: function(el) {
 			let i = el.target;
 			i.style.height = i.contentWindow.document.body.scrollHeight + 50 + 'px';
@@ -70,20 +101,6 @@ export default {
 			}
 		},

-		allAttachments: function(message){
-			let a = [];
-			for (let i in message.Attachments) {
-				a.push(message.Attachments[i]);
-			}
-			for (let i in message.OtherParts) {
-				a.push(message.OtherParts[i]);
-			}
-			for (let i in message.Inline) {
-				a.push(message.Inline[i]);
-			}
-			
-			return a.length ? a : false;
-		},
 		messageDate: function(d) {
 			return moment(d).format('ddd, D MMM YYYY, h:mm a');
 		}
@@ -92,74 +109,97 @@ export default {
 </script>

 <template>
-	<div v-if="message" class="mh-100" style="overflow-y: scroll;">
-		<table class="messageHeaders">
-			<tbody>
-				<tr class="small">
-					<th>From</th>
-					<td class="privacy">
-						<span v-if="message.From">
-							<span v-if="message.From.Name">{{ message.From.Name + " " }}</span>
-							<span v-if="message.From.Address">&lt;{{ message.From.Address }}&gt;</span>
-						</span>
-						<span v-else>
-							[ Unknown ]
-						</span>
-					</td>
-				</tr>
-				<tr class="small">
-					<th>To</th>
-					<td class="privacy">
-						<span v-if="message.To" v-for="(t, i) in message.To">
-							<template v-if="i > 0">,</template>
-							{{ t.Name + " <" + t.Address +">" }}
-						</span>
-						<span v-else>Undisclosed recipients</span>
-					</td>
-				</tr>
-				<tr v-if="message.Cc" class="small">
-					<th>CC</th>
-					<td class="privacy">
-						<span v-for="(t, i) in message.Cc">
-							<template v-if="i > 0">,</template>
-							{{ t.Name + " <" + t.Address +">" }}
-						</span>
-					</td>
-				</tr>
-				<tr v-if="message.Bcc" class="small">
-					<th>CC</th>
-					<td class="privacy">
-						<span v-for="(t, i) in message.Bcc">
-							<template v-if="i > 0">,</template>
-							{{ t.Name + " <" + t.Address +">" }}
-						</span>
-					</td>
-				</tr>
-				<tr>
-					<th class="small">Subject</th>
-					<td><strong>{{ message.Subject }}</strong></td>
-				</tr>
-			</tbody>
-		</table>
+	<div v-if="message" id="message-view" class="mh-100" style="overflow-y: scroll;">
+		<div class="row w-100">
+			<div class="col-md">
+				<table class="messageHeaders">
+					<tbody>
+						<tr class="small">
+							<th>From</th>
+							<td class="privacy">
+								<span v-if="message.From">
+									<span v-if="message.From.Name">{{ message.From.Name + " " }}</span>
+									<span v-if="message.From.Address">&lt;{{ message.From.Address }}&gt;</span>
+								</span>
+								<span v-else>
+									[ Unknown ]
+								</span>
+							</td>
+						</tr>
+						<tr class="small">
+							<th>To</th>
+							<td class="privacy">
+								<span v-if="message.To" v-for="(t, i) in message.To">
+									<template v-if="i > 0">, </template>
+									<span class="text-nowrap">{{ t.Name + " <" + t.Address +">" }}</span>
+								</span>
+								<span v-else>Undisclosed recipients</span>
+							</td>
+						</tr>
+						<tr v-if="message.Cc" class="small">
+							<th>CC</th>
+							<td class="privacy">
+								<span v-for="(t, i) in message.Cc">
+									<template v-if="i > 0">,</template>
+									{{ t.Name + " <" + t.Address +">" }}
+								</span>
+							</td>
+						</tr>
+						<tr v-if="message.Bcc" class="small">
+							<th>CC</th>
+							<td class="privacy">
+								<span v-for="(t, i) in message.Bcc">
+									<template v-if="i > 0">,</template>
+									{{ t.Name + " <" + t.Address +">" }}
+								</span>
+							</td>
+						</tr>
+						<tr>
+							<th class="small">Subject</th>
+							<td><strong>{{ message.Subject }}</strong></td>
+						</tr>
+						<tr class="d-md-none">
+							<th class="small">Date</th>
+							<td>{{ messageDate(message.Date) }}</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<div class="col-md-auto text-md-end mt-md-3">
+				<p class="text-muted small d-none d-md-block"><small>{{ messageDate(message.Date) }}</small></p>
+				<div class="dropdown mt-2" v-if="allAttachments(message)">
+					<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+						Attachment<span v-if="allAttachments(message).length > 1">s</span>
+						({{ allAttachments(message).length }})
+					</button>
+					<ul class="dropdown-menu">
+						<li v-for="part in allAttachments(message)">
+							<a :href="'api/'+message.ID+'/part/'+part.PartID" type="button"
+								class="dropdown-item" target="_blank">
+								<i class="bi" :class="attachmentIcon(part)"></i>
+								{{ part.FileName != '' ? part.FileName : '[ unknown ]' }}
+								<small class="text-muted ms-2">{{ getFileSize(part.Size) }}</small>
+							</a>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>

 		<nav>
 			<div class="nav nav-tabs my-3" id="nav-tab" role="tablist">
 				<button class="nav-link" id="nav-html-tab" data-bs-toggle="tab"
 					data-bs-target="#nav-html" type="button" role="tab" aria-controls="nav-html"
-					aria-selected="true" :disabled="message.HTML == ''" :class="message.HTML == '' ? 'disabled':''">HTML</button>
+					aria-selected="true" v-if="message.HTML">HTML</button>
+				<button class="nav-link" id="nav-html-source-tab" data-bs-toggle="tab"
+					data-bs-target="#nav-html-source" type="button" role="tab" aria-controls="nav-html-source"
+					aria-selected="false" v-if="message.HTMLSource">HTML Source</button>
 				<button class="nav-link" id="nav-plain-text-tab" data-bs-toggle="tab"
 					data-bs-target="#nav-plain-text" type="button" role="tab" aria-controls="nav-plain-text"
-					aria-selected="false" :class="message.HTML == '' ? 'show':''">Plain<span class="d-none d-md-inline"> text</span></button>
-				<button class="nav-link" id="nav-source-tab" data-bs-toggle="tab"
-					data-bs-target="#nav-source" type="button" role="tab" aria-controls="nav-source"
-					aria-selected="false">Source</button>
-				<button class="nav-link" id="nav-mime-tab" data-bs-toggle="tab" data-bs-target="#nav-mime"
-					type="button" role="tab" aria-controls="nav-mime" aria-selected="false"
-					:disabled="!allAttachments(message)" :class="!allAttachments(message) ? 'disabled':''"
-					>Attachments <span v-if="allAttachments(message)">({{allAttachments(message).length}})</span></button>
-				<div class="d-none d-lg-block ms-auto small mt-3 me-2 text-muted">
-					<small>{{ messageDate(message.Date) }}</small>
-				</div>
+					aria-selected="false" :class="message.HTML == '' ? 'show':''">Text</button>
+				<button class="nav-link" id="nav-raw-tab" data-bs-toggle="tab"
+					data-bs-target="#nav-raw" type="button" role="tab" aria-controls="nav-raw"
+					aria-selected="false">Raw</button>
 			</div>
 		</nav>
 		<div class="tab-content mb-5" id="nav-tabContent">
@@ -168,27 +208,22 @@ export default {
 				<iframe target-blank="" class="tab-pane" id="preview-html" :srcdoc="message.HTML" v-on:load="resizeIframe"
 					seamless frameborder="0" style="width: 100%; height: 100%;">
 				</iframe>
+				<Attachments v-if="allAttachments(message).length" :message="message" :attachments="allAttachments(message)"></Attachments>
+			</div>
+			<div class="tab-pane fade" id="nav-html-source" role="tabpanel"
+				aria-labelledby="nav-html-source-tab" tabindex="0" v-if="message.HTMLSource">
+				<pre><code class="language-html">{{ message.HTMLSource }}</code></pre>
 			</div>
 			<div class="tab-pane fade" id="nav-plain-text" role="tabpanel"
 				aria-labelledby="nav-plain-text-tab" tabindex="0" :class="message.HTML == '' ? 'show':''">
-				{{ message.Text }}
+				<div class="text-view">{{ message.Text }}</div>
+				<Attachments v-if="allAttachments(message).length" :message="message" :attachments="allAttachments(message)"></Attachments>
 			</div>
-			<div class="tab-pane fade" id="nav-source" role="tabpanel" aria-labelledby="nav-source-tab"
+			<div class="tab-pane fade" id="nav-raw" role="tabpanel" aria-labelledby="nav-raw-tab"
 				tabindex="0">
 				<iframe v-if="srcURI" :src="srcURI" v-on:load="resizeIframe"
 					seamless frameborder="0" style="width: 100%; height: 300px;" id="message-src"></iframe>
 			</div>
-			<div class="tab-pane fade" id="nav-mime" role="tabpanel" aria-labelledby="nav-mime-tab"
-				tabindex="0">
-				<div v-if="allAttachments(message)" v-for="part in allAttachments(message)" class="mime-part mb-2">
-					<a :href="'api/'+message.ID+'/part/'+part.PartID" type="button"
-						class="btn btn-outline-secondary btn-sm me-2" target="_blank">
-						<i class="bi bi-file-arrow-down-fill"></i>
-						{{ part.FileName != '' ? part.FileName : '[ unknown ]' }}
-					</a>
-					<small class="text-muted">{{ getFileSize(part.Size) }}</small>
-				</div>
-			</div>
 		</div>
 	</div>
 </template>
--- a/storage/database.go
+++ b/storage/database.go
@@ -370,16 +370,17 @@ func GetMessage(id string) (*data.Message, error) {
 	date, _ := env.Date()

 	obj := data.Message{
-		ID:      id,
-		Read:    true,
-		From:    from,
-		Date:    date,
-		To:      addressToSlice(env, "To"),
-		Cc:      addressToSlice(env, "Cc"),
-		Bcc:     addressToSlice(env, "Bcc"),
-		Subject: env.GetHeader("Subject"),
-		Size:    len(raw),
-		Text:    env.Text,
+		ID:         id,
+		Read:       true,
+		From:       from,
+		Date:       date,
+		To:         addressToSlice(env, "To"),
+		Cc:         addressToSlice(env, "Cc"),
+		Bcc:        addressToSlice(env, "Bcc"),
+		Subject:    env.GetHeader("Subject"),
+		Size:       len(raw),
+		Text:       env.Text,
+		HTMLSource: env.HTML,
 	}

 	html := env.HTML
Author	SHA1	Message	Date
Ralph Slooten	fced6719b1	Merge branch 'release/1.1.6'	2022-09-19 22:18:01 +12:00
Ralph Slooten	d918fdb137	Release 1.1.6	2022-09-19 22:18:00 +12:00
Ralph Slooten	fd1346c5f4	Fix: Workaround for Safari source matching bug blocking event listener The current stable version of Safari does not treat ws: or wss: sockets as `self`. See: https://bugs.webkit.org/show_bug.cgi?id=235873 Resolves #13	2022-09-19 22:17:20 +12:00
Ralph Slooten	388bea740b	UI: Add documentation link (wiki)	2022-09-17 08:09:22 +12:00
Ralph Slooten	583df9ee1f	Merge tag '1.1.5' into develop Release 1.1.5	2022-09-16 23:27:57 +12:00
Ralph Slooten	8f05b97947	Merge branch 'release/1.1.5'	2022-09-16 23:27:55 +12:00
Ralph Slooten	8bdd0cc635	Release 1.1.5	2022-09-16 23:27:55 +12:00
Ralph Slooten	a372e8150e	Update README	2022-09-16 23:15:40 +12:00
Ralph Slooten	2bc2660ad5	Fix count of selected messages	2022-09-16 21:54:25 +12:00
Ralph Slooten	5d6aa7c48a	UI: Support for inline images using filenames instead of cid Some historic email programs use the attachment filename instead of a reference cid for inline images (eg: Outlook).	2022-09-16 18:40:29 +12:00
Ralph Slooten	997e041042	Build: Switch to esbuild-sass-plugin	2022-09-16 14:59:28 +12:00
Ralph Slooten	5c362c1430	Merge tag '1.1.4' into develop Release 1.1.4	2022-09-15 21:54:19 +12:00
Ralph Slooten	9219b2d411	Merge branch 'release/1.1.4'	2022-09-15 21:54:16 +12:00
Ralph Slooten	86abc7ea68	Release 1.1.4	2022-09-15 21:54:16 +12:00
Ralph Slooten	867dbf41d5	UI: Minor UI color change & unread count position adjustment	2022-09-15 21:52:22 +12:00
Ralph Slooten	51e458ad57	Security: Add restrictive HTTP Content-Security-Policy	2022-09-15 21:23:27 +12:00
Ralph Slooten	d29a7d6218	Update README	2022-09-15 17:40:39 +12:00
Ralph Slooten	f6a8de3215	UI: Add favicon unread message counter	2022-09-14 22:37:47 +12:00
Ralph Slooten	4e2e59ec87	Update README	2022-09-14 17:25:56 +12:00
Ralph Slooten	6aeebb9824	UI: Remove left & right borders (message list)	2022-09-14 17:14:36 +12:00
Ralph Slooten	a426f64795	Feature: Add --quiet flag to display only errors	2022-09-14 17:14:26 +12:00
Ralph Slooten	b228c9477e	Merge branch 'release/1.1.3'	2022-09-14 16:46:50 +12:00
Ralph Slooten	d70f2fd196	Release 1.1.3	2022-09-14 16:46:50 +12:00
Ralph Slooten	0da89d91dd	Fix: Update message download link	2022-09-14 16:45:23 +12:00
Ralph Slooten	edab9e1b6b	Merge tag '1.1.2' into develop Release 1.1.2	2022-09-14 13:44:25 +12:00
Ralph Slooten	66aead387e	Merge branch 'release/1.1.2'	2022-09-14 13:44:23 +12:00
Ralph Slooten	efe1ac732e	Release 1.1.2	2022-09-14 13:44:23 +12:00
Ralph Slooten	33dcd489eb	UI: Allow reverse proxy subdirectories	2022-09-14 13:43:38 +12:00
Ralph Slooten	6b2e5b2e41	mod tidy	2022-09-14 13:42:13 +12:00
Ralph Slooten	812c9b99d1	Update installation instructions	2022-09-14 12:11:52 +12:00
Ralph Slooten	8202c94a43	Merge tag '1.1.1' into develop Release 1.1.1	2022-09-12 22:12:54 +12:00
Ralph Slooten	c1d4a73440	Merge branch 'release/1.1.1'	2022-09-12 22:12:51 +12:00
Ralph Slooten	8e100ff21b	Release 1.1.1	2022-09-12 22:12:51 +12:00
Ralph Slooten	088b772de5	UI: Attachment icons and image thumbnails	2022-09-12 22:11:51 +12:00
Ralph Slooten	faf8bd4a08	Merge tag '1.1.0' into develop Release 1.1.0	2022-09-10 00:00:42 +12:00
Ralph Slooten	0e83a5a985	Merge branch 'release/1.1.0'	2022-09-10 00:00:36 +12:00
Ralph Slooten	3ee91eb6c8	Release 1.1.0	2022-09-10 00:00:36 +12:00
Ralph Slooten	5cd0a6e2f3	UI tweaks	2022-09-09 23:57:53 +12:00
Ralph Slooten	fea733a43e	UI: HTML source & highlighting	2022-09-09 23:34:35 +12:00
Ralph Slooten	d4e520772e	Remove redundant npm dependency ('remove')	2022-09-04 22:04:26 +12:00
Ralph Slooten	e4a7212f89	Reload UI on prev/next message	2022-09-03 23:02:10 +12:00
Ralph Slooten	e6a5fceedd	UI: Add previous/next message links	2022-09-03 22:46:38 +12:00
Ralph Slooten	bf4d5fbc6b	Update changelog format	2022-09-03 19:20:51 +12:00
Ralph Slooten	93c3dec66e	Merge tag '1.0.0' into develop Release 1.0.0	2022-09-03 19:13:46 +12:00